:root { --bg:#fff; --fg:#1b1f24; --muted:#67707a; --line:#dfe3e8; --accent:#2563eb; --mine:#e7f0ff; --other:#f3f4f6; --err:#b42318; --errbg:#fef3f2; color-scheme:light dark; }
@media (prefers-color-scheme:dark) { :root { --bg:#14171a; --fg:#e7e9ec; --muted:#98a1ab; --line:#2b3036; --accent:#6d9eff; --mine:#1d3157; --other:#22262b; --err:#ffb4ab; --errbg:#3a1b18; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { height:100%; margin:0; }
body { background:var(--bg); color:var(--fg); font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
button { font:inherit; cursor:pointer; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:8px 16px; }
button:disabled { opacity:.6; cursor:default; }
button.link { background:none; color:var(--accent); padding:0; }
input,textarea { font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; }
.muted { color:var(--muted); }
.pad { padding:12px 16px; }
.error { color:var(--err); margin:6px 0; min-height:0; }
.error:empty { display:none; }
.login { max-width:340px; margin:12vh auto; padding:0 16px; display:grid; gap:12px; }
.login h1 { margin:0; font-size:24px; }
.login label { display:grid; gap:4px; }
.app { display:grid; grid-template-columns:320px 1fr; height:100dvh; }
.side { border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.side header,.pane>header { padding:12px 16px; border-bottom:1px solid var(--line); }
#search { margin:8px 12px; width:auto; }
#back { display:none; margin-right:8px; }
.banner { margin:0; padding:8px 16px; background:var(--errbg); color:var(--err); }
#chats { list-style:none; margin:0; padding:0; overflow:auto; flex:1; }
#chats button { display:block; width:100%; text-align:left; background:none; color:inherit; border-radius:0; padding:10px 16px; border-bottom:1px solid var(--line); }
#chats button[aria-current="true"] { background:var(--other); }
.chat-name { display:flex; justify-content:space-between; gap:8px; font-weight:600; }
.chat-last { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.badge { background:var(--accent); color:#fff; border-radius:10px; padding:0 7px; font-size:12px; font-weight:600; }
.pane { display:flex; flex-direction:column; min-width:0; min-height:0; }
.messages { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.msg { max-width:min(640px,85%); background:var(--other); border-radius:10px; padding:8px 12px; align-self:flex-start; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg.mine { background:var(--mine); align-self:flex-end; }
.msg.removed { opacity:.6; font-style:italic; }
.meta { font-size:12px; color:var(--muted); margin-bottom:2px; }
.att { display:block; font-size:13px; }
.composer { border-top:1px solid var(--line); padding:10px 16px; display:grid; gap:6px; justify-items:start; }
.hint { font-size:12px; margin:0; }
@media (max-width:720px) {
  .app { grid-template-columns:1fr; }
  .app.in-chat .side { display:none; }
  .app:not(.in-chat) .pane { display:none; }
  #back { display:inline; }
  .side { border-right:0; }
}
#chats:empty { flex:0; }
button.secondary { background:none; color:var(--accent); border:1px solid var(--line); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.previews { display:flex; gap:8px; flex-wrap:wrap; }
.preview { position:relative; }
.preview img { display:block; width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.preview button { position:absolute; top:-6px; right:-6px; width:22px; height:22px; padding:0; border-radius:50%; background:var(--fg); color:var(--bg); line-height:1; }
.preview-file { max-width:260px; padding:8px 28px 8px 10px; font-size:13px; border:1px solid var(--line); border-radius:8px; overflow-wrap:anywhere; }
.att-img { display:block; margin-top:4px; }
.att-img img { display:block; max-width:100%; max-height:320px; border-radius:8px; }
.composer.drop { outline:2px dashed var(--accent); outline-offset:-4px; }