/* ============================================================================
   chat.css — Connext web chat surface (cedit house style)

   Replaces the old 660-line inline <style> in chat.html. Every value resolves
   to a cedit token defined in style-light.css / style-dark.css (loaded via
   getThemeCSS), so this stylesheet CANNOT drift off the design system the way
   the old bespoke block did — that drift is why the previous GUI failed.

   It styles the ACTUAL markup chat.js generates (verified against chat.js):
   .channel-item/.channel-name/.lock, .msg/.msg-gutter/.msg-avatar/.msg-main/
   .msg-head/.body/.reactions, .reaction-pill, .thread-pane, .space-avatar,
   .search-*, .mention-*, etc. Messages use Slack/RocketChat-style author
   grouping: an avatar gutter + inline author/time header on the first message
   of a run, and compact continuations (.msg-grouped) with a hover-only time.
   Layout mirrors the approved prototype: rail | channel sidebar | messages |
   thread. Full-bleed workspace (chat is its own surface, like Slack).
   ========================================================================== */

body { margin: 0; }

/* ---- Full-bleed workspace shell ---------------------------------------- */
.chat-shell {
    display: grid;
    grid-template-columns: 64px 300px minmax(0, 1fr);
    /* Bind the single row to the viewport. Without an explicit track the
       implicit row is `auto` and grows with .chat-main's content (all
       messages), pushing the composer below the overflow:hidden edge. */
    grid-template-rows: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh; /* mobile: exclude the browser's dynamic toolbars */
    overflow: hidden;
    font-family: var(--cd-font);
    color: var(--text-primary);
    background: var(--bg-primary);
}
.chat-shell.thread-open { grid-template-columns: 64px 300px minmax(0, 1fr) 380px; }

@media (max-width: 1100px) {
    .chat-shell, .chat-shell.thread-open { grid-template-columns: 64px minmax(0, 1fr); }
    .chat-sidebar { display: none; }
    /* Narrow screens can't fit a 4th column, so the thread docks as a
       full-screen overlay above the chat (Slack-mobile style). Its own
       close button (thread-header .btn-close) dismisses it. */
    .thread-pane.open { position: fixed; inset: 0; z-index: 2500; }
}

