:root{
  --bg:#0d1117; --surface:#161b22; --surface2:#21262d; --border:#30363d;
  --text:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --me:#1f6feb; --err:#f85149;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text)}

/* Login / 2FA */
.card{max-width:360px;margin:12vh auto;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:28px 24px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.card h1{font-size:1.6rem;text-align:center}
.sub{text-align:center;color:var(--muted);margin:4px 0 18px;font-size:.9rem}
.card label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:12px}
.card input{width:100%;margin-top:5px;background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;color:var(--text);padding:11px 12px;font-size:1rem;outline:none}
.card input:focus{border-color:var(--accent)}
.card button{width:100%;margin-top:8px;background:var(--accent);color:#04101f;border:none;
  border-radius:9px;padding:12px;font-size:1rem;font-weight:700;cursor:pointer}
.err{background:rgba(248,81,73,.12);border:1px solid var(--err);color:#ffb4ae;
  border-radius:8px;padding:9px 11px;font-size:.85rem;margin-bottom:14px}

/* Chat */
body.chat{display:flex;flex-direction:column;height:100dvh}
.bar{display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;background:var(--surface);
  border-bottom:1px solid var(--border)}
.logo{font-weight:700}
.linkbtn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem}
.logoutform{margin:0}
.log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.m{max-width:82%;padding:10px 13px;border-radius:14px;line-height:1.4;white-space:pre-wrap;
  word-wrap:break-word}
.m.user{align-self:flex-end;background:var(--me);color:#fff;border-bottom-right-radius:4px}
.m.kleo{align-self:flex-start;background:var(--surface2);border:1px solid var(--border);
  border-bottom-left-radius:4px}
.composer{display:flex;gap:8px;padding:12px 12px calc(env(safe-area-inset-bottom) + 12px);
  background:var(--surface);border-top:1px solid var(--border)}
.composer input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:22px;
  color:var(--text);padding:11px 16px;font-size:1rem;outline:none}
.composer input:focus{border-color:var(--accent)}
.composer button{background:var(--accent);color:#04101f;border:none;border-radius:50%;
  width:44px;height:44px;font-size:1.1rem;cursor:pointer;flex:0 0 auto}