/* assets/css/style.css v2 */
:root{
  --bg:#0b141a; --bg-elev:#111b21; --card:#1f2c34; --text:#e9edef; --muted:#8696a0;
  --accent:#00a884; --bubble-me:#005c4b; --bubble-peer:#202c33; --border:#21343c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.muted{color:var(--muted)}

.appbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-elev);border-bottom:1px solid var(--border)}
.appbar .title{font-weight:700;font-size:20px}
.icon-btn{background:transparent;border:0;color:var(--text);font-size:18px;margin-left:8px;cursor:pointer}

.tabbar{position:fixed;bottom:0;left:0;right:0;background:var(--bg-elev);display:flex;justify-content:space-around;border-top:1px solid var(--border);padding:6px 0}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;color:var(--muted);font-size:12px}
.tabbar a.active{color:var(--text)}
.tabbar a span{font-size:20px}
.page{padding-bottom:64px}

.auth{display:grid;place-items:center}
.auth-card{background:var(--card);padding:20px;border-radius:16px;width:min(420px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.2)}
.auth-card h1{margin:0 0 12px}
.auth-card form label{display:block;font-size:14px;margin:12px 0}
.auth-card input,.auth-card textarea,.auth-card select{width:100%;padding:12px;border-radius:12px;background:#091218;border:1px solid var(--border);color:var(--text)}
.error{background:#3b1111;border:1px solid #6a1b1b;color:#ffcdd2;padding:10px;border-radius:10px}
.info{background:#113b17;border:1px solid #1b5e20;color:#c8e6c9;padding:10px;border-radius:10px;margin:8px 0}
.btn{padding:10px 14px;border-radius:12px;border:0;cursor:pointer}
.btn.primary{background:var(--accent);color:#001e1a;font-weight:700}

.card{background:var(--card);border-radius:16px;padding:12px;margin:12px}

.list-pane{padding:8px}
.search{padding:8px}
.search input{width:100%;padding:12px;border-radius:24px;border:0;background:var(--bg-elev);color:var(--text)}

.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--border);cursor:pointer}
.list li:hover{background:#0e1a21}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#0e1a21}
.avatar.lg{width:72px;height:72px}
.badge{margin-left:auto;background:var(--accent);color:#001e1a;font-weight:700;border-radius:24px;padding:2px 8px;font-size:12px}

.chat-pane{display:flex;flex-direction:column;height:calc(100dvh - 110px)}
.chat-header{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--border);background:var(--bg-elev)}
.chat-header .back{background:transparent;border:0;color:var(--text);font-size:18px}
.chat-header .name{font-weight:700}
.chat-header .sub{font-size:12px;color:var(--muted)}

.msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:6px;background:#0b141a}
.msg{max-width:75%;padding:8px 10px;border-radius:16px;position:relative;line-height:1.3}
.msg.me{align-self:flex-end;background:var(--bubble-me);margin-left:auto}
.msg.peer{align-self:flex-start;background:var(--bubble-peer)}
.msg .time{font-size:10px;color:#b0bec5;margin-left:6px}
.msg img,.msg video{display:block;max-width:260px;border-radius:12px;margin-top:6px}
.progress{height:6px;background:#0e1a21;border-radius:12px;overflow:hidden;margin-top:4px}
.progress>span{display:block;height:100%;background:var(--accent)}

.sendbar{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);background:var(--bg-elev)}
.sendbar input[type=text]{flex:1;padding:12px;border-radius:20px;border:0;background:var(--bg);color:var(--text)}

.profile .avatar-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.profile form label{display:block;margin:12px 0}
.profile input,.profile textarea,.profile select{width:100%;padding:10px;border-radius:12px;border:0;background:var(--bg);color:var(--text)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:999}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 20px 80px rgba(0,0,0,.5)}
.lightbox.show{display:flex}
.zoomable{cursor:zoom-in}

/* Desktop centering */
@media (min-width:800px){
  .page{max-width:480px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border)}
  .appbar,.tabbar{max-width:480px;margin:0 auto}
}