/* ---------------------------------------------------------------
   Al Fikra — every colour below is sampled from the reference jersey
   photo (deep teal-green body, gold trim, near-black backdrop, pale
   sky-blue collar), applied to the card-based wizard layout, chat and
   every button. Semantic colours (danger/warning/success) are tuned
   shades drawn from the same warm/cool families rather than generic
   red/green, so nothing clashes with the source photo.
----------------------------------------------------------------*/
:root{
  /* Palette sampled from the reference jersey photo:
     deep teal-green body, near-black indigo backdrop, gold trim, pale sky-blue collar. */
  --navy-900:#041a20;   /* deepest shadow of the fabric */
  --navy-800:#062c35;   /* jersey body */
  --navy-700:#0b4046;   /* raised surfaces / borders */
  --navy-600:#1a5d5e;   /* hover borders */
  --teal-400:#d8be84;   /* gold trim (primary accent) */
  --teal-300:#ecdca0;   /* light gold highlight */
  --teal-600:#a58c52;   /* deep gold */
  --foam:#eef3ea;
  --slate-400:#9db8b3;
  --slate-500:#7a9995;
  --line:var(--navy-700);
  --surface:var(--navy-800);
  --bg-a:var(--navy-700);
  --bg-b:var(--navy-800);
  --accent-rgb:216,190,132;         /* gold, for rgba() tints */
  --sky:#add0cc;                    /* collar lining */
  --backdrop:#0b0d19;               /* studio backdrop behind the jersey */
  --info-bg:rgba(173,208,204,.10); --info-text:#b7d9d4;
  --success-bg:rgba(216,190,132,.14); --success-text:#ecdca0;
  --warning-bg:rgba(229,167,90,.14); --warning-text:#e8b978;
  --danger:#d9704a;   /* warm rust — reads as alert, stays in the jersey's warm family */
  --on-accent:#062028;

  --font-latin:'Google Sans',Roboto,'Noto Sans SC',sans-serif;
  --font-arabic:'Google Sans',Roboto,'Noto Sans Arabic',sans-serif; /* neither Google Sans nor Roboto has Arabic letters, so Arabic text falls back to Noto Sans Arabic */

  --radius-lg:26px;
  --radius-md:14px;
  --radius-sm:10px;
  color-scheme: dark;
}

*{ box-sizing:border-box; }

/* ---- Line icons (replace emoji glyphs everywhere) ---- */
.ico{
  width:20px; height:20px; flex-shrink:0; display:block;
  stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.ico-wrap{ display:inline-flex; }
.search-icon .ico{ width:16px; height:16px; opacity:.65; }
.drawer-settings-gear .ico{ width:17px; height:17px; }
.chat-history-pin .ico, .chat-history-delete .ico{ width:15px; height:15px; }
.translate-link{ display:inline-flex; align-items:center; gap:5px; }
.translate-link .ico{ width:14px; height:14px; }
.composer-menu-item{ display:flex; align-items:center; gap:8px; }
.composer-menu-item .ico{ width:16px; height:16px; }
.btn-block .ico{ width:16px; height:16px; }
.btn-block{ display:flex; align-items:center; justify-content:center; gap:8px; }

html,body{ margin:0; height:100%; overflow:hidden; overscroll-behavior:none; }
body{
  height:100vh; height:100dvh;
  background:
    radial-gradient(90% 60% at 50% -10%, var(--navy-700) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 70%);
  background-color:var(--backdrop);
  background-attachment:scroll;
  color:var(--foam);
  font-family:var(--font-latin);
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
html[lang="ar"] body{ font-family:var(--font-arabic); }

/* Country-colour glow — the visitor's country (detected server-side, see
   netlify/functions/geo.mjs) tints the page with soft glows in its flag
   colours. Works in BOTH themes: on the dark jersey-green it blooms with
   screen blending (light on dark); on the light theme it washes in with
   multiply-free soft alpha. When no country is known the --glow-* vars are
   unset and nothing changes. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 10% 6%,  var(--glow-a, transparent) 0%, transparent 70%),
    radial-gradient(55% 45% at 95% 32%, var(--glow-b, transparent) 0%, transparent 70%),
    radial-gradient(75% 50% at 45% 108%, var(--glow-c, transparent) 0%, transparent 70%);
}
body::before{ mix-blend-mode:screen; }

#app{
  z-index:1;
  width:100%;
  max-width:480px;
  height:100vh;
  height:100dvh;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@media (min-width:520px){
  #app{
    height:min(880px, 92vh);
    margin:4vh auto;
    border-radius:32px;
    border:1px solid var(--navy-700);
    box-shadow:0 40px 90px -35px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--accent-rgb),.10);
    overflow:hidden;
    background:
      radial-gradient(60% 40% at 8% 4%,   var(--glow-a, transparent) 0%, transparent 70%),
      radial-gradient(55% 40% at 96% 34%, var(--glow-b, transparent) 0%, transparent 70%),
      radial-gradient(75% 45% at 45% 104%, var(--glow-c, transparent) 0%, transparent 70%),
      var(--navy-900);
  }
}

/* Only the chat log (inside #stage-chat) scrolls by design. Other stages
   keep overflow:auto purely as a safety net for extreme cases (tiny
   screens, large text zoom) — in the normal case nothing overflows, so no
   scrollbar appears and the screen simply doesn't move. */
.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:calc(28px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  animation:stage-in .45s cubic-bezier(.16,1,.3,1) both;
  overflow-y:auto;
  min-height:0;
}
.stage[hidden]{ display:none; }
@keyframes stage-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .stage{ animation:none; } }

/* ================= SPLASH ================= */
#stage-splash{ align-items:center; text-align:center; cursor:pointer; }
.splash-icon img{
  border-radius:26%;
  box-shadow:0 20px 50px -15px rgba(var(--accent-rgb),.35), 0 0 0 1px var(--navy-600);
  animation:icon-rise .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes icon-rise{ from{ opacity:0; transform:translateY(14px) scale(.92); } to{ opacity:1; transform:none; } }
.wordmark{ margin:20px 0 6px; font-size:clamp(26px,7vw,32px); font-weight:700; letter-spacing:-.01em; }
.wordmark-suffix{ color:var(--teal-400); font-weight:500; }
.swoosh{ width:140px; height:26px; opacity:.9; }
.swoosh path{
  fill:none; stroke:var(--teal-400); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:260; stroke-dashoffset:260;
  animation:draw 1s .3s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ================= CARD (shared by language / wizard / unlock) ================= */
.card{
  background:var(--surface);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.5);
  padding:28px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:400px;
  margin:0 auto;
  width:100%;
}
.card-icon{ width:52px; height:52px; border-radius:24%; margin:0 auto 2px; display:block; }
.card-title{ font-size:20px; font-weight:700; margin:0; text-align:center; color:var(--foam); }
.card-subtitle{ font-size:14px; color:var(--slate-400); text-align:center; margin:-6px 0 4px; overflow-wrap:anywhere; }
.eyebrow{ font-size:13.5px; color:var(--slate-400); margin:0 0 -4px; text-align:center; }

/* ================= LANGUAGE LIST ================= */
.lang-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.lang-option{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px;
  border-radius:var(--radius-md);
  border:1px solid var(--navy-700);
  background:var(--navy-800);
  cursor:pointer;
  font-size:15.5px;
  color:var(--foam);
  transition:border-color .15s ease, background .15s ease;
}
.lang-option:hover{ border-color:var(--navy-600); }
.lang-option .dot{
  width:8px; height:8px; border-radius:2px; transform:rotate(45deg);
  background:var(--navy-600); flex-shrink:0; transition:all .15s ease;
}
.lang-option[aria-selected="true"]{
  border-color:var(--teal-400);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.06));
}
.lang-option[aria-selected="true"] .dot{ background:var(--teal-300); transform:rotate(45deg) scale(1.2); }
.lang-native{ color:var(--slate-400); font-size:13.5px; margin-inline-start:auto; }

/* ================= FIELDS ================= */
.field{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--slate-400); font-weight:600; }
.field input, .field textarea, .field select{
  font-family:inherit; font-size:16px; font-weight:400; color:var(--foam);
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:var(--radius-sm);
  padding:12px 14px; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--teal-400); outline-offset:1px; }
.field small{ font-size:12px; color:var(--slate-500); font-weight:400; }
.field small a{ color:var(--teal-300); text-decoration:none; font-weight:600; }
.field small a:hover{ text-decoration:underline; }

/* ================= CHIPS ================= */
.suggest-toggle{
  align-self:flex-start; margin-top:2px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--teal-300);
}
.suggest-toggle:hover{ text-decoration:underline; }
.chip-row[hidden]{ display:none; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:9px 14px; border-radius:999px; border:1px solid var(--navy-700);
  background:var(--navy-900); font-size:13.5px; font-weight:600; color:var(--foam);
  cursor:pointer; transition:all .15s ease;
}
.chip:hover{ border-color:var(--navy-600); }
.chip.selected{ background:rgba(var(--accent-rgb),.12); border-color:var(--teal-400); color:var(--teal-300); }
.chip-other-input{
  margin-top:8px; width:100%; font-family:inherit; font-size:16px; color:var(--foam);
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:var(--radius-sm); padding:10px 13px;
}


/* ================= INFO / TIP / WARNING BOXES ================= */
.info-box, .tip-box, .warning-box{
  border-radius:var(--radius-md);
  padding:13px 15px;
  font-size:13px;
  line-height:1.5;
}
.info-box{ background:var(--info-bg); color:var(--info-text); }
.tip-box{ background:var(--info-bg); color:var(--info-text); text-align:center; }
.warning-box{ background:var(--warning-bg); color:var(--warning-text); }

/* ================= BUTTONS ================= */
.btn{
  appearance:none; border:none; border-radius:var(--radius-sm);
  padding:14px 20px; font-size:15px; font-weight:700; font-family:inherit;
  cursor:pointer; transition:opacity .15s ease, transform .1s ease;
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-primary{
  background:linear-gradient(135deg, var(--teal-400), var(--teal-600)); color:var(--on-accent);
  box-shadow:0 10px 26px -12px rgba(var(--accent-rgb),.55);
}
.btn-primary:hover:not(:disabled){ box-shadow:0 14px 30px -12px rgba(var(--accent-rgb),.7); transform:translateY(-1px); }
.btn-secondary{ background:var(--navy-700); color:var(--foam); }
.btn-secondary:hover{ background:var(--navy-600); }
.btn-ghost{ background:none; color:var(--slate-400); }
.btn-ghost:hover{ color:var(--foam); }
.btn-danger-ghost{
  background:none; color:var(--danger); border:1.5px solid rgba(217,112,74,.4);
}
.btn-danger-ghost:hover{ background:rgba(217,112,74,.1); border-color:var(--danger); }
.btn-send{
  background:var(--teal-400); color:var(--on-accent); width:44px; height:44px; border-radius:50%; font-size:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.6);
  transition:transform .1s ease, box-shadow .15s ease;
}
.btn-send:hover:not(:disabled){ transform:translateY(-1px); }

.form-error{ color:var(--danger); font-size:13px; margin:0; text-align:center; }

/* ================= CHAT ================= */
/* Chat screen only: a soft light band through the vertical middle, fading
   to dark at the top (behind the header) and bottom (behind the composer).
   Layered above the country-glow blobs so both are visible together; scoped
   to #stage-chat so no other screen (splash, wizard) picks up this look. */
#stage-chat{
  padding:0; justify-content:flex-start; overflow:hidden; position:relative;
  background:
    radial-gradient(60% 40% at 10% 6%,  var(--glow-a, transparent) 0%, transparent 70%),
    radial-gradient(55% 40% at 96% 34%, var(--glow-b, transparent) 0%, transparent 70%),
    radial-gradient(75% 45% at 45% 104%, var(--glow-c, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 48%, var(--navy-900) 100%);
}
.chat-header{
  display:flex; flex-direction:column; gap:2px;
  padding:calc(10px + env(safe-area-inset-top)) 20px 14px;
  border-bottom:1px solid var(--navy-700);
  transition:background .3s ease, box-shadow .3s ease;
}
/* Soft accent (both themes) tinted with the visitor's own country flag
   color (detected client-side, see applyCountryGlow) — a light shade and
   a gentle glow. */
