/* ============================================================================
 * Multi-user collaboration styles
 *   - avatars (chat attribution, presence stack, share dialog, sidebar)
 *   - share dialog
 *   - "Shared with me" sidebar group
 *   - timeline event chips
 *   - view-only input lock
 * Uses theme tokens (var(--b2-*)) with hard fallbacks so it degrades sanely
 * if the theme overlay ever changes.
 * ========================================================================== */

/* ---------- Avatars ---------- */
.collab-av {
    width: 22px; height: 22px; border-radius: 50%;
    color: #fff; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 22px; user-select: none; letter-spacing: .02em;
    /* Initials are white on EVERY color; the faint shadow carries
       legibility on the light tier (invisible on mid/deep). */
    text-shadow: 0 1px 1px rgba(17, 18, 22, .38);
}
/* Initials keep the SAME optical ratio across sizes (font = 50% of box) */
.collab-av.s { width: 17px; height: 17px; font-size: 8.5px; flex: 0 0 17px; }
.collab-av.more {
    background: var(--b2-sunken, #F3F4F6); color: var(--b2-ink-3, #6B7280);
    font-size: 9px;
}

/* ---------- Header presence stack ---------- */
.presence-stack { display: flex; align-items: center; }
.presence-stack .collab-av {
    margin-left: -6px; border: 2px solid var(--b2-surface, #fff);
    box-sizing: content-box;
}
.presence-stack .collab-av:first-child { margin-left: 0; }

.share-btn.shared-in {
    color: var(--b2-acc-ink, #1E5AA8);
    background: var(--b2-acc-soft, rgba(42, 120, 214, .10));
    border-color: var(--b2-acc-line, rgba(42, 120, 214, .28));
}

/* ---------- Share dialog ---------- */
.share-backdrop {
    position: fixed; inset: 0; z-index: 10050;
    background: rgba(17, 18, 22, .34);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 9vh;
}
.share-dialog {
    width: 460px; max-width: calc(100vw - 32px);
    max-height: 78vh; overflow-y: auto;
    background: var(--b2-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(17, 18, 22, .28);
    padding: 18px 20px 16px;
    font-size: 13px;
    color: var(--b2-ink, #111216);
}
.share-hd { display: flex; align-items: center; justify-content: space-between; }
.share-hd h3 { margin: 0; font-size: 15.5px; font-weight: 650; }
.share-close {
    border: none; background: none; font-size: 20px; line-height: 1;
    color: var(--b2-ink-4, #9CA3AF); cursor: pointer; padding: 2px 6px;
}
.share-close:hover { color: var(--b2-ink, #111216); }
.share-lab {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--b2-ink-4, #9CA3AF);
    margin: 15px 0 6px;
}
.share-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 2px; border-radius: 8px;
}
.share-row .share-nm { flex: 1; min-width: 0; }
.share-row .share-nm b { font-weight: 600; font-size: 13px; display: block; line-height: 1.25; }
.share-row .share-nm small { color: var(--b2-ink-4, #9CA3AF); font-size: 11px; }
.share-role-fixed { font-size: 12px; color: var(--b2-ink-4, #9CA3AF); white-space: nowrap; }
/* Role control: borderless trigger + custom menu (roles with check +
 * description, divider, Remove) — replaces the native <select> + naked ✕. */
.share-rolewrap { position: relative; }
.share-rolebtn {
    border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 500;
    color: var(--b2-ink-2, #4B5563);
    padding: 4px 8px; border-radius: 7px;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.share-rolebtn:hover { background: var(--b2-sunken, #F3F4F6); }
.share-rolebtn .car { font-size: 9px; color: var(--b2-ink-4, #9CA3AF); }
.share-rolemenu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
    background: var(--b2-surface, #fff);
    border: 1px solid var(--b2-line, #E5E7EB); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(17, 18, 22, .14);
    padding: 4px; min-width: 170px; display: none;
}
.share-rolemenu.open { display: block; }
.share-rolemenu button {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 12px; color: var(--b2-ink, #111216);
    padding: 7px 10px; border-radius: 7px; text-align: left;
}
.share-rolemenu button:hover { background: var(--b2-sunken, #F3F4F6); }
.share-rolemenu button small {
    display: block; font-size: 10px; color: var(--b2-ink-4, #9CA3AF); font-weight: 400;
}
.share-rolemenu .ck { color: var(--b2-acc-ink, #1E5AA8); font-weight: 700; visibility: hidden; }
.share-rolemenu button.on .ck { visibility: visible; }
.share-rolemenu-div { height: 1px; background: var(--b2-line, #E5E7EB); margin: 4px 6px; }
.share-rolemenu button.danger { color: var(--b2-err, #DC2626); }
.share-rolemenu button.danger:hover { background: rgba(220, 38, 38, .06); }
.share-rolemenu button.danger .mi-icon { width: 13px; height: 13px; flex: 0 0 13px; margin-right: 6px; opacity: .8; }
.share-rolemenu button.danger { justify-content: flex-start; }
.share-add-list {
    border: 1px solid var(--b2-line, #E5E7EB); border-radius: 10px;
    max-height: 180px; overflow-y: auto; padding: 2px 6px;
}
.share-row.add { cursor: pointer; }
.share-row.add:hover { background: var(--b2-sunken, #F3F4F6); }
.share-addbtn {
    font-size: 11.5px; font-weight: 600; color: var(--b2-acc-ink, #1E5AA8);
    white-space: nowrap;
}
.share-empty { font-size: 12px; color: var(--b2-ink-4, #9CA3AF); padding: 4px 2px; }
.share-note {
    display: block; font-size: 11.5px; color: var(--b2-ink-3, #6B7280);
    background: var(--b2-sunken, #F3F4F6); border-radius: 8px;
    padding: 8px 11px; margin-top: 14px; line-height: 1.45;
}
.share-ft {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 15px;
}
.share-done {
    background: var(--b2-acc, #2A78D6); color: #fff; border: none;
    font-weight: 600; font-size: 12.5px; border-radius: 8px;
    padding: 7px 18px; cursor: pointer;
}
.share-done:hover { background: var(--b2-acc-hover, #1F61B8); }
.share-leave {
    background: none; border: 1px solid rgba(220, 38, 38, .35);
    color: var(--b2-err, #DC2626); font-size: 12px; font-weight: 600;
    border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.share-leave:hover { background: rgba(220, 38, 38, .06); }
.share-loading { padding: 30px 0; text-align: center; color: var(--b2-ink-4, #9CA3AF); }
/* Secondary footer action (first-share confirm "Back") */
.share-quiet {
    background: none; border: 1px solid var(--b2-line, #E5E7EB);
    color: var(--b2-ink-2, #4B5563); font-size: 12px; font-weight: 600;
    border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.share-quiet:hover { background: var(--b2-sunken, #F3F4F6); }

/* ---------- Sidebar: shared conversations ----------
 * Shared rows (either direction) get a quiet users icon before the title —
 * the same symbol as the topbar Members button. Who-shared-what stays in the
 * hover tooltip (second line via data-share-info); the unread dot marks
 * activity. */
.conv-shared-mark {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    margin-right: 6px; color: var(--b2-ink-4, #9CA3AF);
}
.conv-shared-mark .mi-icon { width: 13px; height: 13px; flex-basis: 13px; margin-right: 0; }
.collab-unread-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--b2-acc, #2A78D6); flex: 0 0 7px;
}
.conversation-hover-tooltip { white-space: pre-line; }

/* ---------- Chat: sender attribution (shared conversations) ----------
 * Agent stays left; ALL human messages stay right-aligned (as today).
 * Users are distinguished by the sender row: avatar + name in a
 * per-username color. Rendered for every user message in a shared
 * conversation — own included — so the thread reads uniformly. */
.message.message-user .msg-sender {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; font-size: 10.5px; color: var(--b2-ink-3, #6B7280);
    margin-bottom: 3px;
}
.message.message-user .msg-sender b { font-weight: 600; }
/* Continuation of a same-sender run (attribution row suppressed):
 * pull the bubble up toward its predecessor. */
.message.message-user.msg-cont { margin-top: -12px !important; }

/* Per-user bubble color (shared conversations only): a whisper-light tint
 * of the sender's color as the background — same visual weight as the
 * theme's solo cream bubble, no border. --collab-bubble is set inline per
 * message by chat-ui; !important out-cascades the theme (sheet loads last). */
.message.message-user.with-sender .message-content {
    background: var(--collab-bubble, var(--b2-user-bg, #FBF5E9)) !important;
}

/* ---------- Timeline event dividers ----------
 * Quiet, Slack-style: hairline rules on both sides of small muted text —
 * reads as a timeline marker, not a message. */
.collab-event-chip {
    display: flex; align-items: center; gap: 12px;
    width: 100%; margin: 14px 0;
    font-size: 10.5px; color: var(--b2-ink-4, #9CA3AF);
    text-align: center; white-space: nowrap;
    overflow: hidden;
}
.collab-event-chip::before,
.collab-event-chip::after {
    content: ''; flex: 1; height: 1px; min-width: 24px;
    background: var(--b2-line, #E5E7EB);
}

/* ---------- Menu / button icons ---------- */
.mi-icon {
    width: 14px; height: 14px; flex: 0 0 14px;
    vertical-align: -2px; margin-right: 8px;
}
.conversation-menu-item {
    display: flex !important; align-items: center;
}
.conversation-menu-item .mi-icon { margin-right: 8px; opacity: .75; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; }
.share-btn .mi-icon { margin-right: 0; width: 13px; height: 13px; flex-basis: 13px; }
.share-leave { display: inline-flex; align-items: center; }
.share-leave .mi-icon { margin-right: 6px; width: 13px; height: 13px; flex-basis: 13px; }

/* ---------- Personal color picker ---------- */
.collab-colorpicker {
    position: fixed; z-index: 10080;
    background: var(--b2-surface, #fff);
    border: 1px solid var(--b2-line, #E5E7EB); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 18, 22, .18);
    padding: 10px 12px;
}
.collab-colorpicker .cp-title {
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--b2-ink-4, #9CA3AF);
    margin-bottom: 8px;
}
.collab-colorpicker .cp-grid {
    display: grid; grid-template-columns: repeat(6, 22px); gap: 6px;
}
.collab-colorpicker .cp-sw {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer; padding: 0;
    transition: transform .1s ease;
}
.collab-colorpicker .cp-sw:hover { transform: scale(1.15); }
.collab-colorpicker .cp-sw.on { border-color: var(--b2-ink, #111216); }

/* ---------- Typing indicator ---------- */
.collab-typing {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--b2-ink-4, #9CA3AF);
    padding: 2px 18px 6px;
}

/* ---------- View-only input lock ---------- */
#chatInput.collab-locked {
    background: var(--b2-sunken, #F3F4F6);
    color: var(--b2-ink-4, #9CA3AF);
    cursor: not-allowed;
}

/* ── Share dialog: search-first invite + collapsed member stack ─────────
   The tenant directory never renders wholesale: candidates appear only as
   typeahead matches. Members collapse to an avatar stack + count; the
   expanded list is height-capped with inner scroll. */
.share-search { position: relative; margin: 10px 0 4px; }
.share-search input {
    width: 100%; border: 1px solid var(--b2-line2, #D1D5DB); border-radius: 9px;
    padding: 8px 11px; font-size: 13px; font-family: inherit;
    outline: none; background: var(--b2-raised, #F8FAFC); color: inherit;
}
.share-search input:focus { border-color: var(--b2-acc, #2A78D6); background: var(--b2-surface, #fff); }
.share-drop {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    background: var(--b2-surface, #fff);
    border: 1px solid var(--b2-line2, #D1D5DB); border-radius: 10px;
    box-shadow: 0 10px 26px rgba(17, 18, 22, .13);
    max-height: 224px; overflow-y: auto; padding: 4px; display: none;
}
.share-drop.open { display: block; }
.share-drop .share-row { padding: 6px 8px; border-radius: 7px; }
.share-drop-empty { font-size: 12px; color: var(--b2-ink-4, #9CA3AF); padding: 10px 12px; }
.share-sumrow {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 2px; border-radius: 8px; cursor: pointer;
}
.share-sumrow:hover { background: var(--b2-sunken, #F3F4F6); }
.share-stack { display: flex; }
.share-stack .collab-av { border: 2px solid var(--b2-surface, #fff); margin-left: -7px; }
.share-stack .collab-av:first-child { margin-left: 0; }
.share-stack .collab-av.more {
    background: var(--b2-sunken, #F3F4F6); color: var(--b2-ink-3, #6B7280); font-size: 9px;
}
.share-sumlab { flex: 1; font-size: 12.5px; color: var(--b2-ink-2, #4B5563); }
.share-chev { font-size: 10px; color: var(--b2-ink-4, #9CA3AF); transition: transform .15s; }
.share-chev.open { transform: rotate(180deg); }
.share-members.collapsed { display: none; }
.share-memcap { max-height: 200px; overflow-y: auto; overscroll-behavior: contain; }

/* Staged invite draft: picked people wait in a quiet boxed list under the
   search field (default Collaborator, role editable via the standard menu,
   ✕ to un-stage). Nothing is sent until Invite — membership is irreversible,
   so the draft is the one place a mis-pick can still be undone. */
.share-pendbox {
    border: 1px solid var(--b2-line2, #D1D5DB); border-radius: 10px;
    background: var(--b2-raised, #F8FAFC);
    padding: 2px 6px; margin: 8px 0 2px;
}
.share-pendbox .share-row { padding: 5px 4px; }
.share-unstage {
    border: none; background: none; flex: 0 0 auto;
    color: var(--b2-ink-4, #9CA3AF); font-size: 15px; line-height: 1;
    cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.share-unstage:hover { color: var(--b2-err, #DC2626); background: rgba(220, 38, 38, .06); }