/* ═══════════════════════════════════════════════════════════════════
   ChitChat — Zulip-inspired UI
   ═══════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --font:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
        sans-serif;
    --mono: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

    /* Surfaces */
    --bg-app: #ffffff;
    --bg-main: #ffffff;
    --bg-sidebar: #f7f8fa;
    --bg-sidebar-2: #eef0f4;
    --bg-hover: #eceff4;
    --bg-active: #e4edf9;
    --bg-recipient: #fafbfc;
    --bg-input: #ffffff;
    --bg-overlay: rgba(15, 23, 42, 0.45);

    /* Brand / accents */
    --brand: #4a90d9;
    --brand-strong: #3576b8;
    --brand-dark: #1e3a5f;
    --green: #2fa872;
    --red: #d4423d;
    --amber: #e0a232;

    /* Text */
    --text: #15191e;
    --text-soft: #475059;
    --text-muted: #828b95;
    --text-faint: #aab2bb;
    --text-on-brand: #ffffff;

    /* Lines */
    --border: #e7e9ee;
    --border-strong: #d4d8df;

    /* Layout */
    --nav-h: 48px;
    --left-w: 256px;
    --right-w: 232px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.1);
    --shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.18);

    --radius: 7px;

    /* Back-compat aliases (used by some inline styles) */
    --accent: var(--brand-strong);
    --danger: var(--red);
    --success: var(--green);
    --main-bg: var(--bg-main);
    --card-bg: var(--bg-sidebar);
    --sb-active-bg: var(--bg-active);
    --text-strong: var(--text);
    --brand-weak: #e8efff;
    --code-bg: #f3f5f8;
    --code-inline: #eef1f5;
}

/* ── Dark theme ──────────────────────────────────────────────
   Applied when the OS prefers dark (unless the user forced light),
   or when explicitly toggled via [data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-app: #1a1d29;
        --bg-main: #1a1d29;
        --bg-sidebar: #13151e;
        --bg-sidebar-2: #0e1018;
        --bg-hover: #262a3a;
        --bg-active: #2b3350;
        --bg-recipient: #1e2230;
        --bg-input: #222637;
        --bg-overlay: rgba(0, 0, 0, 0.6);
        --brand: #5b9be0;
        --brand-strong: #7fb4ea;
        --brand-dark: #bcd6f4;
        --text: #e6e8ee;
        --text-soft: #b3bac8;
        --text-muted: #868fa2;
        --text-faint: #5d6577;
        --border: #2a2f3e;
        --border-strong: #3a4052;
        --brand-weak: #23304a;
        --code-bg: #11141d;
        --code-inline: #262b3a;
    }
}
:root[data-theme="dark"] {
    --bg-app: #1a1d29;
    --bg-main: #1a1d29;
    --bg-sidebar: #13151e;
    --bg-sidebar-2: #0e1018;
    --bg-hover: #262a3a;
    --bg-active: #2b3350;
    --bg-recipient: #1e2230;
    --bg-input: #222637;
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --brand: #5b9be0;
    --brand-strong: #7fb4ea;
    --brand-dark: #bcd6f4;
    --text: #e6e8ee;
    --text-soft: #b3bac8;
    --text-muted: #868fa2;
    --text-faint: #5d6577;
    --border: #2a2f3e;
    --border-strong: #3a4052;
    --brand-weak: #23304a;
    --code-bg: #11141d;
    --code-inline: #262b3a;
}

html,
body {
    height: 100%;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--brand-strong);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

button {
    font-family: var(--font);
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-faint);
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* ═══ App shell — three columns under a navbar ═════════════════════ */
.shell {
    display: grid;
    grid-template-rows: var(--nav-h) 1fr;
    grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
    grid-template-areas:
        "nav  nav   nav"
        "left main  right";
    height: 100vh;
    overflow: hidden;
}