.chat-header{
  box-shadow:0 6px 22px -14px var(--country-glow-shadow, transparent);
}
.chat-header-brand-row{ display:flex; justify-content:center; position:relative; }
.chat-header-row{ display:flex; align-items:center; gap:10px; }
.chat-header-text{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.chat-header-text strong{ font-size:15px; color:var(--foam); }
.app-brand-btn{
  display:flex; align-items:center; gap:7px; justify-content:center;
  height:30px; padding:0 10px; border-radius:10px;
  background:none; border:none; margin:0 0 2px; cursor:pointer; font-family:inherit;
}
.app-brand-btn:hover{ background:var(--navy-700); }
.app-brand-icon{ width:22px; height:22px; border-radius:6px; flex-shrink:0; box-shadow:0 0 0 1px rgba(var(--accent-rgb),.25); }
.app-brand-btn:hover .app-brand-icon{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5); }
.app-brand-name{ font-size:14px; font-weight:600; color:var(--foam); white-space:nowrap; }
.app-brand-name[hidden]{ display:none; }
.icon-btn{
  margin-inline-start:auto; background:none; border:none; color:var(--slate-400);
  font-size:18px; cursor:pointer; flex-shrink:0;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.icon-btn:hover{ color:var(--foam); background:var(--navy-700); }
.icon-btn-leading{ margin-inline-start:0; }
.model-pill{
  appearance:none; border:none; background:none; padding:0; margin-top:2px;
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:600; color:var(--slate-400);
  max-width:100%;
}
.model-pill:hover{ color:var(--teal-300); }
.model-pill.model-pill-offline{ color:var(--danger); }
.model-pill.model-pill-offline:hover{ color:var(--danger); }
.model-pill-dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-400); flex-shrink:0; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
.model-pill-offline .model-pill-dot{ background:var(--danger); box-shadow:0 0 0 3px rgba(217,112,74,.18); }
#btn-pin-current-chat.pinned{ color:var(--teal-400); }
#model-pill-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.settings-panel{
  position:absolute; inset:0; z-index:35;
  padding:calc(16px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:14px; background:var(--navy-800);
  overflow-y:auto;
  animation:panel-drop .2s cubic-bezier(.16,1,.3,1) both;
}
.settings-panel[hidden]{ display:none; }
@keyframes panel-drop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.settings-note{ color:var(--slate-500); font-size:12px; line-height:1.5; margin:0; }
.settings-section-label{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--slate-500); text-transform:uppercase; margin-top:6px; }
.knowledge-list{ display:flex; flex-direction:column; gap:8px; }
.knowledge-list:empty{ display:none; }
.knowledge-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--navy-700); border-radius:var(--radius-sm); background:var(--navy-800);
}
.knowledge-item-text{ flex:1; min-width:0; }
.knowledge-item-title{ font-size:13.5px; font-weight:600; color:var(--foam); }
.knowledge-item-preview{ font-size:11.5px; color:var(--slate-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.knowledge-item-delete{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:none; color:var(--slate-500); display:flex; align-items:center; justify-content:center;
}
.knowledge-item-delete:hover{ background:var(--navy-700); color:var(--danger); }
/* ---- Passphrase management (Settings) + unlock-screen options ---- */
.field[hidden]{ display:none; }
.field-extras{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:-4px; }
.check-row{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--slate-400);
}
.check-row input{ width:16px; height:16px; margin:0; accent-color:var(--teal-400); cursor:pointer; }
.link-btn{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--teal-300);
}
.link-btn:hover{ text-decoration:underline; }
.link-btn[hidden]{ display:none; }
.passphrase-form{
  display:flex; flex-direction:column; gap:12px; padding:12px;
  border:1px solid var(--navy-700); border-radius:var(--radius-md); background:var(--navy-800);
}
.passphrase-form[hidden]{ display:none; }
.passphrase-form > .link-btn{ align-self:flex-start; margin-top:-6px; }
.passphrase-form .form-error{ text-align:start; }
.passphrase-form-actions{ display:flex; gap:10px; }
.passphrase-form-actions .btn{ flex:1; padding-inline:12px; }
.passphrase-form-actions .btn-primary{ flex:2; } /* longer label ("Update passphrase") — keep it on one line */
.settings-success{
  margin:0; padding:10px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  background:var(--success-bg); color:var(--success-text);
}
.settings-success[hidden]{ display:none; }
.overlay-top{ z-index:60; } /* the Forgot dialog opens from Settings too, which sits at z-index 35 */
.forgot-body{ margin:0; font-size:13.5px; line-height:1.55; color:var(--slate-400); }

.knowledge-form{ display:flex; flex-direction:column; gap:12px; padding:12px; border:1px solid var(--navy-700); border-radius:var(--radius-md); background:var(--navy-800); }
.knowledge-form[hidden]{ display:none; }
.knowledge-form textarea{ resize:vertical; font-family:inherit; }
.knowledge-form-actions{ display:flex; gap:10px; }
.knowledge-form-actions .btn{ flex:1; }

.chat-log-wrap{ position:relative; flex:1; min-height:0; display:flex; }
.chat-empty-greeting{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  margin:0; padding:0 32px;
  font-size:clamp(24px, 6vw, 32px); font-weight:700; line-height:1.3;
  color:var(--slate-400);
  pointer-events:none;
}
.chat-empty-greeting[hidden]{ display:none; }
.chat-log{ flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:16px; }
.msg{ font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.msg-text{ display:block; }
.msg-text > *:first-child{ margin-top:0; }
.msg-text > *:last-child{ margin-bottom:0; }
.msg-text p{ margin:0 0 10px; }
.msg-text ul, .msg-text ol{ margin:0 0 10px; padding-inline-start:1.4em; }
.msg-text li{ margin:2px 0; }
.msg-text h1, .msg-text h2, .msg-text h3, .msg-text h4{ margin:14px 0 8px; line-height:1.3; }
.msg-text h1{ font-size:1.25em; } .msg-text h2{ font-size:1.15em; } .msg-text h3, .msg-text h4{ font-size:1.05em; }
.msg-text strong, .msg strong{
  font-weight:700; text-decoration:underline; text-decoration-thickness:1.5px;
  text-underline-offset:3px; text-decoration-color:rgba(var(--accent-rgb),.55);
}
.msg-text code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.9em;
  background:rgba(127,127,127,.16); padding:1px 5px; border-radius:5px;
}
.msg-text pre{
  background:rgba(127,127,127,.14); border-radius:var(--radius-sm); padding:10px 12px;
  overflow-x:auto; margin:0 0 10px;
}
.msg-text pre code{ background:none; padding:0; }
.code-runnable{ position:relative; padding-top:34px; }
.code-run-btn{
  position:absolute; top:7px; inset-inline-end:7px;
  font-family:inherit; font-size:11.5px; font-weight:700; letter-spacing:.01em;
  padding:5px 11px; border-radius:999px; border:1px solid rgba(var(--accent-rgb),.4);
  background:rgba(var(--accent-rgb),.12); color:var(--teal-300); cursor:pointer;
}
.code-run-btn:hover{ background:rgba(var(--accent-rgb),.22); }
.code-sandbox-frame{
  display:block; width:100%; height:220px; margin:-6px 0 10px;
  border:1px solid var(--navy-700); border-radius:var(--radius-sm);
  background:#fff;
}
.msg-text blockquote{
  margin:0 0 10px; padding:2px 12px; border-inline-start:3px solid currentColor; opacity:.85;
}
.msg-text a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.msg-text .katex{ color:inherit; font-size:1.05em; }
.msg-text .katex-display{ margin:10px 0; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; }
.msg-user .msg-text a{ color:var(--on-accent); }

.msg-user{
  align-self:flex-end; max-width:88%; padding:11px 14px;
  background:linear-gradient(135deg, var(--teal-400), var(--teal-600)); color:var(--on-accent);
  border-radius:var(--radius-md); border-bottom-right-radius:4px;
  position:relative;
}
html[dir="rtl"] .msg-user{ border-bottom-right-radius:var(--radius-md); border-bottom-left-radius:4px; }
.msg-user.has-expand{ padding-bottom:22px; }
.msg-user.collapsible{ max-height:8.5em; overflow:hidden; }
.msg-expand-btn{
  position:absolute; inset-inline-end:8px; bottom:-11px;
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; z-index:2;
  background:var(--navy-700); border:1px solid var(--navy-600); color:var(--foam);
  font-size:10px; cursor:pointer;
}
.load-earlier-row{ display:flex; justify-content:center; padding:4px 0 14px; }
.load-earlier-btn{ padding:8px 16px; font-size:12.5px; }

.msg-assistant{
  align-self:stretch; color:var(--foam); padding:0;
}
.msg-assistant.msg-error{ color:var(--danger); }

.msg-music{
  align-self:flex-start; width:min(340px, 88%);
  background:var(--navy-800); border:1px solid var(--navy-700);
  border-radius:var(--radius-md); padding:12px; display:flex; flex-direction:column; gap:10px;
}
.music-card-header{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--slate-500); }
.music-card-badge{
  width:20px; height:20px; border-radius:6px; background:var(--danger); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.music-card-badge .ico{ width:11px; height:11px; }
.music-card-source strong{ color:var(--slate-400); font-weight:700; }
.music-card-title-row{ display:flex; align-items:flex-start; gap:10px; }
.music-card-title{ flex:1; min-width:0; font-size:14.5px; font-weight:700; color:var(--foam); line-height:1.35; }
.music-card-play-overlay{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--teal-400); color:var(--on-accent); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.music-card-play-overlay .ico{ width:16px; height:16px; }
.music-card-play-overlay:hover{ opacity:.9; }
.music-card-seek-row{ display:flex; align-items:center; gap:8px; }
.music-card-time{ font-size:11px; font-weight:700; color:var(--slate-500); flex-shrink:0; width:32px; }
.music-card-time-total{ text-align:end; }
.music-card-seek-bar{
  position:relative; flex:1; height:16px; display:flex; align-items:center; cursor:pointer; touch-action:none;
}
.music-card-seek-bar::before{
  content:""; position:absolute; left:0; right:0; height:3px; border-radius:999px; background:var(--navy-700);
}
.music-card-seek-fill{ position:absolute; left:0; height:3px; width:0%; border-radius:999px; background:var(--teal-400); pointer-events:none; }
.music-card-seek-handle{
  position:absolute; left:0%; width:12px; height:12px; margin-left:-6px; border-radius:50%;
  background:var(--teal-300); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25); pointer-events:none;
}
.music-player-mount{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }

.msg-meta{ display:block; margin-top:8px; font-size:11px; color:var(--slate-500); }

.scroll-bottom-btn{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; z-index:5;
  background:var(--navy-800); border:1px solid var(--navy-700); color:var(--foam);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  cursor:pointer; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}
.scroll-bottom-btn.visible{ opacity:1; pointer-events:auto; }

/* ================= NAME CHOICE (nickname stage) ================= */
.name-choice{ display:flex; flex-direction:column; gap:10px; }
.name-option{
  border:1.5px solid var(--navy-700); border-radius:var(--radius-md);
  padding:14px; cursor:pointer; text-align:start; background:var(--navy-900);
  display:flex; flex-direction:column; gap:4px;
  transition:border-color .15s ease, background .15s ease;
  font-family:inherit;
}
.name-option:hover{ border-color:var(--navy-600); }
.name-option.selected{ border-color:var(--teal-400); background:rgba(var(--accent-rgb),.08); }
.name-option strong{ font-size:14.5px; color:var(--foam); }
.name-option span{ font-size:12.5px; color:var(--slate-400); overflow-wrap:anywhere; }

/* ================= COMPOSER + MENU ================= */
.camera-menu-wrap{ position:relative; }
.camera-menu{
  position:absolute; bottom:calc(100% + 10px); inset-inline-start:0; z-index:30;
  min-width:176px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:var(--radius-md);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(var(--accent-rgb),.08);
  animation:panel-drop .16s cubic-bezier(.16,1,.3,1) both;
}
.camera-menu[hidden]{ display:none; }
.camera-menu-item{
  display:flex; align-items:center; gap:9px; width:100%;
  background:none; border:none; border-radius:var(--radius-sm); padding:9px 8px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--foam); text-align:start;
}
.camera-menu-item:hover{ background:var(--navy-700); color:var(--teal-300); }

.composer-menu{
  margin:0 16px 8px; padding:12px 14px;
  background:var(--navy-800); border:1px solid var(--navy-700);
  border-radius:var(--radius-md);
  display:flex; flex-direction:column; gap:10px;
  animation:panel-drop .18s cubic-bezier(.16,1,.3,1) both;
}
.composer-menu[hidden]{ display:none; }
.composer-menu-item{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:none; padding:6px 2px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--foam); text-align:start;
}
.composer-menu-item:hover{ color:var(--teal-300); }
.composer-menu-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13.5px; font-weight:600; color:var(--slate-400);
  border-top:1px solid var(--navy-700); padding-top:10px;
}
.composer-menu-row select{
  font-family:inherit; font-size:14px; color:var(--foam);
  background:var(--navy-900); border:1px solid var(--navy-700);
  border-radius:var(--radius-sm); padding:8px 10px;
}
.composer-menu-note{ margin:0; font-size:11.5px; color:var(--slate-500); line-height:1.45; }
.composer-menu-divider{ height:1px; background:var(--navy-700); margin:2px 0; }
.composer-menu-row-column{ flex-direction:column; align-items:stretch; border-top:none; padding-top:0; gap:8px; }
.song-search-row{ display:flex; gap:8px; }
.song-search-row input{
  flex:1; min-width:0; font-family:inherit; font-size:16px; color:var(--foam);
  background:var(--navy-900); border:1px solid var(--navy-700);
  border-radius:var(--radius-sm); padding:8px 10px;
}
.song-unavailable{ margin:0; font-size:12.5px; font-weight:600; color:var(--warning-text); }
.song-unavailable[hidden]{ display:none; }

.composer-pill{
  position:relative; z-index:0;
  display:flex; align-items:center; gap:6px;
  margin:12px 16px calc(16px + env(safe-area-inset-bottom));
  padding:6px 6px 6px 10px;
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:999px;
  box-shadow:0 8px 24px -14px rgba(var(--accent-rgb),.4);
  transition:box-shadow .3s ease;
}
/* soft colourful glow blooming behind the pill while typing */
.composer-pill::after{
  content:""; position:absolute; inset:-12px; z-index:-2; border-radius:999px;
  background:conic-gradient(from 0deg, #d8be84, #add0cc, #1a8a80, #ecdca0, #0b4046, #d8be84);
  filter:blur(18px); opacity:0;
  animation:composer-glow-spin 4s linear infinite; animation-play-state:paused;
  transition:opacity .35s ease; pointer-events:none;
}
.composer-pill:focus-within{ box-shadow:0 10px 28px -12px rgba(var(--accent-rgb),.5); }
.composer-pill:focus-within::after{ opacity:.6; animation-play-state:running; }
@keyframes composer-glow-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .composer-pill::after{ animation:none; }
}
.composer-icon-btn{
  appearance:none; border:none; background:none; color:var(--slate-400);
  font-size:20px; line-height:1; width:36px; height:36px; border-radius:50%;
  cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.composer-icon-btn:hover{ background:var(--navy-700); color:var(--foam); }
.composer-icon-btn.listening{ color:#fff; background:var(--danger); animation:mic-pulse 1.2s infinite; }
@keyframes mic-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(217,112,74,.45); }
  50%{ box-shadow:0 0 0 7px rgba(217,112,74,0); }
}
.composer-pill textarea{
  flex:1; resize:none; max-height:48px; font-family:inherit; font-size:16px; color:var(--foam);
  background:none; border:none; padding:9px 4px; outline:none; min-width:0; overflow-y:auto;
}
.composer-pill .btn-send{ width:36px; height:36px; font-size:18px; font-weight:700; }
.btn-stop{ background:var(--danger); font-size:12px; }
.btn-stop[hidden]{ display:none; }

