/* --- Theme --- */
/* Dark is the default look (data-theme is set server-side from the user's
   saved preference, see accounts.theme + base.html); the light palette is
   an override for [data-theme="light"] rather than the other way around. */
:root {
    --navy: #1C2B3A;
    --navy-hover: #28394c;
    --silver: #C0C8D0;
    --light: #F4F6F8;

    --bg: #10151c;
    --surface: #1a222c;
    --surface-2: #212b38;
    --border: #33404f;
    --text: #e7ecf2;
    --text-dim: #aab4c0;
    --text-muted: #7c8794;
    --danger: #ff6b6b;
    --danger-bg: #3a1e20;
    --danger-border: #6b2b2f;
    --success: #52d17c;
    --success-bg: #17301f;
    --success-border: #275c37;
    --warn-bg: #3a2f16;
    --warn-border: #6b4f1f;
    --today-bg: #2a2712;
    --shadow: rgba(0, 0, 0, 0.5);

    /* Overwritten with the real measured pixel height of .mobile-header /
       .bottom-nav by static/js/mobile-chrome.js once the page loads — these
       rem figures are just the best-guess fallback for the brief window
       before that JS runs. */
    --mobile-header-h: 3.25rem;
    --bottom-nav-h: 5rem;
}

:root[data-theme="light"] {
    --bg: #F4F6F8;
    --surface: #ffffff;
    --surface-2: #F4F6F8;
    --border: #C0C8D0;
    --text: #1C2B3A;
    --text-dim: #555555;
    --text-muted: #888888;
    --danger: #b00020;
    --danger-bg: #fdecea;
    --danger-border: #f5c2c0;
    --success: #1e7a34;
    --success-bg: #e6f4ea;
    --success-border: #b7dfc2;
    --warn-bg: #fff3e0;
    --warn-border: #e0a030;
    --today-bg: #fff8e1;
    --shadow: rgba(0, 0, 0, 0.15);
}

/* Howell Chat's own loading indicator — used wherever we're waiting on the
   network (WebSocket reconnect, etc). Sized in em so it matches whatever
   text it's inlined next to. */
.spinner {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.35em;
    vertical-align: -0.125em;
    border: 2px solid var(--border);
    border-top-color: var(--silver);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

* { box-sizing: border-box; }

body {
    font-family: system-ui, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

a { color: var(--text); }

/* Links auto-detected inside a message body, as opposed to nav/UI links
   (those keep the plain a{} above) — needs its own color or a pasted URL
   is indistinguishable from surrounding text. */
.message-body a, .feed-message-body a {
    color: var(--silver);
    text-decoration: underline;
    word-break: break-all;
}

h1, h2, h3 { color: var(--text); }

.wordmark {
    font-family: system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="datetime-local"], input[type="file"],
textarea, select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--surface);
    color: var(--text);
}

.btn {
    background: var(--navy);
    color: var(--silver);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.btn-outline {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
}

.btn-outline.active {
    background: var(--navy);
    color: var(--silver);
    border-color: var(--navy);
}

/* --- App layout: Discord-style persistent left sidebar --- */

.app-layout {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar {
    flex: 0 0 240px;
    background: var(--navy);
    color: var(--silver);
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}

.sidebar-brand {
    color: #fff;
    text-decoration: none;
    padding: 0 1rem 0.75rem;
    display: block;
    border-bottom: 1px solid rgba(192, 200, 208, 0.2);
}

.sidebar-links {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(192, 200, 208, 0.2);
}

.sidebar-links a {
    color: var(--silver);
    text-decoration: none;
    font-size: 0.9rem;
}

.sidebar-links a:hover {
    color: #fff;
}

.sidebar-heading {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(192, 200, 208, 0.6);
    padding: 0.9rem 1rem 0.25rem;
}

.channel-nav {
    list-style: none;
    margin: 0;
    padding: 0 0.5rem;
    flex: 1;
    overflow-y: auto;
}

.channel-nav li { margin: 0.1rem 0; }

.channel-nav a {
    display: block;
    color: var(--silver);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    font-size: 1.02rem;
}

.channel-nav a:hover {
    background: var(--navy-hover);
    color: #fff;
}

.channel-nav a.active {
    background: var(--silver);
    color: var(--navy);
    font-weight: 600;
}

.channel-nav-empty {
    color: rgba(192, 200, 208, 0.6);
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
}

.sidebar-footer {
    padding: 0.75rem 1rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(192, 200, 208, 0.2);
    font-size: 0.8rem;
}

.sidebar-profile-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--silver);
    text-decoration: none;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
}

