:root { --bg:#111214; --panel:#1b1d21; --line:#2a2d33; --text:#e9e9ea; --dim:#9a9ca3; --gold:#d6b25e; --red:#e5534b; --green:#3fb950; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font:16px -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow:hidden; }
.hidden { display:none !important; }
.screen { height:100%; display:flex; flex-direction:column; }
#s-msg { align-items:center; justify-content:center; text-align:center; padding:24px; gap:8px; }
.logo { width:84px; height:84px; border-radius:20px; }
#s-msg h1 { font-size:22px; margin:8px 0 0; }
#s-msg p { color:var(--dim); max-width:340px; line-height:1.45; white-space:pre-line; }
.code { font: 700 40px ui-monospace, Menlo, monospace; letter-spacing:6px; color:var(--gold); margin:8px 0; }
.btn { background:var(--gold); color:#111; border:0; border-radius:12px; padding:12px 22px; font-size:16px; font-weight:600; }
.bar { display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--panel); min-height:50px; }
.bar-title { flex:1; font-weight:700; font-size:17px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.icon-btn { background:none; border:0; color:var(--text); font-size:20px; padding:4px 8px; min-width:36px; }
.conn { width:9px; height:9px; border-radius:50%; background:var(--red); flex:none; }
.conn.ok { background:var(--green); }
.tip { display:flex; gap:8px; align-items:flex-start; margin:10px 12px 0; padding:10px 12px; background:#2a2414; border:1px solid #4a3d1c; border-radius:12px; font-size:14px; line-height:1.4; }
.tip span { flex:1; }
#chats { flex:1; overflow-y:auto; padding:6px 0 20px; }
.chat { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.chat:active { background:var(--panel); }
.chat .em { width:38px; height:38px; border-radius:50%; background:var(--panel); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.chat .nm { flex:1; font-size:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat .st { font-size:12px; color:var(--dim); }
.chat .dot { width:8px; height:8px; border-radius:50%; background:var(--green); }
.chat.off { opacity:.45; }
.chat .att { color:var(--gold); font-size:13px; }
.empty { color:var(--dim); text-align:center; padding:40px 20px; line-height:1.5; }
#term-wrap { flex:1; overflow:auto; background:#0b0c0e; -webkit-overflow-scrolling:touch; }
#term { padding:4px; display:inline-block; min-width:100%; }
.gone { text-align:center; color:var(--dim); padding:6px; font-size:13px; background:var(--panel); }
#keys { display:flex; gap:6px; overflow-x:auto; padding:6px 8px; background:var(--panel); border-top:1px solid var(--line); scrollbar-width:none; }
#keys::-webkit-scrollbar { display:none; }
#keys button { flex:none; background:#2a2d33; color:var(--text); border:0; border-radius:8px; padding:8px 12px; font-size:14px; font-family:ui-monospace, Menlo, monospace; }
#keys button:active { background:var(--gold); color:#111; }
#send-form { display:flex; gap:8px; padding:8px; background:var(--panel); }
#inp { flex:1; resize:none; background:#0b0c0e; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:16px; max-height:120px; font-family:inherit; }
.send { background:var(--gold); color:#111; border:0; border-radius:12px; width:48px; font-size:18px; }