/* ---- Suite rail (navy) — .spaces-rail + rail-bottom -------------------- */
.spaces-rail {
    background: var(--cd-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 0;
    border-right: 1px solid var(--cd-navy-3);
    overflow: hidden;
}
.spaces-rail .rail-top { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.space-avatar {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    color: var(--cd-hint);
    background: transparent;
    border: none;
    font-family: var(--cd-display);
    font-weight: 600; font-size: 15px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.space-avatar:hover { background: rgba(255,255,255,.08); color: #fff; }
.space-avatar.active { background: var(--cd-blue); color: #fff; }
.space-avatar i { font-size: 20px; }
.rail-sep { width: 26px; height: 1px; background: rgba(255,255,255,.14); margin: 4px 0; }

/* ---- Channel sidebar --------------------------------------------------- */
.chat-sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex; flex-direction: column; min-width: 0;
}
.chat-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px; padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-title {
    font-family: var(--cd-display);
    font-weight: 500; font-size: 17px; letter-spacing: -.01em;
    display: flex; align-items: center; min-width: 0;
}
.secure-badge {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    background: color-mix(in srgb, var(--cd-ok) 16%, transparent);
    color: var(--cd-ok); white-space: nowrap;
}
.secure-badge i.bi { font-size: 11px; }
#ws-status-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted); margin-left: 4px;
}
#ws-status-dot.online  { background: var(--cd-ok); }
#ws-status-dot.offline { background: var(--cd-fail); }

.chat-search-wrap { position: relative; margin: 12px 14px 4px; }
.chat-search-wrap i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 14px;
}
.chat-search-input {
    width: 100%; padding: 9px 12px 9px 34px;
    border: 1px solid var(--border-color); border-radius: 10px;
    background: var(--bg-input); color: var(--text-primary); font-size: 13.5px;
}
.chat-search-input::placeholder { color: var(--text-muted); }
.chat-search-input:focus { outline: none; border-color: var(--cd-blue); }

.channel-list { flex: 1; overflow-y: auto; padding: 8px; }
.section-label {
    padding: 12px 10px 4px;
    color: var(--text-muted); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
}
/* Section header with a trailing action (the Direct-messages "+"). */
.section-label-action { display: flex; align-items: center; justify-content: space-between; }
.section-add {
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; border-radius: 8px; line-height: 1;
    min-width: 30px; min-height: 30px; margin: -6px -4px -4px 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.section-add:hover { background: var(--hover-bg); color: var(--cd-blue); }
.section-add:focus-visible { outline: 2px solid var(--cd-blue); outline-offset: 1px; }
.channel-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; text-align: left;
    padding: 7px 10px; border: none; border-radius: 10px;
    background: transparent; color: var(--text-secondary);
    font-size: 14px; font-family: inherit; min-height: 36px; cursor: pointer;
    transition: background .1s, color .1s;
}
.channel-item:hover { background: var(--hover-bg); color: var(--text-primary); }
.channel-item.active {
    background: color-mix(in srgb, var(--cd-blue) 14%, transparent);
    color: var(--text-primary); font-weight: 600;
}
.channel-item.active > i.bi { color: var(--cd-blue); }
.channel-item > i.bi { color: var(--text-muted); flex-shrink: 0; font-size: 15px; }
.channel-item .channel-hash { color: var(--text-muted); }
/* DM / group leading avatar — coloured initials circle (mockup parity). */
.channel-item .row-avatar {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1;
    font-variant: normal; letter-spacing: .02em;
}
.channel-item .row-avatar.group { background: var(--cd-blue); }
.channel-item .row-avatar.group i.bi { color: #fff; font-size: 13px; }
.channel-item.muted { opacity: .62; }
.channel-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.channel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-topic, .channel-description {
    font-size: 11.5px; color: var(--text-muted); font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.channel-item .lock { color: var(--cd-blue); opacity: .8; flex-shrink: 0; font-size: 12px; }
.channel-item .mute-badge { color: var(--text-muted); flex-shrink: 0; font-size: 12px; }
.channel-item .unread-badge {
    flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--cd-blue); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Muted channels: unread still counts but stays quiet (no bright badge). */
.channel-item.muted .unread-badge { background: var(--text-muted); }

/* ---- Main message column ---------------------------------------------- */
.chat-main {
    background: var(--bg-secondary);
    display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative;
}
.chat-header {
    display: flex; align-items: center; gap: 8px;
    padding: 0 18px; min-height: 60px;
    border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.chat-header strong { font-family: var(--cd-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
/* E2EE chip (chat.js emits .badge.bg-success) — re-cast in brand blue */
.chat-header .badge.bg-success {
    background: color-mix(in srgb, var(--cd-blue) 14%, transparent) !important;
    color: var(--cd-blue) !important; font-weight: 600; border-radius: 999px;
    padding: 4px 10px;
}
/* Start-call button (chat.js emits #btn-start-call.btn-success) — the A/V edge */
#btn-start-call.btn-success {
    background: var(--cd-blue); border-color: var(--cd-blue);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cd-blue) 40%, transparent);
}
#btn-start-call.btn-success:hover { filter: brightness(1.06); }

/* End-to-end-encryption banner — sits between the header and the timeline
   for encrypted channels/DMs (toggled by chat.js via .d-none). Blue-tinted
   to match the lock icon + E2EE chip, so all three read as one affordance. */
.chat-e2ee-banner {
    display: flex; align-items: flex-start; gap: 10px;
    flex-shrink: 0; padding: 10px 18px;
    background: color-mix(in srgb, var(--cd-blue) 9%, var(--bg-secondary));
    border-bottom: 1px solid color-mix(in srgb, var(--cd-blue) 22%, transparent);
    color: var(--text-secondary); font-size: 12.5px; line-height: 1.45;
}
.chat-e2ee-banner > i.bi {
    color: var(--cd-blue); font-size: 15px; margin-top: 1px; flex-shrink: 0;
}
.chat-e2ee-banner strong { color: var(--text-primary); font-weight: 600; }
.verify-keys-link {
    border: none; background: none; padding: 0; margin-left: 4px; cursor: pointer;
    color: var(--cd-blue); font: inherit; font-weight: 600; text-decoration: underline;
}
.verify-keys-link:hover { filter: brightness(1.1); }

/* Verify-keys drawer */
.verify-intro { padding: 14px 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.verify-list { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.verify-row {
    border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 12px;
}
.verify-name { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.verify-fp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; letter-spacing: .04em; color: var(--cd-blue); word-break: break-word;
}
.verify-actions { padding: 4px 16px 18px; }
.verify-actions-hint { margin: 10px 2px 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
/* The header E2EE badge is a button (re-entry to the verify drawer). */
.e2ee-badge { cursor: pointer; border: none; }

/* Header action buttons: kill the sticky Bootstrap focus box-shadow that
   lingers after a mouse click (it reads as a thick, inconsistent border on
   whichever button was last pressed). Keep an accessible keyboard-only ring
   via :focus-visible. Applies to the outline buttons, the members facepile,
   and the start-call button. */
.chat-header .btn:focus,
.chat-header .btn:active,
.btn-members:focus {
    box-shadow: none;
    outline: none;
}
.chat-header .btn:focus-visible,
.btn-members:focus-visible {
    outline: 2px solid var(--cd-blue);
    outline-offset: 1px;
    box-shadow: none;
}
/* Preserve the start-call button's intentional blue glow while focused (the
   rule above would otherwise strip it along with the Bootstrap ring). */
#btn-start-call.btn-success:focus,
#btn-start-call.btn-success:active {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--cd-blue) 40%, transparent);
}

.chat-messages {
    flex: 1; min-height: 0; overflow-y: auto; padding: 14px 8px 14px 4px;
    display: flex; flex-direction: column-reverse; gap: 0;
}
.chat-messages.empty-state {
    align-items: center; justify-content: center;
    color: var(--text-muted); font-size: .95rem;
}

/* ---- Message rows (Slack/RocketChat-style author grouping) ------------- */
.msg {
    display: flex; gap: 10px; padding: 4px 12px 4px 8px;
    border-radius: 8px; max-width: 100%; position: relative;
}
.msg:hover { background: var(--hover-bg); }
/* First message of an author run gets top breathing room; a grouped
   continuation hugs the message above it. */
.msg:not(.msg-grouped) { margin-top: 10px; }
.msg-gutter {
    flex: 0 0 40px; width: 40px; display: flex; justify-content: center;
    padding-top: 2px;
}
.msg-avatar {
    width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0;
}
.msg-avatar-initials {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase;
}
/* Grouped rows: timestamp appears in the gutter only on hover. */
.msg-ts-hover {
    font-size: 10.5px; color: var(--text-muted); opacity: 0;
    font-variant-numeric: tabular-nums; padding-top: 4px; user-select: none;
    transition: opacity .08s;
}
.msg:hover .msg-ts-hover { opacity: 1; }
.msg-main { flex: 1; min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.msg-author { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.msg-time { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.author-status { font-size: 12px; }
/* Inline badge emblems next to a message author (display-only). */
.author-badges { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.author-badge-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 5px; font-size: 10px; line-height: 1;
    color: #fff; background: var(--cd-blue);
}
.badge-bot {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    padding: 1px 5px; border-radius: 4px; background: var(--cd-line-2); color: var(--text-muted);
}
.msg-edited { font-size: 11px; color: var(--text-muted); }
.msg .body { font-size: 14.5px; color: var(--text-primary); word-wrap: break-word; line-height: 1.5; }
.msg .body p { margin: 0 0 6px; }
.msg .body p:last-child { margin-bottom: 0; }
.msg .body code {
    background: var(--cd-line-2); padding: 1px 6px; border-radius: 6px;
    font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.msg .body pre { background: var(--cd-line-2); padding: 10px 12px; border-radius: 10px; overflow-x: auto; }
.msg .body a { color: var(--cd-blue); text-decoration: none; }
.msg .body a:hover { text-decoration: underline; }
/* Messages that @-mention the current user keep a warm left accent. */
.msg.has-own-mention { box-shadow: inset 3px 0 0 var(--cd-warn); background: color-mix(in srgb, var(--cd-warn) 6%, transparent); }

/* ---- Hover action toolbar (react / reply / edit / delete) -------------- */
/* One pill anchored top-right. Quick actions (react·reply·star) show on hover;
   the overflow group (pin·edit·delete) stays hidden behind the kebab (⋯) until
   a click adds `.open`. The pill grows inline to the left — no absolute
   sub-positioning, so it can't drift off-screen. */
.msg-actions {
    position: absolute; top: -14px; right: 14px; z-index: 2;
    display: none; align-items: center; gap: 2px; padding: 2px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 8px; box-shadow: 0 2px 10px color-mix(in srgb, var(--cd-navy) 14%, transparent);
}
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg-actions.open { display: flex; }
.msg-action-menu { display: none; align-items: center; gap: 2px; }
.msg-actions.open .msg-action-menu { display: flex; }
/* Subtle divider between the quick actions and the ⋯ trigger. */
.msg-kebab { margin-left: 2px; border-left: 1px solid var(--border-color); border-radius: 0 6px 6px 0; }
.msg-action {
    width: 32px; height: 32px; border: none; background: none; cursor: pointer;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); font-size: 15px; line-height: 1;
}
.msg-action:hover { background: var(--hover-bg); color: var(--cd-blue); }
.msg-action-danger:hover { color: var(--cd-fail); }
/* Active toggle (starred / pinned) — brand-coloured so state reads at a glance. */
.msg-action-on { color: var(--cd-blue); }

/* Pinned-message affordances: a small note above the row + a faint accent. */
.msg-pinned-note {
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--cd-blue); font-weight: 600; margin-bottom: 3px;
}
.msg.msg-pinned { background: color-mix(in srgb, var(--cd-blue) 5%, transparent); }
.msg.msg-pinned:hover { background: color-mix(in srgb, var(--cd-blue) 9%, transparent); }

/* ---- Pinned / saved browse views -------------------------------------- */
.special-view { display: flex; flex-direction: column; padding: 8px 4px; }
.special-view-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 14px 10px; font-family: var(--cd-display); font-weight: 500;
    font-size: 15px; border-bottom: 1px solid var(--border-color); margin-bottom: 6px;
}
.special-view-empty { padding: 24px 14px; color: var(--text-muted); font-size: .95rem; text-align: center; }
.special-view-item { cursor: pointer; border-radius: 8px; }
.special-view-item:hover { background: var(--hover-bg); }
.special-view-ctx {
    padding: 2px 14px 0 58px; font-size: 11.5px; font-weight: 600; color: var(--cd-blue);
}
/* Touch-ONLY devices have no hover at all: keep the toolbar pinned top-right
   but always visible, with ≥44px tap targets (tablet-first rule). Use
   `any-hover: none`, not `hover: none`: the latter checks only the PRIMARY
   pointer, so a device with both touch and a mouse (or a desktop that reports
   touch as primary) would wrongly show every toolbar at once. `any-hover: none`
   matches only when NO input can hover — so anyone with a mouse gets proper
   hover-only behaviour. */
@media (any-hover: none) {
    .msg-actions { display: flex; }
    .msg-kebab { width: 44px; height: 44px; }
    .msg-action { width: 44px; height: 44px; }
}

/* ---- Inline editor (no modal) ------------------------------------------ */
.msg-editor { margin-top: 2px; }
.msg-edit-input {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 40px;
    border: 1px solid var(--cd-blue); border-radius: 10px; padding: 8px 10px;
    font-family: inherit; font-size: 14.5px; color: var(--text-primary);
    background: var(--bg-input); outline: none;
}
.msg-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.msg-edit-hint { font-size: 11px; color: var(--text-muted); }

/* ---- Day divider + unread line ----------------------------------------- */
.day-divider {
    display: flex; align-items: center; gap: 12px; margin: 16px 12px 6px;
    color: var(--text-muted); font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; user-select: none;
}
.day-divider::before, .day-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border-color);
}
.unread-line {
    display: flex; align-items: center; gap: 10px; margin: 8px 12px;
    color: var(--cd-fail); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; user-select: none;
}
.unread-line::before { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .45; }
.unread-line span { flex: 0 0 auto; }

.mention {
    background: color-mix(in srgb, var(--cd-blue) 16%, transparent);
    color: var(--cd-blue); padding: 0 4px; border-radius: 5px; font-weight: 600;
}
.mention.mention-room { background: color-mix(in srgb, var(--cd-warn) 20%, transparent); color: var(--cd-warn); }

.reactions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.reaction-pill, .reaction-add {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
    font-variant-numeric: tabular-nums; transition: border-color .1s;
}
.reaction-pill:hover, .reaction-add:hover { border-color: var(--cd-blue); }
.reaction-pill.mine {
    background: color-mix(in srgb, var(--cd-blue) 12%, transparent);
    border-color: color-mix(in srgb, var(--cd-blue) 40%, transparent); color: var(--cd-blue);
}
.reaction-add { color: var(--text-muted); }

/* Emoji reaction picker — a small floating popup that chat.js appends to
   <body> and positions via viewport coords (position: fixed). Without these
   rules the popup renders as an unstyled block at the bottom of the page and
   the emojis are effectively invisible. */
.emoji-picker {
    position: fixed; z-index: 3000;
    display: flex; gap: 2px; padding: 6px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--cd-radius);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--cd-navy) 22%, transparent);
}
.emoji-btn {
    border: none; background: transparent; cursor: pointer;
    width: 40px; height: 40px; border-radius: 10px;
    font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.emoji-btn:hover { background: var(--hover-bg); }
/* Compose emoji palette: wrap the larger set into a compact grid. */
.compose-emoji-picker { display: grid; grid-template-columns: repeat(5, 40px); }

/* Full-screen slash-effect overlay (/confetti, /rain, …). Pointer-transparent
   so it never blocks interaction; chat.js appends/removes the canvas. */
.fx-canvas {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 4000;
}

/* Action label shown for a slash-effect message with no trailing text
   (e.g. "… liet het regenen") so the row never renders as a blank line. */
.msg-effect-note {
    font-style: italic;
    color: var(--cd-muted);
}

/* ---- Header member facepile ------------------------------------------- */
/* Overlapping avatar cluster in the channel header (Slack-style); the whole
   button opens the member slide-over. */
.btn-members {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-color); border-radius: 999px;
    background: transparent; cursor: pointer; padding: 3px 10px 3px 6px;
    min-height: 34px; color: var(--text-primary);
}
.btn-members:hover { background: var(--hover-bg); }
.facepile { display: inline-flex; align-items: center; }
.facepile .f {
    width: 26px; height: 26px; border-radius: 50%; margin-left: -8px;
    border: 2px solid var(--bg-primary); background: var(--cd-blue);
    color: #fff; font-size: 10.5px; font-weight: 700;
    display: grid; place-items: center; overflow: hidden;
}
.facepile .f:first-child { margin-left: 0; }
.facepile .f img { width: 100%; height: 100%; object-fit: cover; }
.facepile .f.more { background: var(--border-color); color: var(--text-muted); }
.btn-members .mcount { font-size: 13px; font-weight: 600; }

/* ---- Member slide-over pane ------------------------------------------- */
.member-pane {
    position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw;
    z-index: 2600; background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -8px 0 24px rgba(0, 26, 50, .12);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .18s ease;
}
.member-pane.open { transform: translateX(0); }
.member-pane-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border-color);
    font-weight: 600; flex-shrink: 0;
}
.member-pane-header .member-count { color: var(--text-muted); font-weight: 500; margin-left: 6px; }
.member-pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0; }
.member-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 16px;
}
.member-row:hover { background: var(--hover-bg); }
.member-row .m-avatar {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: grid; place-items: center; color: #fff; font-weight: 600;
    background: var(--cd-blue); overflow: hidden;
}
.member-row .m-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-row .m-meta { flex: 1; min-width: 0; }
.member-row .m-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-row .m-sub { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-role {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--border-color); color: var(--text-muted); flex-shrink: 0;
}
.member-role.owner { background: color-mix(in srgb, var(--cd-blue) 14%, transparent); color: var(--cd-blue); }
/* Pending join-request section (member pane, private channels). */
.member-requests { border-top: 1px solid var(--border-color); padding: 8px 0 4px; flex-shrink: 0; }
.member-requests-head { font-weight: 700; font-size: .82rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .03em; padding: 6px 16px 8px; }
.req-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.req-row .m-avatar { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: grid; place-items: center; color: #fff; font-weight: 600;
    background: var(--cd-blue); overflow: hidden; }