.sidebar-profile-pill:hover {
    color: #fff;
}

.sidebar-profile-pill span:not(.sidebar-avatar):not(.sidebar-settings-gear) {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-avatar-fallback {
    background: var(--silver);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.sidebar-settings-gear {
    opacity: 0.7;
    font-size: 0.85rem;
}

.content {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem;
    max-width: 900px;
}

/* Login/registration pages render with no sidebar and no bottom-nav (both
   are gated on request.user.is_authenticated in base.html), so .content
   is the sole child of .app-layout there — that's exactly the case where
   it should be centered as a page, rather than hugging the left edge like
   it does when there's a sidebar to its left. */
.app-layout > .content:only-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: none;
}

.auth-card {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2rem 1.75rem;
    box-shadow: 0 4px 20px var(--shadow);
}

/* Chat/DM pages: pin the whole page to exactly the viewport height so
   only the message list scrolls. Without this, the message-stream's own
   fixed height plus the header/composer around it could add up to
   slightly more than the viewport, so the outer page ALSO became
   scrollable by a few pixels — two nested scroll regions fighting each
   other, which is what made the window feel like it drifted up and down
   on its own. box-sizing:border-box (set globally above) means the
   existing mobile padding-top/bottom for the fixed header/bottom-nav is
   included in that height automatically, not added on top of it.
   Three fallback tiers, last one wins where supported:
     100vh   - baseline, but on mobile this is measured against the
               LARGEST possible viewport (address bar hidden), so on load
               (address bar shown) the page is taller than what's actually
               visible, and our fixed bottom-nav — anchored to the real
               visual viewport — ends up overlapping content near the
               bottom edge.
     100dvh  - "dynamic" viewport height, meant to track the address bar
               live. In practice this is exactly what was producing the
               bounce: as Chrome/Safari show/hide their toolbar mid-scroll,
               dvh recalculates and the fixed-height box resizes under the
               user's thumb, which is felt as a spring-back bounce.
     100svh  - "small" viewport height: a FIXED value equal to the
               worst case (toolbar fully shown), same number whether the
               toolbar is showing or not. Doesn't recalculate mid-gesture,
               so nothing to desync from position:fixed — trades a sliver
               of unused space when the toolbar auto-hides for a layout
               that never moves under you. */
.content.chat-page {
    /* Unlike other pages, a chat page has no reason to stay within the
       base .content rule's 900px reading-width cap — there's no prose to
       keep short lines for, and on a wide desktop window it just wastes
       space on either side of a narrow message column. */
    max-width: none;
    /* The base .content rule sets flex:1, which is flex-grow:1 PLUS
       flex-basis:0% — and a flex item's flex-basis (when not auto)
       overrides its own height for sizing purposes. That silently made
       every height value below irrelevant: this element's real rendered
       height was actually being stretched by flex-grow to fill
       .app-layout's min-height:100vh instead of respecting 100svh at all.
       On a real phone, 100vh can genuinely exceed what's actually visible
       (it doesn't account for the address bar the way svh does), so this
       was rendering taller than the visible screen — pushing the composer
       and bottom-nav below the fold and making the *outer page* the thing
       that needed scrolling, not the message list .chat-window-messages
       was built to be the only scrollable region for. The flex:0 0 auto
       override that restores this only belongs in the mobile media query
       below, though — .app-layout is only flex-direction:column (making
       flex-basis a HEIGHT concern) there. On desktop .app-layout is still
       row-direction, where flex-basis is a WIDTH concern instead; applying
       flex:0 0 auto unconditionally made this box's width lock to its
       content's max-content size (i.e. as wide as its longest unwrapped
       paragraph would be on one line) and refuse to shrink back down,
       overflowing the whole page horizontally the moment any message had
       enough text to need wrapping. Desktop keeps the base .content rule's
       ordinary flex:1 (grow AND shrink) instead, which is what correctly
       bounds it to the space next to the sidebar. */
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    overflow: hidden;
}

.chat-window-header {
    flex: 0 0 auto;
}

.chat-stream-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-window-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.75rem;
}