/* ---- "@" answer-style picker ---- */
.style-menu{
  position:absolute; left:16px; right:16px;
  bottom:calc(78px + env(safe-area-inset-bottom));
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:var(--radius-md);
  padding:4px; display:flex; flex-direction:column; gap:0;
  max-height:min(208px, 36vh); overflow-y:auto; z-index:6;
  box-shadow:0 20px 45px -18px rgba(0,0,0,.6);
  animation:panel-drop .18s cubic-bezier(.16,1,.3,1) both;
}
.style-menu[hidden]{ display:none; }
/* One line per option, in aligned columns: name | short hint | tick */
.style-option{
  display:grid; grid-template-columns:minmax(9em,46%) 1fr 16px; align-items:center; column-gap:10px; width:100%; text-align:start;
  background:none; border:none; border-radius:var(--radius-sm); padding:6px 10px; min-height:32px;
  font-family:inherit; font-size:13.5px; line-height:1.25; color:var(--foam); cursor:pointer;
}
.style-option:hover, .style-option.highlighted{ background:var(--navy-700); }
.style-option.active{ background:rgba(var(--accent-rgb),.1); }
.style-option mark{ background:rgba(var(--accent-rgb),.28); color:inherit; border-radius:3px; padding:0 1px; }
.style-option strong{ color:var(--teal-300); font-weight:700; overflow-wrap:anywhere; }
.style-option small{ font-size:11.5px; color:var(--slate-500); font-weight:400; white-space:normal; overflow-wrap:anywhere; }
.style-option .ico{ width:14px; height:14px; color:var(--teal-300); justify-self:end; }
.style-menu.below-sub{
  --dx:14px; --dy:calc(var(--dx) * 1.7320508); /* tan 60° — the menu travels 60° below the horizontal */
  animation:menu-drop-60 .24s cubic-bezier(.16,1,.3,1) both;
}
@keyframes menu-drop-60{
  from{ opacity:0; transform:translate(calc(var(--dx) * -1), calc(var(--dy) * -1)); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .style-menu.below-sub{ animation:none; } }
.style-menu-empty{ margin:0; padding:8px; font-size:13px; color:var(--slate-500); text-align:center; }

/* ---- photo attachment (preview chip + in-chat thumbnail) ---- */
.photo-preview-row{ margin:0 16px 8px; display:flex; }
.photo-preview-row[hidden]{ display:none; }
.photo-preview-thumb{ position:relative; width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--navy-700); flex-shrink:0; }
.photo-preview-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-preview-thumb button{
  position:absolute; top:2px; inset-inline-end:2px; width:20px; height:20px; border-radius:50%;
  background:rgba(4,26,32,.75); border:none; color:#fff; padding:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.photo-preview-thumb button:hover{ background:rgba(4,26,32,.9); }
.photo-preview-thumb .ico{ width:11px; height:11px; }
.msg-image-wrap{ position:relative; display:inline-block; max-width:100%; margin-bottom:6px; }
.msg-image{ display:block; max-width:100%; max-height:280px; object-fit:cover; border-radius:var(--radius-md); margin-bottom:0; }
.msg-image-save-btn{
  position:absolute; top:8px; inset-inline-end:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(4,26,32,.65); border:none; color:#fff; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.msg-image-save-btn:hover{ background:rgba(4,26,32,.85); }
.msg-image-save-btn .ico{ width:14px; height:14px; }
.photo-vision-warning{
  margin:0; align-self:center; font-size:11.5px; line-height:1.4; color:var(--warning-text);
}
.photo-vision-warning[hidden]{ display:none; }

.style-active-row{ margin:0 16px 8px; display:flex; }
.tags-active-row{ flex-wrap:wrap; gap:6px; }
.style-active-row[hidden]{ display:none; }
.style-active-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(var(--accent-rgb),.12); color:var(--teal-300); border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:999px; padding:3px 6px 3px 10px; font-size:12px; font-weight:700;
}
.style-active-chip button{
  background:none; border:none; color:inherit; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
}
.style-active-chip button:hover{ background:rgba(var(--accent-rgb),.25); }
.style-active-chip .ico{ width:12px; height:12px; }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background:var(--navy-700); border-radius:3px; }

.storage-notice{
  padding:8px 16px; text-align:center;
  font-size:12.5px; font-weight:600; color:var(--warning-text); background:var(--warning-bg);
  border-bottom:1px solid var(--navy-700);
}
.storage-notice[hidden]{ display:none; }
.storage-notice.storage-notice-error{ color:#fff; background:var(--danger); }

/* ================= OVERLAYS (Chats drawer / Switch model modal) ================= */
.overlay{
  position:absolute; inset:0; z-index:30;
  background:rgba(2,12,15,.62);
  display:flex;
}
.overlay[hidden]{ display:none; }
.overlay-panel{
  background:var(--navy-900);
  border:1px solid var(--navy-700);
  display:flex; flex-direction:column; gap:12px;
  padding:20px;
  overflow-y:auto;
}
.overlay-panel-left{
  width:82%; max-width:320px; height:100%;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  animation:overlay-slide-left .2s cubic-bezier(.16,1,.3,1) both;
}
/* RTL: the flex row already starts at the right edge, so the drawer needs no extra margin
   (the old margin-inline-start:auto pushed it to the LEFT edge, away from its rounded side). */
html[dir="rtl"] .overlay-panel-left{ border-radius:var(--radius-lg) 0 0 var(--radius-lg); animation-name:overlay-slide-right; }
@keyframes overlay-slide-left{ from{ transform:translateX(-16px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes overlay-slide-right{ from{ transform:translateX(16px); opacity:0; } to{ transform:none; opacity:1; } }
.overlay-panel-center{
  margin:auto; width:88%; max-width:360px; max-height:80vh;
  border-radius:var(--radius-lg);
  animation:overlay-pop .18s cubic-bezier(.16,1,.3,1) both;
}
@keyframes overlay-pop{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
.overlay-head{ display:flex; align-items:center; justify-content:space-between; }
.overlay-head strong{ font-size:16px; color:var(--foam); }
.overlay-note{ color:var(--slate-500); font-size:12px; line-height:1.5; margin:0; }
.chat-history-list:empty{ flex:0; }
.chat-history-empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:10px; padding:32px 24px; color:var(--slate-500); flex:1;
}
.chat-history-empty-state[hidden]{ display:none; }
.chat-history-empty-icon{
  width:34px; height:34px; stroke:rgba(var(--accent-rgb),.5); stroke-width:1.6; fill:none;
}
.chat-history-empty-state .overlay-note{ max-width:220px; }
.btn-block{ width:100%; display:flex; align-items:center; justify-content:center; gap:6px; }

.chat-history-list{ display:flex; flex-direction:column; gap:6px; flex:1; overflow-y:auto; min-height:0; }
.chat-history-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--navy-700); background:var(--navy-800);
  cursor:pointer; font-size:13.5px; color:var(--foam); text-align:start;
}
.chat-history-item:hover{ border-color:var(--navy-600); }
.chat-history-item.active{ border-color:var(--teal-400); background:rgba(var(--accent-rgb),.08); }
.chat-history-item .chat-history-delete{
  background:none; border:none; color:var(--slate-500); font-size:13px; cursor:pointer; flex-shrink:0;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.chat-history-item .chat-history-delete:hover{ color:var(--danger); background:var(--navy-700); }
.chat-history-pin{
  background:none; border:none; color:var(--slate-500); font-size:13px; cursor:pointer; flex-shrink:0;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.chat-history-pin:hover{ background:var(--navy-700); }
.chat-history-pin.pinned{ color:var(--teal-400); }
.chat-history-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }

.search-field{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--navy-700); background:var(--navy-800); border-radius:999px;
  padding:9px 14px;
}
.search-field .search-icon{ font-size:13px; opacity:.6; }
.search-field input{
  flex:1; border:none; background:none; outline:none; font-family:inherit;
  font-size:16px; color:var(--foam); min-width:0;
}

.drawer-extras{ display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:6px; }

.drawer-profile-row{
  appearance:none; border:none; background:none; cursor:pointer;
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 4px 2px; margin-top:6px; border-top:1px solid var(--navy-700);
  font-family:inherit; text-align:start;
}
.drawer-profile-row img{ width:26px; height:26px; border-radius:24%; flex-shrink:0; }
.drawer-profile-row span:first-of-type{ flex:1; font-size:13.5px; font-weight:600; color:var(--foam); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer-settings-label{ font-size:12.5px; color:var(--slate-400); flex-shrink:0; }
.drawer-settings-gear{ color:var(--slate-400); font-size:16px; flex-shrink:0; }
.drawer-profile-row:hover .drawer-settings-label,
.drawer-profile-row:hover .drawer-settings-gear{ color:var(--foam); }

.theme-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 2px; font-size:14px; color:var(--foam);
}
.switch{ position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch-slider{
  position:absolute; inset:0; background:var(--navy-700); border-radius:999px;
  cursor:pointer; transition:background .15s ease;
}
.switch-slider::before{
  content:''; position:absolute; width:16px; height:16px; left:3px; top:3px;
  background:var(--foam); border-radius:50%; transition:transform .15s ease, background .15s ease;
}
.switch input:checked + .switch-slider{ background:var(--teal-400); }
.switch input:checked + .switch-slider::before{ transform:translateX(18px); background:var(--on-accent); }

.chat-history-group-label{ margin:10px 2px 2px; }
.chat-history-group-label:first-child{ margin-top:0; }

.model-list{ display:flex; flex-direction:column; gap:6px; }
.model-group-label{
  font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--slate-500);
  text-transform:uppercase; margin:14px 2px 2px;
}
.model-group-label:first-child{ margin-top:2px; }
.model-option{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--navy-700); background:var(--navy-800);
  cursor:pointer; font-size:14px; color:var(--foam); text-align:start;
  font-family:inherit; width:100%;
}
.model-option:hover{ border-color:var(--navy-600); }
.model-option.selected{ border-color:var(--teal-400); background:rgba(var(--accent-rgb),.08); color:var(--teal-300); }
.model-option.disabled{ opacity:.45; cursor:not-allowed; }
.model-option small{ display:block; color:var(--slate-500); font-size:11.5px; font-weight:400; margin-top:2px; }

/* ================= TYPING INDICATOR ================= */
.msg-typing{ display:flex; align-items:center; gap:5px; padding:6px 0; }
.msg-typing .dot{
  width:6px; height:6px; border-radius:50%; background:var(--teal-400);
  animation:typing-bounce 1.1s infinite ease-in-out;
}
.msg-typing .dot:nth-child(3){ animation-delay:.15s; }
.msg-typing .dot:nth-child(4){ animation-delay:.3s; }
@keyframes typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

/* ================= MESSAGE ACTIONS (copy / share / edit) ================= */
.msg-actions{ margin-top:8px; display:flex; flex-wrap:wrap; gap:14px; color:inherit; opacity:.6; }
.msg-action-btn{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:700; color:inherit;
}
.msg-action-btn:hover{ text-decoration:underline; }
.msg-action-btn:disabled{ cursor:default; text-decoration:none; }
.msg-user .msg-actions{ justify-content:flex-end; }
.msg-action-icon{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; text-decoration:none !important; }
.msg-action-icon .ico{ width:15px; height:15px; }
.msg-action-icon:hover:not(:disabled){ background:rgba(var(--accent-rgb),.14); }
.msg-actions{ gap:2px !important; margin-left:-6px; }
.msg-actions.msg-actions-out{ align-self:flex-end; margin:-9px 4px 0 0; opacity:.7; }
.msg-actions-out:hover, .msg-actions-out:focus-within{ opacity:1; }
.msg-actions-out .msg-action-icon{ width:26px; height:26px; }
.msg-actions-out .msg-action-icon .ico{ width:14px; height:14px; }
.download-menu{
  position:fixed; z-index:60; min-width:190px; padding:4px; display:flex; flex-direction:column;
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:var(--radius-md);
  box-shadow:0 20px 45px -18px rgba(0,0,0,.6); animation:panel-drop .16s cubic-bezier(.16,1,.3,1) both;
}
.download-item{
  display:grid; grid-template-columns:18px 1fr auto; align-items:center; column-gap:10px; width:100%; text-align:start;
  background:none; border:none; border-radius:var(--radius-sm); padding:8px 10px; font-family:inherit; font-size:13.5px; color:var(--foam); cursor:pointer;
}
.download-item:hover, .download-item:focus-visible{ background:var(--navy-700); outline:none; }
.download-item .ico{ width:16px; height:16px; color:var(--teal-300); }
.download-ext{ font-size:11.5px; color:var(--slate-500); font-variant-numeric:tabular-nums; }
.msg-action-listen{ text-decoration:none !important; }
.msg-action-listen .ico{ width:13px; height:13px; }
.msg-action-listen.speaking{ color:var(--teal-300); }
.msg-action-listen.speaking .ico{ animation:listen-pulse 1s ease-in-out infinite; }
@keyframes listen-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ================= TRANSLATE ROW ================= */
.translate-row{ margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.translate-link{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:11.5px; font-weight:700; color:var(--teal-300);
}
.translate-link:hover{ text-decoration:underline; }
.translate-row select{
  font-family:inherit; font-size:12.5px; color:var(--foam);
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:8px; padding:6px 8px;
}
.btn-tiny{
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px;
  background:var(--teal-400); color:var(--on-accent); border:none; cursor:pointer;
}
.btn-tiny:disabled{ opacity:.5; }
.translation-result{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--navy-700);
  font-size:13.5px; color:var(--teal-300); line-height:1.5;
}



/* =====================================================================
   SYNC UI
===================================================================== */
.sync-providers, .sync-connected, .sync-pass-form{ display:flex; flex-direction:column; gap:10px; }
.sync-providers[hidden], .sync-connected[hidden], .sync-pass-form[hidden]{ display:none; }
.btn-provider{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font-weight:600; letter-spacing:.005em;
}
.btn-provider[hidden]{ display:none; }
.brand-ico{ width:20px; height:20px; flex-shrink:0; }
.btn-google{ background:#fff; color:#1f1f1f; --glow-rgb:255,255,255; }
.btn-apple{ background:#000; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); --glow-rgb:255,255,255; }
.sync-status{ display:flex; align-items:flex-start; gap:10px; }
.sync-status::before{
  content:""; flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:5px;
  background:var(--slate-500); transition:background .3s ease, box-shadow .3s ease;
}
.sync-status[data-state="idle"]::before{ background:var(--teal-400); box-shadow:0 0 10px 1px rgba(var(--accent-rgb),.7); }
.sync-status[data-state="syncing"]::before{ background:var(--teal-300); animation:sync-dot 1s ease-in-out infinite; }
.sync-status[data-state="error"]::before, .sync-status[data-state="signed_out"]::before, .sync-status[data-state="need_pass"]::before{
  background:var(--danger); box-shadow:0 0 10px 1px rgba(217,112,74,.6);
}
.sync-status[data-state="off"]::before{ display:none; }
@keyframes sync-dot{ 0%,100%{ transform:scale(.8); opacity:.6; box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5); } 50%{ transform:scale(1.25); opacity:1; box-shadow:0 0 12px 3px rgba(var(--accent-rgb),.55); } }
.sync-error{ text-align:start; }
#restore-pass{ display:flex; flex-direction:column; gap:14px; }
#restore-pass[hidden]{ display:none; }
#restore-pass > .btn{ flex-shrink:0; }


/* =====================================================================
   MOTION & GLOW SYSTEM
   One consistent language for every page and every button:
     • pages bloom in (fade + rise + a soft light that settles)
     • card contents arrive in a short stagger
     • every control: hover glow, press ripple, focus ring, selected glow
     • the main action breathes and catches the light now and then
   Performance: transform/opacity for anything that loops; hover effects
   only on real pointers (no sticky hover on phones). Reduced-motion users
   get the colour changes without the movement (bottom of this block).
===================================================================== */
:root{
  --glow-rgb:var(--accent-rgb);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --glow-ring:0 0 0 1px rgba(var(--glow-rgb),.34), 0 0 22px -2px rgba(var(--glow-rgb),.42);
  --glow-strong:0 0 0 1px rgba(var(--glow-rgb),.6), 0 0 30px 0 rgba(var(--glow-rgb),.5), 0 12px 30px -12px rgba(var(--glow-rgb),.6);
}
html{ -webkit-tap-highlight-color:transparent; }
button, [role="button"], .lang-option, .chip, .model-option, .name-option, .style-option, .chat-history-item{ touch-action:manipulation; -webkit-user-select:none; user-select:none; }

/* ---------- pages ---------- */
.stage{ position:relative; animation:fx-stage-in .62s var(--ease-out) both; }
@keyframes fx-stage-in{
  from{ opacity:0; transform:translateY(16px) scale(.988); }
  to{ opacity:1; transform:none; }
}
/* a light that blooms behind each wizard page, then settles into a slow breath */
.stage:not(#stage-chat)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 34% at 50% 42%, rgba(var(--glow-rgb),.20) 0%, transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(var(--glow-rgb),.10) 0%, transparent 72%);
  opacity:0;
  animation:fx-bloom 1.3s .05s ease-out forwards, fx-breathe 7s 1.4s ease-in-out infinite;
}
@keyframes fx-bloom{ from{ opacity:0; transform:scale(.88); } to{ opacity:1; transform:none; } }
@keyframes fx-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.stage > *{ position:relative; z-index:1; }

/* splash */
.splash-icon img{ animation:icon-rise .7s var(--ease-out) both, fx-icon-glow 3.4s .9s ease-in-out infinite; }
@keyframes fx-icon-glow{
  0%,100%{ box-shadow:0 20px 50px -15px rgba(var(--accent-rgb),.35), 0 0 0 1px var(--navy-600); }
  50%{ box-shadow:0 20px 64px -8px rgba(var(--accent-rgb),.7), 0 0 0 1px rgba(var(--accent-rgb),.5), 0 0 40px rgba(var(--accent-rgb),.3); }
}
.wordmark{ animation:fx-rise .7s .15s var(--ease-out) both; }
.wordmark-suffix{ animation:fx-text-glow 3.4s 1s ease-in-out infinite; }
@keyframes fx-text-glow{ 0%,100%{ text-shadow:0 0 0 rgba(var(--accent-rgb),0); } 50%{ text-shadow:0 0 18px rgba(var(--accent-rgb),.75); } }
.swoosh{ filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.55)); }

