:root{--ink:#14201b;--green:#0f3d2e;--green2:#1c6b4f;--gold:#e8b33a;--bg:#eef2ea;--panel:#fff;--line:#d9e0d4;--mine:#d7efc9;--muted:#5d6b63}
@media (prefers-color-scheme:dark){:root{--ink:#e8efe9;--bg:#0b1511;--panel:#12211a;--line:#24382d;--mine:#1c5a3f;--muted:#97a79d}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
input,select{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:.7rem .8rem;width:100%}
button{cursor:pointer;border:0;border-radius:10px;padding:.7rem 1rem;background:transparent}
.primary{background:var(--green2);color:#fff;font-weight:600}
.primary:hover{background:var(--green)}
.ghost{color:var(--muted)}
.err{color:#c0392b;min-height:1.2em;margin:.3rem 0;font-size:.9rem}
.muted{color:var(--muted);padding:1rem;font-size:.95rem}
.auth{min-height:100%;display:grid;place-items:center;align-content:center;gap:1.5rem;padding:1.5rem;background:linear-gradient(rgba(8,30,22,.55),rgba(8,30,22,.8)),url(assets/wallpaper.jpg) center top/cover no-repeat,var(--green);padding-top:max(1.5rem,env(safe-area-inset-top))}
.brand{color:#fff;text-align:center}
.brand h1{margin:0;font-size:clamp(2.2rem,8vw,3.4rem);letter-spacing:-.03em;border-bottom:4px solid var(--gold);display:inline-block;padding-bottom:.2rem}
.brand p{margin:.8rem 0 0;opacity:.85}
.card{background:var(--panel);width:min(100%,400px);border-radius:18px;padding:1.2rem;display:grid;gap:.9rem}
.card label{display:grid;gap:.3rem;font-size:.9rem;color:var(--muted)}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.tabs button{border-radius:0;color:var(--muted);border-bottom:3px solid transparent}
.tabs .on{color:var(--ink);border-color:var(--gold);font-weight:600}
.phone{display:grid;grid-template-columns:110px 1fr;gap:.4rem}
.app{height:100%;display:grid;grid-template-columns:340px 1fr}
.side,.room{background:var(--panel);display:flex;flex-direction:column;min-height:0;height:100%}
.side{border-right:1px solid var(--line)}
header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.8rem 1rem;padding-top:max(.8rem,env(safe-area-inset-top));background:var(--green);color:#fff}
header small{display:block;opacity:.75;font-size:.8rem}
header .ghost{color:#fff;opacity:.85}
.room header{justify-content:flex-start}
.newchat{display:grid;grid-template-columns:90px 1fr auto;gap:.4rem;padding:.7rem}
.newchat select{padding:.6rem .4rem}
.newchat+.err{padding:0 .8rem;margin:0}
.chats{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.chats li{display:flex;justify-content:space-between;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);cursor:pointer}
.chats li:hover,.chats li.on{background:var(--bg)}
.chats .t{min-width:0}.chats .t b,.chats .t span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chats .t span{color:var(--muted);font-size:.9rem}
.badge{background:var(--gold);color:#222;border-radius:99px;font-size:.75rem;font-weight:700;padding:.1rem .5rem;align-self:center}
.msgs{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.4rem;background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),url(assets/wallpaper.jpg) center/cover no-repeat,var(--bg)}
.b{max-width:78%;padding:.5rem .75rem;border-radius:14px;background:var(--panel);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.b{box-shadow:0 1px 1px rgba(0,0,0,.15)}
.b.me{align-self:flex-end;background:var(--mine);border-color:transparent}
.b time{display:block;font-size:.7rem;color:var(--muted);text-align:right}
.composer{display:flex;gap:.5rem;padding:.7rem;padding-bottom:max(.7rem,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.placeholder{display:grid;place-content:center;text-align:center;color:#fff;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url(assets/wallpaper.jpg) center/cover no-repeat}
.placeholder h2{margin:0}
#back{display:none;font-size:1.6rem;padding:0 .5rem}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .placeholder{display:none}
  .app .room{display:none}
  .app.in-room .side{display:none}
  .app.in-room .room{display:flex}
  #back{display:block}
}