/* base.css — global reset, typography, header + footer chrome.
   Font stack: system-first for VI diacritics coverage without needing
   external CDN fonts (CSP forbids font-src beyond 'self'). Segoe UI
   (Windows), Helvetica Neue (macOS), Roboto (Android/Chrome) all render
   Vietnamese tone marks cleanly. "Be Vietnam Pro" left in the stack in
   case someone self-hosts it later. */

* { box-sizing: border-box; }

/* Background on html only — this becomes the canvas (bottommost layer).
   Keeping body background-less (transparent) lets .bg-fx { z-index:-1 }
   render above the canvas but below body content, making bubbles visible. */
html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #eef1fe;
  background-image:
    radial-gradient(ellipse 68% 60% at 94%  6%, rgba(79, 102, 241, .22) 0%, transparent 56%),
    radial-gradient(ellipse 64% 60% at  4% 96%, rgba(13, 148, 136, .17) 0%, transparent 56%),
    radial-gradient(ellipse 90% 55% at 50% 128%, rgba(30, 64, 175, .10) 0%, transparent 60%);
  background-attachment: fixed;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "Be Vietnam Pro", "Inter", "Segoe UI", system-ui,
               -apple-system, "Helvetica Neue", Roboto, "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1f2937;
}

a {
  color: #2563eb;
  text-decoration: none;
}

a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: inherit;
}

h1, h2, h3, h4 { margin: 0 0 8px 0; font-weight: 600; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.018em; }
h2 { font-size: 18px; letter-spacing: -0.01em; }
h3 { font-size: 15px; }

/* --- Ambient animated backdrop --------------------------------------- */
/* Floating soft orbs that drift slowly upward behind the whole app.
   Lives at z-index:-1 so it sits above the body gradient but below all
   content; translucent chrome (topbar/sidebar/cards) blurs it through. */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-fx span {
  position: absolute;
  bottom: -120px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* Indigo orb — saturated so it shows on the light background */
  background: radial-gradient(circle at 35% 30%,
    rgba(165, 170, 255, .65) 0%, rgba(99, 102, 241, .30) 55%, rgba(99, 102, 241, 0) 100%);
  opacity: 0;
  will-change: transform, opacity;
  animation: bubble-rise 24s linear infinite;
}
.bg-fx span:nth-child(3n) {
  background: radial-gradient(circle at 35% 30%,
    rgba(94, 210, 200, .60) 0%, rgba(13, 148, 136, .26) 55%, rgba(13, 148, 136, 0) 100%);
}
.bg-fx span:nth-child(3n+2) {
  background: radial-gradient(circle at 35% 30%,
    rgba(253, 186, 116, .60) 0%, rgba(249, 115, 22, .24) 55%, rgba(249, 115, 22, 0) 100%);
}

.bg-fx span:nth-child(1)  { left:  5%; width: 32px; height: 32px; animation-duration: 27s; animation-delay:  -3s; }
.bg-fx span:nth-child(2)  { left: 16%; width: 56px; height: 56px; animation-duration: 33s; animation-delay:  -9s; }
.bg-fx span:nth-child(3)  { left: 27%; width: 24px; height: 24px; animation-duration: 21s; animation-delay: -14s; }
.bg-fx span:nth-child(4)  { left: 38%; width: 44px; height: 44px; animation-duration: 30s; animation-delay:  -1s; }
.bg-fx span:nth-child(5)  { left: 48%; width: 30px; height: 30px; animation-duration: 25s; animation-delay: -19s; }
.bg-fx span:nth-child(6)  { left: 58%; width: 64px; height: 64px; animation-duration: 38s; animation-delay:  -6s; }
.bg-fx span:nth-child(7)  { left: 67%; width: 28px; height: 28px; animation-duration: 23s; animation-delay: -11s; }
.bg-fx span:nth-child(8)  { left: 75%; width: 50px; height: 50px; animation-duration: 31s; animation-delay: -22s; }
.bg-fx span:nth-child(9)  { left: 83%; width: 22px; height: 22px; animation-duration: 20s; animation-delay:  -4s; }
.bg-fx span:nth-child(10) { left: 90%; width: 38px; height: 38px; animation-duration: 28s; animation-delay: -16s; }
.bg-fx span:nth-child(11) { left: 96%; width: 30px; height: 30px; animation-duration: 26s; animation-delay:  -8s; }
.bg-fx span:nth-child(12) { left: 33%; width: 36px; height: 36px; animation-duration: 35s; animation-delay: -25s; }

