/* web/static/styles.css */
:root{--paper:#13131c;--line:#30304a;--ink:#efe7d8;--brand:#5ecfd6;--rec:#e0483d;--accent:#159aa3}
*{box-sizing:border-box}
body{margin:0;background:#0d0d14;color:var(--ink);font-family:'Segoe UI',system-ui,sans-serif}
#app{max-width:820px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.hdr{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #23233a}
.brand{font-weight:700;color:var(--brand)}
.dot{width:8px;height:8px;border-radius:50%;background:#5b5b6e}.dot.on{background:#3ecf8e}.dot.busy{background:var(--brand)}
.ctrls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid #23233a}
.seg{display:flex;gap:3px;background:#181826;border-radius:9px;padding:3px}
.seg button{background:none;border:0;color:var(--ink);opacity:.6;padding:6px 11px;border-radius:7px;font:inherit;cursor:pointer}
.seg button.on{background:#2a2a40;opacity:1}
select,.abtn{background:#181826;border:1px solid #2a2a40;color:var(--ink);border-radius:8px;padding:6px 11px;font:inherit;cursor:pointer}
.disc{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 50% 38%,#f0b46a,var(--rec));box-shadow:0 8px 22px #e0483d55}
.panelwrap{flex:1;display:flex;flex-direction:column;padding:14px 16px;min-height:0}
.panelhdr{display:flex;align-items:center;margin-bottom:8px}.panelhdr .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;opacity:.5}
#transcript{flex:1;overflow:auto;background:#0f0f17;border:1px solid #23233a;border-radius:12px;padding:15px;line-height:1.65;white-space:pre-wrap}
.copyall{margin-top:12px;height:50px;border:0;border-radius:13px;font-weight:800;font-size:1rem;color:#062b2d;cursor:pointer;background:linear-gradient(180deg,#27c3cc,var(--accent));box-shadow:0 8px 24px #159aa355}
.icobtn{width:30px;height:28px;border:1px solid #2a2a40;background:#181826;color:var(--ink);border-radius:7px;cursor:pointer;margin-left:6px}
.toast{height:16px;text-align:center;font-size:.74rem;color:#7fe3e8;margin-top:6px}
.dot.err{background:#e0483d}
.disc.rec{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #e0483d88,0 8px 22px #e0483d55}50%{box-shadow:0 0 0 11px #e0483d00,0 8px 22px #e0483d55}}
.meterrow{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #23233a}
.meterlbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;opacity:.55;white-space:nowrap}
.meter{flex:1;height:12px;background:#181826;border:1px solid #2a2a40;border-radius:7px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:#356d70;border-radius:7px;transition:width .06s linear}
.barbtns{display:none}
@media (max-width:600px){
  .ctrls{flex-direction:column;align-items:stretch}
  .ctrls .seg{justify-content:space-between}.seg button{flex:1}
  .deskonly{display:none}                 /* mic/resync move to ⚙ menu */
  .barbtns{display:flex;align-items:center;justify-content:space-between;padding:12px 30px max(12px,env(safe-area-inset-bottom))}
  .disc{width:70px;height:70px}
}