:root {
  --bg-primary: #050505;       /* Starless Black */
  --bg-secondary: #1a2a3a;     /* Eclipse Blue */
  --accent-main: #3de0c4;      /* Phantom Cyan */
  --accent-alt: #00a89d;       /* Spectral Teal */
  --bg-depth: #2f1b3a;         /* Grave Violet */
  --text-primary: #ffffff;     /* Frost White */
  --text-secondary: #b6b6b6;  /* Ash Grey */
  --text-muted: #888888;       /* Shadow Grey */
  --alert: #e85d3f;            /* Rift Ember */
  --green: #23a55a;
  --yellow: #f0b232;
  --line: rgba(61, 224, 196, 0.14);
  --line-soft: rgba(182, 182, 182, 0.12);
  --border: rgba(61, 224, 196, 0.25);
  --border-strong: rgba(61, 224, 196, 0.5);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-round: 2147483647px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --surface: rgba(26, 42, 58, 0.76);
  --surface-strong: #1a2a3a;
  --ink-0: var(--bg-primary);
  --ink-1: var(--bg-primary);
  --ink-2: var(--bg-primary);
  --ink-3: var(--bg-depth);
  --ink-4: rgba(61, 224, 196, 0.11);
  --muted: var(--text-muted);
  --soft: var(--text-secondary);
  --text: var(--text-primary);
  --violet: var(--accent-main);
  --violet-bright: var(--accent-main);
  --cyan: var(--accent-alt);
  --rose: var(--alert);
  --amber: var(--alert);
  color-scheme: dark;
}

* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
*:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
html { min-height: 100%; background: var(--bg-primary); }
body { min-height: 100%; margin: 0; background: radial-gradient(circle at 78% 4%, rgba(47, 27, 58, .72), transparent 34%), var(--bg-primary); color: var(--text-primary); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 50%; z-index: 200; transform: translate(-50%, -150%); border-radius: 8px; background: var(--accent-main); color: var(--bg-primary); padding: 10px 15px; font-size: 13px; font-weight: 800; transition: transform .15s ease; }
.skip-link:focus { transform: translate(-50%, 0); }

.site-header { position: sticky; top: 0; z-index: 40; display: flex; min-height: 48px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--bg-primary); padding: 0 16px; }
.site-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; letter-spacing: -.04em; }
.wolf-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); font-size: 15px; box-shadow: 0 8px 24px rgba(61, 224, 196, .22); }
.site-logo { display: block; width: 36px; height: 36px; border-radius: 11px; object-fit: cover; }
.site-header nav { display: flex; align-items: center; gap: 6px; }
.site-header nav > a, .site-header nav button { display: inline-flex; min-height: 38px; align-items: center; cursor: pointer; border-radius: 9px; background: transparent; color: var(--text-secondary); padding: 0 12px; font-size: 12px; font-weight: 700; }
.site-header nav > a:hover, .site-header nav button:hover, .site-header nav > a.active { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.site-header nav form { margin: 0; }
.site-header nav .nav-cta { background: var(--accent-main); color: var(--bg-primary); }
.nav-messages, .nav-friends { position: relative; gap: 6px; }
.nav-messages [data-direct-nav-badge], .nav-friends [data-friend-nav-badge] { display: inline-grid; min-width: 17px; height: 17px; place-items: center; border-radius: 999px; background: var(--alert); color: var(--text-primary); padding: 0 5px; font-size: 7px; font-style: normal; font-weight: 900; }
.nav-messages [data-direct-nav-badge][hidden], .nav-friends [data-friend-nav-badge][hidden] { display: none; }

.flash-stack { position: fixed; top: 82px; right: 18px; z-index: 100; display: grid; width: min(390px, calc(100vw - 36px)); gap: 8px; }
.flash { border: 1px solid rgba(61, 224, 196, .3); border-radius: 8px; background: var(--bg-secondary); padding: 12px 15px; color: var(--text-primary); font-size: 14px; font-weight: 500; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); }
.flash.error { border-color: rgba(232, 93, 63, .55); }
.flash.success { border-color: rgba(61, 224, 196, .45); }

.dashboard-page main { width: min(1320px, calc(100% - 36px)); margin: 0 auto; padding: 46px 0 80px; }
.dashboard-shell { display: grid; gap: 22px; }
.dashboard-welcome { display: flex; align-items: end; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); padding: 8px 2px 28px; }
.dashboard-welcome h1 { max-width: 820px; margin: 0; color: var(--text-primary); font-size: clamp(32px, 5vw, 54px); line-height: 1.04; letter-spacing: -.052em; }
.dashboard-welcome p { margin: 12px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.dashboard-welcome .primary-button { flex: 0 0 auto; gap: 8px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(26, 42, 58, .46); }
.dashboard-stats article { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.dashboard-stats article + article { border-left: 1px solid var(--line); }
.dashboard-stats span { color: var(--text-muted); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.dashboard-stats strong { color: var(--text-primary); font-size: 24px; letter-spacing: -.04em; }
.dashboard-stats .status-ready { display: flex; align-items: center; gap: 8px; color: var(--accent-main); font-size: 14px; }
.dashboard-stats .mention-total { color: var(--alert); }
.status-ready i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-main); box-shadow: 0 0 12px rgba(61, 224, 196, .7); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .8fr); align-items: start; gap: 18px; }
.dashboard-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(26, 42, 58, .82), rgba(5, 5, 5, .92)); box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 20px 70px rgba(0, 0, 0, .18); }
.panel-heading { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 18px 21px; }
.panel-heading .kicker { margin-bottom: 5px; }
.panel-heading h2, .account-panel h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.panel-heading > a { color: var(--accent-main); font-size: 10px; font-weight: 800; }
.panel-heading > a:hover { color: var(--text-primary); }
.dashboard-server-list { display: grid; padding: 7px; }
.dashboard-server { display: flex; min-width: 0; align-items: center; gap: 14px; border-radius: 12px; padding: 13px 14px; }
.dashboard-server:hover { background: rgba(61, 224, 196, .075); }
.dashboard-server .community-icon { width: 50px; height: 50px; border-radius: 15px; }
.dashboard-server-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.dashboard-server-copy strong { font-size: 14px; }
.dashboard-server-copy small { color: var(--accent-main); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.dashboard-server-copy > span { overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.panel-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.panel-actions a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; padding: 16px 19px; }
.panel-actions a + a { border-left: 1px solid var(--line); }
.panel-actions a:hover { background: rgba(0, 168, 157, .1); }
.panel-actions a > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(61, 224, 196, .12); color: var(--accent-main); font-size: 17px; }
.panel-actions strong { align-self: end; font-size: 11px; }
.panel-actions small { color: var(--text-muted); font-size: 8px; }
.dashboard-side { display: grid; gap: 18px; }
.activity-list { display: grid; padding: 7px; }
.activity-list > a { display: flex; min-width: 0; align-items: center; gap: 10px; border-radius: 8px; padding: 9px 10px; }
.activity-list > a:hover { background: rgba(61, 224, 196, .07); }
.activity-list > a > span:last-child { display: grid; min-width: 0; flex: 1; gap: 2px; }
.activity-list strong, .activity-list small, .activity-list em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-list strong { font-size: 10px; }
.activity-list small { color: var(--text-secondary); font-size: 9px; }
.activity-list em { color: var(--text-muted); font-size: 7px; font-style: normal; }
.dashboard-empty { display: flex; align-items: center; gap: 12px; padding: 24px; color: var(--text-muted); }
.dashboard-empty > span { color: var(--accent-main); font-size: 25px; }
.dashboard-empty > div { display: grid; gap: 3px; }
.dashboard-empty strong { color: var(--text-primary); font-size: 11px; }
.dashboard-empty small { font-size: 9px; }
.dashboard-empty.compact { padding: 28px 16px; }
.account-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 18px; }
.account-avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 12px; }
.account-panel .kicker { margin-bottom: 3px; }
.account-panel p { margin: 2px 0 0; color: var(--text-muted); font-size: 9px; }
.account-panel > a { border: 1px solid var(--line); border-radius: 9px; color: var(--accent-main); padding: 8px 10px; font-size: 9px; font-weight: 800; }
.account-panel > a:hover { background: var(--accent-main); color: var(--bg-primary); }

