:root{
  --accent:#0b5fa5; --accent2:#0b6f09; --danger:#b02a2a;
  --ink:#1e2530; --muted:#5a6472; --bg:#eef2f6; --card:#ffffff; --border:#d9dee5;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);
     background:linear-gradient(160deg,#eef2f6,#dfe8f0)}
/* lock the app to the viewport: the chat scrolls INSIDE .messages instead of
 * growing the page (dvh = mobile-safe viewport unit, vh fallback) */
.app{max-width:1100px;margin:0 auto;padding:18px;height:100vh;height:100dvh;
     display:flex;flex-direction:column}

header{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 16px}
.brand{display:flex;gap:12px;align-items:center}
.logo{font-size:2rem}
h1{margin:0;font-size:1.35rem}
h1 .accent{color:var(--accent)}
.tag{margin:2px 0 0;color:var(--muted);font-size:.8rem}
.status{display:flex;gap:8px}
.pill{padding:3px 12px;border-radius:14px;font-size:.75rem;color:#fff;background:var(--muted)}
.pill.green{background:var(--accent2)}
.pill.red{background:var(--danger)}
.pill.blue{background:var(--accent)}
.pill.gray{background:#9aa5b1}
.hidden{display:none !important}

main{display:grid;grid-template-columns:1fr 280px;gap:16px;flex:1;min-height:0}
@media (max-width:840px){main{grid-template-columns:1fr;grid-template-rows:1fr auto}}

.chat{background:var(--card);border:1px solid var(--border);border-radius:14px;
      display:flex;flex-direction:column;overflow:hidden;min-height:0}
.messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg{display:flex;flex-direction:column;align-items:flex-start}
.msg.user{align-items:flex-end}
.time{font-size:.68rem;color:var(--muted);margin:2px 6px 0;user-select:none}
.bubble{max-width:78%;padding:10px 14px;border-radius:14px;line-height:1.45;font-size:.95rem;
        white-space:pre-wrap;word-break:break-word}
.msg.bot .bubble{background:#f0f4f8;border:1px solid var(--border);border-bottom-left-radius:4px}
.msg.user .bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}

/* in-progress bubbles: live voice transcript (user) / thinking (bot) */
.bubble.pending{font-style:italic;opacity:.85}
.msg.user .bubble.pending{background:#5b8fc0}
.dots{display:inline-flex;gap:4px;align-items:center;height:1em;padding:2px 2px}
.dots span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;
           animation:blink 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:#fafbfd}
.composer input{flex:1;padding:11px 14px;border:1px solid var(--border);border-radius:10px;
                font-size:.95rem;outline:none}
.composer input:focus{border-color:var(--accent)}
.composer button{border:none;border-radius:10px;width:46px;height:46px;font-size:1.15rem;
                 cursor:pointer;color:#fff;transition:transform .1s}
.composer button:active{transform:scale(.94)}
.send{background:var(--accent)}
.stop{background:var(--danger)}
.mic{background:#9aa5b1}
.mic.live{background:var(--accent2);animation:pulse 1.5s infinite}
.mic.muted{background:var(--danger);animation:pulse 1.5s infinite}
.mutebtn{background:#9aa5b1}
.mutebtn.on{background:var(--danger)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(11,111,9,.45)}70%{box-shadow:0 0 0 14px rgba(11,111,9,0)}100%{box-shadow:0 0 0 0 rgba(11,111,9,0)}}

.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;
       align-self:start;display:flex;flex-direction:column;gap:12px;
       max-height:100%;overflow-y:auto}
.panel h2{margin:0 0 4px;font-size:1rem;color:var(--accent)}
.panel label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--muted)}
.panel select{padding:8px;border:1px solid var(--border);border-radius:8px;font-size:.88rem}
.panel .check{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.sysinfo{font-size:.75rem;color:var(--muted);border-top:1px solid var(--border);padding-top:10px;
         font-family:Consolas,monospace;line-height:1.6}