/* --- existing styles preserved --- */
:root {
  --bg: #0e1117;
  --bg-alt: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --text-dim: #9da7b3;
  --accent: #4f9dff;
  --accent-glow: #4f9dff55;
  --danger: #ff5f56;
  --radius: 14px;
  --font-stack: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-stack);-webkit-font-smoothing:antialiased;}
body{display:flex;flex-direction:column;height:100vh;}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:linear-gradient(120deg,#10141c,#0d141e);position:sticky;top:0;z-index:10;}
.logo{font-weight:600;font-size:1.05rem;letter-spacing:.5px;}
.actions{display:flex;gap:.5rem;}
.icon-btn{background:var(--bg-alt);border:1px solid var(--border);color:var(--text);padding:.55rem .7rem;border-radius:var(--radius);cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;transition:.2s background,.2s border-color;}
.icon-btn:hover{background:#1f2630;border-color:#3a424d;}
.app-main{flex:1;display:flex;flex-direction:column;min-height:0;}
.chat{flex:1;overflow-y:auto;padding:1rem;scroll-behavior:smooth;display:flex;flex-direction:column;gap:.75rem;}
.message{max-width:840px;width:100%;padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--radius);line-height:1.4;white-space:pre-wrap;word-wrap:break-word;background:var(--bg-alt);position:relative;animation:fadeIn .25s ease;}
.message.user{align-self:flex-end;background:#1d2732;border-color:#2f3a45;}
.message.assistant{align-self:flex-start;background:#141b23;}
.message.system{align-self:center;background:#1b222b;font-size:.85rem;opacity:.85;}
.message.streaming::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);position:absolute;top:8px;right:8px;box-shadow:0 0 0 6px var(--accent-glow);animation:pulse 1s infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:1;}70%{transform:scale(.7);opacity:.4;}100%{transform:scale(1);opacity:1;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.input-form{border-top:1px solid var(--border);padding:.75rem .75rem .9rem;background:linear-gradient(180deg,#10161f 0%,#0e131b 100%);}
.input-row{display:flex;gap:.55rem;align-items:flex-end;}
textarea{flex:1;resize:none;background:#141b23;color:var(--text);padding:.75rem .85rem;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-stack);max-height:160px;line-height:1.35;transition:border-color .2s;}
textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);}
.mic-btn,.send-btn,.stop-stream-btn{background:var(--accent);border:none;color:#fff;font-size:1.05rem;padding:.75rem .85rem;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s background,.2s transform;}
.stop-stream-btn{background:#ff5f56;}
.stop-stream-btn[hidden]{display:none!important;}
.stop-stream-btn:hover{background:#ff3d38;}
.mic-btn.active{background:#ff9d3f;}
.mic-btn:hover,.send-btn:hover{background:#318af5;}
.mic-btn:active,.send-btn:active,.stop-stream-btn:active{transform:translateY(2px);}
.secondary-controls{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.55rem;font-size:.75rem;align-items:center;}
.toggle{display:flex;align-items:center;gap:.35rem;cursor:pointer;user-select:none;}
.toggle input{accent-color:var(--accent);}
.icon-btn.small-icon{padding: .3rem .5rem; font-size: 0.9rem;}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);background:#00000088;padding:1rem;z-index:40;}
.modal[hidden]{display:none!important;}
.modal-content{background:#111821;width:100%;max-width:520px;border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.2rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;max-height:90vh;overflow:auto;}
.modal-content h2{margin:0 0 .2rem;font-size:1.1rem;}
.modal-content label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;}
.modal-content input,.modal-content select,.modal-content textarea{background:#141b23;border:1px solid var(--border);color:var(--text);padding:.6rem .65rem;border-radius:var(--radius);font-size:.85rem;font-family:var(--font-stack);}
.modal-content textarea{resize:vertical;min-height:80px;}
.modal-content input:focus,.modal-content select:focus,.modal-content textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.btn-row button{flex:1 1 32%;padding:.7rem .9rem;border-radius:var(--radius);cursor:pointer;background:#1f2933;border:1px solid var(--border);color:var(--text);font-weight:500;letter-spacing:.3px;}
.btn-row button.primary{background:var(--accent);border:none;color:#fff;}
.btn-row button.primary:hover{background:#318af5;}
.btn-row button:hover:not(.primary){background:#25313e;}
.note{font-size:.7rem;}
.note p{margin:.3rem 0 0;line-height:1.3;color:var(--text-dim);}
.remember-key{display:flex;align-items:center;gap:.45rem;font-size:.75rem;cursor:pointer;}
.toast{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%) translateY(150%);background:#18212b;color:var(--text);padding:.7rem 1rem;border-radius:var(--radius);border:1px solid var(--border);font-size:.8rem;min-width:200px;text-align:center;opacity:0;pointer-events:none;transition:.4s transform,.4s opacity;z-index:50;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.message .meta{font-size:.65rem;color:var(--text-dim);margin-top:.4rem;}
.status-line{font-size:.7rem;display:flex;align-items:center;gap:.4rem;background:#141b23;padding:.45rem .6rem;border:1px solid var(--border);border-radius:var(--radius);}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.status-dot.gray{background:#5a6370;}
.status-dot.green{background:#41c463;}
.status-dot.red{background:#f85149;}
@media (max-width:600px){
  .logo{font-size:.9rem;}
  .secondary-controls{font-size:.65rem;}
  .modal-content{max-width:94%;}
  textarea{font-size:.9rem;}
}