/* ═══ Navbar ═══════════════════════════════════════════════════════ */
.nav {
    grid-area: nav;
    background: linear-gradient(180deg, #244670 0%, var(--brand-dark) 100%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    z-index: 30;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.12);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}
.nav-brand:hover {
    text-decoration: none;
    opacity: 0.92;
}
.nav-brand .logo-mark {
    width: 22px;
    height: 22px;
    background: #fff;
    color: var(--brand-dark);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}

.nav-search {
    flex: 1;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}
.nav-search input {
    width: 100%;
    height: 32px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 12px 0 34px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition:
        background 0.12s,
        box-shadow 0.12s;
}
.nav-search input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.nav-search input:hover {
    background: rgba(255, 255, 255, 0.2);
}
.nav-search input:focus {
    background: #fff;
    color: var(--text);
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.45);
}
.nav-search input:focus::placeholder {
    color: var(--text-muted);
}
.nav-search .s-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    pointer-events: none;
}
.nav-search input:focus + .s-icon {
    color: var(--text-muted);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.nav-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    background: none;
    border: none;
}
.nav-icon:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    text-decoration: none;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 8px 3px 4px;
    border-radius: var(--radius);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    background: none;
    border: none;
}
.nav-user:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ═══ Avatars ══════════════════════════════════════════════════════ */
.av {
    border-radius: 5px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    user-select: none;
}
.av-xs {
    width: 22px;
    height: 22px;
    font-size: 10px;
    border-radius: 6px;
}
.av-sm {
    width: 26px;
    height: 26px;
    font-size: 11px;
    border-radius: 7px;
}
.av-md {
    width: 38px;
    height: 38px;
    font-size: 15px;
    border-radius: 9px;
}
/* Soft two-tone gradients give avatars depth instead of flat blocks */
.av-c1 {
    background: linear-gradient(135deg, #f0875f, #d9603a);
}
.av-c2 {
    background: linear-gradient(135deg, #82b04a, #5f8a32);
}
.av-c3 {
    background: linear-gradient(135deg, #5fa8ee, #3a7fc4);
}
.av-c4 {
    background: linear-gradient(135deg, #c071d4, #9a4caf);
}
.av-c5 {
    background: linear-gradient(135deg, #ecae44, #cf8f1f);
}
.av-c6 {
    background: linear-gradient(135deg, #4fc2af, #34998a);
}

/* ═══ Left sidebar ═════════════════════════════════════════════════ */
.left {
    grid-area: left;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding-bottom: 24px;
}

.org-head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.org-head:hover {
    background: var(--bg-hover);
}
.org-head .org-name {
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
    letter-spacing: -0.01em;
}
.org-head .org-sub {
    font-size: 11px;
    color: var(--text-muted);
}
/* Workspace switcher dropdown */
.org-switch summary {
    list-style: none;
}
.org-switch summary::-webkit-details-marker {
    display: none;
}
.ws-menu {
    display: flex;
    flex-direction: column;
    padding: 4px;
    gap: 1px;
    border-bottom: 1px solid var(--border);
}
.ws-menu form {
    margin: 0;
}
.ws-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-size: 13.5px;
    border-radius: 6px;
}
.ws-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.ws-item.active {
    background: var(--bg-active);
    font-weight: 700;
}

.nav-group {
    margin-top: 8px;
}

.left-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    color: var(--text-soft);
    font-size: 14px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-left: 3px solid transparent;
    transition: background 0.1s;
}
.left-link:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--text);
}
.left-link.active {
    background: var(--bg-active);
    color: var(--text);
    font-weight: 600;
    border-left-color: var(--brand);
}
.left-link .ic {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.left-link .count {
    margin-left: auto;
    background: var(--text-muted);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 6px;
    min-width: 18px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sect {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.sect .add {
    margin-left: auto;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: var(--text-muted);
}
.sect .add:hover {
    color: var(--text);
}

.stream {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 16px 5px 14px;
    color: var(--text-soft);
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background 0.1s;
}
.stream:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--text);
}
.stream.active {
    background: var(--bg-active);
    color: var(--text);
    font-weight: 700;
    border-left-color: var(--brand);
}
.stream .hash {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 15px;
}
.stream.active .hash {
    color: var(--brand);
}
.stream.unread {
    color: var(--text);
    font-weight: 600;
}
.stream .count {
    margin-left: auto;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 6px;
    min-width: 18px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stream .dot-color {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Unread state for sidebar channels and DMs: bold the label + show a pill. */
.stream-unread {
    color: var(--text);
    font-weight: 700;
}
.unread {
    margin-left: auto;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 6px;
    min-width: 18px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topic {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 16px 3px 38px;
    color: var(--text-muted);
    font-size: 13px;
    border-left: 3px solid transparent;
}
.topic:hover {
    background: var(--bg-hover);
    color: var(--text);
    text-decoration: none;
}
.topic.active {
    background: var(--bg-active);
    color: var(--text);
    border-left-color: var(--brand);
}
.topic .count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-faint);
}

.dm {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 16px;
    color: var(--text-soft);
    font-size: 14px;
}
.dm:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--text);
}
.presence {
    position: relative;
    flex-shrink: 0;
}
.presence .ring {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--bg-sidebar);
}
.p-online .ring {
    background: var(--green);
}
.p-idle .ring {
    background: var(--amber);
}
.p-offline .ring {
    background: var(--text-faint);
}

/* ═══ Main message column ══════════════════════════════════════════ */
.main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    min-width: 0;
    overflow: hidden;
}