.discover-page main { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: clamp(48px, 8vw, 92px) 0 80px; }
.discover-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.kicker { display: block; margin-bottom: 10px; color: var(--violet-bright); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.discover-heading h1, .form-card h1 { margin: 0; font-size: clamp(34px, 6vw, 62px); line-height: 1; letter-spacing: -.055em; }
.discover-heading p { max-width: 610px; margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.primary-button, .full-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; background: linear-gradient(135deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); padding: 2px 16px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 168, 157, .2); }
.primary-button:hover, .full-button:hover { filter: brightness(1.1); }
.community-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.community-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(26, 42, 58, .92), rgba(5, 5, 5, .96)); box-shadow: inset 0 1px rgba(255, 255, 255, .03); }
.community-card-main { display: flex; min-height: 138px; align-items: center; gap: 16px; padding: 22px; }
.community-card-main:hover { background: rgba(255, 255, 255, .025); }
.community-icon { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 18px; color: white; font-size: 14px; font-weight: 900; box-shadow: inset 0 1px rgba(255, 255, 255, .2); }
.community-copy { display: grid; min-width: 0; flex: 1; gap: 5px; }
.community-copy strong { font-size: 17px; letter-spacing: -.02em; }
.community-copy > span:last-child { overflow: hidden; color: var(--text-muted); font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.community-meta { color: var(--accent-main); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.card-arrow { color: var(--accent-main); font-size: 20px; }
.community-channel-preview { display: flex; min-height: 44px; align-items: center; gap: 6px; overflow-x: auto; border-top: 1px solid var(--line); padding: 8px 14px; }
.community-channel-preview a, .community-channel-preview span { flex: 0 0 auto; border-radius: 7px; background: rgba(61, 224, 196, .055); color: var(--text-muted); padding: 6px 8px; font-size: 9px; }
.community-channel-preview a:hover { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.discover-search { display: flex; gap: 8px; margin: 0 0 10px; }
.discover-search input[type="search"] { flex: 1; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-secondary); color: var(--text); padding: 0 14px; outline: none; }
.discover-search input[type="search"]:focus { border-color: rgba(61, 224, 196, .5); }
.discover-search button { min-height: 42px; border-radius: 10px; background: var(--accent-main); border: 0; color: var(--accent-contrast, #00110d); padding: 0 18px; font-weight: 700; cursor: pointer; }
.discover-clear { align-self: center; color: var(--text-muted); font-size: 12px; }
.discover-count { margin: 0 0 16px; color: var(--text-muted); font-size: 12px; }
.community-card-action { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding: 10px 14px; }
.card-btn { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; border-radius: 8px; padding: 0 14px; font-size: 12px; font-weight: 700; text-decoration: none; }
a.card-btn { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
a.card-btn:hover { background: rgba(61, 224, 196, .18); }
button.card-btn.join { border: 0; background: var(--accent-main); color: var(--accent-contrast, #00110d); cursor: pointer; }
button.card-btn.join:hover { filter: brightness(1.1); }
.discover-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 22px 0 0; color: var(--text-muted); font-size: 13px; }
.discover-pagination a { color: var(--accent-main); text-decoration: none; }
.discover-pagination a:hover { text-decoration: underline; }
.empty-panel { grid-column: 1 / -1; display: grid; justify-items: center; border: 1px dashed rgba(255, 255, 255, .13); border-radius: 18px; padding: 60px 20px; text-align: center; }
.empty-panel h2 { margin: 14px 0 7px; }
.empty-panel p { margin: 0; color: var(--muted); }
.empty-mark { color: var(--violet-bright); font-size: 34px; }

.form-page { display: grid; min-height: calc(100dvh - 48px); place-items: center; padding: 40px 18px 70px; }
.form-card { display: grid; width: min(620px, 100%); gap: 17px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(26, 42, 58, .96), rgba(5, 5, 5, .98)); padding: clamp(24px, 5vw, 42px); box-shadow: 0 24px 80px rgba(0, 0, 0, .3); }
.form-card.compact-card { width: min(480px, 100%); }
.form-card h1 { font-size: clamp(30px, 5vw, 44px); }
.form-card > p { margin: -4px 0 3px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.form-field { display: grid; gap: 7px; }
.form-field > span { color: var(--text-secondary); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--bg-primary); padding: 10px 12px; color: var(--text); font-size: 14px; }
.form-field input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-main); }
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: rgba(61, 224, 196, .75); box-shadow: 0 0 0 3px rgba(61, 224, 196, .1); }
.form-field small { color: var(--text-muted); font-size: 9px; line-height: 1.5; }
.form-field small ul { margin: 0; padding-left: 18px; }
.field-error, .form-errors { color: var(--alert); font-size: 10px; font-weight: 700; }
.form-errors ul { margin: 0; padding-left: 18px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.form-actions a, .form-actions button { display: inline-flex; min-height: 41px; align-items: center; justify-content: center; cursor: pointer; border-radius: 9px; background: rgba(61, 224, 196, .1); color: var(--text-secondary); padding: 0 15px; font-size: 11px; font-weight: 800; }
.form-actions button { background: var(--accent-main); color: var(--bg-primary); }
.full-button { width: 100%; border: 0; }
.form-footnote { margin: 0 !important; text-align: center; }
.form-footnote a { color: var(--accent-main); font-weight: 800; }

.chat-page { overflow: hidden; }
.chat-app { display: grid; grid-template-columns: 72px 240px minmax(0, 1fr) 240px; height: 100dvh; background: var(--bg-primary); }
body.server-channel-page .chat-app { grid-template-columns: 72px 240px minmax(0, 1fr); }
body.server-channel-page .member-sidebar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(280px, 88vw); height: 100dvh; transform: translateX(105%); border-left: 1px solid var(--line); box-shadow: -16px 0 45px rgba(0, 0, 0, .35); transition: transform .18s ease; }
body.server-channel-page .member-sidebar.open { transform: translateX(0); }
body.server-channel-page .member-sidebar > header button { display: block; }
body.server-channel-page .mobile-scrim.open { position: fixed; inset: 0; z-index: 110; display: block; cursor: pointer; background: rgba(0, 0, 0, .58); }
.server-rail { z-index: 30; display: flex; min-height: 0; flex-direction: column; align-items: center; gap: 8px; overflow-y: auto; background: var(--bg-primary); padding: 12px 0; scrollbar-width: none; }
.server-rail { scrollbar-width: none; }
.server-rail::-webkit-scrollbar { display: none; }
.server-orb { overflow: hidden; }
.brand-server, .server-orb { position: relative; display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--bg-depth); color: var(--text-primary); font-size: 12px; font-weight: 900; transition: border-radius .15s ease, filter .15s ease; }
.brand-server { background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); font-size: 16px; box-shadow: 0 8px 26px rgba(61, 224, 196, .22); }
.brand-logo { width: 48px; height: 48px; border-radius: 16px; object-fit: cover; }
.server-orb::before { position: absolute; left: -12px; width: 4px; height: 0; border-radius: 0 3px 3px 0; background: #fff; content: ""; transition: height .15s ease; }
.server-orb:hover, .server-orb.active { border-radius: 16px; filter: brightness(1.12); }
.server-orb:hover::before { height: 8px; }
.server-orb.active::before { height: 34px; }
.server-orb.utility { background: var(--ink-3); color: var(--cyan); font-size: 21px; }
.server-orb.utility:hover { background: var(--accent-alt); color: var(--bg-primary); }
.direct-orb > i, .friends-orb > i { position: absolute; top: -4px; right: -5px; display: grid; min-width: 17px; height: 17px; place-items: center; border: 2px solid var(--bg-primary); border-radius: 999px; background: var(--alert); color: var(--text-primary); padding: 0 4px; font-size: 7px; font-style: normal; line-height: 1; }
.direct-orb > i[hidden], .friends-orb > i[hidden] { display: none; }
.rail-divider { width: 30px; height: 1px; background: var(--line); }

.channel-sidebar { position: relative; z-index: 20; display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--bg-secondary); }
.server-title { position: relative; display: flex; min-height: 48px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 16px; }
.server-title-main { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; text-align: left; background: transparent; border: 0; cursor: pointer; color: inherit; padding: 0; }
.server-title-main strong { min-width: 0; flex: 1; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.server-title-chevron { flex: 0 0 auto; font-size: 10px; color: var(--text-muted); }
.server-dropdown { position: absolute; top: calc(100% + 6px); left: 8px; right: 8px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-secondary); padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.36); z-index: 40; }
.server-dropdown[hidden] { display: none !important; }
.server-dropdown-item { display: block; border-radius: 4px; padding: 8px 10px; font-size: 12px; color: var(--text-secondary); }
.server-dropdown-item:hover { background: var(--surface); color: var(--text-primary); }
button.server-dropdown-item { width: 100%; text-align: left; background: transparent; border: 0; font-size: 12px; font-family: inherit; font-weight: inherit; cursor: pointer; }
.server-title div { display: grid; gap: 4px; }
.server-title div span { color: var(--violet-bright); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.server-title div strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.server-title > a { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--muted); }
.server-title > a:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.channel-list { min-height: 0; flex: 1; overflow-y: auto; padding: 12px 8px 20px 8px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.channel-list section + section { margin-top: 16px; }
.category-toggle { display: flex; align-items: center; gap: 4px; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; padding: 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.category-toggle:hover { color: var(--text-primary); }
.category-chevron { transition: transform .12s ease; font-size: 10px; }
.channel-category.collapsed .category-chevron { transform: rotate(-90deg); }
.channel-category.collapsed .channel-item, .channel-category.collapsed .voice-presence, .channel-category.collapsed .voice-presence-empty { display: none; }
.channel-list section > header { display: flex; align-items: center; gap: 4px; padding: 0 7px 5px; color: var(--text-muted); }
.channel-list section > header strong { flex: 1; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.channel-list section > header a { display: grid; width: 20px; height: 20px; place-items: center; font-size: 16px; }
.channel-link { position: relative; display: flex; height: 34px; align-items: center; gap: 8px; border-radius: 4px; color: var(--text-secondary); padding: 0 8px; font-size: 12px; font-weight: 650; }
.channel-link > span:first-child { color: var(--text-muted); font-size: 18px; font-weight: 400; }
.channel-link > b { min-width: 0; overflow: hidden; flex: 1; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.channel-link:hover { background: rgba(61, 224, 196, .07); color: var(--text-primary); }
.channel-link.active { background: var(--surface); color: var(--text-primary); }
.channel-link.active::before { position: absolute; left: -8px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent-main); content: ""; }
.channel-link.unread::before { position: absolute; left: -8px; top: 50%; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; background: #fff; content: ""; }
.channel-link.unread > b { color: var(--text-primary); font-weight: 850; }
.channel-badges { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.channel-badges i, .channel-badges em { min-width: 18px; border-radius: 999px; padding: 3px 6px; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.2; text-align: center; }
.channel-badges i { background: #f23f43; color: #fff; }
.channel-badges em { background: rgba(61, 224, 196, .14); color: var(--accent-main); }
.channel-item { position: relative; display: flex; align-items: center; }
.channel-item .channel-link { min-width: 0; flex: 1; padding-right: 31px; }
.channel-edit-link { position: absolute; right: 5px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; color: var(--text-muted); font-size: 10px; opacity: 0; }
.channel-item:hover .channel-edit-link, .channel-edit-link:focus, .channel-item:has(.channel-link.active) .channel-edit-link { opacity: 1; }
.channel-edit-link:hover { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.channel-header-edit { display: inline-grid; margin-left: 6px; width: 20px; height: 20px; place-items: center; border-radius: 5px; color: var(--text-muted); font-size: 12px; text-decoration: none; vertical-align: middle; }
.channel-header-edit:hover { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
  .voice-presence { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px 32px; }
  .voice-presence-pill { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
  .voice-presence-pill:hover { background: var(--surface); color: var(--text-primary); }
  .voice-presence-pill .avatar { width: 20px; height: 20px; border-radius: 6px; font-size: 6px; }
  .voice-presence-pill em { min-width: 0; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
  .voice-presence-empty { padding: 2px 4px 6px 4px; font-size: 9px; color: var(--text-muted); }
.account-dock { position: relative; display: flex; min-height: 52px; align-items: center; gap: 8px; margin: 0 8px 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-primary); padding: 6px 8px; }
.account-dock > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.account-dock strong, .account-dock small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dock strong { font-size: 14px; font-weight: 600; }
.account-dock .avatar { width: 32px; height: 32px; }
.account-dock small { color: var(--muted); font-size: 12px; }
.dock-icon-form { margin: 0; }
.dock-icon-btn, .account-dock > a { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.dock-icon-btn:hover, .account-dock > a:hover { background: var(--ink-4); color: white; }
.dock-icon-btn[aria-pressed="true"] { background: rgba(232, 93, 63, .16); color: var(--alert); }
.account-dock > a { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: var(--muted); }
.account-dock > a:hover { background: var(--ink-4); color: white; }
.account-dock-main { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; color: inherit; text-align: left; }
.account-dock-main > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.status-picker { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 50; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-secondary); padding: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.status-picker[hidden] { display: none !important; }
.status-picker-presence { display: grid; gap: 6px; }
.status-picker-presence label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.status-picker input[type="text"] { width: 100%; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); padding: 6px 8px; font-size: 11px; }
.status-picker button[type="submit"] { width: 100%; min-height: 30px; border-radius: 6px; background: var(--accent-main); color: var(--bg-primary); font-size: 10px; font-weight: 800; cursor: pointer; }

.avatar, .message-avatar { position: relative; display: grid; flex: 0 0 auto; place-items: center; color: white; font-weight: 900; letter-spacing: -.04em; box-shadow: inset 0 1px rgba(255, 255, 255, .2); }
.avatar { width: 34px; height: 34px; overflow: hidden; border-radius: 11px; font-size: 9px; }
/* Every avatar image is pinned to its 34px box.
   There used to be no rule for this at all -- only four scoped ones for the
   header trigger, the profile menu, the nav button and the direct sidebar. An
   avatar anywhere else (the post composer, a post card, the feed) rendered its
   file at natural size and overflowed the box, so uploading a wide picture
   spread across the page and buried whatever it sat next to. */
.avatar img, .message-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.message-avatar { width: 40px; height: 40px; border-radius: 13px; font-size: 10px; }
.avatar i { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 3px solid var(--bg-primary); border-radius: 50%; background: var(--text-muted); }
.avatar i.online { background: #23a55a; }
.avatar i.idle { background: #f1c40f; }
.avatar i.dnd { background: #e74c3c; }
.avatar i.offline { background: var(--text-muted); }
.color-violet { background: linear-gradient(145deg, var(--bg-depth), var(--accent-main)); }
.color-cyan { background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); }
.color-rose { background: linear-gradient(145deg, var(--alert), var(--bg-depth)); }
.color-blue { background: linear-gradient(145deg, var(--bg-secondary), var(--accent-main)); }
.color-amber { background: linear-gradient(145deg, var(--alert), var(--accent-alt)); }
.color-plum { background: linear-gradient(145deg, var(--bg-depth), var(--accent-alt)); }
.color-slate { background: linear-gradient(145deg, var(--text-muted), var(--bg-secondary)); }

.conversation-column { display: grid; min-width: 0; min-height: 0; grid-template-rows: 48px minmax(0, 1fr) auto; background: var(--bg-primary); }
.conversation-header { display: flex; min-width: 0; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: var(--bg-primary); padding: 0 16px; position: relative; z-index: 100; }
.channel-symbol, .welcome-symbol { display: grid; place-items: center; border: 1px solid rgba(61, 224, 196, .24); background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.channel-symbol { width: 31px; height: 31px; border-radius: 9px; font-size: 18px; }
.conversation-header > div { display: grid; min-width: 0; flex: 1; gap: 3px; align-content: center; }
.conversation-header > div strong { font-size: 14px; }
.conversation-header > div small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.channel-searchbox { position: relative; display: flex; width: min(230px, 28vw); flex: 0 1 auto; align-items: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg-secondary); padding: 5px 10px; }
.channel-searchbox input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 12px; }
.channel-searchbox input::placeholder { color: var(--text-muted); }
.channel-searchbox > button { display: grid; flex: 0 0 auto; width: 22px; height: 22px; place-items: center; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.channel-searchbox > button:hover { color: var(--text-primary); }
.channel-search-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; display: grid; gap: 2px; width: min(300px, 78vw); border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-primary); padding: 10px; box-shadow: 0 16px 44px rgba(0, 0, 0, .42); }
.channel-search-menu[hidden] { display: none !important; }
.channel-search-menu-title { margin: 0 4px 6px; color: var(--text-muted); font-size: 11px; font-weight: 800; }
.channel-search-filter { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; padding: 7px 8px; font: inherit; text-align: left; }
.channel-search-filter:hover { background: var(--surface); }
.channel-search-filter > span:first-child { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; color: var(--text-muted); font-size: 15px; }
.channel-search-filter > span:last-child { display: grid; min-width: 0; gap: 1px; }
.channel-search-filter strong { font-size: 12px; }
.channel-search-filter small { color: var(--text-muted); font-size: 11px; }
.connection-badge { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(61, 224, 196, .22); border-radius: 999px; background: rgba(61, 224, 196, .07); color: var(--accent-main); padding: 6px 9px; }
.connection-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.connection-badge b { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.connection-badge.offline { border-color: rgba(232, 93, 63, .35); color: var(--alert); }
.members-button, .mobile-menu { display: grid; width: 28px; height: 28px; place-items: center; cursor: pointer; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 14px; }
.members-button:hover, .mobile-menu:hover { background: var(--surface); color: var(--text-primary); }
.mobile-menu { display: none; }
.conversation-scroll { position: relative; min-height: 0; overflow-y: auto; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.channel-welcome { padding: 16px 16px 12px; }
.welcome-symbol { width: 52px; height: 52px; border-radius: 17px; font-size: 28px; box-shadow: 0 13px 36px rgba(0, 0, 0, .13); }
.channel-welcome h1 { margin: 16px 0 8px; font-size: 24px; font-weight: 600; letter-spacing: 0; }
.channel-welcome p { max-width: 640px; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.channel-welcome small { display: block; margin-top: 9px; color: var(--text-muted); font-size: 9px; }
.date-divider { display: flex; align-items: center; gap: 11px; margin: 8px 23px 12px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.date-divider::before, .date-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.message-list { padding: 16px 0 30px; }
.chat-message { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; border-radius: 0; padding: 2px 16px; }
.chat-message:hover { background: var(--surface); }
.chat-message > div { min-width: 0; }
.chat-message header { display: flex; min-height: 19px; align-items: center; gap: 7px; }
.chat-message header strong { font-size: 14px; font-weight: 600; }
.chat-message time { color: var(--text-muted); font-size: 11px; }
.chat-message p { max-width: 820px; margin: 2px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.375; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-message [data-message-content] code,
.direct-message [data-direct-content] code,
.thread-message code { background: var(--bg-depth, rgba(255, 255, 255, .08)); color: var(--text-primary); border-radius: 4px; padding: 1px 5px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
.message-link { color: var(--accent-main); text-decoration: underline; text-underline-offset: 2px; }
.message-link:hover { text-decoration-color: var(--accent-main); filter: brightness(1.12); }
.message-embed { display: flex; gap: 12px; max-width: 720px; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .08); border-left: 4px solid var(--accent-main); border-radius: 4px; background: var(--bg-depth, rgba(255, 255, 255, .04)); }
.message-embed-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 4px; display: block; }
.message-embed-content { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.message-embed-site { color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.message-embed-title { color: var(--text-primary); font-weight: 700; font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.message-embed-title:hover { text-decoration: underline; text-decoration-color: var(--accent-main); }
.message-embed-description { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.poll-card { max-width: 720px; margin-top: 8px; padding: 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: var(--bg-depth, rgba(255, 255, 255, .04)); }
.poll-question { color: var(--text-primary); font-weight: 700; font-size: 13px; margin-bottom: 8px; overflow-wrap: anywhere; }
.poll-options { display: flex; flex-direction: column; gap: 6px; }
.poll-option { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 8px 12px; font-size: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; background: rgba(255, 255, 255, .04); color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.poll-option:hover:not(:disabled) { border-color: var(--accent-main); background: rgba(255, 255, 255, .07); }
.poll-option:disabled { cursor: default; opacity: .75; }
.poll-option.voted { border-color: var(--accent-main); }
.poll-option-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.poll-option-choice { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: var(--accent-main); font-size: 11px; font-weight: 900; }
.poll-option.voted .poll-option-choice { background: var(--accent-main); border-color: var(--accent-main); color: #fff; }
.poll-option-choice[data-checked]::after { content: attr(data-checked); color: #fff; font-weight: 900; }
.poll-option-text { color: var(--text-primary); font-size: 12px; overflow-wrap: anywhere; }
.poll-option-count { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.poll-option-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(61, 224, 196, .14); transition: width .25s ease; pointer-events: none; }
.poll-option-bar.empty { background: none; }
.poll-option > *:not(.poll-option-bar) { position: relative; z-index: 1; }
.poll-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--text-muted); font-size: 10px; }
.poll-total { color: var(--accent-main); font-weight: 700; }
.poll-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.poll-button:hover { color: var(--accent-main); }
.poll-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; background: rgba(0, 0, 0, .6); }
.poll-overlay[hidden] { display: none; }
.poll-overlay-head, .poll-overlay-foot { width: 100%; max-width: 480px; display: flex; align-items: center; justify-content: space-between; }
.poll-overlay-head { background: var(--panel-bg, #23272a); border-radius: 8px 8px 0 0; padding: 14px 16px; color: var(--text-primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.poll-overlay-head button { border: none; background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.poll-overlay-head button:hover { color: var(--text-primary); }
.poll-overlay-body { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 10px; background: var(--panel-bg, #2c2f33); border-radius: 0 0 8px 8px; padding: 16px; }
.poll-field input { width: 100%; box-sizing: border-box; background: var(--bg-input, #202225); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 10px 12px; font: inherit; font-size: 13px; }
.poll-field input:focus { outline: none; border-color: var(--accent-main); }
.poll-options-editor { display: flex; flex-direction: column; gap: 8px; }
.poll-option-row { display: flex; align-items: center; gap: 8px; }
.poll-option-row input { flex: 1; min-width: 0; box-sizing: border-box; background: var(--bg-input, #202225); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 9px 12px; font: inherit; font-size: 13px; }
.poll-option-row input:focus { outline: none; border-color: var(--accent-main); }
.poll-option-row input[aria-invalid="true"] { border-color: #f04747; }
.poll-remove-option { flex: 0 0 auto; width: 26px; height: 26px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.poll-remove-option:hover { color: #f04747; }
.poll-add-option, .poll-create, .poll-cancel { border: none; border-radius: 6px; padding: 9px 14px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.poll-add-option { align-self: flex-start; background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.poll-add-option:hover:not(:disabled) { background: rgba(61, 224, 196, .22); }
.poll-add-option:disabled { opacity: .5; cursor: default; }
.poll-hint { color: var(--text-muted); font-size: 10px; line-height: 1.5; margin: 0; }
.poll-overlay-foot { padding: 0 4px 20px; }
.poll-cancel { background: rgba(255, 255, 255, .06); color: var(--text-secondary); }
.poll-cancel:hover { background: rgba(255, 255, 255, .1); }
.poll-create { background: var(--accent-main); color: #fff; }
.poll-create:hover:not(:disabled) { filter: brightness(1.1); }
.poll-create:disabled { opacity: .5; cursor: default; }
.role-badge { border-radius: 4px; background: rgba(61, 224, 196, .14); color: var(--accent-main); padding: 2px 5px; font-size: 7px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.edited-label { color: var(--text-muted); font-size: 7px; }
.direct-read-stamp { color: var(--accent-main); font-size: 7px; font-weight: 700; }
.direct-read-stamp::before { content: "✓ "; font-size: 8px; }
.message-mention { border-radius: 4px; background: rgba(61, 224, 196, .18); color: var(--accent-main); padding: 1px 4px; font-weight: 700; }
.message-mention.special { background: rgba(61, 224, 196, .22); color: var(--accent-main); font-weight: 850; box-shadow: 0 0 0 1px rgba(61, 224, 196, .3); }
.message-actions { position: absolute; top: -14px; right: 12px; display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-secondary); padding: 4px; opacity: 0; transition: opacity .12s ease; box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.chat-message:hover .message-actions, .message-actions:focus-within { opacity: 1; }
.message-actions > button, .report-form button { cursor: pointer; border-radius: 6px; background: transparent; color: var(--text-muted); padding: 6px 8px; font-size: 12px; }
.message-context-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 188px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-secondary); padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.36); z-index: 20; }
.message-context-menu[hidden] { display: none !important; }
.message-context-menu button, .message-context-menu .report-form button { width: 100%; justify-content: flex-start; text-align: left; border-radius: 4px; padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); background: transparent; }
.message-context-menu button:hover, .message-context-menu .report-form button:hover { background: var(--surface); color: var(--text-primary); }
.message-context-menu button.danger, .message-context-menu .report-form button.danger { color: var(--alert); }
.message-context-menu button.danger:hover { background: rgba(232,93,63,.12); }
.message-actions > button:hover, .report-form button:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.message-actions > button[data-delete-message]:hover, .report-form button:hover { background: rgba(232, 93, 63, .1); color: var(--alert); }
.report-form { margin: 0; }
.inline-message-edit { display: grid; max-width: 820px; gap: 6px; margin-top: 5px; }
.inline-message-edit textarea { width: 100%; resize: vertical; border: 1px solid rgba(61, 224, 196, .35); border-radius: 9px; outline: 0; background: var(--bg-secondary); color: var(--text-primary); padding: 9px 10px; font-size: 12px; line-height: 1.5; }
.inline-message-edit textarea:focus { border-color: var(--accent-main); box-shadow: 0 0 0 3px rgba(61, 224, 196, .09); }
.inline-message-edit > div { display: flex; gap: 5px; }
.message-divider { display: flex; align-items: center; gap: 11px; margin: 3px 6px 12px; color: var(--accent-main); font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.message-divider::before, .message-divider::after { height: 1px; flex: 1; background: var(--accent-main); opacity: .55; content: ""; }
.jump-latest { position: sticky; bottom: 16px; display: inline-flex; margin: 8px auto 12px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg-secondary); color: var(--text-primary); padding: 7px 14px; font-size: 10px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); z-index: 5; }
.jump-latest[hidden] { display: none; }
.jump-latest:hover { border-color: var(--accent-main); color: var(--accent-main); }
.jump-latest::before { content: "↓"; font-size: 12px; line-height: 1; }
.inline-message-edit button { cursor: pointer; border-radius: 7px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 6px 10px; font-size: 8px; font-weight: 850; }
.inline-message-edit button:first-child { background: var(--accent-main); color: var(--bg-primary); }
.empty-chat { display: grid; justify-items: center; gap: 5px; padding: 28px 20px 60px; color: var(--muted); text-align: center; }
.empty-chat strong { color: var(--text); font-size: 13px; }
.empty-chat span { font-size: 10px; }
.composer-wrap { background: var(--bg-primary); padding: 0 16px 24px; }
.message-composer { display: flex; min-height: 44px; align-items: center; gap: 9px; border: 1px solid var(--line-soft); border-radius: 8px; background: #383a40; padding: 6px 12px; }
.message-composer > button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; cursor: pointer; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 16px; }
.composer-right { display: flex; gap: 2px; align-items: center; }
.composer-right .emoji-button:hover, .composer-right .poll-button:hover, .composer-right .gif-button:hover { background: var(--surface); color: var(--text-primary); }
.composer-right .gif-button { display: grid; height: 32px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); padding: 0 8px; font-size: 11px; font-weight: 800; cursor: pointer; }
.message-composer > button:last-child { background: var(--accent-main); color: var(--bg-primary); font-weight: 900; }
.message-composer > button:disabled { cursor: not-allowed; background: rgba(136, 136, 136, .15); color: var(--text-muted); }
.message-composer label { display: flex; min-width: 0; flex: 1; }
.message-composer textarea { width: 100%; max-height: 100px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; line-height: 23px; }
.message-composer textarea::placeholder { color: var(--text-muted); }
.message-composer small { color: var(--text-muted); font-size: 8px; }
.composer-wrap > p { margin: 6px 4px 0; color: var(--text-muted); font-size: 8px; }
.typing-status { min-height: 11px; font-size: 12px; color: var(--accent-main) !important; font-weight: 750; }
.guest-composer { display: flex; min-height: 58px; align-items: center; gap: 15px; border: 1px solid rgba(61, 224, 196, .2); border-radius: 12px; background: linear-gradient(100deg, rgba(61, 224, 196, .1), rgba(47, 27, 58, .3)); padding: 9px 10px 9px 15px; }
.guest-composer > div { display: grid; min-width: 0; flex: 1; gap: 3px; }
.guest-composer strong { font-size: 10px; }
.guest-composer span { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.guest-composer a { border-radius: 9px; background: var(--accent-main); color: var(--bg-primary); padding: 9px 13px; font-size: 9px; font-weight: 850; }

.member-sidebar { min-width: 0; min-height: 0; overflow-y: auto; background: var(--bg-secondary); padding: 0 8px 20px 8px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.member-sidebar > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 8px 8px; color: var(--text-muted); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.member-sidebar > header button { display: none; cursor: pointer; background: transparent; color: var(--muted); font-size: 22px; }
.member-search { width: 100%; margin-bottom: 12px; box-sizing: border-box; border-radius: 8px; background: var(--bg-primary); border: 1px solid var(--line-soft); color: var(--text-primary); padding: 7px 10px; font-size: 11px; }
.member-search::placeholder { color: var(--text-muted); }
.member-search:focus { outline: none; border-color: var(--accent-main); }
.member-sidebar section + section { margin-top: 18px; }
.member-sidebar h2 { margin: 0 7px 6px; color: var(--text-muted); font-size: 8px; letter-spacing: .09em; }
.member-row { display: flex; width: 100%; max-width: calc(100% - 16px); min-height: 42px; align-items: center; gap: 8px; cursor: pointer; border-radius: 4px; background: transparent; margin-inline-start: 8px; padding: 4px 8px; text-align: left; }
.member-row:hover { background: rgba(255, 255, 255, .04); }
.member-row > .member-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.member-row strong, .member-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row strong { color: var(--text-primary); font-size: 10px; }
.member-row small { color: var(--text-muted); font-size: 8px; }
.member-row form { margin: 0; opacity: 0; transition: opacity .12s ease; }
.member-row:hover form, .member-row form:focus-within { opacity: 1; }
.member-message-button { cursor: pointer; border-radius: 7px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 6px 7px; font-size: 7px; font-weight: 850; }
.member-message-button:hover { background: var(--accent-main); color: var(--bg-primary); }
.member-message-button.subtle { background: rgba(136, 136, 136, .14); color: var(--text-muted); }
.mobile-scrim { display: none; }

.settings-page main { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 42px 0 90px; }
.settings-shell { display: grid; gap: 18px; }
.settings-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 7px 2px 26px; }
.settings-server-identity { display: flex; align-items: center; gap: 17px; }
.settings-server-identity .community-icon { width: 66px; height: 66px; border-radius: 20px; }
.settings-server-identity .kicker { margin-bottom: 4px; }
.settings-hero h1 { margin: 0; font-size: clamp(28px, 5vw, 46px); line-height: 1.05; letter-spacing: -.05em; }
.settings-hero p { margin: 7px 0 0; color: var(--text-secondary); font-size: 11px; }
.secondary-button, .small-action { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; color: var(--accent-main); font-size: 14px; font-weight: 500; line-height: 16px; }
.secondary-button { min-height: 38px; padding: 2px 16px; }
.secondary-button:hover, .small-action:hover { background: rgba(61, 224, 196, .1); }
.settings-nav { position: sticky; top: 48px; z-index: 20; display: flex; gap: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-secondary); padding: 6px; }
.settings-nav a { flex: 0 0 auto; border-radius: 8px; color: var(--text-secondary); padding: 9px 12px; font-size: 9px; font-weight: 800; }
.settings-nav a:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.settings-layout { display: grid; gap: 18px; }
.settings-modal, .settings-nav-vertical, .settings-main, .settings-preview { background: var(--bg-secondary); }
.settings-panel { scroll-margin-top: 135px; overflow: hidden; border: 0; border-radius: 0; background: transparent; padding: 20px 24px 28px; }
.settings-panel + .settings-panel { border-top: 1px solid var(--line-soft); }
.settings-panel > header { display: flex; min-height: 79px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); padding: 17px 20px; }
.settings-panel > header .kicker { margin-bottom: 4px; }
.settings-panel h2 { margin: 0; font-size: 18px; letter-spacing: -.035em; }
.permission-chip { flex: 0 0 auto; border: 1px solid rgba(61, 224, 196, .25); border-radius: 999px; background: rgba(61, 224, 196, .08); color: var(--accent-main); padding: 6px 9px; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.small-action { min-height: 34px; padding: 0 11px; }
.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding: 20px; }
.settings-form .form-field:nth-of-type(2) { grid-column: 1 / -1; }
.settings-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.settings-form-actions button, .inline-create-form > button, .management-row button { min-height: 35px; cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 0 12px; font-size: 9px; font-weight: 850; }
.settings-form-actions button, .inline-create-form > button { background: var(--accent-main); color: var(--bg-primary); }
.inline-create-form { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(180px, 1fr) auto; align-items: end; gap: 12px; border-bottom: 1px solid var(--line); padding: 18px 20px; }
.inline-create-form label { display: grid; gap: 6px; }
.inline-create-form label > span { color: var(--text-secondary); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.inline-create-form input, .inline-create-form select, .management-row input, .management-row select { min-width: 0; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--bg-primary); color: var(--text-primary); padding: 9px 10px; font-size: 9px; }
.inline-create-form small { color: var(--text-muted); font-size: 8px; }
.category-create-form { display: flex; align-items: end; gap: 9px; border-bottom: 1px solid var(--line); padding: 15px 20px; }
.category-create-form label { display: grid; min-width: 220px; flex: 1; gap: 6px; }
.category-create-form label span { color: var(--text-secondary); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.category-create-form input, .category-name-form input { min-width: 0; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--bg-primary); color: var(--text-primary); padding: 9px 10px; font-size: 9px; }
.category-create-form button, .category-name-form button, .order-controls button { min-height: 35px; cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 0 12px; font-size: 9px; font-weight: 850; }
.category-create-form > button { background: var(--accent-main); color: var(--bg-primary); }
.category-management + .category-management { border-top: 1px solid var(--line); }
.category-management > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(61, 224, 196, .045); padding: 10px 20px; }
.category-name-form, .order-controls { display: flex; align-items: center; gap: 5px; }
.category-name-form { min-width: 0; flex: 1; }
.category-name-form input { width: min(320px, 100%); font-weight: 850; letter-spacing: .06em; }
.order-controls form, .channel-order-actions form { margin: 0; }
.order-controls button { width: 35px; padding: 0; }
.order-controls .danger-link { width: auto; background: rgba(232, 93, 63, .12); color: var(--alert); padding-inline: 10px; }
.channel-order-actions { flex-wrap: nowrap; }
.channel-order-actions button { width: 34px; padding: 0; }
.channel-order-actions a { display: inline-flex; min-height: 35px; align-items: center; border-radius: 8px; color: var(--accent-main); padding: 0 10px; font-size: 9px; font-weight: 850; }
.channel-order-actions a:hover { background: rgba(61, 224, 196, .1); }
.management-list { display: grid; }
.management-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 12px 16px; font-size: 14px; border-radius: 8px; }
.management-row:hover { background: rgba(255, 255, 255, .03); }
.management-row + .management-row { border-top: 1px solid var(--line-soft); }
.management-row > div:not(.row-actions):not(.member-controls) { display: grid; min-width: 0; gap: 3px; }
.management-row strong { font-size: 11px; }
.management-row small { color: var(--accent-main); font-size: 8px; }
.management-row p { overflow: hidden; margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.management-row > a { border-radius: 8px; color: var(--accent-main); padding: 8px 10px; font-size: 9px; font-weight: 800; }
.management-row > a:hover { background: rgba(61, 224, 196, .1); }
.management-symbol { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: rgba(61, 224, 196, .1); color: var(--accent-main); font-size: 17px; }
.settings-empty { color: var(--text-muted); padding: 28px 20px; font-size: 10px; text-align: center; }
.invite-row input[readonly] { width: min(560px, 100%); margin-top: 5px; }
.invite-row.inactive { opacity: .58; }
.row-actions { display: flex; align-items: center; gap: 6px; }
.row-actions form { margin: 0; }
.management-row .danger-link, .danger-zone button { background: rgba(232, 93, 63, .12); color: var(--alert); }
.voice-room-heading { display: flex; align-items: center; gap: 8px; margin: 18px 20px 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.voice-room-heading .channel-symbol { margin: 0; }
.voice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.voice-actions form { margin: 0; }
.voice-actions button { min-height: 30px; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 0 10px; font-size: 8px; font-weight: 850; cursor: pointer; }
.voice-actions .voice-move-form { display: flex; align-items: center; gap: 6px; }
.voice-actions .voice-move-form select { min-width: 0; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--bg-primary); color: var(--text-primary); padding: 7px 8px; font-size: 8px; }
.voice-badge { display: inline-block; margin-left: 6px; border-radius: 6px; padding: 2px 6px; font-size: 7px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
.voice-badge.muted { background: rgba(232, 93, 63, .2); color: var(--alert); }
.voice-badge.deafened { background: rgba(232, 93, 63, .32); color: var(--alert); }
.permission-table-wrap { overflow-x: auto; }
.permission-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.permission-table th, .permission-table td { border-bottom: 1px solid var(--line-soft); padding: 13px 16px; font-size: 9px; text-align: center; }
.permission-table th:first-child { color: var(--text-secondary); text-align: left; }
.permission-table thead th { background: rgba(61, 224, 196, .055); color: var(--text-muted); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.permission-table .allowed { color: var(--accent-main); font-size: 14px; }
.settings-note { margin: 0; color: var(--text-muted); padding: 14px 20px 18px; font-size: 9px; line-height: 1.6; }
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.analytics-card { display: grid; gap: 4px; padding: 15px 16px; border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(255, 255, 255, .02); }
.analytics-value { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--text-primary); line-height: 1; }
.analytics-label { font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.analytics-note { font-size: 8.5px; color: var(--text-muted); line-height: 1.55; }
.bar-list { display: grid; gap: 9px; padding: 18px 20px 6px; }
.bar-row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr 42px; align-items: center; gap: 10px; }
.bar-label { font-size: 9.5px; font-weight: 800; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 12px; border-radius: 999px; background: rgba(128, 140, 155, .16); overflow: hidden; }
.bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(61, 224, 196, .55), var(--accent-main)); min-width: 2px; }
.bar-value { font-size: 9.5px; text-align: right; color: var(--text-primary); font-weight: 850; }
.chart-block { padding: 6px 20px 4px; }
.chart-block h3 { margin: 12px 0 10px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.daily-chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: 8px 4px 0; border-bottom: 1px solid var(--line-soft); }
.daily-col { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.daily-bar { width: 100%; border-radius: 4px 4px 0 0; background: rgb(61, 224, 196); opacity: .85; transition: opacity .15s ease; }
.daily-bar.empty { background: transparent; border-left: 1px dashed var(--line-soft); opacity: .5; }
.daily-col:hover .daily-bar { opacity: 1; }
.management-row .permission-chip { margin-left: auto; }
.member-management-row { align-items: start; }
.member-controls { display: flex; max-width: 580px; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.member-controls form { display: flex; gap: 5px; }
.member-controls input { width: 150px; }
.member-controls select { width: 100px; }
.member-note { color: var(--alert) !important; font-weight: 600; }
.report-quote, .report-actions ~ .management-row div p, .management-row .member-note { white-space: normal; overflow: visible; text-overflow: clip; }
.report-actions { display: flex; align-items: center; gap: 6px; }
.report-actions form { margin: 0; }
.report-actions button { min-height: 32px; }
.report-actions .danger-link { border-radius: 8px; background: rgba(232, 93, 63, .12); color: var(--alert); padding: 0 12px; font-size: 9px; font-weight: 850; cursor: pointer; }
.embedded-form { display: grid; gap: 17px; }
.danger-zone { border-top: 1px solid rgba(232, 93, 63, .3); padding-top: 15px; }
.danger-zone summary { cursor: pointer; color: var(--alert); font-size: 10px; font-weight: 850; }
.danger-zone p { color: var(--text-muted); font-size: 10px; line-height: 1.6; }
.danger-zone button { min-height: 38px; cursor: pointer; border-radius: 8px; padding: 0 13px; font-size: 9px; font-weight: 850; }
.invite-card { justify-items: center; text-align: center; }
.invite-card .community-icon { width: 80px; height: 80px; border-radius: 20px; }
.invite-card .kicker { margin: 2px 0 -6px; }
.invite-card > p { margin-inline: auto; }
.invite-card form { width: 100%; }
.invite-meta { display: flex; width: 100%; justify-content: center; gap: 8px; }
.invite-meta span { border: 1px solid var(--line); border-radius: 999px; color: var(--text-secondary); padding: 7px 10px; font-size: 9px; }
.composer-wrap > p.error { color: var(--alert); }

.friends-page main { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 46px 0 80px; }
.friends-shell { display: grid; gap: 18px; }
.friends-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 7px 2px 27px; }
.friends-hero h1 { margin: 0; font-size: clamp(34px, 6vw, 56px); line-height: 1; letter-spacing: -.055em; }
.friends-hero p { max-width: 680px; margin: 12px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.friends-hero .primary-button { flex: 0 0 auto; }
.friends-tabs { display: flex; gap: 6px; overflow-x: auto; border: 0; background: transparent; padding: 0; }
.friends-tabs a { display: flex; min-height: 36px; flex: 0 0 auto; align-items: center; gap: 7px; border-radius: 8px; color: var(--text-secondary); padding: 0 12px; font-size: 9px; font-weight: 850; }
.friends-tabs a:hover { background: var(--surface); color: var(--text-primary); }
.friends-tabs a.active { background: var(--surface); color: var(--text-primary); }
.friends-tabs span, .friends-tabs em { display: grid; min-width: 17px; height: 17px; place-items: center; border-radius: 999px; padding: 0 5px; font-size: 7px; font-style: normal; }
.friends-tabs span { background: rgba(61, 224, 196, .12); }
.friends-tabs em { background: var(--alert); color: var(--text-primary); }
.friends-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(26, 42, 58, .82), rgba(5, 5, 5, .96)); }
.friends-panel > header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); padding: 16px 20px; }
.friends-panel > header .kicker { margin-bottom: 4px; }
.friends-panel h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.friends-panel > header > span { color: var(--text-muted); font-size: 9px; font-weight: 850; }
.friend-list { display: grid; padding: 7px; }
.friend-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: 13px; border-radius: 8px; padding: 12px 13px; }
.friend-row + .friend-row { border-top: 1px solid var(--line-soft); border-radius: 0; }
.friend-row:hover { background: rgba(61, 224, 196, .055); }
.friend-row > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.friend-row strong, .friend-row small, .friend-row p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row strong { font-size: 11px; }
.friend-row small { color: var(--accent-main); font-size: 8px; }
.friend-row p { margin: 4px 0 0; color: var(--text-muted); font-size: 9px; }
.friend-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.friend-actions form { margin: 0; }
.friend-actions button { min-height: 32px; cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .09); color: var(--text-secondary); padding: 0 10px; font-size: 8px; font-weight: 850; }
.friend-actions button:hover { background: rgba(61, 224, 196, .16); color: var(--accent-main); }
.friend-actions .friend-primary { background: var(--accent-main); color: var(--bg-primary); }
.friend-actions .friend-primary:hover { background: var(--accent-alt); color: var(--bg-primary); }
.friend-actions .friend-danger { background: rgba(232, 93, 63, .1); color: var(--alert); }
.friend-actions .friend-danger:hover { background: var(--alert); color: var(--text-primary); }
.friend-unavailable { color: var(--text-muted); font-size: 8px; }
.friends-empty { display: grid; justify-items: center; gap: 6px; color: var(--text-muted); padding: 50px 20px; text-align: center; }
.friends-empty > span { color: var(--accent-main); font-size: 30px; }
.friends-empty strong { color: var(--text-primary); font-size: 12px; }
.friends-empty p { margin: 0; font-size: 9px; line-height: 1.6; }
.friends-empty a { margin-top: 5px; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 8px 11px; font-size: 8px; font-weight: 850; }
.friends-empty.compact { padding: 36px 17px; }
.pending-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.compact-list .friend-row { padding: 11px; }
.friend-search-form { display: grid; gap: 8px; border-bottom: 1px solid var(--line); padding: 22px; }
.friend-search-form > label { color: var(--text-secondary); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.friend-search-form > div { display: flex; min-height: 46px; gap: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-primary); padding: 5px; }
.friend-search-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); padding: 0 10px; font-size: 11px; }
.friend-search-form input::placeholder { color: var(--text-muted); }
.friend-search-form button { cursor: pointer; border-radius: 8px; background: var(--accent-main); color: var(--bg-primary); padding: 0 17px; font-size: 9px; font-weight: 900; }
.friend-search-form small { color: var(--text-muted); font-size: 8px; line-height: 1.55; }
.search-results { padding-block: 11px; }
.search-prompt { min-height: 220px; align-content: center; }

.direct-app { grid-template-columns: 72px 240px minmax(0, 1fr); }
.direct-app:has(.direct-profile-panel) { grid-template-columns: 72px 240px minmax(0, 1fr) 340px; }
.direct-profile-panel { border-left: 1px solid var(--line); background: var(--bg-secondary); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
.direct-profile-banner { height: 105px; background: linear-gradient(90deg, var(--bg-depth), var(--accent-main)); }
.direct-profile-body { display: grid; gap: 8px; padding: 0 16px 16px; }
.direct-profile-avatar { width: 72px; height: 72px; border-radius: 16px; font-size: 18px; margin-top: -24px; border: 4px solid var(--bg-secondary); }
.direct-profile-name { color: var(--accent-main); font-size: 18px; font-weight: 900; }
.direct-profile-handle { color: var(--text-muted); font-size: 11px; }
.direct-profile-bio { color: var(--text-secondary); font-size: 12px; line-height: 1.5; margin: 4px 0 0; }
.direct-profile-facts { display: grid; gap: 4px; margin: 8px 0 0; }
.direct-profile-facts div { display: grid; gap: 2px; }
.direct-profile-facts dt { color: var(--text-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.direct-profile-facts dd { margin: 0; color: var(--text-primary); font-size: 12px; }
.direct-profile-action { margin-top: 12px; width: 100%; }
.direct-sidebar { position: relative; z-index: 20; display: flex; min-width: 0; min-height: 0; flex-direction: column; background: var(--bg-secondary); }
.direct-sidebar-header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 16px; }
.direct-sidebar-header > div { display: grid; min-width: 0; gap: 3px; }
.direct-sidebar-header span { color: var(--accent-main); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.direct-sidebar-header strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.direct-sidebar-header > a, .direct-list > header a { display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); }
.direct-sidebar-header > a { width: 31px; height: 31px; font-size: 18px; }
.direct-sidebar-header > a:hover, .direct-list > header a:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.direct-find-link { display: flex; min-height: 42px; align-items: center; gap: 9px; margin: 10px 9px 4px; border-radius: 9px; color: var(--text-secondary); padding: 0 10px; }
.direct-find-link > span { color: var(--text-muted); font-size: 21px; }
.direct-find-link > strong { font-size: 10px; }
.direct-find-link > em { display: grid; min-width: 18px; height: 18px; margin-left: auto; place-items: center; border-radius: 999px; background: var(--alert); color: var(--text-primary); padding: 0 5px; font-size: 7px; font-style: normal; font-weight: 900; }
.direct-find-link > em[hidden] { display: none; }
.direct-find-link:hover, .direct-find-link.active { background: rgba(61, 224, 196, .09); color: var(--text-primary); }
.direct-find-link.active { box-shadow: inset 3px 0 var(--accent-main); }
.direct-list { min-height: 0; flex: 1; overflow-y: auto; padding: 10px 9px 18px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.direct-list > header { display: flex; min-height: 26px; align-items: center; justify-content: space-between; color: var(--text-muted); padding: 0 7px 5px; }
.direct-list > header strong { font-size: 8px; letter-spacing: .12em; }
.direct-list > header a { width: 20px; height: 20px; font-size: 16px; }
.direct-link { position: relative; display: flex; min-width: 0; min-height: 49px; align-items: center; gap: 9px; border-radius: 8px; color: var(--text-secondary); padding: 7px 8px; }
.direct-link:hover { background: rgba(61, 224, 196, .07); color: var(--text-primary); }
.direct-link.active { background: linear-gradient(90deg, rgba(61, 224, 196, .2), rgba(0, 168, 157, .08)); color: var(--text-primary); }
.direct-link.active::before { position: absolute; left: -9px; width: 3px; height: 25px; border-radius: 0 3px 3px 0; background: var(--accent-main); content: ""; }
.direct-link-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.direct-link-copy strong, .direct-link-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-link-copy strong { font-size: 10px; }
.direct-link-copy small { color: var(--text-muted); font-size: 8px; }
.direct-link.unread .direct-link-copy strong { color: var(--text-primary); font-weight: 900; }
.direct-link > em { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 999px; background: var(--alert); color: var(--text-primary); padding: 0 5px; font-size: 7px; font-style: normal; font-weight: 900; }
.direct-link > em[hidden] { display: none; }
.direct-list-empty { color: var(--text-muted); padding: 24px 9px; font-size: 9px; line-height: 1.5; text-align: center; }

.direct-home { display: grid; min-width: 0; min-height: 0; grid-template-rows: 70px minmax(0, 1fr); background: radial-gradient(circle at 74% 8%, rgba(47, 27, 58, .55), transparent 33%), var(--bg-primary); }
.direct-home-scroll { min-height: 0; overflow-y: auto; padding: 0 clamp(18px, 4vw, 58px) 70px; scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.direct-home-hero { max-width: 780px; border-bottom: 1px solid var(--line); padding: clamp(38px, 7vw, 72px) 0 31px; }
.direct-home-hero .welcome-symbol { margin-bottom: 17px; }
.direct-home-hero h1 { margin: 8px 0 10px; font-size: clamp(30px, 5vw, 50px); line-height: 1.04; letter-spacing: -.05em; }
.direct-home-hero p { max-width: 690px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.direct-search-form { display: grid; max-width: 780px; gap: 8px; margin-top: 28px; }
.direct-search-form > label { color: var(--text-secondary); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.direct-search-form > div { display: flex; min-height: 46px; gap: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-secondary); padding: 5px; }
.direct-search-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); padding: 0 10px; font-size: 11px; }
.direct-search-form input::placeholder { color: var(--text-muted); }
.direct-search-form button { cursor: pointer; border-radius: 8px; background: var(--accent-main); color: var(--bg-primary); padding: 0 16px; font-size: 9px; font-weight: 900; }
.direct-member-results { max-width: 980px; margin-top: 36px; }
.direct-member-results > header { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.direct-member-results h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.035em; }
.direct-member-results > header > span { color: var(--text-muted); font-size: 8px; font-weight: 850; }
.direct-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.direct-member-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(26, 42, 58, .8), rgba(5, 5, 5, .92)); padding: 14px; }
.direct-member-card:hover { border-color: rgba(61, 224, 196, .32); background: linear-gradient(145deg, rgba(26, 42, 58, .95), rgba(47, 27, 58, .34)); }
.direct-member-card > div { display: grid; min-width: 0; gap: 2px; }
.direct-member-card strong, .direct-member-card small, .direct-member-card p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direct-member-card strong { font-size: 11px; }
.direct-member-card small { color: var(--accent-main); font-size: 8px; }
.direct-member-card p { margin: 4px 0 0; color: var(--text-muted); font-size: 8px; }
.direct-member-card form { margin: 0; }
.direct-member-card button { cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 8px 10px; font-size: 8px; font-weight: 900; }
.direct-member-card button:hover { background: var(--accent-main); color: var(--bg-primary); }
.direct-empty-result { grid-column: 1 / -1; display: grid; justify-items: center; gap: 5px; border: 1px dashed var(--line); border-radius: 14px; color: var(--text-muted); padding: 35px 18px; text-align: center; }
.direct-empty-result strong { color: var(--text-primary); font-size: 11px; }
.direct-empty-result span { font-size: 9px; }
.direct-empty-result a { margin-top: 5px; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 8px 11px; font-size: 8px; font-weight: 850; }

.direct-conversation-header > .avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 9px; }
.direct-header-actions { display: flex; align-items: center; gap: 5px; }
.direct-header-action { margin: 0; }
.direct-header-action button { min-height: 31px; cursor: pointer; border-radius: 8px; background: rgba(232, 93, 63, .12); color: var(--alert); padding: 0 10px; font-size: 8px; font-weight: 900; }
.direct-header-action button:hover { background: var(--alert); color: var(--text-primary); }
.direct-header-action.friend-action button { background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.direct-header-action.friend-action button:hover { background: var(--accent-main); color: var(--bg-primary); }
.direct-welcome-avatar { width: 64px; height: 64px; border-radius: 20px; font-size: 16px; }
.blocked-composer { display: flex; min-height: 50px; align-items: center; gap: 12px; border: 1px solid rgba(232, 93, 63, .3); border-radius: 12px; background: rgba(232, 93, 63, .08); padding: 10px 13px; }
.blocked-composer strong { flex: 0 0 auto; color: var(--alert); font-size: 10px; }
.blocked-composer span { color: var(--text-secondary); font-size: 9px; }

.direct-call-button { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; cursor: pointer; border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); color: var(--text-secondary); padding: 0 var(--space-12); font-size: 13px; font-weight: 500; }
.direct-call-button:hover { background: rgba(255, 255, 255, .1); color: var(--text-primary); }
.direct-call-button:disabled { cursor: not-allowed; opacity: .5; }
.direct-conversation-column { grid-template-rows: 48px auto minmax(0, 1fr) auto; }
.direct-conversation-column > .conversation-header { grid-row: 1; }
.direct-conversation-column > .call-stage { grid-row: 2; }
.direct-conversation-column > .conversation-scroll { grid-row: 3; }
.direct-conversation-column > .composer-wrap { grid-row: 4; }

/* ---- Discord-style calls ----
   Ported from DiscordCSS.txt: .video__94748 / .videoWrapper__94748 / .videoBottom__94748
   / .rtcConnectionStatus__06d62 / .buttonSection_a83780 / .tile__076c1 / declineButton__20855
   Discord tokens mapped onto WolfRift palette:
     --background-mod-muted  white 2%  -> rgba(255,255,255,.02)
     --background-mod-subtle white 3%  -> rgba(255,255,255,.03)
     --background-mod-normal white 4%  -> rgba(255,255,255,.04)
     --interactive-bg-hover  white 3%  -> rgba(255,255,255,.03)
     --border-subtle white 3% / --border-muted white 1% / --border-strong white 11%
     --primary-800 (video bg) -> var(--bg-secondary)
     --radius-sm 8px, --radius-lg 16px, .ring__72ba7 8px */
@keyframes wr-call-pulse-out { 0% { opacity: 0; transform: scaleX(1); } 11.56% { opacity: 1; } 39.02% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } 39.03% { transform: scaleX(1); } 39.04% { opacity: 1; } 66.48% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes wr-call-pulse-in { 0% { opacity: 0; transform: scaleX(1); } 0.7% { opacity: 1; } 25.54% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } 25.55% { transform: scaleX(1); } 25.56% { opacity: 1; } 49.98% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } 49.99% { transform: scaleX(1); } 50% { opacity: 1; } 74.69% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } 74.7% { transform: scaleX(1); } 74.71% { opacity: 1; } 99.9% { opacity: 0; transform: scale3d(1.1, 1.1, 1); } 100% { opacity: 0; transform: scaleX(1); } }

/* one rounded panel, video fills, bar docked at the bottom (.ring__72ba7 + .video__94748) */
.call-stage { position: relative; display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto auto; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-secondary); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03); }
.call-stage[hidden], .incoming-call[hidden] { display: none; }
.direct-conversation-column > .call-stage { height: clamp(275px, 50vh, 560px); margin: var(--space-8) var(--space-8) 0; }
[data-group-root] .call-stage { height: clamp(360px, 58vh, 560px); border-radius: 0; box-shadow: none; }
[data-group-root] .call-stage[hidden] { display: none !important; }
[data-group-root] [data-call-stage] [data-call-join] { display: none !important; }
[data-group-root] .call-participant-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-8); padding: var(--space-8); }
[data-group-root] .call-participant-media { aspect-ratio: 16/9; min-height: 180px; }

/* connection status: floating overlay chip, not a header bar (.rtcConnectionStatus__06d62) */
.call-stage-header { position: absolute; z-index: 4; top: var(--space-8); inset-inline-start: var(--space-8); display: flex; min-width: 0; max-width: calc(100% - var(--space-16)); align-items: center; gap: var(--space-8); border: 0; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .55); padding: var(--space-4) var(--space-8); pointer-events: none; }
.call-stage-header > span:nth-child(2) { display: grid; min-width: 0; gap: 0; }
.call-stage-header small { display: none; }
.call-stage-header strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.call-stage-signal { display: flex; width: 16px; height: 16px; flex: 0 0 auto; align-items: center; justify-content: center; }
.call-stage-signal i { display: none; }
.call-stage-signal::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.call-stage-status { display: flex; height: 16px; flex: 0 0 auto; align-items: center; overflow: hidden; color: var(--text-muted); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.call-stage-status[data-state="connected"] { color: var(--green); }
.call-stage-status[data-state="pending"] { color: var(--yellow); }
.call-stage-status.error, .call-stage-status[data-state="error"] { color: var(--alert); }

/* video stage */
.call-participant-grid { display: grid; min-width: 0; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-content: center; justify-content: center; gap: var(--space-8); overflow-y: auto; padding: var(--space-8); scrollbar-color: var(--accent-alt) transparent; scrollbar-width: thin; }
.call-empty { grid-column: 1 / -1; display: grid; min-height: 145px; place-content: center; justify-items: center; gap: var(--space-8); color: var(--text-muted); padding: var(--space-24); text-align: center; }
.call-empty[hidden] { display: none; }
.call-empty > span { position: relative; display: grid; width: 80px; height: 80px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .04); color: var(--text-muted); font-size: 28px; }
.call-empty strong { margin-top: var(--space-4); color: var(--text-primary); font-size: 16px; font-weight: 600; }
.call-empty p { max-width: 430px; margin: 0; font-size: 13px; line-height: 1.4; }

/* tiles (.tile__076c1: no border, 5px radius, hairline ring, hover lift) */
.call-participant { position: relative; min-width: 0; max-width: 500px; width: 100%; justify-self: center; overflow: hidden; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03); transition: background-color .2s, box-shadow .2s; }
.call-participant:hover { background: rgba(255, 255, 255, .05); }
.call-participant.speaking { box-shadow: 0 0 0 2px var(--accent-main), 0 0 0 3px rgba(255, 255, 255, .04); }
.call-participant.screen-sharing { grid-column: span 2; }
.call-participant-media { position: relative; display: grid; aspect-ratio: 16 / 9; min-height: 200px; place-items: center; overflow: hidden; background-color: var(--bg-secondary); background-position: 50% center; background-size: 100% auto; }
.call-participant-avatar { display: grid; width: 80px; height: 80px; place-items: center; border-radius: 50%; background: var(--bg-depth); color: var(--text-primary); font-size: 32px; font-weight: 600; }
.call-stage.ringing .call-empty > span::after, .call-participant.ringing .call-participant-avatar::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--interactive-text-active); border-color: var(--text-primary); border-radius: 100%; animation: wr-call-pulse-out 2.5s infinite ease-out; }
.call-video-track { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--bg-primary); object-fit: cover; }
.call-video-track.screen-share-track { object-fit: contain; }
.call-audio-track { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* name plate: .videoBottom__94748 hidden, revealed on hover/focus, 0.2s ease-in-out */
.call-participant footer { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); border-top: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .88), transparent); padding: var(--space-24) var(--space-8) var(--space-8); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .2s ease-in-out, transform .2s ease-in-out; }
.call-participant:hover footer, .call-participant:focus-within footer, .call-participant.speaking footer { opacity: 1; transform: translateZ(0); }
.call-participant footer strong { overflow: hidden; color: #fff; font-size: 14px; font-weight: 600; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); white-space: nowrap; }
.call-participant footer small { border: 0; border-radius: 0; background: transparent; color: rgba(255, 255, 255, .8); padding: 0; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.call-participant.muted footer small { background: transparent; color: rgba(255, 255, 255, .6); }
.call-participant.deafened footer small { background: transparent; color: var(--alert); }
.call-participant.speaking footer small { color: var(--accent-main); }

/* accept / decline (.declineButton__20855) */
.call-decision { display: flex; justify-content: center; gap: var(--space-8); border-top: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent); padding: var(--space-8) var(--space-12) var(--space-12); }
.call-decision[hidden] { display: none; }
.call-action { min-height: 40px; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0 var(--space-16); font-size: 14px; font-weight: 500; }
.call-action.accept { background: var(--green); color: #fff; }
.call-action.accept:hover { filter: brightness(1.08); }
.call-action.decline { border-color: rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .04); color: var(--text-primary); }
.call-action.decline:hover { background: rgba(255, 255, 255, .06); }
.call-action:disabled { cursor: wait; opacity: .5; }

/* control bar: compact pill (.buttonSection_a83780: radius 12px, padding 4px, mod-subtle bg) */
.call-controls { display: flex; justify-content: center; gap: var(--space-12); overflow-x: auto; border-top: 0; background: rgba(0, 0, 0, .45); padding: var(--space-8) var(--space-12) var(--space-12); scrollbar-width: none; }
.call-control { display: grid; width: 32px; height: 32px; min-width: 32px; flex: 0 0 auto; grid-template-columns: 1fr; place-items: center; gap: 2px; cursor: pointer; border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .02); color: var(--text-secondary); padding: 6px; }
.call-control span { color: inherit; font-size: 15px; line-height: 1; }
.call-control b { display: none; }
.call-control:hover:not(:disabled) { background: rgba(255, 255, 255, .05); color: var(--text-primary); }
.call-control.active { background: var(--accent-main); color: var(--bg-primary); }
.call-control.deafen.active { background: var(--alert); color: #fff; }
.call-control.primary { width: auto; min-width: 56px; background: var(--green); color: #fff; }
.call-control.primary:hover:not(:disabled) { background: var(--green); filter: brightness(1.08); color: #fff; }
.call-control.primary span { color: inherit; }
.call-control.leave { background: var(--alert); color: #fff; }
.call-control.leave span { color: inherit; }
.call-control.leave:hover:not(:disabled) { background: var(--alert); filter: brightness(1.08); color: #fff; }
.call-control:disabled { cursor: not-allowed; opacity: .35; }
.call-control.settings.active { background: rgba(255, 255, 255, .08); color: var(--text-primary); }

/* ---- global voice panel (Discord .rtcConnectionStatus__06d62 / .ping__06d62) ---- */
.voice-panel { position: fixed; z-index: 178; bottom: var(--space-12); left: var(--space-12); display: grid; width: min(340px, calc(100vw - 24px)); overflow: hidden; border: 1px solid rgba(255, 255, 255, .03); border-radius: var(--radius-sm); background: var(--bg-secondary); box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
.voice-panel[hidden] { display: none; }
.voice-panel-head { display: flex; align-items: center; gap: var(--space-8); border-bottom: 1px solid rgba(255, 255, 255, .03); background: rgba(0, 0, 0, .2); padding: var(--space-8); }
.voice-panel-ping { width: 18px; height: 18px; flex: 0 0 auto; margin-inline-end: var(--space-8); border-radius: 8px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.voice-panel-ping[data-tone="connected"] { background: var(--green); }
.voice-panel-ping[data-tone="pending"] { background: var(--yellow); }
.voice-panel-ping[data-tone="error"] { background: var(--alert); }
.voice-panel-status { display: flex; min-width: 0; flex: 1; flex-direction: column; overflow: hidden; }
.voice-panel-status strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.voice-panel-status strong[data-tone="connected"] { color: var(--green); }
.voice-panel-status strong[data-tone="pending"] { color: var(--yellow); }
.voice-panel-status strong[data-tone="error"] { color: var(--alert); }
.voice-panel-status span { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.voice-panel-quality { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 2px; height: 16px; }
.voice-panel-quality i { width: 3px; border-radius: 2px; background: var(--text-muted); }
.voice-panel-quality i:nth-child(1) { height: 5px; }
.voice-panel-quality i:nth-child(2) { height: 9px; }
.voice-panel-quality i:nth-child(3) { height: 13px; }
.voice-panel-quality[data-quality="fine"] i { background: var(--green); }
.voice-panel-quality[data-quality="average"] i:nth-child(-n+2) { background: var(--yellow); }
.voice-panel-quality[data-quality="bad"] i:nth-child(1) { background: var(--alert); }
.voice-panel-disconnect { width: 32px; height: 32px; flex: 0 0 auto; cursor: pointer; border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .02); font-size: 15px; }
.voice-panel-disconnect:hover { background: var(--alert); }
.voice-panel-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); padding: var(--space-8); }
.voice-panel-btn { display: grid; min-height: 48px; place-items: center; gap: 2px; cursor: pointer; border: 0; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .04); color: var(--text-secondary); font-size: 11px; font-weight: 500; }
.voice-panel-btn span { font-size: 15px; line-height: 1; }
.voice-panel-btn:hover { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
.voice-panel-btn.active { background: var(--accent-main); color: var(--bg-primary); }
.voice-panel-btn.danger { background: rgba(232, 93, 63, .16); color: var(--alert); }
.voice-panel-people { display: grid; gap: var(--space-4); margin: 0; border-top: 1px solid rgba(255, 255, 255, .03); padding: var(--space-8); list-style: none; }
.voice-panel-person { display: flex; min-width: 0; align-items: center; gap: var(--space-8); }
.voice-panel-person-copy { display: grid; min-width: 0; flex: 1; gap: 0; }
.voice-panel-person-copy strong { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.voice-panel-person-copy small { color: var(--text-muted); font-size: 12px; }
.voice-panel-person-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-4); }
.voice-panel-person-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 14px; }
.voice-panel-person-icon.off { color: var(--alert); }
button.voice-panel-person-icon { cursor: pointer; }
button.voice-panel-person-icon:hover { background: rgba(255, 255, 255, .06); }

/* settings popout */
.call-settings { display: grid; gap: var(--space-8); border-top: 0; background: rgba(0, 0, 0, .6); padding: var(--space-12) var(--space-16) var(--space-16); }
.call-settings[hidden] { display: none; }
.call-settings-head { display: flex; align-items: center; gap: var(--space-8); }
.call-settings-head strong { flex: 1; font-size: 14px; font-weight: 600; }
.call-settings-close { cursor: pointer; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 20px; line-height: 1; padding: 4px var(--space-8); }
.call-settings-close:hover { background: rgba(255, 255, 255, .05); color: var(--text-primary); }
.call-setting-row { display: grid; gap: var(--space-4); }
.call-setting-row > span { color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.call-setting-row select { width: 100%; border: 1px solid rgba(255, 255, 255, .03); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); color: var(--text-primary); font-size: 13px; padding: var(--space-8); }
.call-setting-row select:disabled { cursor: not-allowed; opacity: .45; }

/* incoming call toast */
.incoming-call { position: fixed; z-index: 180; top: var(--space-16); right: var(--space-16); display: grid; width: min(340px, calc(100vw - 32px)); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-12); border: 1px solid rgba(255, 255, 255, .03); border-radius: var(--radius-sm); background: var(--bg-secondary); padding: var(--space-12); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.incoming-call-pulse { display: none; }
.incoming-call .avatar { position: relative; }
.incoming-call .avatar::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--text-primary); border-radius: 100%; animation: wr-call-pulse-in 5.407s infinite ease-out; }
.incoming-call-copy { display: grid; min-width: 0; gap: 2px; }
.incoming-call-copy small { color: var(--text-muted); font-size: 11px; font-weight: 600; }
.incoming-call-copy strong, .incoming-call-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incoming-call-copy strong { font-size: 14px; font-weight: 600; }
.incoming-call-copy span { color: var(--text-muted); font-size: 12px; }
.incoming-call-actions { grid-column: 1 / -1; display: flex; gap: var(--space-8); }
.incoming-call-actions .call-action { min-height: 36px; flex: 1; padding-inline: var(--space-8); font-size: 13px; }

.call-stats { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 9px; }
.call-stats > strong { color: var(--text-muted); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.call-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.call-stat-grid span { display: flex; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 8px; }
.call-stat-grid b { color: var(--text-primary); font-weight: 700; }
.call-help { margin: 0; color: var(--text-muted); padding: 1px 13px 10px; font-size: 7px; text-align: center; }

.voice-conversation-column { position: relative; grid-template-rows: 70px minmax(0, 1fr); }
.voice-conversation-column > .call-stage { grid-row: 2; }
.voice-symbol { border-radius: 50%; font-size: 13px; }
.voice-privacy { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 7px; font-weight: 750; }
.voice-privacy i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-main); }
.voice-signin-card { position: absolute; top: 50%; left: 50%; z-index: 5; display: grid; width: min(510px, calc(100% - 28px)); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; transform: translate(-50%, -50%); border: 1px solid rgba(61, 224, 196, .35); border-radius: 16px; background: rgba(5, 5, 5, .94); padding: 17px; box-shadow: 0 24px 70px rgba(0, 0, 0, .42); backdrop-filter: blur(16px); }
.voice-signin-card > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; background: rgba(61, 224, 196, .12); color: var(--accent-main); }
.voice-signin-card > div { min-width: 0; }
.voice-signin-card strong { font-size: 11px; }
.voice-signin-card p { margin: 4px 0 0; color: var(--text-muted); font-size: 8px; line-height: 1.5; }
.voice-signin-card a { border-radius: 9px; background: var(--accent-main); color: var(--bg-primary); padding: 9px 12px; font-size: 8px; font-weight: 900; }
.voice-signin-card.unavailable { border-color: rgba(232, 93, 63, .35); }
.voice-signin-card.unavailable > span { background: rgba(232, 93, 63, .12); color: var(--alert); }

.incoming-call { position: fixed; top: 18px; right: 18px; z-index: 180; display: grid; width: min(430px, calc(100vw - 36px)); grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid rgba(61, 224, 196, .42); border-radius: 16px; background: linear-gradient(135deg, rgba(26, 42, 58, .98), rgba(5, 5, 5, .99)); padding: 12px; box-shadow: 0 22px 70px rgba(0, 0, 0, .5), 0 0 35px rgba(61, 224, 196, .08); backdrop-filter: blur(18px); }
.incoming-call-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-main); box-shadow: 0 0 0 5px rgba(61, 224, 196, .1), 0 0 15px rgba(61, 224, 196, .8); animation: incoming-call-pulse 1.4s ease-in-out infinite; }
.incoming-call-copy { display: grid; min-width: 0; gap: 2px; }
.incoming-call-copy small { color: var(--accent-main); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.incoming-call-copy strong, .incoming-call-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incoming-call-copy strong { font-size: 11px; }
.incoming-call-copy span { color: var(--text-muted); font-size: 8px; }
.incoming-call-actions { display: flex; gap: 5px; }
.incoming-call-actions .call-action { min-height: 32px; padding-inline: 10px; font-size: 8px; }
@keyframes incoming-call-pulse { 50% { opacity: .5; transform: scale(.78); } }

@media (max-width: 1120px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
  .chat-app { grid-template-columns: 72px 240px minmax(0, 1fr); }
  .member-sidebar { position: fixed; top: 0; right: 0; z-index: 60; width: 240px; height: 100dvh; transform: translateX(105%); box-shadow: -16px 0 45px rgba(0, 0, 0, .35); transition: transform .18s ease; }
  .member-sidebar.open { transform: translateX(0); }
  .member-sidebar > header button { display: block; }
}

@media (max-width: 800px) {
  .site-header { padding-inline: 14px; }
  .site-header nav > .nav-dashboard { display: none; }
  .dashboard-page main { padding-top: 30px; }
  .dashboard-welcome { align-items: flex-start; flex-direction: column; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-stats article + article { border-top: 1px solid var(--line); border-left: 0; }
  .dashboard-side { grid-template-columns: 1fr; }
  .friends-hero { align-items: flex-start; flex-direction: column; }
  .pending-grid { grid-template-columns: 1fr; }
  .discover-heading { align-items: flex-start; flex-direction: column; }
  .community-grid { grid-template-columns: 1fr; }
  .chat-app { grid-template-columns: 64px minmax(0, 1fr); }
  .direct-app { grid-template-columns: 64px minmax(0, 1fr); }
  .server-rail { padding-inline: 8px; }
  .brand-server, .server-orb { width: 45px; height: 45px; }
  .channel-sidebar { position: fixed; top: 0; bottom: 0; left: 64px; z-index: 50; width: min(280px, calc(100vw - 64px)); transform: translateX(-110%); box-shadow: 16px 0 45px rgba(0, 0, 0, .35); transition: transform .18s ease; }
  .channel-sidebar.open { transform: translateX(0); }
  .direct-sidebar { position: fixed; top: 0; bottom: 0; left: 64px; z-index: 50; width: min(280px, calc(100vw - 64px)); transform: translateX(-110%); box-shadow: 16px 0 45px rgba(0, 0, 0, .35); transition: transform .18s ease; }
  .direct-sidebar.open { transform: translateX(0); }
  .mobile-scrim.open { position: fixed; inset: 0; z-index: 40; display: block; cursor: pointer; background: rgba(0, 0, 0, .58); }
  .conversation-column { grid-column: 2; }
  .direct-home { grid-column: 2; }
  .mobile-menu { display: grid; }
  .settings-page main { padding-top: 28px; }
  .settings-hero { align-items: flex-start; flex-direction: column; }
  .settings-form { grid-template-columns: 1fr; }
  .settings-form .form-field:nth-of-type(2), .settings-form-actions { grid-column: 1; }
  .inline-create-form { grid-template-columns: 1fr 1fr; }
  .inline-create-form > button { grid-column: 1 / -1; }
  .management-row { align-items: start; }
  .member-controls { grid-column: 1 / -1; justify-content: flex-start; padding-left: 49px; }
  .call-participant.screen-sharing { grid-column: 1 / -1; }
  .category-management > header { align-items: flex-start; flex-direction: column; }
  .category-name-form { width: 100%; }
}

@media (max-width: 550px) {
  .site-brand > span:last-child { display: none; }
  .site-header nav > a, .site-header nav button { padding-inline: 9px; font-size: 10px; }
  .site-header nav > .nav-discover, .site-header nav > .nav-create, .site-header nav > .nav-profile { display: none; }
  .dashboard-page main { width: min(100% - 22px, 1320px); }
  .dashboard-welcome h1 { font-size: 34px; }
  .dashboard-welcome .primary-button { width: 100%; }
  .friends-page main { width: min(100% - 22px, 1120px); padding-top: 30px; }
  .friends-hero .primary-button { width: 100%; }
  .friends-panel > header { padding-inline: 14px; }
  .friend-row { grid-template-columns: auto minmax(0, 1fr); padding-inline: 8px; }
  .friend-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .friend-search-form { padding-inline: 14px; }
  .friend-search-form > div { align-items: stretch; flex-direction: column; }
  .friend-search-form input, .friend-search-form button { min-height: 36px; }
  .panel-heading { min-height: 72px; padding-inline: 15px; }
  .panel-actions { grid-template-columns: 1fr; }
  .panel-actions a + a { border-top: 1px solid var(--line); border-left: 0; }
  .account-panel { grid-template-columns: auto minmax(0, 1fr); }
  .account-panel > a { grid-column: 1 / -1; text-align: center; }
  .chat-app { grid-template-columns: minmax(0, 1fr); }
  .direct-app { grid-template-columns: minmax(0, 1fr); }
  .server-rail { display: none; }
  .channel-sidebar { left: 0; width: min(300px, 88vw); }
  .direct-sidebar { left: 0; width: min(300px, 88vw); }
  .conversation-column { grid-column: 1; grid-template-rows: 62px minmax(0, 1fr) auto; }
  .direct-conversation-column { grid-template-rows: 62px auto minmax(0, 1fr) auto; }
  .voice-conversation-column { grid-template-rows: 62px minmax(0, 1fr); }
  .direct-home { grid-column: 1; grid-template-rows: 62px minmax(0, 1fr); }
  .conversation-header { padding: 0 9px; }
  .channel-searchbox { width: auto; padding: 5px; }
  .channel-searchbox input { display: none; }
  .conversation-header > div small, .connection-badge b, .members-button { display: none; }
  .channel-welcome { padding: 31px 15px 17px; }
  .message-list { padding-inline: 5px; }
  .chat-message { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding-inline: 6px; }
  .message-avatar { width: 33px; height: 33px; border-radius: 11px; }
  .chat-message header { flex-wrap: wrap; }
  .message-actions { width: 100%; margin-left: 0; opacity: 1; }
  .composer-wrap { padding: 7px 8px 9px; }
  .guest-composer { align-items: stretch; flex-direction: column; }
  .guest-composer a { text-align: center; }
  .composer-wrap > p { display: none; }
  .composer-wrap > .typing-status { display: block; }
  .direct-home-scroll { padding: 0 13px 55px; }
  .direct-home-hero { padding-top: 34px; }
  .direct-search-form > div { flex-direction: column; padding: 7px; }
  .direct-search-form input { min-height: 36px; }
  .direct-search-form button { min-height: 36px; }
  .direct-member-grid { grid-template-columns: 1fr; }
  .direct-member-card { grid-template-columns: auto minmax(0, 1fr); }
  .direct-member-card form { grid-column: 2; }
  .direct-member-card button { width: 100%; }
  .direct-header-action button { padding-inline: 7px; font-size: 7px; }
  .direct-conversation-header .direct-header-action:not(.friend-action) { display: none; }
  .direct-call-button { padding-inline: 8px; }
  .direct-conversation-column > .call-stage { height: min(430px, 56dvh); }
  .call-stage-header { padding-inline: 10px; }
  .call-stage-status, .voice-privacy { display: none; }
  .call-participant-grid { grid-template-columns: 1fr; padding: 8px; }
  .call-controls { justify-content: flex-start; padding-inline: 8px; }
  .call-control { min-width: 62px; }
  .voice-signin-card { grid-template-columns: auto minmax(0, 1fr); }
  .voice-signin-card > a { grid-column: 1 / -1; text-align: center; }
  .incoming-call { top: 8px; right: 8px; width: calc(100vw - 16px); grid-template-columns: auto auto minmax(0, 1fr); }
  .incoming-call-actions { grid-column: 2 / -1; }
  .incoming-call-actions .call-action { flex: 1; }
  .blocked-composer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .member-row form { opacity: 1; }
  .settings-page main { width: min(100% - 22px, 1180px); }
  .settings-server-identity { align-items: flex-start; }
  .settings-server-identity .community-icon { width: 52px; height: 52px; border-radius: 16px; }
  .settings-hero .secondary-button { width: 100%; }
  .settings-nav { top: 70px; }
  .settings-panel > header, .management-row { padding-inline: 14px; }
  .settings-form, .inline-create-form { grid-template-columns: 1fr; padding-inline: 14px; }
  .inline-create-form > button { grid-column: 1; }
  .management-row { grid-template-columns: auto minmax(0, 1fr); }
  .management-row > a, .management-row > form, .management-row > .row-actions, .management-row > .permission-chip { grid-column: 2; justify-self: start; }
  .row-actions { flex-wrap: wrap; }
  .member-controls { padding-left: 0; }
  .member-controls form { width: 100%; flex-wrap: wrap; }
  .member-controls input, .member-controls select { min-width: 0; flex: 1; }
  .category-create-form { align-items: stretch; flex-direction: column; padding-inline: 14px; }
  .category-create-form label { min-width: 0; }
  .category-name-form { align-items: stretch; flex-direction: column; }
  .category-name-form input { width: 100%; }
  .order-controls { width: 100%; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Attachment styles */
.message-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.attachment-image { display: block; max-width: 320px; max-height: 240px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; }
.attachment-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.attachment-image:hover img { opacity: 0.9; }

/* Full-screen image viewer */
body.viewer-open { overflow: hidden; }
.image-viewer { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.image-viewer[hidden] { display: none; }
.image-viewer-backdrop { position: absolute; inset: 0; border: 0; border-radius: 0; cursor: zoom-out; background: rgba(4, 8, 12, 0.88); }
.image-viewer-frame { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(94vw, 1200px); max-height: 94vh; }
.image-viewer-stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 82vh; }
.image-viewer-stage img { max-width: 94vw; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }
.image-viewer-frame figcaption { display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 12px; max-width: 94vw; }
.image-viewer-name { color: var(--text-main); font-weight: 600; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-viewer-open { color: var(--accent-main); }
.image-viewer-close { background: transparent; border: 0; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 10px; border-radius: 6px; }
.image-viewer-close:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.08); }
.attachment-file { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: rgba(26, 42, 58, 0.6); border: 1px solid var(--line); max-width: 280px; transition: background 0.15s ease; }
.attachment-file:hover { background: rgba(61, 224, 196, 0.08); }
.attachment-icon { font-size: 20px; }
.attachment-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attachment-name { overflow: hidden; color: var(--text-primary); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size { color: var(--text-muted); font-size: 9px; }
.upload-button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; cursor: pointer; border-radius: 9px; background: rgba(61, 224, 196, 0.1); color: var(--text-secondary); transition: background 0.15s ease; }
.upload-button:hover { background: rgba(61, 224, 196, 0.2); color: var(--accent-main); }
.upload-button svg { width: 18px; height: 18px; }

.emoji-button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; cursor: pointer; border-radius: 9px; background: rgba(61, 224, 196, 0.1); color: var(--text-secondary); transition: background 0.15s ease; }

.emoji-button:hover { background: rgba(61, 224, 196, 0.2); color: var(--accent-main); }

.emoji-button svg { width: 18px; height: 18px; }
.attachment-preview { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.preview-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(26, 42, 58, 0.5); border: 1px solid var(--line-soft); }
.preview-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.preview-icon { font-size: 18px; }
.preview-name { max-width: 120px; overflow: hidden; color: var(--text-secondary); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.preview-remove { display: grid; width: 18px; height: 18px; place-items: center; cursor: pointer; border-radius: 50%; background: rgba(232, 93, 63, 0.2); color: var(--alert); font-size: 12px; line-height: 1; transition: background 0.15s ease; }
.preview-remove:hover { background: rgba(232, 93, 63, 0.4); }
.drop-overlay { position: absolute; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(5, 5, 5, 0.85); border: 2px dashed var(--accent-main); border-radius: 12px; pointer-events: none; }
.drop-overlay.visible { display: grid; }
.drop-message { padding: 20px 30px; border-radius: 12px; background: rgba(61, 224, 196, 0.1); color: var(--accent-main); font-size: 14px; font-weight: 700; }

/* Reactions */
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-pill { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; background: rgba(26, 42, 58, 0.4); padding: 2px 8px; font-size: 12px; transition: background 0.12s ease, border-color 0.12s ease; }
.reaction-pill:hover { background: rgba(61, 224, 196, 0.08); border-color: rgba(61, 224, 196, 0.3); }
.reaction-pill.reacted { background: rgba(61, 224, 196, 0.12); border-color: var(--accent-main); }
.reaction-pill.reacted:hover { background: rgba(61, 224, 196, 0.2); }
.reaction-emoji { font-size: 14px; line-height: 1; }
.reaction-count { color: var(--text-secondary); font-size: 10px; font-weight: 600; }
.reaction-pill.reacted .reaction-count { color: var(--accent-main); }
.reaction-add-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px dashed var(--line); border-radius: 8px; background: transparent; color: var(--text-muted); width: 28px; height: 24px; font-size: 14px; font-weight: 700; transition: background 0.12s ease, color 0.12s ease; }
.reaction-add-button:hover { background: rgba(61, 224, 196, 0.08); color: var(--accent-main); border-color: rgba(61, 224, 196, 0.3); }
.emoji-picker { position: fixed; z-index: 100; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--line); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); width: 330px; max-height: 380px; box-sizing: border-box; }
.emoji-option { display: grid; width: 36px; height: 36px; place-items: center; cursor: pointer; border: 0; border-radius: 8px; background: transparent; font-size: 20px; transition: background 0.1s ease; }
.emoji-option:hover { background: rgba(61, 224, 196, 0.12); }

