/* public/assets/css/chat.css
   KHMER HRMS — Internal Chat (M06)
   Season: S15 — Chat Module
   Reference: Master Reference §12.2 (Chat UI Layout), Master List §4 (Premium UI)

   Day/Night: every color here is one of the existing CSS variables
   from themes.css (--surface, --border, --text, --primary, etc.) —
   nothing hardcoded, so the module re-themes automatically alongside
   the rest of the app. No new variables are introduced.
*/

/* BUGFIX v3 — this guessed-vh-subtraction bug existed on desktop too,
   not just mobile (v1/v2 only fixed the <768px media query below).
   `calc(100vh - 220px)` doesn't correspond to any real measured
   quantity — .top-bar is `position: fixed !important` (app.css) so it
   isn't part of the flex flow at all, and the actual space consumed
   above .chat-shell (top-bar clearance + page-header + spacing) varies
   with font size, whether the subtitle wraps to two lines, etc. On any
   layout where that real total exceeds 220px, .chat-shell renders
   taller than the space actually available, and since it has
   `overflow: hidden`, everything past its own oversized box —
   including the composer, the last item in the thread's column — gets
   clipped away or pushed off-page instead of clipped-and-scrollable,
   which is exactly "no composer visible" on desktop.

   Fix, applied UNCONDITIONALLY (every breakpoint, not just mobile):
   put a real fixed height on .main-wrap (100dvh, overflow:hidden — the
   actual flex column holding top-bar + main-content), let
   .main-content be flex:1/min-height:0 so it fills exactly what's
   left after top-bar's real rendered height (flexbox subtracts it
   automatically, no guessing), and .chat-shell fills what's left
   inside .main-content the same way. Scoped via :has(.chat-shell) so
   no other page's layout is touched. */
.main-wrap:has(.chat-shell) {
    height: 100vh;
    height: 100dvh; /* dvh accounts for mobile browser toolbar show/hide; vh above is the fallback for older engines */
    min-height: 0;
    overflow: hidden;
}
.main-content:has(.chat-shell) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding-bottom: 0;
    overflow: hidden;
}
.main-content:has(.chat-shell) > .page-header {
    flex-shrink: 0;
    margin-bottom: var(--space-2, 12px);
}

.chat-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    /* BUGFIX v4 — root cause of "composer disappears on a chat with
       enough messages to fill the window" (reported: works for a
       GROUP channel with 1 message, breaks on a DIRECT channel with
       a longer history — it was never actually about DIRECT vs
       GROUP, just about which one had enough messages to overflow).

       Without an explicit row track, a CSS Grid's implicit row uses
       `grid-auto-rows: auto`, which sizes to the *max-content* height
       of whichever grid item (.chat-sidebar or .chat-thread) is
       tallest — and grid items get an implicit `min-height: auto`
       (min-content), same trap as flex items, which for .chat-thread
       means "the height of every message stacked up," ignoring that
       .chat-messages below already has `flex:1; overflow-y:auto` to
       scroll internally. So the whole .chat-shell row grows past the
       viewport, and since .chat-shell has `overflow:hidden`, the
       composer — the last flex child in that now-oversized column —
       gets clipped away instead of staying pinned at the bottom.

       Fix: give the grid an explicit, cappable row track
       (`minmax(0, 1fr)`) and pair it with `min-height: 0` on both
       grid items below, so each item is forced to the row's actual
       height and lets ITS OWN internal `overflow-y:auto` child
       (.chat-channel-list / .chat-messages) do the scrolling instead
       of the whole grid growing to fit content. */
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    margin-bottom: var(--space-3, 16px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    overflow: hidden;
    position: relative;
}

/* ── Sidebar / channel list ─────────────────────────────────── */
.chat-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0; /* BUGFIX v4 — see .chat-shell note above */
    border-right: 1px solid var(--border);
    background: var(--surface-alt, var(--surface));
    min-width: 0;
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    border-bottom: 1px solid var(--border);
}

.chat-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--text-muted);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.chat-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.chat-search input {
    border: none;
    background: transparent;
    outline: none;
    color: var(--text);
    font-size: 0.85rem;
    width: 100%;
}

.chat-channel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.chat-empty-list { padding: 24px 12px; text-align: center; font-size: 0.85rem; }

