/* Loaded via a non-blocking <link> in index.html instead of @import here -
   an @import is render-blocking, and Google Fonts' domain is unreachable
   behind China's firewall (and can be slow on some other networks). The
   font-family rules below already fall back to solid system fonts
   (sans-serif / Georgia, serif) so the app renders instantly either way. */
.font-futuristic { font-family: 'Orbitron', sans-serif; }
.font-logo { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Inter', sans-serif; }
.glass-panel { background: rgba(15, 23, 42, 0.88); backdrop-filter: blur(16px); border: 1px solid rgba(99, 102, 241, 0.25); box-shadow: 0 0 30px rgba(99, 102, 241, 0.12); }
.slide-container { display: flex; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); width: 300%; }
.slide-panel { width: 33.3334%; flex-shrink: 0; }

/* Carousel viewport that clips the 300%-wide #slider down to one panel.
   Tailwind's "overflow-hidden" (overflow:hidden) still lets the browser
   scroll this element with scrollLeft/scrollIntoView - e.g. when an
   .focus() call on an input inside an off-screen panel (Studio's topic
   box, a login code field, etc.) makes the browser auto-scroll its
   nearest scrollable ancestor into view. That silently offsets this
   wrapper's scrollLeft, which then stacks on top of #slider's transform
   forever (switchTab() only ever sets the transform, never resets
   scrollLeft), so every tab after that renders shifted off to the side -
   the "blank tab" bug. overflow:clip removes scrollLeft entirely, so
   nothing can ever desync from the transform again. The overflow:hidden
   line stays first as a fallback for any browser that doesn't understand
   "clip" (it will just ignore that line and keep hidden's normal
   behavior). */
.carousel-viewport {
  overflow: hidden;
  overflow: clip;
  /* Pin the carousel to left-to-right. In an RTL page (Urdu, Arabic...) an
     inherited direction:rtl made the 300%-wide #slider overflow to the LEFT,
     parking the last panel in view and leaving the visible tab blank. */
  direction: ltr;
}
/* The text INSIDE each panel still follows the app language. */
html[dir="rtl"] .slide-panel { direction: rtl; }
@keyframes blinkGlow { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(99,102,241,0.8)); } 50% { opacity: 0.4; filter: drop-shadow(0 0 2px rgba(99,102,241,0.2)); } }
.blink-icon { animation: blinkGlow 1.6s infinite ease-in-out; }

/* ---------- Mobile safe-area (notch / status bar / home indicator) -----
   apple-mobile-web-app-status-bar-style is "black-translucent", which
   deliberately draws page content *under* the iOS status bar - without
   this, that's what was cropping/hiding content at the top (and the home
   indicator at the bottom) on real phones, even though it looked fine in
   a normal desktop-width browser. */
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* Quick-action chip row above chat input: horizontally scrollable, but
   without a visible scrollbar cluttering the compact chat panel. */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* ---------- Futuristic voice avatar orb ---------- */