.emoji-search { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.2); color: var(--text-main); font-size: 13px; outline: none; }

.emoji-search:focus { border-color: rgba(61, 224, 196, 0.5); }

.emoji-tabs { display: flex; flex-wrap: wrap; gap: 4px; max-height: 64px; overflow-y: auto; }

.emoji-tab { cursor: pointer; border: 1px solid transparent; border-radius: 999px; background: rgba(26, 42, 58, 0.4); color: var(--text-secondary); padding: 3px 10px; font-size: 11px; font-weight: 600; transition: background 0.12s ease, color 0.12s ease; }

.emoji-tab:hover { background: rgba(61, 224, 196, 0.12); color: var(--text-main); }

.emoji-tab.active { background: rgba(61, 224, 196, 0.18); color: var(--accent-main); border-color: rgba(61, 224, 196, 0.35); }

.emoji-body { overflow-y: auto; height: 236px; }

.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }

.emoji-option img.custom-emoji { width: 24px; height: 24px; }
.custom-sticker { width: 96px; height: 96px; border-radius: 8px; object-fit: contain; }
.emoji-grid .custom-sticker { width: 48px; height: 48px; }
.emoji-grid.sticker-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.emoji-grid.sticker-grid .custom-sticker { width: 100%; height: 88px; }
.emoji-grid.sticker-grid .sticker-option { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; width: 100%; height: auto; padding: 0; border: 0; background: transparent; }
.emoji-grid.sticker-grid .sticker-option:hover { background: rgba(255, 255, 255, .06); }
.emoji-section-head { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 8px 2px 4px; }

