*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0d10;color:#e6e8eb;font:16px/1.4 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
body{display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #1d2228}
.title{font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px}.title small{font-weight:400;color:#8a929c;font-size:12px}
.dot{width:10px;height:10px;border-radius:50%;background:#555}.dot.on{background:#3ddc84}.dot.off{background:#ff4d4d}
.hdr-btns{display:flex;gap:10px;align-items:center}.tog{font-size:14px;color:#8a929c}
button{font:inherit;color:inherit;background:#1d2228;border:0;border-radius:10px;padding:8px 12px}.ghost{background:transparent;border:1px solid #2a3038}
#today{padding:10px 14px;font-size:13px;color:#aab2bc;border-bottom:1px solid #1d2228;max-height:35vh;overflow:auto;white-space:pre-wrap}
main{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:9px 12px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word}
.user{align-self:flex-end;background:#2a5bd7}.assistant{align-self:flex-start;background:#1d2228}
.task{align-self:center;font-size:13px;color:#c9b458;background:#1a1810;border:1px solid #3a3420;max-width:95%}
.sys{align-self:center;font-size:12px;color:#6b737d}
.live{padding:4px 14px;color:#8a929c;font-size:13px;font-style:italic}
footer{display:flex;gap:10px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #1d2228}
#form{flex:1;display:flex;gap:6px}#text{flex:1;min-width:0;background:#14181d;color:#e6e8eb;border:1px solid #2a3038;border-radius:20px;padding:10px 14px;font-size:16px}
.mic{width:56px;height:56px;border-radius:50%;background:#1d2228;display:grid;place-items:center;flex:none;border:2px solid #2a3038;padding:0}
.mic span{width:22px;height:22px;border-radius:50%;background:#ff4d4d}
.mic.rec{border-color:#ff4d4d;animation:pulse 1.4s infinite}.mic.rec span{border-radius:5px}
.mic.speaking{background:#3a1515}
@keyframes pulse{0%{box-shadow:0 0 0 0 #ff4d4d88}70%{box-shadow:0 0 0 14px #ff4d4d00}100%{box-shadow:0 0 0 0 #ff4d4d00}}
.hidden{display:none!important}
.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center}.modal>div{background:#14181d;padding:20px;border-radius:14px;width:85%;display:flex;flex-direction:column;gap:10px}
.modal input{background:#0b0d10;color:#fff;border:1px solid #2a3038;border-radius:8px;padding:10px;font-size:16px}
.msg.queued { align-self: flex-end; background:#2a5bd7; opacity: .55; border: 1px dashed currentColor; }