.main-head {
    height: 52px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    box-shadow: var(--shadow-sm);
    background: var(--bg-main);
    z-index: 5;
}
.main-head .title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.01em;
}
.main-head .title .hash {
    color: var(--text-faint);
    font-weight: 500;
}
.main-head .desc {
    font-size: 13px;
    color: var(--text-muted);
    border-left: 1px solid var(--border);
    padding-left: 10px;
}
.main-head .head-actions {
    margin-left: auto;
    display: flex;
    gap: 2px;
}
.main-head .head-actions a {
    color: var(--text-muted);
    padding: 7px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
}
.main-head .head-actions a:hover {
    background: var(--bg-hover);
    color: var(--text);
    text-decoration: none;
}

.feed {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 12px;
}

/* Recipient bar — Zulip's stream>topic header above a block */
.recipient.muted {
    opacity: 0.5;
}
.recipient.muted .r-topic::after {
    content: " (muted)";
    color: var(--text-faint);
    font-weight: 400;
}
.recipient {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    margin-top: 14px;
    background: var(--bg-recipient);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: saturate(1.2);
}
.recipient .r-stream {
    font-weight: 700;
    color: var(--text);
}
.recipient .r-stream .hash {
    color: var(--text-faint);
    font-weight: 400;
}
.recipient .r-arrow {
    color: var(--text-faint);
}
.recipient .r-topic {
    font-weight: 600;
    color: var(--brand-strong);
}
.recipient .r-time {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}
/* Topic actions stay hidden until you hover the recipient bar */
.topic-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.12s;
}
.recipient:hover .topic-actions {
    opacity: 1;
}
.topic-btn {
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    cursor: pointer;
}
.topic-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--brand);
}
.topic-rename {
    position: absolute;
    right: 0;
    top: 28px;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    padding: 10px;
    display: flex;
    gap: 6px;
    width: 260px;
}
.topic-rename .input {
    height: 30px;
    font-size: 13px;
}

