/* Voice to Music — interface.
 *
 * Dark is the default and needs no system setting to get it: the tokens on
 * :root ARE the dark theme. Light exists as an opt-in under
 * :root[data-theme="light"], so a viewer who wants it can have it without the
 * default ever depending on prefers-color-scheme.
 *
 * Every control is a capsule. The one rule that follows from that: a capsule
 * holds a label, never a sentence — anything longer belongs outside it, or in
 * a title attribute.
 */

:root {
  color-scheme: dark;               /* native audio controls render dark too */

  /* WowDash-inspired palette: deep navy ground, a visibly darker sidebar
     plane than the content cards sitting on it, and a blue/violet accent —
     swapped in live 2026-09-04 as a like-for-like repaint of these same
     tokens, so every component below (already selector-stable for JS) picks
     it up with no markup changes. */
  --bg:          #121933;
  --bg-sidebar:  #0c1226;
  --surface:     #1b234a;
  --surface-2:   #232c58;
  --surface-3:   #2c3768;
  --line:        #313c72;
  --line-strong: #47549a;

  --ink:      #eef1fc;
  --ink-dim:  #9aa3d4;
  --ink-faint:#6c76ab;

  --accent:      #6f5aff;
  --accent-soft: #262f66;
  --accent-ink:  #ffffff;

  --ok-bg:  #163326;  --ok-ink:  #7fdca4;
  --warn-bg:#332a12;  --warn-ink:#f0c479;
  --danger: #ff6f6f;  --danger-bg:#331a1e;

  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-sm:   10px;

  --shadow: 0 1px 2px rgba(6,9,24,.4), 0 12px 28px -14px rgba(6,9,24,.65);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #eef0f8;
  --bg-sidebar:  #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f4f5fc;
  --surface-3:   #e8eaf8;
  --line:        #dadeef;
  --line-strong: #b9c0e2;

  --ink:      #14161c;
  --ink-dim:  #5d6472;
  --ink-faint:#8992a1;

  --accent:      #5b46e5;
  --accent-soft: #eceaff;
  --accent-ink:  #ffffff;

  --ok-bg:  #e8f6ee;  --ok-ink:  #1c6b41;
  --warn-bg:#fdf3e2;  --warn-ink:#8a5a10;
  --danger: #c02b28;  --danger-bg:#fdeceb;

  --shadow: 0 1px 2px rgba(16,20,30,.06), 0 8px 24px -14px rgba(16,20,30,.18);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: none; box-shadow: var(--ring); }

/* ------------------------------------------------------------- app shell */
/* The persistent nav (aside.sidebar, navbar-header, dashboard-main) is now
   WowDash's own real markup and CSS, loaded before this file — nothing here
   redefines .sidebar/.dashboard-main/.navbar-header any more. What is left
   below is only what WowDash's kit has no equivalent for: the session list
   inside chat.html's own chat-sidebar (functional classes only — visual
   chrome comes from WowDash's chat-sidebar-single, dual-classed in the
   templates), and the recorder/consent/composer/chooser components. */

.inline { display: inline-flex; margin: 0; }

/* All of what follows now lives inside WowDash's own real
   ul#sidebar-menu > li structure (see _sidebar.html) — a folder is
   li.dropdown.sidebar__group with WowDash's own <a> + ul.sidebar-submenu
   (their accordion, via wowdash/js/app.js, opens/closes and auto-expands
   the active thread's folder; nothing here reimplements that), and a
   session row is an <li class="sidebar__item"> inside that submenu or the
   flat unfiled list. Only the parts WowDash's kit has no equivalent for —
   rename/delete icons, the count badge, drag-drop states — are styled
   here. */

/* Sign out sits in the sidebar's own Account group now (no navbar dropdown
   any more) — a <button> so it can POST, styled to match WowDash's real
   .sidebar-menu li a exactly since that rule only targets <a>. */
.sidebar__signout-form { margin: 0; }
.sidebar__signout {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 0.625rem 0.75rem; margin: 0;
  font: inherit; font-weight: 500; font-size: 0.875rem; line-height: inherit;
  display: flex; align-items: center; justify-content: flex-start; text-align: left;
  color: var(--text-secondary-light, var(--ink-dim)); background: transparent; border: 0; outline: 0;
  border-radius: 8px; cursor: pointer;
}
.sidebar__signout:hover { color: var(--danger); }
.sidebar__signout .menu-icon { font-size: 1.125rem; margin-inline-end: 0.5rem; }

/* Mobile App Header (< 1200px):
   Provides a clean top bar housing the hamburger drawer toggle, brand,
   and theme switch so controls never float or collide with the card content.
   On desktop (>= 1200px), display: contents leaves the theme toggle floating
   in its corner and hides the mobile drawer button/brand. */
.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 25;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.mobile-topbar__brand {
  text-decoration: none !important;
  color: var(--ink) !important;
  display: flex;
  align-items: center;
  user-select: none;
}
.mobile-topbar__brand:hover {
  color: var(--ink) !important;
}

.main-mobile-toggle {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-faint) !important;
  box-shadow: none !important;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1 !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-mobile-toggle:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}
.main-mobile-toggle .icon {
  font-size: 18px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.main-theme-toggle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  cursor: pointer;
  flex-shrink: 0;
  position: relative !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.main-theme-toggle:hover {
  background: var(--surface-3) !important;
  border-color: var(--line-strong) !important;
}

/* Language toggle: same circle as the theme toggle, sitting right beside
   it — .lang-toggle-form and .mobile-topbar__actions both use
   display:contents so neither wrapper adds a box of its own; the button
   is what actually gets laid out (and, on desktop, fixed-positioned). */
.lang-toggle-form { display: contents; }
.main-lang-toggle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.main-lang-toggle:hover {
  background: var(--surface-3) !important;
  border-color: var(--line-strong) !important;
}

/* Ensure remixicon in theme toggle is centered inside the 40px circle */
[data-theme-toggle]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Standalone theme toggle on unauthenticated/logged-out pages */
body > .main-theme-toggle {
  position: fixed !important;
  top: 12px !important;
  right: 16px !important;
  z-index: 30;
  box-shadow: var(--shadow) !important;
}

/* Desktop layout (>= 1200px):
   The persistent sidebar handles brand/navigation. The top bar wrapper disappears
   (display: contents) and the theme toggle sits cleanly at the top-right corner. */
@media (min-width: 1200px) {
  .mobile-topbar {
    display: contents !important;
  }
  .mobile-topbar__brand,
  .sidebar-mobile-toggle {
    display: none !important;
  }
  .mobile-topbar__actions {
    display: contents !important;
  }
  .main-theme-toggle {
    position: fixed !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 30;
    box-shadow: var(--shadow) !important;
  }
  .main-lang-toggle {
    position: fixed !important;
    top: 12px !important;
    right: 64px !important;
    z-index: 30;
    box-shadow: var(--shadow) !important;
  }
}

/* Tablet & Mobile layout adjustments (< 1200px) */
@media (max-width: 1199px) {
  .dashboard-main {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .mobile-topbar {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    flex: 0 0 52px;
  }
  .dashboard-main-body {
    padding: 12px 12px;
  }
  /* Chat page: docked full-viewport layout with composer always sticking to bottom */
  .dashboard-main-body--chat,
  .dashboard-main-body:has(.chat-wrapper) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: calc(100vh - 52px);
    height: calc(100dvh - 52px);
    max-height: calc(100vh - 52px);
    max-height: calc(100dvh - 52px);
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }
  .chat-wrapper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .chat-wrapper .chat-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .chat-wrapper .chat-message-list#stream {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .chat-wrapper .chat-composer {
    flex: 0 0 auto;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.07);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  body.overlay-active::after {
    z-index: 90 !important;
  }
  .sidebar.sidebar-open {
    z-index: 100 !important;
  }
}
@media (max-width: 640px) {
  .dashboard-main-body {
    padding: 8px 8px;
  }
  .dashboard-main-body--chat,
  .dashboard-main-body:has(.chat-wrapper) {
    padding: 0 !important;
  }
}