/* cards: arrive with a spring, hold a soft living edge, contents stagger in */
.card{
  position:relative; isolation:isolate;
  animation:fx-card-in .7s var(--ease-out) both, fx-card-breathe 6s 1s ease-in-out infinite;
}
@keyframes fx-card-in{ from{ opacity:0; transform:translateY(22px) scale(.965); } to{ opacity:1; transform:none; } }
@keyframes fx-card-breathe{
  0%,100%{ box-shadow:0 24px 60px -30px rgba(0,0,0,.5), 0 0 0 0 rgba(var(--accent-rgb),0); border-color:var(--navy-700); }
  50%{ box-shadow:0 24px 60px -26px rgba(0,0,0,.5), 0 0 38px -8px rgba(var(--accent-rgb),.28); border-color:rgba(var(--accent-rgb),.28); }
}
.card::before{   /* spotlight that follows the finger / cursor */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(var(--glow-rgb),.10), transparent 70%);
  opacity:0; transition:opacity .35s ease;
}
.card.fx-lit::before{ opacity:1; }
.card > *{ animation:fx-rise .6s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 55ms + 140ms); }
.card > :nth-child(1){ --i:0; } .card > :nth-child(2){ --i:1; } .card > :nth-child(3){ --i:2; } .card > :nth-child(4){ --i:3; }
.card > :nth-child(5){ --i:4; } .card > :nth-child(6){ --i:5; } .card > :nth-child(7){ --i:6; } .card > :nth-child(8){ --i:7; }
.card > :nth-child(n+9){ --i:8; }
@keyframes fx-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.card-icon{ animation:fx-rise .6s var(--ease-out) both, fx-icon-glow 4s 1s ease-in-out infinite; }

/* ---------- every button / tappable surface ---------- */
:where(.btn, .icon-btn, .btn-send, .composer-icon-btn, .composer-menu-item, .camera-menu-item, .style-option,
       .chat-history-item, .chat-history-pin, .chat-history-delete, .lang-option, .chip, .model-option, .name-option,
       .drawer-profile-row, .app-brand-btn, .scroll-bottom-btn, .load-earlier-btn, .code-run-btn, .btn-tiny,
       .knowledge-item-delete, .msg-image-save-btn){
  position:relative; isolation:isolate;
  overflow:hidden;      /* fallback for very old browsers */
  overflow:clip;        /* clips the ripple WITHOUT becoming a scroll container (so flex never squashes the control) */
}
.settings-panel > .btn, .card > .btn, .sync-providers > .btn, .sync-connected > .btn, .sync-pass-form > .btn{ flex-shrink:0; }
.btn, .icon-btn, .btn-send, .composer-icon-btn, .composer-menu-item, .camera-menu-item, .style-option,
.chat-history-item, .lang-option, .chip, .model-option, .name-option, .drawer-profile-row, .app-brand-btn,
.scroll-bottom-btn, .load-earlier-btn, .code-run-btn, .btn-tiny, .link-btn, .suggest-toggle, .msg-action-btn, .model-pill{
  transition:transform .26s var(--ease-out), box-shadow .32s ease, background-color .22s ease, color .22s ease,
             border-color .22s ease, opacity .2s ease, filter .25s ease, text-shadow .25s ease;
}
/* light that tracks the pointer inside the control */
.btn::before, .icon-btn::before, .btn-send::before, .composer-icon-btn::before, .composer-menu-item::before,
.camera-menu-item::before, .style-option::before, .chat-history-item::before, .lang-option::before, .chip::before,
.model-option::before, .name-option::before, .drawer-profile-row::before, .app-brand-btn::before,
.scroll-bottom-btn::before, .load-earlier-btn::before, .code-run-btn::before, .btn-tiny::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(110px circle at var(--mx,50%) var(--my,50%), rgba(var(--glow-rgb),.30), transparent 72%);
  opacity:0; transition:opacity .25s ease;
}
.btn-primary::before, .btn-send::before{ background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 70%); }

@media (hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled)::before, .icon-btn:hover::before, .btn-send:hover:not(:disabled)::before,
  .composer-icon-btn:hover::before, .composer-menu-item:hover::before, .camera-menu-item:hover::before,
  .style-option:hover::before, .chat-history-item:hover::before, .lang-option:hover::before, .chip:hover::before,
  .model-option:hover:not(.disabled)::before, .name-option:hover::before, .drawer-profile-row:hover::before,
  .app-brand-btn:hover::before, .scroll-bottom-btn:hover::before, .load-earlier-btn:hover::before,
  .code-run-btn:hover::before, .btn-tiny:hover:not(:disabled)::before{ opacity:1; }

  .btn:hover:not(:disabled){ transform:translateY(-1px); }
  .btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled){ box-shadow:var(--glow-ring); }
  .btn-danger-ghost:hover:not(:disabled){ box-shadow:0 0 0 1px rgba(217,112,74,.55), 0 0 24px -2px rgba(217,112,74,.45); }
  .btn-primary:hover:not(:disabled){ --aura-hi:1; --aura-glow:.6; filter:brightness(1.07) saturate(1.05); }
  .btn-send:hover:not(:disabled){ transform:translateY(-1px) scale(1.07); box-shadow:var(--glow-strong); }
  .btn-provider:hover:not(:disabled){ box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 0 30px -2px rgba(255,255,255,.4), 0 12px 28px -12px rgba(255,255,255,.35); }
  .icon-btn:hover, .composer-icon-btn:hover, .scroll-bottom-btn:hover{ box-shadow:var(--glow-ring); }
  .icon-btn:hover .ico, .composer-icon-btn:hover .ico{ filter:drop-shadow(0 0 5px rgba(var(--glow-rgb),.8)); }
  .lang-option:hover, .chip:hover, .model-option:hover:not(.disabled), .name-option:hover{ box-shadow:var(--glow-ring); transform:translateY(-1px); }
  .chat-history-item:hover, .composer-menu-item:hover, .camera-menu-item:hover, .style-option:hover, .drawer-profile-row:hover{ box-shadow:inset 0 0 0 1px rgba(var(--glow-rgb),.25), 0 0 20px -6px rgba(var(--glow-rgb),.4); }
  .app-brand-btn:hover{ box-shadow:var(--glow-ring); }
  .link-btn:hover, .suggest-toggle:hover, .msg-action-btn:hover:not(:disabled), .model-pill:hover, .translate-link:hover{ text-shadow:0 0 14px rgba(var(--glow-rgb),.85); }
}
/* press — everywhere, including touch */
.btn:active:not(:disabled), .icon-btn:active, .composer-icon-btn:active, .btn-tiny:active:not(:disabled){ transform:scale(.95); transition-duration:.08s; }
.btn-send:active:not(:disabled){ transform:scale(.9); box-shadow:var(--glow-strong); transition-duration:.08s; }
.lang-option:active, .chip:active, .model-option:active, .name-option:active,
.chat-history-item:active, .composer-menu-item:active, .camera-menu-item:active, .style-option:active, .drawer-profile-row:active{ transform:scale(.975); transition-duration:.08s; }
.btn:active:not(:disabled), .icon-btn:active, .composer-icon-btn:active, .lang-option:active, .chip:active, .model-option:active, .name-option:active{ box-shadow:var(--glow-strong); }
.btn:active:not(:disabled)::before, .icon-btn:active::before, .btn-send:active::before, .composer-icon-btn:active::before,
.lang-option:active::before, .chip:active::before, .model-option:active::before, .name-option:active::before,
.chat-history-item:active::before, .composer-menu-item:active::before, .style-option:active::before{ opacity:1; }

/* keyboard focus: a clear glowing ring */
.btn:focus-visible, .icon-btn:focus-visible, .btn-send:focus-visible, .composer-icon-btn:focus-visible, .lang-option:focus-visible,
.chip:focus-visible, .model-option:focus-visible, .name-option:focus-visible, .chat-history-item:focus-visible,
.composer-menu-item:focus-visible, .style-option:focus-visible, .app-brand-btn:focus-visible, .link-btn:focus-visible,
.msg-action-btn:focus-visible, .model-pill:focus-visible, .suggest-toggle:focus-visible, .scroll-bottom-btn:focus-visible{
  outline:none; box-shadow:0 0 0 2px var(--navy-900), 0 0 0 4px var(--teal-400), 0 0 26px rgba(var(--glow-rgb),.65);
}

/* the main action: breathes, and catches the light now and then */
.btn-primary:not(:disabled){ animation:fx-aura 3.2s ease-in-out infinite; }
@keyframes fx-aura{
  0%,100%{ box-shadow:0 10px 26px -12px rgba(var(--accent-rgb),.5), 0 0 0 0 rgba(var(--accent-rgb),0); }
  50%{ box-shadow:0 12px 30px -10px rgba(var(--accent-rgb),var(--aura-hi,.78)), 0 0 28px 2px rgba(var(--accent-rgb),var(--aura-glow,.36)); }
}
.btn-primary:not(:disabled)::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:60%; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 20%, rgba(255,255,255,.42) 50%, transparent 80%);
  transform:translateX(-130%) skewX(-12deg);
  animation:fx-sheen 5.2s 1.4s ease-in-out infinite;
}
@keyframes fx-sheen{ 0%{ transform:translateX(-130%) skewX(-12deg); } 38%,100%{ transform:translateX(260%) skewX(-12deg); } }
.btn-send:not(:disabled){ animation:fx-send-glow 3s ease-in-out infinite; }
@keyframes fx-send-glow{ 0%,100%{ box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.6); } 50%{ box-shadow:0 8px 24px -6px rgba(var(--accent-rgb),.9), 0 0 20px rgba(var(--accent-rgb),.4); } }
.btn-stop{ animation:fx-stop-pulse 1.5s ease-in-out infinite; }
@keyframes fx-stop-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(217,112,74,.55); } 50%{ box-shadow:0 0 0 9px rgba(217,112,74,0), 0 0 22px rgba(217,112,74,.55); } }

/* press ripple (element is added by fx.js) */
.fx-ripple{
  position:absolute; left:var(--rx); top:var(--ry); width:var(--rd); height:var(--rd); margin:calc(var(--rd) / -2) 0 0 calc(var(--rd) / -2);
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(var(--glow-rgb),.6) 0%, rgba(var(--glow-rgb),.25) 45%, transparent 70%);
  transform:scale(0); opacity:.95; animation:fx-ripple .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.btn-primary .fx-ripple, .btn-send .fx-ripple, .btn-google .fx-ripple{ background:radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,.3) 45%, transparent 70%); }