/* Message rows, grouped by sender */
.msg {
    display: flex;
    gap: 12px;
    padding: 4px 20px;
    position: relative;
}
.msg:hover {
    background: #f6f8fb;
}
.msg-gutter {
    width: 36px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.msg-gutter .ts-hover {
    font-size: 10px;
    color: var(--text-faint);
    display: none;
    padding-top: 5px;
    font-variant-numeric: tabular-nums;
}
.msg.cont:hover .ts-hover {
    display: block;
}
.msg-content {
    flex: 1;
    min-width: 0;
}
.msg-line1 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.msg-author {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.msg-author:hover {
    text-decoration: underline;
    cursor: pointer;
}
.msg-time {
    font-size: 11px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.msg-text {
    font-size: 14.5px;
    color: var(--text-soft);
    line-height: 1.5;
    word-wrap: break-word;
}
.msg-text code {
    font-family: var(--mono);
    font-size: 12.5px;
    background: var(--code-inline);
    color: #c0341d;
    padding: 1px 6px;
    border-radius: 5px;
}
.msg-text a {
    color: var(--brand-strong);
}
/* Markdown blocks */
.md > * + * {
    margin-top: 4px;
}
.md-p {
    white-space: pre-wrap;
}
.md-list {
    margin: 2px 0;
    padding-left: 22px;
}
.md-list li {
    list-style: disc;
}
.md-quote {
    border-left: 3px solid var(--border);
    padding: 1px 0 1px 10px;
    color: var(--text-muted);
    margin: 2px 0;
}
.code-block {
    font-family: var(--mono);
    font-size: 12.5px;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    white-space: pre;
    margin: 4px 0;
    line-height: 1.45;
}
.code-block code {
    background: none;
    color: var(--text);
    padding: 0;
}
.mention {
    color: var(--brand-strong);
    background: var(--brand-weak, #e8efff);
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 600;
}
/* @mention autocomplete dropdown */
.mention-pop {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 220px;
    max-width: 320px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    padding: 4px;
    display: flex;
    flex-direction: column;
}
.mention-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
    color: var(--text);
    font-size: 13.5px;
}
.mention-item:hover,
.mention-item.active {
    background: var(--bg-active);
}
.mention-item strong {
    color: var(--brand-strong);
}
.msg.first {
    margin-top: 6px;
}
.msg.cont {
    margin-top: 0;
}
.edited-tag {
    color: var(--text-faint);
    font-size: 11px;
}
.msg-img {
    max-width: 360px;
    max-height: 280px;
    border-radius: 8px;
    margin-top: 4px;
    display: block;
    border: 1px solid var(--border);
}
.attach-btn {
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 6px;
    user-select: none;
}
.attach-btn:hover {
    background: var(--bg-hover);
}

/* Reactions + per-message actions */
.rxn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
}
.msg .rxn-add,
.msg .msg-edit,
.msg .msg-act {
    opacity: 0;
    transition: opacity 0.1s;
}
.msg:hover .rxn-add,
.msg:hover .msg-edit,
.msg:hover .msg-act {
    opacity: 1;
}
.msg .rxn {
    opacity: 1;
}
.rxn,
.rxn-add-btn,
.msg-act {
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-elev, #fff);
    color: var(--text-soft);
    border-radius: 12px;
    padding: 3px 8px;
}
.rxn.reacted {
    background: var(--brand-weak, #e8efff);
    border-color: var(--brand);
    color: var(--brand-strong);
}
.rxn:hover,
.rxn-add-btn:hover,
.msg-act:hover {
    background: var(--bg-hover);
}
.msg-act {
    border-radius: 6px;
    padding: 2px 6px;
}

/* Read receipt with hover tooltip */
.msg-read {
    position: relative;
    font-size: 11px;
    line-height: 1;
    color: var(--green);
    cursor: default;
}
.msg-read-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-on-brand, #fff);
    background: var(--text, #15191e);
    border-radius: 6px;
    padding: 4px 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}
.msg-read-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text, #15191e);
}
.msg-read:hover .msg-read-tip {
    opacity: 1;
}

.rxn-add,
.msg-edit {
    position: relative;
    display: inline-block;
}
.rxn-add summary,
.msg-edit summary {
    list-style: none;
}
.rxn-add summary::-webkit-details-marker,
.msg-edit summary::-webkit-details-marker {
    display: none;
}
.rxn-menu {
    position: absolute;
    z-index: 20;
    margin-top: 4px;
    display: flex;
    gap: 2px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.rxn-opt {
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 6px;
}
.rxn-opt:hover {
    background: var(--bg-hover);
}
.msg-edit-form {
    position: absolute;
    z-index: 20;
    margin-top: 4px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.reactions {
    display: flex;
    gap: 5px;
    margin-top: 4px;
}
.reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-active);
    border: 1px solid var(--brand);
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--brand-dark);
}

/* ═══ Compose box ══════════════════════════════════════════════════ */
.compose {
    flex-shrink: 0;
    padding: 0 20px 18px;
    background: var(--bg-main);
}
.compose-card {
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition:
        border-color 0.12s,
        box-shadow 0.12s;
}
.compose-card:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}
.compose-to {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-recipient);
    font-size: 13px;
    color: var(--text-muted);
}
.compose-to strong {
    color: var(--brand-dark);
}
.compose-body {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px;
}
.compose-body textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    background: transparent;
    min-height: 24px;
    max-height: 220px;
    line-height: 1.5;
}
.compose-body textarea::placeholder {
    color: var(--text-faint);
}
.compose-tools {
    display: flex;
    align-items: center;
    gap: 2px;
}
.compose-tools .tool {
    color: var(--text-faint);
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    background: none;
    border: none;
}
.compose-tools .tool:hover {
    background: var(--bg-hover);
    color: var(--text-soft);
}