/* Floats above the message list (not inside it — .chat-window-messages is
   the scrolling element, so an absolutely-positioned child of it would
   scroll away with the content instead of staying put). Hidden by default;
   JS toggles it based on scroll position. */
.jump-to-bottom-btn {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: var(--silver);
    border: none;
    border-radius: 20px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--shadow);
    z-index: 5;
}

.chat-window-composer {
    flex: 0 0 auto;
    padding-top: 0.5rem;
}

/* --- Mobile top header + bottom nav (both hidden on desktop) --- */

.mobile-header {
    display: none;
}

.bottom-nav {
    display: none;
}

@media (max-width: 720px) {
    .app-layout { flex-direction: column; }
    .sidebar { display: none; }
    /* .app-layout's min-height:100vh (above) is meant for normal pages —
       fill the screen even with little content. On a chat/DM page that's
       actively harmful: 100vh can genuinely exceed the true visible
       viewport on a real phone (unlike the svh .content.chat-page uses),
       so .app-layout itself would still end up taller than the screen —
       making the *outer page* scrollable into blank space below the
       already-correctly-sized chat window, independent of the flex-basis
       fix on .content.chat-page. Dropping it here means .app-layout's
       height comes only from that child's actual (svh-capped) size. */
    .app-layout:has(.content.chat-page) {
        min-height: 0;
    }
    /* See the long comment on .content.chat-page above — this is the half
       of that fix that's actually mobile-specific (.app-layout is only
       column-direction here, which is what makes flex-basis a height
       concern instead of a width one). */
    .content.chat-page {
        flex: 0 0 auto;
    }
    /* Padded clear of the fixed mobile-header/bottom-nav using their real
       measured height (--mobile-header-h/--bottom-nav-h, set by
       static/js/mobile-chrome.js) rather than a guessed rem figure — safe
       area insets, emoji glyph metrics, and system font size all made a
       fixed guess fall short on some real devices even after accounting
       for env(safe-area-inset-*). The extra +1.5rem beyond the measured
       nav height is deliberate slack on top of that (not just cosmetic
       breathing room) — chat window a bit smaller, in exchange for not
       being one measurement quirk away from hiding the attach row again. */
    .content {
        padding-bottom: calc(var(--bottom-nav-h) + 1.5rem);
        padding-top: var(--mobile-header-h);
    }

    /* The channel name repeats the page's context (it's already in the
       mobile-header above), so on a small screen it doesn't need to be
       full default h1 size — shrinking it leaves more room for messages. */
    /* .content already has its own left/right padding on mobile, so this
       box's matching horizontal padding was just double-padding — dropping
       it (top/bottom stays, for breathing room above the first message and
       below the last) buys back a bit of width for the actual message
       cards, which is at more of a premium on a phone screen than on
       desktop. */
    .chat-window-messages {
        padding: 0.75rem 0;
    }

    .chat-window-header h1 {
        font-size: 1.3rem;
        margin: 0.4rem 0;
    }

    .mobile-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 2.75rem;
        background: var(--navy);
        color: #fff;
        z-index: 20;
        padding: env(safe-area-inset-top, 0) 0.75rem 0;
    }

    .mobile-header-brand {
        flex-shrink: 0;
        max-width: 45%;
        font-size: 1.1rem;
        color: #fff;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-header-title {
        flex: 1;
        min-width: 0;
        font-size: 1.15rem;
        color: #fff;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Set by mobile-chrome.js when the title is too long to fit centered
       without visually colliding with the brand on the left — right-aligning
       instead of truncating with an ellipsis keeps the tail of the title
       (often the more identifying part, e.g. a person's last name) visible. */
    .mobile-header-title.wordmark-overflow {
        text-align: right;
    }

    .browse-list a strong {
        font-size: 1.08rem;
    }

    .browse-list .icon-badge, .browse-list .icon-emoji {
        font-size: 1.3em;
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--navy);
        border-top: 1px solid rgba(192, 200, 208, 0.2);
        padding-bottom: env(safe-area-inset-bottom, 0);
        z-index: 20;
    }

    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.5rem 0;
        color: rgba(192, 200, 208, 0.75);
        text-decoration: none;
        font-size: 0.68rem;
    }

    .bottom-nav-icon {
        font-size: 1.15rem;
        line-height: 1;
    }

    .bottom-nav a.active {
        color: #fff;
    }
}