.emoji-empty { padding: 12px 6px; text-align: center; color: var(--text-muted); font-size: 13px; margin: 0; }

.reaction-emoji { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; }

.reaction-emoji img.custom-emoji { width: 18px; height: 18px; }

.custom-emoji { width: 22px; height: 22px; vertical-align: -4px; object-fit: contain; }

.mention-suggestion.emoji-suggestion img.custom-emoji { width: 20px; height: 20px; }

.settings-emoji-preview { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: rgba(0, 0, 0, 0.2); padding: 2px; }

/* Pinned messages */
.mute-form { display: inline-flex; }
.mute-button { display: grid; width: 30px; height: 30px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 16px; transition: background 0.12s ease, color 0.12s ease; }
.mute-button:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }
.mute-button.muted { color: var(--accent-main); }
.pins-button { display: grid; width: 30px; height: 30px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 16px; transition: background 0.12s ease, color 0.12s ease; }
.pins-button:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }
.chat-message.pinned { background: rgba(61, 224, 196, 0.04); border-left: 3px solid var(--accent-main); padding-left: 10px; }
.chat-message.pinned.highlight { background: rgba(61, 224, 196, 0.12); }
.pins-sidebar { display: none; flex-direction: column; width: 320px; height: 100dvh; position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg-primary); border-left: 1px solid var(--line); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); }
.pins-sidebar.open { display: flex; }
.pins-sidebar[hidden] { display: none !important; }
.pins-sidebar > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-secondary); }
.pins-sidebar > header button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; }
.pins-sidebar > header button:hover { color: var(--text-primary); }
.pins-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pins-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 20px; color: var(--text-muted); font-size: 13px; text-align: center; }
.pins-empty span { font-size: 28px; }
.pin-card { padding: 12px; border-radius: 8px; background: rgba(26, 42, 58, 0.4); border: 1px solid var(--line-soft); transition: border-color 0.12s ease; }
.pin-card:hover { border-color: var(--line); }
.pin-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pin-avatar { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; font-size: 10px; font-weight: 800; color: var(--bg-primary); flex-shrink: 0; }
.pin-card-header strong { font-size: 12px; color: var(--text-primary); }
.pin-card-header time { font-size: 10px; color: var(--text-muted); }
.pin-content { font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; margin: 0; }
.pin-actions { display: flex; gap: 8px; margin-top: 8px; }
.pin-actions button { cursor: pointer; border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; background: rgba(61, 224, 196, 0.1); color: var(--accent-main); border: 1px solid var(--line); transition: background 0.12s ease; }
.pin-actions button:hover { background: rgba(61, 224, 196, 0.2); }
.pin-actions .unpin-btn { background: rgba(232, 93, 63, 0.1); color: var(--alert); border-color: rgba(232, 93, 63, 0.2); }
.pin-actions .unpin-btn:hover { background: rgba(232, 93, 63, 0.2); }
[data-pin-message] { cursor: pointer; }
[data-pin-message].pinned { color: var(--accent-main); }