/* Desktop collapse toggle: in the sidebar's own header row, right of the
   logo (see _sidebar.html .sidebar-header-row) — not floating over the
   content area. WowDash's own .sidebar-toggle already handles
   >=1200px-only visibility and the non-active/active icon swap; this only
   sizes/spaces it to sit next to the logo cleanly. */
.sidebar-header-collapse {
  flex: none; width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  color: var(--ink-faint);
}
.sidebar-header-collapse:hover { background: var(--surface-2); color: var(--ink); }
.sidebar-header-collapse .icon { font-size: 16px; }

/* Mobile sidebar close button: styled identically to desktop collapse toggle,
   positioned inline in the .sidebar-logo row next to the logo. */
.sidebar-close-btn.sidebar-header-collapse {
  position: static !important;
  top: auto !important;
  right: auto !important;
  inset-inline-end: auto !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--ink-faint) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
.sidebar-close-btn.sidebar-header-collapse:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}
.sidebar-close-btn.sidebar-header-collapse .icon {
  font-size: 16px !important;
}

@media (min-width: 1200px) {
  .sidebar-close-btn,
  .sidebar-close-btn.sidebar-header-collapse {
    display: none !important;
  }
}

@media (max-width: 1199px) {
  .sidebar-toggle {
    display: none !important;
  }
  .sidebar-close-btn.sidebar-header-collapse {
    display: flex !important;
  }
}

/* Pin Pricing/Settings/Sign out (.sidebar-footer) to the bottom of the
   sidebar, always visible, instead of scrolling away with a long session
   list. WowDash's own .sidebar-menu-area sets a fixed height
   (calc(100vh - 72px)) assuming it's the sidebar's only content area — a
   flex column here makes it the flexible middle instead, so it shrinks to
   leave room for the footer rather than pushing it off-screen. */
.sidebar { display: flex; flex-direction: column; }
.sidebar-menu-area { flex: 1 1 auto; height: auto; min-height: 0; }
.sidebar-footer {
  flex: none; padding: 0.75rem 1rem;
  border-block-start: 1px solid var(--line);
}
.sidebar-footer .sidebar-menu { margin: 0; }

/* WowDash's own .sidebar.active:hover expands a collapsed rail back out
   (a hover-flyout, at three different widths depending on viewport) — a
   deliberate feature there, but the collapse TOGGLE now lives inside the
   sidebar itself (next to the logo, per request), so the cursor is still
   over .sidebar the instant it's clicked: the flyout rule fired
   immediately and undid the collapse it was supposed to start. Same
   selector, unconditional, loaded after style.css — wins over all three
   of WowDash's width values regardless of viewport.

   Pinning the width alone wasn't enough: WowDash's hover-flyout also has
   companion rules that re-reveal nav labels, the group-title, and the
   dropdown arrow (all display:none in the plain collapsed state,
   display:inline-block on hover) — those still fired, showing text
   cramped into an 86px rail. Mirrored back to the collapsed values here,
   same selectors, so hovering a collapsed rail does nothing but normal
   link/button hover — no flyout preview at all. */
.sidebar.active:hover { width: 86px; }
.sidebar.active:hover .sidebar-menu li a span,
.sidebar.active:hover .sidebar-menu li.sidebar-menu-group-title,
.sidebar.active:hover .sidebar-menu li.dropdown a::after {
  display: none;
}
.sidebar.active:hover .sidebar-menu li.dropdown.dropdown-open .sidebar-submenu,
.sidebar.active:hover .sidebar-menu li.dropdown.open .sidebar-submenu {
  display: none !important;
}
.sidebar.active:hover .sidebar-menu li a .menu-icon { margin-inline-end: 0; }

/* In collapsed rail mode, the sign out button (a <button> inside a <form>,
   not an <a>) should behave exactly like the links: hide text label and
   center the icon, with no text spilling outside the rail. */
.sidebar.active .sidebar__signout span,
.sidebar.active:hover .sidebar__signout span {
  display: none !important;
}
.sidebar.active .sidebar__signout .menu-icon,
.sidebar.active:hover .sidebar__signout .menu-icon {
  margin-inline-end: 0;
}

/* Sidebar logo with .landing-brand */
.sidebar-logo .landing-brand {
  gap: 10px;
}

.sidebar.active .sidebar-logo .landing-brand__text,
.sidebar.active:hover .sidebar-logo .landing-brand__text {
  display: none !important;
}

.sidebar.active .sidebar-logo {
  justify-content: center !important;
  padding: 0.875rem 0.5rem !important;
}

/* The unfiled session list is a flat <ul> (not inside a .dropdown li), so
   WowDash's own submenu-hiding rule — scoped to
   li.dropdown.(dropdown-)open .sidebar-submenu — never touched it either:
   a collapsed 86px rail was still showing full session rows at full width.
   Collapsed means icons only, so every submenu (folder or flat) hides,
   regardless of its own open/closed or inline display state. */
.sidebar.active .sidebar-submenu,
.sidebar.active:hover .sidebar-submenu {
  display: none !important;
}

/* WowDash's own .sidebar-menu .sidebar-submenu indents 1.5rem (2.75rem at
   >=1650px) — meant for a genuinely nested demo menu. Our submenus (a
   folder's sessions, or the flat unfiled list) read as a big empty gutter
   at that depth for a single level of nesting, so it's tightened here.
   Same selector/specificity as WowDash's own rule; this file loads after
   theirs, so it wins on source order without needing !important. */
.sidebar-menu .sidebar-submenu { padding-inline-start: 0.5rem; }

/* ------------------------------------------------------------- sidebar search */

/* Sidebar search link — inherits WowDash's .sidebar-menu li a shape exactly,
   matching + (New session), New folder, Sessions, and Folders in font size,
   padding, icon alignment, and hover color in both expanded and collapsed modes. */
.sidebar-menu li.sidebar__search-item {
  list-style: none;
}
.sidebar-menu li.sidebar__search-item > a {
  cursor: pointer;
}
.sidebar__search-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar__search-text {
  font-size: inherit;
  color: inherit;
}
.sidebar__search-kbd {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.2;
  user-select: none;
  pointer-events: none;
}
.sidebar.active .sidebar__search-label,
.sidebar.active:hover .sidebar__search-label,
.sidebar.active .sidebar__search-kbd,
.sidebar.active:hover .sidebar__search-kbd {
  display: none !important;
}

/* Top-level 'Sessions' navigation item:
   Only shows its icon when the sidebar panel is collapsed/hidden into 86px rail mode.
   When the menu sidebar is shown (on mobile view or expanded desktop), it is hidden. */
.sidebar__sessions-item {
  display: none !important;
}
.sidebar.active .sidebar__sessions-item,
.sidebar.active:hover .sidebar__sessions-item {
  display: block !important;
}

/* ---------------------------------------------------------- folder groups */

.sidebar__group { position: relative; }
.sidebar__group-toggle-row {
  position: relative;
  padding-inline-end: 80px !important;
}
.sidebar__group-toggle-row span[data-folder-name] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sidebar__group-count {
  flex: none; font-size: 10.5px; color: var(--ink-faint);
  background: var(--surface-2); border-radius: var(--radius-pill); padding: 1px 7px;
  margin-inline-start: 6px;
}

/* Rename/delete are inline with the folder's dropdown arrow (which sits at right: 12px).
   Locked strictly to top: 0; height: 38px of the folder header row, so they NEVER float
   down over sessions when a folder is expanded, and only appear on header row hover. */
.sidebar__group-actions {
  position: absolute;
  top: 0;
  height: 38px;
  inset-inline-end: 30px;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease;
}
.sidebar__group-toggle-row:hover + .sidebar__group-actions,
.sidebar__group-actions:hover,
.sidebar__group-actions:focus-within,
.sidebar__group-rename:focus-visible,
.sidebar__group-delete:focus-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sidebar__group-rename, .sidebar__group-delete {
  flex: none; width: 22px; height: 22px; padding: 0; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.sidebar__group-rename:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line-strong); }
.sidebar__group-delete:hover { background: var(--danger-bg); color: var(--danger); border-color: transparent; }