@keyframes bubble-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.6);  opacity: 0; }
  12%  { opacity: .80; }
  85%  { opacity: .72; }
  100% { transform: translate3d(36px, -114vh, 0) scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-fx { display: none; }
}

/* --- Brand type utilities -------------------------------------------- */

/* Gradient keyword treatment — paints the brand sweep onto text and
   slowly shimmers it across the word so the header reads as "alive". */
.grad-text {
  background: linear-gradient(100deg,
    #1e40af 0%, #4f46e5 25%, #0f766e 50%, #4f46e5 75%, #1e40af 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: grad-shimmer 7s linear infinite;
}
@keyframes grad-shimmer {
  to { background-position: 220% center; }
}
@media (prefers-reduced-motion: reduce) {
  .grad-text { animation: none; }
}

/* Eyebrow / kicker label — small uppercase tracked tag above a title.
   The leading dot keys the page into the brand accent. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #4f46e5;
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

/* --- Waveform signature ---------------------------------------------- */
/* The brand motif: a small animated equaliser that says "voice" at a
   glance. CSS-only; bars scale on a staggered loop. Falls back to a
   static varied silhouette when the user prefers reduced motion. */
.wave-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.35));
}
.wave-mark span {
  display: block;
  width: 3px;
  height: 40%;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f46e5, #0f766e);
  transform-origin: center;
  animation: wave-bounce 1.15s ease-in-out infinite;
}
.wave-mark span:nth-child(1) { animation-delay: -0.9s; }
.wave-mark span:nth-child(2) { animation-delay: -0.5s; }
.wave-mark span:nth-child(3) { animation-delay: -0.1s; background: linear-gradient(180deg, #f97316, #4f46e5); }
.wave-mark span:nth-child(4) { animation-delay: -0.7s; }
.wave-mark span:nth-child(5) { animation-delay: -0.3s; }
.wave-mark span:nth-child(6) { animation-delay: -0.6s; }
.wave-mark span:nth-child(7) { animation-delay: -0.2s; }

@keyframes wave-bounce {
  0%, 100% { transform: scaleY(0.35); opacity: 0.65; }
  50%      { transform: scaleY(1.4);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wave-mark span { animation: none; }
  .wave-mark span:nth-child(1) { height: 45%; }
  .wave-mark span:nth-child(2) { height: 80%; }
  .wave-mark span:nth-child(3) { height: 100%; }
  .wave-mark span:nth-child(4) { height: 60%; }
  .wave-mark span:nth-child(5) { height: 90%; }
  .wave-mark span:nth-child(6) { height: 50%; }
  .wave-mark span:nth-child(7) { height: 70%; }
}

/* --- Header ----------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(255 255 255 / 79%);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  backdrop-filter: saturate(200%) blur(20px);
  border-bottom: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 1px 0 rgba(79, 70, 229, 0.10);
  padding: 10px 20px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: #111827;
}

.topbar__brand-img {
  height: 64px;
  width: auto;
  display: block;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-shrink: 1;
}

/* Admin button in topbar - hide text on smaller screens, keep icon */
.topbar__right .btn--sm {
  white-space: nowrap;
  flex-shrink: 0;
}

.budget-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
}

.budget-pill--amber { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.budget-pill--red { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.budget-pill--unlimited { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }

.budget-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.budget-pill__short { display: none; }

.lang-switch {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(99,102,241,.25);
  color: #4f46e5;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.lang-switch:hover { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.5); }

.user-chip {
  position: relative;
}

.user-chip__button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-weight: 500;
  max-width: 200px;
}

.user-chip__button span:not(.user-chip__avatar):not([aria-hidden]) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

.user-chip__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1e40af;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.user-chip__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-width: 200px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 6px;
  display: none;
  z-index: 50;
}

.user-chip[data-open="true"] .user-chip__menu { display: block; }

.user-chip__menu a,
.user-chip__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #111827;
  border-radius: 6px;
  text-decoration: none;
}

.user-chip__menu a:hover,
.user-chip__menu button:hover {
  background: #f3f4f6;
  text-decoration: none;
}

/* Usage pill inside the user menu — shown only on mobile, where the topbar
   pill + admin link are folded into this menu (see the 720px block). */
.user-chip__menu-budget { display: none; padding: 2px 4px 8px; }
.user-chip__menu-budget .budget-pill { width: 100%; justify-content: flex-start; }

/* --- Impersonation banner --------------------------------------------- */

.impersonation-banner {
  background: #fef2f2;
  color: #991b1b;
  border-bottom: 1px solid #fecaca;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.impersonation-banner__text { font-weight: 500; }

.impersonation-banner__stop {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #fca5a5;
  background: #ffffff;
  color: #991b1b;
  font-weight: 600;
}

/* --- Toast ------------------------------------------------------------ */

.toast-stack {
  position: fixed;
  top: 80px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
  pointer-events: none;
}

.toast {
  min-width: 260px;
  max-width: 380px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #111827;
  color: #f9fafb;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  animation: toast-in 120ms ease-out;
}

.toast--error { background: #991b1b; }
.toast--warn { background: #b45309; }
.toast--success { background: #15803d; }

@keyframes toast-in {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* --- Generic controls ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  background: #eff6ff;
  color: #1e3a8a;
  transition: background 120ms ease;
}

.btn:hover { background: #e0e7ff; }
.btn--primary { background: #1e40af; color: #ffffff; }
.btn--primary:hover { background: #1e3a8a; }
.btn--primary:disabled { background: #93c5fd; cursor: not-allowed; }
.btn--secondary { background: #475569; color: #ffffff; }
.btn--secondary:hover { background: #334155; }
.btn--secondary:disabled { background: #94a3b8; cursor: not-allowed; }
/* Same orange as the app's other secondary brand CTA (agents.css'
   .btn--agent-cta / the logo's wave-mark gradient) — reused here rather
   than invented, so "Save" reads as on-brand, not a random third hue. */
.btn--accent { background: #f97316; color: #ffffff; }
.btn--accent:hover { background: #ea580c; }
.btn--accent:disabled { background: #fdba74; cursor: not-allowed; }
.btn--ghost { background: transparent; color: #374151; border-color: #e5e7eb; }
.btn--ghost:hover { background: #f3f4f6; }
.btn--danger { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.btn--danger:hover { background: #fecaca; }
.btn--sm { padding: 6px 10px; font-size: 13px; }
.btn--icon { padding: 6px; }

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #60a5fa;
  outline-offset: 1px;
  border-color: #60a5fa;
}

.form-row { margin-bottom: 12px; }
.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 4px;
}
/* Two-up form-row used for paired optional selects (gender + region
   in the voice creation modal). Stacks on narrow viewports. */
.form-row--inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.form-row--inline .form-field {
  flex: 1 1 140px;
  min-width: 0;
}
.form-row--inline label {
  font-size: 12px;
}
.form-row--inline select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}

/* --- Simple tables ---------------------------------------------------- */

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

table.data-table th,
table.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
}

table.data-table th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 13px;
  color: #4b5563;
}

table.data-table tr:last-child td { border-bottom: none; }

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 960px) {
  .topbar { padding: 10px 16px; gap: 12px; }
  .topbar__right { gap: 8px; }
  .user-chip__button { max-width: 160px; padding: 5px 10px; }
  .user-chip__button span:not(.user-chip__avatar):not([aria-hidden]) { max-width: 100px; }
}

@media (max-width: 720px) {
  .topbar { padding: 10px 12px; gap: 10px; }
  .topbar__brand-img { height: 48px; }
  .budget-pill { font-size: 11px; padding: 4px 8px; }
  .budget-pill__text { display: none; }
  .budget-pill__short { display: inline; }
  .topbar__right .btn--sm {
    font-size: 12px;
    padding: 4px 8px;
  }
  /* Fold the usage pill + admin link into the user menu; the chip becomes an
     avatar-only circle (no name). */
  .topbar__right > .budget-pill { display: none; }
  .topbar__right > a.btn { display: none; }
  .user-chip__menu-budget { display: block; }
  .user-chip__menu-budget .budget-pill { font-size: 13px; padding: 6px 12px; }
  .user-chip__menu-budget .budget-pill__text { display: inline; }
  .user-chip__menu-budget .budget-pill__short { display: none; }
  .user-chip__name { display: none; }
  .user-chip__button { max-width: none; padding: 4px; gap: 0; }
  .user-chip__button > span[aria-hidden] { display: none; }
  .user-chip__avatar { width: 28px; height: 28px; font-size: 12px; }
}

@media (max-width: 480px) {
  .topbar { padding: 8px 10px; gap: 8px; }
  .topbar__brand-img { height: 40px; }
  /* Hide admin button text, keep only icon or shorten */
  .topbar__right .btn--sm[data-short-text]::before {
    content: attr(data-short-text);
  }
  .topbar__right .btn--sm:not([data-short-text]) {
    font-size: 0;
    padding: 6px;
  }
  .topbar__right .btn--sm:not([data-short-text])::before {
    content: '⚙';
    font-size: 14px;
  }
  .user-chip__button { max-width: 120px; }
  .user-chip__button span:not(.user-chip__avatar):not([aria-hidden]) { max-width: 60px; }
}

/* ---------------------------------------------------------------------------
 * Global full-width page layout.
 *
 * The app shell (sidebar.css) already gives the content column the full
 * remaining width; whether a PAGE looks full-width or boxed is decided by its
 * own content wrapper. Pages that want the edge-to-edge layout (the TTS
 * workarea, Voice Agents, video pages, ...) wrap their content in
 * `<div class="page-full">` instead of a bespoke `max-width: …; margin: auto`
 * box. This is the single source of truth for full-width gutters + sticky
 * player clearance, so any NEW page gets a consistent layout by reusing it.
 * (A page that genuinely needs a narrow reading column can still nest its own
 * constrained inner wrapper.)
 * ------------------------------------------------------------------------- */
.page-full {
  width: 100%;
  margin: 0;
  /* Match the TTS workarea gutters. padding-bottom clears the sticky audio
   * player when present (player.js sets --player-height; 0px when hidden). */
  padding: 16px 24px;
  padding-bottom: calc(24px + var(--player-height, 0px));
}
@media (max-width: 720px) {
  .page-full {
    padding: 12px 14px;
    padding-bottom: calc(16px + var(--player-height, 0px));
  }
}
@media (max-width: 480px) {
  .page-full { padding: 10px 10px; }
}

/* ---------------------------------------------------------------------------
 * Shared page-head — standard branded header used on ALL authenticated pages.
 * Eyebrow label on the left, gradient title below it; optional CTA / wave on
 * the right. Defined here (not main.css) so every page gets it for free.
 * --------------------------------------------------------------------------- */
.page-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* No padding — the containing .workarea / .page-full / .page-wrap handles gutters. */
}
.page-head::before {
  content: '';
  position: absolute;
  left: -8px;
  top: -18px;
  width: 340px;
  height: 110px;
  background: radial-gradient(ellipse at left,
    rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.page-head__lead,
.page-head__right { position: relative; z-index: 1; }
.page-head__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.page-head__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 750;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.page-head__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .page-head__right .wave-mark { display: none; }
  .page-head { padding: 12px 14px 0; }
}

/* ---------------------------------------------------------------------------
 * Glass card — shared morphism surface used by cards, panels, editor areas.
 * Apply alongside a border-radius class or set one inline.
 * --------------------------------------------------------------------------- */
.glass-card {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow:
    0 6px 32px rgba(49, 46, 129, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ---------------------------------------------------------------------------
 * Page section — consistent sub-section within a page (heading row + content).
 * --------------------------------------------------------------------------- */
.page-section {
  margin-top: 24px;
}
.page-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.page-section__title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
 * Narrow page wrapper — for pages that want a max-width reading column
 * (profile, settings, dictionaries) rather than full-bleed content.
 * --------------------------------------------------------------------------- */
.page-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 56px;
}