:root{
  --bg:#05070e; --panel:rgba(13,20,36,0.72); --ink:#e8eef7; --dim:#8aa0bd;
  --line:rgba(255,255,255,.10); --accent:#36e0c0; --accent2:#6f8cff;
  --user:#1c2740; --radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 12%, #0c1428 0%, #05070e 62%);
  color:var(--ink);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;}

/* status toast (voice model loading, errors) */
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%) translateY(-8px);z-index:40;
  max-width:88vw;padding:10px 16px;border-radius:999px;font-size:13px;font-weight:500;
  background:rgba(18,28,48,.92);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 16px 40px -16px #000;backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.hidden{display:none;}
#toast .spin{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;
  border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;
  animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* topbar */
#topbar{position:fixed;top:0;left:0;right:0;height:58px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;padding:0 18px;}
.bar-left{display:flex;align-items:center;gap:12px;}
.bar-right{display:flex;align-items:center;gap:10px;}

/* voice-mode controls: hidden by default, shown when body.voice-mode */
#voiceCaption,#pttBtn,#exitVoiceBtn{display:none;}
body.voice-mode #chat-pane{display:none;}
body.voice-mode #app{flex-direction:column;}
body.voice-mode #orb-pane{flex:1;justify-content:center;gap:18px;}
body.voice-mode #orb{width:min(54vh,420px);}
body.voice-mode #state{font-size:13px;}
body.voice-mode #voiceCaption{display:block;max-width:600px;width:88%;text-align:center;
  font-size:18px;line-height:1.5;color:#cdd9ec;min-height:54px;padding:0 18px;}
body.voice-mode #pttBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:16px;font-weight:600;cursor:pointer;color:#042;
  background:var(--accent);border:none;border-radius:999px;padding:16px 30px;
  box-shadow:0 12px 34px -10px rgba(54,224,192,.6);transition:.15s;}
body.voice-mode #pttBtn:hover{transform:translateY(-1px);}
body.voice-mode #pttBtn.listening{background:#ff8a5c;color:#2a0f06;
  box-shadow:0 0 0 0 rgba(255,138,92,.6);animation:pulse 1.4s infinite;}
body.voice-mode #pttBtn.busy{opacity:.55;pointer-events:none;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,138,92,.5);}70%{box-shadow:0 0 0 18px rgba(255,138,92,0);}100%{box-shadow:0 0 0 0 rgba(255,138,92,0);}}
body.voice-mode #exitVoiceBtn{display:inline-flex;align-items:center;position:fixed;
  top:calc(12px + env(safe-area-inset-top));left:14px;z-index:25;
  font:inherit;font-size:13px;cursor:pointer;color:var(--dim);
  background:rgba(13,20,36,.7);border:1px solid var(--line);border-radius:999px;padding:9px 15px;
  backdrop-filter:blur(8px);}
body.voice-mode #exitVoiceBtn:hover{color:var(--ink);}
body.voice-mode #topbar{display:none;}   /* exit replaces the bar in voice mode */

/* conversation history drawer */
.drawer{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;z-index:31;
  background:#0a1120;border-right:1px solid var(--line);padding:16px;
  transform:translateX(0);transition:transform .25s ease;display:flex;flex-direction:column;gap:12px;
  box-shadow:20px 0 60px -30px #000;}
.drawer.hidden{transform:translateX(-101%);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;}
.solid.sm{padding:7px 12px;font-size:13px;}
#convoList{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.convo{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:10px;cursor:pointer;
  border:1px solid transparent;transition:.12s;}