/* When sidebar is collapsed into rail mode, disable/hide the edit name and remove buttons on folders */
.sidebar.active .sidebar__group-actions,
.sidebar.active:hover .sidebar__group-actions {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.sidebar__empty--folder { padding: 6px 11px; font-size: 12px; color: var(--ink-faint); list-style: none; }

/* --------------------------------------------------- folder load more */

.sidebar__group.is-hidden-folder {
  display: none !important;
}
.sidebar__folders-more-item {
  list-style: none;
}
.sidebar__folders-more-item > a {
  cursor: pointer;
  color: var(--ink-faint) !important;
  font-size: 13px !important;
  transition: color .15s ease;
}
.sidebar__folders-more-item > a:hover {
  color: var(--primary-600) !important;
}
.sidebar.active .sidebar__folders-more-item > a,
.sidebar.active:hover .sidebar__folders-more-item > a {
  padding: 0.625rem 0.75rem !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}
.sidebar.active .sidebar__folders-more-item > a .menu-icon,
.sidebar.active:hover .sidebar__folders-more-item > a .menu-icon {
  margin-inline-end: 0 !important;
  font-size: 1.125rem !important;
}

/* ----------------------------------------------------------- search modal */

.search-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 24px;
  background: rgba(10, 14, 29, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modalFadeIn .15s cubic-bezier(.16, 1, .3, 1);
}
[data-theme=dark] .search-modal-backdrop {
  background: rgba(4, 7, 18, 0.75);
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: min(520px, 78vh);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  animation: modalSlideUp .18s cubic-bezier(.16, 1, .3, 1);
}
@keyframes modalSlideUp {
  from { transform: translateY(-12px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.search-modal-search-icon {
  font-size: 20px;
  color: var(--accent);
  flex: none;
}
.search-modal-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 500;
  color: var(--ink) !important;
  height: auto !important;
}
.search-modal-input::placeholder {
  color: var(--ink-faint);
  font-weight: 400;
}
.search-modal-close-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.search-modal-esc-kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  user-select: none;
  transition: all .12s;
}
.search-modal-close-btn:hover .search-modal-esc-kbd {
  background: var(--surface-3);
  color: var(--ink);
  border-color: var(--line-strong);
}

.search-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 10px;
  min-height: 140px;
}
.search-modal-meta-bar {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
}

.search-modal-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.search-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background .1s;
  user-select: none;
}
.search-modal-item:hover,
.search-modal-item.is-selected {
  background: var(--surface-2);
  outline: none;
}
[data-theme=dark] .search-modal-item.is-selected,
[data-theme=dark] .search-modal-item:hover {
  background: var(--surface-3);
}
.search-modal-item.is-selected .search-modal-item-title {
  color: var(--accent);
}
.search-modal-item-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: 16px;
  transition: all .1s;
}
.search-modal-item.is-selected .search-modal-item-icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.search-modal-item-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-modal-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-modal-item-title {
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.search-modal-item-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.search-modal-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-faint);
}
.search-modal-item-folder {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-dim);
  background: var(--surface-3);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10.5px;
}
.search-modal-item-action {
  flex: none;
  color: var(--ink-faint);
  font-size: 14px;
  opacity: 0;
  transition: opacity .1s, transform .1s;
}
.search-modal-item.is-selected .search-modal-item-action,
.search-modal-item:hover .search-modal-item-action {
  opacity: 1;
  color: var(--accent);
  transform: translateX(2px);
}

.search-modal-empty {
  padding: 36px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.search-modal-empty-icon {
  font-size: 32px;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.search-modal-empty-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.search-modal-empty-hint {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0;
}

.search-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--ink-faint);
}
.search-modal-footer-hints {
  display: flex;
  align-items: center;
  gap: 14px;
}
.search-modal-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.search-modal-hint kbd {
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 4px;
}
.search-modal-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background .12s;
}
.search-modal-new-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Drag and drop: native HTML5 DnD (see sidebar.js). The dragged row dims in
   place — the browser already draws its own drag image — and a valid drop
   target gets an accent outline the instant a dragged item passes over it. */
.sidebar__item.is-dragging { opacity: .35; }
.sidebar__group-toggle-row.is-drop-target,
.sidebar-submenu.is-drop-target {
  outline: 2px dashed var(--accent); outline-offset: -2px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
}

/* A flex row, not an absolutely-positioned button floated over a full-width
   link: overlaying them made the click target's stacking depend on hover
   timing, and a real Chromium click (verified with Playwright, not just
   visual inspection) intermittently resolved to the link underneath instead
   of the delete button — which is exactly the "the x doesn't work" bug this
   replaced. Flex siblings occupy disjoint regions, so there is no overlap
   for the browser to arbitrate. */
.sidebar__item { display: flex; align-items: center; cursor: grab; list-style: none; }
.sidebar__item:active { cursor: grabbing; }
/* WowDash's own .sidebar-menu .sidebar-submenu li.active-page a rule
   (specificity 0,3,2 — WowDash's own JS adds .active-page here, same as
   .is-active) was winning the background/color fight against a plain
   .sidebar__item.is-active > .sidebar__item-link rule (0,3,0): same class
   count, but WowDash's has two type selectors where mine had none, and
   type-count is the tiebreaker once class-count ties. The result in light
   mode: WowDash's pale --button-secondary background stayed, while a
   *separate*, uncontested rule below still forced the title text to white
   — white text nobody could read on a pale background. Matching WowDash's
   selector shape wins the fight outright instead of only half of it. */
.sidebar-menu .sidebar-submenu li.sidebar__item.is-active a.sidebar__item-link {
  background: var(--accent); color: var(--accent-ink);
}
.sidebar-menu .sidebar-submenu li.sidebar__item.is-active .sidebar__item-meta {
  color: color-mix(in srgb, #fff 70%, transparent);
}

/* WowDash's own .sidebar-menu li a sets align-items: center at specificity
   (0,1,2) — a plain .sidebar__item-link class rule (0,1,0) loses that fight
   even though it loads later, and with flex-direction: column (below) that
   means CENTER became the cross-axis (horizontal) alignment: every title
   and date rendered centered in the row instead of left-aligned, which is
   the "big gap on the left" — it isn't padding, it's centered text in a
   wide box. Matching WowDash's own selector shape (.sidebar-menu li a...)
   is what actually wins the specificity fight; a bare class or !important
   would have been papering over the real cause. */
.sidebar-menu li a.sidebar__item-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  flex: 1 1 auto; min-width: 0; text-decoration: none; color: var(--ink);
  border-radius: var(--radius-sm); text-align: left;
}
.sidebar__item-title {
  display: block; font-size: 13.5px; font-weight: 500; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-menu .sidebar-submenu li.sidebar__item.is-active .sidebar__item-title { color: var(--accent-ink); font-weight: 600; }
.sidebar__item-meta {
  display: block; font-size: 10.5px; color: var(--ink-faint);
}

/* Inline rename input (sessions and folders — see sidebar.js
   startInlineEdit). Blends into the label it replaces — no box, no fill,
   just a faint underline that only picks up color on focus — rather than
   announcing itself as a form field dropped into a nav row. */
.sidebar__inline-edit {
  display: block; width: 100%; padding: 0; margin: 0;
  background: transparent; color: inherit;
  border: 0; border-bottom: 1px dashed var(--ink-faint); border-radius: 0;
  font: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
}
.sidebar__inline-edit:focus { outline: none; border-bottom-color: var(--accent); }

.sidebar__item-rename, .sidebar__item-delete {
  flex: none; margin-inline-start: 2px;
  width: 24px; height: 24px; padding: 0; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--ink-faint);
  border-radius: var(--radius-sm); opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.sidebar__item:hover .sidebar__item-rename,
.sidebar__item:hover .sidebar__item-delete,
.sidebar__item-rename:focus-visible,
.sidebar__item-delete:focus-visible { opacity: 1; }
.sidebar__item-rename:hover { background: var(--surface-3); color: var(--ink); }
.sidebar__item-delete:hover { background: var(--danger-bg); color: var(--danger); }

.sidebar__empty { padding: 14px 11px; font-size: 12.5px; color: var(--ink-faint); list-style: none; }

/* ------------------------------------------------------------------ page */
/* Settings/Pricing/auth pages render inside WowDash's dashboard-main-body
   (authenticated) or .auth-main (not) — both unconstrained by WowDash's own
   CSS, so the same narrow reading width from before still applies here. */

.page { max-width: 960px; margin: 0 auto; padding: 28px 16px 44px; }
.page--narrow { max-width: 400px; margin: 0 auto; }

.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 9px 0; font-size: 13.5px;
}
.settings-row + .settings-row { border-top: 1px solid var(--line); }

