/* Material Symbols icon font (the mockup omitted this, so icons showed as words) */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
}

/* ---- Complex-script support (Tamil) ----
   The bug: with no Tamil font in the stack the browser resolves a base consonant
   and its combining vowel sign from DIFFERENT fonts. That splits one grapheme
   cluster into two font runs, each shaped separately, so the orphaned mark gets a
   dotted circle (U+25CC) and the base looks detached. The text itself is fine.

   The fix: pin the whole Tamil block (plus ZWNJ/ZWJ, which join Tamil clusters)
   to a single font via unicode-range, so a cluster can never span two fonts. */
@font-face {
  font-family: "TamilUI";
  src: local("Noto Sans Tamil"), local("Nirmala UI"), local("Latha"),
       local("Tamil Sangam MN"), local("Noto Sans Tamil UI");
  unicode-range: U+0B80-0BFF, U+200C-200D, U+25CC;
  font-display: swap;
}

/* "TamilUI" only claims the Tamil range, so Latin still uses Hanken Grotesk. */
#text, #reader, #docTitle, #sttResult {
  font-family: "Hanken Grotesk", "TamilUI", "Noto Sans Tamil", "Nirmala UI",
               "Latha", "Tamil Sangam MN", sans-serif !important;
}

/* Read-along highlighting */
.reader-surface { cursor: default; }
.w {
  border-radius: 5px;
  padding: 1px 2px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.w:hover { background: rgba(255, 255, 255, 0.12); }
.w-active { background: #ffffff; color: #141313; padding: 1px 4px; }
.sent { border-radius: 6px; transition: background 0.2s; }
.sent-active { background: rgba(255, 255, 255, 0.08); }
/* Non-spoken tokens in the reader: [pause: 1s] tags and [Name]: speaker labels */
.w-tag { opacity: 0.4; user-select: none; border-radius: 5px; padding: 1px 2px; }

/* Seek slider thumb (overlay is transparent; thumb kept subtle) */
input[type="range"].seek { -webkit-appearance: none; appearance: none; background: transparent; }
input[type="range"].seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: transparent;
}
input[type="range"].seek::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%; background: transparent;
}

/* Thin scrollbars */
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #3a3939; border-radius: 8px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll { scrollbar-width: thin; scrollbar-color: #3a3939 transparent; }

/* Simple spinner for the toast */
.spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile sidebar transition */
@media (max-width: 767px) {
  #sidebar {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
}

/* File DropZone Drag Over */
#dropZone.drag-over {
  outline: 2px dashed rgba(255, 255, 255, 0.4);
  outline-offset: 4px;
}

/* Tone Filter Chips */
.tone-chip {
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

/* Cue-insert & style-prompt chips - distinct "island" pills so each option
   reads as its own element instead of blending into the menu surface. */
.cue-opt, .style-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: #1c1b1b;                       /* darker than the menu surface */
  border: 1px solid rgba(142, 145, 146, 0.3); /* subtle outline */
  color: #d8d8d8;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cue-opt:hover, .style-chip:hover {
  background: #353434;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Hide the browser's built-in clear/reveal widgets inside text inputs
   (Edge draws an "x" clear button when an input has content). */
input::-ms-clear, input::-ms-reveal { display: none; width: 0; height: 0; }

/* All checkboxes: indigo accent when ticked (the forms plugin fills the
   checked box with currentColor and draws a white checkmark on top) */
input[type="checkbox"] { color: #6d7cff; }

/* Always reserve the main scrollbar's space so centered content sits at the
   same position whether or not a view scrolls (keeps every page's heading
   aligned). */
main { scrollbar-gutter: stable; }

/* Align the header hamburger with the collapsed rail's icon column (centre at
   36px). Shift the icon 8px left inside the same-width button box so the
   VoxGemini title stays put. */
#mobileMenuBtn { padding-left: 0; padding-right: 16px; }

/* Toast: sit clear above the ~131px player, and (on desktop) centre over the
   content area rather than the whole viewport by shifting right half the
   sidebar width. */
#status { bottom: 150px; transition: left 0.2s ease; }
@media (min-width: 768px) {
  #status { left: calc(50% + 128px); }             /* expanded sidebar: 256/2 */
  body.sidebar-collapsed #status { left: calc(50% + 36px); } /* collapsed rail: 72/2 */
}

/* Collapsible desktop sidebar rail. On desktop, body.sidebar-collapsed shrinks
   the sidebar to an icon-only rail; the hamburger toggles it. On mobile the
   sidebar stays an overlay and these rules are inert. */
#sidebar { transition: width 0.2s ease; }
#playerBar { transition: left 0.2s ease; }
/* Labels never wrap while the rail animates. Overflow is clipped PER ITEM (not
   on the whole sidebar) so the collapsed rail's active highlight and icons are
   never shaved on the right edge. */
#sidebar .nav-item, #newDocBtn { white-space: nowrap; overflow: hidden; }
/* Labels and footer fade in (after the panel has started widening) rather than
   popping; on collapse they fade out fast so the width change stays clean. */
#sidebar .nav-item > span:not(.material-symbols-outlined),
#sidebarFooter { transition: opacity 0.15s ease 0.08s; }
#sidebarFooter { white-space: nowrap; overflow: hidden; }
@media (min-width: 768px) {
  body.sidebar-collapsed #sidebar { width: 72px; }
  body.sidebar-collapsed #playerBar { left: 72px; }
  /* Centre the 24px icon in the 40px rail content area (72px rail - 2x16px
     sidebar padding): (40 - 24) / 2 = 8px side padding. Animates via the
     button's transition-all, so it doesn't jump. */
  body.sidebar-collapsed #sidebar .nav-item { padding-left: 8px; padding-right: 8px; }
  body.sidebar-collapsed #sidebar .nav-item > span:not(.material-symbols-outlined),
  body.sidebar-collapsed #sidebarFooter {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease; /* fade out immediately when collapsing */
  }
  body.sidebar-collapsed #newDocBtn > span:not(.material-symbols-outlined) { display: none; }
}

/* Compact icon buttons + group dividers in the editor / transcript toolbars */
.tbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  border-radius: 8px;
  background: #201f1f;               /* surface-container */
  color: #d8d8d8;                    /* concrete */
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tbar-icon:hover { background: #2a2a2a; color: #ffffff; }
/* Multi-Speaker active state: setSpeakerMode adds bg-white; this two-class rule
   wins over .tbar-icon so the toggle stays visible. */
.tbar-icon.bg-white { background: #ffffff; color: #141313; }
.tbar-icon.bg-white:hover { background: #d8d8d8; color: #141313; }
.tbar-sep {
  width: 1px;
  height: 22px;
  background: rgba(142, 145, 146, 0.35);
  align-self: center;
  margin: 0 2px;
}

/* Unsaved-changes dot on the editor's Save button */
.save-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #6d7cff;
}

/* Record buttons while the microphone is live */
#sttRecordBtn.dictating, #dictateBtn.dictating {
  background: #93000a;
  color: #ffffff;
  animation: rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 180, 171, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(255, 180, 171, 0); }
}

/* Help modal: numbered step badges and keyboard key caps */
.step-num {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #ffffff; color: #141313;
  font-weight: 700; font-size: 12px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.kbd {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: #0e0e0e;
  border: 1px solid #444748;
  border-bottom-width: 2px;
  color: #ffffff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; line-height: 16px;
  white-space: nowrap;
}

/* Voice Avatar Container & Hover */
.voice-avatar-container {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}
.voice-card:hover .voice-avatar-container {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}