:root{
  --bg:#06070b; --ink:#f3f1e8; --dim:rgba(243,241,232,.5); --faint:rgba(243,241,232,.14); --panel:rgba(12,14,24,.82);
  --blue:#2340ff; --blue-deep:#0a14a8; --lime:#dcff4d; --red:#ff7b7b;
  --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(16px,3vw,32px);
  --font-body:"Readex Pro","Noto Kufi Arabic",system-ui,sans-serif; --font-display:"Alexandria","Noto Kufi Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{min-height:100svh;font-family:var(--font-body);font-weight:300;background:var(--bg);-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}
h1,.logo b,.btn,.eyebrow,.callState,.drawerHead b{font-family:var(--font-display)}
::selection{background:var(--lime);color:#06070b}
.mono{font-family:"Space Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);direction:ltr}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}

/* ---- scene ---- */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.world{position:fixed;left:50%;top:88svh;width:0;height:0;z-index:0;transition:top 1.4s var(--ease)}
.planet{position:absolute;left:0;top:0;width:220vmax;height:220vmax;border-radius:50%;transform:translate(-62%,0);
  background:radial-gradient(circle at 50% 6%, #6b82ff 0%, var(--blue) 16%, var(--blue-deep) 44%, #040524 68%, #02021a 100%);
  box-shadow:0 0 0 1px rgba(220,255,77,.5),0 -6px 60px rgba(220,255,77,.3),0 -30px 220px rgba(35,64,255,.5),0 -120px 480px rgba(35,64,255,.25)}
body.talking .world{top:96svh}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;opacity:.06;mix-blend-mode:screen;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---- top ---- */
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);
  background:linear-gradient(180deg,rgba(6,7,11,.9),rgba(6,7,11,0));backdrop-filter:blur(6px)}
.logo{display:inline-flex;align-items:baseline;gap:8px;color:var(--ink);text-decoration:none}
.logo svg{width:16px;height:16px;align-self:flex-start}
.logo b{font-weight:800;font-size:22px;line-height:1.3}
.logo span{font-size:12px;color:var(--dim)}
.status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(220,255,77,.7)}
.status.busy .dot{background:#7f92ff;animation:pulse 1.1s ease-in-out infinite}
.status.err .dot{background:var(--red);box-shadow:none}
@keyframes pulse{50%{opacity:.35}}

/* ---- main ---- */
.app{position:relative;z-index:2;flex:1;width:min(860px,100%);margin:0 auto;padding:0 var(--pad)}
.hero{padding:clamp(28px,7svh,80px) 0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:13px;color:var(--dim);margin-bottom:18px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(220,255,77,.8)}
.eyebrow b{color:var(--ink);font-weight:700}
h1{font-weight:800;font-size:clamp(38px,7vw,72px);line-height:1.15;letter-spacing:-.01em}
.sub{margin-top:14px;max-width:52ch;font-size:clamp(15px,1.3vw,18px);line-height:1.9;color:var(--dim)}
.starters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.starters button{padding:9px 14px;border:1px solid var(--faint);border-radius:999px;font-size:13.5px;color:var(--ink);background:rgba(243,241,232,.04);transition:border-color .3s,background .3s}
.starters button:hover{border-color:var(--lime);background:rgba(220,255,77,.08)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .4s var(--ease),background .3s}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--lime);color:#06070b}
.btn.primary:hover{background:#e9ff86;transform:translateY(-1px)}
.btn.voice{background:rgba(35,64,255,.25);border:1px solid rgba(107,130,255,.5);color:var(--ink)}
.btn.voice:hover{background:rgba(35,64,255,.4)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.voiceNote{margin-top:10px;font-size:12.5px;color:var(--dim)}

/* ---- thread ---- */
.chat{padding:16px 0 24px}
.thread{list-style:none;display:flex;flex-direction:column;gap:14px}
.msg{max-width:min(92%,68ch);padding:12px 16px;border-radius:18px;line-height:1.85;font-size:15.5px;white-space:pre-wrap;word-wrap:break-word;position:relative;animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.msg.user{align-self:flex-start;background:rgba(220,255,77,.12);border:1px solid rgba(220,255,77,.25);border-bottom-right-radius:6px}
.msg.bot{align-self:flex-end;background:var(--panel);border:1px solid var(--faint);border-bottom-left-radius:6px;backdrop-filter:blur(10px)}
.msg.bot.voiceTurn,.msg.user.voiceTurn{border-style:dashed}
.msg.bot .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding-top:8px;border-top:1px solid var(--faint);font-size:12px;color:var(--dim)}
.msg.bot .meta button{color:var(--lime);font-size:12px;text-decoration:underline dotted}
.msg.bot .meta .conf{padding:2px 8px;border-radius:999px;border:1px solid var(--faint)}
.msg.bot .meta .conf.low{color:#ffd28a;border-color:rgba(255,210,138,.4)}
.msg.bot ol,.msg.bot ul{padding-inline-start:1.3em;margin:.3em 0}
.msg.bot p{margin:0 0 .5em}
.msg.bot p:last-child{margin:0}
.msg.err{align-self:flex-end;color:var(--red);border-color:rgba(255,123,123,.4)}
.typing{display:inline-flex;gap:4px;align-items:center;height:1.2em}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:pulse 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.cursor::after{content:"▍";color:var(--lime);animation:pulse .8s steps(2) infinite}

/* ---- composer ---- */
.composer{position:sticky;bottom:0;z-index:5;width:min(860px,100%);margin:0 auto;padding:8px var(--pad) max(12px,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(6,7,11,.98) 60%,rgba(6,7,11,0))}
.composer .row{display:flex;align-items:flex-end;gap:6px;background:rgba(12,14,24,.9);border:1px solid var(--faint);border-radius:22px;padding:6px 6px 6px 10px;backdrop-filter:blur(14px);transition:border-color .3s}
.composer .row:focus-within{border-color:var(--lime)}
textarea{flex:1;min-width:0;max-height:160px;resize:none;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:16px;line-height:1.6;padding:8px 6px;caret-color:var(--lime)}
textarea::placeholder{color:rgba(243,241,232,.35)}
.ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:rgba(243,241,232,.06);transition:background .3s,transform .4s var(--ease)}
.ico svg{width:18px;height:18px}
.ico:hover{background:rgba(243,241,232,.12)}
.ico.send{background:var(--lime);color:#06070b}
.ico.send:hover svg{transform:translate(-2px,-2px)}
.ico:disabled{opacity:.4}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:8px 6px 0;font-size:12px;color:var(--dim)}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.switch input{accent-color:var(--lime)}
.link{color:var(--dim);text-decoration:underline dotted;font-size:12px}
.link:hover{color:var(--ink)}
.tools .mono{margin-inline-start:auto}

/* ---- call ---- */
.call{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(6,7,11,.86);backdrop-filter:blur(16px)}
.callInner{width:min(560px,92vw);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.orb{position:relative;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#6b82ff,var(--blue) 45%,var(--blue-deep) 100%);box-shadow:0 0 0 1px rgba(220,255,77,.5),0 0 80px rgba(35,64,255,.6);transition:transform .5s var(--ease)}
.orb span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(220,255,77,.45);opacity:0}
.call.listening .orb span{animation:ring 2s ease-out infinite}
.call.listening .orb span:nth-child(2){animation-delay:.6s}.call.listening .orb span:nth-child(3){animation-delay:1.2s}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.call.speaking .orb{animation:breathe .9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08)}}
.call.thinking .orb{box-shadow:0 0 0 1px rgba(220,255,77,.5),0 0 40px rgba(220,255,77,.35);animation:pulse 1.2s ease-in-out infinite}
.call.error .orb{background:radial-gradient(circle at 40% 35%,#ff9b9b,#7a1b1b);box-shadow:none}
.callState{font-weight:700;font-size:20px}
.callHint{font-size:13px;color:var(--dim);max-width:40ch}
.captions{min-height:3.6em;max-height:9em;overflow:auto;font-size:15px;line-height:1.8;color:var(--ink);padding:0 8px}
.captions .u{color:var(--lime)}
.captions .a{color:var(--ink)}
.callBar{display:flex;gap:16px;margin-top:6px}
.round{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(243,241,232,.08);border:1px solid var(--faint);color:var(--ink);transition:background .3s}
.round svg{width:22px;height:22px}
.round:hover{background:rgba(243,241,232,.16)}
.round.end{background:#c62828;border-color:#c62828}
.round.muted{background:var(--lime);color:#06070b}
.callFoot{font-size:11.5px;color:var(--dim)}

/* ---- drawer ---- */
.drawer{position:fixed;inset-inline-end:0;top:0;bottom:0;z-index:30;width:min(440px,100vw);background:#0b0d17;border-inline-start:1px solid var(--faint);overflow:auto;padding:18px var(--pad);box-shadow:-30px 0 80px rgba(0,0,0,.5);animation:slide .4s var(--ease)}
@keyframes slide{from{transform:translateX(100%)}}
.drawerHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawerIntro{font-size:12.5px;color:var(--dim);line-height:1.8;margin-bottom:10px}
.src{padding:14px 0;border-top:1px solid var(--faint);font-size:14px;line-height:1.85}
.src header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.src .kind{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--faint);color:var(--dim)}
.src.salah .kind{color:#06070b;background:var(--lime);border-color:var(--lime)}
.src.summary .kind{color:#9fb0ff;border-color:rgba(159,176,255,.4)}
.src.example .kind,.src.style .kind{color:#ffd28a;border-color:rgba(255,210,138,.4)}
.src .k{font-family:"Space Mono",monospace;font-size:11px;color:var(--dim);direction:ltr}
.src .where{font-size:12.5px;color:var(--dim);margin-bottom:6px}
.src .where b{color:var(--ink);font-weight:500}
.src blockquote{margin:0;padding:10px 12px;border-radius:10px;background:rgba(243,241,232,.04);border-inline-start:3px solid var(--faint);color:var(--ink);font-size:14px}
.src.salah blockquote{border-inline-start-color:var(--lime);font-family:var(--font-body);font-style:normal}
.src.salah blockquote::before{content:"« ";color:var(--lime)}
.src.salah blockquote::after{content:" »";color:var(--lime)}
.src .qa{padding:6px 12px;border-radius:10px;background:rgba(243,241,232,.04);margin-bottom:6px;color:var(--ink)}
.src .qa span{color:var(--dim);font-size:12.5px;margin-inline-end:6px}
.src .note{margin-top:6px;font-size:11.5px;color:var(--dim)}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;background:#1a1d2b;border:1px solid var(--faint);color:var(--ink);padding:10px 16px;border-radius:12px;font-size:13.5px;max-width:92vw}

@media (max-width:640px){
  .logo span{display:none}
  h1{font-size:clamp(34px,10vw,48px)}
  .msg{max-width:96%;font-size:15px}
  .tools .mono{display:none}
  .btn{padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }