/* styles/widgets/chat.css
 *
 * R2.6 chat widget. Mounted inside the Friends modal under the
 * Conversations tab (see js/friends-button.js). Split-pane on
 * desktop (conversation list + thread side-by-side); single-pane
 * stack on mobile (≤600px) where selecting a conversation
 * replaces the list view.
 */

/* ── Friends-modal tab strip ────────────────────────────────── */
.fr-tabs {
    display: flex;
    gap: 4px;
    margin: 4px 0 12px 0;
    padding: 3px;
    background: var(--surface2);
    border-radius: 8px;
}
.fr-tab {
    flex: 1;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: background 0.12s, color 0.12s;
    position: relative;
}
.fr-tab.active {
    background: var(--surface);
    color: var(--text);
}
.fr-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0 5px;
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* The friends modal grows wider when the Chat tab is active so
   the split-pane has room.
   IMPORTANT: this needs to be a DEFINITE height (not just a
   max-height ceiling) so the inner panes have a constrained
   height for their overflow-y:auto to engage. With max-height
   alone the modal sizes to content, the chat-panel grows to
   match, and the panes never reach their scroll threshold.
   Using `height: 88vh` forces the modal to fill 88% of the
   viewport regardless of content; the inner flex chain then
   gives each pane a real height to scroll within.
   The base .modal class also sets overflow-y: auto which we
   override to hidden so the inner .chat-list and
   .chat-thread-body handle their own scrolling. The Friends tab
   gets its own overflow-y: auto so a long friends list still
   scrolls naturally. */
.friends-modal {
    /* Standardized with the other header-button popups
       (admin panel, account editor, feature requests, app
       updates): 900px / 95vw / 88vh. The friends-modal also
       keeps an explicit `height: 88vh` (not just max-height)
       because the chat tab's inner panes need a definite
       height to scroll within - see the comment on
       [data-fr-chat-host] for the full chain. The mobile
       breakpoint below takes over at <= 600px and goes
       full-screen. */
    width: 900px;
    max-width: 95vw;
    height: 88vh;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fr-tab-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.fr-tab-body[data-fr-tab-body="friends"] {
    overflow-y: auto;
    overscroll-behavior: contain;
}
.fr-tab-body[data-fr-tab-body="chat"] {
    overflow: hidden;
}

/* CRITICAL: the chat host wrapper element between the
   fr-tab-body[chat] flex column and the chat-panel inside it.
   Without these rules it's a default block element, which
   means flex height does NOT propagate through it - chat-panel
   ends up content-sized and the grid + inner scroll containers
   never get a constrained height to scroll within. Making the
   host a flex column itself with flex: 1 1 auto + min-height: 0
   restores the chain. This was the actual reason the conv list
   and thread panes were "linked" - they shared a single
   unconstrained block that grew to fit content. */
[data-fr-chat-host] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* 💬 chat button on each friend row. */
.fr-btn-chat {
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1;
}

/* ── Chat panel root ────────────────────────────────────────── */
/* min-height: 0 is critical here. Default flex-item min-height
   is `auto` which is content-sized; that would prevent the
   panel from shrinking below its content size and break the
   per-pane scroll (the panes would expand to fit the content
   instead of capping at the parent height). The previous
   min-height:420px was a misguided floor - the parent
   .friends-modal already enforces height:88vh, so the panel
   should fill that, not have its own min. */
.chat-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Disclaimer banner: full-width yellow-tinted callout shown once
   on first chat use. Dismissed via markChatDisclaimerSeen which
   persists user_state.chat_disclaimer_seen. */
.chat-disclaimer {
    background: color-mix(in oklab, var(--accent) 12%, var(--surface));
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.5;
}
.chat-disclaimer-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}
.chat-disclaimer-list {
    margin: 0 0 10px 0;
    padding-left: 18px;
    color: var(--muted);
}
.chat-disclaimer-list li { margin-bottom: 4px; }
.chat-disclaimer-list b { color: var(--text); font-weight: 600; }

/* ── Split layout ───────────────────────────────────────────── */
/* CSS Grid with explicit grid-template-rows: 1fr is what we
   actually need here. The previous flex-row version let each
   pane grow to fit its content, which made the thread + conv
   list scroll together as one big block (Luke's "they're
   linked" complaint). grid-template-rows: 1fr forces the row
   to exactly the parent's available height; the grid items
   default-stretch to fill it; their internal overflow-y: auto
   then has a real scroll boundary and the two panes scroll
   independently. */
.chat-split {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 1fr;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}

