:root{
  --bg:#14161a;
  --panel:#1c1f24;
  --panel2:#23262b;
  --line:#3a3f45;
  --accent:#8d969d;
  --accent-dark:#5b6167;
  --txt:#e2e5e9;
  --muted:#8a929c;
  --bubble-mine:#454b52;
  --bubble-theirs:#23262b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;display:flex;flex-direction:column}

.flash{padding:10px 16px;font-size:13px;text-align:center}
.flash.ok{background:#1e3a2a;color:#8fe0ab}
.flash.error{background:#3a1e1e;color:#e08f8f}

/* ---- вход / регистрация ---- */
.loginwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.loginbox{width:100%;max-width:340px;background:var(--panel);border-radius:14px;padding:28px 24px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.logintitle{font-size:19px;font-weight:bold;text-align:center;margin-bottom:8px}
.loginsub{color:var(--muted);font-size:12px;text-align:center;margin:0 0 20px;line-height:1.5}
.loginbox input{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:13px;border-radius:10px;font-size:14px;width:100%}
.loginbox input:focus{outline:none;border-color:var(--accent)}
.loginbox form{display:flex;flex-direction:column;gap:12px}
.loginbox button,.gatebtn{background:linear-gradient(var(--accent),var(--accent-dark));border:none;color:#fff;padding:13px;border-radius:10px;font-weight:bold;font-size:14px;cursor:pointer;margin-top:4px;text-decoration:none;display:block;text-align:center}
.gatebtn.secondary{background:none;border:1px solid var(--line);color:var(--txt)}
.gate-actions{display:flex;flex-direction:column;gap:12px}
.gate-note{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:16px;font-size:13px;line-height:1.6;color:var(--muted);text-align:center;margin-bottom:14px}
.gate-note b{color:var(--txt)}
.backlink{display:block;text-align:center;margin-top:16px;color:var(--muted);font-size:13px;text-decoration:none}
.backlink:hover{color:var(--accent)}

/* ---- шапка ---- */
.topbar{display:flex;align-items:center;gap:14px;padding:14px 56px 14px 16px;background:var(--panel);position:sticky;top:0;z-index:5;box-shadow:0 1px 0 #0a0b0d}
.topbar-title{font-size:17px;font-weight:bold;flex:1}
.topbar-sub{font-weight:normal;color:var(--muted);font-size:12px}
.topbar-icon{color:var(--txt);text-decoration:none;font-size:19px;width:28px;text-align:center;background:none;border:none;cursor:pointer}

/* ---- вкладки ---- */
.tabs{display:flex;background:var(--panel);border-bottom:1px solid #0a0b0d}
.tab{flex:1;background:none;border:none;color:var(--muted);padding:12px;font-size:13px;font-weight:bold;cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--txt);border-bottom-color:var(--accent)}
.tabpanel{display:none}
.tabpanel.active{display:block}

/* ---- список чатов ---- */
.chatlist{display:flex;flex-direction:column}
.chatitem{display:flex;gap:12px;align-items:center;padding:12px 16px;color:var(--txt);text-decoration:none;border-bottom:1px solid var(--panel);background:none;border:none;text-align:left;width:100%;cursor:pointer;font:inherit}
.chatitem:active,.chatitem-btn:hover{background:var(--panel)}
.chatitem-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(var(--accent),var(--accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:18px;flex-shrink:0}
.chatitem-body{flex:1;min-width:0}
.chatitem-top{display:flex;justify-content:space-between;gap:8px}
.chatitem-name{font-weight:bold;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatitem-time{color:var(--muted);font-size:12px;flex-shrink:0}
.chatitem-bottom{display:flex;justify-content:space-between;gap:8px;margin-top:2px}
.chatitem-preview{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatitem-badge{background:var(--accent);color:#14161a;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:bold;flex-shrink:0}
.empty{color:var(--muted);text-align:center;padding:40px 20px;font-size:13px}

/* ---- лента сообщений ---- */
.msglist{flex:1;padding:12px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.msgrow{display:flex;flex-direction:column;max-width:78%}
.msgrow.mine{align-self:flex-end;align-items:flex-end}
.msgrow.theirs{align-self:flex-start;align-items:flex-start}
.msg-sender{font-size:11px;color:var(--accent);font-weight:bold;margin-bottom:2px;padding:0 4px}
.bubble{background:var(--bubble-theirs);border-radius:14px;padding:8px 12px;position:relative}
.msgrow.mine .bubble{background:var(--bubble-mine);border-bottom-right-radius:4px}
.msgrow.theirs .bubble{border-bottom-left-radius:4px}
.msg-text{white-space:pre-wrap;word-break:break-word;line-height:1.4}
.msg-time{font-size:10px;color:var(--muted);text-align:right;margin-top:3px}
.msg-img{max-width:220px;max-height:280px;border-radius:8px;display:block;margin-bottom:4px}
.msg-file{display:flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;font-size:13px;margin-bottom:4px}
.msg-audio{width:220px;margin-bottom:4px}

/* ---- панель отправки ---- */
.sendbar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--panel);position:sticky;bottom:0}
.sendbar input[name=body]{flex:1;background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:11px 14px;border-radius:20px;font-size:14px}
.sendbar input[name=body]:focus{outline:none;border-color:var(--accent)}
.attachbtn{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 6px}
.sendbtn{background:linear-gradient(var(--accent),var(--accent-dark));border:none;color:#fff;width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer;flex-shrink:0}
.voiceindicator{background:#3a1e1e;color:#e08f8f;padding:10px 16px;text-align:center;font-size:13px;display:flex;gap:12px;justify-content:center;align-items:center}
.voiceindicator button{background:none;border:1px solid #e08f8f;color:#e08f8f;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px}

/* ---- поиск ---- */
.searchbar{padding:10px 16px;background:var(--panel)}
.searchbar input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:11px 14px;border-radius:10px;font-size:14px}
.searchbar input:focus{outline:none;border-color:var(--accent)}

/* ---- бургер-меню ---- */
.burgerbtn{position:fixed;top:12px;right:14px;z-index:20;background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-size:18px;width:38px;height:38px;border-radius:50%;cursor:pointer}
.drawerbackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:29}
.drawerbackdrop.show{display:block}
.sidedrawer{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;background:var(--panel);border-right:1px solid var(--line);z-index:30;transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,.5)}
.sidedrawer.open{transform:translateX(0)}
.sidedrawer-head{display:flex;align-items:center;gap:12px;padding:20px 16px;border-bottom:1px solid var(--line);position:relative}
.sidedrawer-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(var(--accent),var(--accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:17px;flex-shrink:0}
.sidedrawer-name{font-weight:bold;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidedrawer-head button{position:absolute;right:12px;top:18px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.sidedrawer-head button:hover{color:var(--txt)}
.sidedrawer-nav{display:flex;flex-direction:column;padding:10px}
.sidedrawer-nav hr{border:none;border-top:1px solid var(--line);margin:8px 4px}
.sidedrawer-nav a{display:flex;align-items:center;gap:14px;padding:13px 12px;color:var(--txt);text-decoration:none;font-size:14px;font-weight:bold;border-radius:8px}
.sidedrawer-nav a i{font-style:normal;font-size:18px;width:22px;text-align:center}
.sidedrawer-nav a:hover{background:var(--panel2)}

/* ---- профиль ---- */
.profilewrap{display:flex;flex-direction:column;align-items:center;padding:36px 20px;text-align:center}
.profile-avatar-big{width:88px;height:88px;border-radius:50%;background:linear-gradient(var(--accent),var(--accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:34px;margin-bottom:14px}
.profile-name{font-size:20px;font-weight:bold}
.profile-sub{color:var(--muted);font-size:13px;margin-top:4px}
.profile-stats{display:flex;gap:32px;margin:24px 0}
.profile-stat{display:flex;flex-direction:column;align-items:center}
.profile-stat b{font-size:20px}
.profile-stat span{color:var(--muted);font-size:12px;margin-top:2px}
.profile-note{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:13px;color:var(--muted);line-height:1.6;max-width:340px}

/* ---- создание группы ---- */
.groupform{display:flex;flex-direction:column}
.groupname-input{margin:14px 16px;background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:12px 14px;border-radius:10px;font-size:15px}
.groupname-input:focus{outline:none;border-color:var(--accent)}
.memberrow{cursor:pointer}
.member-checkbox{width:18px;height:18px;margin-right:2px;accent-color:var(--accent)}

/* ---- настройки ---- */
.settingswrap{display:flex;flex-direction:column;padding:20px 16px;gap:6px}
.settings-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--panel2)}
.settings-label{color:var(--muted);font-size:13px}
.settings-value{font-weight:bold}
.settings-note{color:var(--muted);font-size:12px;line-height:1.6;margin-top:8px}

/* ---- статус, теги, блокировка ---- */
.forum-tag{background:var(--panel2);color:var(--muted);font-size:10px;padding:1px 6px;border-radius:4px;font-weight:bold}
.topbar-title-block{flex:1;min-width:0}
.topbar-status{color:var(--muted);font-size:11px;margin-top:1px}
.chatmenu{position:absolute;top:52px;right:14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;z-index:15;overflow:hidden}
.chatmenu form{margin:0}
.chatmenu button{width:100%;background:none;border:none;color:var(--txt);padding:12px 20px;text-align:left;cursor:pointer;font-size:13px}
.chatmenu button:hover{background:var(--panel)}
.blocked-banner{background:#3a1e1e;color:#e08f8f;padding:10px 16px;text-align:center;font-size:13px}
.msg-status{font-size:11px;color:var(--muted)}
.msg-status.read{color:#7fc4ff}
.profile-status{color:var(--muted);font-size:12px;margin-top:4px}
.profile-bio-form{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px;margin:18px 0}
.profile-bio-form textarea{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:10px;border-radius:8px;font-size:13px;min-height:70px;resize:vertical;font-family:inherit}
.profile-bio-form textarea:focus{outline:none;border-color:var(--accent)}

/* ---- меню настроек ---- */
.settingsmenu{display:flex;flex-direction:column;padding:8px 0;border-bottom:8px solid var(--bg)}
.settingsmenu-item{display:flex;align-items:center;gap:14px;padding:14px 16px;color:var(--txt);text-decoration:none;font-size:14px;font-weight:bold}
.settingsmenu-item:active,.settingsmenu-item:hover{background:var(--panel2)}
.settingsmenu-item i{font-style:normal;font-size:18px;width:22px;text-align:center}
.settingsmenu-item span{flex:1}
.settingsmenu-item b{color:var(--muted);font-weight:normal}

.settings-h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px}
.settings-form{display:flex;flex-direction:column;gap:12px}
.settings-form select{background:var(--bg);border:1px solid var(--line);color:var(--txt);padding:11px 14px;border-radius:10px;font-size:14px}
.settings-form select:focus{outline:none;border-color:var(--accent)}

.switch-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;font-size:14px}
.switch-row input[type=checkbox]{width:44px;height:24px;accent-color:var(--accent)}

.colorpicker{display:flex;gap:16px;flex-wrap:wrap}
.colorswatch-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--muted)}
.colorswatch-wrap input{margin:0}
.colorswatch{width:36px;height:36px;border-radius:50%;display:block;border:2px solid var(--line)}
.colorswatch-wrap input:checked ~ .colorswatch{border-color:var(--txt)}