.chat-channel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    margin-bottom: 2px;
    transition: background 0.15s ease, transform 0.1s ease;
    cursor: pointer;
}
.chat-channel-row:hover { background: var(--surface); transform: translateX(1px); }
.chat-channel-row.is-active { background: rgba(37, 99, 235, 0.10); }
body[data-theme="dark"] .chat-channel-row.is-active { background: rgba(59, 130, 246, 0.16); }

.chat-channel-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    overflow: hidden;
}
.chat-channel-icon svg { width: 18px; height: 18px; }
.chat-channel-avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* Live user presence ------------------------------------------------ */
.chat-presence-dot {
    display: inline-block;
    width: 9px; height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 2px solid var(--surface);
    box-sizing: content-box;
    transition: background 0.18s ease, transform 0.18s ease;
}
.chat-presence-dot.is-online {
    background: var(--success, #16a34a);
    transform: scale(1.05);
}
.chat-presence-dot.is-offline {
    background: var(--text-muted);
    opacity: 0.65;
}
.chat-presence-avatar-wrap { position: relative; width: 0; height: 38px; flex: 0 0 0; }
.chat-presence-dot-list { position: absolute; left: -7px; top: 25px; z-index: 2; }
.chat-presence-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    min-height: 16px;
    transition: color .18s ease;
}
.chat-presence-status::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: 0 0 7px;
}
.chat-presence-status.is-online { color: var(--success, #16a34a); font-weight: 600; }
.chat-presence-status.is-online::before { background: var(--success, #16a34a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #16a34a) 12%, transparent); }
.chat-presence-status.is-offline { color: var(--text-muted); }
.chat-presence-status.is-offline::before { background: var(--text-muted); }
.chat-presence-last-seen { font-size: .72rem; color: var(--text-muted); }
.chat-contact-presence { display: block; margin-top: 1px; font-size: .7rem; color: var(--text-muted); }
.chat-contact-presence.is-online { color: var(--success, #16a34a); font-weight: 600; }
.chat-avatar-wrap-sm { position: relative; width: 34px; height: 34px; flex: 0 0 34px; }
.chat-avatar-wrap-sm .chat-avatar-sm { width: 34px; height: 34px; }
.chat-presence-dot-contact { position: absolute; right: -1px; bottom: -1px; }
.chat-channel-icon-announcement { color: var(--warning); }
.chat-channel-icon-department { color: var(--info); }
.chat-channel-icon-branch { color: var(--warning, var(--info)); }
.chat-branch-filter { width: 100%; margin: var(--space-1, 4px) 0 var(--space-2, 8px); padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, var(--card-bg)); color: var(--text); font: inherit; }
.chat-channel-icon-group { color: var(--success); }

.chat-channel-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-channel-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-channel-name-wrap { min-width: 0; display: flex; align-items: center; gap: 6px; }
.chat-channel-preview { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-unread-badge {
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ── Thread ──────────────────────────────────────────────────── */
.chat-thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* BUGFIX v4 — see .chat-shell note above; this is
                      the line that actually stops the composer from
                      being pushed off/clipped on a long conversation. */
}

.chat-empty-state {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    color: var(--text-muted);
}
.chat-empty-state svg { width: 56px; height: 56px; opacity: 0.4; }

.chat-thread-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2);
    border-bottom: 1px solid var(--border);
}
.chat-back-btn { display: none; transform: rotate(90deg); }
.chat-thread-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-thread-title strong { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-sub { font-size: 0.75rem; }

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chat-message {
    display: flex;
    gap: 8px;
    max-width: 72%;
    align-items: flex-start;
    animation: chatFadeIn 0.18s ease;
}
@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-message-theirs { align-self: flex-start; }
.chat-message-mine { align-self: flex-end; flex-direction: row-reverse; }

.chat-avatar-sm {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--surface-alt, var(--surface));
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
}
.chat-avatar-sm svg { width: 15px; height: 15px; }

.chat-message-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat-message-mine .chat-message-body { align-items: flex-end; }

.chat-message-sender { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); padding-left: 4px; }

.chat-message-bubble {
    background: var(--surface-alt, var(--surface));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 9px 13px;
    font-size: 0.87rem;
    line-height: 1.45;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.chat-message-mine .chat-message-bubble {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.chat-message-deleted .chat-message-bubble { font-style: italic; opacity: 0.7; }

.chat-message-reply-ref {
    border-left: 3px solid var(--primary);
    background: rgba(37, 99, 235, 0.06);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    max-width: 100%;
}
.chat-message-reply-sender { font-weight: 700; color: var(--primary); margin-right: 4px; }
.chat-message-reply-text { color: var(--text-muted); }

.chat-message-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.68rem; color: var(--text-muted);
    padding: 0 4px;
}
.chat-message-action {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 0.68rem;
    padding: 0; text-decoration: underline;
    transition: color 0.15s ease;
}
.chat-message-action:hover { color: var(--primary); }
.chat-message-action-danger:hover { color: var(--danger, #DC2626); }
.chat-message-action-primary { color: var(--primary); font-weight: 600; }

/* ── PATCH — Edit message: inline textarea replaces the bubble ──
   Reuses the theme variables already established for the composer
   pill (Day/Night-safe, no hardcoded colors — Rule #9). */
.chat-edit-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface);
    border: 1.5px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: 12px;
    padding: 8px 10px;
}
.chat-edit-textarea {
    resize: none;
    max-height: 160px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0;
}
.chat-edit-textarea:focus { outline: none; }
.chat-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

/* ── PATCH — "(edited)" tag next to the timestamp ────────────────── */
.chat-message-edited-tag {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-style: italic;
}

/* ── Reply preview strip ────────────────────────────────────── */
.chat-reply-preview {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    background: var(--surface-alt, var(--surface));
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
}
.chat-reply-preview-sender { font-weight: 700; color: var(--primary); margin-right: 6px; }
.chat-reply-preview-text { color: var(--text-muted); }

/* ── Composer — Premium pill input (S16 UI pass) ────────────────
   Reference: "Premium Chat Input UI" — a rounded, tinted-border pill
   holding [attach | divider | textarea | camera + emoji], with a
   separate floating gradient circle Send button outside the pill.
   Every color still comes from the existing theme variables (Rule
   #9/day-night), so this re-themes automatically; only the SHAPE and
   motion are new, nothing hardcoded. */
.chat-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2);
    border-top: 1px solid var(--border);
}

.chat-composer-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border: 1.5px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: 999px;
    padding: 6px 8px 6px 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-composer-pill:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.chat-composer-divider {
    width: 1px;
    align-self: stretch;
    margin: 4px 2px;
    background: var(--border);
    flex-shrink: 0;
}

.chat-composer textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    max-height: 120px;
    border: none;
    padding: 8px 4px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.87rem;
    line-height: 1.4;
}
.chat-composer textarea:focus { outline: none; }

.chat-composer-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.chat-send-btn {
    border: none;
    border-radius: 50%;
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent, var(--primary)), var(--primary));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.chat-send-btn svg { width: 18px; height: 18px; margin-left: -1px; }
.chat-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 45%, transparent); }
.chat-send-btn:active { transform: scale(0.92); }
.chat-send-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.chat-readonly-note { padding: var(--space-2); border-top: 1px solid var(--border); font-size: 0.82rem; text-align: center; }

