/* ── Private Chat — flat, grounded theme (matches admin console) ─────── */
:root{
  --bg:#0f1216;
  --surface:#171b21;
  --surface2:#1c222a;
  --border:#2a313b;
  --border2:#39424e;
  --text:#e7e9ec; --muted:#98a0aa; --faint:#6b7480;
  --accent:#3d7bfd; --accent-hover:#5a90ff;
  --green:#3fb27f; --red:#e5615c;
  --radius:8px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{color:var(--text);font-family:var(--sans);background:var(--bg)}
.hidden{display:none!important}
.muted{color:var(--muted)}
.error{color:var(--red);min-height:1.2em;font-size:.9rem;margin-top:.3rem}

/* login */
.login-wrap{min-height:100%;display:grid;place-items:center;padding:1rem}
.login-card{width:min(92vw,360px);padding:1.8rem;display:flex;flex-direction:column;gap:.7rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.login-card h1{margin:0;font-size:1.25rem;font-weight:700}
.login-card p{margin:0 0 .5rem}
.login-card input{padding:.7rem .8rem;border-radius:var(--radius);border:1px solid var(--border2);
  background:var(--bg);color:var(--text);font-size:1rem}
.login-card input:focus{outline:none;border-color:var(--accent)}
.login-card button{margin-top:.35rem;padding:.75rem;border:1px solid var(--accent);border-radius:var(--radius);
  cursor:pointer;font-weight:600;font-size:1rem;color:#fff;background:var(--accent)}
.login-card button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* app */
.app{height:100%;display:flex;flex-direction:column;max-width:900px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;
  border-bottom:1px solid var(--border);background:var(--surface)}
.brand{font-weight:700}
.meta{display:flex;align-items:center;gap:.5rem}
.pill{font-size:.78rem;color:var(--muted);background:var(--surface2);padding:.25rem .55rem;
  border-radius:999px;border:1px solid var(--border)}
.ghost{background:transparent;border:1px solid var(--border2);color:var(--muted);padding:.35rem .7rem;
  border-radius:var(--radius);cursor:pointer;font-size:.82rem}
.ghost:hover{color:var(--text);background:var(--surface2)}
.retention{font-size:.8rem;color:var(--muted);text-align:center;padding:.5rem;
  background:var(--surface);border-bottom:1px solid var(--border)}

.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.15rem}
.msg{padding:.35rem .6rem;border-radius:var(--radius);position:relative}
.msg:hover{background:var(--surface)}
.msg .head{display:flex;align-items:baseline;gap:.5rem}
.msg .name{font-weight:600;font-size:.92rem}
.msg .time{font-size:.72rem;color:var(--faint)}
.msg .body{white-space:pre-wrap;word-wrap:break-word;line-height:1.45}
.msg.mine .name{color:var(--accent)}
.msg .del{position:absolute;top:.3rem;right:.4rem;display:none;background:transparent;border:0;
  color:var(--faint);cursor:pointer;font-size:.85rem}
.msg:hover .del{display:block}
.msg .del:hover{color:var(--red)}
.daysep{align-self:center;font-size:.72rem;color:var(--muted);margin:.6rem 0;background:var(--surface2);
  padding:.2rem .7rem;border-radius:999px;border:1px solid var(--border)}

.composer{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border);background:var(--surface)}
.composer textarea{flex:1;resize:none;max-height:160px;padding:.7rem .8rem;border-radius:var(--radius);
  border:1px solid var(--border2);background:var(--bg);color:var(--text);font:inherit;font-size:1rem;line-height:1.4}
.composer textarea:focus{outline:none;border-color:var(--accent)}
.composer button{padding:0 1.2rem;border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;
  font-weight:600;color:#fff;background:var(--accent)}
.composer button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* scrollbars */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px;border:2px solid var(--bg)}