/* --------------------------------------------------------------- pricing */

/* WowDash's own .featured-item pulls itself up 50px at >=1400px — built for
   their tabbed "Pricing Plan Multiple Color" section, where the featured
   card is taller and the negative margin re-aligns it against shorter
   siblings. Our 3 equal-height cards don't have that height difference, so
   the same rule just yanked the whole Fun card up into the heading above
   it — that's the "price overlaps the title" report. Neutralized here
   rather than in the featured card's own padding, since the -50px is
   WowDash's, not ours. */
.featured-item { margin-top: 0 !important; }

/* Cards rise in on load (staggered per-card via the inline animation-delay
   set in pricing.html) and lift slightly on hover — WowDash's own
   .pricing-plan has neither. */
@keyframes pricing-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.pricing-plan {
  animation: pricing-rise .5s cubic-bezier(.2,.7,.3,1) both;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pricing-plan:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* Motion inside the card too, not just the card itself: the icon badge
   settles into a gentle bob, and the CTA nudges up and brightens slightly
   on its own hover — small, but it's what makes the card feel responsive
   rather than just a static rectangle that moved. */
.pricing-plan__badge { transition: transform .25s ease; }
.pricing-plan:hover .pricing-plan__badge { transform: rotate(-6deg) scale(1.08); }
.pricing-plan__cta { transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.pricing-plan__cta:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.35);
}
.pricing-plan__cta:active:not(:disabled) { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .pricing-plan { animation: none; }
  .pricing-plan:hover { transform: none; }
  .pricing-plan:hover .pricing-plan__badge { transform: none; }
  .pricing-plan__cta:hover:not(:disabled) { transform: none; }
}

.plan-grid {
  display: grid; gap: 16px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.plan-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: 22px 20px; display: flex; flex-direction: column;
}
.plan-card--current { border-color: var(--accent); }
.plan-card__badge {
  position: absolute; top: -10px; right: 16px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.plan-card__name { font-size: 18px; margin: 0 0 10px; }
.plan-card__price { font-size: 26px; font-weight: 650; letter-spacing: -.02em; margin: 0; }
.plan-card__price span { font-size: 13px; font-weight: 500; }
.plan-card__price-usd { font-size: 13px; margin: 2px 0 0; }
.plan-card__features {
  list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px;
  font-size: 13px; color: var(--ink-dim); flex: 1 1 auto;
}
.plan-card__features li { padding-left: 18px; position: relative; }
.plan-card__features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.plan-card__button {
  display: block; width: 100%; padding: 10px; text-align: center;
  text-decoration: none; font-weight: 600;
}

h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 6px; }
/* Settings' own page title only — plain <h1> is also blocked.html's "Limit
   reached", which stays at the default size. */
h1.page-title { font-size: 20px; }
h2 { font-size: 15px; letter-spacing: -.01em; margin: 0 0 12px; }
.eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); margin: 0 0 10px;
}
.muted, .hint { color: var(--ink-dim); font-size: 13px; }
.hint { margin: 10px 0 0; min-height: 1em; }
.hint--error { color: var(--danger); }

/* Privacy/Terms/Refund (music/legal.html) — cross-links between the three,
   and breathing room between sections inside the one long panel. */
.legal-nav { display: flex; gap: 16px; margin: 18px 0 6px; }
.legal-nav a { color: var(--ink-dim); text-decoration: underline; }
.legal-nav a:hover { color: var(--ink); }
.legal-nav__current { color: var(--ink); font-weight: 600; }
.legal-section + .legal-section { margin-top: 22px; }
.legal-section p { margin: 0 0 10px; line-height: 1.6; }
.legal-section p:last-child { margin-bottom: 0; }
.is-hidden { display: none !important; }

/* Constrain desktop chat area to focused, centered reading column like ChatGPT/Claude */
.chat-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.chat-wrapper .chat-main {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  margin-top: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  overflow: visible;
}

.chat-main {
  max-height: calc(100vh - 48px);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.chat-wrapper .chat-message-list#stream,
.chat-message-list#stream {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  max-height: none !important;
  min-height: 160px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow-y: auto;
}

/* --- Middle-Center Greeting for Fresh Sessions --------------------------- */
.chat-greeting {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: auto 0;
  padding: 36px 20px;
  text-align: center;
  user-select: none;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-greeting.is-hidden {
  display: none !important;
}

.chat-greeting.is-fading-out {
  opacity: 0;
  transform: translateY(-16px) scale(0.97);
}

.chat-greeting__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 580px;
  animation: greetingFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes greetingFadeUp {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



.chat-greeting__title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #1e293b 0%, #4f46e5 50%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .chat-greeting__title {
  background: linear-gradient(135deg, #ffffff 15%, #818cf8 55%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.chat-greeting__subtitle {
  font-size: 14.5px;
  color: var(--ink-dim);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  max-width: 440px;
}

@media (max-width: 767.98px) {
  .chat-greeting {
    min-height: 180px;
    padding: 24px 14px;
  }
  .chat-greeting__title {
    font-size: 25px;
    letter-spacing: -0.025em;
  }
  .chat-greeting__subtitle {
    font-size: 13px;
  }
}

@media (min-width: 1200px) {
  .chat-wrapper .chat-message-list#stream,
  .chat-message-list#stream {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .chat-wrapper .chat-composer {
    margin-top: 10px;
    margin-bottom: 12px;
  }
}

/* ---------------------------------------------------------------- stream */

/* ------------------------------------------------------------- scrollbars */
/* Invisible track (no scrollbar line/gutter), handle shows ONLY on hover or scroll */

.chat-message-list::-webkit-scrollbar,
#stream::-webkit-scrollbar,
.chat-wrapper .chat-message-list#stream::-webkit-scrollbar,
.sidebar-menu-area::-webkit-scrollbar,
.style-drawer::-webkit-scrollbar,
.stream::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  background: transparent !important;
  background-color: transparent !important;
}

.chat-message-list::-webkit-scrollbar-track,
#stream::-webkit-scrollbar-track,
.chat-wrapper .chat-message-list#stream::-webkit-scrollbar-track,
.sidebar-menu-area::-webkit-scrollbar-track,
.style-drawer::-webkit-scrollbar-track,
.stream::-webkit-scrollbar-track {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.chat-message-list::-webkit-scrollbar-thumb,
#stream::-webkit-scrollbar-thumb,
.chat-wrapper .chat-message-list#stream::-webkit-scrollbar-thumb,
.sidebar-menu-area::-webkit-scrollbar-thumb,
.style-drawer::-webkit-scrollbar-thumb,
.stream::-webkit-scrollbar-thumb {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 9999px !important;
  transition: background-color 0.25s ease;
}

/* Handle reveals on container hover, thumb hover, or active scroll */
.chat-message-list:hover::-webkit-scrollbar-thumb,
#stream:hover::-webkit-scrollbar-thumb,
.chat-wrapper .chat-message-list#stream:hover::-webkit-scrollbar-thumb,
.chat-message-list.is-scrolling::-webkit-scrollbar-thumb,
#stream.is-scrolling::-webkit-scrollbar-thumb,
.chat-wrapper .chat-message-list#stream.is-scrolling::-webkit-scrollbar-thumb,
.sidebar-menu-area:hover::-webkit-scrollbar-thumb,
.sidebar-menu-area.is-scrolling::-webkit-scrollbar-thumb,
.style-drawer:hover::-webkit-scrollbar-thumb,
.style-drawer.is-scrolling::-webkit-scrollbar-thumb,
.stream:hover::-webkit-scrollbar-thumb,
.stream.is-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(130, 135, 155, 0.45) !important;
}