/* ── S16: Attach / Camera / Emoji icon buttons (inside the pill) ── */
.chat-composer-icon-btn {
    flex-shrink: 0;
    border: none;
    background: none;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.chat-composer-icon-btn svg { width: 18px; height: 18px; }
.chat-composer-icon-btn:hover { color: var(--primary); background: var(--surface-alt); }
.chat-composer-icon-btn:active { transform: scale(0.92); }
.chat-attach-btn:disabled { opacity: 0.5; cursor: default; }
.chat-emoji-wrap { position: relative; flex-shrink: 0; }
.chat-emoji-picker {
    position: absolute;
    bottom: 46px; right: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    width: 260px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    z-index: 20;
}
.chat-emoji-option {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.1s ease;
}
.chat-emoji-option:hover { background: var(--surface-alt); transform: scale(1.15); }
.chat-upload-progress { padding: 6px var(--space-2); font-size: 0.78rem; text-align: center; }

/* ── S16: Attachment bubbles ─────────────────────────────────── */
.chat-image-bubble {
    display: block;
    max-width: 260px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    line-height: 0;
}
.chat-image-bubble img { width: 100%; height: auto; display: block; max-height: 320px; object-fit: cover; }

.chat-audio-bubble { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.chat-audio-bubble audio { width: 100%; height: 36px; }
.chat-message-mine .chat-audio-bubble { color: #fff; }

/* Inline video player (chat video messages). Fluid on every screen size:
   never wider than the bubble column, height follows the video's own ratio. */
.chat-video-bubble { padding: 4px !important; max-width: min(360px, 100%); }
.chat-video-bubble video {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    background: #000;
}

.chat-file-bubble {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    min-width: 200px;
}
.chat-message-mine .chat-file-bubble { color: #fff; }
.chat-file-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.chat-message-mine .chat-file-icon { background: rgba(255,255,255,0.2); color: #fff; }
.chat-file-icon svg { width: 16px; height: 16px; }
.chat-file-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-file-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.chat-file-meta { font-size: 0.72rem; opacity: 0.75; }

.chat-emoji-bubble { background: transparent !important; border: none !important; box-shadow: none !important; padding: 2px 4px !important; }
.chat-emoji-bubble .chat-message-text { font-size: 2.1rem; line-height: 1.2; }

/* ── S16: Search Messages modal (reuses .chat-modal-* base) ────── */
.chat-search-results { margin-top: 10px; max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.chat-search-result-row {
    display: block;
    text-decoration: none;
    color: var(--text);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-search-result-row:hover { background: var(--surface-alt); border-color: var(--primary); }
.chat-search-result-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.chat-search-result-channel { font-size: 0.75rem; font-weight: 700; color: var(--primary); }
.chat-search-result-time { font-size: 0.7rem; color: var(--text-muted); }
.chat-search-result-body { font-size: 0.83rem; line-height: 1.4; color: var(--text-muted); }
.chat-search-result-body strong { color: var(--text); }

/* ── Members panel ───────────────────────────────────────────── */
.chat-members-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 260px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0,0,0,0.08);
    display: flex; flex-direction: column;
    z-index: 5;
    animation: chatSlideIn 0.18s ease;
}
@keyframes chatSlideIn { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.chat-members-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2); border-bottom: 1px solid var(--border); }
.chat-members-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-member-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; font-size: 0.85rem; }
.chat-member-row:hover { background: var(--surface-alt, var(--surface)); }

/* ── "New chat" modal (plain JS, no external modal library) ────── */
.chat-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: chatFadeIn 0.15s ease;
}
.chat-modal {
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    width: 420px;
    max-width: 100%;
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.chat-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2); border-bottom: 1px solid var(--border); }
.chat-modal-tabs { display: flex; gap: 4px; padding: 8px var(--space-2) 0; }
.chat-modal-tab {
    flex: 1; padding: 8px; border: none; background: var(--surface-alt, var(--surface));
    color: var(--text-muted); border-radius: 8px 8px 0 0; cursor: pointer; font-size: 0.82rem; font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.chat-modal-tab.is-active { background: var(--primary); color: #fff; }
.chat-modal-body { padding: var(--space-2); overflow-y: auto; flex: 1; }

.chat-contact-list { margin-top: 10px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.chat-contact-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 8px; cursor: pointer;
    transition: background 0.15s ease;
}
.chat-contact-row:hover { background: var(--surface-alt, var(--surface)); }
.chat-contact-name { font-size: 0.85rem; font-weight: 600; }
.chat-contact-dept { font-size: 0.72rem; color: var(--text-muted); }
.chat-contact-list-checkable .chat-contact-row.is-checked { background: rgba(37, 99, 235, 0.10); }
.chat-contact-empty { text-align: center; color: var(--text-muted); font-size: 0.82rem; padding: 20px; }

/* ── Responsive (mobile-first collapse to single pane) ──────────
   Breakpoints match responsive.css's own scale (md = 768px). Below
   that, the sidebar and thread each take the full chat-shell width;
   JS toggles a `.chat-show-thread` class on .chat-shell when a
   channel is opened, and the back button returns to the list. */
@media (max-width: 767px) {
    /* BUGFIX v3 moved the .main-wrap/.main-content flex-fill fix (see
       the base .chat-shell block above) out of this media query and
       made it unconditional, since the same guessed-vh-height bug
       existed on desktop too. Only the genuinely mobile-specific
       overrides remain here: single-pane grid, bottom-nav clearance
       (the only thing actually specific to <768px, since only mobile
       has a fixed .bottom-nav to clear), and the sidebar/thread toggle. */
    .chat-shell {
        grid-template-columns: 1fr;
        margin-bottom: calc(62px + env(safe-area-inset-bottom) + 12px);
    }
    .chat-sidebar { display: flex; }
    .chat-thread { display: none; }
    .chat-shell.chat-show-thread .chat-sidebar { display: none; }
    .chat-shell.chat-show-thread .chat-thread { display: flex; }
    .chat-back-btn { display: inline-flex; }
    .chat-message { max-width: 86%; }
    .chat-members-panel { width: 100%; }

    .chat-composer { padding: 8px; gap: 8px; }
    .chat-composer-pill { padding: 4px 6px 4px 4px; }
    .chat-send-btn { width: 40px; height: 40px; }
}

/* Very narrow phones (Section 6.5 xs, <360px): the camera shortcut
   is a convenience on top of the paperclip attach button (both
   ultimately open the same file picker) — hide it first so the
   textarea keeps enough room to actually type, rather than shrinking
   every icon to the point of being hard to tap. */
@media (max-width: 359px) {
    .chat-camera-btn { display: none; }
}

@media (min-width: 768px) {
    .chat-back-btn { display: none; }
}

/* ── PATCH — "Seen" indicator (delete-lock UI) ───────────────────
   Single/double checkmark, WhatsApp-style: one grey check = sent,
   two + accent color = seen by at least one other member. Sits in
   the same .chat-message-meta row as the timestamp/reply/delete
   actions, only rendered for the sender's own messages. */
.chat-message-seen {
    display: inline-flex; align-items: center;
    color: var(--text-muted);
    line-height: 0;
}
.chat-message-seen svg { width: 13px; height: 13px; margin-left: -6px; }
.chat-message-seen svg:first-child { margin-left: 0; }
.chat-message-seen.is-seen { color: var(--primary); }

/* ── PATCH — Chat Voice Messages ─────────────────────────────────
   Mic button matches every other composer icon button exactly
   (.chat-composer-icon-btn, shared base style above) — only shown
   at all once chat.js confirms MediaRecorder/getUserMedia support.
   Clicking it swaps the whole pill for .chat-recording-bar below
   rather than toggling an in-place "recording" state on the button
   itself, so there is no separate .is-recording style to define. */

.chat-recording-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    background: var(--surface-alt, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 16px);
    flex: 1;
}
.chat-recording-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--danger, #DC2626);
    animation: chatRecordingPulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes chatRecordingPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}
.chat-recording-label { font-size: 0.85rem; color: var(--text); font-weight: 600; }
.chat-recording-timer {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted); font-size: 0.85rem;
    margin-left: auto;
}
.chat-recording-cancel, .chat-recording-stop {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: none; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.chat-recording-cancel svg, .chat-recording-stop svg { width: 17px; height: 17px; }
.chat-recording-cancel { background: var(--surface); color: var(--text-muted); }
.chat-recording-cancel:hover { background: var(--border); }
.chat-recording-stop { background: var(--primary); color: #fff; }
.chat-recording-stop:hover { filter: brightness(1.08); }
.chat-recording-cancel:active, .chat-recording-stop:active { transform: scale(0.92); }

@media (max-width: 480px) {
    .chat-recording-label { display: none; } /* keep timer + actions, drop the "Recording…" label first on very narrow phones */
}

/* ── Typing indicator ("…" bubble) — see chat.js renderTyping() ───── */
.chat-typing .chat-message-bubble.chat-typing-bubble {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    padding: 12px 15px;
}
.chat-typing-label { font-weight: 500; }
.chat-typing-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted); opacity: .4;
    animation: chatTypingBounce 1.2s infinite ease-in-out;
}
.chat-typing-dot:nth-child(2) { animation-delay: .15s; }
.chat-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes chatTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-typing-dot { animation: none; opacity: .7; }
}