.req-row .m-avatar img { width: 100%; height: 100%; object-fit: cover; }
.req-row .m-meta { flex: 1; min-width: 0; }
.req-row .m-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-row .m-sub { font-size: .82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-actions { display: flex; gap: 6px; flex-shrink: 0; }
.req-actions button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-color);
    display: grid; place-items: center; cursor: pointer; background: var(--bg-input); font-size: 15px; }
.req-actions .req-approve { color: var(--cd-ok); }
.req-actions .req-approve:hover { background: color-mix(in srgb, var(--cd-ok) 14%, transparent); }
.req-actions .req-reject { color: var(--cd-fail); }
.req-actions .req-reject:hover { background: color-mix(in srgb, var(--cd-fail) 14%, transparent); }
.req-actions button:disabled { opacity: .5; cursor: default; }

.member-invite { border-top: 1px solid var(--border-color); padding: 14px 16px; flex-shrink: 0; }
.member-invite-label { font-weight: 600; display: block; margin-bottom: 2px; }
.member-invite-hint { font-size: .8rem; color: var(--text-muted); margin-bottom: 8px; }
.member-invite-row { display: flex; gap: 8px; }
.member-invite-row input { flex: 1; min-height: 38px; }
.member-invite-msg { font-size: .82rem; margin-top: 8px; }
.member-invite-msg.err { color: var(--cd-fail); }
.member-invite-msg.ok { color: var(--cd-ok); }
.member-invite-pending { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.member-invite-pending .pend { font-size: .82rem; color: var(--text-muted); }
.member-invite-label.mt-3 { margin-top: 16px; }

/* Add-existing-member search + results */
.member-add-search input { width: 100%; min-height: 38px; }
.member-add-results { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.member-add-result {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: 1px solid var(--border-color); border-radius: 10px;
    background: var(--bg-primary); cursor: pointer; padding: 6px 10px; min-height: 44px;
    color: var(--text-primary);
}
.member-add-result:hover { background: var(--hover-bg); border-color: var(--cd-blue); }
.member-add-result .m-avatar.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.member-add-result .mar-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.member-add-result .mar-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-add-result .mar-sub { font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-add-result .bi-plus-lg, .member-add-result .bi-send { color: var(--cd-blue); }
.member-add-result.invite-new { border-style: dashed; }
.member-add-result .m-avatar.sm.invite { background: var(--border-color); color: var(--cd-blue); }
.member-add-empty { font-size: .82rem; color: var(--text-muted); padding: 6px 2px; }

/* New-conversation drawer: selected-people chips, picked-row state, footer. */
.dm-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dm-chip {
    display: inline-flex; align-items: center; gap: 2px;
    background: color-mix(in srgb, var(--cd-blue) 13%, transparent);
    color: var(--text-primary); border-radius: 999px;
    padding: 4px 6px 4px 12px; font-size: 12.5px; font-weight: 600;
}
.dm-chip-x {
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; display: inline-flex; align-items: center;
    padding: 2px; border-radius: 50%; line-height: 1; font-size: 14px;
}
.dm-chip-x:hover { color: var(--cd-fail); }
.member-add-result.selected { border-color: var(--cd-blue); background: var(--hover-bg); }
.member-add-result.selected .bi-check-circle-fill { color: var(--cd-blue); }
.dm-pane-footer { padding: 12px 16px; border-top: 1px solid var(--border-color); flex-shrink: 0; }

.reply-open, .reply-count {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px; padding: 3px 10px; border-radius: 999px;
    border: none; background: transparent; cursor: pointer;
    font-size: 12.5px; color: var(--cd-blue); font-weight: 600;
}
.reply-open:hover, .reply-count:hover { background: color-mix(in srgb, var(--cd-blue) 10%, transparent); }

/* message subtypes */
.msg.meeting-link, .msg.file-share {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--border-color); background: var(--bg-input);
    border-radius: 12px; padding: 12px 14px; max-width: 420px;
}
.msg.file-share .file-icon, .msg.meeting-link i { font-size: 22px; color: var(--cd-blue); }
.msg .file-meta, .msg .meeting-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg .file-name, .msg .meeting-title { font-weight: 600; font-size: 13.5px; }
.msg .file-sub, .msg .meeting-meta { font-size: 11.5px; color: var(--text-muted); }
/* A started video meeting is a prominent event, not a small link: full-width
   row with a light-blue (theme-aware) background + accent border so it clearly
   reads as "a call is happening here". */
.msg.meeting-link {
    max-width: none; width: 100%;
    background: color-mix(in srgb, var(--cd-blue) 10%, var(--bg-secondary));
    border-color: color-mix(in srgb, var(--cd-blue) 35%, var(--border-color));
    border-left: 4px solid var(--cd-blue);
    padding: 14px 16px;
}
.msg .meeting-title { font-size: 14.5px; }

/* ---- Composer ---------------------------------------------------------- */
.chat-compose {
    display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
    margin: 0 18px 18px; padding: 8px 10px;
    border: 1px solid var(--border-color); border-radius: var(--cd-radius);
    background: var(--bg-input);
}
.chat-compose:focus-within { border-color: var(--cd-blue); }
.chat-compose.d-none { display: none; }
.compose-row { display: flex; align-items: center; gap: 8px; }
/* Formatting toolbar */
.compose-toolbar { display: flex; align-items: center; gap: 2px; }
.ct-btn {
    width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer;
    background: transparent; color: var(--text-muted); display: grid; place-items: center;
    font-size: 15px;
}
.ct-btn:hover { background: var(--hover-bg); color: var(--text-primary); }
.ct-sep { width: 1px; height: 18px; background: var(--border-color); margin: 0 4px; }
/* Encryption caption under the compose box */
.compose-enc {
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--cd-blue); padding: 0 2px;
}
.compose-enc.d-none { display: none; }
.chat-compose #chat-input {
    flex: 1; border: none; background: none; outline: none;
    color: var(--text-primary); font-family: inherit; font-size: 14.5px; padding: 6px 4px;
}
.chat-compose #chat-input::placeholder { color: var(--text-muted); }
.chat-compose .btn-primary { background: var(--cd-blue); border-color: var(--cd-blue); border-radius: 10px; }