/* ═══ Right sidebar — users ════════════════════════════════════════ */
.right {
    grid-area: right;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding-bottom: 24px;
}
.right-search {
    padding: 10px 12px;
}
.right-search input {
    width: 100%;
    height: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0 10px;
    font-size: 13px;
    outline: none;
    background: var(--bg-input);
}
.right-search input:focus {
    border-color: var(--brand);
}
.user-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 14px;
    color: var(--text-soft);
    font-size: 14px;
}
.user-row:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--text);
}
.user-row .u-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-row .u-status {
    font-size: 11px;
    color: var(--text-faint);
}

/* ═══ Buttons ══════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.12s,
        border-color 0.12s,
        box-shadow 0.12s,
        transform 0.04s;
}
.btn:active {
    transform: translateY(1px);
}
.btn-primary {
    background: var(--brand-strong);
    color: #fff;
    box-shadow: 0 1px 2px rgba(53, 118, 184, 0.35);
}
.btn-primary:hover {
    background: #2d68a6;
    text-decoration: none;
}
.btn-outline {
    background: #fff;
    color: var(--text-soft);
    border-color: var(--border-strong);
}
.btn-outline:hover {
    background: var(--bg-hover);
    text-decoration: none;
    border-color: var(--brand);
    color: var(--text);
}
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text);
    text-decoration: none;
}
.btn-danger {
    background: var(--red);
    color: #fff;
}
.btn-danger:hover {
    background: #c1121f;
}
.btn-block {
    width: 100%;
}
.btn-sm {
    padding: 5px 11px;
    font-size: 13px;
}
.btn-lg {
    padding: 11px 22px;
    font-size: 15px;
}

/* ═══ Auth pages ═══════════════════════════════════════════════════ */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            1200px 600px at 70% -10%,
            rgba(255, 255, 255, 0.18),
            transparent 60%
        ),
        linear-gradient(135deg, #3576b8 0%, #1e3a5f 100%);
    padding: 24px;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 30, 55, 0.35);
    padding: 40px 38px 32px;
}
.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 6px;
}
.auth-logo .logo-mark {
    width: 34px;
    height: 34px;
    background: var(--brand-strong);
    color: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
}
.auth-logo .name {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
}
.auth-tag {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 26px;
    font-size: 14px;
}

.field {
    margin-bottom: 16px;
}
.field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
}
.input {
    width: 100%;
    height: 40px;
    padding: 0 13px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    outline: none;
    transition:
        border-color 0.12s,
        box-shadow 0.12s;
    font-family: var(--font);
}
.input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 158, 227, 0.18);
}
.input::placeholder {
    color: var(--text-faint);
}
textarea.input {
    height: auto;
    padding: 10px 13px;
    resize: vertical;
    line-height: 1.5;
}