.chat-list-pane {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.chat-list-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.chat-list-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.chat-new-btn {
    padding: 4px 10px;
    font-size: 12px;
}
.chat-list {
    flex: 1 1 auto;
    overflow-y: auto;
    /* overscroll-behavior:contain keeps wheel / touch scrolls
       confined to this pane - hitting the top or bottom doesn't
       propagate to the outer modal or the page underneath. */
    overscroll-behavior: contain;
    padding: 4px;
    min-height: 0;
}
.chat-list-empty {
    color: var(--muted);
    font-size: 12px;
    padding: 20px 12px;
    text-align: center;
    line-height: 1.5;
}

.chat-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    margin-bottom: 2px;
}
.chat-list-row:hover { background: var(--surface); }
.chat-list-row-active {
    background: color-mix(in oklab, var(--accent) 18%, var(--surface));
}
.chat-list-row-active:hover {
    background: color-mix(in oklab, var(--accent) 22%, var(--surface));
}
.chat-list-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-list-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
.chat-list-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.chat-list-time {
    font-size: 10px;
    color: var(--muted);
    flex: 0 0 auto;
    white-space: nowrap;
}
.chat-list-snippet {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.chat-list-snippet-empty { font-style: italic; opacity: 0.7; }
.chat-list-unread {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Avatar (used in list rows and message headers) ─────────── */
.chat-avatar {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

/* ── Thread pane ────────────────────────────────────────────── */
.chat-thread-pane {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.chat-thread-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.chat-back-btn {
    /* Hidden on desktop; shown on mobile when thread-active. */
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    width: 28px; height: 28px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    flex: 0 0 auto;
}
.chat-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.chat-thread-titlebox {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.chat-thread-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-thread-sub {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.2;
}

.chat-thread-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-thread-empty {
    color: var(--muted);
    font-size: 12px;
    padding: 30px 12px;
    text-align: center;
    line-height: 1.5;
    margin: auto;
}

/* ── Message rows ───────────────────────────────────────────── */
.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 2px;
}
.chat-msg-header .chat-avatar {
    width: 24px; height: 24px;
    font-size: 11px;
    border-radius: 6px;
}
.chat-msg-sender {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.chat-msg-time {
    font-size: 10px;
    color: var(--muted);
}
.chat-msg-followup {
    /* Reduce top spacing on consecutive messages from same sender. */
    margin-top: 0;
}

.chat-msg-bubble {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    max-width: 88%;
    margin-left: 32px;  /* line up with sender column under avatar */
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-msg-followup .chat-msg-bubble {
    /* Compact follow-up bubbles: tighter padding so a burst feels
       like one thought. */
    padding: 4px 10px;
}
.chat-msg-mine .chat-msg-bubble {
    margin-left: auto;
    margin-right: 0;
    background: color-mix(in oklab, var(--accent) 22%, var(--surface));
    border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.chat-msg-mine .chat-msg-header {
    flex-direction: row-reverse;
}
.chat-msg-body {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    white-space: pre-wrap;
}

/* Undecryptable placeholder: applied by chat-widget.js when
   the decryptor returned a placeholder record (message exists
   in the DB but our device's key pair can't open it - sender's
   old key, account reset, etc.). Reads as a "system" row that's
   clearly different from a real message. */
.chat-msg-undecryptable .chat-msg-bubble {
    background: transparent;
    border: 1px dashed var(--border);
    opacity: 0.7;
}
.chat-msg-undecryptable .chat-msg-body {
    color: var(--muted);
    font-style: italic;
    font-size: 12px;
}
.chat-link {
    color: var(--accent);
    text-decoration: underline;
}
.chat-link:hover { filter: brightness(1.2); }

.chat-msg-del {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px; height: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
.chat-msg-mine .chat-msg-bubble:hover .chat-msg-del { opacity: 1; }
.chat-msg-del:hover {
    color: var(--red);
    border-color: var(--red);
}

/* ── Compose ────────────────────────────────────────────────── */
.chat-compose {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.chat-compose-input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    padding: 8px 10px;
    resize: vertical;
    min-height: 38px;
    max-height: 160px;
    line-height: 1.4;
    box-sizing: border-box;
}
.chat-compose-input:focus {
    outline: none;
    border-color: var(--accent);
}
.chat-compose-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.chat-compose-count {
    font-size: 10px;
    color: var(--muted);
}
.chat-compose-count[data-warn="1"] { color: var(--red); font-weight: 600; }
.chat-send-btn {
    padding: 5px 14px;
    font-size: 12px;
}

/* ── New-conversation modal ─────────────────────────────────── */
.chat-new-modal {
    width: min(420px, 92vw);
}
.chat-new-kind {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.chat-new-kind-chip {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    background: var(--surface);
    user-select: none;
}
.chat-new-kind-chip:hover { border-color: var(--accent); }
.chat-new-kind-chip:has(input:checked) {
    background: color-mix(in oklab, var(--accent) 18%, var(--surface));
    border-color: var(--accent);
}
.chat-new-kind-chip input { margin: 0; }
.chat-new-members-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px;
    background: var(--surface);
}
.chat-new-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.chat-new-member-row:hover { background: var(--surface2); }
.chat-new-members-empty {
    color: var(--muted);
    font-size: 12px;
    padding: 8px;
    text-align: center;
}

/* ── Conversation row hover actions + pin treatment ────────
   20260631: each row in the conv list now has a small action
   strip on the right that appears on hover. Two buttons:
     * pin/unpin
     * hide (DM) or leave (group)
   Pinned rows get a 📌 marker before the title plus a subtle
   left-border accent so they read as "stuck to the top". */
.chat-list-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
}
.chat-list-row:hover .chat-list-actions { opacity: 1; }
.chat-list-action-btn {
    width: 24px; height: 24px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.chat-list-action-btn:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}
.chat-list-row-pinned {
    border-left: 3px solid var(--accent);
    padding-left: 5px;
}
.chat-list-pin-dot {
    font-size: 10px;
    margin-right: 4px;
    opacity: 0.7;
}

/* ── Thread header members button ────────────────────────── */
.chat-thread-members-btn {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.chat-thread-members-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Members management modal ─────────────────────────────── */
.chat-members-modal {
    width: min(420px, 92vw);
}
.chat-members-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
    background: var(--surface);
}
.chat-members-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
}
.chat-members-row:hover { background: var(--surface2); }
.chat-members-name {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-members-role {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    background: var(--surface2);
    padding: 1px 6px;
    border-radius: 999px;
}
.chat-members-remove {
    width: 22px; height: 22px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    flex: 0 0 auto;
}
.chat-members-remove:hover {
    color: var(--red);
    border-color: var(--red);
}
.chat-members-empty {
    padding: 12px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
.chat-members-add-strip {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.chat-members-add-strip select { flex: 1 1 auto; min-width: 0; }
.chat-members-add-strip .ae-btn-primary {
    flex: 0 0 auto;
    padding: 4px 12px;
}

/* ── Thread polish: date separators + load-older + start ─── */
.chat-thread-daysep {
    display: flex;
    align-items: center;
    margin: 14px 0 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.chat-thread-daysep::before,
.chat-thread-daysep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.chat-thread-daysep span { padding: 0 12px; }
.chat-thread-load-older {
    align-self: center;
    margin: 4px auto 8px;
    padding: 4px 14px;
    font-size: 11px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
}
.chat-thread-load-older:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.chat-thread-load-older:disabled {
    opacity: 0.6;
    cursor: progress;
}
.chat-thread-start {
    align-self: center;
    margin: 8px auto;
    padding: 3px 10px;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* ── Send-error retry row ────────────────────────────────── */
.chat-compose-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--red) 12%, transparent);
    border: 1px solid var(--red);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
}
.chat-compose-error > span {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.chat-compose-error-retry {
    flex: 0 0 auto;
    padding: 3px 10px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.chat-compose-error-retry:hover { filter: brightness(1.1); }
.chat-compose-error-dismiss {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.chat-compose-error-dismiss:hover { color: var(--red); border-color: var(--red); }

/* ── Mobile: full-screen takeover + single-pane navigation ───
   At ≤600px we already promote the friends-modal to a wider
   width. For chat specifically, when a conversation is selected
   we hide the list pane and let the thread pane fill the
   modal. .chat-split-thread-active is toggled on the .chat-split
   container by syncMobileMode() in chat-widget.js. */
@media (max-width: 600px) {
    .friends-modal {
        width: 100vw;
        max-width: 100vw;
        /* 20260642 (Ava): on Android Chrome 100vh includes the
           area behind the system navbar, which pushed the
           compose row's Send button off-screen. 100dvh tracks
           the actual visible viewport (and shrinks when the
           on-screen keyboard appears), so the Send button is
           always reachable. 100vh stays as the fallback for
           the few browsers that don't grok dvh yet. */
        max-height: 100vh;
        height: 100vh;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
    /* Same Ava bug, second mitigation: pad the compose row's
       bottom with iOS safe-area inset so the Send button
       clears the home-indicator stripe. No-op on Android. */
    .chat-compose {
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
    }
    /* Mobile single-pane: stack as one column, swap visibility
       based on whether a conversation is active. */
    .chat-split {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .chat-list-pane { display: flex; }
    .chat-thread-pane { display: none; }
    .chat-split-thread-active .chat-list-pane { display: none; }
    .chat-split-thread-active .chat-thread-pane { display: flex; }
    /* Back arrow only shows on mobile. */
    .chat-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Mobile delete is always visible (no hover state). */
    .chat-msg-mine .chat-msg-del {
        opacity: 1;
    }
}