.chat-drop-overlay {
    position: absolute; inset: 60px 0 0 0; z-index: 20;
    display: none; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--cd-blue) 10%, var(--bg-secondary));
    border: 2px dashed var(--cd-blue); border-radius: 12px; margin: 12px;
    color: var(--cd-blue); font-weight: 600;
}
.chat-drop-overlay.visible { display: flex; }

/* ---- Thread pane ------------------------------------------------------- */
.thread-pane {
    background: var(--bg-secondary); border-left: 1px solid var(--border-color);
    display: none; flex-direction: column; min-width: 0;
}
.thread-pane.open { display: flex; }
.thread-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px 0 18px; min-height: 60px; border-bottom: 1px solid var(--border-color);
    font-family: var(--cd-display); font-weight: 500; font-size: 16px;
}
.thread-parent { padding: 12px 18px; border-bottom: 1px solid var(--border-color); }
.thread-body { flex: 1; overflow-y: auto; padding: 8px 6px; }
.thread-compose {
    display: flex; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 8px 10px;
    border: 1px solid var(--border-color); border-radius: var(--cd-radius); background: var(--bg-input);
}
.thread-compose #thread-input {
    flex: 1; border: none; background: none; outline: none; color: var(--text-primary);
    font-family: inherit; font-size: 14px; padding: 4px;
}