/* --- Monthly calendar grid --- */

.calendar-grid th {
    text-align: center;
    padding: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.calendar-day {
    vertical-align: top;
    border: 1px solid var(--border);
    height: 6rem;
    padding: 0.3rem;
    overflow: hidden;
}

.calendar-day-outside {
    background: var(--surface-2);
    color: var(--text-muted);
}

.calendar-day-today {
    background: var(--today-bg);
}

.calendar-day-number {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.calendar-event {
    display: block;
    font-size: 0.72rem;
    background: var(--navy);
    color: var(--silver);
    text-decoration: none;
    border-radius: 3px;
    padding: 0.1rem 0.3rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event:hover {
    background: var(--navy-hover);
}

@media (max-width: 720px) {
    .calendar-day { height: 4rem; font-size: 0.7rem; }
}

/* --- Combined feed --- */

.feed-group {
    margin-bottom: 1rem;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.feed-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.feed-group-header:hover {
    filter: brightness(1.1);
}

.feed-group-day {
    font-size: 0.72rem;
    opacity: 0.85;
}

.feed-group-body {
    padding: 0.6rem 0.75rem;
    background: var(--surface);
    cursor: pointer;
}

.feed-group-body:hover {
    background: var(--surface-2);
}

.feed-group-body a {
    cursor: pointer;
}

.feed-message-author {
    margin-top: 0.6rem;
}

.feed-message-author:first-child {
    margin-top: 0;
}

.feed-message-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: 0.4rem;
}

.feed-message-body {
    margin: 0.1rem 0 0;
}

/* --- Mobile browse list --- */

.browse-list {
    list-style: none;
    padding: 0;
}

.browse-list li {
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0.25rem;
}

.browse-list a {
    text-decoration: none;
    color: var(--text);
    display: block;
}

.browse-list-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: normal;
}

.icon-quickpicks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: -0.5rem 0 1rem;
}

.icon-quickpick-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 4px;
    font-size: 1.1rem;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
}

.icon-quickpick-btn:hover {
    background: var(--surface-2);
}

.icon-badge, .icon-quickpick-badge {
    font-family: system-ui, sans-serif;
    text-transform: lowercase;
}

.icon-badge, .icon-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7em;
    height: 1.7em;
    font-size: 1em;
    line-height: 1;
    vertical-align: middle;
}

.icon-badge {
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
}

.icon-quickpick-badge {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-size: 1.3rem;
    padding: 0.15rem 0.5rem;
}

.icon-quickpick-badge:hover {
    background: var(--navy-hover);
}

/* --- Per-channel / per-page admin sections (Mattermost System Console style) --- */

.admin-badges {
    margin-top: -0.5rem;
}

.admin-badge {
    display: inline-block;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.1rem 0.6rem;
    font-size: 0.78rem;
    margin-right: 0.35rem;
}

.admin-badge-warn {
    background: var(--warn-bg);
    border-color: var(--warn-border);
}

.admin-section {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.admin-section h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.admin-action-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-danger-zone {
    border-color: var(--danger);
}

/* --- Channel Files & Links index --- */

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}

.file-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
}

.file-card-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.file-card-play {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    pointer-events: none;
}