.chat-message-list::-webkit-scrollbar-thumb:hover,
#stream::-webkit-scrollbar-thumb:hover,
.chat-wrapper .chat-message-list#stream::-webkit-scrollbar-thumb:hover,
.sidebar-menu-area::-webkit-scrollbar-thumb:hover,
.style-drawer::-webkit-scrollbar-thumb:hover,
.stream::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 105, 130, 0.75) !important;
}

/* Dark mode thumb coloring */
[data-theme="dark"] .chat-message-list:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] #stream:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-wrapper .chat-message-list#stream:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-message-list.is-scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] #stream.is-scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-wrapper .chat-message-list#stream.is-scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-menu-area:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-menu-area.is-scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] .style-drawer:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] .style-drawer.is-scrolling::-webkit-scrollbar-thumb,
[data-theme="dark"] .stream:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] .stream.is-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.28) !important;
}

[data-theme="dark"] .chat-message-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] #stream::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-wrapper .chat-message-list#stream::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .sidebar-menu-area::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .style-drawer::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .stream::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Standard Firefox scrollbar properties (applied only when webkit scrollbars are unsupported) */
@supports not selector(::-webkit-scrollbar) {
  .chat-message-list,
  #stream,
  .chat-wrapper .chat-message-list#stream,
  .sidebar-menu-area,
  .style-drawer,
  .stream {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .chat-message-list:hover,
  #stream:hover,
  .chat-wrapper .chat-message-list#stream:hover,
  .chat-message-list.is-scrolling,
  #stream.is-scrolling,
  .chat-wrapper .chat-message-list#stream.is-scrolling,
  .sidebar-menu-area:hover,
  .sidebar-menu-area.is-scrolling,
  .style-drawer:hover,
  .style-drawer.is-scrolling,
  .stream:hover,
  .stream.is-scrolling {
    scrollbar-color: rgba(130, 135, 155, 0.45) transparent;
  }

  [data-theme="dark"] .chat-message-list:hover,
  [data-theme="dark"] #stream:hover,
  [data-theme="dark"] .chat-wrapper .chat-message-list#stream:hover,
  [data-theme="dark"] .chat-message-list.is-scrolling,
  [data-theme="dark"] #stream.is-scrolling,
  [data-theme="dark"] .chat-wrapper .chat-message-list#stream.is-scrolling,
  [data-theme="dark"] .sidebar-menu-area:hover,
  [data-theme="dark"] .sidebar-menu-area.is-scrolling,
  [data-theme="dark"] .style-drawer:hover,
  [data-theme="dark"] .style-drawer.is-scrolling,
  [data-theme="dark"] .stream:hover,
  [data-theme="dark"] .stream.is-scrolling {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  }
}

.bubble { display: flex; animation: rise .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }

/* Avatar for system / assistant messages: hidden per ChatGPT-style unboxed layout */
.bubble > .avatar-lg,
.chat-single-message.left > .avatar-lg {
  display: none !important;
}

/* Assistant / AI responses: Unboxed layout like ChatGPT (no bubble, no circle S) */
.chat-single-message.left {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline-start: 0 !important;
  margin-bottom: 16px;
  padding: 0;
}
.chat-single-message.left .chat-message-content,
.chat-single-message.left .bubble__body {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  color: var(--ink) !important;
  font-size: 14.5px;
  line-height: 1.6;
}
.chat-single-message.left .chat-message-content p {
  color: var(--ink) !important;
  margin: 0 0 8px 0;
  font-size: 14.5px;
  line-height: 1.6;
}
.chat-single-message.left .chat-message-content p:last-child {
  margin-bottom: 0;
}
.chat-single-message.left .chat-time {
  color: var(--ink-faint) !important;
  font-size: 11px;
  text-align: start !important;
  margin-top: 4px;
}

/* Special embedded AI widgets: Song card, Composing wave, Error */
.chat-single-message.left.bubble--song .chat-message-content,
.chat-single-message.left.bubble--song .bubble__body {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  padding: 16px 18px !important;
  max-width: min(100%, 540px) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-top: 6px;
  margin-bottom: 6px;
}
.chat-single-message.left.bubble--composing .chat-message-content,
.chat-single-message.left.bubble--composing .bubble__body {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  padding: 12px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  max-width: fit-content !important;
  box-shadow: var(--shadow-sm) !important;
}
.chat-single-message.left.bubble--error .chat-message-content,
.chat-single-message.left.bubble--error .bubble__body {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)) !important;
  border-radius: var(--radius-card) !important;
  padding: 12px 16px !important;
  max-width: min(100%, 540px) !important;
}

/* User messages: distinctive bubble on the right like ChatGPT */
.chat-single-message.right {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline-start: auto !important;
  margin-bottom: 16px;
}
.chat-single-message.right .chat-message-content,
.chat-single-message.right .bubble__body {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #2f5bff)) !important;
  border: none !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 10px 16px !important;
  max-width: min(82%, 520px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  font-size: 14px;
  line-height: 1.5;
}
.chat-single-message.right .chat-message-content p {
  color: #fff !important;
  margin: 0 0 4px 0;
}
.chat-single-message.right .chat-message-content p:last-child {
  margin-bottom: 0;
}
.chat-single-message.right .chat-time {
  color: rgba(255, 255, 255, 0.75) !important;
  text-align: end !important;
  font-size: 11px;
  margin-top: 4px;
}

.bubble--user_audio .meta, .bubble--user_audio summary,
.bubble--user_image .meta, .bubble--user_note .meta { color: color-mix(in srgb, #fff 80%, transparent); }
.bubble--user_audio .tag, .bubble--user_image .tag {
  background: rgba(255,255,255,.2); color: #fff;
}
.bubble__photo {
  display: block; max-width: 100%; max-height: 260px;
  border-radius: var(--radius-sm);
}
.note-text { white-space: pre-wrap; }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-dim); margin-top: 7px;
}
.meta a { color: inherit; }
.tag {
  display: inline-flex; align-items: center;
  background: var(--surface-3); color: var(--ink-dim);
  border-radius: var(--radius-pill); padding: 3px 10px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.tag--provider { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }

audio {
  width: 100%; min-width: 220px; max-width: 340px; height: 34px;
  margin-top: 6px; display: block; border-radius: var(--radius-pill);
}
.song__title { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }

details { margin-top: 8px; }
details summary {
  cursor: pointer; font-size: 12px; color: var(--ink-dim);
  list-style: none; padding: 3px 0; user-select: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; display: inline-block; transition: transform .15s; }
details[open] summary::before { content: "▾ "; }
details p, details pre {
  margin: 8px 0 0; font-size: 13px; color: var(--ink-dim);
  white-space: pre-wrap; font-family: inherit; line-height: 1.6;
}

.angle {
  margin: 8px 0; padding: 8px 12px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
  font-size: 13.5px; font-style: italic; color: var(--ink);
}

.notice {
  font-size: 12.5px; border-radius: var(--radius-sm);
  padding: 9px 12px; margin: 10px 0 0; line-height: 1.5;
}
.notice--stub { background: var(--accent-soft); color: var(--ink); }
.notice--limit { background: var(--warn-bg); color: var(--warn-ink); }
.notice--error { background: var(--danger-bg); color: var(--danger); }

/* composing bubble */
.composing { display: flex; align-items: center; gap: 14px; }
.wave { display: flex; align-items: center; gap: 3px; height: 28px; flex: none; }
.wave i {
  display: block; width: 3px; height: 30%; border-radius: var(--radius-pill);
  background: var(--accent); animation: pulse 1.1s ease-in-out infinite;
}
.wave i:nth-child(2){animation-delay:.1s} .wave i:nth-child(3){animation-delay:.2s}
.wave i:nth-child(4){animation-delay:.3s} .wave i:nth-child(5){animation-delay:.4s}
.wave i:nth-child(6){animation-delay:.5s} .wave i:nth-child(7){animation-delay:.6s}
@keyframes pulse { 0%,100% { height:22% } 50% { height:100% } }
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; height: 60%; } }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 14px 15px; margin-top: 10px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.panel + .panel { margin-top: 9px; }

