:root{
  --bg:#08090c; --bg-2:#0d0f14; --panel:#0f1219; --panel-2:#141823;
  --line:#1c2130; --line-2:#262d40;
  --text:#e7e9ef; --muted:#8b93a7; --faint:#5b6377;
  --accent:#7c6cff; --accent-2:#a78bff; --accent-glow:rgba(124,108,255,.35);
  --user:#171b27; --tool:#0e1a17; --tool-line:#1f3a33; --tool-text:#5fd0ad;
  --err:#ff6b6b;
  --radius:14px; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 80% -10%,rgba(124,108,255,.10),transparent 60%);
}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;color:inherit}
.muted{color:var(--muted)}
.err{color:var(--err);font-size:13px;min-height:18px;margin-top:6px}

/* brand */
.brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.02em;font-size:18px}
.brand-lg{font-size:30px}
.dot{width:.62em;height:.62em;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(124,108,255,.16),0 0 22px var(--accent-glow)}

/* gate */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:30}
.gate-card{width:min(360px,90vw);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px 28px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.gate-card .muted{margin:-6px 0 6px}
.gate-card input,.gate-card button{padding:12px 14px;border-radius:10px;font-size:15px}
.gate-card input{background:var(--bg-2);border:1px solid var(--line-2);color:var(--text)}
.gate-card input:focus{outline:none;border-color:var(--accent)}
.gate-card button{background:var(--accent);color:#fff;font-weight:600}
.gate-card button:hover{background:var(--accent-2)}

/* layout */
.app{display:grid;grid-template-columns:288px 1fr;height:100dvh}
.sidebar{background:var(--bg-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px;gap:14px;overflow-y:auto}
.sidebar .brand{padding:4px 6px 2px}
.new-chat{background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;
  padding:11px 14px;text-align:left;font-weight:550;color:var(--text)}
.new-chat:hover{border-color:var(--accent);background:#181d2b}
.section-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  padding:6px 6px 0}

.workflows{display:flex;flex-direction:column;gap:6px}
.wf{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:11px;
  border:1px solid transparent;background:transparent;text-align:left;width:100%;transition:.12s}
.wf:hover{background:var(--panel);border-color:var(--line-2)}
.wf .ico{font-size:17px;line-height:1.4}
.wf .wf-t{font-weight:550;font-size:14px}
.wf .wf-d{color:var(--muted);font-size:12px;line-height:1.4}

.convs{display:flex;flex-direction:column;gap:2px;flex:1;min-height:40px}
.conv{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;
  font-size:14px;color:var(--muted);background:transparent;width:100%;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv:hover{background:var(--panel);color:var(--text)}
.conv.active{background:var(--panel-2);color:var(--text)}
.conv .del{margin-left:auto;opacity:0;color:var(--faint);font-size:15px;padding:0 2px}
.conv:hover .del{opacity:1}
.conv .del:hover{color:var(--err)}

.sidebar-foot{margin-top:auto;padding-top:8px}
.ghost{background:transparent;border:1px solid var(--line-2);border-radius:9px;
  padding:9px 12px;color:var(--muted);font-size:13px}
.ghost:hover{color:var(--text);border-color:var(--line-2)}

/* main */
.main{display:flex;flex-direction:column;height:100dvh;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 22px;
  border-bottom:1px solid var(--line);background:rgba(8,9,12,.6);backdrop-filter:blur(8px)}
.conv-title{font-weight:550;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cost{font-family:var(--mono);font-size:12px;color:var(--faint)}
.icon-btn{background:transparent;border:none;font-size:18px;color:var(--muted);padding:4px 8px;border-radius:8px}
.icon-btn:hover{color:var(--text);background:var(--panel)}
#menuBtn{display:none}

.thread{flex:1;overflow-y:auto;padding:26px 0;scroll-behavior:smooth}
.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:0 24px}
.empty .muted{max-width:440px}

.msg{max-width:760px;margin:0 auto;padding:6px 26px}
.msg .role{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.bubble{border-radius:13px;padding:13px 16px}
.msg.user .bubble{background:var(--user);border:1px solid var(--line-2)}
.msg.assistant .bubble{background:transparent;padding:2px 0}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.tool-chip{font-family:var(--mono);font-size:11.5px;color:var(--tool-text);background:var(--tool);
  border:1px solid var(--tool-line);border-radius:7px;padding:3px 9px}
.cursor::after{content:"▍";color:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* rendered markdown */
.md p{margin:.5em 0}
.md h1,.md h2,.md h3{margin:.8em 0 .4em;line-height:1.3}
.md h1{font-size:1.4em}.md h2{font-size:1.22em}.md h3{font-size:1.08em}
.md ul,.md ol{margin:.4em 0;padding-left:1.4em}
.md li{margin:.2em 0}
.md a{color:var(--accent-2)}
.md code{font-family:var(--mono);font-size:.88em;background:var(--panel-2);
  border:1px solid var(--line);border-radius:5px;padding:.08em .35em}
.md pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px;overflow-x:auto;margin:.6em 0}
.md pre code{background:none;border:none;padding:0;font-size:.86em}
.md blockquote{border-left:3px solid var(--line-2);margin:.5em 0;padding-left:14px;color:var(--muted)}
.md table{border-collapse:collapse;margin:.6em 0;font-size:.92em}
.md th,.md td{border:1px solid var(--line-2);padding:6px 10px}

/* composer */
.composer{display:flex;align-items:flex-end;gap:8px;padding:14px 22px 20px;
  border-top:1px solid var(--line);background:var(--bg)}
.composer textarea{flex:1;resize:none;background:var(--panel);border:1px solid var(--line-2);
  border-radius:13px;padding:13px 16px;color:var(--text);font-family:inherit;font-size:15px;
  line-height:1.5;max-height:200px}
.composer textarea:focus{outline:none;border-color:var(--accent)}
.send{width:42px;height:42px;border-radius:11px;background:var(--accent);color:#fff;
  font-size:19px;font-weight:700;flex:none}
.send:hover{background:var(--accent-2)}
.send:disabled{opacity:.4;cursor:default}
.mic{width:42px;height:42px;border-radius:11px;flex:none;font-size:18px}
.mic.recording{background:#3a1620;color:#ff6b6b;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,107,107,.18)}}

/* modal */
.modal{position:fixed;inset:0;background:rgba(4,5,8,.66);display:grid;place-items:center;z-index:20;
  backdrop-filter:blur(3px)}
.modal-card{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.modal-title{font-size:18px;font-weight:600}
.modal-card textarea{background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 14px;color:var(--text);font-family:inherit;font-size:15px;resize:vertical;min-height:90px}
.modal-card textarea:focus{outline:none;border-color:var(--accent)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}
.modal-actions button{padding:10px 18px;border-radius:10px;font-weight:550}
#wfRun{background:var(--accent);color:#fff}
#wfRun:hover{background:var(--accent-2)}

/* mobile */
@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:286px;z-index:15;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .sidebar.open{transform:none}
  #menuBtn{display:inline-flex}
  .msg{padding:6px 16px}
  .composer{padding:12px 14px 16px}
}
/* walkie-talkie */
.wt{position:fixed;inset:0;z-index:25;background:
  radial-gradient(1000px 700px at 50% 18%,rgba(124,108,255,.16),transparent 60%),var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  -webkit-user-select:none;user-select:none}
.wt-close{position:absolute;top:18px;right:20px;background:transparent;color:var(--muted);
  font-size:22px;padding:8px 12px;border-radius:10px}
.wt-close:hover{color:var(--text);background:var(--panel)}
.wt-lang{position:absolute;top:20px;left:22px;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;color:var(--faint);border:1px solid var(--line-2);border-radius:7px;padding:3px 9px}

.wt-stage{display:flex;flex-direction:column;align-items:center;gap:22px}
.orb{position:relative;width:188px;height:188px;border-radius:50%;background:transparent;
  display:grid;place-items:center;touch-action:none}
.orb-core{position:relative;z-index:2;width:130px;height:130px;border-radius:50%;
  display:grid;place-items:center;font-size:46px;
  background:linear-gradient(150deg,#1a1f2e,#0f1219);border:1px solid var(--line-2);
  box-shadow:0 14px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);transition:.18s}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:0}
.orb:hover .orb-core{border-color:#2c3550}

/* state: listening */
.wt[data-state="listening"] .orb-core{background:linear-gradient(150deg,#2a1830,#1a1020);
  border-color:#ff6b6b;box-shadow:0 0 50px rgba(255,107,107,.45)}
.wt[data-state="listening"] .orb-ring{animation:ripple 1.6s ease-out infinite;border-color:#ff6b6b}
.wt[data-state="listening"] .orb-ring.r2{animation-delay:.5s}
.wt[data-state="listening"] .orb-ring.r3{animation-delay:1s}
@keyframes ripple{0%{opacity:.5;transform:scale(.7)}100%{opacity:0;transform:scale(1.15)}}

/* state: thinking */
.wt[data-state="thinking"] .orb-core{border-color:var(--accent)}
.wt[data-state="thinking"] .orb-ring.r1{opacity:1;border-width:2px;border-color:transparent;
  border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* state: speaking */
.wt[data-state="speaking"] .orb-core{border-color:var(--accent-2);
  box-shadow:0 0 55px var(--accent-glow);animation:breathe 1.1s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06)}}

.wt-status{font-size:15px;color:var(--muted);min-height:22px;letter-spacing:.01em}
.wt-transcript{width:min(620px,90vw);min-height:96px;text-align:center;display:flex;
  flex-direction:column;gap:10px;padding:0 20px}
.wt-line{font-size:16px;line-height:1.55}
.wt-line.user{color:var(--text)}
.wt-line.user:not(:empty)::before{content:"You · ";color:var(--faint);font-size:13px}
.wt-line.claude{color:var(--muted)}
.wt-line.claude:not(:empty)::before{content:"miso · ";color:var(--faint);font-size:13px}
.wt-controls{position:absolute;bottom:34px;display:flex;gap:14px;align-items:center}
.wt-toggle{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;cursor:pointer}
.wt-toggle input{width:16px;height:16px;accent-color:var(--accent)}

@media(max-width:760px){.orb{width:168px;height:168px}.orb-core{width:118px;height:118px;font-size:40px}}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:2px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:#333d57}