.auth-card .btn-block {
    margin-top: 8px;
    height: 42px;
}
.auth-foot {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.alert {
    border-radius: var(--radius);
    padding: 10px 13px;
    font-size: 13px;
    margin-bottom: 16px;
}
.alert-error {
    background: #fdecea;
    border: 1px solid #f3b5b2;
    color: #a32420;
}
.alert-ok {
    background: #eafaf1;
    border: 1px solid #aee5c6;
    color: #1f7a4d;
}

/* ═══ Generic inner pages (settings, lists, admin) ════════════════ */
.page {
    padding: 26px 32px;
    overflow-y: auto;
    height: 100%;
}
.page-narrow {
    max-width: 760px;
}
.page h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}
.page .lead {
    color: var(--text-muted);
    margin-bottom: 22px;
    font-size: 14px;
}
.page h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 26px 0 12px;
}

a.card {
    transition:
        border-color 0.12s,
        box-shadow 0.12s,
        transform 0.05s;
}
a.card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.card-row {
    display: flex;
    align-items: center;
    gap: 13px;
}
.card .c-title {
    font-weight: 700;
    color: var(--text);
    font-size: 15px;
}
.card .c-sub {
    font-size: 13px;
    color: var(--text-muted);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}
.stat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}
.stat .v {
    font-size: 30px;
    font-weight: 800;
    color: var(--brand-strong);
    line-height: 1;
    letter-spacing: -0.02em;
}
.stat .l {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
}

.tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-active);
    color: var(--brand-dark);
}
.tag-green {
    background: #eafaf1;
    color: #1f7a4d;
}

.health-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.h-ok {
    background: var(--green);
}
.h-warn {
    background: var(--amber);
}
.h-err {
    background: var(--red);
}

/* Settings split */
.settings {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 28px;
}
.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-nav .tab {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--text-soft);
    font-size: 14px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    width: 100%;
}
.settings-nav .tab:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--text);
}
.settings-nav .tab.active {
    background: var(--bg-active);
    color: var(--text);
    font-weight: 600;
}
.settings-nav a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--text-soft);
    font-size: 14px;
}
.settings-nav a:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--text);
}
.settings-nav a.active {
    background: var(--bg-active);
    color: var(--text);
    font-weight: 600;
}

/* Settings body panel */
.settings-body {
    min-width: 0;
}

/* Avatar upload placeholder */
.av-upload {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 2px dashed var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-muted);
    margin-bottom: 20px;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s;
}
.av-upload:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Display settings grid */
.display-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 640px) {
    .display-grid {
        grid-template-columns: 1fr;
    }
}

/* Toggle row */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
}
.toggle-row label {
    flex: 1;
    font-size: 14px;
    cursor: pointer;
    margin: 0;
}
.toggle-row .toggle-hint {
    font-size: 12px;
    color: var(--text-muted);
}

/* Per-channel notification grid */
.notif-channel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
}
.notif-channel-row .ch-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-levels {
    display: flex;
    gap: 4px;
}
.notif-levels button {
    padding: 5px 12px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-main);
    color: var(--text-soft);
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    transition:
        background 0.1s,
        border-color 0.1s,
        color 0.1s;
}
.notif-levels button:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.notif-levels button.active {
    background: var(--brand-weak);
    border-color: var(--brand);
    color: var(--brand-strong);
    font-weight: 600;
}

/* Card section heading */
.card-section {
    margin-bottom: 24px;
}
.card-section h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
}

details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

/* ═══ 404 ══════════════════════════════════════════════════════════ */
.notfound {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--bg-main);
}
.notfound .code {
    font-size: 80px;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
}
.notfound p {
    color: var(--text-muted);
    font-size: 16px;
}