/* Message search */
.search-button { display: grid; width: 30px; height: 30px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 15px; transition: background 0.12s ease, color 0.12s ease; }
.search-button:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }

.threads-button, .notifications-link { display: grid; width: 30px; height: 30px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 16px; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; }
.threads-button:hover, .notifications-link:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }
.slowmode-badge { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); font-size: 11px; font-weight: 600; white-space: nowrap; }
.search-overlay { display: flex; flex-direction: column; width: 340px; max-width: 90vw; max-height: 72vh; position: fixed; top: 56px; right: 14px; z-index: 60; background: var(--bg-primary); border: 1px solid var(--line); border-radius: 12px; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); overflow: hidden; }
.search-overlay[hidden] { display: none !important; }
.search-overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-secondary); }
.search-overlay-head button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; border: none; }
.search-overlay-head button:hover { color: var(--text-primary); }
.search-form { display: flex; gap: 8px; padding: 10px 12px; }
.search-form input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-elevated, rgba(26, 42, 58, 0.4)); color: var(--text-primary); font-size: 13px; outline: none; }
.search-form input:focus { border-color: var(--accent-main); }
.search-form button { cursor: pointer; border-radius: 8px; padding: 0 14px; font-size: 12px; font-weight: 600; background: rgba(61, 224, 196, 0.12); color: var(--accent-main); border: 1px solid var(--line); transition: background 0.12s ease; }
.search-form button:hover { background: rgba(61, 224, 196, 0.22); }
.search-results { flex: 1; overflow-y: auto; padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.search-empty, .search-noresults { color: var(--text-muted); font-size: 13px; text-align: center; padding: 24px 12px; }
.search-result { padding: 10px 12px; border-radius: 8px; background: rgba(26, 42, 58, 0.4); border: 1px solid var(--line-soft); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.search-result:hover { border-color: var(--accent-main); background: rgba(61, 224, 196, 0.05); }
.search-result-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.search-avatar { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; font-size: 10px; font-weight: 800; color: var(--bg-primary); flex-shrink: 0; }
.search-result-head strong { font-size: 12px; color: var(--text-primary); }
.search-result-head time { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.search-result-content { font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; margin: 0; }
.search-result-content mark { background: rgba(61, 224, 196, 0.25); color: var(--text-primary); border-radius: 3px; }
.search-filters { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 8px; }
.search-filters input { flex: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-elevated, rgba(26, 42, 58, 0.4)); color: var(--text-primary); font-size: 12px; outline: none; }
.search-filters input:focus { border-color: var(--accent-main); }
.search-hint { margin: 0; padding: 0 14px 10px; font-size: 10.5px; line-height: 1.7; color: var(--text-muted); }
.search-hint code { background: rgba(26, 42, 58, 0.5); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 4px; }
.search-result-context { margin: 4px 0 0; font-size: 11px; color: var(--accent-main); }
.search-more { display: block; width: 100%; padding: 8px; margin-top: 2px; border-radius: 8px; border: 1px solid var(--line); background: rgba(61, 224, 196, 0.08); color: var(--accent-main); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s ease; }
.search-more:hover { background: rgba(61, 224, 196, 0.18); }
.search-more[disabled] { opacity: 0.6; cursor: default; }
.global-search { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding: 9vh 16px 16px; background: rgba(5, 5, 5, 0.55); }
.global-search[hidden] { display: none !important; }
.global-search-card { display: flex; flex-direction: column; width: 560px; max-width: 100%; max-height: 76vh; background: var(--bg-primary); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); overflow: hidden; }
.global-search-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-secondary); }
.global-search-head button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; border: none; }
.global-search-head button:hover { color: var(--text-primary); }
.global-search .search-results { min-height: 120px; }
.global-search-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; cursor: pointer; border-radius: 9px; background: transparent; color: var(--text-secondary); padding: 0 12px; font-size: 15px; }
.global-search-button:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }

/* Threads */
.thread-sidebar { display: flex; flex-direction: column; width: 340px; max-width: 90vw; position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; background: var(--bg-primary); border-left: 1px solid var(--line); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4); }
.thread-sidebar[hidden] { display: none !important; }
.thread-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-secondary); }
.thread-sidebar-head button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; border: none; }
.thread-sidebar-head button:hover { color: var(--text-primary); }
.thread-root { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); background: rgba(26, 42, 58, 0.3); }
.thread-root-card { display: flex; flex-direction: column; gap: 6px; }
.thread-root-head { display: flex; align-items: center; gap: 8px; }
.thread-root-avatar { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; font-size: 10px; font-weight: 800; color: var(--bg-primary); flex-shrink: 0; }
.thread-root-head strong { font-size: 12px; color: var(--text-primary); }
.thread-root-content { font-size: 13px; color: var(--text-muted); line-height: 1.45; word-break: break-word; margin: 0; }
.thread-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.thread-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; color: var(--text-muted); font-size: 13px; text-align: center; }
.thread-empty span { font-size: 26px; }
.thread-message { padding: 8px 10px; border-radius: 8px; background: rgba(26, 42, 58, 0.4); border: 1px solid var(--line-soft); }
.thread-message.deleted { opacity: 0.55; }
.thread-message-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.thread-message-avatar { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; font-size: 9px; font-weight: 800; color: var(--bg-primary); flex-shrink: 0; }
.thread-message-head strong { font-size: 12px; color: var(--text-primary); }
.thread-message-head time { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.thread-message-content { position: relative; font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; margin: 0; padding-right: 24px; }
.thread-message-delete { position: absolute; top: -4px; right: -4px; cursor: pointer; background: transparent; color: var(--text-muted); border: none; font-size: 15px; line-height: 1; border-radius: 6px; padding: 2px 5px; }
.thread-message-delete:hover { background: rgba(232, 93, 63, 0.15); color: var(--alert); }
.thread-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); }
.thread-composer textarea { flex: 1; resize: none; min-height: 38px; max-height: 100px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-elevated, rgba(26, 42, 58, 0.4)); color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; }
.thread-composer textarea:focus { border-color: var(--accent-main); }
.thread-composer button { cursor: pointer; border-radius: 9px; padding: 0 16px; height: 38px; font-size: 12px; font-weight: 700; background: var(--accent-main); color: var(--bg-primary); border: none; transition: opacity 0.12s ease; }
.thread-composer button:hover { opacity: 0.9; }
.thread-composer .upload-button { width: 34px; height: 34px; padding: 0; background: rgba(61, 224, 196, 0.1); color: var(--text-secondary); transition: background 0.15s ease, color 0.15s ease; }
.thread-composer .upload-button:hover { background: rgba(61, 224, 196, 0.2); color: var(--accent-main); opacity: 1; }
.thread-message-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.thread-react-button { display: grid; width: 26px; height: 24px; place-items: center; cursor: pointer; border: 1px solid var(--line-soft); border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 12px; line-height: 1; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.thread-react-button:hover { background: rgba(61, 224, 196, 0.08); color: var(--accent-main); border-color: rgba(61, 224, 196, 0.3); }
.thread-message-actions .thread-message-delete { position: static; display: grid; width: 26px; height: 24px; place-items: center; padding: 0; font-size: 14px; border: 1px solid var(--line-soft); border-radius: 8px; }
.thread-message-actions .thread-message-delete:hover { background: rgba(232, 93, 63, 0.15); color: var(--alert); border-color: rgba(232, 93, 63, 0.3); }

.thread-indicator { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: rgba(64, 141, 190, 0.14); color: var(--accent-light, var(--text-secondary)); border: 1px solid rgba(64, 141, 190, 0.25); border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600; line-height: 1.4; transition: background 0.12s ease, border-color 0.12s ease; }
.thread-indicator:hover { background: rgba(64, 141, 190, 0.26); }

.threadlist-panel { position: absolute; top: 46px; right: 12px; z-index: 50; width: 300px; max-width: calc(100vw - 24px); background: var(--bg-primary); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); overflow: hidden; }
.threadlist-panel[hidden] { display: none !important; }
.threadlist-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-secondary); }
.threadlist-head button { cursor: pointer; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; border: none; }
.threadlist-head button:hover { color: var(--text-primary); }
.threadlist-body { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; padding: 6px; }
.threadlist-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 12px; color: var(--text-muted); font-size: 12px; text-align: center; }
.threadlist-empty span { font-size: 22px; }
.threadlist-item { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; background: transparent; color: var(--text-primary); border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 11px; margin-bottom: 4px; font-family: inherit; transition: background 0.12s ease, border-color 0.12s ease; }
.threadlist-item:hover { background: rgba(64, 141, 190, 0.12); border-color: var(--accent-main); }
.threadlist-item-title { font-size: 13px; font-weight: 600; line-height: 1.35; word-break: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.threadlist-item-meta { font-size: 11px; color: var(--text-muted); }

/* Reply threading */
.message-reply-context { display: flex; align-items: baseline; gap: 6px; max-width: 820px; margin-top: 6px; padding: 4px 8px; border-left: 3px solid var(--accent-main); border-radius: 4px; background: rgba(61, 224, 196, 0.06); color: var(--text-muted); font-size: 11px; line-height: 1.4; text-decoration: none; }
.message-reply-context span { color: var(--accent-main); font-weight: 700; white-space: nowrap; }
.message-reply-context strong { color: var(--text-secondary); font-weight: 700; }
.message-reply-context q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.message-reply-context q::before, .message-reply-context q::after { content: none; }
.message-reply-context:hover { background: rgba(61, 224, 196, 0.12); }
.reply-preview { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line-soft); border-left: 3px solid var(--accent-main); background: rgba(61, 224, 196, 0.06); color: var(--text-muted); font-size: 11px; }
.reply-preview-icon { color: var(--accent-main); font-weight: 800; }
.reply-preview [data-reply-preview-copy] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview[hidden], .attachment-preview[hidden] { display: none !important; }
.reply-preview button { display: grid; width: 20px; height: 20px; place-items: center; cursor: pointer; border-radius: 50%; background: rgba(136, 136, 136, 0.15); color: var(--text-secondary); font-size: 14px; line-height: 1; }
.reply-preview button:hover { background: rgba(232, 93, 63, 0.3); color: var(--alert); }