/* Collapsible Files & Links sections — closed by default (see
   channel_files.html), <details>/<summary> rather than a JS toggle so it
   works with zero script and gets free keyboard/accessibility handling. */
.files-section > summary {
    cursor: pointer;
    list-style: none;
}

.files-section > summary::-webkit-details-marker {
    display: none;
}

.files-section > summary h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.files-section > summary h2::before {
    content: '▸';
    display: inline-block;
    font-size: 0.8em;
    transition: transform 0.15s ease;
}

.files-section[open] > summary h2::before {
    transform: rotate(90deg);
}

.files-section-count {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.05rem 0.5rem;
}

.files-section > summary ~ * {
    margin-top: 0.75rem;
}

.file-card-thumb {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    background: var(--bg);
}

.file-card-caption {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
}

.file-card-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-meta {
    opacity: 0.65;
}

.media-list-item, .link-list-item {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.media-list-item video, .media-list-item audio {
    max-width: 100%;
    display: block;
    margin-top: 0.35rem;
}

.link-list-item a {
    word-break: break-all;
}

.file-list-meta {
    font-size: 0.75rem;
    opacity: 0.65;
    margin-top: 0.15rem;
}

.admin-danger-zone h2 {
    color: var(--danger);
}

.admin-channel-list {
    list-style: none;
    padding: 0;
}

.admin-channel-order-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: -0.5rem;
}

.admin-channel-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.4rem;
}

.admin-channel-order-controls {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex-shrink: 0;
}

.admin-channel-order-controls form {
    margin: 0;
}

.admin-channel-order-btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    cursor: pointer;
}

.admin-channel-order-btn:hover:not(:disabled) {
    background: var(--surface-2);
}

.admin-channel-order-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.admin-channel-link {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
}

.admin-channel-row:hover {
    border-color: var(--border);
    background: var(--surface-2);
}

.admin-channel-name {
    font-weight: 600;
}

/* --- Shared avatar circle (chat/_avatar.html) --- */

.avatar-circle {
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-fallback {
    background: var(--navy);
    color: var(--silver);
    font-weight: 600;
}

.avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; }
.avatar-md { width: 40px; height: 40px; font-size: 1rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }

/* --- DM inbox (Mattermost-style: avatar + name + preview, sorted by activity) --- */

.dm-list {
    list-style: none;
    padding: 0;
}

.dm-row-wrapper {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.dm-row-wrapper .dm-row {
    flex: 1;
    min-width: 0;
}

.dm-row-delete-form {
    flex-shrink: 0;
}

.dm-row-delete-btn {
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.45;
    font-size: 0.9rem;
    padding: 0.5rem;
}

.dm-row-delete-btn:hover {
    opacity: 0.9;
}

.dm-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
}

.dm-row:hover {
    background: var(--surface-2);
}

.dm-row-name {
    font-weight: 600;
}

.dm-row-preview {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-new-message-panel {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 1rem;
}

.dm-person-list {
    list-style: none;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.dm-person-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    font: inherit;
}

.dm-person-row:hover {
    background: var(--surface-2);
}

#dm-group-name {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
}

#dm-start-btn {
    margin-top: 0.5rem;
    width: 100%;
}

.dm-thread-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

/* --- Invite cards (replaces a table that badly overflowed on mobile) --- */

.invite-create-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.invite-create-form input {
    width: auto;
}

.invite-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.invite-card {
    display: flex;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    flex-wrap: wrap;
}

.invite-qr {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: #fff;
    padding: 4px;
    border-radius: 4px;
}

.invite-card-details {
    flex: 1;
    min-width: 180px;
}

.invite-card-code {
    font-family: monospace;
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-all;
    margin-bottom: 0.4rem;
}

/* .admin-badges carries a negative margin-top meant to pull it snug under
   an H1 elsewhere (channel_manage.html) — reused here for the pill styling,
   but that negative margin makes it overlap the code text above it. */
.invite-card-details .admin-badges {
    margin-top: 0;
}

.invite-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

