:root{
  color-scheme:dark;
  --night:#05070d;
  --panel:rgba(13,19,31,.78);
  --panel-edge:rgba(147,177,214,.12);
  --text:#edf4ff;
  --muted:#8792a8;
  --cyan:#38e1ff;
  --violet:#8b7bff;
  --amber:#ffb547;
  --red:#ff6378;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  background:var(--night);
  color:var(--text);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--night)}
body{margin:0;min-width:320px;min-height:100svh;overflow-x:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 35%,#101827 0,#080c15 44%,var(--night) 78%);}
button,input,textarea{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
[hidden]{display:none!important}
.starfield{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.2;background-image:radial-gradient(1px 1px at 17% 18%,#d7e9ff 65%,transparent),radial-gradient(1px 1px at 82% 23%,#84dfff 60%,transparent),radial-gradient(1px 1px at 65% 73%,#d7e9ff 55%,transparent),linear-gradient(rgba(56,225,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,225,255,.045) 1px,transparent 1px);background-size:100% 100%,100% 100%,100% 100%,42px 42px,42px 42px;mask-image:linear-gradient(to bottom,black,transparent 95%);animation:grid-drift 36s linear infinite}
.app-shell,.token-gate{position:relative;z-index:1}
.app-shell{width:min(100%,1280px);min-height:100svh;margin-inline:auto;padding:18px clamp(16px,3vw,40px) calc(138px + var(--safe-bottom));}
.glass-panel{border:1px solid var(--panel-edge);background:var(--panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 70px rgba(0,0,0,.22)}
.topbar{height:66px;border-radius:20px;padding:0 20px;display:flex;align-items:center;gap:18px;position:relative;z-index:4}
.brand-lockup{display:flex;align-items:center;gap:12px;margin-inline-end:auto}
.brand-lockup h1{font-size:1.12rem;font-weight:650;letter-spacing:.01em;margin:0}
.brand-sigil{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(56,225,255,.42);border-radius:50%;font-size:24px;line-height:1;color:var(--cyan);text-shadow:0 0 16px rgba(56,225,255,.7);box-shadow:inset 0 0 12px rgba(56,225,255,.09),0 0 20px rgba(56,225,255,.08)}
.connection{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.82rem;white-space:nowrap}
.connection-dot,.stream-live-dot{width:8px;height:8px;border-radius:50%;background:#687287;box-shadow:0 0 0 4px rgba(104,114,135,.1)}
.connection[data-state="connected"] .connection-dot{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.connection[data-state="working"] .connection-dot{background:var(--violet);box-shadow:0 0 13px var(--violet);animation:dot-pulse 1.2s ease-in-out infinite}
.connection[data-state="offline"] .connection-dot{background:var(--red);box-shadow:0 0 12px rgba(255,99,120,.55)}
.icon-button{width:48px;height:48px;border:1px solid rgba(142,164,198,.17);border-radius:15px;background:rgba(255,255,255,.035);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.icon-button:hover{border-color:rgba(56,225,255,.46);background:rgba(56,225,255,.07)}
.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#c8d6ed}
.call-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,6vw,86px);align-items:start;padding:22px 2px 0}
.orb-column{position:sticky;top:18px;min-height:min(690px,calc(100svh - 110px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;--orb-color:var(--cyan)}
.orb-stage{width:min(100%,540px);height:min(55vw,540px);min-height:340px;max-height:calc(100svh - 235px);position:relative;display:grid;place-items:center;isolation:isolate;--orb-color:var(--cyan)}
.orb-stage[data-state="thinking"]{--orb-color:var(--violet)}
.orb-stage[data-state="speaking"]{--orb-color:var(--amber)}
.orb-stage[data-state="error"]{--orb-color:var(--red)}
.orb-aura{position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb,var(--orb-color) 18%,transparent),transparent 65%);filter:blur(26px);opacity:.82;animation:aura-breathe 5s ease-in-out infinite}
.orb-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.orb-core{position:relative;width:36%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;z-index:1;background:radial-gradient(circle at 37% 34%,rgba(222,249,255,.22),rgba(56,225,255,.08) 36%,rgba(6,12,24,.1) 72%);border:1px solid color-mix(in srgb,var(--orb-color) 28%,transparent);box-shadow:inset -18px -22px 40px rgba(0,0,0,.55),inset 8px 8px 30px rgba(202,239,255,.07),0 0 70px color-mix(in srgb,var(--orb-color) 25%,transparent),0 0 150px color-mix(in srgb,var(--orb-color) 10%,transparent);animation:core-breathe 5.8s ease-in-out infinite}
.orb-core:before,.orb-core:after{content:"";position:absolute;inset:-13%;border:1px solid color-mix(in srgb,var(--orb-color) 37%,transparent);border-radius:50%;transform:rotateX(68deg) rotateZ(-24deg)}
.orb-core:after{inset:-21%;transform:rotateX(72deg) rotateZ(33deg);opacity:.55}
.orb-core span{width:20%;aspect-ratio:1;border-radius:50%;background:var(--orb-color);filter:blur(1px);box-shadow:0 0 18px var(--orb-color),0 0 50px color-mix(in srgb,var(--orb-color) 80%,transparent)}
.orb-stage[data-state="thinking"] .orb-core{animation:core-breathe 1.7s ease-in-out infinite}
.orb-stage[data-state="speaking"] .orb-core{animation:core-breathe .8s ease-in-out infinite}
.orb-stage[data-state="error"] .orb-core{animation:error-flicker .38s steps(2,end) infinite}
.orb-label{min-height:1.7em;margin:-28px 0 4px;font-size:1.18rem;font-weight:550;letter-spacing:.01em;color:#eaf5ff;text-shadow:0 0 20px color-mix(in srgb,var(--orb-color) 36%,transparent)}
.orb-timer{font-variant-numeric:tabular-nums;color:var(--muted);margin:2px 0;font-size:.84rem;letter-spacing:.14em}
.progress-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:490px;min-height:34px;margin:14px 0 0}
.progress-chip{font-size:.75rem;color:#d6d1ff;background:rgba(139,123,255,.1);border:1px solid rgba(139,123,255,.22);padding:7px 11px;border-radius:999px;animation:chip-in .24s ease both}
.orb-error{max-width:min(440px,92%);margin:12px 0 0;color:#ffb5c0;font-size:.88rem;line-height:1.65}
.conversation-column{min-width:0;min-height:calc(100svh - 130px);padding:12px 0 190px;display:flex;flex-direction:column}
.stream-heading{display:flex;align-items:center;gap:10px;padding:8px 7px 16px;border-bottom:1px solid rgba(165,184,216,.11);color:#c9d4e8;font-size:.83rem}
.stream-heading p{margin:0;flex:1}
.stream-live-dot{width:6px;height:6px;background:var(--violet);box-shadow:0 0 9px var(--violet)}
.quiet-button{border:0;background:transparent;color:#95a0b4;padding:10px 12px;border-radius:10px;cursor:pointer;min-height:48px}
.quiet-button:hover{color:var(--text);background:rgba(255,255,255,.055)}
.conversation-stream{display:flex;flex-direction:column;align-items:stretch;gap:13px;padding:18px 2px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(133,154,187,.26) transparent}
.message-card{position:relative;max-width:min(92%,640px);padding:15px 17px 16px;border:1px solid rgba(162,181,215,.13);border-radius:17px;background:linear-gradient(145deg,rgba(18,27,43,.9),rgba(10,15,25,.82));box-shadow:0 9px 30px rgba(0,0,0,.12);animation:message-arrive .32s cubic-bezier(.2,.8,.2,1) both}
.message-user{align-self:flex-start;border-inline-start:2px solid var(--cyan);background:linear-gradient(145deg,rgba(14,35,47,.82),rgba(10,17,27,.88))}
.message-assistant{align-self:flex-end;border-inline-end:2px solid var(--violet);background:linear-gradient(145deg,rgba(25,22,48,.83),rgba(13,15,28,.9))}
.message-claude{align-self:flex-end;border-inline-end:2px solid #b9adff;background:linear-gradient(145deg,rgba(39,31,73,.88),rgba(20,17,39,.94))}
.message-error{align-self:stretch;max-width:100%;border-color:rgba(255,99,120,.33);border-inline-start:2px solid var(--red);background:rgba(52,15,27,.47);color:#ffc1ca}
.message-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:#c9d7ee;font-size:.78rem}
.message-user .message-header strong{color:var(--cyan)}
.message-assistant .message-header strong{color:#b9adff}
.message-claude .message-header strong{color:#d3cbff}
.message-error .message-header strong{color:#ff98a8}
.message-header time{margin-inline-start:auto;color:#76839a;font-size:.7rem;font-variant-numeric:tabular-nums}
.message-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85;color:#e9effa;font-size:.95rem}
.message-error .message-text{color:#ffd5db}
.empty-state{margin:auto;min-height:190px;display:grid;place-items:center;align-content:center;gap:12px;color:#79869b;text-align:center}
.empty-state p{margin:0;font-size:.9rem}
.empty-orbit{font-size:34px;color:rgba(56,225,255,.58);text-shadow:0 0 25px rgba(56,225,255,.38)}
.composer-dock{position:fixed;z-index:8;left:50%;bottom:0;transform:translateX(-50%);width:min(680px,calc(100% - 28px));padding:0 0 calc(12px + var(--safe-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.composer-dock>*{pointer-events:auto}
.transcript-bar{width:100%;padding:12px;border-radius:19px;display:grid;grid-template-columns:1fr auto;gap:10px;box-shadow:0 15px 56px rgba(0,0,0,.48)}
.transcript-bar textarea{width:100%;min-height:58px;max-height:150px;resize:vertical;border:1px solid rgba(159,180,216,.13);border-radius:12px;padding:12px 14px;color:var(--text);background:rgba(2,6,13,.55);line-height:1.65}
.transcript-bar textarea::placeholder{color:#77839a}
.transcript-actions{display:flex;flex-direction:column;justify-content:center;gap:5px}
.send-button,.primary-button{min-height:48px;border:1px solid rgba(56,225,255,.55);border-radius:12px;padding:0 19px;background:linear-gradient(135deg,rgba(56,225,255,.2),rgba(56,225,255,.07));color:#c8f7ff;font-weight:650;cursor:pointer;box-shadow:0 0 23px rgba(56,225,255,.12);transition:background .18s,box-shadow .18s}
.send-button:hover,.primary-button:hover{background:rgba(56,225,255,.2);box-shadow:0 0 30px rgba(56,225,255,.22)}
.mic-controls{height:98px;display:flex;align-items:center;justify-content:center;gap:24px;position:relative}
.mic-button{position:relative;width:84px;height:84px;flex:0 0 84px;border:1px solid rgba(56,225,255,.56);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 30%,rgba(63,227,255,.25),rgba(7,22,35,.94) 72%);box-shadow:inset 0 0 20px rgba(56,225,255,.08),0 0 28px rgba(56,225,255,.22);cursor:pointer;touch-action:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.mic-button:hover{transform:translateY(-2px);box-shadow:inset 0 0 23px rgba(56,225,255,.12),0 0 36px rgba(56,225,255,.32)}
.mic-button:disabled{opacity:.56;cursor:wait}
.mic-button.is-recording{background:radial-gradient(circle,rgba(56,225,255,.42),rgba(9,25,39,.96) 72%);box-shadow:0 0 0 8px rgba(56,225,255,.07),0 0 42px rgba(56,225,255,.44)}
.mic-button svg{width:31px;height:31px;fill:none;stroke:#d9fbff;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;z-index:2}
.mic-halo{position:absolute;inset:-8px;border:1px solid rgba(56,225,255,.2);border-radius:50%;animation:mic-halo 2.8s ease-out infinite}
.mic-button.is-recording .mic-halo{animation-duration:.9s}
.keyboard-button{position:absolute;inset-inline-end:calc(50% + 70px);color:#afbcd0}
.mic-hint{position:absolute;top:calc(100% - 5px);color:#7e8ba2;font-size:.72rem;white-space:nowrap}
.drawer-scrim{position:fixed;inset:0;z-index:19;background:rgba(1,4,9,.68);backdrop-filter:blur(3px)}
.settings-drawer{position:fixed;z-index:20;inset-block:0;inset-inline-start:0;width:min(420px,90vw);padding:24px 22px calc(24px + var(--safe-bottom));overflow-y:auto;border-radius:0 24px 24px 0;border-inline-start:0;transform:translateX(-104%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:22px 0 70px rgba(0,0,0,.42)}
[dir="rtl"] .settings-drawer{border-radius:24px 0 0 24px;transform:translateX(104%);box-shadow:-22px 0 70px rgba(0,0,0,.42)}
.settings-drawer.is-open,[dir="rtl"] .settings-drawer.is-open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid rgba(165,184,216,.12)}
.drawer-header h2{font-size:1.2rem;margin:3px 0 0}
.drawer-kicker{margin:0;color:var(--cyan);font-size:.8rem}
.drawer-section{padding:22px 0 4px}
.drawer-section h3{font-size:.88rem;color:#c4d1e7;font-weight:600;margin:0 0 12px}
.drawer-list{display:grid;gap:9px}
.drawer-card,.drawer-request{border:1px solid rgba(147,177,214,.13);border-radius:14px;background:rgba(255,255,255,.035);padding:12px}
.drawer-card h4{font-size:.83rem;margin:0 0 8px;color:#d9d4ff}
.drawer-card p{font-size:.85rem;line-height:1.65;color:#c5cede;margin:0 0 10px}
.decision-choices{display:flex;flex-wrap:wrap;gap:7px}
.decision-choice{min-height:48px;border:1px solid rgba(139,123,255,.28);border-radius:10px;background:rgba(139,123,255,.1);padding:7px 11px;cursor:pointer;font-size:.8rem}
.decision-choice:hover{background:rgba(139,123,255,.2)}
.drawer-request{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:.75rem;color:#aab6cb}
.drawer-request span:first-child{direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-empty{margin:0;padding:12px;color:#76839a;font-size:.82rem}
.drawer-actions{display:grid;margin-top:20px;border-top:1px solid rgba(165,184,216,.12)}
.drawer-action{min-height:54px;border:0;border-bottom:1px solid rgba(165,184,216,.09);background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:start;color:#d7e1f2;padding:0 5px;cursor:pointer}
.drawer-action:hover{color:var(--cyan)}
.token-gate{min-height:100svh;display:grid;place-items:center;padding:24px}
.gate-panel{width:min(100%,420px);padding:34px;border:1px solid rgba(56,225,255,.18);border-radius:24px;background:rgba(9,15,26,.82);backdrop-filter:blur(18px);box-shadow:0 20px 90px rgba(0,0,0,.45),0 0 50px rgba(56,225,255,.06)}
.gate-mark{margin:0;color:var(--cyan);font-size:38px;text-shadow:0 0 28px rgba(56,225,255,.55)}
.gate-panel h1{font-size:1.7rem;margin:8px 0 4px}
.gate-copy{color:var(--muted);line-height:1.7;margin:0 0 25px}
.gate-panel form{display:grid;gap:11px}
.gate-panel label{font-size:.86rem;color:#cbd6e8}
.gate-panel input{height:50px;border:1px solid rgba(145,168,205,.21);border-radius:12px;padding:0 14px;background:rgba(2,6,13,.62);color:var(--text);direction:ltr}
.gate-panel .primary-button{margin-top:5px}
.error-message{color:#ffabb8;font-size:.84rem;margin:2px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes grid-drift{to{background-position:0 0,0 0,0 0,0 42px,42px 0}}
@keyframes aura-breathe{0%,100%{transform:scale(.95);opacity:.56}50%{transform:scale(1.1);opacity:.95}}
@keyframes core-breathe{0%,100%{transform:scale(.97);filter:brightness(.9)}50%{transform:scale(1.035);filter:brightness(1.18)}}
@keyframes error-flicker{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.68;filter:brightness(1.5)}}
@keyframes mic-halo{0%{transform:scale(.9);opacity:.48}100%{transform:scale(1.35);opacity:0}}
@keyframes message-arrive{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes chip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes dot-pulse{50%{opacity:.45}}

@media(max-width:899px){
  .app-shell{padding:12px 14px calc(132px + var(--safe-bottom))}
  .topbar{height:60px;border-radius:17px;padding:0 13px}
  .call-layout{grid-template-columns:1fr;gap:2px;padding-top:2px}
  .orb-column{position:relative;top:auto;min-height:38svh;max-height:440px;justify-content:flex-start;padding-top:1px}
  .orb-stage{width:min(100%,390px);height:38svh;min-height:230px;max-height:340px}
  .orb-label{margin:-27px 0 0;font-size:1.05rem}
  .progress-chips{margin-top:9px;min-height:30px}
  .conversation-column{min-height:30svh;padding:5px 0 100px}
  .conversation-stream{max-height:calc(100svh - 435px);min-height:120px;padding:13px 2px}
  .composer-dock{width:calc(100% - 22px);padding-bottom:calc(10px + var(--safe-bottom))}
  .mic-controls{height:92px}
  .mic-button{width:78px;height:78px;flex-basis:78px}
  .keyboard-button{inset-inline-end:calc(50% + 65px)}
  .settings-drawer{width:min(420px,92vw)}
}
@media(min-width:900px){
  .call-layout{min-height:calc(100svh - 100px)}
  .orb-column{top:78px;height:calc(100svh - 120px);min-height:560px}
  .orb-stage{height:min(44vw,560px);min-height:410px}
  .conversation-column{height:calc(100svh - 104px);min-height:620px;padding-top:22px}
  .conversation-stream{flex:1;min-height:0;padding-bottom:170px}
  .composer-dock{bottom:10px}
}
@media(max-width:899px) and (orientation:landscape) and (max-height:560px){
  .app-shell{padding-bottom:100px}
  .call-layout{grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);gap:18px}
  .orb-column{min-height:calc(100svh - 100px);max-height:none;justify-content:center;padding-top:0}
  .orb-stage{width:min(74vw,340px);height:65svh;min-height:190px;max-height:300px}
  .orb-label{margin:-15px 0 0;font-size:.96rem}
  .progress-chips{margin-top:4px}
  .conversation-column{min-height:calc(100svh - 92px);padding-top:9px}
  .conversation-stream{max-height:calc(100svh - 185px);min-height:140px}
  .composer-dock{width:min(520px,calc(100% - 24px));}
  .mic-controls{height:72px}
  .mic-button{width:62px;height:62px;flex-basis:62px}
  .mic-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .starfield{animation:none;background-position:0 0}
}

/* ===== Polish layer: cinematic depth, glass, motion ===== */
@property --orb-color{syntax:"<color>";inherits:true;initial-value:#38e1ff}
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.02);
  font-family:"Segoe UI","Noto Sans Arabic","Noto Kufi Arabic",Tahoma,system-ui,-apple-system,sans-serif;
}
body{background:
  radial-gradient(ellipse 70% 55% at 50% 30%,rgba(56,225,255,.07),transparent 70%),
  radial-gradient(ellipse 50% 40% at 85% 90%,rgba(139,123,255,.06),transparent 70%),
  radial-gradient(ellipse at 50% 35%,#0e1626 0,#080c15 46%,var(--night) 80%);background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45))}
.glass-panel{background:linear-gradient(180deg,rgba(20,29,46,.78),rgba(10,15,26,.82));box-shadow:var(--glass-hi),0 24px 70px rgba(0,0,0,.3)}
.brand-lockup h1{font-size:1.2rem;font-weight:700;letter-spacing:0}
.connection{padding:6px 12px;border:1px solid rgba(147,177,214,.1);border-radius:999px;background:rgba(255,255,255,.025);font-size:.8rem}
.connection-dot{transition:background .4s,box-shadow .4s}
.icon-button{transition:border-color .25s var(--ease-soft),background .25s var(--ease-soft),transform .25s var(--ease-out)}
.icon-button:hover{transform:translateY(-1px)}
.icon-button:active{transform:scale(.94)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;box-shadow:0 0 0 6px rgba(56,225,255,.14)}

/* orb stage: animate colour between states, add ground reflection */
.orb-stage{transition:--orb-color .9s var(--ease-soft)}
.orb-stage:after{content:"";position:absolute;left:22%;right:22%;bottom:4%;height:9%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--orb-color) 26%,transparent),transparent 70%);filter:blur(10px);opacity:.7;z-index:0;pointer-events:none}
.orb-aura{inset:6%;filter:blur(40px);transition:opacity .6s}
.orb-core{transition:box-shadow .9s var(--ease-soft),border-color .9s var(--ease-soft);background:radial-gradient(circle at 36% 30%,rgba(235,252,255,.3),color-mix(in srgb,var(--orb-color) 14%,transparent) 38%,rgba(5,10,20,.2) 74%)}
.orb-core span{transition:background .9s var(--ease-soft),box-shadow .9s var(--ease-soft)}
.orb-stage[data-state="thinking"] .orb-core:before{animation:ring-spin 6s linear infinite}
.orb-stage[data-state="thinking"] .orb-core:after{animation:ring-spin 9s linear infinite reverse}
.orb-label{font-size:1.3rem;font-weight:600;line-height:1.5;transition:text-shadow .9s,opacity .3s}
.orb-timer{color:var(--cyan);opacity:.85;font-size:.9rem;font-weight:500}
.progress-chip{font-weight:500;line-height:1.4;backdrop-filter:blur(8px);box-shadow:0 0 16px rgba(139,123,255,.12);animation:chip-in .4s var(--ease-out) both}
.orb-error{font-weight:500}

/* conversation */
.stream-heading{font-size:.85rem;font-weight:600;letter-spacing:0;color:#d3dcee}
.stream-live-dot{animation:dot-pulse 2.4s ease-in-out infinite}
.conversation-stream{gap:14px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 28px),transparent)}
.message-card{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 34px rgba(0,0,0,.2);animation:message-arrive .5s var(--ease-out) both}
.message-user{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 34px rgba(0,0,0,.2),-14px 0 36px -22px rgba(56,225,255,.45)}
.message-assistant{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 34px rgba(0,0,0,.2),14px 0 36px -22px rgba(139,123,255,.5)}
.message-header{font-weight:600}
.message-text{font-size:1rem;line-height:1.95}
.empty-state p{font-size:.95rem;color:#8a97ad}
.empty-orbit{animation:aura-breathe 5s ease-in-out infinite}

/* composer + mic */
.transcript-bar{box-shadow:var(--glass-hi),0 18px 60px rgba(0,0,0,.55);animation:message-arrive .4s var(--ease-out) both}
.transcript-bar textarea{font-size:1rem;transition:border-color .2s,box-shadow .2s}
.transcript-bar textarea:focus{border-color:rgba(56,225,255,.5)}
.send-button,.primary-button{transition:background .2s,box-shadow .2s,transform .2s var(--ease-out)}
.send-button:hover,.primary-button:hover{transform:translateY(-1px)}
.send-button:active,.primary-button:active{transform:scale(.97)}
.mic-button{background:radial-gradient(circle at 36% 28%,rgba(120,240,255,.38),rgba(8,26,40,.95) 70%);transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s,background .3s}
.mic-button:active{transform:scale(.95)}
.mic-button:before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.mic-button.is-recording{border-color:rgba(56,225,255,.95);animation:rec-throb 1.4s ease-in-out infinite}
.mic-halo+.mic-halo{display:none}
.mic-hint{font-size:.76rem;color:#8e9bb2;letter-spacing:.02em}
.keyboard-button{background:rgba(255,255,255,.04)}

/* drawer */
.drawer-scrim{transition:opacity .3s}
.settings-drawer{transition:transform .45s var(--ease-out)}
.drawer-card,.drawer-request{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.decision-choice{transition:background .2s,transform .2s var(--ease-out)}
.decision-choice:hover{transform:translateY(-1px)}
.drawer-action{transition:color .2s,padding .25s var(--ease-out)}
.drawer-action:hover{padding-inline-start:10px}
.gate-panel{box-shadow:var(--glass-hi),0 20px 90px rgba(0,0,0,.5),0 0 80px rgba(56,225,255,.08)}
.gate-panel input{transition:border-color .2s,box-shadow .2s}

@keyframes ring-spin{to{transform:rotateX(68deg) rotateZ(336deg)}}
@keyframes rec-throb{0%,100%{box-shadow:0 0 0 6px rgba(56,225,255,.06),0 0 36px rgba(56,225,255,.4)}50%{box-shadow:0 0 0 12px rgba(56,225,255,.1),0 0 54px rgba(56,225,255,.6)}}

/* tablet + large screens */
@media(min-width:600px) and (max-width:899px){
  .orb-stage{width:min(100%,460px);height:min(46svh,420px);max-height:420px}
  .orb-label{font-size:1.25rem}
  .conversation-stream{max-height:calc(100svh - 520px)}
}
@media(min-width:1400px){
  .orb-label{font-size:1.4rem}
  .message-text{font-size:1.04rem}
}
@media(max-width:380px){
  .orb-label{font-size:1.1rem}
  .connection{padding:5px 9px;font-size:.74rem}
  .topbar{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .orb-stage[data-state] .orb-core,.orb-core:before,.orb-core:after,.mic-button.is-recording,.stream-live-dot,.empty-orbit{animation:none!important}
}

/* Step H call loop states and controls. */
.connection[data-state="ready"] .connection-dot{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.connection[data-state="connected"]{color:#b8f4cd}
.connection[data-state="connected"] .connection-dot{background:#42dc83;box-shadow:0 0 13px rgba(66,220,131,.8);animation:none}
.connection[data-state="offline"]{color:#ffb5c0}
.connection-timer{padding-inline-start:7px;border-inline-start:1px solid rgba(255,255,255,.18);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.orb-label{display:grid;justify-items:center;gap:2px;min-height:3.1em;margin-top:-20px}
.orb-label small{font-size:.67em;font-weight:450;letter-spacing:.025em;color:#9dabc1;text-shadow:none;line-height:1.35}
.thinking-progress{height:2px;margin:0 12px;overflow:hidden;opacity:0;background:rgba(139,123,255,.13);transition:opacity .2s}
.thinking-progress:after{content:"";display:block;width:34%;height:100%;background:linear-gradient(90deg,transparent,var(--violet),transparent);transform:translateX(-110%)}
.thinking-progress.is-active{opacity:1}
.thinking-progress.is-active:after{animation:thinking-sweep 1.35s ease-in-out infinite}
.level-meter{height:18px;display:flex;align-items:center;gap:4px;margin-top:4px;opacity:0;transition:opacity .2s}
.level-meter.is-active{opacity:.9}
.level-meter i{width:3px;height:calc(3px + var(--bar-level,0)*13px);border-radius:4px;background:var(--cyan);box-shadow:0 0 8px rgba(56,225,255,.4);transition:height .08s linear}
.mic-button{transition:background .25s,border-color .25s,box-shadow .25s,transform .25s var(--ease-out)}
.mic-button:not(.is-active){border-color:rgba(66,220,131,.68);background:radial-gradient(circle at 36% 28%,rgba(110,255,164,.31),rgba(8,32,24,.96) 72%);box-shadow:inset 0 0 20px rgba(66,220,131,.1),0 0 30px rgba(66,220,131,.22)}
.mic-button:not(.is-active) svg{stroke:#dcffeb}
.mic-button.is-active{border-color:rgba(255,99,120,.82);background:radial-gradient(circle at 36% 28%,rgba(255,117,139,.34),rgba(43,12,24,.96) 72%);box-shadow:inset 0 0 20px rgba(255,99,120,.11),0 0 32px rgba(255,99,120,.25)}
.mic-button.is-active svg{stroke:#ffe4e9}
.mic-button.is-active .mic-halo{border-color:rgba(255,99,120,.34)}
.mic-hint{top:auto;bottom:-3px;transform:none;font-size:.79rem;color:#c6d2e6}
.mic-controls{height:114px;padding-bottom:8px}
.keyboard-button:disabled{opacity:.35;cursor:not-allowed}
.review-ring{--review-progress:100%;position:relative;display:inline-grid;place-items:center;width:26px;height:26px;margin-inline-start:8px;border-radius:50%;background:conic-gradient(var(--cyan) var(--review-progress),rgba(56,225,255,.14) 0)}
.review-ring:before{content:"";position:absolute;inset:3px;border-radius:50%;background:#101827}
.review-ring span{position:relative;font-size:.73rem;font-variant-numeric:tabular-nums}
.transcript-bar textarea:read-only{cursor:default;border-color:rgba(56,225,255,.25)}
.drawer-footer{margin-top:24px;padding-top:13px;border-top:1px solid rgba(165,184,216,.1);color:#78869d;font-size:.72rem;text-align:end;letter-spacing:.08em}
@keyframes thinking-sweep{to{transform:translateX(410%)}}

@media(max-width:899px){.mic-controls{height:112px;padding-bottom:8px}}
@media(max-width:380px){.orb-label{font-size:1rem}.connection{gap:5px;padding:5px 8px;font-size:.68rem}.topbar{gap:7px;padding-inline:10px}.brand-lockup{gap:6px}.brand-sigil{width:28px;height:28px;font-size:20px}.brand-lockup h1{font-size:.78rem;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.thinking-progress.is-active:after{animation:none;transform:translateX(100%)}}

.memory-call-controls{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;padding:0 12px}.memory-call-controls button{min-width:88px;min-height:48px;padding:10px 18px;border:1px solid rgba(130,160,190,.28);border-radius:999px;background:rgba(13,20,34,.9);color:#e6edf8;font:inherit;cursor:pointer}.memory-call-controls button:disabled{opacity:.42;cursor:default}.memory-call-controls #endButton{background:#8f2338;border-color:#ed526d;color:white}.memory-call-controls #muteButton[aria-pressed="true"]{border-color:#efb846;color:#ffe3a0}.waiting-banner{position:fixed;z-index:12;inset:auto 12px calc(12px + var(--safe-bottom));padding:16px 20px;border:1px solid rgba(145,122,255,.55);border-radius:16px;background:rgba(18,14,39,.96);color:#eee9ff;text-align:center;cursor:pointer}

/* Write-approval pop-up (Approve once / Deny) */
.approval-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(2,4,10,.72);backdrop-filter:blur(6px)}
.approval-modal[hidden]{display:none}
.approval-card{width:min(520px,100%);padding:22px;border:1px solid rgba(255,181,71,.45);border-radius:20px;box-shadow:0 0 40px rgba(255,181,71,.18)}
.approval-kicker{margin:0 0 6px;color:#ffb547;font-size:.85rem;letter-spacing:.02em}
.approval-card h2{margin:0 0 10px;font-size:1.25rem}
.approval-hint{margin:0 0 8px;opacity:.8;font-size:.95rem}
.approval-summary{display:block;max-height:30vh;overflow:auto;padding:12px;border-radius:12px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;text-align:left}
.approval-meta{margin:10px 0 0;font-size:.82rem;opacity:.7}
.approval-actions{display:flex;gap:12px;margin-top:18px}
.approval-actions button{flex:1;min-height:52px;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;border:1px solid transparent}
.approval-allow{background:linear-gradient(180deg,#2fbf71,#1e9a57);color:#fff;box-shadow:0 0 18px rgba(47,191,113,.35)}
.approval-deny{background:rgba(255,255,255,.06);color:#ffd2d2;border-color:rgba(255,99,99,.45)}
.approval-more{margin:12px 0 0;font-size:.82rem;opacity:.75}

/* Decision card during a call (buttons close the card on the server) and the end-of-call ledger */
.decision-panel,.ledger-panel{width:min(520px,100%);margin:12px auto 0;padding:14px 16px;border:1px solid rgba(139,123,255,.35);border-radius:16px}
.decision-panel[hidden],.ledger-panel[hidden]{display:none}
.decision-kicker{margin:0 0 4px;font-size:.78rem;opacity:.75}
.decision-question{margin:0 0 10px;font-size:.98rem;line-height:1.5}
.decision-status{min-height:1.2em;margin:8px 0;font-size:.85rem}
.ledger-panel h3{margin:0 0 8px;font-size:.95rem}
.ledger-panel ul{margin:0 0 10px;padding-inline-start:18px;line-height:1.6;font-size:.88rem}