/* Consent gate reads as a real, blocking prompt rather than just another
   card in the stack — a dark backdrop behind it (via box-shadow spread
   covering the whole viewport, rendered strictly OUTSIDE the card) so the
   card itself stays crisp, fully opaque, and distinctly above the dark layer
   in both light and dark modes, with high text contrast. */
.consent {
  position: relative; z-index: 20;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .65), 0 16px 40px -8px rgba(0, 0, 0, .4);
}
.consent p {
  color: var(--ink) !important;
  line-height: 1.6;
}
.consent .eyebrow {
  color: var(--accent);
}
.consent .check {
  color: var(--ink);
}
.check {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 14px 0; font-size: 14px; cursor: pointer; line-height: 1.5;
}
/* WowDash's own global reset (button, input, select, textarea {
   appearance: none; background: transparent; ... }) strips the native
   checkbox box entirely — accent-color does nothing once there's no native
   control left to color, so this rendered as a fully invisible, still-
   clickable 16px square. Drawn as a real custom checkbox instead: a
   bordered box that fills and gets its own checkmark on :checked, owned
   completely rather than relying on native rendering WowDash already
   removed. */
.check input {
  appearance: none; -webkit-appearance: none;
  margin: 2px 0 0; width: 17px; height: 17px; flex: none;
  border: 1.5px solid var(--line-strong); border-radius: 4px;
  background: var(--surface-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.check input:hover { border-color: var(--accent); }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after {
  content: ""; width: 5px; height: 9px;
  border: solid var(--accent-ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.composer { padding: 10px 12px; flex: none; }
.composer.is-busy { opacity: .4; pointer-events: none; }

/* --- Bottom Docked Chat Composer ----------------------------------------- */
.chat-composer {
  padding: 10px 14px 12px;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-composer:focus-within {
  border-color: var(--line-strong);
}

/* Collapsible Style Drawer */
.style-drawer {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-card) - 2px);
  padding: 12px 14px;
  margin-bottom: 10px;
  max-height: 52vh;
  overflow-y: auto;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.style-drawer.is-collapsed {
  display: none !important;
}
.style-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.style-drawer__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.style-drawer__close {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: 18px;
  transition: color .12s;
}
.style-drawer__close:hover {
  color: var(--ink);
}

.style-section {
  margin-bottom: 10px;
}
.style-section__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.chips--quick-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.chip--auto {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}
.chip--auto.is-selected {
  background: var(--accent);
  color: var(--accent-ink);
}
.style-catalog-dropdown {
  margin: 6px 0;
  font-size: 12px;
}
.style-catalog-dropdown summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 550;
  padding: 2px 0;
}
.style-custom-input input {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: var(--radius-pill);
  margin-top: 4px;
}

.style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.style-col {
  flex: 1 1 160px;
}
.chips--voice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chips--voice .chip {
  padding: 2px 8px;
  font-size: 11.5px;
}

/* Chat Input Row */
.chat-input-row {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 6px;
  margin-bottom: 8px;
  transition: border-color .15s ease, background .15s ease;
}
.chat-input-row:focus-within {
  border-color: var(--accent);
  background: var(--surface);
}

/* Staged attachments row */
.staged-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.staged-attachments.is-hidden {
  display: none !important;
}

/* Staged Attachment Chip */
.staged-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  max-width: 220px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all .15s ease;
}
.staged-chip--audio {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
}
.staged-chip--image {
  padding-left: 4px;
}
.staged-chip__icon {
  font-size: 15px;
  color: var(--accent);
  flex: none;
}
.staged-chip__thumb {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  flex: none;
}
.staged-chip__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.staged-chip__meta {
  font-size: 11px;
  color: var(--ink-dim);
  font-feature-settings: "tnum";
}
.staged-chip__remove {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  margin-left: 2px;
  transition: color .12s;
  flex: none;
}
.staged-chip__remove:hover {
  color: var(--danger);
}

.chat-input-inner {
  display: flex;
  align-items: flex-end;
  width: 100%;
  position: relative;
}
.chat-input-inner textarea {
  width: 100%;
  min-height: 42px;
  height: 42px;
  max-height: 140px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  resize: vertical;
}
.chat-input-inner textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}
.note-send-btn {
  position: absolute;
  right: 6px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
}
.note-send-btn:hover {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.note-send-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.note-send-legacy {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

/* Composer action toolbar */
.composer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.composer-toolbar__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.composer-toolbar__right {
  display: flex;
  align-items: center;
  flex: none;
  margin-inline-start: auto;
}

/* Action button for photo and upload */
.btn-action {
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  color: var(--ink-dim);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all .12s ease;
}
.btn-action:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-action .icon {
  font-size: 16px;
}

/* Style Pill button */
.btn-style-pill {
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all .15s ease;
}
.btn-style-pill:hover,
.btn-style-pill.is-open {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.btn-style-pill .icon {
  font-size: 15px;
}
.btn-style-pill .pill-arrow {
  font-size: 13px;
  opacity: .75;
}

/* Seamless inline clip label inside the budget row */
.budget { margin-bottom: 6px; }
.budget__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 4px;
  gap: 12px;
}
.budget__clip-label,
.budget__row input[type="text"]#clip-label {
  width: auto;
  max-width: 150px;
  flex: 0 1 150px;
  min-width: 0;
  height: 18px;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink) !important;
  line-height: 18px;
}
.budget__clip-label::placeholder,
.budget__row input[type="text"]#clip-label::placeholder {
  color: var(--ink-dim) !important;
  opacity: 0.75;
}
.budget__clip-label:hover,
.budget__row input[type="text"]#clip-label:hover {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.budget__clip-label:hover::placeholder,
.budget__row input[type="text"]#clip-label:hover::placeholder {
  opacity: 1;
}
.budget__clip-label:focus,
.budget__row input[type="text"]#clip-label:focus {
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--ink) !important;
}
#budget-label {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ink-dim);
}
.btn-make-song {
  height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .18s ease;
}
.composer.mode-revise .btn-make-song {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 82%, #10b981) 100%);
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn-generate {
  height: 38px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Drop target. Outlined rather than filled so the controls underneath stay
   readable while a file is over the page. */
.composer.is-dropping {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.composer.is-dropping::after {
  content: "Drop audio or photos to add them to this session";
  display: block; margin-top: 14px; padding: 14px;
  border: 1px dashed var(--accent); border-radius: var(--radius-sm);
  text-align: center; font-size: 13px; color: var(--accent);
}

/* Tightened for the composer's now-fixed spot at the bottom of the chat
   pane (see .chat-main max-height above) — every row there is competing
   for the same limited vertical space, so the budget strip reads as a
   compact status line above the toolbar rather than its own padded block. */

.bar {
  height: 4px; background: var(--surface-3);
  border-radius: var(--radius-pill); overflow: hidden;
}
.bar i {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: var(--radius-pill);
  transition: width .3s ease;
}

/* Live level meter & recording status bar while recording */
.micwave { margin-bottom: 11px; }
.micwave-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  box-shadow: 0 4px 14px -3px rgba(239, 68, 68, 0.15);
  transition: all 0.2s ease;
}
.micwave-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.micwave-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: rec-dot-pulse 1.2s infinite ease-in-out;
}
@keyframes rec-dot-pulse {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.micwave-rec-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ef4444;
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1;
}
.micwave-time {
  font-size: 14px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.micwave-canvas-wrap {
  flex: 1 1 auto;
  min-width: 60px;
  height: 32px;
  display: flex;
  align-items: center;
}
.micwave-canvas-wrap canvas,
.micwave canvas {
  display: block; width: 100%; height: 30px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.micwave-meta {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .micwave-canvas-wrap canvas,
  .micwave canvas { display: none; }
  .micwave-dot { animation: none; }
}

.composer__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.composer__row .field-grow { flex: 1 1 160px; min-width: 0; }

/* The written-note row. A different shape of input from the clip label — a
   diary entry, not a tag — so the global textarea's tall default is
   overridden rather than reused. */
.note-row { margin-top: 10px; align-items: stretch; }
.note-row textarea {
  flex: 1 1 220px; min-height: 0; height: auto;
  padding: 10px 16px; border-radius: var(--radius-card);
  line-height: 1.5;
}

/* ------------------------------------------------- controls: all capsules */

/* type="email" was missing here, which is why the auth pages' email field
   rendered as a bare unstyled browser input next to capsule-styled
   neighbours — an easy field type to forget since text/password cover most
   of the app, but every field on a form needs to come from this one list. */
input[type="text"], input[type="email"], input[type="password"], select {
  width: 100%; padding: 10px 16px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font: inherit; transition: border-color .15s, background .15s;
}
input[type="text"]::placeholder, input[type="email"]::placeholder,
input[type="password"]::placeholder { color: var(--ink-faint); }
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover,
select:hover { border-color: var(--line-strong); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
select:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }

textarea {
  width: 100%; padding: 14px 16px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  font: inherit; line-height: 1.6; resize: vertical; min-height: 200px;
}
textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; font: inherit; font-weight: 500; line-height: 1.2;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background .15s, border-color .15s, transform .06s, opacity .15s;
}
button:hover, .btn:hover { background: var(--surface-3); border-color: var(--line-strong); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
button:disabled:hover { background: var(--surface-2); border-color: var(--line); }

button.primary {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  font-weight: 600;
}
button.primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
button.primary:disabled:hover { background: var(--accent); }

button.ghost, .btn.ghost { background: transparent; border-color: var(--line); }
button.ghost:hover, .btn.ghost:hover { background: var(--surface-2); }

button.icon { padding: 8px; width: 34px; height: 34px; font-size: 14px; }

button.small { padding: 6px 14px; font-size: 12.5px; }
button.danger {
  color: var(--danger); background: transparent;
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}
button.danger:hover {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 65%, transparent);
}

/* Modern Interactive Record Button */
.btn-record-modern {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  color: var(--ink);
  font-weight: 550;
  font-size: 13px;
  cursor: pointer;
  overflow: visible;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.btn-record-modern:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-2));
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: 0 3px 10px -2px rgba(239, 68, 68, 0.25);
}

.btn-record-modern:active:not(:disabled) {
  opacity: 0.9;
}

.btn-record-modern:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--line);
}

.btn-record-modern .rec-icon {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-record-modern .rec-icon--mic {
  color: var(--danger);
  transition: color 0.15s ease;
}

.btn-record-modern .rec-icon--stop {
  display: none;
}

/* Active Recording State */
.record.is-recording,
.btn-record-modern.is-recording {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  animation: rec-glow 1.6s ease-in-out infinite alternate;
}

.btn-record-modern.is-recording .rec-icon--mic {
  display: none !important;
}

.btn-record-modern.is-recording .rec-icon--stop {
  display: inline-flex !important;
  color: #ffffff !important;
}

.btn-record-modern .rec-ripple {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(239, 68, 68, 0.6);
  pointer-events: none;
  opacity: 0;
}

.btn-record-modern.is-recording .rec-ripple {
  animation: rec-ripple-anim 1.6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes rec-glow {
  0% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3), 0 3px 8px rgba(239, 68, 68, 0.25); }
  100% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.18), 0 5px 16px rgba(239, 68, 68, 0.45); }
}

@keyframes rec-ripple-anim {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.3, 1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .record.is-recording,
  .btn-record-modern.is-recording,
  .btn-record-modern.is-recording .rec-ripple { animation: none; }
}

.record-timer {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
  letter-spacing: 0.02em;
}
.record-timer.is-hidden {
  display: none !important;
}

.upload { position: relative; }

/* --------------------------------------------------------------- chips */
/* A chip is a capsule and holds a LABEL. The model's reason for a suggestion
 * rides on the title attribute, where it costs no layout. */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; font-size: 13.5px; font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  white-space: nowrap;
}
.chip:hover { background: var(--surface-3); border-color: var(--line-strong); }
.chip.is-selected {
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent; font-weight: 600;
}
.chip.is-selected:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }

.chip__badge {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink);
}
.chip.is-selected .chip__badge { background: rgba(255,255,255,.22); }

/* The chooser collapses. It carries three decisions and, once a song exists,
   the person is usually reading the chat rather than re-picking — so its
   summary states the current choice and the body folds away. */
.chooser > summary { list-style: none; cursor: pointer; }
.chooser > summary::-webkit-details-marker { display: none; }
.chooser__summary {
  display: flex; align-items: center; gap: 12px;
  padding: 1px 0; user-select: none;
}
.chooser__summary::before {
  content: "▸"; color: var(--ink-faint); font-size: 11px; flex: none;
  transition: transform .15s;
}
.chooser[open] > .chooser__summary::before { content: "▾"; }
.chooser[open] > .chooser__summary { margin-bottom: 6px; }
.chooser__pick {
  margin-left: auto; font-size: 12px; color: var(--ink-dim);
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Segmented length picker. Sits on the "Suggested" label row: length is a
   one-of-three pick, not a section, and it does not deserve a block of its
   own. Compact enough to read as a control rather than a set of chips. */
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.seg__label { padding: 0 4px 0 6px; font-size: 11px; color: var(--ink-faint); }
.seg__btn {
  padding: 4px 10px; min-width: 28px; font-size: 12px; font-weight: 600;
  border: 0; background: transparent; color: var(--ink-dim);
  border-radius: var(--radius-pill); line-height: 1.4;
}
.seg__btn:hover { background: var(--surface-3); color: var(--ink); }
.seg__btn.is-selected { background: var(--accent); color: var(--accent-ink); }
.seg__btn.is-selected:hover { background: var(--accent); }

/* Marks a style whose rendering on the active provider is unverified. */
.chip--id::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--warn-ink); opacity: .8;
}


.field { margin: 14px 0; }
.field:first-of-type { margin-top: 0; }
.field > label { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 9px; }
.label-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 9px; font-size: 13px; min-height: 30px;
}
.label-row > span:first-child { font-weight: 550; color: var(--ink); }

details.field > summary {
  font-size: 13px; font-weight: 550; color: var(--ink);
  margin-bottom: 0; padding: 4px 0;
}
details.field[open] > summary { margin-bottom: 12px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.providers {
  margin: 22px 0 0; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--ink-faint); line-height: 1.7;
}

/* -------------------------------------------------------------------- auth */
/* Login, register, and password-reset pages with live ambient aurora,
   interactive cursor glow, glassmorphism card, and identical brand. */

.auth-main {
  position: relative;
  min-height: 100vh;
  background-color: var(--bg);
  overflow-x: hidden;
}

.auth-ambient-wrap {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.auth-grid-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 450px, transparent 800px);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 450px, transparent 800px);
}

[data-theme="light"] .auth-grid-bg {
  background-image:
    linear-gradient(to right, rgba(111, 90, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111, 90, 255, 0.08) 1px, transparent 1px);
}

.auth-cursor-glow {
  position: fixed;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, rgba(6, 182, 212, 0.08) 40%, transparent 70%);
  pointer-events: none;
  transform: translate3d(-350px, -350px, 0);
  will-change: transform;
  filter: blur(40px);
  z-index: 0;
  transition: opacity 0.3s ease;
}

[data-theme="light"] .auth-cursor-glow {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, rgba(2, 132, 199, 0.06) 40%, transparent 70%);
}

.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.45;
  will-change: transform;
}

[data-theme="light"] .aurora-orb {
  opacity: 0.25;
  filter: blur(120px);
}

.aurora-orb-1 {
  top: -120px; left: 15%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, #7c3aed 0%, rgba(124, 58, 237, 0) 70%);
  animation: floatAurora1 18s ease-in-out infinite alternate;
}

.aurora-orb-2 {
  bottom: -80px; right: 10%;
  width: 550px; height: 550px;
  background: radial-gradient(circle, #06b6d4 0%, rgba(6, 182, 212, 0) 70%);
  animation: floatAurora2 22s ease-in-out infinite alternate;
}

@keyframes floatAurora1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 50px) scale(1.15); }
}

@keyframes floatAurora2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-60px, -50px) scale(1.1); }
}

.auth-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  position: relative;
  z-index: 1;
}