/* Date divider in feed */
.date-sep {
    text-align: center;
    position: relative;
    margin: 14px 18px 4px;
}
.date-sep::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}
.date-sep span {
    position: relative;
    background: var(--bg-main);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

/* ═══ Responsive ═══════════════════════════════════════════════════ */
.nav-toggle {
    display: none;
} /* hidden checkbox (drawer state) */
.nav-burger {
    display: none; /* shown only on mobile */
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 2px;
    border-radius: var(--radius);
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.nav-burger:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Tablet/laptop: drop the right-hand user list, keep nav + streams + main */
@media (max-width: 1100px) {
    .shell {
        grid-template-columns: var(--left-w) minmax(0, 1fr);
        grid-template-areas: "nav nav" "left main";
    }
    .right {
        display: none;
    }
}

/* Mobile: single column; left sidebar becomes a slide-in drawer */
@media (max-width: 760px) {
    .shell {
        grid-template-columns: 1fr;
        grid-template-areas: "nav" "main";
    }
    .nav-burger {
        display: flex;
    }
    .nav-search {
        margin: 0;
    }
    .left {
        position: fixed;
        top: var(--nav-h);
        left: 0;
        bottom: 0;
        width: min(82vw, var(--left-w));
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 50;
        box-shadow: var(--shadow-lg);
    }
    .nav-toggle:checked ~ .left {
        transform: translateX(0);
    }
    /* tap-anywhere scrim (a real <label for=navtoggle>) closes the drawer */
    .nav-toggle:checked ~ .nav-scrim {
        display: block;
        position: fixed;
        inset: var(--nav-h) 0 0 0;
        background: var(--bg-overlay);
        z-index: 40;
    }
    .main-head {
        padding: 0 12px;
    }
    .feed .msg,
    .recipient,
    .compose {
        padding-left: 12px;
        padding-right: 12px;
    }
    .page {
        padding: 18px 16px;
    }
}

.nav-scrim {
    display: none;
}

/* ── Search page ─────────────────────────────────── */
.search-result-card {
    display: block;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e0e0e0);
    color: inherit;
    text-decoration: none;
    transition:
        box-shadow 0.15s,
        border-color 0.15s;
}
.search-result-card:hover {
    border-color: var(--accent, #1a73e8);
    box-shadow: 0 1px 6px rgba(26, 115, 232, 0.15);
}
.search-result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.search-result-kind {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}
.search-result-title {
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-result-snippet {
    font-size: 13px;
    color: var(--text-muted, #5f6368);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-result-footer {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-result-ts {
    font-size: 11px;
    color: var(--text-muted, #5f6368);
}
.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    gap: 12px;
}
.search-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border, #e0e0e0);
    border-top-color: var(--accent, #1a73e8);
    border-radius: 50%;
    animation: search-spin 0.7s linear infinite;
}

/* ── Views section in left sidebar ─────────────────── */
.views-section {
    border-top: 1px solid var(--border);
    padding-top: 6px;
}

/* ── Presence dots ────────────────────────────────── */
.p-online .ring {
    background: var(--green);
}
.p-idle .ring {
    background: var(--amber);
}
.p-offline .ring {
    background: var(--border-strong);
}

/* ── Polls ───────────────────────────────────────── */
.poll-card {
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 8px 0;
    max-width: 420px;
}
.poll-card .poll-question {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--text);
}
.poll-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    position: relative;
    overflow: hidden;
}
.poll-option:hover {
    background: var(--bg-hover);
}
.poll-option .bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--brand-weak, #e8efff);
    border-radius: 5px 0 0 5px;
    z-index: 0;
    transition: width 0.3s ease;
}
.poll-option .opt-text {
    position: relative;
    z-index: 1;
    flex: 1;
    font-size: 13.5px;
}
.poll-option .opt-count {
    position: relative;
    z-index: 1;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}
.poll-option.voted {
    border-color: var(--brand);
}
.poll-option.voted .bar {
    background: var(--brand-weak, #cfe2ff);
}
.poll-footer {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}
.poll-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--bg-subtle, #f8f9fb);
    border-radius: 8px;
    margin-bottom: 8px;
}
.poll-form .input {
    height: 34px;
    font-size: 13px;
}
.poll-form .poll-opts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.poll-form .poll-opt-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.poll-form .poll-opt-row input {
    flex: 1;
}
.poll-form .poll-opt-row button {
    flex-shrink: 0;
}
.compose-poll-btn {
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-faint);
}
.compose-poll-btn:hover {
    background: var(--bg-hover);
    color: var(--text-soft);
}