@media (max-width: 720px) {
    .invite-card { flex-direction: column; align-items: center; text-align: center; }
    .invite-card-actions { justify-content: center; }
}

/* --- User cards (replaces a 6-column table that got cramped on mobile) --- */

.user-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.user-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
}

.user-card-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
}

.user-card-email {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.user-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.user-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* --- Django messages banners --- */

.messages {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.message-alert {
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.message-alert-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.message-alert-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.message-alert-info, .message-alert-warning {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}

.invite-send-form {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.invite-send-form input[type="email"] {
    width: auto;
    flex: 1;
    min-width: 160px;
}

/* --- Message composer toolbar (static/js/composer.js) --- */

.composer-toolbar {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.3rem;
    position: relative;
}

.composer-toolbar button {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.2;
}

.composer-toolbar button:hover {
    background: var(--surface-2);
}

.composer-toolbar[hidden] {
    display: none;
}

/* --- Compact (Messenger-style) composer row — the formatting toolbar
   above is hidden by default (toggled via .composer-icon-btn's "Aa"
   button) rather than permanently taking up a whole row, and the file
   picker triggers straight off the paperclip icon instead of a separate
   always-visible "Choose File / Attach" row. A stacked toolbar + full-size
   textarea + upload row was eating a large fraction of a phone screen
   before every message was even typed. */
.composer-row {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}

.composer-icon-btn {
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.composer-icon-btn:hover {
    background: var(--surface-2);
}

.composer-icon-btn.active {
    background: var(--navy);
    color: var(--silver);
    border-color: var(--navy);
}

.composer-send-btn {
    flex-shrink: 0;
    border: none;
    background: var(--navy);
    color: var(--silver);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.composer-input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.9rem;
    border-radius: 1.3rem;
    resize: none;
    overflow-y: auto;
    min-height: 2.75rem;
    font-family: inherit;
    line-height: 1.3;
}

.composer-status {
    font-size: 0.8rem;
    color: var(--text);
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
    display: none;
}

@media (max-width: 720px) {
    .composer-icon-btn, .composer-send-btn {
        width: 3rem;
        height: 3rem;
        font-size: 1.3rem;
    }
}

/* --- Categorized emoji picker (static/js/emoji-picker.js) — used by both
   the composer toolbar and message reactions --- */

.emoji-picker-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow);
    width: 380px;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
}

/* Used by the composer toolbar, which is pinned near the bottom of a
   height-locked, overflow:hidden chat page — opening downward there gets
   clipped off-screen entirely, so it opens upward over the message list
   instead. The reaction picker (mid-message-list, room below) keeps the
   default downward direction. */
.emoji-picker-panel-up {
    top: auto;
    bottom: 100%;
    margin-bottom: 0.4rem;
}

.emoji-picker-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    scrollbar-color: var(--text-muted) transparent;
    scrollbar-width: thin;
}

.emoji-picker-tabs::-webkit-scrollbar {
    height: 6px;
}

.emoji-picker-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.emoji-picker-tabs::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.emoji-picker-tab {
    flex: 1 0 auto;
    border: none;
    background: none;
    font-size: 1.2rem;
    padding: 0.45rem 0.5rem;
    cursor: pointer;
    opacity: 0.5;
    border-bottom: 2px solid transparent;
}

.emoji-picker-tab.active {
    opacity: 1;
    border-bottom-color: var(--navy);
}

.emoji-picker-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    padding: 0.5rem 0.6rem 0.2rem;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.1rem;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.3rem 0.4rem 0.5rem;
}

.emoji-picker-choice {
    border: none;
    background: none;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.3rem 0;
    cursor: pointer;
    border-radius: 4px;
}

.emoji-picker-choice:hover {
    background: var(--surface-2);
}

.emoji-picker-empty {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 1rem 0;
    text-align: center;
}

/* Toolbar glyphs (B / S / • / @ / 😀) read as a blur of near-identical
   small marks at arm's length on a phone — bump them and their touch
   targets up substantially, well past the 44px minimum, on mobile only.
   Desktop keeps the compact size since a mouse pointer doesn't need it. */
@media (max-width: 720px) {
    .composer-toolbar {
        gap: 0.4rem;
    }

    .composer-toolbar button {
        font-size: 1.5rem;
        padding: 0.35rem 0.7rem;
        min-width: 3rem;
        min-height: 3rem;
    }

    .emoji-picker-panel {
        width: 340px;
    }

    .emoji-picker-tab {
        font-size: 1.5rem;
        padding: 0.6rem 0.55rem;
    }

    .emoji-picker-grid {
        grid-template-columns: repeat(6, 1fr);
        max-height: 260px;
    }

    .emoji-picker-choice {
        font-size: 1.7rem;
        padding: 0.4rem 0;
    }
}

/* Each message gets its own bordered card — a plain stacked list read as
   one continuous block with no visual break between who-said-what, so
   this borrows the card look already used for feed-group/admin-section/
   invite-card elsewhere in the app. */
.message {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--surface);
}