.ai-orb{--c1:#22d3ee;--c2:#8b5cf6;position:relative;width:min(56vw,200px);aspect-ratio:1;display:grid;place-items:center}
.ai-orb::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,var(--c1) 0%,transparent 62%);opacity:.22;filter:blur(18px);animation:orbGlow 3.2s ease-in-out infinite}
.ai-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--c1);border-bottom-color:var(--c2);animation:orbSpin 7s linear infinite;opacity:.85}
.ai-ring.r2{inset:9%;animation-duration:11s;animation-direction:reverse;border-top-color:var(--c2);border-bottom-color:var(--c1);opacity:.6}
.ai-ring.r3{inset:18%;animation-duration:16s;border-style:dashed;border-color:rgba(148,163,184,.35)}
.ai-core{position:relative;width:58%;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#1e1b4b,#020617);box-shadow:0 0 28px rgba(34,211,238,.45),inset 0 0 22px rgba(139,92,246,.5);color:#67e8f9;font-size:2.2rem}
.ai-core img{width:100%;height:100%;object-fit:cover}
.ai-wave{position:absolute;bottom:14%;display:flex;gap:4px;height:22px;align-items:flex-end;opacity:0;transition:opacity .25s}
.ai-wave i{width:4px;height:6px;border-radius:2px;background:linear-gradient(var(--c1),var(--c2))}
.ai-orb[data-state="listening"] .ai-ring{animation-duration:3.5s}
.ai-orb[data-state="listening"]{--c1:#f43f5e;--c2:#f59e0b}
.ai-orb[data-state="speaking"] .ai-core{animation:orbBeat .9s ease-in-out infinite}
.ai-orb[data-state="speaking"] .ai-wave{opacity:1}
.ai-orb[data-state="speaking"] .ai-wave i{animation:orbBar .8s ease-in-out infinite}
.ai-orb[data-state="speaking"] .ai-wave i:nth-child(2){animation-delay:.12s}
.ai-orb[data-state="speaking"] .ai-wave i:nth-child(3){animation-delay:.24s}
.ai-orb[data-state="speaking"] .ai-wave i:nth-child(4){animation-delay:.36s}
.ai-orb[data-state="speaking"] .ai-wave i:nth-child(5){animation-delay:.48s}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbGlow{0%,100%{opacity:.16;transform:scale(.96)}50%{opacity:.34;transform:scale(1.05)}}
@keyframes orbBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes orbBar{0%,100%{height:5px}50%{height:22px}}
@media (prefers-reduced-motion:reduce){.ai-ring,.ai-orb::before,.ai-core,.ai-wave i{animation:none!important}}

/* ---------- Futuristic backdrop + neon accents ---------- */
body{background-color:#020617;background-image:radial-gradient(60rem 40rem at 85% -10%,rgba(139,92,246,.18),transparent 60%),radial-gradient(50rem 36rem at -10% 110%,rgba(34,211,238,.13),transparent 60%),linear-gradient(rgba(99,102,241,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.05) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px;background-attachment:fixed}
.glass-panel{border-color:rgba(34,211,238,.22);box-shadow:0 0 34px rgba(99,102,241,.14),inset 0 1px 0 rgba(255,255,255,.04)}
nav .text-indigo-400{filter:drop-shadow(0 0 6px rgba(129,140,248,.8))}


/* v12 unified capability rail / Research Lab */
.tool-rail { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-inline: 1px; }
.tool-card {
  flex: 0 0 auto; min-width: 148px; max-width: 210px; min-height: 58px;
  display:flex; align-items:center; gap:.55rem; padding:.7rem .8rem;
  border-radius:1rem; border:1px solid rgba(99,102,241,.22);
  background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(30,41,59,.72));
  color:#cbd5e1; font-size:.68rem; font-weight:600; text-align:left;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.tool-card i,.lab-card i { color:#67e8f9; width:1rem; text-align:center; }
.tool-card:hover,.lab-card:hover { transform:translateY(-1px); border-color:rgba(34,211,238,.55); box-shadow:0 8px 30px rgba(34,211,238,.08); }
.lab-card {
  min-height:88px; padding:.8rem; border-radius:1rem; border:1px solid rgba(99,102,241,.2);
  background:rgba(15,23,42,.78); color:#cbd5e1; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:.5rem; text-align:left; font-size:.7rem; font-weight:600;
  cursor:pointer; transition:all .2s ease;
}
.lab-card i { font-size:1rem; }
#researchLabModal { overscroll-behavior:contain; }
@media (max-width:640px) {
  .tool-card { min-width: 142px; }
  .lab-card { min-height:82px; }
}
/* v13 thesis/research dashboard */
.metric-card{min-height:76px;padding:.8rem;border-radius:1rem;border:1px solid rgba(34,211,238,.16);background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(30,41,59,.62));display:flex;flex-direction:column;justify-content:space-between}
.metric-card span{font-size:.62rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em}.metric-card strong{font-size:1.45rem;color:#67e8f9;font-family:Orbitron,sans-serif}
.dash-tab{white-space:nowrap;padding:.55rem .8rem;border-radius:.75rem;background:#0f172a;border:1px solid #1e293b;color:#94a3b8;font-size:.68rem;font-weight:700;cursor:pointer}.dash-tab.active{background:rgba(79,70,229,.75);border-color:rgba(129,140,248,.55);color:white}
.dash-card{padding:1rem;border-radius:1rem;border:1px solid rgba(99,102,241,.18);background:rgba(15,23,42,.72)}.dash-card h4{font-size:.78rem;font-weight:700;color:#c4b5fd;margin-bottom:.35rem}.dash-card p{font-size:.68rem;line-height:1.55;color:#94a3b8;min-height:2.1rem}.dash-card button{margin-top:.7rem;padding:.5rem .7rem;border-radius:.7rem;background:#1e293b;color:#cbd5e1;font-size:.65rem;font-weight:700;cursor:pointer}.dash-card button:hover{background:#312e81;color:white}
.data-preview{width:100%;border-collapse:collapse;font-size:.65rem}.data-preview th{background:#111827;color:#67e8f9;text-align:left;padding:.55rem;border-bottom:1px solid #334155;position:sticky;top:0}.data-preview td{padding:.5rem;border-bottom:1px solid #1e293b;color:#cbd5e1;white-space:nowrap}.dash-history{border:1px solid #1e293b;border-radius:.85rem;background:rgba(15,23,42,.6);overflow:hidden}.dash-history>div{display:flex;justify-content:space-between;gap:.5rem;padding:.7rem;border-bottom:1px solid #1e293b}.dash-history strong{font-size:.7rem;color:#c4b5fd}.dash-history span{font-size:.58rem;color:#64748b}.dash-history pre{max-height:180px;overflow:auto;padding:.7rem;font-size:.58rem;color:#94a3b8;white-space:pre-wrap}
@media(max-width:640px){.metric-card{min-height:68px}.metric-card strong{font-size:1.2rem}}

/* v16 Baab identity + Scope cockpit */
:root{--baab-gold:#d6a95a;--baab-gold-soft:#f2d18a;--baab-cyan:#59e1ff;--baab-violet:#8b7cff;--baab-black:#030508}
body{background-color:var(--baab-black);background-image:radial-gradient(55rem 34rem at 82% -8%,rgba(214,169,90,.13),transparent 58%),radial-gradient(48rem 36rem at 8% 105%,rgba(89,225,255,.11),transparent 60%),linear-gradient(rgba(89,225,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(214,169,90,.028) 1px,transparent 1px);background-size:auto,auto,52px 52px,52px 52px}
.baab-brand-mark{box-shadow:0 0 24px rgba(214,169,90,.18),inset 0 0 0 1px rgba(242,209,138,.2)}
.scope-welcome-card,.scope-command-shell{border:1px solid rgba(214,169,90,.22);box-shadow:0 12px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)}
.scope-welcome-card:after,.scope-command-shell:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0 45%,rgba(89,225,255,.08) 50%,transparent 55%);animation:scopeSweep 7s linear infinite}
.scope-status-card{border:1px solid rgba(89,225,255,.14);background:linear-gradient(135deg,rgba(8,15,25,.92),rgba(16,24,39,.62));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.scope-status-card.is-working{border-color:rgba(89,225,255,.35);box-shadow:0 0 35px rgba(89,225,255,.08),inset 0 1px 0 rgba(255,255,255,.05)}
.scope-pulse{width:8px;height:8px;border-radius:999px;background:var(--baab-cyan);box-shadow:0 0 14px rgba(89,225,255,.9);animation:scopePulse 1.8s ease-in-out infinite}
.scope-orbit{width:34px;height:34px;border-radius:50%;position:relative;border:1px solid rgba(89,225,255,.35);display:grid;place-items:center;flex-shrink:0}.scope-orbit:before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,var(--baab-gold-soft),var(--baab-gold));box-shadow:0 0 16px rgba(214,169,90,.7)}.scope-orbit span{position:absolute;inset:-5px;border:1px dashed rgba(89,225,255,.4);border-radius:50%;animation:orbSpin 5s linear infinite}.scope-orbit.large{width:54px;height:54px}.scope-file-card,.scope-result,.scope-question,.scope-thinking{border:1px solid rgba(89,225,255,.14);background:rgba(8,15,25,.72);border-radius:1rem;padding:1rem;color:#cbd5e1}.scope-file-card strong{font-size:.78rem;color:#f2d18a}.scope-file-card p,.scope-result p,.scope-question p,.scope-thinking p{font-size:.65rem;color:#64748b;margin-top:.35rem}.scope-thinking{display:flex;align-items:center;gap:1rem}.scope-question{display:flex;align-items:center;gap:.8rem}.scope-result{line-height:1.6}.scope-empty-state{opacity:.95}
@keyframes scopePulse{0%,100%{transform:scale(.85);opacity:.65}50%{transform:scale(1.15);opacity:1}}@keyframes scopeSweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
@media(max-width:640px){.scope-command-shell{min-height:190px}.scope-welcome-card p{font-size:.68rem}.scope-orbit.large{width:46px;height:46px}}

.studio-wrap{display:flex;flex-direction:column;gap:.9rem}.studio-slide{aspect-ratio:16/9;min-height:150px;border-radius:.9rem;padding:1rem 1.2rem;background:linear-gradient(160deg,#0b1220,#111c33);border:1px solid rgba(89,225,255,.25);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.5rem}.studio-slide:before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:#22d3ee}.studio-cover{justify-content:center}.studio-cover:before{width:6px;height:100%;right:auto}.studio-num{position:absolute;right:.8rem;bottom:.5rem;font-size:.6rem;color:#64748b}.studio-edit{outline:none;border-radius:.4rem;padding:.15rem .3rem;color:#e2e8f0}.studio-edit:focus{background:rgba(34,211,238,.08);box-shadow:0 0 0 1px rgba(34,211,238,.4)}.studio-big{font-size:1.35rem;font-weight:700;color:#fff}.studio-sub{font-size:.85rem;color:#94a3b8}.studio-h{font-size:1.05rem;font-weight:700;color:#fff}.studio-bul{font-size:.82rem;line-height:1.6;white-space:pre-wrap}.studio-bul:before{content:"";}.studio-page{background:#f8fafc;color:#0f172a;border-radius:.9rem;padding:1.2rem 1.4rem}.studio-page .studio-edit{color:#0f172a}.studio-page .studio-big{color:#0f172a;margin-bottom:.6rem}.studio-page .studio-h{color:#1e293b;margin-top:.8rem}.studio-p{font-size:.85rem;line-height:1.7;margin:.35rem 0}.studio-changed{animation:studioFlash 2.4s ease-out}@keyframes studioFlash{0%{box-shadow:0 0 0 2px #f59e0b,0 0 18px rgba(245,158,11,.6)}100%{box-shadow:0 0 0 0 transparent}}

.studio-codebox{width:100%;background:#020617;color:#a5f3fc;border:1px solid rgba(34,211,238,.25);border-radius:12px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;white-space:pre;overflow:auto;resize:vertical;direction:ltr;text-align:left}
/* ---------- v21: orb as a "gauge" - segmented tick ring + gradient arc (see reference dashboards) ---------- */
.ai-orb::after{content:"";position:absolute;inset:2%;border-radius:50%;
  background:conic-gradient(from 0deg,var(--c1),transparent 22%,var(--c2) 50%,transparent 74%,var(--c1));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:orbSpin 9s linear infinite;opacity:.95;pointer-events:none}
.ai-ring.r3{border:none!important;inset:14%!important;
  background:repeating-conic-gradient(rgba(148,163,184,.55) 0 1deg,transparent 1deg 7.5deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));animation-duration:40s!important}
.ai-core{box-shadow:0 0 34px color-mix(in srgb,var(--c1) 55%,transparent),inset 0 0 26px color-mix(in srgb,var(--c2) 55%,transparent),0 0 0 2px rgba(255,255,255,.10)!important}
.ai-orb[data-state="listening"]::after{animation-duration:3s}
.ai-orb[data-state="speaking"]::after{animation-duration:2.2s}
@media (prefers-reduced-motion:reduce){.ai-orb::after{animation:none!important}}