/* ── /me messages ────────────────────────────────── */
.msg-me {
    font-style: italic;
    color: var(--brand-strong);
}
.msg-me .me-author {
    font-weight: 700;
    font-style: normal;
}

/* ── Edit history ────────────────────────────────── */
.edit-history-trigger {
    cursor: pointer;
    color: var(--text-faint);
    font-size: 11px;
    border: none;
    background: none;
}
.edit-history-trigger:hover {
    color: var(--brand);
    text-decoration: underline;
}
.edit-history-popup {
    position: absolute;
    z-index: 20;
    margin-top: 2px;
    width: 280px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    color: var(--text-soft);
}
.edit-history-popup .eh-t {
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 6px;
}
.edit-history-popup .eh-body {
    color: var(--text-muted);
    line-height: 1.4;
    margin: 2px 0;
    white-space: pre-wrap;
}

/* ── Typing indicator ────────────────────────────── */
.typing-indicator {
    padding: 4px 20px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    animation: typing-blink 0.8s ease-in-out infinite alternate;
}
@keyframes typing-blink {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

/* ── Scheduled messages ──────────────────────────── */
.scheduled-banner {
    padding: 6px 16px;
    background: var(--bg-active);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
.scheduled-banner .sched-del {
    cursor: pointer;
    color: var(--red);
    font-size: 14px;
    margin-left: auto;
    border: none;
    background: none;
}
.schedule-picker {
    position: absolute;
    z-index: 25;
    margin-top: 4px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.schedule-picker input {
    font-size: 13px;
}

/* ── Giphy / GIF picker ──────────────────────────── */
.gif-picker {
    position: absolute;
    z-index: 30;
    bottom: calc(100% + 8px);
    left: 0;
    width: 300px;
    background: var(--bg-elev, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gif-picker input {
    font-size: 13px;
}
.gif-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}
.gif-results img {
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
}
.gif-results img:hover {
    outline: 2px solid var(--brand);
}

/* ── Inbox / Recent / Mentions pages ─────────────── */
.conv-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    cursor: pointer;
}
.conv-list-item:hover {
    background: var(--bg-hover);
}
.conv-list-item a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.conv-list-item .cl-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}
.conv-list-item .cl-preview {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 420px;
}
.conv-list-item .cl-time {
    font-size: 12px;
    color: var(--text-faint);
    margin-left: auto;
    flex-shrink: 0;
}
.conv-list-item.muted {
    opacity: 0.55;
}
.mention-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.mention-row:hover {
    background: var(--bg-hover);
}
.mention-row .m-sender {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}
.mention-row .m-body {
    font-size: 13px;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mention-row .m-conv {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.mention-row .m-time {
    font-size: 12px;
    color: var(--text-faint);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Status section in settings ──────────────────── */
.status-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-subtle, #f8f9fb);
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 14px;
}
.status-preview .sp-emoji {
    font-size: 18px;
}
.status-preview .sp-text {
    color: var(--text-soft);
}

/* ── Tabs ────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.tabs .tab {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition:
        color 0.1s,
        border-color 0.1s;
}
.tabs .tab:hover {
    color: var(--text);
}
.tabs .tab.active {
    color: var(--brand-strong);
    border-bottom-color: var(--brand);
    font-weight: 600;
}

/* ── Inline form row (linkifiers, profile fields) ── */
.inline-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.inline-form-row .drag-handle {
    cursor: grab;
    color: var(--text-faint);
    font-size: 14px;
}
@keyframes search-spin {
    to {
        transform: rotate(360deg);
    }
}