/* ---- Search results ---------------------------------------------------- */
.search-results { padding: 8px 4px; }
.search-results-empty { color: var(--text-muted); padding: 24px; text-align: center; }
.search-result { padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.search-result:hover { background: var(--hover-bg); }
.search-result-head { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.search-result-head .ch-name { font-weight: 700; color: var(--text-primary); }
.search-hit { background: color-mix(in srgb, var(--cd-warn) 30%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }

/* ---- Mention autocomplete popup ---------------------------------------- */
.mention-popup {
    position: absolute; z-index: 40;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 12px; box-shadow: var(--shadow-color) 0 8px 30px; overflow: hidden;
    min-width: 240px; max-height: 260px; overflow-y: auto;
}
.mention-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; font-size: 13.5px; }
.mention-row:hover, .mention-row.active { background: color-mix(in srgb, var(--cd-blue) 12%, transparent); }
.mention-row .handle { color: var(--text-muted); }

/* ---- Channel discovery panel ------------------------------------------
   Shown in the main pane when a space member has no channel yet (or opens
   "Ontdek kanalen"): lists the space's public channels with a join button.
   Overrides the message-list's reverse/centre layout to a normal document
   flow. */
#chat-body.discover {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    overflow-y: auto; padding: 22px 20px; color: var(--text-primary);
}
.discover-head { margin: 0 0 4px; font-size: 1.15rem; font-weight: 650; }
.discover-sub { margin: 0 0 18px; color: var(--text-muted); font-size: .9rem; }
.discover-grid { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.discover-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 14px;
}
.discover-card .disc-icon { color: var(--cd-blue); font-size: 20px; flex-shrink: 0; }
.discover-card .disc-text { min-width: 0; flex: 1; }
.discover-card .disc-name { font-weight: 600; display: block; }
.discover-card .disc-meta {
    color: var(--text-muted); font-size: .85rem; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.discover-card .disc-join {
    flex-shrink: 0; min-height: 40px; padding: 8px 16px; border: none;
    border-radius: 10px; background: var(--cd-blue); color: #fff;
    font-weight: 600; cursor: pointer;
}
.discover-card .disc-join:hover { filter: brightness(1.08); }
.discover-card .disc-join:disabled { opacity: .6; cursor: default; }
.discover-empty { color: var(--text-muted); font-size: .92rem; }
/* Sidebar "discover more" footer button. */
.discover-link {
    display: flex; align-items: center; gap: 8px; width: calc(100% - 16px);
    margin: 6px 8px; padding: 9px 12px; min-height: 44px;
    background: transparent; border: 1px dashed var(--border-color);
    border-radius: 10px; color: var(--text-muted); cursor: pointer; font-size: 13px;
}
.discover-link:hover { color: var(--text-primary); background: var(--hover-bg); }

/* ---- Mobile back button (hidden on desktop; shown in the mobile pane) --- */
.chat-mobile-back { display: none; color: var(--text-primary); font-size: 20px; }

/* ---- Mobile single-pane navigation -------------------------------------
   Placed last so it wins source order over the base .chat-sidebar rule. An
   earlier @media block set .chat-sidebar{display:none}, but that was shadowed
   by the LATER base .chat-sidebar{display:flex} (media queries don't add
   specificity), which left the message pane overflowing into an implicit grid
   row at the bottom of the screen. Here the channel list is the mobile "home"
   view; selecting a channel slides the message pane over it, and the header
   back button (.chat-mobile-back) returns to the list. */
@media (max-width: 1100px) {
    .chat-shell, .chat-shell.thread-open { grid-template-columns: 64px minmax(0, 1fr); }
    .chat-sidebar, .chat-main { grid-column: 2; grid-row: 1; min-width: 0; }
    .chat-sidebar { display: flex; }
    .chat-main { display: none; }
    .chat-shell.channel-open .chat-sidebar { display: none; }
    .chat-shell.channel-open .chat-main { display: flex; }
    .chat-mobile-back { display: inline-flex; align-items: center; }
}

/* ---- Personal folders (sidebar grouping) ------------------------------ */
.folder-group { margin-top: 2px; }
.folder-head {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px 4px; cursor: pointer; user-select: none;
    color: var(--text-muted); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; border-radius: 8px;
}
.folder-head:hover { color: var(--text-primary); }
.folder-caret { font-size: 10px; flex-shrink: 0; }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.folder-count {
    flex-shrink: 0; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--hover-bg); color: var(--text-muted);
    font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
    text-transform: none; letter-spacing: 0;
}
.folder-edit {
    flex-shrink: 0; opacity: 0; color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; font-size: 12px;
}
.folder-head:hover .folder-edit { opacity: .8; }
.folder-edit:hover { color: var(--cd-blue); opacity: 1; }
/* Channels inside a folder sit slightly indented under the header. */
.folder-group .channel-item { margin-left: 6px; }

/* Per-row kebab: reveal on hover / focus, otherwise out of the way. */
.channel-kebab {
    flex-shrink: 0; opacity: 0; color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 6px; font-size: 13px;
}
.channel-item:hover .channel-kebab,
.channel-item:focus-within .channel-kebab { opacity: .75; }
.channel-kebab:hover { opacity: 1; background: var(--hover-bg); color: var(--cd-blue); }

/* "New folder" affordance under the lists. */
.folder-new {
    display: flex; align-items: center; width: calc(100% - 12px); margin: 8px 6px 4px;
    padding: 7px 10px; border: 1px dashed var(--border-color); border-radius: 10px;
    background: transparent; color: var(--text-muted); font-size: 13px;
    font-family: inherit; cursor: pointer; transition: background .1s, color .1s;
}
.folder-new:hover { background: var(--hover-bg); color: var(--cd-blue); border-color: var(--cd-blue); }

/* Lightweight popup menu (file-into-folder / folder edit). */
.folder-menu {
    position: fixed; z-index: 1080; min-width: 200px; max-width: 280px;
    padding: 6px; border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--bg-primary); box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.folder-menu-head {
    padding: 4px 8px 6px; color: var(--text-muted); font-size: 11px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folder-menu-item {
    display: flex; align-items: center; width: 100%; text-align: left;
    padding: 8px 10px; border: none; border-radius: 8px; background: transparent;
    color: var(--text-primary); font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.folder-menu-item:hover { background: var(--hover-bg); }
.folder-menu-item.danger { color: var(--cd-fail); }

/* --- E2EE failure visibility -------------------------------------------- */
/* Undecryptable / still-decrypting notice inside a message bubble. Muted +
   italic so it reads as a system state, not the sender's words. */
.msg-undecryptable,
.msg-decrypting {
    display: inline-flex; align-items: center; gap: 2px;
    font-style: italic; color: var(--text-muted);
}
.msg-undecryptable { color: var(--cd-warn); }

/* Parked outgoing message (send failed / retrying) — an "own" bubble with a
   clear status line + actions, so the sender always sees that (and why) a
   message hasn't gone out. */
.msg-outbox .body { opacity: .85; }
.msg-outbox.failed { border-left: 3px solid var(--cd-fail); padding-left: 8px; }
.msg-outbox.sending { opacity: .7; }
.msg-outbox-status {
    display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-muted);
}
.msg-outbox-status.failed { color: var(--cd-fail); }
.msg-outbox-actions { display: flex; gap: 6px; margin-top: 6px; }

/* Melding onder het invoerveld als versturen niet lukt.
 *
 * Hoort bij de verstuurknop die hiervoor stil kon falen: geen bericht, geen
 * fout, geen netwerkverzoek. Rood en klein — genoeg om op te vallen, niet
 * genoeg om de compose-balk te laten springen. */
.compose-fout {
    padding: 0.15rem 0.75rem 0.4rem;
    color: var(--bs-danger, #d64545);
    font-size: 0.8125rem;
}

/* --- Aanwezigheid ---------------------------------------------------------
 *
 * Een bolletje op de avatar van een DM-rij. Dezelfde kleuren als in de
 * chatbalk, zodat groen overal hetzelfde betekent. Het bolletje draagt altijd
 * een titel in woorden: kleur alleen is geen informatie voor wie kleuren niet
 * onderscheidt.
 */
.row-avatar { position: relative; }

.presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 2px solid var(--cd-surface, #fff);
    background: var(--cedit-offline, #9a9a9a);
}

.presence-online  { background: var(--cedit-online, #2fa84f); }
.presence-away    { background: var(--cedit-away, #e0a800); }
.presence-dnd     { background: var(--cedit-dnd, #d64545); }
.presence-offline { background: var(--cedit-offline, #9a9a9a); }

/* De gekozen status in het accountmenu. */
.rail-status { display: flex; align-items: center; }
.rail-status .presence-dot { position: static; border: 0; width: 0.55rem; height: 0.55rem; }
.rail-status.actief { font-weight: 600; }

/* --- Leesbewijzen ---------------------------------------------------------
 *
 * Kleine avatars achter het laatste bericht dat iemand gelezen heeft, zoals
 * Element ze toont. In een groep is dat het enige dat de vraag beantwoordt:
 * niet "is het gelezen" maar "door wie".
 *
 * Rechts uitgelijnd en klein; de naam staat in de titel, want twee letters in
 * een cirkel zeggen niets tegen wie de mensen niet kent.
 */
.read-receipts {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin: -2px 12px 6px 0;
}

.read-receipt {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    line-height: 16px;
    text-align: center;
    letter-spacing: -0.02em;
}