:root { --bg:#0f1115; --panel:#171a21; --line:#262b36; --tx:#e6e9ef; --mut:#9aa4b2;
  --accent:#3b82f6; --mine:#2563eb; --other:#232833; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; margin:0; }
body { background:var(--bg); color:var(--tx);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.screen { height:100dvh; display:flex; flex-direction:column; }
.hidden { display:none !important; }

/* Вход */
.login-box { margin:auto; width:min(340px,88vw); display:flex; flex-direction:column; gap:12px;
  padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.login-box h1 { margin:0 0 6px; font-size:22px; text-align:center; }
.login-box input, .login-box button { padding:13px 14px; border-radius:10px; border:1px solid var(--line);
  background:#0e1116; color:var(--tx); font-size:16px; }
.login-box button { background:var(--accent); border:0; font-weight:600; cursor:pointer; }
.err { color:#e05a5a; font-size:13px; text-align:center; min-height:16px; }

/* Чат */
header { display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line); font-weight:600;
  padding-top:max(12px,env(safe-area-inset-top)); }
header .brand { flex-shrink:0; }
header .hdr-actions { display:flex; align-items:center; gap:6px; min-width:0; }
header button { background:none; border:0; font-size:20px; cursor:pointer; }
.me { font-size:13px !important; font-weight:600; color:var(--accent); background:rgba(59,130,246,.12) !important;
  border-radius:14px !important; padding:5px 10px !important; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
#messages { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.msg { position:relative; max-width:78%; align-self:flex-start; background:var(--other);
  padding:8px 11px; border-radius:14px; border-bottom-left-radius:4px; }
.msg.mine { align-self:flex-end; background:var(--mine); border-radius:14px; border-bottom-right-radius:4px; }
.who { font-size:12px; color:var(--accent); font-weight:600; margin-bottom:2px; }
.msg.mine .who { color:#cfe0ff; }
.tx { white-space:pre-wrap; word-break:break-word; }
.ph { max-width:100%; max-height:70vh; image-orientation:from-image; border-radius:10px; margin:2px 0; display:block; }
.time { font-size:10px; color:var(--mut); text-align:right; margin-top:3px; }
.msg.mine .time { color:#cfe0ff; }
.del { position:absolute; left:-32px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; padding:0; border:0; border-radius:50%;
  background:var(--other); color:var(--mut); font-size:12px; line-height:26px; cursor:pointer; opacity:.5; }
.del:active, .del:hover { opacity:1; color:#e05a5a; }
#installBtn { background:transparent; border:1px solid var(--accent) !important; color:var(--accent); }

#composer { display:flex; gap:8px; align-items:center; padding:10px 12px;
  background:var(--panel); border-top:1px solid var(--line);
  padding-bottom:max(10px,env(safe-area-inset-bottom)); }
#composer input#text { flex:1; padding:11px 14px; border-radius:20px; border:1px solid var(--line);
  background:#0e1116; color:var(--tx); font-size:16px; }
.attach { font-size:22px; cursor:pointer; }
#composer button { width:42px; height:42px; border-radius:50%; border:0; background:var(--accent);
  color:#fff; font-size:18px; cursor:pointer; }
#preview { position:fixed; bottom:70px; left:12px; background:var(--panel); padding:6px;
  border-radius:10px; border:1px solid var(--line); }
#preview img { max-height:80px; border-radius:6px; display:block; }
#preview button { position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
  border:0; background:#e05a5a; color:#fff; cursor:pointer; }

@media (prefers-color-scheme: light) {
  :root { --bg:#f5f7fa; --panel:#fff; --line:#e3e8ef; --tx:#1a1f29; --mut:#5b6572; --other:#eef1f6; }
  .login-box input, #composer input#text { background:#fff; }
  .msg.mine { color:#fff; } .msg.mine .time,.msg.mine .who { color:#dbe7ff; }
}