.btn-google .fx-ripple{ background:radial-gradient(circle, rgba(66,133,244,.35) 0%, rgba(66,133,244,.12) 45%, transparent 70%); }
@keyframes fx-ripple{ to{ transform:scale(1); opacity:0; } }

/* ---------- selected states glow ---------- */
.lang-option[aria-selected="true"], .chip.selected, .model-option.selected, .name-option.selected{
  box-shadow:var(--glow-ring); animation:fx-select .5s var(--ease-spring);
}
@keyframes fx-select{ 0%{ transform:scale(.97); box-shadow:0 0 0 0 rgba(var(--glow-rgb),.7); } 60%{ transform:scale(1.02); } 100%{ transform:none; } }
.lang-option[aria-selected="true"] .dot{ box-shadow:0 0 12px rgba(var(--glow-rgb),.9); }
.switch input:checked + .switch-slider{ box-shadow:0 0 16px rgba(var(--glow-rgb),.65); }
.switch-slider, .switch-slider::before{ transition:background .25s ease, transform .3s var(--ease-spring), box-shadow .3s ease; }

/* ---------- inputs ---------- */
.field input, .field textarea, .field select{ transition:border-color .2s ease, box-shadow .3s ease, background .2s ease; }
.field input:focus, .field textarea:focus, .field select:focus{
  box-shadow:0 0 0 4px rgba(var(--glow-rgb),.14), 0 0 26px -6px rgba(var(--glow-rgb),.5);
}

/* ---------- chat ---------- */
.chat-log .msg:nth-last-child(-n+3){ animation:fx-msg-in .45s var(--ease-out) both; }
@keyframes fx-msg-in{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
.chat-header{ animation:fx-rise .6s var(--ease-out) both; }
.composer-pill{ animation:fx-rise .6s .12s var(--ease-out) both; }
.msg-typing .dot{ box-shadow:0 0 8px rgba(var(--glow-rgb),.6); }

/* ---------- overlays & panels ---------- */
.overlay{ animation:fx-fade .25s ease both; }
@keyframes fx-fade{ from{ opacity:0; } to{ opacity:1; } }
.overlay-panel{ box-shadow:0 0 70px -22px rgba(var(--glow-rgb),.4), 0 30px 60px -30px rgba(0,0,0,.6); }
.settings-panel > *{ animation:fx-rise .5s var(--ease-out) both; }
.settings-panel > :nth-child(2){ animation-delay:.04s; } .settings-panel > :nth-child(3){ animation-delay:.08s; }
.settings-panel > :nth-child(4){ animation-delay:.12s; } .settings-panel > :nth-child(5){ animation-delay:.16s; }
.settings-panel > :nth-child(n+6){ animation-delay:.2s; }
.settings-section-label{ text-shadow:0 0 18px rgba(var(--glow-rgb),.35); }
.storage-notice{ animation:fx-rise .4s var(--ease-out) both; box-shadow:0 0 28px -8px rgba(var(--glow-rgb),.45); }
.form-error, .settings-success, .info-box, .warning-box{ animation:fx-rise .4s var(--ease-out) both; }

/* ---------- reduced motion: keep the colour feedback, drop the movement ---------- */
@media (prefers-reduced-motion: reduce){
  .stage, .stage::before, .card, .card > *, .card-icon, .splash-icon img, .wordmark, .wordmark-suffix,
  .btn-primary, .btn-primary::after, .btn-send, .btn-stop, .chat-log .msg, .chat-header, .composer-pill,
  .overlay, .settings-panel > *, .storage-notice, .form-error, .settings-success, .info-box, .warning-box,
  .lang-option, .chip, .model-option, .name-option, .sync-status::before{ animation:none !important; }
  .stage:not(#stage-chat)::before{ opacity:1; }
  .fx-ripple{ display:none; }
  .btn:hover:not(:disabled), .lang-option:hover, .chip:hover, .model-option:hover, .name-option:hover,
  .btn-send:hover:not(:disabled){ transform:none !important; }
  .btn:active:not(:disabled), .icon-btn:active, .lang-option:active, .chip:active{ transform:none !important; }
}


/* ---- composer on phones: give the text field room so its hint stays on one line ---- */
.composer-pill textarea::placeholder{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:430px){
  .composer-pill{ margin-left:10px; margin-right:10px; gap:2px; padding-left:8px; }
}
@media (max-width:350px){
  .composer-pill textarea{ font-size:16px; }
  .composer-icon-btn{ width:32px; height:32px; }
  .composer-pill .btn-send{ width:34px; height:34px; }
}


/* ---- sync protection choice ---- */
.restore-field{ display:flex; flex-direction:column; gap:14px; }
.restore-field[hidden]{ display:none; }
.sync-mode{ display:flex; flex-direction:column; gap:10px; }
.sync-mode[hidden]{ display:none; }
.sync-mode-opt{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px; cursor:pointer;
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:14px;
  transition:border-color .2s ease, box-shadow .3s ease, transform .2s var(--ease-out);
}
.sync-mode-opt input{ margin-top:3px; accent-color:var(--teal-400); flex-shrink:0; }
.sync-mode-opt span{ display:flex; flex-direction:column; gap:4px; text-align:start; }
.sync-mode-opt strong{ font-size:15px; color:var(--foam); }
.sync-mode-opt small{ font-size:13px; line-height:1.45; color:var(--slate-400); }
.sync-mode-opt:has(input:checked){ border-color:rgba(var(--accent-rgb),.6); box-shadow:var(--glow-ring); }
@media (hover:hover) and (pointer:fine){ .sync-mode-opt:hover{ box-shadow:var(--glow-ring); transform:translateY(-1px); } }
.sync-mode-opt:active{ transform:scale(.985); }


/* ---- login page + sign out ---- */
.login-divider{ display:flex; align-items:center; gap:12px; color:var(--slate-500); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.login-divider::before, .login-divider::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--navy-600), transparent); }
.login-note{ text-align:center; }
#login-providers .btn-provider{ min-height:50px; }
.signout-panel{ display:flex; flex-direction:column; gap:10px; }
.signout-panel[hidden]{ display:none; }
.signout-panel > .btn, #account-status + .btn{ flex-shrink:0; }
.account-status{ display:flex; align-items:center; gap:10px; }
.account-status::before{
  content:""; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--slate-500);
}
.account-status[data-kind="in"]::before{ background:var(--teal-400); box-shadow:0 0 10px 1px rgba(var(--accent-rgb),.7); }


/* Safety net: an element marked `hidden` is always hidden, even if a class gives it display:flex/grid. */
[hidden]{ display:none !important; }


/* ---- Translate: language chooser + comfortable button ---- */
.translate-row{ margin-top:10px; }
.translate-link{ min-height:36px; padding:6px 12px 6px 8px; font-size:13.5px; border-radius:999px; gap:7px; }
.translate-link .ico{ width:16px; height:16px; }
.translate-search{
  width:100%; box-sizing:border-box; margin:2px 0 10px; padding:12px 14px; font-size:16px; font-family:inherit; color:var(--foam);
  background:var(--navy-900); border:1px solid var(--navy-700); border-radius:var(--radius-sm); outline:none;
  transition:border-color .2s ease, box-shadow .3s ease;
}
.translate-search:focus{ border-color:var(--teal-400); box-shadow:0 0 0 4px rgba(var(--glow-rgb),.14), 0 0 26px -6px rgba(var(--glow-rgb),.5); }
.translate-list{ display:flex; flex-direction:column; gap:6px; max-height:min(52vh, 420px); overflow-y:auto; overscroll-behavior:contain; padding:2px; }
.translate-heading{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500); margin:8px 4px 2px; }
.translate-option{ flex-shrink:0; }
.translate-option .tag{ font-size:11.5px; color:var(--teal-300); }
.translate-empty{ padding:18px 8px; text-align:center; color:var(--slate-500); font-size:14px; }


/* =====================================================================
   Arabic text handling (layout is never mirrored)
   - Arabic is a joined script: letter-spacing and forced uppercase break
     the letter shapes, so both are switched off when the interface is Arabic.
   - Text blocks pick their own direction from their content, so Arabic text
     reads right-to-left while buttons and panels stay in place. Code,
     formulas and tables always stay left-to-right.
===================================================================== */
html[lang="ar"] *{ letter-spacing:0 !important; text-transform:none !important; }
.msg-text p, .msg-text li, .msg-text h1, .msg-text h2, .msg-text h3, .msg-text h4, .msg-text blockquote{ unicode-bidi:plaintext; text-align:start; }
.msg-text pre, .msg-text code, .msg-text .katex, .msg-text .katex-display, .msg-text table{ direction:ltr; text-align:left; unicode-bidi:isolate; }
#chat-input{ unicode-bidi:plaintext; text-align:start; }


