:root{
  --bg:#0e1621; --panel:#17212b; --panel2:#0e1621; --line:#101a23;
  --accent:#3390ec; --accent2:#2b7fd4; --text:#e6edf3; --muted:#7d8b99;
  --bubble-in:#182533; --bubble-out:#2b5278; --danger:#e5484d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
#app{height:100dvh}
.center{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.muted{color:var(--muted)}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:10px 16px;color:#fff;background:var(--accent)}
button:hover{background:var(--accent2)}
button.ghost{background:transparent;color:var(--muted);padding:6px 10px}
button.ghost:hover{color:var(--text);background:#ffffff10}
input,textarea{font:inherit}

/* login */
.login{max-width:360px;text-align:center;padding:24px}
.login h1{font-size:34px;margin:0 0 4px}
.login .sub{color:var(--muted);margin-bottom:28px}
.oauth{display:flex;flex-direction:column;gap:12px}
.oauth a{display:block;text-decoration:none;padding:13px;border-radius:12px;color:#fff;font-weight:600}
.oauth a.ya{background:#fc3f1d}
.oauth a.vk{background:#0077ff}
.err{background:#e5484d22;color:#ff9b9b;padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:14px}

/* app layout */
.layout{display:grid;grid-template-columns:340px 1fr;height:100dvh}
.sidebar{background:var(--panel);border-right:1px solid #0009;display:flex;flex-direction:column;min-height:0}
.side-head{padding:12px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #0006}
.side-head .me{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-list{overflow-y:auto;flex:1;min-height:0}
.tabs{display:flex;gap:6px;padding:8px 10px}
.tabs button{flex:1;background:#ffffff0d;color:var(--muted);padding:8px}
.tabs button.on{background:var(--accent);color:#fff}
.row{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #ffffff08}
.row:hover{background:#ffffff08}
.row.active{background:#ffffff12}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#3390ec,#2b5278);
  display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;overflow:hidden;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover}
.dot{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#3fb950;border:2px solid var(--panel)}
.row .meta{flex:1;min-width:0}
.row .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .last{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:var(--accent);color:#fff;border-radius:12px;padding:1px 8px;font-size:12px;min-width:20px;text-align:center}

/* chat pane */
.chat{display:flex;flex-direction:column;min-height:0;background:
  radial-gradient(circle at 50% 0,#1c2b3a22,transparent),var(--panel2)}
.chat-head{padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #0006;background:var(--panel)}
.chat-head .t{font-weight:600}
.chat-head .s{color:var(--muted);font-size:13px}
.messages{flex:1;overflow-y:auto;padding:18px 12% 8px;display:flex;flex-direction:column;gap:3px}
@media(max-width:900px){.messages{padding:14px 4% 8px}.layout{grid-template-columns:1fr}
  .sidebar.hide{display:none}.chat.hide{display:none}}
.msg{max-width:70%;padding:7px 11px;border-radius:14px;font-size:15px;line-height:1.35;word-wrap:break-word;white-space:pre-wrap}
.msg.in{align-self:flex-start;background:var(--bubble-in);border-bottom-left-radius:5px}
.msg.out{align-self:flex-end;background:var(--bubble-out);border-bottom-right-radius:5px}
.msg .time{font-size:11px;color:#ffffff88;margin-left:8px;float:right;margin-top:4px}
.msg.pending{opacity:.6}
.sys{align-self:center;color:var(--muted);font-size:12px;background:#00000033;padding:4px 12px;border-radius:12px;margin:6px 0}
.msg-img{max-width:min(280px,70vw);max-height:340px;border-radius:10px;display:block;margin-bottom:3px;cursor:pointer}
.msg-file{display:flex;gap:8px;align-items:center;text-decoration:none;color:inherit;background:#00000026;padding:8px 12px;border-radius:10px;margin-bottom:3px}
.msg-file .fn{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-file .fsz{color:#ffffff99;font-size:12px}
.composer .attach{font-size:20px;padding:6px 8px;color:var(--muted)}
.composer .attach:hover{color:var(--text)}
.composer{display:flex;gap:10px;padding:12px 16px;border-top:1px solid #0006;background:var(--panel)}
.composer textarea{flex:1;resize:none;background:#ffffff0d;border:0;color:var(--text);
  padding:11px 14px;border-radius:12px;max-height:120px}
.composer textarea:focus{outline:1px solid var(--accent)}
.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#000c;
  padding:10px 18px;border-radius:10px;font-size:14px}

/* mobile helpers */
.only-mobile{display:none}
@media(max-width:900px){
  .only-mobile{display:inline-block}
  .sidebar.hide-mobile{display:none}
}