:root { --surface:#11101a; --panel:#191823; --purple:#b88aff; --green:#64c985; }
.room-row { display:flex; align-items:center; min-width:0; border-radius:12px; }
.room-row:has(.room.active) { background:#41345f; }
.room-row .room { flex:1; min-width:0; border-radius:12px; padding:11px 12px; font-size:14px; }
.room-row .room.active { background:transparent; }
.room-unread,.tab-count { display:inline-grid; place-items:center; flex:none; min-width:22px; height:22px; padding:0 5px; border-radius:99px; font-size:12px; font-weight:700; color:#101118; }
.room-row.channel .room-unread,.tab-count.channel { background:var(--green); }
.room-row.private .room-unread,.tab-count.private { background:var(--purple); }
.room-close { flex:none; padding:0; width:32px; height:32px; border:0; background:transparent; color:#aaa7bb; font-size:22px; line-height:1; }
.room-close:hover { color:#fff; background:#514365; }
.panel-close { margin-left:auto; flex:none; width:38px; height:38px; border:0; background:transparent; color:#c8bbdf; font-size:26px; padding:0; line-height:1; }
.conversation-title { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; align-items:center; }
.conversation-title h2 { grid-column:2; grid-row:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-icon { grid-column:1; grid-row:1 / 3; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#a878e6; color:#fff; font-size:21px; font-weight:700; }
.conversation-subtitle { grid-column:2; grid-row:2; color:#a5a2b5; font-size:12px; }
.conversation-head { height:64px; }
.conversation { position:relative; }
.shell { grid-template-columns:220px minmax(0,1fr) 220px; }
.shell.private-view,.shell.users-collapsed { grid-template-columns:220px minmax(0,1fr); }
.shell.users-collapsed .users-panel { display:none; }
.topbar { border-bottom:0; justify-content:flex-end; }
.sidebar { border-right:0; }
.users-panel { border-left:0; }
.conversation-head { border-bottom:0; }
.conversation-head #users-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; background:transparent; color:var(--purple); padding:7px; font-size:15px; }
.conversation-head #users-toggle:hover { background:#2a2435; }
.shell.private-view .conversation-head #users-toggle,.shell.server-view .conversation-head #users-toggle { display:none; }
#head-user-count { color:#d9c7f8; font-size:13px; font-weight:700; }
.users-panel h2 { justify-content:flex-end; }
.users-panel #user-count { display:none; }
.sidebar .panel-close { display:none; }
.messages { scrollbar-width:none; }
.messages::-webkit-scrollbar { display:none; }
.remember-line { display:flex; align-items:center; gap:10px; margin:0; font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; }
.remember-line input { width:18px; height:18px; min-width:18px; margin:0; padding:0; accent-color:var(--accent); }
.line:not(.event) { display:flex; align-items:flex-start; gap:10px; padding:4px 0; line-height:1.4; }
.avatar { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; background:#438a5c; color:#fff; font-weight:800; }
.line.self .avatar { background:#a574e9; }
.message-body { flex:1; min-width:0; }
.message-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; }
.line .author { color:var(--green); margin:0; }
.line.self .author { color:var(--purple); }
.line .time { color:#807c92; margin:0; font-size:12px; }
.message-text { display:block; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:3px; }
.line.event { padding:3px 0; }
.line.event .message-text { display:inline; margin:0 0 0 7px; }
.composer { position:relative; align-items:center; border:1px solid #463758; border-radius:18px; margin:12px; padding:6px; background:#14131d; }
.composer input { border:0; background:transparent; padding:9px 6px; height:42px; }
.composer input:focus { outline:0; }
#composer-plus,#emoji-toggle { border:0; flex:none; background:transparent; color:var(--purple); width:40px; height:40px; padding:0; font-size:26px; }
#composer-plus:hover,#emoji-toggle:hover { background:#292337; }
#emoji-toggle { font-size:25px; }
#send-button { flex:none; display:grid; place-items:center; padding:0; width:37px; height:37px; border-radius:50%; font-size:23px; line-height:1; }
#send-button[hidden],#emoji-picker[hidden] { display:none; }
#emoji-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; position:absolute; right:12px; bottom:84px; z-index:4; width:225px; padding:8px; background:#24202f; border:1px solid #594874; border-radius:16px; box-shadow:0 12px 30px #0009; }
#emoji-picker button { padding:5px; font-size:23px; border:0; background:transparent; }
#emoji-picker button:hover { background:#423251; }
#bottom-tabs,#ui-backdrop,#rooms-toggle { display:none; }
.shell.private-view .users-panel,.shell.private-view #users-toggle { display:none; }

@media(max-width:760px) {
  .shell,.shell.server-view { background:var(--surface); grid-template-columns:minmax(0,1fr); grid-template-rows:42px minmax(0,1fr) 62px; width:100%; height:100dvh; max-width:none; overflow:hidden; }
  .shell.private-view,.shell.users-collapsed { grid-template-columns:minmax(0,1fr); }
  .topbar { grid-column:1; grid-row:1; padding:0 13px; gap:8px; background:#100e17; }
  .topbar strong { font-size:14px; }
  .mark.small { width:26px; height:26px; font-size:14px; }
  .top-actions { gap:8px; font-size:11px; }
  #status { max-width:102px; }
  .top-actions #leave { padding:6px 8px; }
  .top-actions #admin-link::after { font-size:11px; }
  .conversation { grid-column:1; grid-row:2; background:#0f0d17; }
  .conversation-head { flex:none; height:80px; padding:8px 16px; border-bottom:0; }
  .conversation-title { column-gap:12px; }
  .conversation-title h2 { font-size:23px; }
  .conversation-icon { width:46px; height:46px; border-radius:14px; font-size:27px; }
  .conversation-subtitle { font-size:13px; }
  #rooms-toggle { display:none; }
  #users-toggle { display:grid; place-items:center; flex:none; border:0; background:transparent; color:var(--purple); font-size:25px; width:44px; height:44px; }
  .messages { padding:10px 16px; gap:12px; }
  .line:not(.event) { gap:10px; padding:4px 0; }
  .avatar { width:36px; height:36px; }
  .message-text { font-size:16px; }
  .composer { flex:none; margin:8px 12px 10px; padding:5px; border-radius:18px; }
  .composer input { height:43px; font-size:16px; }
  .composer button { min-width:0; height:40px; }
  #send-button { height:37px; }
  .sidebar,.shell.server-view .sidebar,.users-panel { display:block; position:fixed; top:42px; bottom:62px; width:100%; max-width:none; z-index:12; padding:16px; background:#171720; overflow-y:auto; visibility:hidden; box-shadow:none; }
  .sidebar { left:0; right:auto; border:0; transform:translateX(-105%); }
  .sidebar.visible { visibility:visible; transform:translateX(0); }
  .shell.server-view .sidebar.visible { display:block; visibility:visible; transform:translateX(0); }
  .users-panel { right:0; left:auto; width:min(86vw,360px); border-left:1px solid #393040; transform:translateX(105%); }
  .users-panel.visible { visibility:visible; transform:translateX(0); }
  .shell.users-collapsed .users-panel.visible { display:block; }
  .sidebar h2,.users-panel h2 { font-size:14px; margin:8px 3px 18px; }
  .sidebar .side-title,.users-panel h2 { display:flex; align-items:center; }
  .sidebar .panel-close { display:block; }
  .sidebar .side-title h2 { margin-right:auto; }
  .room-row { min-height:48px; margin-bottom:5px; }
  .room-row .room { font-size:16px; padding:12px 14px; }
  .room-close { width:42px; height:42px; }
  #ui-backdrop:not([hidden]) { display:block; position:fixed; inset:42px 0 62px; z-index:11; border:0; border-radius:0; background:#0009; }
  .shell.server-view .users-panel,.shell.server-view #users-toggle,.shell.private-view .users-panel,.shell.private-view #users-toggle { display:none; }
  #bottom-tabs { display:grid; grid-column:1; grid-row:3; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; border-top:1px solid #282335; background:#0d0b14; }
  #bottom-tabs button { position:relative; display:grid; justify-items:center; align-content:center; gap:1px; border:0; background:transparent; color:#a6a2b5; font-size:10px; padding:2px; border-radius:0; }
  #bottom-tabs button.selected { color:var(--purple); }
  #bottom-tabs .tab-symbol { font-size:26px; line-height:27px; }
  .tab-badges { position:absolute; top:2px; right:calc(50% - 41px); display:flex; gap:2px; }
  .tab-count { min-width:17px; height:17px; font-size:10px; padding:0 3px; }
  .tab-count[hidden] { display:none; }
  #emoji-picker { bottom:120px; }
}