.auth-card {
  width: 100%; max-width: 410px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5), 0 0 35px rgba(111, 90, 255, 0.15);
  padding: 38px 32px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7c3aed, #06b6d4, transparent);
}

.auth-card--center { text-align: center; }

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.landing-brand:hover {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.92;
}

.landing-brand__text {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.auth-brand.landing-brand {
  display: flex;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 20px;
}

.landing-brand__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #06b6d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.28rem;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  flex-shrink: 0;
}

.landing-brand__text span {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand__mark { color: var(--accent); font-size: 16px; line-height: 1; }
.brand__accent { color: var(--accent); }

.auth-title {
  font-size: 1.38rem !important; /* overrides WowDash h1 { font-size: var(--h1) !important } */
  font-weight: 750 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0 0 6px !important;
  color: var(--ink);
}

.auth-sub {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.88rem;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Icon-in-field: the icon is positioned over the input rather than beside
   it, so the input's own capsule shape (border, radius, focus ring) still
   comes from the normal input rules — only the left padding changes to make
   room. The icon sits AFTER the input in markup so `:focus + svg` can pick
   it up without JS. */
.field-icon { position: relative; margin-bottom: 12px; }
.field-icon input { padding-left: 40px; }
.field-icon svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-faint);
  pointer-events: none; transition: color .15s;
}
.field-icon input:focus + svg { color: var(--accent); }

.auth-row { display: flex; justify-content: flex-end; margin: -2px 0 16px; }
.auth-link { font-size: 12.5px; color: var(--ink-dim); text-decoration: none; }
.auth-link:hover { color: var(--accent); }

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 650;
  margin-top: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #06b6d4 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
  color: #fff;
}

.auth-submit--link { text-align: center; text-decoration: none; margin-top: 22px; }
.auth-submit:disabled { opacity: .4; cursor: not-allowed; }

/* .auth-submit alone is the gradient primary CTA — combined with .danger
   (settings.html's "Permanently delete my account") its plain `border: none`
   was overriding .danger's border-color with border-style:none, leaving a
   button with no visible outline and the gradient's cramped 12px padding
   instead of a proper pill. This restores the bordered danger look while
   keeping the full-width stacking .auth-submit gives every auth-form button. */
.auth-submit.danger {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  color: var(--danger);
  padding: 12px 20px;
  box-shadow: none;
}
.auth-submit.danger:hover {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 65%, transparent);
  color: var(--danger);
  transform: none;
  box-shadow: none;
}

/* Live password checklist (see auth.js). Neutral until the field it grades
   has been touched, then green (met) or red (not met) — never red before
   the person has typed anything. */
.pw-checks { list-style: none; margin: -2px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pw-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-faint); transition: color .15s; }
.pw-check-icon { width: 14px; height: 14px; flex: none; }
.pw-check.is-ok { color: var(--ok-ink); }
.pw-check.is-bad { color: var(--danger); }

.auth-footer { text-align: center; font-size: 13px; color: var(--ink-dim); margin: 24px 0 0; }
.auth-footer + .auth-footer { margin-top: 8px; }
.auth-footer a { color: var(--accent); text-decoration: none; font-weight: 550; }
.auth-footer a:hover { text-decoration: underline; }

.auth-terms {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-dim);
  cursor: pointer;
}
.auth-terms input {
  margin-top: 1px;
}
.auth-terms a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 550;
  transition: color .15s;
}
.auth-terms a:hover {
  color: var(--accent-hover, #7c3aed);
}

@media (max-width: 640px) {
  .auth-main { padding: 0 8px 16px; }
  .dashboard-main { padding: 0 !important; }
  .panel { padding: 10px 12px; border-radius: 14px; }
  .stream { max-height: 54vh; }
  .bubble__body { max-width: 95%; }
  .composer__row { gap: 6px; }
  .composer__row .field-grow { flex-basis: 100%; }

  /* Compact Bottom Docked Chat Composer */
  .chat-composer {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    margin-top: auto;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.07);
  }

  .budget {
    margin-bottom: 4px;
  }
  .budget__row {
    font-size: 10px;
    margin-bottom: 2px;
  }
  .bar {
    height: 3px;
  }

  .chat-input-row {
    margin-top: 2px;
    margin-bottom: 6px;
    padding: 7px 11px;
    border-radius: 8px;
  }
  .chat-input-inner textarea {
    min-height: 38px;
    height: 38px;
    max-height: 90px;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 0 !important;
    padding: 1px 3px !important;
  }
  .staged-attachments {
    gap: 4px;
    padding: 1px 0 4px;
    margin-bottom: 4px;
  }
  .staged-chip {
    padding: 2px 6px 2px 8px;
    font-size: 11px;
    max-width: 150px;
    gap: 4px;
  }
  .staged-chip__thumb {
    width: 18px;
    height: 18px;
  }

  .composer-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 0;
  }
  .composer-toolbar__left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .composer-toolbar__left::-webkit-scrollbar {
    display: none;
  }
  .composer-toolbar__right {
    flex: 0 0 auto;
    margin-inline-start: 4px;
    width: auto;
  }

  /* Compact controls on mobile */
  .record,
  .btn-record-modern {
    height: 32px;
    padding: 0 8px;
    font-size: 11px;
    flex-shrink: 0;
    gap: 4px;
  }
  .record .record-text,
  .btn-record-modern .record-text {
    display: none; /* remove text record on mobile per user request */
  }
  .record.is-recording .record-text,
  .btn-record-modern.is-recording .record-text {
    display: inline; /* show 'Stop' when recording so user sees how to finish */
  }
  .record.is-recording .record-timer,
  .btn-record-modern.is-recording .record-timer {
    display: inline-flex !important;
    font-size: 10.5px;
    padding: 0 4px;
    margin-left: 2px;
  }
  .micwave-body {
    padding: 6px 10px;
    gap: 8px;
  }
  .micwave-time {
    font-size: 13px;
  }
  .micwave-meta {
    font-size: 11px;
  }
  .record .rec-icon,
  .btn-record-modern .rec-icon {
    font-size: 17px;
  }
  .btn-action {
    width: 30px;
    height: 32px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
  }
  .btn-action .btn-action-text {
    display: none;
  }
  .btn-action .icon {
    font-size: 16px;
  }

  /* Seamless clip label in budget row on mobile */
  .budget__clip-label {
    font-size: 10px;
  }

  /* Compact style pill */
  .btn-style-pill {
    height: 32px;
    padding: 0 6px;
    font-size: 11px;
    max-width: 88px;
    flex-shrink: 0;
  }
  .btn-style-pill #style-pill-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn-style-pill .pill-arrow {
    font-size: 11px;
    margin-left: 1px;
    flex-shrink: 0;
  }

  /* Compact Make a song button */
  .btn-make-song {
    height: 32px;
    padding: 0 8px;
    font-size: 11.5px;
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
  }
  .btn-make-song .icon {
    font-size: 14px;
  }

  /* Collapsible style drawer on mobile */
  .style-drawer {
    padding: 10px 12px;
    max-height: 46vh;
    margin-bottom: 8px;
    border-radius: 10px;
  }
  .style-drawer__header {
    margin-bottom: 8px;
    padding-bottom: 4px;
  }
  .style-row {
    gap: 8px;
    padding-top: 6px;
  }
  .style-col {
    flex: 1 1 100%;
  }
  .chips--quick-genres .chip {
    padding: 3px 8px;
    font-size: 11.5px;
  }

  /* Subtitle hint hidden on mobile to maximize chat viewable area */
  .chat-composer .hint {
    display: none;
  }
}

/* --- Camera Viewfinder Modal ---------------------------------------------- */
.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.camera-modal.is-hidden {
  display: none !important;
}
.camera-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.camera-modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  animation: rise 0.2s ease-out;
}
.camera-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.camera-modal__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.camera-modal__title .icon {
  color: var(--accent);
  font-size: 18px;
}
.camera-modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 20px;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.camera-modal__close:hover {
  color: var(--ink);
}
.camera-modal__body {
  padding: 16px 18px;
  background: #0a0a0f;
}
.camera-modal__viewfinder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-modal__viewfinder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.btn-camera-snap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-weight: 600;
}