*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#0a0e17;color:#c8d6e5;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:15px;line-height:1.4;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}

.hidden{display:none !important}

/* ==== Role picker overlay ==== */
.overlay{position:fixed;inset:0;background:#0a0e17;display:grid;place-items:center;padding:1.5rem;z-index:50}
.picker-box{width:100%;max-width:360px;text-align:center}
.picker-box h1{font-size:2rem;margin-bottom:.3rem;color:#00d2ff;font-weight:600;letter-spacing:-.02em}
.muted{color:#576574;font-size:.92rem;margin-bottom:1.5rem}
.tiny{font-size:.75rem;margin-top:2rem}
.role-btn{display:block;width:100%;background:#1a2332;color:#e2e8f0;border:1px solid #2c3e50;border-radius:16px;padding:1.4rem 1rem;font-size:1.1rem;font-weight:500;margin-bottom:.8rem;cursor:pointer;transition:all .15s}
.role-btn:hover{background:#243447;border-color:#00d2ff;color:#00d2ff}
.role-btn:active{transform:scale(.98)}
.role-btn[data-role="ru"]{background:#1a2b4a}
.role-btn[data-role="fi"]{background:#1a3a2a}
.err-msg{color:#ff6b6b;font-size:.85rem;margin:1rem 0;min-height:1em}

/* ==== Main view ==== */
.view{display:flex;flex-direction:column;min-height:100vh;padding:.7rem;gap:.6rem}

.top{display:flex;align-items:center;gap:.6rem;padding:.3rem .1rem;flex-shrink:0}
.badge{padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.badge-ru{background:#1c3d6b;color:#7dd3fc}
.badge-fi{background:#1c5d3d;color:#86efac}
.conn{font-size:1.3rem;color:#0cce6b}
.conn.off{color:#ff6b6b}
.mini{margin-left:auto;background:transparent;border:1px solid #2c3e50;color:#576574;border-radius:6px;padding:.15rem .5rem;cursor:pointer;font-size:.9rem}
.mini:hover{color:#c8d6e5}

.panel{background:#0d1320;border:1px solid #1a2332;border-radius:12px;padding:.7rem .9rem;min-height:120px;max-height:180px;display:flex;flex-direction:column}
.panel-label{font-size:.7rem;color:#576574;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.35rem;font-weight:600;flex-shrink:0}
.panel-text{font-size:1rem;color:#e2e8f0;word-wrap:break-word;white-space:pre-wrap;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgba(200,214,229,.15) transparent}
.panel-text::-webkit-scrollbar{width:4px}
.panel-text::-webkit-scrollbar-thumb{background:rgba(200,214,229,.15);border-radius:2px}
.panel-text:empty::before,.panel-text.empty::before{content:"—";color:#576574}
.panel-line{padding:.25rem 0;border-bottom:1px dashed rgba(200,214,229,.06);color:#8aa0b4}
.panel-line:last-child{color:#fff;border-bottom:0;font-weight:500}
.panel-line.pending{color:#86efac;font-style:italic}
.panel-debug{opacity:.6;border-style:dashed}
.panel-debug .panel-line:last-child{color:#cbd5e1}

/* ==== PTT / Mute buttons ==== */
.ptt-wrap{display:flex;justify-content:center;padding:.8rem 0}
.ptt-btn,.mute-btn{
  width:min(260px,85%);
  aspect-ratio:1;
  max-height:260px;
  border-radius:50%;
  border:4px solid #00d2ff;
  background:radial-gradient(circle at 35% 30%,#1a3b5f,#0d1f33);
  color:#e2e8f0;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.05em;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  transition:transform .08s,box-shadow .15s,border-color .15s;
  touch-action:none;
  box-shadow:0 0 30px rgba(0,210,255,.15),inset 0 0 20px rgba(0,0,0,.3);
}
.ptt-btn:active,.ptt-btn.active{
  transform:scale(.95);
  border-color:#ff3b30;
  background:radial-gradient(circle at 35% 30%,#5f1a1a,#330d0d);
  box-shadow:0 0 50px rgba(255,59,48,.4),inset 0 0 30px rgba(0,0,0,.3);
  color:#ffb8b3;
}
.ptt-fi{border-color:#86efac;background:radial-gradient(circle at 35% 30%,#1a5f3b,#0d3319)}
.ptt-fi:active,.ptt-fi.active{
  border-color:#ff3b30;
  background:radial-gradient(circle at 35% 30%,#5f1a1a,#330d0d);
}
.mute-btn{border-color:#86efac;background:radial-gradient(circle at 35% 30%,#1a5f3b,#0d3319)}
.ptt-label,.mute-label{font-size:1.15rem;text-align:center;line-height:1.2}
.ptt-hint,.mute-hint{font-size:.72rem;color:#8aa0b4;font-weight:400;letter-spacing:0;text-align:center;padding:0 .5rem}

.tts-status{text-align:center;color:#86efac;font-size:.85rem;min-height:1.2em}
.tts-status.active{color:#fbbf24}

.mic-level{height:6px;background:#1a2332;border-radius:3px;overflow:hidden;margin-top:.3rem}
.mic-fill{height:100%;background:linear-gradient(90deg,#0cce6b,#fbbf24,#ff6b6b);width:0;transition:width .05s}

@media (max-width:480px){
  .panel{padding:.6rem .8rem}
  .panel-text{font-size:.95rem}
  .ptt-btn,.mute-btn{width:min(220px,80%)}
  .ptt-label,.mute-label{font-size:1rem}
}