:root{
  --bg:#0b0d10; --panel:#14171c; --line:#242a31; --ink:#e8ecf1;
  --dim:#8b95a1; --gold:#d8be78; --orange:#ff7a1a; --ok:#3fb950; --bad:#f85149;
  --blue:#5aa9ff;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--line);
}
.mark{font-weight:700; letter-spacing:.3px}
.status{display:flex; align-items:center; gap:8px; color:var(--dim); font-size:13px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--dim)}
.dot.on{background:var(--ok)} .dot.off{background:var(--bad)}

.banner{
  display:flex; gap:26px; flex-wrap:wrap; padding:12px 20px;
  background:var(--panel); border-bottom:1px solid var(--line); font-size:13px;
}
.banner .k{color:var(--dim); margin-right:8px; text-transform:uppercase; font-size:11px; letter-spacing:.5px}
.banner b{color:var(--gold)}

main{display:flex; gap:20px; padding:20px; align-items:flex-start; flex-wrap:wrap}
.col{flex:1 1 460px; min-width:320px}
.side{flex:0 1 320px}

.stage{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px}
.talk{
  width:100%; height:120px; border-radius:12px; border:1px solid var(--line);
  background:radial-gradient(120% 120% at 50% 0%, #1c2128, #12151a);
  color:var(--ink); cursor:pointer; user-select:none; transition:.12s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.talk:hover:not(:disabled){border-color:#39424d}
.talk:disabled{opacity:.5; cursor:not-allowed}
.talk.rec{background:radial-gradient(120% 120% at 50% 0%, #3a1c0a, #241009); border-color:var(--orange)}
.talk.rec .talk-label::before{content:"● "; color:var(--orange)}
.talk-label{font-size:18px; font-weight:600}
.talk-hint{font-size:12px; color:var(--dim)}
kbd{background:#0b0d10; border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:11px}

.controls{display:flex; align-items:center; gap:12px; margin-top:12px}
.phase{font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px}
.phase[data-p="listening"]{color:var(--orange)}
.phase[data-p="hearing"]{color:var(--blue)}
.phase[data-p="answering"]{color:var(--gold)}
.ghost{background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:7px 14px; cursor:pointer}
.ghost:disabled{opacity:.4; cursor:not-allowed}

.textrow{display:flex; gap:8px; margin-top:14px}
.textrow input{flex:1; background:#0b0d10; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:10px 12px}
.textrow button{background:var(--gold); color:#1a1400; border:0; border-radius:8px; padding:0 16px; font-weight:600; cursor:pointer}

.convo{margin-top:18px; display:flex; flex-direction:column; gap:12px}
.msg{padding:12px 14px; border-radius:10px; border:1px solid var(--line); max-width:92%}
.msg.you{align-self:flex-end; background:#161b22}
.msg.agent{align-self:flex-start; background:#10141a}
.msg .who{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--dim); margin-bottom:4px}
.msg.you .who{color:var(--orange)} .msg.agent .who{color:var(--gold)}
.msg.you.pending .body{opacity:.55; font-style:italic}
.msg.you.pending .who::after{content:" · listening"; color:var(--orange); opacity:.7}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:16px}
.panel h3{margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--dim)}
.panel h3 .sub{text-transform:none; letter-spacing:0; font-weight:400; color:#5a636e}
table.timing{width:100%; border-collapse:collapse; font-size:14px}
table.timing td{padding:6px 0; border-bottom:1px solid var(--line)}
table.timing td:last-child{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink)}
table.timing tr.hi td{color:var(--gold); font-weight:600}
table.timing tr.hi td:last-child{color:var(--gold)}

.tools{display:flex; flex-direction:column; gap:8px}
.chip{border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; background:#10141a}
.chip .name{color:var(--blue); font-weight:600}
.chip .args{color:var(--dim); font-size:12px; word-break:break-word}
.chip .res{color:var(--ok); margin-top:4px}
.devices{display:flex; flex-direction:column; gap:6px; font-size:14px}
.light{display:flex; justify-content:space-between; padding:6px 10px; border:1px solid var(--line); border-radius:8px}
.light .on{color:var(--gold)} .light .off{color:var(--dim)}
.muted{color:#5a636e; font-size:13px}
.fire{animation:flash .8s ease-out}
@keyframes flash{from{background:#3a2a0a}to{background:#10141a}}

/* voice library / audition */
.liblink{color:var(--gold); text-decoration:none; font-size:13px}
.liblink:hover{text-decoration:underline}
.auditrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--panel)}
.tinput{flex:1; min-width:260px; background:#0b0d10; border:1px solid var(--line);
  color:var(--ink); border-radius:8px; padding:10px 12px}
.preset{padding:8px 12px; font-size:13px}
.vlist{padding:20px; max-width:860px; margin:0 auto}
.vgroup{margin-bottom:22px}
.vgroup h3{margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--gold)}
.vgroup h3 .sub{color:#5a636e; margin-left:6px}
.vrow{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--panel)}
.vinfo{display:flex; flex-direction:column}
.vinfo b{font-size:14px}
.vinfo .note{font-size:12px; color:var(--dim)}
.vact{display:flex; align-items:center; gap:12px}
.vact .ms{font-size:12px; color:var(--dim); min-width:52px; text-align:right; font-variant-numeric:tabular-nums}
.vact .use{color:var(--blue); text-decoration:none; font-size:13px}
.vact .use:hover{text-decoration:underline}