/* Mention autocomplete */
.mention-suggestions { z-index: 120; width: 280px; max-height: 260px; overflow-y: auto; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); padding: 6px; }
.mention-list { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.mention-suggestion { display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer; border-radius: 8px; background: transparent; padding: 7px 8px; text-align: left; }
.mention-suggestion:hover, .mention-suggestion.active { background: rgba(61, 224, 196, 0.12); }
.mention-special-mark, .mention-avatar { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 8px; font-size: 11px; font-weight: 850; color: var(--bg-primary); background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); }
.mention-label { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.mention-sub { flex: 1; overflow: hidden; font-size: 10px; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.mention-online { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.mention-online.online { background: var(--accent-main); box-shadow: 0 0 6px rgba(61, 224, 196, 0.6); }

.notifications-shell { max-width: 640px; margin: 40px auto; padding: 0 20px; }
.notifications-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.notifications-head strong { font-size: 18px; color: var(--text-primary); }
.notifications-head small { font-size: 12px; color: var(--text-muted); }
.notifications-head form { margin-left: auto; }
.notifications-head button { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-4); color: var(--accent-main); font-size: 13px; font-weight: 700; cursor: pointer; }
.notifications-head button:hover { background: rgba(61, 224, 196, 0.12); }
.notifications-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.notification-item { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.notification-item.unread { border-color: rgba(61, 224, 196, 0.45); background: rgba(61, 224, 196, 0.05); }
.notification-link, .notification-plain { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.notification-link:hover { background: rgba(61, 224, 196, 0.06); }
.notification-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 850; color: var(--bg-primary); background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); }
.notification-body { display: grid; gap: 2px; min-width: 0; }
.notification-body strong { font-size: 13px; color: var(--text-primary); }
.notification-body em { font-style: normal; font-size: 11px; color: var(--text-secondary); }
.notification-kind { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-main); }
.notification-body p { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; word-break: break-word; }
.notifications-empty { color: var(--text-muted); text-align: center; padding: 40px 20px; font-size: 14px; }

.bell-wrap { position: relative; display: inline-block; z-index: 100; }
.bell-button, .notifications-link { position: relative; }
.bell-badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #f23f43; color: #fff; font-size: 11px; font-weight: 700; font-weight: 850; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg-primary); }
.bell-dropdown { position: absolute; top: 40px; right: 0; z-index: 120; width: 320px; max-width: calc(100vw - 24px); background: #050505; background-color: #050505; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; }
.bell-dropdown[hidden] { display: none !important; }
.bell-dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.bell-dropdown-head strong { font-size: 13px; color: var(--text-primary); }
.bell-dropdown-head button { border: none; background: none; color: var(--accent-main); font-size: 12px; font-weight: 700; cursor: pointer; }
.bell-dropdown-head button:hover { text-decoration: underline; }
.bell-list { list-style: none; margin: 0; padding: 4px 0; max-height: 360px; overflow-y: auto; }
.bell-item { border-bottom: 1px solid var(--line); padding: 10px 14px; font-size: 14px; }
.bell-item:last-child { border-bottom: none; }
.bell-item-link, .bell-item-plain { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; color: inherit; text-decoration: none; }
.bell-item-link:hover { background: rgba(61, 224, 196, 0.08); }
.bell-item-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 850; color: var(--bg-primary); background: linear-gradient(145deg, var(--accent-main), var(--accent-alt)); }
.bell-item-body { display: grid; gap: 1px; min-width: 0; }
.bell-item-body strong { font-size: 12px; color: var(--text-primary); }
.bell-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-main); }
.bell-item-body p { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); line-height: 1.4; word-break: break-word; }
.bell-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.bell-dropdown-foot { display: block; padding: 10px 14px; border-top: 1px solid var(--line); text-align: center; color: var(--accent-main); font-size: 12px; font-weight: 700; text-decoration: none; }
.bell-dropdown-foot:hover { background: rgba(61, 224, 196, 0.08); }

.purge-wrap { position: relative; display: inline-block; z-index: 100; }
.purge-button { display: grid; width: 30px; height: 30px; place-items: center; cursor: pointer; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 15px; transition: background 0.12s ease, color 0.12s ease; }
.purge-button:hover { background: rgba(61, 224, 196, 0.1); color: var(--accent-main); }
.purge-menu { position: absolute; top: 40px; right: 0; z-index: 120; width: 320px; max-width: calc(100vw - 24px); background: #050505; background-color: #050505; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); overflow: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; }
.purge-menu[hidden] { display: none !important; }
.purge-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.purge-menu-head strong { font-size: 13px; color: var(--text-primary); }
.purge-menu-head button { border: none; background: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 0 4px; }
.purge-menu-head button:hover { color: var(--text-primary); }
.purge-form { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.purge-form:last-of-type { border-bottom: none; }
.purge-count-line { display: flex; align-items: center; gap: 6px; color: var(--text-primary); font-size: 13px; flex-wrap: wrap; }
.purge-count { width: 60px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-secondary); color: var(--text-primary); }
.purge-member { max-width: 160px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-secondary); color: var(--text-primary); }
.purge-reason { width: 100%; margin-top: 8px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-secondary); color: var(--text-primary); font-size: 12px; box-sizing: border-box; }
.purge-submit { margin-top: 8px; padding: 6px 12px; border: none; border-radius: 7px; background: var(--accent-alt); color: var(--bg-primary); font-size: 12px; font-weight: 800; cursor: pointer; }
.purge-submit:hover { opacity: 0.9; }