.convo:hover{background:rgba(255,255,255,.05);}
.convo.active{background:rgba(54,224,192,.12);border-color:rgba(54,224,192,.35);}
.convo .t{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.convo .meta{font-size:11px;color:var(--dim);}
.convo .act{opacity:0;background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;
  padding:2px 4px;border-radius:6px;transition:.12s;}
.convo:hover .act{opacity:1;}
.convo .act:hover{color:var(--ink);background:rgba(255,255,255,.08);}
#histOverlay{position:fixed;inset:0;z-index:30;background:rgba(3,5,12,.5);}
#histOverlay.hidden{display:none;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;}
.brand .glyph{width:24px;height:24px;border-radius:7px;
  background:conic-gradient(from 200deg,var(--accent),var(--accent2),#ff8a5c,var(--accent));
  box-shadow:0 0 16px rgba(54,224,192,.5);}
.pill{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dim);background:rgba(255,255,255,.06);border:1px solid var(--line);
  padding:3px 8px;border-radius:999px;}
.pill.live{color:#042;background:var(--accent);border-color:transparent;}

/* starter prompt chips */
#chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 8px;}
#chips.gone{display:none;}
.chip{font:inherit;font-size:13px;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;
  padding:8px 13px;transition:.15s;}
.chip:hover{background:rgba(54,224,192,.12);border-color:rgba(54,224,192,.4);}
.ghost-btn{font:inherit;font-size:18px;cursor:pointer;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--ink);border-radius:10px;width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s;}
.ghost-btn:hover{background:rgba(255,255,255,.1);}

/* app layout — two panes on laptop, stacked on phone */
#app{position:fixed;inset:58px 0 0 0;display:flex;}
#orb-pane{flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;}
#orb{width:min(46vh,440px);height:auto;display:block;}
#state{font-size:12.5px;color:var(--dim);letter-spacing:.05em;height:16px;}

#chat-pane{flex:1 1 50%;display:flex;flex-direction:column;min-width:0;
  border-left:1px solid var(--line);background:rgba(7,11,20,.35);backdrop-filter:blur(6px);}
#thread{flex:1;overflow-y:auto;padding:24px 22px;display:flex;flex-direction:column;gap:14px;}
#thread::-webkit-scrollbar{width:8px;}
#thread::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;}

.msg{max-width:78%;padding:11px 15px;border-radius:14px;font-size:15px;line-height:1.5;
  animation:rise .25s ease;}
.msg.user{align-self:flex-end;background:var(--user);border-bottom-right-radius:5px;}
.msg.agent{align-self:flex-start;background:var(--panel);border:1px solid var(--line);
  border-bottom-left-radius:5px;}
.msg.agent.thinking{color:var(--dim);}
.dots span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;
  background:var(--dim);animation:blink 1.2s infinite;}
.dots span:nth-child(2){animation-delay:.2s;}
.dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.25;}30%{opacity:1;}}
@keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* composer */
#composer{display:flex;gap:10px;padding:16px;border-top:1px solid var(--line);}
.input-wrap{flex:1;position:relative;display:flex;}
#input{flex:1;font:inherit;font-size:15px;padding:13px 40px 13px 16px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);outline:none;width:100%;}
#input:focus{border-color:rgba(54,224,192,.5);}
#clearBtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:none;border-radius:50%;cursor:pointer;display:none;
  align-items:center;justify-content:center;font-size:13px;line-height:1;
  background:rgba(255,255,255,.1);color:var(--dim);transition:.12s;}
#clearBtn:hover{background:rgba(255,255,255,.18);color:var(--ink);}
#clearBtn.show{display:flex;}
.solid{font:inherit;font-size:15px;font-weight:600;cursor:pointer;border:none;border-radius:12px;
  padding:13px 20px;background:var(--accent);color:#042;transition:.15s;}
.solid:hover{transform:translateY(-1px);}
.solid:disabled{opacity:.45;cursor:default;transform:none;}

/* settings drawer */
#settings{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(3,5,12,.6);backdrop-filter:blur(4px);}
#settings.hidden{display:none;}
.settings-card{width:min(92vw,360px);background:#0c1424;border:1px solid var(--line);
  border-radius:18px;padding:24px;box-shadow:0 30px 70px -30px #000;}
.settings-card h3{margin:0 0 16px;}
.settings-card label{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:14px;color:var(--dim);margin-bottom:14px;}
.settings-card select{font:inherit;background:rgba(255,255,255,.05);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;min-width:150px;}
.note{font-size:12.5px;color:var(--dim);margin:4px 0 18px;}

/* settings card scrolls if taller than the screen (it has several sections) */
.settings-card{max-height:86vh;overflow-y:auto;}

/* phone: stack orb on top, chat fills below; respect iOS safe areas */
@media (max-width:760px){
  #app{flex-direction:column;}
  #orb-pane{flex:0 0 auto;padding:8px 0 0;}
  #orb{width:min(34vh,200px);}
  #state{font-size:11px;}
  #chat-pane{flex:1;border-left:none;border-top:1px solid var(--line);min-height:0;}
  #thread{padding:18px 16px;}
  .msg{max-width:88%;font-size:14.5px;}
  #composer{padding:12px 12px calc(12px + env(safe-area-inset-bottom));gap:8px;}
  .solid{padding:13px 16px;}
  #chips{padding:0 16px 8px;}
}
/* tiny screens: shrink orb further so the chat keeps room */
@media (max-width:760px) and (max-height:680px){
  #orb{width:min(26vh,150px);}
  #orb-pane{padding:4px 0 0;}
}