:root { --bg:#0f1115; --card:#1a1d25; --line:#2a2f3a; --fg:#eef0f4; --sub:#9aa3b2; --acc:#4f8cff; --red:#ff4d55; --green:#22c55e; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 -apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
       padding:env(safe-area-inset-top,0) 16px env(safe-area-inset-bottom,0); }
#login, #phone { max-width:520px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; }
#login { justify-content:center; text-align:center; gap:14px; }
#login h1 { margin:0; font-size:28px; }
.sub { color:var(--sub); margin:0; }
.who { display:flex; gap:8px; justify-content:center; }
.who button { background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:22px; padding:10px 26px; font-size:16px; }
.who button.on { background:var(--acc); border-color:var(--acc); }
form { display:flex; gap:8px; }
input { flex:1; min-width:0; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:12px; padding:13px; font-size:16px; }
form button { background:var(--acc); color:#fff; border:0; border-radius:12px; padding:0 18px; font-size:15px; }
.err { color:var(--red); min-height:20px; margin:0; }
.top { text-align:center; padding:28px 0 8px; }
.avatar { width:92px; height:92px; margin:0 auto 10px; border-radius:50%; background:linear-gradient(135deg,#4f8cff,#7c5cff);
          display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; transition:box-shadow .15s; }
.avatar.speaking { box-shadow:0 0 0 6px rgba(79,140,255,.35), 0 0 0 14px rgba(79,140,255,.15); }
.avatar.listening { box-shadow:0 0 0 6px rgba(34,197,94,.35); }
.name { font-size:22px; font-weight:600; }
.badge { font-size:11px; vertical-align:middle; border:1px solid var(--sub); color:var(--sub); border-radius:6px; padding:1px 5px; }
.state { color:var(--sub); margin-top:4px; min-height:21px; }
.timer { color:var(--sub); font-variant-numeric:tabular-nums; font-size:13px; min-height:18px; }
#log { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:10px 0; }
.msg { max-width:84%; padding:9px 13px; border-radius:16px; white-space:pre-wrap; word-break:keep-all; }
.me { align-self:flex-end; background:var(--acc); border-bottom-right-radius:4px; }
.ai { align-self:flex-start; background:var(--card); border-bottom-left-radius:4px; }
.heard { text-align:center; color:var(--green); min-height:22px; font-size:14px; }
.controls { display:flex; align-items:center; justify-content:center; gap:28px; padding:12px 0 10px; }
.round { border:0; border-radius:50%; color:#fff; font-weight:600; }
.big { width:80px; height:80px; background:var(--green); font-size:16px; }
.big.active { background:var(--red); }
.small { width:58px; height:58px; background:var(--card); border:1px solid var(--line); font-size:11px; line-height:1.2; }
#textForm { margin-bottom:8px; }
.foot { text-align:center; color:var(--sub); font-size:11.5px; margin:6px 0 12px; }
.foot a { color:var(--sub); }