/* Custom roles */
.role-create-form, .inline-form, .custom-role-toggles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.role-create-form { margin-bottom: 14px; }
.role-create-form input[type="text"], .inline-form input[type="text"] { width: auto; }
.role-create-form input[type="color"], .inline-form input[type="color"] { width: 40px; height: 32px; padding: 2px; background: var(--bg-surface); border: 1px solid var(--line); border-radius: 6px; }
.role-create-form label, .inline-form label { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--text-secondary); }
.default-role-toggle { flex-wrap: nowrap !important; }
.default-role-toggle label { cursor: pointer; white-space: nowrap; }
.default-role-toggle input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
.role-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.role-color-swatch { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.3); }
.role-on { border-color: var(--role-color, var(--accent-main)); color: var(--role-color, var(--accent-main)); }
.custom-role-toggles button { padding: 4px 8px; font-size: 11px; }
.role-badge { color: var(--role-color, #99aab5); }

.settings-shell-narrow .settings-layout { max-width: 920px; }
.permission-edit-form { display: grid; gap: 4px; padding: 20px; }
.permission-toggle { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line-soft); border-radius: 8px; font-size: 11px; cursor: pointer; }
.permission-toggle + .permission-toggle { margin-top: 0; }
.permission-toggle:hover { background: rgba(61, 224, 196, .04); }
.permission-toggle input { accent-color: var(--accent-main); }
.permission-edit-form .settings-form-actions { padding-inline: 0; }

.channel-perm-table-wrap { overflow-x: auto; padding: 6px 20px 0; }
.channel-perm-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.channel-perm-table th, .channel-perm-table td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); font-size: 9px; text-align: center; vertical-align: middle; }
.channel-perm-table th:first-child { color: var(--text-secondary); text-align: left; min-width: 150px; }
.channel-perm-table thead th { background: rgba(61, 224, 196, .055); color: var(--text-muted); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.channel-perm-table th .role-color-swatch { display: inline-block; margin-right: 8px; vertical-align: middle; }
.channel-perm-table select { border: 1px solid var(--line); border-radius: 7px; background: var(--bg-primary); color: var(--text-primary); padding: 6px 7px; font-size: 9px; max-width: 110px; }
.channel-perm-table select option[value="allow"] { color: #2fbf71; }
.channel-perm-table select option[value="deny"] { color: var(--alert); }

.settings-sub-list { padding: 6px 20px 20px; }
.settings-sub-list .management-row { grid-template-columns: auto minmax(0, 1fr) auto; }

.server-banner { height: 9px; width: 100%; flex: 0 0 auto; opacity: .5; }

.forum-page .conversation-column { min-width: 0; }
.forum-scroll { flex: 1 1 auto; overflow-y: auto; padding: 22px 26px; }
.forum-error { flex: 0 0 auto; margin: 6px 0; padding: 8px 12px; border: 1px solid rgba(232, 93, 63, .55); border-radius: 8px; background: rgba(232, 93, 63, .1); color: var(--alert); font-size: 13px; }
.forum-head { margin-bottom: 18px; }
.forum-head h1 { margin: 4px 0 2px; font-size: 22px; }
.forum-head p { margin: 0; color: var(--text-muted); }
.forum-composer { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; }
.forum-composer summary { cursor: pointer; padding: 10px 14px; font-weight: 600; }
.forum-composer form { display: grid; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.forum-composer input[type="text"], .forum-composer textarea {
  width: 100%; box-sizing: border-box; background: var(--bg-primary); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
.forum-composer button, .forum-reply-form button { justify-self: end; }
.forum-list { display: flex; flex-direction: column; gap: 8px; }
.forum-post-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--text);
}
.forum-post-link:hover { border-color: var(--accent-main); }
.forum-post-icon { font-size: 22px; width: 34px; text-align: center; }
.forum-post-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forum-post-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-post-main small { color: var(--text-muted); }
.forum-post-last { color: var(--text-muted); font-size: 12px; }
.forum-empty { text-align: center; padding: 40px 0; color: var(--text-muted); }
.forum-empty span { font-size: 34px; display: block; margin-bottom: 8px; }
.forum-post { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.forum-post-head { margin-bottom: 14px; }
.forum-back { color: var(--accent-alt); text-decoration: none; font-size: 13px; }
.forum-post-head h2 { margin: 6px 0 2px; font-size: 20px; }
.forum-post-head small { color: var(--text-muted); }
.inline-form { display: inline; }
.link-danger { background: none; border: none; color: var(--alert); cursor: pointer; text-decoration: underline; padding: 0; }
.forum-messages { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 16px; }
.forum-message { display: flex; gap: 10px; }
.forum-message > div { min-width: 0; }
.forum-message header { display: flex; gap: 8px; align-items: baseline; }
.forum-message time { color: var(--text-muted); font-size: 12px; }
.message-content { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-reply-form { display: flex; gap: 8px; align-items: flex-end; }
.forum-reply-form textarea {
  flex: 1 1 auto; resize: vertical; background: var(--bg-primary); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-width: 0;
}

.voice-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: #0b0d10; border-top: 1px solid var(--line);
  color: var(--text); font-size: 14px;
}
.voice-bar[hidden] { display: none; }
.voice-bar-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.voice-bar-dot { width: 10px; height: 10px; border-radius: 50%; background: #4f5660; flex: none; }
.voice-bar.connected .voice-bar-dot { background: #23a55a; }
.voice-bar-identity strong { display: block; line-height: 1.15; }
.voice-bar-identity small { color: var(--text-muted); display: block; }
.voice-bar-actions { margin-left: auto; display: flex; gap: 8px; }
.voice-bar-join, .voice-bar-leave {
  border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-weight: 600;
}
.voice-bar-join { background: #5865f2; color: #fff; }
.voice-bar-leave { background: #da373c; color: #fff; }
.voice-bar-status { color: var(--text-muted); font-size: 13px; }
.voice-bar-status.error { color: #f23f42; }

/* ===== Theme system (D-26) ===== */
.theme-toggle { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; cursor: pointer; border-radius: 9px; background: transparent; color: var(--text-secondary); padding: 0 12px; font-size: 15px; }
.theme-toggle:hover { background: rgba(61, 224, 196, .1); color: var(--accent-main); }

/* Light theme */
:root[data-theme="light"] {
  --bg-primary: #f4f6f8;
  --bg-secondary: #e6ebf0;
  --accent-main: #0e8f7d;
  --accent-alt: #007b6f;
  --bg-depth: #dce3ea;
  --text-primary: #101418;
  --text-secondary: #3a434d;
  --text-muted: #6b7683;
  --alert: #d64532;
  --line: rgba(14, 143, 125, 0.18);
  --line-soft: rgba(16, 20, 24, 0.12);
  --surface: rgba(230, 235, 240, 0.85);
  --surface-strong: #e6ebf0;
  --ink-0: var(--bg-primary);
  --ink-1: var(--bg-primary);
  --ink-2: var(--bg-primary);
  --ink-3: var(--bg-depth);
  --ink-4: rgba(14, 143, 125, 0.1);
  --muted: var(--text-muted);
  --soft: var(--text-secondary);
  --text: var(--text-primary);
  --violet: var(--accent-main);
  --violet-bright: var(--accent-main);
  --cyan: var(--accent-alt);
  --rose: var(--alert);
  --amber: var(--alert);
  --bg-elevated: rgba(16, 20, 24, 0.05);
  color-scheme: light;
}
:root[data-theme="light"] body {
  background: radial-gradient(circle at 78% 4%, rgba(14, 143, 125, 0.08), transparent 34%), var(--bg-primary);
}
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .conversation-header,
:root[data-theme="light"] .settings-nav {
  background: rgba(244, 246, 248, 0.94);
}
:root[data-theme="light"] .conversation-column,
:root[data-theme="light"] .direct-home {
  background: var(--bg-primary);
}
:root[data-theme="light"] .dashboard-panel,
:root[data-theme="light"] .community-card,
:root[data-theme="light"] .form-card,
:root[data-theme="light"] .settings-panel,
:root[data-theme="light"] .friends-panel,
:root[data-theme="light"] .direct-member-card,
:root[data-theme="light"] .incoming-call {
  background: linear-gradient(145deg, rgba(230, 235, 240, 0.96), rgba(244, 246, 248, 0.99));
}
:root[data-theme="light"] .call-stage {
  background: radial-gradient(circle at 50% 0, rgba(14, 143, 125, 0.1), transparent 38%), linear-gradient(160deg, rgba(230, 235, 240, 0.98), rgba(244, 246, 248, 0.99));
}
:root[data-theme="light"] .dashboard-stats,
:root[data-theme="light"] .friends-tabs,
:root[data-theme="light"] .member-search,
:root[data-theme="light"] .emoji-tab,
:root[data-theme="light"] .preview-item,
:root[data-theme="light"] .attachment-file,
:root[data-theme="light"] .reaction-pill,
:root[data-theme="light"] .pin-card,
:root[data-theme="light"] .search-result,
:root[data-theme="light"] .thread-root,
:root[data-theme="light"] .thread-message,
:root[data-theme="light"] .call-control,
:root[data-theme="light"] .call-setting-row select {
  background: rgba(16, 20, 24, 0.05);
  border-color: var(--line);
}
:root[data-theme="light"] .member-row:hover,
:root[data-theme="light"] .search-form input,
:root[data-theme="light"] .search-filters input,
:root[data-theme="light"] .thread-composer textarea,
:root[data-theme="light"] .guest-composer {
  background: rgba(16, 20, 24, 0.06);
  border-color: var(--line-soft);
}
:root[data-theme="light"] .global-search { background: rgba(16, 20, 24, 0.35); }
:root[data-theme="light"] .global-search-card { background: var(--bg-primary); }
:root[data-theme="light"] .search-hint code { background: rgba(16, 20, 24, 0.06); border-color: var(--line-soft); }
:root[data-theme="light"] .call-participant {
  background: rgba(16, 20, 24, 0.06);
}
:root[data-theme="light"] .emoji-picker {
  background: var(--bg-secondary);
}
:root[data-theme="light"] .bell-dropdown {
  background: var(--bg-secondary);
  background-color: var(--bg-secondary);
}
:root[data-theme="light"] .purge-menu {
  background: var(--bg-secondary);
  background-color: var(--bg-secondary);
}
:root[data-theme="light"] .site-header nav > a:hover,
:root[data-theme="light"] .site-header nav button:hover,
:root[data-theme="light"] .site-header nav > a.active {
  background: rgba(14, 143, 125, 0.12);
}
:root[data-theme="light"] .mentions-badge,
:root[data-theme="light"] .nav-cta,
:root[data-theme="light"] .guest-composer a,
:root[data-theme="light"] .skip-link:focus {
  color: #ffffff;
}

/* Dashboard header — mockup stylesheet applied (scoped to the dashboard page) */
.pack-header { position: sticky; top: 0; z-index: 100; width: 100%; background: rgba(5, 5, 5, 0.95); border-bottom: 1px solid var(--border-strong); }
.pack-header .nav-container { display: flex; width: min(1400px, 94%); min-height: 76px; align-items: center; gap: 30px; margin: 0 auto; }
.pack-header .brand { display: flex; min-width: 170px; align-items: center; gap: 10px; }
.pack-header .brand-wolf { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.pack-header .brand strong { display: block; color: var(--accent-main); font-size: 18px; letter-spacing: 2px; }
.pack-header .brand small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; }
.pack-header .nav-links { display: flex; flex: 1; align-items: center; gap: 6px; }
.pack-header .nav-links a { border-radius: 8px; padding: 10px 13px; color: var(--text-secondary); font-size: 14px; transition: background 0.2s ease, color 0.2s ease; }
.pack-header .nav-links a:hover { background: rgba(61, 224, 196, 0.08); color: var(--text-primary); }
.pack-header .nav-links a.active { background: rgba(61, 224, 196, 0.12); color: var(--accent-main); }
.pack-header .nav-container > .bell-wrap { margin-left: auto; }
.pack-header .nav-container form { display: flex; margin: 0; }
.pack-header .logout-button { border: 1px solid rgba(232, 93, 63, 0.4); border-radius: 8px; padding: 9px 16px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 13px; transition: 0.2s ease; }
.pack-header .logout-button:hover { border-color: var(--alert); background: rgba(232, 93, 63, 0.1); color: #fff; }

@media (max-width: 1120px) {
  .pack-header .nav-links { gap: 2px; }
  .pack-header .nav-links a { padding: 9px 8px; font-size: 12px; }
}

@media (max-width: 800px) {
  .pack-header .nav-container { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
  .pack-header .brand { min-width: 0; }
  .pack-header .logout-button { margin-left: auto; }
  .pack-header .nav-links { order: 3; width: 100%; overflow-x: auto; padding-bottom: 3px; }
  .pack-header .nav-links a { white-space: nowrap; }
}

@media (max-width: 520px) {
  .pack-header .nav-container { width: calc(100% - 20px); }
}

/* Dashboard layout — mockup stylesheet applied (scoped to the dashboard page) */
.dashboard-page main { width: min(1400px, calc(100% - 32px)); padding: 30px 0 40px; }
.dashboard-page .site-header { border-bottom-color: var(--border-strong); }
.dashboard-container { display: grid; grid-template-columns: 260px minmax(0, 1.7fr) minmax(280px, 1.1fr); gap: 18px; align-items: start; }
.left-column, .center-column, .right-column { display: flex; min-width: 0; flex-direction: column; gap: 18px; }

.dashboard-page .dashboard-panel,
.dashboard-page .welcome-panel {
  background: linear-gradient(145deg, rgba(26, 42, 58, 0.96), rgba(15, 23, 32, 0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
:root[data-theme="light"] .dashboard-page .welcome-panel { background: var(--bg-primary); border-color: var(--line); }

.dashboard-page .panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; }
.dashboard-page .panel-header h2 { margin: 0; color: var(--text-primary); font-size: 17px; font-weight: 700; }
.dashboard-page .panel-header p { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.dashboard-page .panel-header > a { flex: 0 0 auto; align-self: baseline; color: var(--accent-main); font-size: 11px; font-weight: 700; }
.dashboard-page .panel-header > a:hover { color: var(--text-primary); }

.dashboard-page .welcome-panel { min-height: 180px; display: flex; align-items: center; padding: 34px; position: relative; border-color: var(--border-strong); }
.dashboard-page .welcome-panel::before { content: ""; position: absolute; width: 240px; height: 240px; top: -130px; right: -60px; border-radius: 50%; background: var(--accent-main); opacity: 0.06; filter: blur(10px); }
.dashboard-page .welcome-content { position: relative; z-index: 1; max-width: 720px; }
.dashboard-page .welcome-label { color: var(--accent-main); font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.dashboard-page .welcome-content h1 { margin: 8px 0 0; color: var(--text-primary); font-size: clamp(25px, 3vw, 34px); line-height: 1.15; }
.dashboard-page .welcome-content p { margin: 12px 0 0; max-width: 650px; color: var(--text-secondary); line-height: 1.6; font-size: 14px; }
.dashboard-page .welcome-content .primary-button { margin-top: 16px; }

.dashboard-page .dashboard-stats .status-ready i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-main); }

.dashboard-page .den-list { display: flex; flex-direction: column; padding: 4px 10px 10px; }
.dashboard-page .den-item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 9px; transition: 0.2s ease; }
.dashboard-page .den-item:hover { background: rgba(61, 224, 196, 0.08); }
.dashboard-page .den-item .community-icon { width: 38px; height: 38px; border-radius: 9px; font-size: 11px; }
.dashboard-page .den-info { min-width: 0; flex: 1; }
.dashboard-page .den-info strong { display: block; overflow: hidden; color: var(--text-primary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-page .den-info span { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.dashboard-page .online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-main); box-shadow: 0 0 7px rgba(61, 224, 196, 0.7); }
.dashboard-page .create-den-button { display: block; width: calc(100% - 20px); margin: 5px 10px 15px; padding: 11px; border: 1px dashed var(--border-strong); border-radius: 8px; background: transparent; color: var(--accent-main); cursor: pointer; font-size: 12px; text-align: center; transition: 0.2s ease; }
.dashboard-page .create-den-button:hover { background: rgba(61, 224, 196, 0.08); border-style: solid; }

.dashboard-page .feed-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px; }
.dashboard-page .feed-header h2 { margin: 0; color: var(--text-primary); font-size: 17px; font-weight: 700; }
.dashboard-page .feed-header p { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; }
.dashboard-page .feed-list { padding: 0; }
.dashboard-page .feed-item { display: flex; gap: 13px; padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
:root[data-theme="light"] .dashboard-page .feed-item { border-color: var(--line-soft); }
.dashboard-page .feed-item > .avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; }
.dashboard-page .feed-content { min-width: 0; flex: 1; }
.dashboard-page .feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.dashboard-page .feed-meta strong { color: var(--text-primary); }
.dashboard-page .feed-meta span, .dashboard-page .feed-meta time { color: var(--text-muted); }
.dashboard-page .feed-meta time { margin-left: auto; }
.dashboard-page .feed-content > p { margin: 8px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }

.dashboard-page .thread-list { padding: 3px 10px 10px; }
.dashboard-page .session-list { padding: 1px 20px 8px; }
.dashboard-page .thread-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px; border-radius: 8px; transition: 0.2s ease; }
.dashboard-page .thread-item:hover { background: rgba(61, 224, 196, 0.07); }
.dashboard-page .thread-item strong { overflow: hidden; color: var(--text-primary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-page .thread-item span { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; }
.dashboard-page .panel-link { display: block; padding: 0 20px 18px; color: var(--accent-main); font-size: 12px; }
.dashboard-page .panel-link:hover { text-decoration: underline; }

.dashboard-page .member-list { padding: 0 10px 12px; }
.dashboard-page .member { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; transition: 0.2s ease; }
.dashboard-page .member:hover { background: rgba(61, 224, 196, 0.07); }
.dashboard-page .member-avatar { display: grid; width: 35px; height: 35px; flex-shrink: 0; place-items: center; border-radius: 50%; background: var(--bg-depth); border: 1px solid var(--border); color: var(--accent-main); font-size: 12px; font-weight: 700; }
.dashboard-page .member-info strong { display: block; color: var(--text-primary); font-size: 13px; }
.dashboard-page .member-info small { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--text-muted); font-size: 10px; }

.dashboard-footer { padding: 25px 20px 35px; text-align: center; color: var(--text-muted); font-size: 11px; }
.dashboard-footer p { margin: 0; }

@media (max-width: 1120px) {
  .dashboard-container { grid-template-columns: 230px minmax(0, 1fr); }
  .right-column { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 800px) {
  .dashboard-container { grid-template-columns: 1fr; margin-top: 20px; }
  .right-column { grid-column: auto; display: flex; }
}

@media (max-width: 520px) {
  .dashboard-container { gap: 12px; }
  .dashboard-page .welcome-panel { min-height: 160px; padding: 25px 20px; }
  .dashboard-page .welcome-content h1 { font-size: 25px; }
  .dashboard-page .feed-header { align-items: flex-start; flex-direction: column; }
  .dashboard-page .feed-item { padding: 16px; }
  .dashboard-page .feed-meta { display: block; }
  .dashboard-page .feed-meta span, .dashboard-page .feed-meta time { margin-left: 4px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard navigation — visible focus rings */
:focus-visible {
  outline: 2px solid var(--accent-main);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Audit log (server settings) */
.audit-kind-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.audit-kind-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface-2);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  text-decoration: none;
}
.audit-kind-badge span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--background); color: var(--text-muted); font-size: 11px;
  font-weight: 700;
}
.audit-kind-badge:hover { border-color: var(--accent-main); color: var(--text-primary); }
.audit-kind-badge.is-active { border-color: var(--accent-main); background: rgba(var(--accent-rgb, 56, 132, 255), 0.12); color: var(--accent-main); }
.audit-kind-badge.is-active span { background: var(--accent-main); color: var(--surface-1); }
.audit-kind-badge.is-clear { border-style: dashed; }

.audit-filter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.audit-filter-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.4px; }
.audit-filter-form label input, .audit-filter-form label select {
  min-width: 170px; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: var(--surface-2); color: var(--text-primary);
  font-size: 13px;
}
.audit-filter-form button { align-self: flex-end; }
.audit-filter-form .secondary-button { align-self: flex-end; }

/* Member profile card (roadmap #40) */
.member-open { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; cursor: pointer; color: inherit; background: transparent; border: 0; padding: 0; text-align: left; }
.member-open .member-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.member-open:hover .avatar, .message-avatar-button:hover .message-avatar { box-shadow: 0 0 12px rgba(61, 224, 196, .35); }
.message-avatar-button { display: block; cursor: pointer; background: transparent; border: 0; padding: 0; line-height: 0; }

.member-card-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.member-card-overlay[hidden] { display: none; }
.member-card-backdrop { position: absolute; inset: 0; width: 100%; cursor: pointer; background: rgba(5, 5, 5, .6); backdrop-filter: blur(4px); }
.member-card-backdrop:focus-visible { outline: none; }
.member-card-panel { position: relative; width: min(430px, 100%); max-height: min(80vh, 640px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent-alt) transparent; border: 1px solid var(--border-strong); border-radius: 16px; background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary)); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }

.member-card-banner { height: 60px; background: linear-gradient(90deg, var(--bg-depth), var(--bg-secondary)); border-radius: 16px 16px 0 0; margin: -1px -1px 0; }
.member-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.member-card-head .avatar { position: relative; width: 52px; height: 52px; border-radius: 50%; font-size: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.member-card-head .avatar i { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--bg-secondary); }
.member-card-head .avatar i.online { background: #2ecc71; box-shadow: 0 0 10px rgba(46, 204, 113, .7); }
.member-card-head .avatar i.offline { background: var(--text-muted); }
.member-card-head > div { display: grid; min-width: 0; flex: 1; gap: 2px; }
.member-card-head strong { overflow: hidden; color: var(--text-primary); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.member-card-head small { color: var(--text-muted); font-size: 10px; }
.member-card-close { flex: 0 0 auto; cursor: pointer; border-radius: 8px; color: var(--text-muted); background: transparent; padding: 6px 9px; font-size: 20px; line-height: 1; }
.member-card-close:hover { background: rgba(232, 93, 63, .15); color: var(--alert); }

.member-card-facts { display: grid; gap: 10px; margin: 0; padding: 16px 16px 8px; }
.member-card-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.member-card-facts dt { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.member-card-facts dd { margin: 0; color: var(--text-primary); font-size: 11px; text-align: right; }

.member-card-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 8px 18px 4px; }
.member-card-role { border: 1px solid var(--role-color, var(--border-strong)); border-radius: 999px; padding: 4px 11px; color: var(--role-color, var(--accent-main)); font-size: 11px; font-weight: 700; }

.member-card-actions { display: grid; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.member-card-action { display: flex; align-items: center; gap: 8px; }
.member-card-action select, .member-card-action input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(26, 42, 58, .5); color: var(--text-primary); padding: 8px 10px; font-size: 11px; }
.member-card-action button { flex: 0 0 auto; cursor: pointer; border-radius: 8px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 8px 12px; font-size: 10px; font-weight: 850; }
.member-card-action button:hover { background: var(--accent-main); color: var(--bg-primary); }
.member-card-action .danger-link { background: rgba(232, 93, 63, .14); color: var(--alert); }
.member-card-action .danger-link:hover { background: var(--alert); color: var(--text-primary); }

.member-card-history { padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.member-card-history h3 { margin: 0 0 10px; color: var(--text-muted); font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.member-card-history ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.member-card-history li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(26, 42, 58, .4); padding: 9px 11px; font-size: 10px; }
.member-card-kind { grid-row: 1; color: var(--accent-main); font-weight: 850; }
.member-card-history time { grid-column: 2; justify-self: end; color: var(--text-muted); font-size: 9px; }
.member-card-actor, .member-card-reason { grid-column: 2; color: var(--text-muted); }
.member-card-reason { grid-column: 1 / -1; color: var(--text-secondary); }

:root[data-theme="light"] .member-card-backdrop { background: rgba(16, 20, 24, .4); }
:root[data-theme="light"] .member-card-panel { background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary)); }
:root[data-theme="light"] .member-card-action select,
:root[data-theme="light"] .member-card-action input[type="text"],
:root[data-theme="light"] .member-card-history li { background: rgba(16, 20, 24, .05); }
:root[data-theme="light"] .member-card-head .avatar i { border-color: var(--bg-primary); }
.settings-modal { position: relative; display: grid; grid-template-columns: 240px minmax(0,1fr) 340px; height: 100dvh; background: var(--bg-primary); }
.settings-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-secondary); color: var(--text-muted); font-size: 14px; z-index: 10; }
.settings-close span:last-child { font-size: 8px; }
.settings-nav-vertical { background: var(--bg-secondary); border-right: 1px solid var(--line); padding: 16px 8px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.settings-nav-kicker { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.settings-nav-vertical a { display: block; padding: 7px 8px; border-radius: 4px; color: var(--text-secondary); font-size: 13px; }
.settings-nav-vertical a.active, .settings-nav-vertical a:hover { background: rgba(255, 255, 255, .06); color: var(--text-primary); }
.settings-nav-group { display: grid; gap: 4px; }
.settings-nav-close, .settings-preview-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--text-muted); font-size: 18px; }
.settings-main { position: relative; padding: 24px 32px; overflow-y: auto; }
.settings-main h1 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.settings-main label { display: block; font-size: 12px; font-weight: 700; margin-top: 16px; }
.settings-hint { color: var(--text-muted); font-size: 11px; margin: 4px 0 0; }
.settings-divider { height: 1px; background: var(--line-soft); margin: 20px 0; }
.settings-preview { background: var(--bg-secondary); border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; }
.settings-preview-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-primary); }
.settings-preview-banner { height: 90px; background: linear-gradient(90deg, var(--bg-depth), var(--bg-secondary)); }
.settings-preview-body { padding: 16px; display: grid; gap: 6px; }
.settings-preview-avatar { width: 56px; height: 56px; border-radius: 12px; font-size: 16px; margin-top: -28px; border: 4px solid var(--bg-primary); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; display: inline-block; }
.banner-swatch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.banner-swatch { height: 52px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.banner-swatch:hover { transform: scale(1.02); }
.banner-swatch.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-main); }
.friends-app { grid-template-columns: 72px 240px minmax(0,1fr) 360px; }
.friends-main { min-width: 0; min-height: 0; overflow-y: auto; background: var(--bg-primary); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.friends-top { display: flex; align-items: center; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--line); padding: 0 16px; }
.friends-title { font-weight: 900; font-size: 14px; }
.friends-top-tabs { display: flex; gap: 6px; align-items: center; }
.friends-top-tabs a { padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--text-muted); }
.friends-top-tabs a.active { background: var(--surface); color: var(--text-primary); }
.friends-top-tabs .add-friend-btn { background: var(--accent-main); color: var(--bg-primary); font-weight: 800; }
.friends-group-bubble { display: grid; width: 30px; height: 30px; place-items: center; margin-left: auto; border-radius: 6px; background: var(--surface); color: var(--text-muted); font-size: 15px; text-decoration: none; }
.friends-group-bubble:hover { background: var(--line); color: var(--text-primary); }
.friends-search-wrap { display: flex; align-items: center; gap: 8px; margin: 12px 16px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--bg-secondary); padding: 8px 10px; }
.friends-search-wrap input { flex: 1; border: 0; background: transparent; color: var(--text-primary); outline: 0; }
.friends-online-count { margin: 8px 16px; color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.friends-online-list { display: grid; padding: 0 8px; }
.friends-row { display: flex; align-items: center; gap: 12px; min-height: 42px; max-width: calc(100% - 16px); margin-inline-start: 8px; padding: 4px 8px; border-radius: 4px; }
.friends-row:hover { background: rgba(255, 255, 255, .04); }
.friends-row-open { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.friends-row-btn { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.friends-row-btn:hover .friends-row-copy strong { color: var(--text-primary); }

.notification-settings-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0, 0, 0, .58); padding: 16px; }
.notification-settings-overlay[hidden] { display: none !important; }
.notification-settings-card { width: min(460px, 92vw); max-height: 90vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: #111418; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); scrollbar-width: thin; }
.notification-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.notification-settings-head strong { font-size: 15px; color: #f2f3f5; }
.notification-settings-head button { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 20px; cursor: pointer; }
.notification-settings-head button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.notification-settings-body { display: grid; padding: 0 16px 16px; }
.notification-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.notification-settings-row > div { display: grid; gap: 4px; min-width: 0; flex: 1; }
.notification-settings-row strong { font-size: 13px; color: #f2f3f5; }
.notification-settings-row small { color: #949ba4; font-size: 11px; line-height: 1.45; }
.notif-divider { height: 1px; border: 0; background: rgba(255, 255, 255, .06); margin: 0; }
.notification-settings-section { display: grid; gap: 10px; padding: 14px 0; }
.notification-settings-section > strong { font-size: 12px; color: #f2f3f5; letter-spacing: .02em; }
.notif-hint { margin: 0; color: #949ba4; font-size: 11px; line-height: 1.5; }
.notif-radio { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #dcdee1; font-size: 13px; }
.notif-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.notif-radio span { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #6a7480; display: grid; place-items: center; }
.notif-radio input:checked + span { border-color: var(--accent-main); }
.notif-radio input:checked + span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-main); }
.notif-radio em { font-style: normal; }
.notif-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.notif-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.notif-toggle span { position: absolute; inset: 0; border-radius: 999px; background: #4f545c; transition: background .18s ease; }
.notif-toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.notif-toggle input:checked + span { background: var(--accent-main); }
.notif-toggle input:checked + span::after { transform: translateX(18px); }
.notification-settings-foot { display: grid; padding: 16px 0 0; }
.notif-done { width: 100%; min-height: 38px; border-radius: 8px; background: #5865f2; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.notif-done:hover { filter: brightness(1.07); }
.server-dropdown-item[data-notif-settings-open] { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; font-size: 12px; font-family: inherit; font-weight: inherit; }
.friends-row-copy { display: flex; flex-direction: column; min-width: 0; }
.friends-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-row-actions { margin-left: auto; display: flex; gap: 6px; }
.friends-msg-btn, .friends-more-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--text-muted); }
.friends-active { background: var(--bg-secondary); border-left: 1px solid var(--line); padding: 16px 12px; overflow-y: auto; }
.friends-active h3 { margin: 0 0 12px; font-size: 16px; font-weight: 900; }
.active-card { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-primary); margin-bottom: 8px; }
.active-card:hover { background: rgba(255, 255, 255, .04); }

.server-dropdown-item.danger:hover, .message-context-menu .danger:hover, .message-context-menu button.danger:hover { background: rgba(242, 63, 67, 0.12); color: #f23f43; }
.wr-tip { position: fixed; z-index: 400; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: #111214; color: #dbdee1; font-size: 14px; font-weight: 500; line-height: 1.3; box-shadow: 0 4px 12px rgba(0,0,0,.4); pointer-events: none; opacity: 0; transition: opacity .08s ease; }
.wr-tip.show { opacity: 1; }

.create-panel { padding: 20px 24px 28px; display: grid; gap: 12px; align-content: start; }
.create-panel[hidden] { display: none !important; }
.create-panel-head { display: flex; justify-content: space-between; align-items: center; }
.create-panel-head strong { font-size: 20px; font-weight: 600; }
.create-panel-head button { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 20px; cursor: pointer; }
.create-panel-head button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.create-panel-form { display: grid; gap: 10px; }
.create-panel-form .form-field { display: grid; gap: 6px; margin: 0; }
.create-panel-form .form-field > span { color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.create-panel-form input, .create-panel-form select, .create-panel-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: var(--bg-primary); color: var(--text-primary); padding: 10px 12px; font-size: 14px; }
.create-panel-form textarea { resize: vertical; min-height: 56px; }
.create-panel-form .primary-button { width: 100%; }

.channel-list section > header [data-open-create-channel] { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; background: linear-gradient(135deg, var(--accent-main), var(--accent-alt)); color: var(--bg-primary); font-size: 16px; font-weight: 800; cursor: pointer; line-height: 1; }
.channel-list section > header [data-open-create-channel]:hover { filter: brightness(1.1); }

[data-events-panel] .management-row > div:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
[data-events-panel] { overflow-x: hidden; }
[data-events-panel] .management-row { overflow: visible; }

.event-rsvp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-secondary); font-size: 12px; }
.event-rsvp-counts { color: var(--text-secondary); font-weight: 600; }
.event-rsvp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.event-rsvp-actions form { margin: 0; }
.event-rsvp-actions button { cursor: pointer; border-radius: 6px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 5px 10px; font-size: 11px; font-weight: 700; }
.event-rsvp-actions button:hover { background: var(--accent-main); color: var(--bg-primary); }

.emoji-modes { display: flex; gap: 8px; }
.emoji-mode { border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.emoji-mode.active { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
.emoji-searchrow { display: flex; align-items: center; gap: 8px; }
.emoji-searchrow .emoji-search { flex: 1; min-width: 0; }
.emoji-add { flex: 0 0 auto; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--text-primary); padding: 8px 12px; font-size: 13px; font-weight: 600; text-decoration: none; }
.emoji-add:hover { background: rgba(255, 255, 255, .1); }
.emoji-previewbar { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-soft); padding: 8px 4px 2px; min-height: 52px; }
.emoji-previewbar[hidden] { display: none; }
.emoji-previewbar img { width: 40px; height: 40px; object-fit: contain; }
.emoji-previewbar > div { display: grid; gap: 2px; }
.emoji-previewbar strong { font-size: 14px; }
.emoji-previewbar small { color: var(--text-muted); font-size: 12px; }
.emoji-preview-big { font-size: 32px; line-height: 1; }

.threadlist-item.archived { opacity: .65; }
.thread-archived-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-secondary); font-size: 12px; }
.thread-archived-banner button { cursor: pointer; border-radius: 6px; background: rgba(61, 224, 196, .12); color: var(--accent-main); padding: 6px 10px; font-size: 11px; font-weight: 700; }

.emoji-grid.gif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px 12px; }
.emoji-grid.gif-grid .gif-option { min-width: 0; width: 100%; height: auto; padding: 0; border: 0; background: transparent; }
.emoji-grid.gif-grid img { width: 100%; height: 140px; object-fit: cover; border-radius: 5px; display: block; position: relative; }
.emoji-grid.gif-grid .gif-option { border-radius: 5px; position: relative; transition: box-shadow 0.15s ease-out; }
.emoji-grid.gif-grid .gif-option:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.chat-gif { width: 100%; max-width: min(320px, 100%); border-radius: 5px; display: block; margin-top: 4px; object-fit: cover; position: relative; }

.emoji-grid.gif-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px 12px; }
.gif-cat { position: relative; min-height: 110px; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 5px; background: linear-gradient(135deg, rgba(61, 224, 196, .25), rgba(0, 0, 0, .35)); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; padding: 0; }
.gif-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gif-cat span { position: relative; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); padding: 0 8px; text-align: center; }
.gif-cat:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

/* ---- member profiles, following, and the social feed ---- */
.profile-shell { display: grid; gap: 0; max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
.profile-shell-narrow { max-width: 820px; }
.profile-banner { position: relative; height: 200px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(26, 42, 58, .9), rgba(5, 5, 5, .98)); }
.profile-banner-image { width: 100%; height: 100%; object-fit: cover; }
.profile-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--space-16); margin-top: -44px; padding: 0 var(--space-16); }
.profile-avatar-large { position: relative; display: grid; width: 96px; height: 96px; place-items: center; overflow: hidden; border: 4px solid var(--bg-primary); border-radius: 50%; color: #fff; font-size: 28px; font-weight: 800; }
.profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.profile-identity { min-width: 0; padding-top: 52px; }
.profile-identity h1 { margin: 0; font-size: 24px; font-weight: 700; }
.profile-handle { margin: 2px 0 0; color: var(--text-muted); font-size: 14px; }
.profile-status { margin: 6px 0 0; color: var(--text-secondary); font-size: 13px; }
.profile-bio { max-width: 560px; margin: 10px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.profile-joined { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; }
.profile-actions { padding-bottom: 8px; }
.profile-actions form { margin: 0; }
.primary-button.following, .secondary-button.following { background: rgba(255, 255, 255, .06); color: var(--text-secondary); }

.profile-tabs { display: flex; gap: var(--space-8); margin-top: var(--space-24); border-bottom: 1px solid var(--line-soft); }
.profile-tabs a { display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; padding: var(--space-8) var(--space-12); color: var(--text-muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.profile-tabs a span { border-radius: var(--radius-round); background: rgba(255, 255, 255, .06); padding: 1px 7px; font-size: 12px; }
.profile-tabs a:hover { color: var(--text-primary); }
.profile-tabs a.active { border-bottom-color: var(--accent-main); color: var(--text-primary); }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-24); margin-top: var(--space-24); }
.profile-main { display: grid; gap: var(--space-16); min-width: 0; }
.profile-side { display: grid; gap: var(--space-16); align-content: start; }
.profile-facts, .profile-images-form { display: grid; gap: var(--space-8); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: rgba(255, 255, 255, .02); padding: var(--space-16); }
.profile-facts h2, .profile-images-form h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.profile-facts dl { display: grid; gap: var(--space-8); margin: 0; }
.profile-facts dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
.profile-facts dt { color: var(--text-muted); font-size: 13px; }
.profile-facts dd { margin: 0; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.checkbox-row { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }

.post-composer { display: grid; gap: var(--space-8); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: rgba(255, 255, 255, .02); padding: var(--space-12); }
.post-composer-row { display: flex; align-items: flex-start; gap: var(--space-12); }
.post-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 15px; line-height: 1.45; }
.post-composer-foot { display: flex; align-items: center; gap: var(--space-8); }
.post-composer-foot .primary-button { margin-left: auto; }
.post-photo-list { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.post-photo-list .preview-item { position: relative; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius-sm); }
.post-photo-list .preview-item img { width: 100%; height: 100%; object-fit: cover; }
.post-photo-list .preview-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; }

.profile-post { display: grid; gap: var(--space-8); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: rgba(255, 255, 255, .02); padding: var(--space-16); }
.profile-post-head { display: flex; align-items: center; gap: var(--space-12); }
.profile-post-head > div { display: grid; min-width: 0; flex: 1; }
.profile-post-author { color: var(--text-primary); font-size: 15px; font-weight: 600; text-decoration: none; }
.profile-post-author:hover { text-decoration: underline; }
.profile-post-head time { color: var(--text-muted); font-size: 12px; }
.post-delete { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.post-delete:hover { color: var(--alert); }
.profile-post-body { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.post-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-8); }
.post-photos .attachment-image { display: block; overflow: hidden; border-radius: var(--radius-sm); }
.post-photos img { display: block; width: 100%; height: 100%; max-height: 320px; object-fit: cover; }
.profile-post-actions { display: flex; align-items: center; gap: var(--space-12); border-top: 1px solid var(--line-soft); padding-top: var(--space-8); }
.profile-post-actions form { margin: 0; }
.post-like { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.post-like:hover { color: var(--accent-main); }
.post-like.liked { color: var(--alert); }
.post-comment-count { color: var(--text-muted); font-size: 13px; text-decoration: none; }
.post-comment-form { display: flex; flex: 1; align-items: center; gap: var(--space-8); }
.post-comment-form input { flex: 1; border: 1px solid var(--line-soft); border-radius: var(--radius-round); background: rgba(255, 255, 255, .04); color: var(--text-primary); font-size: 13px; padding: 6px var(--space-12); }
.post-comments { display: grid; gap: 6px; margin: 0; border-top: 1px solid var(--line-soft); padding: var(--space-8) 0 0; list-style: none; }
.post-comments li { color: var(--text-secondary); font-size: 13px; }
.post-comments strong { color: var(--text-primary); margin-right: 4px; }
.profile-empty { border: 1px dashed var(--line-soft); border-radius: var(--radius-md); color: var(--text-muted); padding: var(--space-24); text-align: center; }

.people-list { display: grid; gap: var(--space-8); margin: var(--space-24) 0 0; padding: 0; list-style: none; }
.people-list.compact { margin: 0; }
.people-row { display: flex; align-items: center; gap: var(--space-12); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: rgba(255, 255, 255, .02); padding: var(--space-12); }
.people-copy { display: grid; min-width: 0; flex: 1; }
.people-copy a { color: var(--text-primary); text-decoration: none; }
.people-copy small { color: var(--text-muted); font-size: 12px; }
.people-row form { margin: 0; }

.feed-head h1 { margin: 0; font-size: 24px; font-weight: 700; }
.feed-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }

@media (max-width: 900px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-header { grid-template-columns: auto minmax(0, 1fr); }
  .profile-actions { grid-column: 1 / -1; }
}

/* ---- profile menu: opened from the header profile control ---- */
.nav-profile { position: relative; display: inline-flex; }
.nav-profile-button { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; cursor: pointer; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); padding: 0 10px; font-size: 12px; font-weight: 700; }
.nav-profile-button:hover, .nav-profile.open .nav-profile-button { background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.nav-profile-button .avatar { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; font-size: 9px; font-weight: 800; }
.nav-profile-button .avatar img { width: 100%; height: 100%; object-fit: cover; }

.direct-sidebar-actions { display: inline-flex; align-items: center; gap: 4px; }
.direct-profile-menu { position: relative; display: inline-flex; }
.direct-profile-button { display: grid; width: 28px; height: 28px; place-items: center; cursor: pointer; border: 0; border-radius: 7px; background: transparent; padding: 2px; }
.direct-profile-button:hover, .direct-profile-menu.open .direct-profile-button { background: rgba(61, 224, 196, .12); }
.direct-profile-button .avatar { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; border-radius: 7px; font-size: 10px; font-weight: 800; }
.direct-profile-button .avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-menu { position: absolute; z-index: 190; top: calc(100% + 8px); right: 0; width: 262px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--bg-secondary); box-shadow: 0 16px 44px rgba(0, 0, 0, .55); }
.profile-menu[hidden] { display: none; }
.profile-menu-head { display: flex; align-items: center; gap: var(--space-12); border-bottom: 1px solid var(--line-soft); padding: var(--space-12); }
.profile-menu-head .avatar { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; font-size: 12px; font-weight: 800; }
.profile-menu-head .avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-menu-identity { display: grid; min-width: 0; }
.profile-menu-identity strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-identity small { overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-list { display: grid; gap: 2px; padding: var(--space-8); }
.profile-menu-list a, .profile-menu-foot button { display: flex; align-items: center; gap: var(--space-12); width: 100%; cursor: pointer; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); padding: 9px 10px; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; }
.profile-menu-list a:hover, .profile-menu-foot button:hover { background: var(--surface); color: var(--text-primary); }
.profile-menu-list a span { width: 18px; text-align: center; }
.profile-menu-foot { margin: 0; border-top: 1px solid var(--line-soft); padding: var(--space-8); }
.profile-menu-foot button { color: var(--alert); }
.profile-menu-foot button:hover { background: rgba(232, 93, 63, .12); color: var(--alert); }

@media (max-width: 550px) {
  .nav-profile-name { display: none; }
}

/* Pack Profile trigger in the dashboard header */
.pack-profile { position: relative; display: inline-flex; }
.pack-profile-button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(255, 255, 255, .04); color: var(--text-secondary); padding: 5px 12px 5px 6px; font-size: 13px; font-weight: 600; }
.pack-profile-button:hover, .pack-profile.open .pack-profile-button { border-color: var(--accent-main); background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.pack-profile-button .avatar { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; font-size: 10px; font-weight: 800; }
.pack-profile-button .avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 550px) {
  .pack-profile-button > span:last-child { display: none; }
  .pack-profile-button { padding: 5px; }
}