.message:last-child {
    margin-bottom: 0;
}

.message-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.message-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.message-author-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.message-timestamp {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.message-edited-tag {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Edit-in-place reuses the compose row's own classes (.composer-toolbar/
   .composer-icon-btn/.composer-input) for parity with composing a new
   message — same bold/strike/bullet/@/emoji toolbar and attach button, not
   a stripped-down plain textarea. Unlike the compose row, the icon buttons
   sit on their own line below the textarea rather than beside it — beside
   it left too little width for the field on a phone screen. */
.message-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.25rem 0;
}

.message-edit-form .composer-input {
    width: 100%;
    box-sizing: border-box;
    /* .message-edit-form is a column flex container, so height is its main
       axis — without flex:none here, the flex-basis/flex-shrink algorithm
       governs this item's height instead of the JS-set inline style
       autoResize() relies on, pinning it near min-height no matter what
       autoResize computes. The main composer's textarea never hit this:
       .composer-row is row-direction, where height is the cross axis and
       isn't touched by that algorithm. */
    flex: none;
}

.message-edit-icon-row {
    display: flex;
    gap: 0.4rem;
}

.message-edit-actions {
    display: flex;
    gap: 0.4rem;
}

.message-edit-actions .btn,
.message-edit-actions .btn-outline {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

/* DM per-message delete: 🗑️ opens a small "for me / for everyone" choice
   right there instead of a plain confirm() dialog, since which one makes
   sense depends on whether this viewer wrote the message — only the
   author can pull it back for both people. */
.message-delete {
    position: relative;
    display: inline-flex;
}

.message-delete-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.3rem;
    box-shadow: 0 2px 8px var(--shadow);
    white-space: nowrap;
}

/* Setting display:flex above (needed to lay out the two option buttons in
   a column once shown) also quietly beats the browser's default
   [hidden] { display: none } — same gotcha as .composer-toolbar[hidden]
   elsewhere in this file. Without this, both panels rendered open on
   every page load regardless of the hidden attribute. */
.message-delete-panel[hidden] {
    display: none;
}

.message-delete-option {
    border: none;
    background: none;
    text-align: left;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.82rem;
}

.message-delete-option:hover {
    background: var(--surface-2);
}

/* Message bodies now render <strong>/<del>/<ul><li> via render_message_body
   and renderMessageBody() — reset default list spacing so bullets fit
   inline with the rest of a compact chat message. */
.message ul, .feed-message-body ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.settings-link-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 1.08rem;
    margin: 0.5rem 0 1rem;
}

.event {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1.5rem;
}

.event-subcard {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
}

.event-info {
    margin-bottom: 1.25rem;
}

.event-calendar-links {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.event-rsvp-card {
    margin-bottom: 0;
}

.event-attendees {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-dim);
}

.event-delete-form {
    flex-shrink: 0;
}

/* --- @mentions --- */

.mention {
    background: rgba(192, 200, 208, 0.18);
    color: var(--text);
    font-weight: 600;
    border-radius: 3px;
    padding: 0 0.2rem;
}

.composer-mention-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    width: 200px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 2px 6px var(--shadow);
}