/* ---------------------------------------------------------------------
   Modes bar (Candidates / Teachers / Professionals), shown above the composer
--------------------------------------------------------------------- */
.mode-bar{
  margin:0 12px 8px; padding:10px 12px; border-radius:14px;
  background:var(--surface); border:1px solid rgba(var(--accent-rgb),.28);
  max-height:42vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--slate-300, inherit);
}
.mode-bar[hidden]{ display:none; }
.mode-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.mode-head strong{ color:var(--teal-300); font-size:13.5px; }
.mode-head small{ color:var(--slate-500); font-size:11.5px; }
.mode-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mode-row-3{ grid-template-columns:1fr 1fr 1.3fr; }
.mode-field{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mode-field > span{ font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--slate-500); text-transform:uppercase; }
.mode-select, .mode-input{
  width:100%; min-width:0; padding:8px 10px; border-radius:10px; font:inherit; font-size:14px;
  background:var(--field-bg, rgba(255,255,255,.04)); color:inherit; border:1px solid var(--navy-600);
}
.mode-select:focus, .mode-input:focus{ outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
.mode-select option{ color:#111; background:#fff; }
.mode-details > summary{ cursor:pointer; font-size:12px; font-weight:600; color:var(--teal-300); margin-bottom:8px; }
.mode-details[open] > .mode-row, .mode-details[open] > .mode-chips{ margin-bottom:8px; }
.mode-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mode-chip{
  appearance:none; font:inherit; font-size:12px; padding:5px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--navy-600); background:transparent; color:inherit;
}
.mode-chip.on{ background:rgba(var(--accent-rgb),.14); border-color:var(--teal-400); color:var(--teal-300); }
.mode-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mode-go{ padding:8px 12px; }
.mode-note{ margin:0; font-size:11.5px; line-height:1.5; color:var(--slate-500); }
.mode-msg{ margin:0; font-size:12px; color:var(--teal-300); }
.mode-msg[hidden]{ display:none; }
.msg-action-strong{ color:var(--teal-300); border-color:rgba(var(--accent-rgb),.45); }
@media (max-width:420px){ .mode-row-3{ grid-template-columns:1fr 1fr; } .mode-row-3 .mode-field:last-child{ grid-column:1 / -1; } }

/* Drawn figures (AI-written SVG) */
.diagram-figure{ margin:10px 0; padding:8px; border-radius:12px; background:#fff; border:1px solid rgba(var(--accent-rgb),.3); }
.diagram-figure svg{ border-radius:8px; margin:0 auto; }
.diagram-actions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.diagram-btn{
  appearance:none; font:inherit; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; cursor:pointer;
  border:1px solid #b9a469; background:#fbf6e6; color:#4a3d12;
}
.diagram-btn:hover{ background:#f3e9c2; }
.diagram-figure pre{ margin:8px 0 0; text-align:left; max-height:240px; overflow:auto; }


/* ---------------------------------------------------------------------
   Per-mode themes + animated colour changes
   Every colour in the app comes from the variables below, so a mode only has to
   override them. They are registered with @property so the browser can tween them:
   switching mode (or sun/moon in Professionals) fades the whole interface to the
   new colours instead of snapping. Browsers without @property just switch instantly.
--------------------------------------------------------------------- */
@property --navy-900{ syntax:"<color>"; inherits:true; initial-value:#041a20; }
@property --navy-800{ syntax:"<color>"; inherits:true; initial-value:#062c35; }
@property --navy-700{ syntax:"<color>"; inherits:true; initial-value:#0b4046; }
@property --navy-600{ syntax:"<color>"; inherits:true; initial-value:#1a5d5e; }
@property --teal-400{ syntax:"<color>"; inherits:true; initial-value:#d8be84; }
@property --teal-300{ syntax:"<color>"; inherits:true; initial-value:#ecdca0; }
@property --teal-600{ syntax:"<color>"; inherits:true; initial-value:#a58c52; }
@property --foam{ syntax:"<color>"; inherits:true; initial-value:#eef3ea; }
@property --slate-400{ syntax:"<color>"; inherits:true; initial-value:#9db8b3; }
@property --slate-500{ syntax:"<color>"; inherits:true; initial-value:#7a9995; }
@property --sky{ syntax:"<color>"; inherits:true; initial-value:#add0cc; }
@property --backdrop{ syntax:"<color>"; inherits:true; initial-value:#0b0d19; }
@property --on-accent{ syntax:"<color>"; inherits:true; initial-value:#062028; }
@property --info-text{ syntax:"<color>"; inherits:true; initial-value:#b7d9d4; }
@property --success-text{ syntax:"<color>"; inherits:true; initial-value:#ecdca0; }
@property --warning-text{ syntax:"<color>"; inherits:true; initial-value:#e8b978; }
@property --accent-rgb{ syntax:"<number>#"; inherits:true; initial-value:216,190,132; }

:root{
  --theme-t:.75s;
  transition:
    --navy-900 var(--theme-t) ease, --navy-800 var(--theme-t) ease, --navy-700 var(--theme-t) ease, --navy-600 var(--theme-t) ease,
    --teal-400 var(--theme-t) ease, --teal-300 var(--theme-t) ease, --teal-600 var(--theme-t) ease,
    --foam var(--theme-t) ease, --slate-400 var(--theme-t) ease, --slate-500 var(--theme-t) ease,
    --sky var(--theme-t) ease, --backdrop var(--theme-t) ease, --on-accent var(--theme-t) ease,
    --info-text var(--theme-t) ease, --success-text var(--theme-t) ease, --warning-text var(--theme-t) ease,
    --accent-rgb var(--theme-t) ease;
}
@media (prefers-reduced-motion:reduce){ :root{ --theme-t:.01s; } }

/* Candidates = exactly the supplied file's colours: jersey teal + gold (font is Roboto everywhere). */
:root[data-mode="candidates"]{
  --navy-900:#041a20; --navy-800:#062c35; --navy-700:#0b4046; --navy-600:#1a5d5e;
  --teal-400:#d8be84; --teal-300:#ecdca0; --teal-600:#a58c52;
  --foam:#eef3ea; --slate-400:#9db8b3; --slate-500:#7a9995;
  --accent-rgb:216,190,132; --sky:#add0cc; --backdrop:#0b0d19; --on-accent:#062028;
  --info-text:#b7d9d4; --success-text:#ecdca0; --warning-text:#e8b978;
}

/* ----- Teachers + Professionals share one palette: neutral, dark (default) or light (sun / half-moon switch) ----- */
:root[data-mode="professionals"], :root[data-mode="teachers"]{
  --navy-900:#000000; --navy-800:#0d0d0f; --navy-700:#1c1c1f; --navy-600:#323237;
  --teal-400:#58a6ff; --teal-300:#9ccbff; --teal-600:#2f7fd6;
  --foam:#f4f4f5; --slate-400:#a1a1aa; --slate-500:#7d7d86;
  --accent-rgb:88,166,255; --sky:#a5d0ff; --backdrop:#000000; --on-accent:#04121f;
  --info-text:#a5d0ff; --success-text:#7ee2a0; --warning-text:#e8b978;
}
:root[data-mode="professionals"][data-pro-theme="light"], :root[data-mode="teachers"][data-pro-theme="light"]{
  --navy-900:#ffffff; --navy-800:#f7f7f8; --navy-700:#ebebee; --navy-600:#cfcfd5;
  --teal-400:#1f6feb; --teal-300:#1558c4; --teal-600:#0f4bb0;
  --foam:#111113; --slate-400:#52525b; --slate-500:#71717a;
  --accent-rgb:31,111,235; --sky:#0b5cc2; --backdrop:#ffffff; --on-accent:#ffffff;
  --info-text:#0b4aa0; --success-text:#14703a; --warning-text:#8a5400;
  --field-bg:rgba(0,0,0,.04);
  color-scheme:light;
}
/* Light and Dark are totally light and totally dark: no country-colour glow, no tinted gradient, no coloured ring. */
:root[data-mode="professionals"], :root[data-mode="teachers"]{
  --glow-a:transparent !important; --glow-b:transparent !important; --glow-c:transparent !important;
  --country-glow-shadow:transparent !important;
}
:root[data-mode="professionals"] body, :root[data-mode="teachers"] body{ background:var(--navy-900); background-attachment:scroll; }
:root[data-mode="professionals"] body::before, :root[data-mode="teachers"] body::before,
:root[data-mode="professionals"] .stage:not(#stage-chat)::before, :root[data-mode="teachers"] .stage:not(#stage-chat)::before{ display:none; }
:root[data-mode="professionals"] #stage-chat, :root[data-mode="teachers"] #stage-chat{ background:var(--navy-900); }
:root[data-mode="professionals"] #app, :root[data-mode="teachers"] #app{ background:var(--navy-900); box-shadow:0 30px 70px -40px rgba(0,0,0,.45); }
:root[data-mode="professionals"] .app-brand-icon, :root[data-mode="teachers"] .app-brand-icon{ box-shadow:none; }
:root[data-mode="professionals"] .btn-send, :root[data-mode="teachers"] .btn-send,
:root[data-mode="professionals"] .composer-pill:focus-within, :root[data-mode="teachers"] .composer-pill:focus-within{ box-shadow:none; }
:root[data-mode="professionals"], :root[data-mode="teachers"]{ --glow-strong:none; --glow-ring:none; }
:root[data-mode="professionals"][data-pro-theme="light"] .msg-user .msg-text a, :root[data-mode="teachers"][data-pro-theme="light"] .msg-user .msg-text a{ color:#fff; }

/* ----- theme switch, top-right corner of the header (Teachers: sun / drop / moon, Professionals: sun / moon) ----- */
.chat-header{ position:relative; z-index:20; } /* above the chat area, so the ↓ menu below the icon can be tapped; below the composer menus (30+) */
.theme-toggle{
  position:absolute; z-index:3;
  top:calc(9px + env(safe-area-inset-top)); inset-inline-end:14px;
  width:64px; height:30px; padding:3px; box-sizing:border-box; border-radius:999px;
  background:var(--navy-700); border:1px solid var(--navy-600);
  display:grid; grid-template-columns:repeat(2, 1fr); align-items:center;
  transition:background-color var(--theme-t, .75s) ease, border-color var(--theme-t, .75s) ease;
}
.theme-toggle.theme-toggle-3{ width:96px; grid-template-columns:repeat(3, 1fr); }
.theme-toggle[hidden]{ display:none; }
.theme-opt{
  position:relative; z-index:1; height:100%; padding:0; margin:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--slate-400); -webkit-tap-highlight-color:transparent;
  transition:color .4s ease;
}
.theme-opt-blue{ display:none; }
.theme-toggle-3 .theme-opt-blue{ display:grid; }
.theme-opt .ico{ width:16px; height:16px; transition:transform .5s var(--ease-out, ease); }
.theme-opt[aria-checked="true"]{ color:var(--on-accent); }
.theme-opt[aria-checked="false"] .ico-sun{ transform:rotate(-40deg) scale(.9); }
.theme-opt[aria-checked="false"] .ico-moon{ transform:rotate(40deg) scale(.9); }
.theme-toggle-thumb{
  position:absolute; top:3px; bottom:3px; inset-inline-start:3px; width:calc((100% - 6px) / 2); border-radius:999px;
  background:var(--teal-400); box-shadow:0 2px 8px -2px rgba(var(--accent-rgb),.7);
  transition:transform .5s var(--ease-out, ease), background-color var(--theme-t, .75s) ease;
}
.theme-toggle-3 .theme-toggle-thumb{ width:calc((100% - 6px) / 3); }
.theme-toggle[data-theme="dark"] .theme-toggle-thumb{ transform:translateX(100%); }
.theme-toggle-3[data-theme="blue"] .theme-toggle-thumb{ transform:translateX(100%); }
.theme-toggle-3[data-theme="dark"] .theme-toggle-thumb{ transform:translateX(200%); }
html[dir="rtl"] .theme-toggle[data-theme="dark"] .theme-toggle-thumb{ transform:translateX(-100%); }
html[dir="rtl"] .theme-toggle-3[data-theme="blue"] .theme-toggle-thumb{ transform:translateX(-100%); }
html[dir="rtl"] .theme-toggle-3[data-theme="dark"] .theme-toggle-thumb{ transform:translateX(-200%); }
.theme-opt:focus-visible{ outline:2px solid var(--teal-400); outline-offset:1px; border-radius:50%; }

/* ----- lesson video card (Candidates) ----- */
.msg-video{
  align-self:flex-start; width:min(420px, 94%);
  background:var(--navy-800); border:1px solid rgba(var(--accent-rgb),.3);
  border-radius:var(--radius-md); padding:10px; display:flex; flex-direction:column; gap:8px;
  animation:fx-rise .5s var(--ease-out, ease) both;
}
.video-card-label{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--teal-300); }
.video-card-label .ico{ width:14px; height:14px; }
.video-card-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000; }
.video-card-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card-title{ font-size:13.5px; font-weight:600; line-height:1.35; color:var(--foam); }
.video-card-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:11.5px; color:var(--slate-500); }
.video-card-meta a{ color:var(--teal-300); font-weight:600; text-decoration:none; }
.video-card-meta a:hover{ text-decoration:underline; }
.video-card-loading{ font-size:12px; color:var(--slate-500); }

/* ----- "ask in the right mode" recommendation card ----- */
.msg-hint{
  align-self:stretch; padding:12px 14px; border-radius:var(--radius-md);
  background:rgba(var(--accent-rgb),.10); border:1px solid rgba(var(--accent-rgb),.38); color:var(--foam);
  display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.5;
  animation:fx-rise .45s var(--ease-out, ease) both;
}
.msg-hint strong{ color:var(--teal-300); }
.hint-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.hint-actions .btn-tiny[disabled]{ opacity:.5; cursor:default; }
.hint-note{ margin:0; font-size:11.5px; color:var(--slate-500); }

/* ----- thinking message + dots ----- */
.msg-typing .typing-label{ margin-inline-end:3px; }
.typing-label{ font-size:13.5px; font-weight:500; color:var(--slate-400); letter-spacing:.01em; }
.typing-label-in{ animation:typing-word .55s var(--ease-out, ease) both; }
@keyframes typing-word{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .typing-label-in{ animation:none; } }

/* ---- mode subheading: mode name on the left, chat name + pin on the right ---- */
.mode-head{ flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:8px 10px; }
.mode-titles{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-width:0; flex:1 1 auto; }
.mode-chat{ display:flex; align-items:center; gap:2px; min-width:0; flex:0 1 52%; justify-content:flex-end; }
.mode-chat-name{ font-size:12.5px; font-weight:600; color:var(--foam); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mode-chat-pin{ flex:none; }
.mode-chat-pin.pinned .ico{ fill:currentColor; }

/* ---- answer language: detected (default) or one chosen language ---- */
.mode-lang{ display:flex; flex-direction:column; gap:6px; }
.mode-lang-label{ font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--slate-500); text-transform:uppercase; }
.mode-seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mode-seg-btn{
  appearance:none; font:inherit; font-size:13px; padding:8px 10px; border-radius:10px; cursor:pointer;
  border:1px solid var(--navy-600); background:transparent; color:inherit; text-align:center;
}
.mode-seg-btn.on{ background:rgba(var(--accent-rgb),.14); border-color:var(--teal-400); color:var(--teal-300); font-weight:600; }
.mode-lang-hint{ font-size:11.5px; color:var(--slate-500); }

/* ---- welcome: several middle names ---- */
.middle-names-list{ display:flex; flex-direction:column; gap:8px; }
.middle-row{ display:flex; gap:6px; align-items:center; }
.middle-row input{ flex:1; min-width:0; }
.middle-remove{ flex:none; font-size:20px; line-height:1; }

/* ---- ↓ beside the app icon: System / API key. The icon button itself is untouched; the arrow sits outside it. ---- */
.brand-group{ position:relative; display:inline-flex; align-items:center; }
.brand-caret{
  position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:2px;
  width:24px; height:24px; padding:0; display:grid; place-items:center; border-radius:8px;
  background:none; border:none; color:var(--slate-500); cursor:pointer;
}
.brand-caret:hover, .brand-caret[aria-expanded="true"]{ background:var(--navy-700); color:var(--foam); }
.brand-caret .ico{ width:16px; height:16px; }
.source-pop{
  position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); z-index:40;
  width:min(300px, calc(100vw - 32px)); padding:8px; display:flex; flex-direction:column; gap:4px;
  background:var(--navy-800); border:1px solid var(--navy-600); border-radius:14px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.45);
}
.source-pop[hidden]{ display:none; }
.source-opt{
  appearance:none; font:inherit; font-size:14px; text-align:left; padding:9px 12px; border-radius:10px;
  border:1px solid transparent; background:transparent; color:inherit; cursor:pointer;
}
.source-opt:hover{ background:var(--navy-700); }
.source-opt[aria-checked="true"]{ border-color:var(--teal-400); color:var(--teal-300); font-weight:600; }
.source-keys{ display:flex; flex-direction:column; gap:8px; padding:6px 4px 2px; }
.source-keys[hidden]{ display:none; }
.source-keys-label{ font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--slate-500); }
.source-key-list{ display:flex; flex-direction:column; gap:6px; }
.source-key-row{ display:flex; gap:6px; align-items:center; }
.source-key-row input{
  flex:1; min-width:0; font-family:inherit; font-size:16px; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--navy-700); background:var(--navy-900); color:var(--foam);
}
.source-key-row input:focus{ outline:2px solid var(--teal-400); outline-offset:1px; }
.source-key-rm{ flex:none; font-size:20px; line-height:1; }
.source-add{
  align-self:flex-start; width:34px; height:34px; border-radius:10px; font-size:20px; line-height:1; cursor:pointer;
  border:1px dashed var(--navy-600); background:transparent; color:inherit;
}
.source-add[hidden]{ display:none; }
.source-hint{ font-size:11.5px; color:var(--slate-500); }
.source-ok{ align-self:flex-end; min-width:84px; }

/* ---- the 4 modes: only the current one is shown, centred just below the icon; tap it to see all four ---- */
.source-modes{ position:relative; display:flex; justify-content:center; padding:4px 0 6px; }
.source-modes[hidden]{ display:none; }
.source-mode-current{
  appearance:none; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px; padding:4px 8px 4px 13px; border-radius:999px;
  border:1px solid var(--teal-400); background:rgba(var(--accent-rgb),.14); color:var(--teal-300);
}
.source-mode-current .ico{ width:15px; height:15px; transition:transform .2s ease; }
.source-mode-current[aria-expanded="true"] .ico{ transform:rotate(180deg); }
.source-mode-list{
  position:absolute; top:calc(100% - 2px); left:50%; transform:translateX(-50%); z-index:31;
  min-width:170px; display:flex; flex-direction:column; gap:2px; padding:6px;
  background:var(--navy-800); border:1px solid var(--navy-600); border-radius:14px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);
}
.source-mode-list[hidden]{ display:none; }
.source-mode-opt{
  appearance:none; font:inherit; font-size:13.5px; text-align:center; cursor:pointer; padding:9px 12px;
  border-radius:10px; border:1px solid transparent; background:none; color:inherit;
}
.source-mode-opt:hover{ background:var(--navy-700); }
.source-mode-opt.on{ background:rgba(var(--accent-rgb),.14); border-color:var(--teal-400); color:var(--teal-300); font-weight:600; }

/* ---- subheading just below the heading: mode name + hint, this chat's name and its pin ---- */
.chat-subheading{ padding:8px 20px 8px; border-bottom:1px solid var(--navy-700); }
.chat-subheading:empty{ display:none; }
.chat-subheading .mode-head{ justify-content:space-between; flex-wrap:nowrap; align-items:center; gap:10px; }
.chat-subheading .mode-titles{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; overflow:hidden; line-height:1.3; }
.chat-subheading .mode-titles strong{ font-size:14px; }
.chat-subheading .mode-titles small{ font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-subheading .mode-chat{ display:flex; align-items:center; gap:2px; flex:0 0 auto; max-width:38%; }
.chat-subheading .mode-chat-name{ font-size:12.5px; color:var(--slate-400); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- header corner buttons: ☰ chats at the top-left, ✎ new chat at the top-right (the middle icon is not touched) ---- */
.header-corner{
  position:absolute; top:50%; transform:translateY(-50%); margin:0;
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
}
.header-corner:hover{ background:var(--navy-700); color:var(--foam); }
.header-corner .ico{ width:19px; height:19px; }
.header-menu{ inset-inline-start:-6px; }
.header-newchat{ inset-inline-end:-6px; }
/* where the sun / moon switch is shown (Teachers, Professionals) new chat sits just to its left */
:root[data-mode="teachers"] .header-newchat, :root[data-mode="professionals"] .header-newchat{ inset-inline-end:66px; }
:root[data-mode="teachers"] .header-newchat{ inset-inline-end:98px; }

/* ---- rainbow histogram along the bottom: bars (red, orange, yellow) rise and fall in bell/ogive shapes while you speak or a song plays ---- */
.rainbow-fx{
  position:fixed; left:0; right:0; bottom:0; height:78px; z-index:8; pointer-events:none; overflow:hidden;
  opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;
}
body.rainbow-on .rainbow-fx{ opacity:1; transform:none; }
.rainbow-fx canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* music is offered in Auto mode and with the visitor's own API keys only */
#song-row[hidden], #song-divider[hidden], #music-settings[hidden]{ display:none; }


/* ---- compact heading + subheading: more room for the chat itself ---- */
.chat-header{ gap:0; padding:calc(6px + env(safe-area-inset-top)) 16px 4px; }
.app-brand-btn{ margin:0; height:28px; }
.header-corner{ width:32px; height:32px; }
.header-menu{ inset-inline-start:-4px; }
.header-newchat{ inset-inline-end:-4px; }
:root[data-mode="teachers"] .header-newchat, :root[data-mode="professionals"] .header-newchat{ inset-inline-end:64px; }
.theme-toggle{ top:calc(6px + env(safe-area-inset-top)); width:58px; height:28px; }
.theme-toggle.theme-toggle-3{ width:90px; }
:root[data-mode="teachers"] .header-newchat{ inset-inline-end:92px; }
/* the mode chip and the model pill share one slim line under the icon */
.chat-header-mid{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:24px; }
.chat-header-mid .source-modes{ padding:0; }
.chat-header-mid .chat-header-row{ gap:0; }
.chat-header-mid .chat-header-text{ flex:none; }
.chat-header-mid .model-pill{ margin:0; }
.source-mode-current{ font-size:12px; padding:2px 6px 2px 11px; }
.source-mode-current .ico{ width:14px; height:14px; }
/* subheading: one thin line — mode name + hint on the left, chat name + pin on the right */
.chat-subheading{ padding:3px 16px; }
.chat-subheading .mode-head{ gap:8px; }
.chat-subheading .mode-titles{ flex-direction:row; flex-wrap:nowrap; align-items:baseline; gap:6px; }
.chat-subheading .mode-titles strong{ font-size:13px; flex:none; }
.chat-subheading .mode-titles small{ font-size:11px; min-width:0; flex:1 1 0; }
.chat-subheading .mode-chat-pin{ width:26px; height:26px; }
.chat-subheading .mode-chat-pin .ico{ width:15px; height:15px; }
.chat-subheading .mode-chat-name{ font-size:12px; }


/* ---- Options (answer language, class/board, …) live in the subheading and open OVER the chat: no layout height used ---- */
.chat-header-row[hidden]{ display:none; }
.subhead-wrap{ position:relative; z-index:19; flex:none; }
.mode-bar.mode-bar-pop{
  position:absolute; top:100%; inset-inline:10px; margin:6px 0 0; z-index:3;
  max-height:min(62vh, 480px); background:var(--navy-800);
  box-shadow:0 20px 44px -16px rgba(0,0,0,.65);
}
.mode-opts-btn{
  appearance:none; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; flex:none;
  display:inline-flex; align-items:center; gap:2px; padding:2px 4px 2px 9px; border-radius:999px;
  border:1px solid var(--navy-600); background:transparent; color:var(--slate-400);
}
.mode-opts-btn:hover, .mode-opts-btn[aria-expanded="true"]{ color:var(--teal-300); border-color:var(--teal-400); background:rgba(var(--accent-rgb),.12); }
.mode-opts-btn .ico{ width:14px; height:14px; transition:transform .2s ease; }
.mode-opts-btn[aria-expanded="true"] .ico{ transform:rotate(180deg); }
.chat-subheading .mode-msg{
  position:absolute; top:100%; inset-inline:16px; margin:4px 0 0; z-index:2; padding:6px 10px; border-radius:10px;
  background:var(--navy-800); border:1px solid var(--navy-600); box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.chat-subheading .mode-msg[hidden]{ display:none; }
.subhead-wrap.options-open .mode-msg{ display:none; }


/* ---- empty chat: greeting (where shown) + a line under it ---- */
.chat-empty-greeting{ flex-direction:column; gap:12px; }
.empty-hello{ display:block; }
.empty-line{ display:block; max-width:34ch; font-size:clamp(14px,3.7vw,17px); font-weight:500; line-height:1.45; color:var(--slate-500); transition:opacity .35s ease; }
.empty-line.fading{ opacity:0; }
.empty-line-candidates{ color:var(--teal-300); }
.empty-line-professionals{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(14px,3.5vw,16px); letter-spacing:.01em; color:var(--teal-300); }
.empty-line-professionals::before{ content:"> "; opacity:.7; }
.chat-empty-greeting.has-line .empty-hello{ font-size:clamp(22px,5.4vw,28px); }

/* ---- Candidates: YouTube link card ---- */
.video-card-link{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:9px 16px; border-radius:999px;
  background:rgba(var(--accent-rgb),.14); border:1px solid var(--teal-400); color:var(--teal-300);
  font-size:13.5px; font-weight:700; text-decoration:none;
}
.video-card-link .ico{ width:16px; height:16px; }
.video-card-link:hover{ background:rgba(var(--accent-rgb),.24); }

/* ---- Teachers: subjects, chapters ---- */
.mode-sub-title{ margin:8px 0 5px; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--slate-500); }
.mode-subjects{ margin-bottom:4px; }
.mode-addrow{ display:flex; gap:6px; align-items:center; margin-top:6px; }
.mode-addrow .mode-input{ flex:1; min-width:0; }
.mode-chap-box{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.mode-chap{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.mode-chap-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--foam); }
.mode-chap-ctl{ display:inline-flex; gap:6px; }
.mode-chap .mode-chips{ max-height:150px; overflow-y:auto; }
.mode-note a{ color:var(--teal-300); }

/* ---- Bloom's taxonomy badges in the chat (same colours as the pyramid chart and the printed paper) ---- */
.bloom-tag{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.02em; color:#fff; padding:1px 8px; border-radius:999px; vertical-align:1px; margin-inline-start:4px; }
.bloom-recall{ background:#e0243a; } .bloom-understand{ background:#f26a21; } .bloom-apply{ background:#f2b705; color:#222; }
.bloom-analyse{ background:#12a58b; } .bloom-evaluate{ background:#2a8fc4; } .bloom-create{ background:#2d2f77; }

/* ---- Professionals: live activity feed ---- */
.msg-typing.msg-typing-feed{ flex-wrap:wrap; align-items:center; }
.act-feed{ width:100%; margin-bottom:6px; }
.act-list{ display:flex; flex-direction:column; gap:7px; }
.act-step{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.4; color:var(--slate-400); animation:typing-word .45s var(--ease-out, ease) both; }
.act-ic{ flex:none; width:16px; height:16px; margin-top:1px; color:var(--teal-300); }
.act-ic svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.act-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.act-text{ font-weight:600; color:var(--foam); }
.act-detail{ display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; padding:3px 8px; border-radius:6px; background:rgba(var(--accent-rgb),.10); color:var(--teal-300); overflow-wrap:anywhere; }
.act-done{ font-size:13px; color:var(--slate-400); }
.act-done > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; padding:3px 0; font-weight:600; }
.act-done > summary::-webkit-details-marker{ display:none; }
.act-done > summary::before{ content:"\25B8"; font-size:11px; transition:transform .15s ease; }
.act-done[open] > summary::before{ transform:rotate(90deg); }
.act-done .act-list{ margin:6px 0 4px 2px; }
.act-done .act-step{ animation:none; }
@media (prefers-reduced-motion:reduce){ .act-step{ animation:none; } }

/* =====================================================================
   Loading symbol: gold and green atoms join with bonds, bounce, part, repeat
   ===================================================================== */
.bond-loader{ display:inline-flex; align-items:center; margin-inline-start:4px; }
.bond-loader svg{ overflow:visible; display:block; }
.bl-atom{ transform-box:fill-box; transform-origin:center; }
.bl-a1, .bl-a3{ fill:#d9a826; }
.bl-a2{ fill:#2fa862; }
.bl-bond{ fill:none; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:22; stroke-dashoffset:22; }
.bl-b1{ stroke:#2fa862; }
.bl-b2{ stroke:#d9a826; }
.bl-b1, .bl-b2{ animation:bl-bond 2.4s ease-in-out infinite; }
.bl-a1{ animation:bl-left 2.4s ease-in-out infinite; }
.bl-a3{ animation:bl-right 2.4s ease-in-out infinite; }
.bl-a2{ animation:bl-mid 2.4s ease-in-out infinite; }
@keyframes bl-bond{ 0%,16%{ stroke-dashoffset:22; } 36%,64%{ stroke-dashoffset:0; } 84%,100%{ stroke-dashoffset:22; } }
@keyframes bl-left{
  0%,10%{ transform:translate(-12px,4px); } 34%{ transform:translate(0,0); }
  42%{ transform:translate(0,-7px); } 50%{ transform:translate(0,0); } 56%{ transform:translate(0,-3px); } 62%{ transform:translate(0,0); }
  88%,100%{ transform:translate(-12px,4px); }
}
@keyframes bl-right{
  0%,10%{ transform:translate(12px,4px); } 34%{ transform:translate(0,0); }
  42%{ transform:translate(0,-7px); } 50%{ transform:translate(0,0); } 56%{ transform:translate(0,-3px); } 62%{ transform:translate(0,0); }
  88%,100%{ transform:translate(12px,4px); }
}
@keyframes bl-mid{
  0%,10%{ transform:translateY(-6px) scale(.7); } 34%{ transform:translateY(0) scale(1); }
  42%{ transform:translateY(-9px) scale(1.12); } 50%{ transform:translateY(0) scale(1); } 56%{ transform:translateY(-4px); } 62%{ transform:translateY(0); }
  88%,100%{ transform:translateY(-6px) scale(.7); }
}
@media (prefers-reduced-motion:reduce){
  .bl-b1, .bl-b2, .bl-a1, .bl-a2, .bl-a3{ animation:none; }
  .bl-bond{ stroke-dashoffset:0; }
}

/* =====================================================================
   A message with a photo or video: a rainbow turns all round it while the answer is being worked out
   ===================================================================== */
@property --rb-angle{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.msg-user.msg-rainbow{ isolation:isolate; overflow:visible; }
.msg-user.msg-rainbow::before, .msg-user.msg-rainbow::after{
  content:""; position:absolute; inset:-4px; z-index:-1; pointer-events:none;
  border-radius:calc(var(--radius-md) + 4px); border-bottom-right-radius:8px;
  background:conic-gradient(from var(--rb-angle), #ff3b30, #ff9500, #ffd60a, #34c759, #00c7be, #0a84ff, #bf5af2, #ff3b30);
  animation:rb-spin 2.6s linear infinite;
}
.msg-user.msg-rainbow::after{ filter:blur(10px); opacity:.55; inset:-6px; }
@keyframes rb-spin{ to{ --rb-angle:360deg; } }
@supports not (background:conic-gradient(from 0deg in oklab, red, blue)) and (not (animation-timeline:scroll())){
  /* browsers without @property still get a soft static rainbow ring */
  .msg-user.msg-rainbow::before{ animation:none; }
}
@media (prefers-reduced-motion:reduce){ .msg-user.msg-rainbow::before, .msg-user.msg-rainbow::after{ animation:none; } }
.msg-video-player{ width:100%; max-width:100%; max-height:320px; background:#000; border-radius:var(--radius-md); object-fit:contain; }

/* =====================================================================
   Candidates: white background; key words in blue bold italic underline (no highlighter colour)
   ===================================================================== */
:root[data-mode="candidates"]{
  --navy-900:#e6effb; --navy-800:#eff5fc; --navy-700:#dae6f6; --navy-600:#bccce2;
  --teal-400:#2a73de; --teal-300:#1456c0; --teal-600:#1a58bd;
  --foam:#12161c; --slate-400:#4a5565; --slate-500:#667085;
  --accent-rgb:42,115,222; --sky:#0b5cc2; --backdrop:#e6effb; --on-accent:#ffffff;
  --info-text:#0b4aa0; --success-text:#14703a; --warning-text:#8a5400;
  --field-bg:rgba(0,0,0,.04);
  --glow-a:transparent !important; --glow-b:transparent !important; --glow-c:transparent !important;
  --country-glow-shadow:transparent !important; --glow-strong:none; --glow-ring:none;
  color-scheme:light;
}
:root[data-mode="candidates"] body{
  background:#e6effb url("assets/bg-candidates-blue.jpg") center / cover no-repeat fixed;
}
:root[data-mode="candidates"] body::before{ display:none; }
:root[data-mode="candidates"] #stage-chat{ border-radius:inherit; }
:root[data-mode="candidates"] #app, :root[data-mode="candidates"] #stage-chat{
  background:#e6effb url("assets/bg-candidates-blue.jpg") center / cover no-repeat;   /* blurred, slightly blue image on the page and the card, so they blend with the blue buttons and text */
  box-shadow:none;
}
@media (min-width:520px){ :root[data-mode="candidates"] #app{ box-shadow:0 30px 70px -40px rgba(20,40,80,.35); } }
:root[data-mode="candidates"] .msg-user .msg-text a{ color:#fff; }
:root[data-mode="candidates"] .msg-assistant strong,
:root[data-mode="candidates"] .msg-assistant .msg-text strong{
  color:#1646c8; font-weight:700; font-style:italic;
  text-decoration:underline; text-decoration-color:currentColor; text-decoration-thickness:1.5px; text-underline-offset:3px;
  background:none; -webkit-text-fill-color:currentColor;
}

/* =====================================================================
   Teachers: a third, middle theme with the blue background
   ===================================================================== */
:root[data-mode="teachers"][data-pro-theme="blue"]{
  --navy-900:#d9edfc; --navy-800:#f1f8fe; --navy-700:#d2e7f8; --navy-600:#9cc6ea;
  --teal-400:#1f6feb; --teal-300:#0b4fb3; --teal-600:#0f4bb0;
  --foam:#0b2447; --slate-400:#2d4a70; --slate-500:#486587;
  --accent-rgb:31,111,235; --sky:#0b5cc2; --backdrop:#8ec9f2; --on-accent:#ffffff;
  --info-text:#0b4aa0; --success-text:#0f6b3a; --warning-text:#7a4a00;
  --field-bg:rgba(255,255,255,.6);
  color-scheme:light;
}
:root[data-mode="teachers"][data-pro-theme="blue"] body{
  background:#8ec9f2 url("assets/bg-blue-blur.jpg") center / cover no-repeat fixed;
}
:root[data-mode="teachers"][data-pro-theme="blue"] #app,
:root[data-mode="teachers"][data-pro-theme="blue"] #stage-chat{
  background:#8ec9f2 url("assets/bg-blue-blur.jpg") center / cover no-repeat;
}
:root[data-mode="teachers"][data-pro-theme="blue"] #app{ box-shadow:0 30px 70px -40px rgba(10,60,120,.5); }
:root[data-mode="teachers"][data-pro-theme="blue"] .msg-user .msg-text a{ color:#fff; }

/* ----- sign in with an email address ----- */
.email-signin{ display:flex; flex-direction:column; gap:8px; width:100%; }
.email-signin[hidden]{ display:none; }
.email-step{ display:flex; flex-direction:column; gap:8px; }
.email-step[hidden]{ display:none; }
.email-input{
  width:100%; box-sizing:border-box; min-height:48px; padding:0 14px; border-radius:var(--radius-md, 14px);
  border:1px solid var(--navy-600); background:var(--field-bg, rgba(255,255,255,.06)); color:var(--foam);
  font:inherit; font-size:15px;
}
.email-input:focus{ outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
.email-code{ letter-spacing:.35em; text-align:center; font-size:18px; font-weight:600; }
.email-row{ display:flex; gap:8px; }
.email-row .btn{ flex:1; }
.email-sent{ margin:0; }
.email-send, .email-verify{
  background:linear-gradient(135deg, var(--teal-400), var(--teal-600)); color:var(--on-accent); border:0; font-weight:700;
}
.email-send:hover:not(:disabled), .email-verify:hover:not(:disabled){ filter:brightness(1.07); }
.email-send:disabled, .email-verify:disabled{ opacity:.6; cursor:default; }


/* =====================================================================
   v-next: header row, mode list with descriptions, sleek messages,
   smart fold for long messages, small thinking dots
   ===================================================================== */

/* ---- header: ☰ | brand | [new chat] [theme switch] — one row, nothing overlaps, New chat can never be hidden ---- */
.chat-header-brand-row{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:6px; }
.chat-header-brand-row .header-corner{ position:static; inset:auto; transform:none; margin:0; flex:none; }
.chat-header-brand-row .header-menu{ justify-self:start; }
.header-actions{ justify-self:end; display:flex; align-items:center; gap:8px; min-width:0; }
.header-actions .header-newchat{ display:grid; opacity:1; visibility:visible; }
.header-actions .theme-toggle{ position:relative; inset:auto; flex:none; margin:0; }
.header-actions .theme-toggle[hidden]{ display:none; }
@media (max-width:360px){
  .header-actions{ gap:5px; }
  .header-actions .theme-toggle{ width:50px; } .header-actions .theme-toggle.theme-toggle-3{ width:76px; }
}

/* the subheading is now just the mode name, Options and this chat's name */
.chat-subheading .mode-titles strong{ letter-spacing:.01em; }

/* ---- mode list: every mode shows what it does, right in the option ---- */
.source-mode-list{ min-width:min(300px, calc(100vw - 28px)); gap:3px; padding:6px; }
.source-mode-opt{ text-align:start; display:flex; flex-direction:column; gap:2px; padding:9px 12px; }
.source-mode-opt strong{ font-size:14px; font-weight:650; }
.source-mode-opt small{ font-size:11.5px; line-height:1.35; font-weight:400; color:var(--slate-500); white-space:normal; }
.source-mode-opt.on small{ color:var(--teal-300); opacity:.85; }

/* ---- sleek messages ---- */
.chat-log{ gap:14px; }
.msg-user{
  max-width:84%; padding:9px 14px; font-size:14.5px; line-height:1.5; border-radius:18px; border-bottom-right-radius:5px;
  box-shadow:0 6px 16px -10px rgba(var(--accent-rgb),.65);
}
html[dir="rtl"] .msg-user{ border-bottom-right-radius:18px; border-bottom-left-radius:5px; }
.msg-assistant .msg-text{ font-size:15px; line-height:1.65; letter-spacing:.003em; }
.msg-assistant .msg-text p{ margin:0 0 9px; }
.msg-assistant .msg-text h1, .msg-assistant .msg-text h2, .msg-assistant .msg-text h3{ margin:16px 0 6px; font-weight:650; }
.msg-assistant .msg-text pre{ border-radius:12px; font-size:13px; }
.msg-assistant .msg-text table{ border-collapse:separate; border-spacing:0; width:100%; font-size:13.5px; border:1px solid var(--navy-600); border-radius:10px; overflow:hidden; display:block; overflow-x:auto; }
.msg-assistant .msg-text th, .msg-assistant .msg-text td{ padding:6px 10px; border-bottom:1px solid var(--navy-700); text-align:start; }
.msg-assistant .msg-text th{ background:var(--navy-700); font-weight:650; }
.msg-assistant .msg-text img, .msg-assistant .diagram-figure{ border-radius:12px; }
.diagram-figure{ margin:10px 0; padding:8px; background:#fff; border-radius:12px; box-shadow:0 8px 22px -14px rgba(0,0,0,.45); }
.diagram-figure svg{ display:block; max-width:100%; height:auto; margin:0 auto; }
.msg-actions{ margin-top:6px; gap:12px; opacity:.5; font-size:12.5px; transition:opacity .2s ease; }
.msg-assistant:hover .msg-actions, .msg-actions:focus-within{ opacity:.9; }
.msg-meta{ margin-top:6px; font-size:10.5px; opacity:.8; }

/* ---- smart fold: a long message shows its first screenful with a fade and a Show more pill ---- */
.msg.is-folded .msg-text{
  max-height:var(--fold-h, 420px); overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 64px), transparent); mask-image:linear-gradient(#000 calc(100% - 64px), transparent);
}
.fold-toggle{
  appearance:none; font:inherit; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  margin:6px 0 0; padding:4px 12px; border-radius:999px; border:1px solid var(--navy-600); background:var(--navy-800); color:var(--teal-300);
}
.fold-toggle:hover{ border-color:var(--teal-400); }
.fold-toggle .ico{ width:13px; height:13px; transition:transform .2s ease; }
.msg:not(.is-folded) .fold-toggle .ico{ transform:rotate(180deg); }
.msg-user .fold-toggle{ display:none; }

/* ---- thinking: three small dots ---- */
.msg-typing{ padding:2px 0; gap:6px; }
.typing-label{ font-size:12.5px; }
.think-dots{ display:inline-flex; align-items:center; gap:3px; margin-inline-start:2px; }
.think-dots i{ width:4px; height:4px; border-radius:50%; background:var(--teal-400); opacity:.35; animation:think-pulse 1.2s infinite ease-in-out; }
.think-dots i:nth-child(2){ animation-delay:.16s; } .think-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes think-pulse{ 0%,70%,100%{ opacity:.3; transform:scale(.8); } 35%{ opacity:1; transform:scale(1.2); } }
@media (prefers-reduced-motion:reduce){ .think-dots i{ animation:none; opacity:.7; } }

/* the Bloom's tags are gone */
.bloom-tag{ display:none !important; }

.music-card-note{ margin-top:8px; font-size:12.5px; }
.music-card-note a{ color:var(--teal-300); text-decoration:underline; text-underline-offset:2px; }

/* Teachers: the light / drop / dark switch is a bit more compact */
.theme-toggle.theme-toggle-3,
.header-actions .theme-toggle.theme-toggle-3{ width:72px; height:26px; padding:2px; }
.theme-toggle-3 .theme-toggle-thumb{ top:2px; bottom:2px; inset-inline-start:2px; width:calc((100% - 4px) / 3); }
.theme-toggle-3 .theme-opt .ico{ width:14px; height:14px; }
@media (max-width:360px){ .header-actions .theme-toggle.theme-toggle-3{ width:66px; } }

/* time beside the thinking message */
.typing-time{ margin-inline-start:6px; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--slate-500); opacity:.9; }
/* hidden means hidden, whatever display value another rule gave the button */
#btn-new-chat-top[hidden], #btn-new-chat[hidden]{ display:none !important; }

/* ---- thinking message: shows only if the answer is not instant, dots followed by a rotating ring ---- */
.msg-typing{ animation:think-appear .12s ease-out .15s both; }
@keyframes think-appear{ from{ opacity:0; } to{ opacity:1; } }
.think-spin{ flex:none; width:12px; height:12px; margin-inline-start:5px; border-radius:50%; box-sizing:border-box;
  border:2px solid rgba(217,168,38,.25); border-top-color:#2fa862; border-right-color:#d9a826; animation:think-rotate .8s linear infinite; }
@keyframes think-rotate{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .think-spin{ animation-duration:2.4s; } }

/* ---- time the answer took, at the bottom of the reply ---- */
.msg-took{ display:block; margin-top:8px; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--slate-500); opacity:.9; }
.msg-took{ display:flex; flex-wrap:wrap; align-items:center; column-gap:5px; }
.msg-took-work{ white-space:nowrap; }
.msg-took .ico{ width:12px; height:12px; flex-shrink:0; }
.msg-ago{ white-space:nowrap; }
.msg-took-sep{ opacity:.55; margin:0 -1px; }

/* ---- empty chat: hand-drawn arrow + caption pointing down at the message box ("@" answer style, "#" tone) ---- */
.at-hint{
  position:absolute; left:0; right:0; bottom:4px; z-index:1; pointer-events:none; direction:ltr;
  display:flex; flex-direction:column; align-items:flex-start; padding:0 12px 0 var(--at-left,28px); gap:0;
  color:var(--slate-500); animation:at-hint-in .5s .35s ease both;
}
.at-hint[hidden]{ display:none; }
.at-hint-text{ margin:0; display:flex; flex-direction:column; gap:2px; font-size:clamp(13px,3.6vw,16px); line-height:1.35; text-align:left; max-width:100%; }
.at-hint-text span{ unicode-bidi:plaintext; }
/* hand-drawn arrow: starts under the caption and curves down-right to land on the message box */
.at-hint-arrow{ margin-top:2px; margin-inline-start:0; flex:none; }
.at-hint.at-hint-rtl{ align-items:flex-end; padding:0 var(--at-right,12px) 0 12px; }
.at-hint.at-hint-rtl .at-hint-text{ text-align:right; }
.at-hint.at-hint-rtl .at-hint-arrow{ transform:scaleX(-1); }
@keyframes at-hint-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:.95; transform:none; } }
@media (prefers-reduced-motion: reduce){ .at-hint{ animation:none; } }

/* ---- polish: reply symbols ---- */
.msg-action-icon{ transition:background .15s ease, transform .1s ease, color .15s ease; }
.msg-action-icon:active:not(:disabled){ transform:scale(.88); }
.msg-action-icon:focus-visible{ outline:2px solid var(--teal-300); outline-offset:1px; }
.msg-action-icon .think-spin{ width:14px; height:14px; margin:0; }
.msg-actions{ align-items:center; }
@media (hover:none){
  .msg-actions, .msg-actions-out{ opacity:.85 !important; }       /* touch screens have no hover, so keep the symbols clearly visible */
  .msg-action-icon{ width:34px; height:34px; }
  .msg-actions.msg-actions-out{ margin-top:-12px; }
}
.msg-actions:has(.msg-action-download[disabled]) .msg-action-download{ opacity:.9; }
.download-item:active{ transform:scale(.98); }
@media (max-width:420px){ .download-menu{ min-width:min(220px, calc(100vw - 24px)); } }
@media (prefers-reduced-motion: reduce){ .download-menu{ animation:none; } .msg-action-icon{ transition:none; } }

/* Teachers: library of every subject, chapter and chapter detail */
.mode-lib{ border:1px solid var(--navy-700); border-radius:12px; padding:8px 10px; }
.mode-lib > summary{ cursor:pointer; font-size:13px; font-weight:600; }
.mode-lib-sub, .mode-lib-ch{ margin:6px 0 0 6px; }
.mode-lib-sub > summary, .mode-lib-ch > summary{ cursor:pointer; font-size:12.5px; }
.mode-lib-info{ display:flex; flex-direction:column; gap:4px; padding:4px 0 2px 10px; font-size:12px; }
.mode-lib .mode-chap-ctl{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0; }
.mode-lib .mode-lib-sub > .btn-tiny{ margin:6px 0; }

/* API key box: invalid key, saved note, dot on the ↓ while own keys are in use */
.source-key-row input[aria-invalid="true"]{ outline:2px solid #e5484d; outline-offset:1px; }
.source-saved{ color:var(--teal-300); font-weight:600; }
.source-saved[hidden]{ display:none; }
.brand-caret.is-apikey::after{ content:""; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--teal-400); }

/* speed: older messages skip layout and paint until they are near the screen (the newest three always render normally) */
#chat-log > .msg:not(:nth-last-child(-n+3)){ content-visibility:auto; contain-intrinsic-size:auto 90px; }