.comment-report-form { display: inline-flex; margin-left: 6px; }
.comment-report-form button { cursor: pointer; border: 0; background: transparent; color: var(--text-muted); font-size: 12px; padding: 0 4px; }
.comment-report-form button:hover { color: var(--alert); }
.post-removed-notice { margin: 0; border: 1px dashed var(--line-soft); border-radius: var(--radius-sm); color: var(--text-muted); padding: var(--space-8) var(--space-12); font-size: 13px; font-style: italic; }
.post-comments li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) {
}

.post-report { position: relative; display: inline-flex; margin-left: auto; }
.post-report-trigger { cursor: pointer; border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(255, 255, 255, .04); color: var(--text-muted); padding: 4px 9px; font-size: 12px; white-space: nowrap; }
.post-report-trigger:hover, .post-report.open .post-report-trigger { border-color: var(--accent-main); color: var(--accent-main); }
.post-report-menu { min-width: 232px; }
.post-report-menu form { display: grid; gap: 2px; }
.post-report-why { margin: 0 0 4px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.post-report-item { width: 100%; cursor: pointer; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); padding: 8px 10px; font-size: 14px; font-weight: 500; text-align: left; }
.post-report-item:hover { background: var(--surface); color: var(--text-primary); }
.post-report-item.danger { margin-top: 6px; background: var(--alert); color: #fff; text-align: center; }
.post-report-item.danger:hover { filter: brightness(1.08); color: #fff; }
.post-report-detail { display: grid; gap: 6px; margin-top: 6px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.post-report-detail[hidden] { display: none; }
.post-report-detail > span { color: var(--text-muted); font-size: 11px; font-weight: 600; }
.post-report-detail input { width: 100%; border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(255, 255, 255, .04); color: var(--text-primary); font-size: 13px; padding: 6px 8px; }
@media (max-width: 700px) {
  .post-report { margin-left: 0; }
}

.profile-actions-row { display: inline-flex; align-items: center; gap: var(--space-8); }
.profile-actions-row form { margin: 0; }
.secondary-button.blocking { border-color: var(--alert); color: var(--alert); }
.post-report-item.block { color: var(--alert); }
.post-report-item.block:hover { background: rgba(232, 93, 63, .12); color: var(--alert); }

/* ---- moderation queue ---- */
.moderation-shell { max-width: 900px; }
.moderation-tabs { margin-top: var(--space-16); }
.report-list { display: grid; gap: var(--space-12); margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.report-row { display: grid; gap: var(--space-8); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent-main); border-radius: var(--radius-md); background: rgba(255, 255, 255, .02); padding: var(--space-12) var(--space-16); }
.report-row--social_post, .report-row--social_comment { border-left-color: var(--accent-alt); }
.report-row--channel_message, .report-row--direct_message { border-left-color: var(--yellow); }
.report-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.report-kind { border-radius: var(--radius-round); background: rgba(255, 255, 255, .06); padding: 2px 8px; font-size: 11px; font-weight: 600; }
.report-reason { color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: capitalize; }
.report-status { margin-left: auto; border-radius: var(--radius-round); padding: 2px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.report-status--open { background: rgba(232, 93, 63, .16); color: var(--alert); }
.report-status--reviewed { background: rgba(240, 178, 50, .16); color: var(--yellow); }
.report-status--actioned { background: rgba(35, 165, 90, .16); color: var(--green); }
.report-status--dismissed { background: rgba(255, 255, 255, .06); color: var(--text-muted); }
.report-row-head time { color: var(--text-muted); font-size: 11px; }
.report-body { margin: 0; border-left: 2px solid var(--line-soft); color: var(--text-secondary); padding-left: var(--space-8); font-size: 14px; line-height: 1.45; }
.report-meta { margin: 0; color: var(--text-muted); font-size: 12px; }
.report-meta strong { color: var(--text-secondary); }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); border-top: 1px solid var(--line-soft); padding-top: var(--space-8); }
.report-actions form { display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; }
.report-reason-input { width: 150px; border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(255, 255, 255, .04); color: var(--text-primary); font-size: 12px; padding: 4px 8px; }
@media (max-width: 700px) {
  .report-status { margin-left: 0; }
  .report-reason-input { width: 100%; }
}

.moderation-tab-count { display: inline-block; min-width: 18px; border-radius: var(--radius-round); background: rgba(255, 255, 255, .08); padding: 1px 6px; font-size: 11px; font-weight: 700; text-align: center; }
.moderation-tabs a.active .moderation-tab-count { background: rgba(255, 255, 255, .18); }
.report-row--removed { opacity: .62; border-left-color: var(--text-muted); }
.report-flag { border-radius: var(--radius-round); background: rgba(255, 255, 255, .08); padding: 1px 6px; font-size: 11px; font-style: normal; font-weight: 700; }
.moderation-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin: var(--space-20) 0 var(--space-40); }
.pagination-status { color: var(--text-muted); font-size: 13px; }

/* ---- social notifications ---- */
.bell-item--unread { background: rgba(61, 224, 196, 0.08); }
.bell-item--unread .bell-item-link::after { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: var(--radius-round); background: var(--accent-main); }
.notification-item.unread .notification-link::after,
.notification-item.unread .notification-plain::after { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: var(--radius-round); background: var(--accent-main); }
:root[data-theme="light"] .bell-item--unread { background: rgba(61, 224, 196, 0.12); }

/* ---- two-factor authentication ---- */
.two-factor-shell { max-width: 640px; }
.two-factor-card { display: grid; gap: var(--space-16); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .02); padding: var(--space-20); }
.two-factor-qr { display: flex; justify-content: center; }
.two-factor-qr img { border-radius: var(--radius-md); background: #fff; padding: 10px; image-rendering: pixelated; }
.two-factor-secret code { display: block; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .04); padding: var(--space-8) var(--space-12); font-size: 13px; letter-spacing: 1px; word-break: break-all; }
.two-factor-manual summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.two-factor-help { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.two-factor-confirmed { margin: 0; color: var(--green); font-size: 14px; font-weight: 600; }
.two-factor-form { display: grid; gap: var(--space-12); }
.two-factor-form input { letter-spacing: 6px; font-size: 20px; text-align: center; }
.two-factor-warning { margin: 0; border-left: 3px solid var(--yellow); background: rgba(240, 178, 50, .1); border-radius: var(--radius-sm); padding: var(--space-12); color: var(--yellow); font-size: 14px; font-weight: 600; }
.two-factor-code-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.two-factor-code-list code { display: block; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .04); padding: var(--space-8); font-size: 14px; letter-spacing: 2px; text-align: center; }

/* ---- active sessions ---- */
.session-shell { max-width: 620px; }
.session-card { display: grid; gap: var(--space-16); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .02); padding: var(--space-20); }
.session-current { display: grid; gap: 2px; border-left: 3px solid var(--accent-main); padding-left: var(--space-12); }
.session-current strong { font-size: 15px; }
.session-current small { color: var(--text-muted); font-size: 12px; }
.session-list { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.session-list li { display: grid; gap: 2px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); padding: var(--space-12); }
.session-list small { color: var(--text-muted); font-size: 12px; }
.session-empty { margin: 0; color: var(--text-muted); font-size: 14px; }
.session-help { color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.post-edited-marker { margin-left: 6px; color: var(--text-muted); font-size: 12px; cursor: help; }
.post-permalink { display: inline-block; margin-top: 6px; color: var(--text-muted); font-size: 12px; text-decoration: none; }
.post-permalink:hover { color: var(--accent-main); text-decoration: underline; }
.post-edit-link { margin-left: auto; color: var(--text-muted); font-size: 13px; text-decoration: none; }
.post-edit-link:hover { color: var(--accent-main); }
.post-inline-error { margin-left: 8px; color: var(--alert); font-size: 12px; }
.post-comments-more { display: inline-block; margin-top: 6px; color: var(--accent-main); font-size: 12px; font-weight: 700; text-decoration: none; }
.post-comments-more:hover { text-decoration: underline; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.media-filters { display: flex; gap: 6px; margin: 14px 0 4px; }
.media-filters a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--text-muted); padding: 5px 13px; font-size: 12px; font-weight: 700; text-decoration: none; }
.media-filters a:hover { border-color: var(--line); color: var(--text-secondary); }
.media-filters a.active { border-color: var(--accent-main); background: rgba(61, 224, 196, .1); color: var(--accent-main); }
.media-filters a span { opacity: .75; font-weight: 600; }
.media-tile { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.media-tile img { width: 100%; height: 100%; object-fit: cover; }
.post-video { margin: 0; }
.post-video video { display: block; width: 100%; max-height: 70vh; border-radius: 10px; background: #000; }
/* A vertical clip keeps its shape instead of being letterboxed into a wide box. */
.post-video.is-vertical video { width: auto; max-width: 100%; max-height: 78vh; margin-inline: auto; aspect-ratio: 9 / 16; object-fit: contain; }
.post-video-meta { display: flex; gap: 8px; margin-top: 6px; color: var(--text-muted); font-size: 12px; }
.preview-item.is-video { position: relative; }
.preview-item.is-video img { width: 100%; height: 100%; object-fit: cover; }
.preview-badge { position: absolute; left: 4px; bottom: 4px; border-radius: 4px; background: rgba(0, 0, 0, .65); color: #fff; padding: 1px 5px; font-size: 11px; }
.preview-item.is-pending { display: grid; place-items: center; width: 72px; height: 72px; border: 1px dashed var(--line); border-radius: 8px; }
.preview-pending-label { color: var(--text-muted); font-size: 11px; }
.post-upload-error { margin: 6px 0 0; color: var(--alert); font-size: 12px; }
.media-tile.is-video { position: relative; }
.media-tile-duration { position: absolute; left: 6px; bottom: 6px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; padding: 1px 5px; font-size: 11px; }
.media-tile.is-video::after { content: "▶"; position: absolute; right: 6px; bottom: 6px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; padding: 2px 7px; font-size: 11px; }
.profile-reply .profile-post-parent { margin: 0 0 8px; border-left: 2px solid var(--line); padding-left: 10px; color: var(--text-muted); font-size: 13px; }
.explore-more { display: flex; justify-content: center; margin: 18px 0 6px; }
.back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 180; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-secondary); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); color: var(--text-secondary); padding: 0 16px; font-size: 12px; font-weight: 700; text-decoration: none; }
/* Added by back_to_top.js. Without scripting the link stays visible and simply
   jumps, which is better than a control that does nothing. */
.back-to-top-ready { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease; }
.back-to-top-ready.back-to-top-shown { opacity: 1; visibility: visible; pointer-events: auto; }
.back-to-top:hover { border-color: var(--accent-main); color: var(--accent-main); }
@media (prefers-reduced-motion: reduce) {
  .back-to-top-ready { transition: none; }
}

/* Profile stories: the ring, and the full-screen viewer. */

.profile-story-ring {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 50%;
  text-decoration: none;
}

/* Only a live story gets the gradient. Without one the avatar must not look
 * clickable, so the ring wrapper carries no gradient and no href. */
.profile-story-ring.has-story {
  padding: 3px;
  background: conic-gradient(from 200deg, #ff7a45, #ffd166, #a06bff, #35d0ba, #ff7a45);
}
.profile-story-ring.has-story .avatar { border: 3px solid #050505; }
.profile-story-ring:not(.has-story) .avatar { opacity: .92; }

.profile-story-ring .story-add {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #050505;
  background: #7ee787;
  border: 2px solid #050505;
}

.story-upload-button { cursor: pointer; }
.story-upload-status { font-size: 13px; color: #9aa0a6; }
.story-upload-status[data-state="error"] { color: #ff6b6b; }

/* Viewer */

.story-page { background: #000; }

.story-viewer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  z-index: 90;
}
.story-stage {
  position: relative;
  width: min(100vw, 480px);
  height: min(100vh, 854px);
  background: #111;
  overflow: hidden;
}

.story-bars {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 3;
}
.story-bar {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
}
.story-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.story-head {
  position: absolute;
  top: 22px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  color: #fff;
}
.story-who { display: flex; flex-direction: column; line-height: 1.2; }
.story-who small { color: rgba(255, 255, 255, .7); font-size: 12px; }
.story-head-actions { margin-left: auto; display: flex; gap: 8px; }
.story-icon-button {
  background: rgba(0, 0, 0, .35);
  border: 0;
  color: #fff;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.story-icon-button:disabled { opacity: .6; cursor: default; }

.story-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.story-image,
.story-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Tap zones sit above the media but below the header, so the close button and
 * the progress bars stay usable. */
.story-tap {
  position: absolute;
  top: 64px;
  bottom: 40px;
  width: 32%;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}
.story-tap-prev { left: 0; }
.story-tap-next { right: 0; }

.story-foot {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
}
.story-hint { color: rgba(255, 255, 255, .5); font-size: 12px; margin: 0; }

.story-error {
  position: absolute;
  inset: 50% 0 auto 0;
  text-align: center;
  color: #ff9a9a;
  font-size: 14px;
  padding: 0 20px;
  z-index: 4;
}

/* Guards for the story controls, following the same pattern the other overlays
 * in this file already use. The bare [hidden] attribute is not reliable on its
 * own here: a higher-specificity display rule beats the UA stylesheet, and when
 * that happens the file input shows up as an empty line under Add story. */
#story-file-input[hidden],
.story-error[hidden] { display: none !important; }
.story-upload-status:empty { display: none; }