.composer-mention-choice {
    border: none;
    background: none;
    color: var(--text);
    text-align: left;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
}

.composer-mention-choice:hover {
    background: var(--surface-2);
}

/* --- Light/dark theme toggle switch (Settings → Appearance) --- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.theme-toggle input {
    display: none;
}

.theme-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px var(--shadow);
    transition: transform 0.2s ease;
}

.theme-toggle input:checked + .theme-toggle-track {
    background: var(--navy);
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb {
    transform: translateX(20px);
}

.theme-toggle-label {
    font-size: 0.9rem;
    color: var(--text);
}

/* --- First-launch banners: install prompt (static/js/install-prompt.js)
   and push notification prompt (static/js/push-prompt.js). Both banners
   append into this one fixed-position stack so they queue vertically
   instead of overlapping when a browser is eligible for both at once. --- */

#app-banner-stack {
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 420px;
    margin: 0 auto;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.push-prompt,
.install-prompt {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 16px var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.push-prompt-text,
.install-prompt-text {
    font-size: 0.9rem;
    color: var(--text);
}

.push-prompt-actions,
.install-prompt-actions {
    display: flex;
    gap: 0.5rem;
}

.push-prompt-actions .btn,
.push-prompt-actions .btn-outline,
.install-prompt-actions .btn,
.install-prompt-actions .btn-outline {
    flex: 1;
    text-align: center;
}

@media (max-width: 720px) {
    #app-banner-stack {
        top: calc(var(--mobile-header-h) + 0.6rem);
    }
}

/* --- Unread indicators (sidebar, bottom-nav, browse list, DM inbox) --- */

.unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    margin-left: 0.4rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Overlaid on a bottom-nav tab's icon instead of sitting inline after text. */
.bottom-nav-icon {
    position: relative;
}

.bottom-nav-icon .unread-dot {
    position: absolute;
    top: -2px;
    right: -7px;
    margin-left: 0;
}

/* --- Read receipts --- */

/* DMs: a plain "Read" mark under the most recent message you sent, once
   the other participant has seen it — see views.dm_thread. */
.read-receipt-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* Channels: a clickable 👁 N count that expands into who has/hasn't read
   the message — the director's use case this was built for is scanning a
   channel announcement to see who still needs a nudge. */
.read-receipt {
    position: relative;
    margin-top: 0.3rem;
    display: flex;
    justify-content: flex-end;
}

.read-receipt-toggle {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.75;
    font-size: 0.75rem;
    padding: 0.1rem 0.2rem;
}

.read-receipt-toggle:hover {
    opacity: 1;
}

.read-receipt-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 15;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.7rem;
    width: 240px;
    max-width: calc(100vw - 3rem);
    box-shadow: 0 2px 8px var(--shadow);
    font-size: 0.8rem;
    color: var(--text);
}

/* Added when there's no room below (e.g. the last message in the list) —
   see the readReceiptToggle click handler in channel_detail.html. */
.read-receipt-panel-up {
    top: auto;
    bottom: 100%;
    margin-bottom: 0.3rem;
}

.read-receipt-section {
    margin-bottom: 0.4rem;
}

.read-receipt-section:last-child {
    margin-bottom: 0;
}

/* --- Shared lightbox (image/video viewer, see static/js/lightbox.js) --- */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.lightbox-media {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 4px;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* Prev/next — only rendered when the opened item belongs to a gallery of
   more than one same-kind attachment, see lightbox.js. */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .lightbox-nav {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.4rem;
    }
    .lightbox-prev { left: 0.4rem; }
    .lightbox-next { right: 0.4rem; }
}

/* Video attachments in the message stream — a thumbnail with a play badge,
   same footprint as an image attachment, opening in the lightbox instead of
   the always-on inline player Files & Links uses. */
.attachment-video-thumb {
    position: relative;
    display: inline-block;
    margin-top: 0.25rem;
}

.attachment-video-fallback {
    display: inline-flex;
    align-items: center;
    height: 90px;
    padding: 0 0.75rem;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text);
}

.attachment-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    pointer-events: none;
}