/* ─────────────────────────────────────────────────────────────────────────────
   msc.css — MSCore component stylesheet
   Override any variable in your own app.css. Never edit this file directly.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Override surface ──────────────────────────────────────────────────────── */
:root {
  --msc-brand:             #14829F;
  --msc-brand-dark:        #004F76;

  /* Content width constraints */
  --msc-content-width:     700px;
  --msc-content-wide:      800px;
  --msc-content-narrow:    560px;

  /* Avatar sizes */
  --msc-avatar-sm:         32px;
  --msc-avatar-md:         36px;
  --msc-avatar-lg:         72px;

  /* Chat layout */
  --msc-chat-height:       420px;
  --msc-bubble-width:      72%;

  /* Editor containers */
  --msc-editor-height:     400px;
  --msc-editor-height-sm:  320px;

  /* Constrained selects */
  --msc-select-width-sm:   160px;
  --msc-select-width-md:   220px;
  --msc-select-width-lg:   260px;

  /* Sidebar */
  --msc-sidebar-width:     260px;
}

/* ── Body defaults ─────────────────────────────────────────────────────────── */
html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* ── Content wrappers ──────────────────────────────────────────────────────── */
.msc-content        { max-width: var(--msc-content-width); }
.msc-content-wide   { max-width: var(--msc-content-wide); }
.msc-content-narrow { max-width: var(--msc-content-narrow); }

/* ── Avatar sizes ──────────────────────────────────────────────────────────── */
.msc-avatar-sm {
  width:  var(--msc-avatar-sm);
  height: var(--msc-avatar-sm);
  object-fit: cover;
}
.msc-avatar-md {
  width:  var(--msc-avatar-md);
  height: var(--msc-avatar-md);
  object-fit: cover;
}
.msc-avatar-lg {
  width:  var(--msc-avatar-lg);
  height: var(--msc-avatar-lg);
  object-fit: cover;
}

/* ── Support chat ──────────────────────────────────────────────────────────── */
.msc-chat-window {
  height: var(--msc-chat-height);
  overflow-y: auto;
}
.msc-chat-bubble { max-width: var(--msc-bubble-width); }

/* ── Quill editor containers ───────────────────────────────────────────────── */
.msc-editor    { min-height: var(--msc-editor-height); }
.msc-editor-sm { min-height: var(--msc-editor-height-sm); }

/* ── Constrained form selects ──────────────────────────────────────────────── */
.msc-select-sm { max-width: var(--msc-select-width-sm); }
.msc-select-md { max-width: var(--msc-select-width-md); }
.msc-select-lg { max-width: var(--msc-select-width-lg); }

/* ── Misc utilities ────────────────────────────────────────────────────────── */
.msc-row-link    { cursor: pointer; }
.msc-no-underline { text-decoration: none; }
.msc-empty-state  { padding: 4rem 0; text-align: center; }

/* ── Sidebar app shell ─────────────────────────────────────────────────────── */

/* Sticky full-height sidebar column on desktop */
.msc-sidebar {
  width: var(--msc-sidebar-width);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  flex-shrink: 0;
}

/* SVG icon alignment (used inline in sidebar nav links) */
.msc-icon {
  vertical-align: -0.125em;
  fill: currentColor;
  pointer-events: none;
}

/* Mobile sidebar toggle — floats in the top-left corner, out of page flow */
.msc-mobile-toggle {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 0.4rem 0.6rem;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.msc-mobile-toggle.msc-toggle-scrolled {
  background-color: var(--bs-body-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Push content down on mobile so it clears the toggle button */
@media (max-width: 991.98px) {
  .msc-content-offset {
    padding-top: 3.5rem !important;
  }
}

/* ── Theme-aware logo ──────────────────────────────────────────────────────── */
/* Show light logo by default; swap to dark logo when theme is dark */
.msc-logo-dark { display: none; }
[data-bs-theme="dark"] .msc-logo-light { display: none; }
[data-bs-theme="dark"] .msc-logo-dark  { display: inline; }

/* ── Auth pages ────────────────────────────────────────────────────────────── */

/* Body centering for login / register / otp layouts */
.msc-signin-body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  min-height: 100vh;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

/* Registration form — same centering pattern, wider to fit the name grid */
.form-register {
  max-width: 460px;
}

/* Prevent stacked floating-label focus rings from clipping */
.form-signin .form-floating:focus-within {
  z-index: 2;
}

/* Fused email + password inputs (remove shared border between them) */
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.otp-input {
  width: 3rem;
  height: 3.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

/* ── Media Viewer ──────────────────────────────────────────────────────────── */
:root {
  --msc-viewer-video-height: 70vh;
  --msc-viewer-embed-height: 75vh;
  --msc-viewer-doc-height:   65vh;
}

/* Container for <video> inside the viewer modal */
.msc-viewer-video {
  height: var(--msc-viewer-video-height);
}

/* Container for <embed> (PDF) inside the viewer modal */
.msc-viewer-embed {
  height: var(--msc-viewer-embed-height);
}

/* Scrollable container for DOCX, XLSX, CSV, and TXT rendered output */
.msc-viewer-doc {
  max-height: var(--msc-viewer-doc-height);
  overflow-y: auto;
}

/* Constrain images converted from DOCX by mammoth.js */
.msc-docx-body img {
  max-width: 100%;
  height: auto;
}