/* ==============================================================
   conversation-redesign.css

   Styling foundation for the redesigned conversation widget.

   Every rule is scoped under .conv-redesign (a class applied to the
   CSConversationWidget root) so it cannot regress other surfaces that
   reuse the generic .selector-item / .conversation-* class names.

   Visual spec — the approved prototype:
     Web-Portal/src/controls/communicator/CallCommunicator/
       _prototype/conversation-redesign.html

   Issue 01 establishes the design tokens, the SMS message bubbles,
   and the day dividers. Later issues (02+) add their own component
   classes to this same file.
   ============================================================== */

/* ---- Design tokens ------------------------------------------ */
.conv-redesign
{
    /* surfaces */
    --conv-bg:           #f6f7f9;
    --conv-card-bg:      #ffffff;
    --conv-border:       #e5e7eb;
    --conv-text:         #111827;
    --conv-text-muted:   #6b7280;
    --conv-text-faint:   #9ca3af;

    /* per-type accent colours (rails) — consumed by issues 02+ */
    --conv-accent-call:       #3b82f6;
    --conv-accent-missed:     #ef4444;
    --conv-accent-voicemail:  #8b5cf6;
    --conv-accent-fax:        #f59e0b;
    --conv-accent-scheduled:  #64748b;
    --conv-accent-note:       #ca8a04;
    --conv-accent-ai:         #6366f1;

    /* SMS bubbles */
    --conv-bubble-out-bg:      #f1f8f3;
    --conv-bubble-out-border:  #d4e6da;
    --conv-bubble-in-bg:       #ffffff;
    --conv-bubble-in-border:   #e5e7eb;

    /* shape */
    --conv-radius-card:    12px;
    --conv-radius-bubble:  16px;
    --conv-radius-sm:      6px;

    /* elevation */
    --conv-shadow-sm:  0 1px 2px rgba(16, 24, 40, 0.05);
    --conv-shadow:     0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
}

/* ---- Base card / rail primitives (foundation for issues 02+) -- */
.conv-redesign .conv-card
{
    background: var(--conv-card-bg);
    border: 1px solid var(--conv-border);
    border-radius: var(--conv-radius-card);
    box-shadow: var(--conv-shadow);
}
.conv-redesign .conv-rail-call       { border-left: 4px solid var(--conv-accent-call); }
.conv-redesign .conv-rail-missed     { border-left: 4px solid var(--conv-accent-missed); }
.conv-redesign .conv-rail-voicemail  { border-left: 4px solid var(--conv-accent-voicemail); }
.conv-redesign .conv-rail-fax        { border-left: 4px solid var(--conv-accent-fax); }
.conv-redesign .conv-rail-scheduled  { border-left: 4px solid var(--conv-accent-scheduled); }
.conv-redesign .conv-rail-note       { border-left: 4px solid var(--conv-accent-note); }
.conv-redesign .conv-rail-ai         { border-left: 4px solid var(--conv-accent-ai); }

/* ---- Day divider -------------------------------------------- */
/* centred, uppercase label flanked by hairlines */
.conv-redesign .conv-day-divider
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 8px 6px;
}
.conv-redesign .conv-day-divider::before,
.conv-redesign .conv-day-divider::after
{
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--conv-border);
}
.conv-redesign .conv-day-divider > *
{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--conv-text-muted);
}

/* ---- SMS message bubbles ------------------------------------ */
/* bubble-style events (SMS, AI chat) carry no border on the event root */
.conv-redesign .conv-sms,
.conv-redesign .conv-ai
{
    border: 0;
}
/* stack the event row vertically: [sender label] / [bubble], left-aligned.
   The !important resets beat the legacy .conversation-selector-item-sms
   (and .sent-item ...-sms, which itself uses !important) pill styling. */
.conv-redesign .conv-sms .conversation-selector-item
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 0;
    margin: 2px 0;
    padding: 0;
}
/* outgoing messages align to the right */
.conv-redesign .conv-sms.sent-item .conversation-selector-item
{
    align-items: flex-end;
}

/* the legacy comment icon, flat metadata row, and duplicate time widget are
   replaced by the bubble + .conv-sms-meta subline.
   NOTE: hide the legacy row by its own marker class (conv-sms-legacy-meta) —
   NOT the generic f_conversation-event-sub-info-container, which the
   scheduled-SMS Cancel / Send-Now controls also use. */
.conv-redesign .conv-sms .conversation-sms-icon,
.conv-redesign .conv-sms .conv-sms-legacy-meta,
.conv-redesign .conv-sms .conversation-date-widget
{
    display: none;
}

/* keep the info container from stretching so the bubble holds its width */
/* fill the column so the bubble's content can never be squeezed to a
   sliver — the bubble's own fit-content + max-width control its size */
.conv-redesign .conv-sms .f_conversation-event-info-container
{
    flex: 1 1 auto;
    min-width: 100%;
    padding: 0;
}
.conv-redesign .conv-sms.sent-item .f_conversation-event-info-container
{
    text-align: right;
}

/* the bubble itself — the message body renders into .conversation-sms-text */
.conv-redesign .conv-sms .conversation-sms-text
{
    display: inline-block;
    width: fit-content;
    max-width: min(92%, 720px);
    padding: 8px 14px;
    border-radius: var(--conv-radius-bubble);
    border-bottom-left-radius: var(--conv-radius-sm);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    background: var(--conv-bubble-in-bg);
    border: 1px solid var(--conv-bubble-in-border);
    box-shadow: var(--conv-shadow-sm);
    color: var(--conv-text);
    overflow-wrap: anywhere;
}
.conv-redesign .conv-sms.sent-item .conversation-sms-text
{
    background: var(--conv-bubble-out-bg);
    border-color: var(--conv-bubble-out-border);
    border-bottom-left-radius: var(--conv-radius-bubble);
    border-bottom-right-radius: var(--conv-radius-sm);
}

/* sender label above an incoming bubble in a group conversation
   (re-uses the otherwise-empty .conversation-title element) */
.conv-redesign .conv-sms .conv-sms-sender
{
    padding: 0 4px 2px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--conv-text-muted);
    white-space: normal;
}

/* time + line (DID) subline beneath the bubble */
.conv-redesign .conv-sms-meta
{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 2px 4px;
    font-size: 10px;
    color: var(--conv-text-faint);
}
.conv-redesign .conv-sms.sent-item .conv-sms-meta
{
    justify-content: flex-end;
}
.conv-redesign .conv-sms-meta .conv-meta-did
{
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
/* change-inbox (slice 01): inbox pill — the move-to-inbox trigger, inline on the meta row of
   SMS/fax/voicemail items. Small, neutral; reads as "filed under X". */
.conv-redesign .conv-inbox-pill
{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 10.5px;
    line-height: 1.5;
    color: #475569;
    transition: background .15s ease, border-color .15s ease;
}
.conv-redesign .conv-inbox-pill:hover
{
    background: #f8fafc;
    border-color: #cbd5e1;
}
.conv-redesign .conv-inbox-pill-icon
{
    font-size: 9px;
    color: #94a3b8;
}
.conv-redesign .conv-inbox-pill-chevron
{
    font-size: 8px;
    opacity: 0.5;
}
/* change-inbox (slice 01): move-to-inbox modal rows. Not scoped under .conv-redesign — the
   Modal mounts on aApp->root(), outside the conversation widget. */
.conv-moveinbox-list
{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.conv-moveinbox-row
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
}
.conv-moveinbox-row:hover
{
    background: #f8fafc;
}
.conv-moveinbox-row.selected
{
    background: #eef2ff;
    box-shadow: inset 3px 0 0 #4f46e5;
}
.conv-moveinbox-row-icon
{
    color: #94a3b8;
    font-size: 13px;
}
.conv-moveinbox-row.selected .conv-moveinbox-row-icon
{
    color: #4f46e5;
}
.conv-moveinbox-row-name
{
    flex: 1;
    font-size: 14px;
    color: #1f2937;
}
.conv-moveinbox-row.selected .conv-moveinbox-row-name
{
    color: #312e81;
    font-weight: 600;
}
.conv-moveinbox-row-current
{
    font-size: 11px;
    color: #94a3b8;
}
/* radio indicator — empty circle, fills indigo when the row is selected */
.conv-moveinbox-radio
{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    flex: 0 0 auto;
    position: relative;
    transition: border-color .15s ease;
}
.conv-moveinbox-row.selected .conv-moveinbox-radio
{
    border-color: #4f46e5;
}
.conv-moveinbox-row.selected .conv-moveinbox-radio::after
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #4f46e5;
}
.conv-moveinbox-notify
{
    font-size: 12px;
    color: #4f46e5;
    background: #eef2ff;
    border-radius: 8px;
    padding: 8px 12px;
}

/* ==============================================================
   Issue 02 — Call & missed-call cards
   ============================================================== */

/* shared event-card shell — all non-SMS events carry .conv-event */
.conv-redesign .conv-event
{
    display: block;
    width: min(100%, 920px);
    background: var(--conv-card-bg);
    border: 1px solid var(--conv-border);
    border-left: 4px solid var(--conv-border);
    border-radius: var(--conv-radius-card);
    box-shadow: var(--conv-shadow);
    margin: 14px 0;
    margin-inline: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}
@media (min-width: 1200px)
{
    .conv-redesign .conv-event
    {
        width: min(82%, 920px);
        margin-left: 0;
        margin-right: auto;
    }
    .conv-redesign .conv-event.sent-item
    {
        margin-left: auto;
        margin-right: 0;
    }
}
/* header row inside the card — neutralise the legacy per-type pill styling
   (adrem_thomas.css paints conversationItem with pill bg + 25px radius) */
.conv-redesign .conv-event .conversation-selector-item
{
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--conv-text);
    margin: 0;
    padding: 10px 14px;
    align-items: flex-start;
    gap: 10px;
    /* keep the card header left-to-right even for outgoing (sent-item) events —
       the legacy .sent-item row-reverse must not flip the card layout */
    flex-direction: row;
}
/* per-type header wash — keep event headers visually distinct after the
   generic event reset strips the legacy pill backgrounds. */
.conv-redesign .conv-call .conversation-selector-item
{
    background-color: rgba(59, 130, 246, 0.055) !important;
}
.conv-redesign .conv-voicemail .conversation-selector-item
{
    background-color: rgba(139, 92, 246, 0.07) !important;
}
.conv-redesign .conv-fax .conversation-selector-item
{
    background-color: rgba(245, 158, 11, 0.09) !important;
}
.conv-redesign .conv-call .conversation-selector-item,
.conv-redesign .conv-voicemail .conversation-selector-item,
.conv-redesign .conv-fax .conversation-selector-item
{
    padding-bottom: 14px;
}
/* Legacy sent-item rules row-reverse the header and action cluster. Event
   cards keep a timeline/card layout; SMS bubbles own their sent alignment. */
.conv-redesign .conv-event.sent-item .conversation-selector-item
{
    flex-direction: row;
}
.conv-redesign .conv-event.sent-item .f_conversation-event-info-container
{
    flex-direction: row;
    padding-left: 0;
    padding-right: 0;
}
.conv-redesign .conv-event .conversation-title
{
    font-size: 13px;
    font-weight: 600;
    color: var(--conv-text);
}

/* ---- call card ---- */
.conv-redesign .conv-call          { border-left-color: var(--conv-accent-call); }
.conv-redesign .conv-call-missed   { border-left-color: var(--conv-accent-missed); background: #fef2f2; border-color: #fecaca; }

/* call header: the title column flexes to fill the row, so the recording /
   waveform holds its size and stays pinned to the right edge */
.conv-redesign .conv-call .conv-event-titlecol
{
    flex: 1;
    min-width: 0;
}
.conv-redesign .conv-call .f_conversation-event-info-container
{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}

.conv-redesign .conv-call .conversation-call-icon
{
    color: var(--conv-accent-call);
    font-size: 16px;
}
.conv-redesign .conv-call-missed .conversation-call-icon
{
    color: var(--conv-accent-missed);
}
/* MISSED pill — uppercase chip beneath the title */
.conv-redesign .conv-missed-label
{
    display: inline-block;
    color: var(--conv-accent-missed) !important;
    background: #fee2e2;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 9999px;
    margin: 3px 0 0 0;
}

/* duration + time */
.conv-redesign .conv-event .conversation-time-title
{
    font-size: 12px;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-event .conversation-date-widget
{
    font-size: 11px;
    color: var(--conv-text-faint);
}

/* call tag dots — a row of colour dots beneath the title */
/* tag dots sit inline on the title line (the title container is a flex row) */
.conv-redesign .conv-call .title-container
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.conv-redesign .conv-tag-dots
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
}
.conv-redesign .conv-tag-dots i.fa-circle
{
    font-size: 11px;
    padding: 0 !important;
    line-height: 1;
}

/* notes block — render as a sectioned area beneath the header */
.conv-redesign .conv-call .conversation-event-comments-container,
.conv-redesign .conv-call .conversation-event-comments-container-sent-item
{
    border-top: 1px solid var(--conv-border);
    margin: 0;
    padding: 8px 14px 10px;
}
.conv-redesign .conv-call .conversation-event-comments-drop-down,
.conv-redesign .conv-call .conversation-event-comments-drop-down-sent-item
{
    display: none;
}
.conv-redesign .conv-call .conversation-event-comments-box
{
    width: 100%;
}
.conv-redesign .conv-call .conversation-event-comments-notes-title
{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-call .conversation-selector-item-comment-solo
{
    background: var(--conv-bg);
    border: 1px solid var(--conv-border);
    border-radius: var(--conv-radius-sm);
    padding: 8px 10px;
    color: var(--conv-text);
}
.conv-redesign .conv-call .conversation-event-note-sub-text
{
    font-size: 11px;
    color: var(--conv-text-faint);
}

/* AI insights toggle + panel */
.conv-redesign .conv-call .fa-waveform
{
    color: var(--conv-accent-ai) !important;
}

/* ==============================================================
   Issue 03 — Voicemail & fax cards
   ============================================================== */
.conv-redesign .conv-voicemail  { border-left-color: var(--conv-accent-voicemail); }
.conv-redesign .conv-fax        { border-left-color: var(--conv-accent-fax); }

.conv-redesign .conv-voicemail .conversation-voicemail-icon { color: var(--conv-accent-voicemail); }
.conv-redesign .conv-fax .conversation-fax-icon             { color: var(--conv-accent-fax); }

/* voicemail transcript */
.conv-redesign .conv-voicemail .conversation-info-title
{
    font-size: 13px;
    line-height: 1.45;
    font-style: italic;
    color: var(--conv-text);
}

/* fax status subtitle */
.conv-redesign .conv-fax .conversation-sub-title
{
    font-size: 11px;
    color: var(--conv-text-muted);
}

/* ==============================================================
   Issue 04 — Note card (private / team)
   ============================================================== */
.conv-redesign .conv-note { border-left-color: var(--conv-accent-note); }
.conv-redesign .conv-note .conversation-note-icon { color: var(--conv-accent-note); }
.conv-redesign .conv-note .conversation-note-text
{
    font-size: 13px;
    line-height: 1.45;
    color: var(--conv-text);
}
/* private vs team — distinguished by the icon (lock / users) + a faint tint */
.conv-redesign .conv-note-private { background: #fffbeb; }
.conv-redesign .conv-note-public  { background: #fefce8; }

/* note header — icon · Private/Team label · sublabel, byline pinned right */
.conv-redesign .conv-note .conversation-selector-item
{
    align-items: center;
}
.conv-redesign .conv-note .conv-event-titlecol
{
    flex: 1;
    min-width: 0;
}
.conv-redesign .conv-note .f_conversation-event-info-container
{
    flex-shrink: 0;
}
.conv-redesign .conv-note .f_conversation-event-sub-info-container
{
    display: none;
}
.conv-redesign .conv-note-icon
{
    font-size: 13px;
    color: #b45309;
}
.conv-redesign .conv-note .title-container
{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1px 7px;
}
.conv-redesign .conv-note .title-container .conversation-title
{
    font-size: 12.5px;
    font-weight: 600;
    color: #78350f;
}
.conv-redesign .conv-note-sublabel
{
    font-size: 11px;
    color: #b45309;
}
.conv-redesign .conv-note-byline
{
    font-size: 11px;
    color: #b45309;
    white-space: nowrap;
}
.conv-redesign .conv-note-byline-sep::before
{
    content: "·";
    margin: 0 5px;
}
/* note-edit-delete: owner-only byline actions */
.conv-redesign .conv-note-actions
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    vertical-align: middle;
}
.conv-redesign .conv-note-action
{
    cursor: pointer;
    font-size: 11px;
    color: #b45309;
    opacity: 0.65;
}
.conv-redesign .conv-note-action:hover
{
    opacity: 1;
}
.conv-redesign .conv-note-action-delete:hover
{
    color: #dc2626;
}
.conv-note-edit-box
{
    resize: vertical;
    min-height: 90px;
}
.conv-redesign .conv-note-body
{
    padding: 0 14px 12px 14px;
    margin-top: -2px;
    font-size: 13px;
    line-height: 1.5;
    color: #451a03;
    white-space: pre-wrap;
}
/* ai-note-provenance: note-scoped AI badge + question line. These are intentionally NOT the
   .conv-ai-event provider classes (those are scoped to the AI card and won't apply in a .conv-note). */
.conv-redesign .conv-note-ai-badge
{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef2ff;
    font-size: 11px;
    font-weight: 600;
    color: #4f46e5;
    white-space: nowrap;
}
.conv-redesign .conv-note-ai-badge-icon
{
    font-size: 10px;
    color: #6366f1;
}
.conv-redesign .conv-note-ai-badge-engine::before
{
    content: "·";
    margin: 0 4px;
    color: #a5b4fc;
}
.conv-redesign .conv-note-ai-question
{
    padding: 0 14px 4px 14px;
    font-size: 12px;
    font-style: italic;
    color: #6b7280;
    white-space: pre-wrap;
}
.conv-redesign .conv-note-ai-question-prefix
{
    font-weight: 600;
    font-style: normal;
    margin-right: 5px;
    color: #4f46e5;
}
@media (max-width: 640px)
{
    .conv-redesign .conv-note .conversation-selector-item
    {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .conv-redesign .conv-note-sublabel
    {
        display: none;
    }
    .conv-redesign .conv-note .f_conversation-event-info-container
    {
        width: 100%;
        padding-left: 23px;
    }
    .conv-redesign .conv-note-byline
    {
        white-space: normal;
    }
}

/* --- fax card: document-tile icon, meta line, light Open button --- */
.conv-redesign .conv-fax .conversation-selector-item
{
    padding: 14px 16px;
    gap: 14px;
}
.conv-redesign .conv-fax .title-container .conversation-title
{
    font-size: 14px;
}
.conv-redesign .conv-fax-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 56px;
    border-radius: 8px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #b45309;
    font-size: 22px;
    flex-shrink: 0;
}
.conv-redesign .conv-fax .conv-event-titlecol
{
    flex: 1;
    min-width: 0;
}
.conv-redesign .conv-fax .f_conversation-event-info-container
{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}
.conv-redesign .conv-fax-open
{
    background: #2563eb;
    border: 1px solid #2563eb;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.24);
    min-height: 34px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.conv-redesign .conv-fax-open:hover
{
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}
.conv-redesign .conv-fax-meta
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 14px 8px 76px;
    margin-top: -6px;
    font-size: 11px;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-fax-meta .conv-meta-sep::before
{
    content: "·";
    margin-right: 6px;
    color: var(--conv-text-faint);
}
.conv-redesign .conv-fax-status
{
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}
.conv-redesign .conv-fax-status-failed
{
    background: #fee2e2;
    color: #b91c1c;
}

/* --- voicemail card: header meta line + transcript --- */
.conv-redesign .conv-voicemail .conv-event-titlecol
{
    flex: 1;
    min-width: 0;
}
.conv-redesign .conv-voicemail .f_conversation-event-info-container
{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}
.conv-redesign .conv-voicemail .f_conversation-event-sub-info-container
{
    display: none;
}
.conv-redesign .conv-voicemail-meta
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0 0;
    margin-top: 0;
    font-size: 11px;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-voicemail-meta .conv-meta-sep::before
{
    content: "·";
    margin-right: 6px;
    color: var(--conv-text-faint);
}
.conv-redesign .conv-voicemail-transcript
{
    padding: 2px 14px 12px 14px;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-voicemail-transcript::before { content: '"'; }
.conv-redesign .conv-voicemail-transcript::after  { content: '"'; }

/* ==============================================================
   Issue 05 — AI Q&A chat bubbles
   Restyle of the existing ai-bot question/response events.
   NOTE: the per-card engine picker + integration gating is a
   larger composer/AI-integration change — not styled here.
   ============================================================== */
/* the user's question bubble */
.conv-redesign .conv-ai .conversation-selector-item-ai-chat
{
    display: inline-block;
    max-width: min(85%, 560px);
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--conv-text);
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: var(--conv-radius-bubble);
    border-bottom-right-radius: var(--conv-radius-sm);
}
/* the AI's response bubble */
.conv-redesign .conv-ai .conversation-selector-item-ai-chat-response
{
    display: inline-block;
    max-width: min(92%, 620px);
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--conv-text);
    background: var(--conv-card-bg);
    border: 1px solid #c7d2fe;
    border-left: 3px solid var(--conv-accent-ai);
    border-radius: var(--conv-radius-bubble);
    border-bottom-left-radius: var(--conv-radius-sm);
    box-shadow: var(--conv-shadow-sm);
}

/* ==============================================================
   Issue 09 — Scheduled-SMS treatment (inline)
   The "pin to a strip at the top of the thread" restructure is a
   separate change; this just makes a scheduled message read as
   pending while it still sits inline.
   ============================================================== */
/* dashed slate bubble — beats the outgoing-SMS green (4-class selector) */
.conv-redesign .conv-sms.conv-scheduled .conversation-sms-text
{
    background: var(--conv-bg);
    border: 1px dashed var(--conv-accent-scheduled);
    color: var(--conv-text);
}
/* Cancel / Send-Now action row */
.conv-redesign .conv-scheduled-actions
{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 2px 2px;
}

/* ==============================================================
   Refinement pass — event-card polish (reviewed against rendered DOM)
   ============================================================== */
/* circular icon badge for card events */
.conv-redesign .conv-event .conversation-call-icon,
.conv-redesign .conv-event .conversation-voicemail-icon,
.conv-redesign .conv-event .conversation-fax-icon,
.conv-redesign .conv-event .conversation-note-icon
{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    font-size: 15px;
    flex-shrink: 0;
}
.conv-redesign .conv-call .conversation-call-icon           { background: #dbeafe !important; color: var(--conv-accent-call) !important; }
.conv-redesign .conv-call-missed .conversation-call-icon    { background: #fee2e2 !important; color: var(--conv-accent-missed) !important; }
.conv-redesign .conv-voicemail .conversation-voicemail-icon { background: #ede9fe !important; color: var(--conv-accent-voicemail) !important; }
.conv-redesign .conv-fax .conversation-fax-icon             { background: #fef3c7 !important; color: var(--conv-accent-fax) !important; }
.conv-redesign .conv-note .conversation-note-icon           { background: #fef9c3 !important; color: var(--conv-accent-note) !important; }

/* event-card header typography */
.conv-redesign .conv-event .conversation-title
{
    font-size: 13.5px;
    font-weight: 600;
}
.conv-redesign .conv-event .conversation-time-title
{
    font-size: 12px;
    font-weight: 600;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-event .conversation-date-widget
{
    font-size: 11px;
    color: var(--conv-text-faint);
}
/* legacy sub-info ("Called To: …") → small muted meta aligned under the title */
.conv-redesign .conv-event .f_conversation-event-sub-info-container
{
    padding: 0 14px 10px 64px;
    margin-top: -4px;
    font-size: 11.5px;
    color: var(--conv-text-faint);
}
.conv-redesign .conv-event .f_conversation-event-sub-info-container span
{
    color: var(--conv-text-faint);
}

/* SMS bubble — slightly more presence */
.conv-redesign .conv-sms .conversation-sms-text
{
    padding: 9px 14px;
}
/* URLs in the message body are rendered as links (ConversationEvent) */
.conv-redesign .conv-sms .conversation-sms-text a
{
    color: var(--conv-accent-call);
    text-decoration: underline;
    text-decoration-color: rgba(59, 130, 246, 0.35);
    text-underline-offset: 2px;
    word-break: break-all;
}
.conv-redesign .conv-sms .conversation-sms-text a:hover
{
    text-decoration-color: currentColor;
}

/* ---- link preview card under an SMS bubble (ConversationEvent requestLinkPreview) ----
   [page image, once it has loaded] / favicon + site / title / description */
.conv-redesign .conv-sms .conv-link-card
{
    display: flex;
    flex-direction: column;
    width: 320px;
    max-width: 92%;
    overflow: hidden;
    border: 1px solid var(--conv-border);
    border-radius: 14px;
    background: var(--conv-card-bg);
    box-shadow: var(--conv-shadow);
    color: var(--conv-text) !important;
    text-decoration: none !important;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.conv-redesign .conv-sms .conv-link-card:hover
{
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10), 0 1px 3px rgba(16, 24, 40, 0.06);
    transform: translateY(-1px);
}
.conv-redesign .conv-sms .conv-link-card:focus-visible
{
    outline: 2px solid var(--conv-accent-call);
    outline-offset: 2px;
}
.conv-redesign .conv-sms .conv-link-card-image
{
    display: none;
    aspect-ratio: 1.91 / 1;
    max-height: 190px;
    overflow: hidden;
    background: var(--conv-bg);
    border-bottom: 1px solid var(--conv-border);
}
.conv-redesign .conv-sms .conv-link-card-image.loaded
{
    display: block;
}
.conv-redesign .conv-sms .conv-link-card-image img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.conv-redesign .conv-sms .conv-link-card:hover .conv-link-card-image img
{
    transform: scale(1.03);
}
.conv-redesign .conv-sms .conv-link-card-body
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 13px 12px;
    border-left: 3px solid var(--conv-accent-call);
}
.conv-redesign .conv-sms .conv-link-card-site
{
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-sms .conv-link-card-favicon
{
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
}
.conv-redesign .conv-sms .conv-link-card-host
{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.conv-redesign .conv-sms .conv-link-card-go
{
    flex: none;
    font-size: 10px;
    color: var(--conv-text-faint);
    transition: color .15s ease;
}
.conv-redesign .conv-sms .conv-link-card:hover .conv-link-card-go
{
    color: var(--conv-accent-call);
}
.conv-redesign .conv-sms .conv-link-card-title,
.conv-redesign .conv-sms .conv-link-card-desc
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.conv-redesign .conv-sms .conv-link-card-title
{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--conv-text);
}
/* host + path stands in for the title until (unless) the page's own title arrives */
.conv-redesign .conv-sms .conv-link-card-title.is-url
{
    font-size: 13px;
    font-weight: 500;
    word-break: break-all;
}
.conv-redesign .conv-sms .conv-link-card-desc
{
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--conv-text-muted);
}
/* description placeholder while the page is being fetched */
.conv-redesign .conv-sms .conv-link-card-skeleton
{
    display: none;
}
.conv-redesign .conv-sms .conv-link-card.loading .conv-link-card-skeleton
{
    display: block;
    width: 75%;
    height: 9px;
    margin-top: 3px;
    border-radius: 5px;
    background: linear-gradient(90deg, #eef0f3 25%, #e1e4e9 40%, #eef0f3 55%);
    background-size: 300% 100%;
    animation: conv-link-card-shimmer 1.3s ease-in-out infinite;
}
@keyframes conv-link-card-shimmer
{
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* ---- person avatar (shared across redesigned event cards) ---- */
.conv-redesign .conv-avatar
{
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}
/* incoming SMS avatar matches the prototype's 28px */
.conv-redesign .conv-sms .conv-avatar
{
    width: 28px;
    height: 28px;
    font-size: 11px;
}
.conv-redesign .conv-sms .conv-sms-fallback-avatar
{
    background: #eef2f7;
    border: 1px solid #d7dee8;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-sms .conv-sms-fallback-avatar i
{
    font-size: 12px;
}
/* incoming SMS layout: [avatar] | [bubble + meta] */
.conv-redesign .conv-sms.conv-has-avatar
{
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 8px;
}
.conv-redesign .conv-sms.conv-has-avatar .conv-avatar
{
    grid-column: 1;
    grid-row: 1;
    align-self: end;
}
.conv-redesign .conv-sms.conv-has-avatar .conversation-selector-item
{
    grid-column: 2;
    grid-row: 1;
}
.conv-redesign .conv-sms.conv-has-avatar .conv-sms-meta
{
    grid-column: 2;
    grid-row: 2;
}
/* outgoing SMS layout: avatar lives on the RIGHT of the bubble, with bubble
   + meta in column 1 and avatar in column 2 — flips the incoming grid. */
.conv-redesign .conv-sms.conv-has-avatar.sent-item
{
    grid-template-columns: minmax(0, 1fr) 28px;
}
.conv-redesign .conv-sms.conv-has-avatar.sent-item .conv-avatar
{
    grid-column: 2;
}
.conv-redesign .conv-sms.conv-has-avatar.sent-item .conversation-selector-item,
.conv-redesign .conv-sms.conv-has-avatar.sent-item .conv-sms-meta
{
    grid-column: 1;
}
/* When the helper picks the icon-fallback variant (no letter-initials), the
   inline indigo background from buildConversationAvatar already paints; this
   just sizes the FA glyph so it sits nicely inside the 28px circle. */
.conv-redesign .conv-sms .conv-avatar.conv-avatar-icon i
{
    font-size: 12px;
    color: #ffffff !important;
}
/* message body column — bubble, link cards and MMS media all align to the
   message side (right for outgoing, left for incoming) */
.conv-redesign .conv-sms .conv-sms-body
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.conv-redesign .conv-sms.sent-item .conv-sms-body
{
    align-items: flex-end;
}
.conv-redesign .conv-sms .conv-mms-image
{
    border-radius: 10px;
    overflow: hidden;
}

/* ---- call participant row (avatar + name beneath the header) ---- */
.conv-redesign .conv-call-participants
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
    padding: 0 14px 10px 64px;
    font-size: 11.5px;
}
/* note/tag actions riding the participants row carry no indent of their own */
.conv-redesign .conv-call-participants .conv-call-actions
{
    padding: 0;
}
.conv-redesign .conv-call-participants .conv-avatar
{
    width: 22px;
    height: 22px;
    font-size: 9px;
}
.conv-redesign .conv-with-name
{
    color: var(--conv-text-muted);
    font-weight: 500;
}

/* inline AI-insights panel — only framed once it has content */
.conv-redesign .conv-ai-panel:not(:empty)
{
    border-top: 1px solid var(--conv-border);
    padding: 10px 14px;
}

/* ---- participant avatar stack (AvidBit users who were on the call) ---- */
.conv-redesign .conv-avatar-stack
{
    display: flex;
    align-items: center;
}
.conv-redesign .conv-avatar-stack .conv-avatar
{
    width: 28px;
    height: 28px;
    font-size: 11px;
    box-shadow: 0 0 0 2px var(--conv-card-bg);
    cursor: default;
}
.conv-redesign .conv-avatar-stack .conv-avatar + .conv-avatar
{
    margin-left: -8px;
}

/* missed-call icon — larger, unmistakable */
.conv-redesign .conv-call-missed .conversation-call-icon
{
    width: 44px;
    height: 44px;
    font-size: 17px;
}

/* card hover lift */
.conv-redesign .conv-event
{
    transition: box-shadow 0.15s ease;
}
.conv-redesign .conv-event:hover
{
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10);
}

/* ---- call meta line — duration · time · line(DID) ---- */
.conv-redesign .conv-call-meta
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0 0;
    margin-top: 0;
    font-size: 11.5px;
    color: var(--conv-text-muted);
}
.conv-redesign .conv-call-meta .conv-meta-sep::before
{
    content: "·";
    margin-right: 6px;
    color: var(--conv-text-faint);
}
.conv-redesign .conv-call-meta .conv-meta-did
{
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.conv-redesign .conv-call-meta .conv-meta-did i
{
    font-size: 9px;
    color: var(--conv-text-faint);
}
/* legacy right-side duration/time + empty sub-info are replaced by the meta line */
.conv-redesign .conv-call .conv-call-legacy-time
{
    display: none;
}
.conv-redesign .conv-event .f_conversation-event-sub-info-container:empty
{
    display: none;
}

/* ---- inline call actions (Add note / Add tag) ---- */
.conv-redesign .conv-call-actions
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 64px;
}
.conv-redesign .conv-call-action
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--conv-text-muted);
    background: var(--conv-card-bg);
    border: 1px solid var(--conv-border);
    border-radius: 9999px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.conv-redesign .conv-call-action i
{
    font-size: 11px;
    opacity: 0.7;
}
.conv-redesign .conv-call-action:hover
{
    border-color: var(--conv-accent-ai);
    color: var(--conv-accent-ai);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.09);
}
/* ==============================================================
   H1 — conversation-header contact identity (not scoped to
   .conv-redesign — the header lives outside the thread root).
   Replaces the legacy gray badge chip with a clean
   avatar · name · number identity block.
   ============================================================== */
.conv-header-contact
{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}
.conv-header-contact .symbol-label
{
    box-shadow: none;
}
.conv-header-contact .cursor-pointer
{
    color: #9ca3af !important;
}
.conv-header-contact-compact
{
    flex: 0 1 auto;
    margin: 0 !important;
    height: 34px;
    overflow: hidden;
}
.conv-header-contact-avatar-wrap,
.conv-header-contact-avatar
{
    flex: 0 0 auto;
}
.conv-header-contact-avatar
{
    width: 28px !important;
    height: 28px !important;
}
.conv-header-contact-avatar .symbol-label
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    /* convertToContactPill sets `background-color:#ccddff` as INLINE style
       on this element — !important is required to override it. Indigo to
       match the redesign palette (rgb 79, 70, 229). */
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}
.conv-header-contact-avatar-text,
.conv-header-contact-avatar-text.fal,
.conv-header-contact-avatar-text.fad,
.conv-header-contact-avatar .symbol-label .fa-user,
.conv-header-contact-avatar .symbol-label .fa-hashtag
{
    font-size: 11px !important;
    line-height: 1 !important;
    /* convertToContactPill sets `color:#333` as INLINE style on the text
       element (and for unnamed contacts the FA glyph inherits that). Force
       white so initials / fa-user / fa-hashtag render on the indigo background. */
    color: #ffffff !important;
}
.conv-header-contact-text
{
    min-width: 0;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.conv-header-contact-name
{
    min-width: 0;
    max-width: 100%;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-header-contact-name .tagify__tag-text
{
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-header-contact-number
{
    min-width: 0;
    max-width: 100%;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-header-contact-number .tagify__tag-text
{
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-header-contact-remove-wrap
{
    flex: 0 0 auto;
    margin-left: 2px;
}
.conv-header-contact-remove
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0 !important;
    font-size: 10px;
    line-height: 1;
    color: #9ca3af !important;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.conv-header-contact-remove:hover
{
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #374151 !important;
}
.conv-header-identity
{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    overflow: visible;
    position: relative;
}
.conv-header-avatar-stack
{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-left: 0;
}
.conv-header-avatar
{
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 2px solid #ffffff;
    border-radius: 9999px;
    background: #2563eb;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.conv-header-avatar + .conv-header-avatar
{
    margin-left: -10px;
}
.conv-header-avatar:nth-child(2)
{
    background: #7c3aed;
}
.conv-header-avatar:nth-child(3)
{
    background: #059669;
}
.conv-header-avatar-number
{
    border-color: #e5e7eb;
}
.conv-header-avatar-number i
{
    font-size: 12px;
    line-height: 1;
    /* The avatar's background is indigo (set inline via headerAvatarStyle);
       force the FA glyph to white so it's visible. Without !important a
       generic <i> color rule up the cascade was painting it dark. */
    color: #ffffff !important;
}
.conv-header-avatar-overflow
{
    background: #475569;
    font-size: 10px;
}
.conv-header-identity-text
{
    min-width: 0;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.conv-header-identity-title-row
{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.conv-header-identity-title
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}
.conv-header-group-badge
{
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}
.conv-header-identity-subtitle
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6b7280;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.15;
}
.conv-header-identity-remove
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-left: 3px;
    border: 1px solid transparent;
    border-radius: 9999px;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.conv-header-identity-remove:hover
{
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #374151;
}
/* Click-to-edit contact: the header name (single saved Contact only) opens
   the contact editor; the pencil next to it is the visible affordance. */
.conv-header-identity-title-editable
{
    cursor: pointer;
}
.conv-header-identity-title-editable:hover
{
    color: #2563eb;
    text-decoration: underline;
}
.conv-header-identity-edit
{
    flex: 0 0 auto;
    color: #9ca3af;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s ease;
}
.conv-header-identity-edit:hover
{
    color: #2563eb;
}
.conv-participant-remove-menu
{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: min(264px, calc(100vw - 24px));
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14);
}
.conv-participant-remove-label
{
    display: block;
    padding: 6px 10px 4px;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}
.conv-participant-remove-row
{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}
.conv-participant-remove-row:hover
{
    background: #f9fafb;
}
.conv-participant-remove-avatar
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.conv-participant-remove-avatar-number
{
    border: 1px solid #e5e7eb;
}
.conv-participant-remove-text
{
    min-width: 0;
    flex: 1 1 auto;
}
.conv-participant-remove-name
{
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
}
.conv-participant-remove-number
{
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6b7280;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.2;
}
.conv-participant-remove-icon
{
    flex: 0 0 auto;
    color: #9ca3af;
    font-size: 10px;
}
.conv-participant-remove-row:hover .conv-participant-remove-icon
{
    color: #e11d48;
}

/* ==============================================================
   H2 — conversation-header action toolbar (from-number + options).
   Scoped to the specific action-cluster / number-selector classes
   so the global framework widgets elsewhere are untouched.
   ============================================================== */
.f_contact_action_buttons
{
    display: flex;
    align-items: center;
    gap: 6px;
}
.f_contact_action_buttons .conversation-number-selector
{
    align-self: center;
    /* Override adrem_thomas.css's 250px mobile min-width — the redesigned
       trigger is a compact pill, not a full-line list item. */
    min-width: 0 !important;
    flex-grow: 0 !important;
}
/* The outer .avidbit-selector container has a dark-theme background +
   1px border + min-width:180px hard-coded in adrem_thomas.css:2547 — strip
   them so the redesigned trigger is borderless and content-sized. */
.avidbit-selector.avidbit-selector-dropdown-mode.conversation-number-selector,
.f_contact_action_buttons .avidbit-selector.conversation-number-selector
{
    min-width: 0 !important;
    max-height: none !important;
    margin-right: 0 !important;
    background-color: transparent !important;
    border: 0 !important;
}
/* Bootstrap's .dropdown-toggle adds a `::after` caret (triangle borders)
   by default. We override the same `::after` further down to render the
   number text instead, but we still need to neutralise Bootstrap's caret
   borders so a phantom triangle doesn't appear next to our text. The
   number-rendering rule (below) repeats `border: 0`. */
/* The framework's cloned SelectorItem inside the trigger carries an `(x)`
   remove button when `showRemoveButton` is true. We don't want a clear
   action on a single-select header trigger. */
.conversation-number-selector .dropdown-widget .f_remove-button,
.conversation-number-selector .dropdown-widget .right-interaction-container
{
    display: none !important;
}
/* The from-number picker — borderless ghost trigger, prototype style.
   The framework's cloned selected-item is hidden entirely; we render the
   trigger contents via ::before (phone icon), ::after (number text from
   a data attribute updated by JS on every selection change), and the
   framework's own .selector-dropdown-arrow chevron. Flex `order` puts
   them in the right sequence regardless of DOM order. */
.conversation-number-selector .dropdown-widget
{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0 !important;
    border-radius: 9999px;
    background: transparent !important;
    cursor: pointer;
    box-shadow: none !important;
}
.conversation-number-selector .dropdown-widget:hover,
.conversation-number-selector .dropdown-widget:focus,
.conversation-number-selector .dropdown-widget.show,
.conversation-number-selector.show .dropdown-widget
{
    background: #f3f4f6 !important;
    box-shadow: none !important;
}
/* Hide the framework's cloned selected-item entirely — we draw the trigger
   ourselves below. */
.conversation-number-selector .dropdown-widget .selected-item-container,
.conversation-number-selector .dropdown-widget > .selector-item
{
    display: none !important;
}
/* Phone icon — FA5 fa-phone glyph. */
.conversation-number-selector .dropdown-widget::before
{
    content: "\f095";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #6b7280;
    font-size: 12px;
    order: 1;
    flex-shrink: 0;
    line-height: 1;
}
/* Number text — pulled from data-number-full on wide screens,
   data-number-last4 on narrow. Set by JS from the selected item. */
.conversation-number-selector .dropdown-widget::after
{
    content: attr(data-number-full);
    display: inline !important;
    color: #111827;
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    order: 2;
    flex-shrink: 0;
    line-height: 1;
    /* Override Bootstrap's `.dropdown-toggle::after` caret-border triangle. */
    border: 0 !important;
    margin: 0;
    vertical-align: baseline;
}
.conversation-number-selector .selector-dropdown-arrow
{
    display: inline-flex;
    align-items: center;
    color: #9ca3af;
    order: 3;
    flex-shrink: 0;
    /* The framework's chevron container otherwise inherits a white hover
       background from a generic button rule somewhere up the cascade. */
    background: transparent !important;
}
.conversation-number-selector .selector-dropdown-arrow:hover,
.conversation-number-selector .selector-dropdown-arrow:focus,
.conversation-number-selector .selector-dropdown-arrow:active
{
    background: transparent !important;
    box-shadow: none !important;
}
.conversation-number-selector .selector-dropdown-arrow i
{
    font-size: 9px !important;
}

/* Compact control bands — swap the full number for the last 4 digits.
   The 992-1199px range has enough room for the contact identity, but not
   enough for every standalone header action. */
@media (max-width: 640px), (min-width: 992px) and (max-width: 1199.98px)
{
    .conversation-number-selector .dropdown-widget::after
    {
        content: attr(data-number-last4);
        font-size: 12px;
    }
    .conversation-number-selector .dropdown-widget
    {
        padding: 4px 8px;
        gap: 4px;
    }
}

/* Open dropdown panel — prototype-style item list.
   The trigger lives at the right edge of the header toolbar, so the default
   left-aligned dropdown can overflow off the right of the viewport. We add
   Bootstrap's native `.dropdown-menu-right` class to the menu via JS in C++
   (see CSContactCommunicator.cpp), which works with Popper instead of
   fighting it via overrides. Cap max-height too so a long list scrolls
   inside the menu instead of running past the viewport bottom. */
.conversation-number-selector .dropdown-menu
{
    min-width: 240px;
    max-width: 320px;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    background: #ffffff;
    max-height: 60vh;
    overflow-y: auto;
}
.conversation-number-selector .dropdown-menu .selector-item
{
    border-radius: 8px;
    padding: 6px 10px;
}
.conversation-number-selector .dropdown-menu .selector-item:hover
{
    background: #f9fafb;
}
.conversation-number-selector .dropdown-menu .selector-item.selected
{
    background: #eef2ff;
}
/* Inside the open panel: lead with the NUMBER (the title in our data, which
   is the only line when there's no description), then any label/sub-info
   reads as muted small text below. The framework's natural top-to-bottom
   order already matches what we want — keep it. */
.conversation-number-selector .dropdown-menu .selector-item .info-container
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.conversation-number-selector .dropdown-menu .selector-item .selector-item-title
{
    font-size: 13px !important;
    color: #111827;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
/* The label below the number (e.g. "AvidBit New Main CallFlow") was rendering
   too large + too bold — user feedback. Make it small, muted, and regular. */
.conversation-number-selector .dropdown-menu .selector-item .selector-item-subtitle,
.conversation-number-selector .dropdown-menu .selector-item .selector-item-info-2
{
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    line-height: 1.2;
}
/* the ⋮ options button — a clean round icon button */
.f_contact_action_buttons > .avidbit-menu-item > .menu-item-anchor-class
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9999px;
}
.f_contact_action_buttons > .avidbit-menu-item > .menu-item-anchor-class:hover
{
    background: #f3f4f6;
}
/* compose / new-message button — a clean round icon button matching the ⋮ */
.conv-header-compose
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    color: #6b7280;
    cursor: pointer;
}
.conv-header-compose:hover
{
    background: #f3f4f6;
}

/* ==============================================================
   Header compression — fit everything on one row.

   Goal: header eats as little vertical real estate as possible so
   the conversation gets more space. Rules are scoped to the new
   .conv-card-host class on the CSContactCommunicator's card root
   (added in the ctor) so the framework's generic .card-header used
   elsewhere in the app is untouched.
   ============================================================== */
.card.card-custom.conv-card-host > .card-header,
.conv-card-host > .card-header,
.conv-compact-header
{
    flex-wrap: wrap !important;
    align-items: center !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 6px 12px 8px !important;
    column-gap: 8px;
    row-gap: 6px;
    overflow: visible !important;
}
.card.card-custom.conv-card-host > .card-header .card-title,
.conv-card-host > .card-header .card-title,
.conv-compact-header-label
{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible;
}
.card.card-custom.conv-card-host > .card-header .card-label,
.conv-card-host > .card-header .card-label,
.conv-title-row
{
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 4px;
    justify-content: flex-start !important;
    margin: 0 !important;
    line-height: 1 !important;
    overflow: visible;
}
.card.card-custom.conv-card-host > .card-header .card-toolbar,
.conv-card-host > .card-header .card-toolbar,
.conv-header-toolbar
{
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.conv-header-number-slot
{
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}
.conv-title-row > :empty
{
    display: none !important;
}
/* Back button — direct anchor class on _backButton (set in C++). */
.conv-back-button
{
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-right: 4px !important;
    align-self: center !important;
    flex: 0 0 auto !important;
}
.conv-back-button-icon,
.conv-back-button .fa-chevron-left
{
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9999px !important;
    color: #374151 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.conv-back-button:hover .conv-back-button-icon,
.conv-back-button:hover .fa-chevron-left
{
    background: #f3f4f6 !important;
}

/* Contact pill — direct anchor class on the outer container (set in C++). */
.conv-contact-pill
{
    align-items: center !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
}
.conv-contact-pill-avatar,
.conv-contact-pill .symbol.symbol-40
{
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
}
.conv-contact-pill-avatar .symbol-label
{
    /* Indigo to match the redesign palette (rgb 79, 70, 229 = #4f46e5).
       generateContactCard sets `background-color:#555` as inline style on
       the .symbol-label element, so we need !important to win against
       the inline declaration. */
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
/* The icon glyph (<i>) inside the avatar — the framework's `text-light`
   should color it white, but a generic <i> color rule somewhere up the
   cascade overrides it. Force white on every shape: the <i> directly,
   any text class, the FA glyph itself, and the WText fallback. */
.conv-contact-pill-avatar .symbol-label i,
.conv-contact-pill-avatar .symbol-label .text-light,
.conv-contact-pill-avatar .symbol-label .fa-address-card,
.conv-contact-pill-avatar .text-light,
.conv-contact-pill-avatar .fa-address-card,
.conv-contact-pill-avatar i
{
    color: #ffffff !important;
    font-size: 12px !important;
}
.conv-contact-pill-text
{
    min-width: 0;
}
.conv-contact-pill-name
{
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-contact-pill-number
{
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Narrow viewport — even tighter; standalone compose hidden (kebab twin
   takes over from C++). */
@media (max-width: 640px)
{
    .card.card-custom.conv-card-host > .card-header,
    .conv-card-host > .card-header,
    .conv-compact-header
    {
        min-height: 44px !important;
        padding: 5px 10px !important;
    }
    .conv-contact-pill-avatar,
    .conv-contact-pill .symbol.symbol-40
    {
        width: 28px !important;
        height: 28px !important;
    }
    .conv-contact-pill-name
    {
        font-size: 12.5px !important;
    }
    .conv-contact-pill-number
    {
        font-size: 10.5px !important;
    }
    .conv-header-compose
    {
        display: none !important;
    }
    .conv-header-compose-menuitem
    {
        display: block !important;
    }
    .conv-header-contact-compact
    {
        height: 34px;
        gap: 6px;
    }
    .conv-header-contact-text
    {
        gap: 2px;
    }
    .conv-header-contact-name
    {
        font-size: 12.5px !important;
        line-height: 1.18 !important;
    }
    .conv-header-contact-number
    {
        display: block !important;
        font-size: 10.5px !important;
        line-height: 1.18 !important;
    }
    .conv-header-identity
    {
        gap: 6px;
    }
    .conv-header-avatar
    {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 10px;
    }
    .conv-header-avatar + .conv-header-avatar
    {
        margin-left: -9px;
    }
    .conv-header-identity-text
    {
        gap: 2px;
    }
    .conv-header-identity-title
    {
        font-size: 12.5px;
        line-height: 1.18;
    }
    .conv-header-identity-subtitle
    {
        font-size: 10.5px;
        line-height: 1.18;
    }
    .conv-header-group-badge
    {
        padding: 1px 5px;
        font-size: 8.5px;
    }
    .conv-header-identity-remove
    {
        width: 20px;
        height: 20px;
        margin-left: 1px;
    }
    .f_contact_action_buttons
    {
        gap: 2px;
    }
    .f_contact_action_buttons > .avidbit-menu-item > .menu-item-anchor-class
    {
        width: 30px;
        height: 30px;
    }
}
@media (min-width: 641px)
{
    .conv-header-contact
    {
        gap: 7px;
    }
    .conv-header-contact-compact
    {
        height: 38px;
    }
    .conv-header-contact-avatar
    {
        width: 32px !important;
        height: 32px !important;
    }
    .conv-header-contact-avatar .symbol-label
    {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 12px !important;
    }
    .conv-header-contact-avatar-text
    {
        font-size: 12px !important;
    }
    .conv-header-contact-name
    {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }
    .conv-header-contact-number
    {
        font-size: 11.5px !important;
        line-height: 1.2 !important;
    }
    .conv-header-identity
    {
        gap: 9px;
    }
    .conv-header-identity-title
    {
        font-size: 15px;
        line-height: 1.2;
    }
    .conv-header-identity-subtitle
    {
        font-size: 12px;
        line-height: 1.2;
    }
    .conv-header-identity-text
    {
        gap: 3px;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px)
{
    .conv-header-compose
    {
        display: none !important;
    }
    .conv-header-compose-menuitem
    {
        display: block !important;
    }
}
/* Compose kebab entry hidden when the standalone button is visible. */
@media (min-width: 641px) and (max-width: 991.98px), (min-width: 1200px)
{
    .conv-header-compose-menuitem
    {
        display: none !important;
    }
}

/* ==============================================================
   Kebab (three-dot) dropdown items — labels stay on a single row.
   Scoped to the conversation header's action toolbar so other
   kebab menus in the app aren't affected. Lets the dropdown widen
   to fit the longest label rather than wrapping text mid-label.
   ============================================================== */
.f_contact_action_buttons .dropdown-menu,
.f_contact_action_buttons .avidbit-dropdown-menu
{
    min-width: max-content;
    white-space: nowrap;
}
.f_contact_action_buttons .dropdown-menu .avidbit-menu-item,
.f_contact_action_buttons .avidbit-dropdown-menu .avidbit-menu-item
{
    white-space: nowrap;
}
.f_contact_action_buttons .dropdown-menu .menu-item-anchor-class,
.f_contact_action_buttons .dropdown-menu .menu-item-anchor-container-class,
.f_contact_action_buttons .dropdown-menu .menu-item-text,
.f_contact_action_buttons .avidbit-dropdown-menu .menu-item-anchor-class,
.f_contact_action_buttons .avidbit-dropdown-menu .menu-item-anchor-container-class,
.f_contact_action_buttons .avidbit-dropdown-menu .menu-item-text
{
    white-space: nowrap !important;
    overflow: visible !important;
}

/* ==============================================================
   H3 — Conversation Info slide-over panel (not scoped to
   .conv-redesign — the host card sits outside the thread root).
   ============================================================== */
.conv-info-panel-host { position: relative; }
.conv-info-panel
{
    position: absolute;
    inset: 0;
    z-index: 60;
}
.conv-info-backdrop
{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.conv-info-aside
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 400px);
    background: #ffffff;
    box-shadow: -8px 0 24px rgba(16, 24, 40, 0.18);
    display: flex;
    flex-direction: column;
}
.conv-info-header
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.conv-info-header-icon { color: #9ca3af; }
.conv-info-header-title
{
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
.conv-info-close
{
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    color: #6b7280;
    cursor: pointer;
}
.conv-info-close:hover { background: #f3f4f6; }
.conv-info-body
{
    flex: 1;
    overflow-y: auto;
}
.conv-info-identity
{
    padding: 16px 18px;
    border-bottom: 1px solid #f3f4f6;
}
.conv-info-identity-name
{
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
.conv-info-identity-sub
{
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}
.conv-info-section
{
    padding: 14px 18px;
    border-bottom: 1px solid #f3f4f6;
}
.conv-info-section-label
{
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
}
.conv-info-person
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.conv-info-person-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 13px;
    flex-shrink: 0;
}
.conv-info-person-text { min-width: 0; }
.conv-info-person-name
{
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}
.conv-info-person-number
{
    display: block;
    font-size: 11px;
    color: #6b7280;
}
/* CRM chips inside the info panel — full width, stacked */
.conv-info-crm-chip
{
    max-width: none;
    margin-top: 6px;
}
/* Activity stat tiles */
.conv-info-stat-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.conv-info-stat-tile
{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    background: #f9fafb;
    border-radius: 10px;
}
.conv-info-stat-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #eef2ff;
    color: #6366f1;
    font-size: 11px;
    flex-shrink: 0;
}
.conv-info-stat-text { min-width: 0; }
.conv-info-stat-value
{
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    line-height: 1.15;
}
.conv-info-stat-label
{
    display: block;
    font-size: 10.5px;
    color: #6b7280;
}
.conv-info-stat-note
{
    display: block;
    margin-top: 8px;
    font-size: 10.5px;
    color: #9ca3af;
}
/* "Your lines" rows */
.conv-info-line
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.conv-info-line-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 11px;
    flex-shrink: 0;
}
.conv-info-line-number
{
    font-size: 13px;
    color: #111827;
}
/* Shared files rows */
.conv-info-file
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.conv-info-file-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    flex-shrink: 0;
}
.conv-info-file-label
{
    flex: 1;
    font-size: 13px;
    color: #111827;
}
.conv-info-file-count
{
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
/* Tags chips */
.conv-info-tag-wrap
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.conv-info-tag
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 12px;
    color: #374151;
}
.conv-info-tag-dot
{
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    flex-shrink: 0;
}
/* MMS media rows in Shared files */
.conv-info-mms
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}
.conv-info-mms-thumb
{
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
}
.conv-info-mms-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    flex-shrink: 0;
}
.conv-info-mms-name
{
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: #374151;
    overflow-wrap: anywhere;
}
.conv-info-mms-download
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    color: #6b7280;
    flex-shrink: 0;
}
.conv-info-mms-download:hover
{
    background: #f3f4f6;
    color: #111827;
}
.conv-info-mms-preview
{
    width: 100%;
}
/* panel footer — Mark Completed */
.conv-info-footer
{
    flex-shrink: 0;
    padding: 12px 18px;
    border-top: 1px solid #e5e7eb;
}
.conv-info-complete-btn
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border-radius: 8px;
    background: #059669;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.conv-info-complete-btn:hover
{
    background: #047857;
}
/* "Load earlier conversation" button under the Activity grid */
.conv-info-load-earlier
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 12px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
}
.conv-info-load-earlier:hover
{
    border-color: #9ca3af;
    color: #374151;
}

/* ==============================================================
   C1 — composer: legacy tab strip → color-coded mode pills, and
   the footer framed as a clean composer card. Scoped to
   .conversation-reply-tabs (the composer container) so the
   global Bootstrap .nav classes elsewhere are untouched.
   ============================================================== */
.conversation-reply-tabs
{
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 14px 16px !important;
}
/* the mode strip — drop the tab underline, lay the pills in a row.
   Single line at all widths; if the row gets crowded, allow horizontal
   scroll as a last resort instead of wrapping to two lines.
   `padding-bottom: 3px` gives the active-pill border vertical breathing
   room — browsers force `overflow-y: auto` (acting like hidden) once
   `overflow-x: auto` is set, which clips the active pill's 1px bottom
   border without the padding. */
.conversation-reply-tabs .nav
{
    border-bottom: 0;
    gap: 6px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 3px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.conversation-reply-tabs .nav::-webkit-scrollbar
{
    display: none;
}
/* each mode → a pill. flex-shrink:0 keeps them legible; text-nowrap so
   the labels don't break mid-word and force a wrap themselves. */
.conversation-reply-tabs .nav .nav-link
{
    margin: 0 !important;
    padding: 6px 15px !important;
    border: 1px solid transparent !important;
    border-radius: 9999px !important;
    font-size: 13px;
    color: #6b7280;
    background: transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Narrow viewport — shrink pill padding and font so all three tabs sit on
   one line on phones (~360px) without needing the scroll fallback. */
@media (max-width: 1199px)
{
    .conversation-reply-tabs .nav .nav-link
    {
        padding: 5px 10px !important;
        font-size: 12px;
    }
}
@media (max-width: 480px)
{
    .conversation-reply-tabs .nav .nav-link
    {
        padding: 4px 8px !important;
        font-size: 11.5px;
    }
}
.conversation-reply-tabs .nav .nav-link:hover
{
    background: #f3f4f6;
}
.conversation-reply-tabs .nav .nav-link.active
{
    font-weight: 600;
    background: #f3f4f6;
    color: #111827;
}
/* per-mode active colors — keyed off the stable tab-link IDs */
.conversation-reply-tabs #reply_tab-link.active
{
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0 !important;
}
.conversation-reply-tabs #notes_tab-link.active
{
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a !important;
}
.conversation-reply-tabs #ai-tab-link.active
{
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe !important;
}

/* ==============================================================
   C2 — composer message box: the textarea framed as a gray
   rounded box with one tools row beneath it.
   ============================================================== */
.conversation-reply-tabs .f_conversation_reply_text_box
{
    flex-grow: 1;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 8px 12px 6px;
}
.conversation-reply-tabs .f_conversation_reply_text_box_input
{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    resize: none;
    padding: 4px 2px !important;
    font-size: 14px;
    box-sizing: border-box !important;
    /* Min-height for a comfortable empty composer; the framework's
       data-expandable JS (now fixed in WebRTCManager.cpp) handles the
       grow/shrink with content. */
    min-height: 36px;
}
/* the tools row beneath the textarea */
.conversation-reply-tabs .conv-composer-tools
{
    align-items: center;
    gap: 2px;
}
/* schedule / canned-script icons → consistent round icon buttons */
.conversation-reply-tabs .conv-composer-tools > i
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    font-size: 15px !important;
    color: #6b7280;
    padding: 0 !important;
    margin: 0 !important;
}
.conversation-reply-tabs .conv-composer-tools > i:hover
{
    background: #f3f4f6;
}
/* Canned-template menu (the paste icon). It's a Bootstrap dropdown anchored at
   the bottom of the conversation card, whose ancestors are overflow:hidden for
   the scroll layout — so it can't spill past the card. It's forced to open
   UPWARD into the message area (`.dropup` + data-flip off, set in
   CSContactCommunicator.cpp); cap the height so a long template list scrolls
   inside the menu instead of running past the top of the conversation, and let
   long template text wrap rather than widen the menu. Mirrors the header
   number-selector dropdown treatment. */
.conversation-reply-tabs .conv-composer-tools .conv-script-dropdown-menu
{
    min-width: 260px;
    max-width: 360px;
    max-height: min(50vh, 360px);
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    background: #ffffff;
}
.conversation-reply-tabs .conv-composer-tools .conv-script-dropdown-menu .selector-item
{
    white-space: normal;
    word-break: break-word;
}
/* the Send / MMS cluster — pushed to the row's trailing edge */
.conversation-reply-tabs .f_contactSMSButtons
{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* MMS attach → a subtle round icon button */
.conversation-reply-tabs .f_contactSMSButtons .btn-success
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: #6b7280 !important;
    box-shadow: none !important;
}
.conversation-reply-tabs .f_contactSMSButtons .btn-success:hover
{
    background: #f3f4f6 !important;
}
/* Send → a round, filled button */
.conversation-reply-tabs .f_contactSMSButtons .btn-primary
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.conversation-reply-tabs .f_contactSMSButtons .btn-primary:hover
{
    background: #15803d !important;
}
/* compact composer — the Send / MMS text labels are icon-only */
.conversation-reply-tabs .f_contactSMSButtons .btn .d-lg-inline
{
    display: none !important;
}

/* ==============================================================
   Notes tab — Private/Public segmented control + amber Save
   button (matches the prototype's note-visibility row).
   ============================================================== */
.conversation-reply-tabs .conv-composer-note-context
{
    gap: 8px;
    /* The context row now lives INSIDE the gray box (above the textarea), so
       drop the bottom padding to a hairline separator — the gray box's own
       padding handles the surrounding gutter. */
    padding: 0 0 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #6b7280;
}

/* ==============================================================
   AI tab — hint row above the gray box (matches prototype's
   indigo "Type your question — you'll choose which AI runs it
   next." sub-header).
   ============================================================== */
.conversation-reply-tabs .conv-composer-ai-hint
{
    gap: 8px;
    padding: 0 4px 8px;
    font-size: 12px;
    color: rgba(67, 56, 202, 0.9);
}
.conversation-reply-tabs .conv-composer-ai-hint i
{
    font-size: 11px;
    color: #6366f1;
}
.conversation-reply-tabs .conv-composer-ai-hint .conv-composer-ai-hint-text
{
    color: rgba(67, 56, 202, 0.9);
}
/* Notes button group — restyle the CSButtonGroup ONLY when it carries
   the .conv-composer-note-buttons class so the framework's other
   button groups elsewhere in the app stay untouched. */
.conversation-reply-tabs .conv-composer-note-buttons
{
    display: inline-flex;
    background: #f3f4f6 !important;
    border-radius: 8px;
    padding: 2px;
    /* override the legacy btn-group's display/border behaviour */
    border: 0 !important;
}
.conversation-reply-tabs .conv-composer-note-buttons .btn
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: #6b7280 !important;
    cursor: pointer;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.conversation-reply-tabs .conv-composer-note-buttons .btn:hover
{
    color: #374151 !important;
}
.conversation-reply-tabs .conv-composer-note-buttons .btn.active,
.conversation-reply-tabs .conv-composer-note-buttons .btn.active:hover,
.conversation-reply-tabs .conv-composer-note-buttons .btn.active:focus,
.conversation-reply-tabs .conv-composer-note-buttons .btn.active:active
{
    background: #ffffff !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
/* CSButtonGroup wraps the label in a <span> and the icon in an <i> — force
   the amber colour on both, since text colour on .btn.active is being
   overridden somewhere up the cascade (Bootstrap or adrem_thomas.css). */
.conversation-reply-tabs .conv-composer-note-buttons .btn.active span,
.conversation-reply-tabs .conv-composer-note-buttons .btn.active i
{
    color: #b45309 !important;
}
.conversation-reply-tabs .conv-composer-note-buttons .btn i
{
    font-size: 10px;
    padding-right: 0 !important;
}
.conversation-reply-tabs .conv-composer-note-buttons .btn span,
.conversation-reply-tabs .conv-composer-note-buttons .btn i
{
    color: inherit;
}
.conversation-reply-tabs .conv-composer-visibility-divider
{
    color: #d1d5db;
}
.conversation-reply-tabs .conv-composer-visibility-desc
{
    color: #6b7280;
}
/* tag-users-note: @-mention hint + suggestion popup */
.conversation-reply-tabs .conv-composer-mention-hint
{
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #9ca3af;
}
/* WSuggestionPopup renders as a <ul>; each suggestion is an <li>; the active row
   gets class .active (the docs' .sel is stale). The class lands on the <ul>. */
.conv-mention-popup,
.conv-mention-popup ul
{
    list-style: none;
    margin: 0;
}
.conv-mention-popup
{
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.35);
    background: #ffffff;
    max-height: 320px;
    overflow-y: auto;
    z-index: 1100;
}
.conv-mention-popup li
{
    list-style: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.25;
    color: #111827;
    cursor: pointer;
    white-space: nowrap;
}
.conv-mention-popup li > *
{
    display: block;
    color: inherit;
    text-decoration: none;
}
.conv-mention-popup li:hover,
.conv-mention-popup li.active
{
    background: #eef2ff;
    color: #3730a3;
}
.conv-mention-popup b
{
    font-weight: 600;
    color: #4f46e5;
}
.conversation-reply-tabs .f_contactSMSButtons .conv-composer-note-button
{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #d97706 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.conversation-reply-tabs .f_contactSMSButtons .conv-composer-note-button:hover
{
    background: #b45309 !important;
}
.conversation-reply-tabs .f_contactSMSButtons .conv-composer-note-button i
{
    font-size: 14px;
}

/* ==============================================================
   AI tab — indigo Ask button (round, matches the Send pattern).
   ============================================================== */
.conversation-reply-tabs .f_contactSMSButtons .conv-composer-ai-button
{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #6366f1 !important;
    color: #ffffff !important;
    cursor: pointer;
    box-shadow: none !important;
}
.conversation-reply-tabs .f_contactSMSButtons .conv-composer-ai-button:hover
{
    background: #4f46e5 !important;
}
.conversation-reply-tabs .f_contactSMSButtons .conv-composer-ai-button i
{
    font-size: 14px;
}
/* Force the icon glyph white on the round mode-coloured send buttons —
   FontAwesome's pseudo-element inherits `color` from the <i>, and some
   inherited button text colour was painting these glyphs in the button's
   own colour rather than white. */
.conversation-reply-tabs .f_contactSMSButtons .btn-primary i,
.conversation-reply-tabs .f_contactSMSButtons .conv-composer-note-button i,
.conversation-reply-tabs .f_contactSMSButtons .conv-composer-ai-button i
{
    color: #ffffff !important;
}

/* ==============================================================
   C3 — composer card tinted by the active mode (message / note /
   AI), keyed off a class set by the tab-switch handler.

   The glow extends UPWARD above the separator (above the composer's
   top edge) — same look the user liked from the original design.
   No side-ring shadow (that was creating a faint line down the
   length of the composer). A thin colored top border preserves the
   separator distinction without the ring.

   For the glow to render unclipped, the composer's parent column
   must allow overflow above the composer; CSS below ensures that.
   ============================================================== */
.conversation-reply-tabs
{
    transition: box-shadow 0.18s ease;
    border-top: 1px solid transparent;
    /* The element itself must allow shadow to escape its own box. */
    overflow: visible !important;
    /* Elevate the composer above the conversation thread so its upward
       box-shadow paints OVER the SMS bubbles immediately above it (the
       bubbles' white backgrounds were hiding the shadow even though it
       rendered — they're later in the stacking order without this). */
    position: relative;
    z-index: 5;
}
.conversation-reply-tabs::before
{
    /* Soft glow strip above the composer — uses a radial gradient centered
       on the top edge of the composer so the colour is strongest in the
       middle and fades to transparent at the left, right, and top edges.
       Wider+taller than the visible falloff to give the gradient room. */
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    top: -28px;
    height: 28px;
    pointer-events: none;
    z-index: -1;
    background: transparent;
    transition: background 0.18s ease;
}
.conversation-reply-tabs.conv-composer-mode-message
{
    box-shadow: 0 -6px 18px -14px rgba(22, 163, 74, 0.35);
    border-top-color: rgba(22, 163, 74, 0.28);
}
.conversation-reply-tabs.conv-composer-mode-message::before
{
    background: radial-gradient(ellipse 60% 100% at 50% 100%,
        rgba(22, 163, 74, 0.18) 0%,
        rgba(22, 163, 74, 0.06) 40%,
        rgba(22, 163, 74, 0) 75%);
}
.conversation-reply-tabs.conv-composer-mode-note
{
    box-shadow: 0 -6px 18px -14px rgba(217, 119, 6, 0.35);
    border-top-color: rgba(217, 119, 6, 0.28);
}
.conversation-reply-tabs.conv-composer-mode-note::before
{
    background: radial-gradient(ellipse 60% 100% at 50% 100%,
        rgba(217, 119, 6, 0.18) 0%,
        rgba(217, 119, 6, 0.06) 40%,
        rgba(217, 119, 6, 0) 75%);
}
.conversation-reply-tabs.conv-composer-mode-ai
{
    box-shadow: 0 -6px 18px -14px rgba(99, 102, 241, 0.35);
    border-top-color: rgba(99, 102, 241, 0.28);
}
.conversation-reply-tabs.conv-composer-mode-ai::before
{
    background: radial-gradient(ellipse 60% 100% at 50% 100%,
        rgba(99, 102, 241, 0.18) 0%,
        rgba(99, 102, 241, 0.06) 40%,
        rgba(99, 102, 241, 0) 75%);
}
/* MMS attach → a paperclip tool-icon at the head of the tools row */
.conversation-reply-tabs .conv-composer-attach
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    color: #6b7280;
    cursor: pointer;
}
.conversation-reply-tabs .conv-composer-attach:hover
{
    background: #f3f4f6;
}
.conversation-reply-tabs .conv-composer-attach i
{
    font-size: 15px;
}

/* ==============================================================
   Issue 05 — Unified AI Q&A card. The Q event renders as one
   indigo-railed card; the A event's data is merged in upstream.
   ============================================================== */
.conv-redesign .conv-ai-event
{
    overflow: hidden;
}
.conv-redesign .conv-ai-event .conv-ai-card
{
    padding: 0;
}
.conv-redesign .conv-ai-event .conv-ai-header
{
    padding: 10px 14px;
    background: #eef2ff;
    border-bottom: 1px solid #e0e7ff;
}
.conv-redesign .conv-ai-event .conv-ai-header-label
{
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #4338ca;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}
.conv-redesign .conv-ai-event .conv-ai-question
{
    display: block;
    font-size: 13px;
    color: #111827;
    line-height: 1.4;
}
.conv-redesign .conv-ai-event .conv-ai-body
{
    padding: 12px 14px;
}
.conv-redesign .conv-ai-event .conv-ai-provider
{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.conv-redesign .conv-ai-event .conv-ai-provider-icon
{
    color: #6366f1;
    font-size: 11px;
}
.conv-redesign .conv-ai-event .conv-ai-provider-name
{
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
}
.conv-redesign .conv-ai-event .conv-ai-answer
{
    display: block;
    font-size: 13px;
    color: #111827;
    line-height: 1.5;
}
.conv-redesign .conv-ai-event .conv-ai-pending
{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;
}
.conv-redesign .conv-ai-event .conv-ai-pending-icon
{
    color: #6366f1;
    font-size: 12px;
}
/* Loading indicator — three pulsing indigo dots above the "Searching…" text */
.conv-redesign .conv-ai-event .conv-ai-loading-dots
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 8px;
}
.conv-redesign .conv-ai-event .conv-ai-loading-dots span
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    display: inline-block;
    animation: conv-ai-dot-pulse 1.2s infinite ease-in-out both;
}
.conv-redesign .conv-ai-event .conv-ai-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.conv-redesign .conv-ai-event .conv-ai-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.conv-redesign .conv-ai-event .conv-ai-loading-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes conv-ai-dot-pulse
{
    0%, 80%, 100%
    {
        transform: scale(0.5);
        opacity: 0.4;
    }
    40%
    {
        transform: scale(1);
        opacity: 1;
    }
}
/* Answer action row (Copy; Regenerate / Save-as-note are deferred) */
.conv-redesign .conv-ai-event .conv-ai-actions
{
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.conv-redesign .conv-ai-event .conv-ai-action-btn
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 11.5px;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.conv-redesign .conv-ai-event .conv-ai-action-btn:hover
{
    background: #f9fafb;
    border-color: #d1d5db;
}
.conv-redesign .conv-ai-event .conv-ai-action-btn.conv-ai-copied
{
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}
/* ai-note-provenance: conv-ai-saved is the PERSISTENT saved state (was a 1.5s flash) —
   it also blocks further clicks so a card can't create duplicate notes. */
.conv-redesign .conv-ai-event .conv-ai-action-btn.conv-ai-saved
{
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
    pointer-events: none;
}
/* Engine picker modal — provider buttons stacked, color-coded */
.conv-ai-picker
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
.conv-ai-picker-btn
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.conv-ai-picker-btn:hover
{
    background: #f9fafb;
    border-color: #d1d5db;
}
.conv-ai-picker-btn:active
{
    transform: scale(0.99);
}
.conv-ai-picker-btn i
{
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    flex-shrink: 0;
}
.conv-ai-picker-avidbit i { background: #6366f1; }
.conv-ai-picker-openai  i { background: #10a37f; }
.conv-ai-picker-gemini  i { background: #4285f4; }
/* Consent disclosure inside the picker-Q (first-time ask flow) */
.conv-redesign .conv-ai-event .conv-ai-picker-consent
{
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.5;
    padding: 0 4px 6px;
}
.conv-redesign .conv-ai-event .conv-ai-picker-privacy
{
    font-size: 11.5px;
    color: #6b7280;
    padding: 0 4px 8px;
}
.conv-redesign .conv-ai-event .conv-ai-picker-privacy a
{
    color: #4338ca;
    text-decoration: underline;
}
.conv-redesign .conv-ai-event .conv-ai-action-btn i
{
    font-size: 10px;
}

/* ==============================================================
   Chunk 5 — header CRM strip (not scoped to .conv-redesign — the
   header lives outside the conversation-thread root)
   ============================================================== */
.conv-header-crm
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 100%;
    order: 2;
    min-width: 0;
    gap: 6px;
    width: 100%;
    margin-top: 0;
}
.conv-header-crm-chips
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
/* Summary bar — hidden by default on wide screens (chips always visible). */
.conv-header-crm-summary
{
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    width: max-content;
}
.conv-header-crm-summary:hover
{
    background: #f3f4f6;
    color: #374151;
}
.conv-header-crm-summary-chevron
{
    font-size: 10px;
    transition: transform 0.15s ease;
}
.conv-header-crm.is-expanded .conv-header-crm-summary-chevron
{
    transform: rotate(180deg);
}
.conv-header-crm-summary-label
{
    color: inherit;
}
.conv-header-crm-summary-count
{
    color: #9ca3af;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* Narrow viewport — flip behaviour: summary visible, chips collapsed by default
   (revealed only when the user taps the summary and .is-expanded gets added). */
@media (max-width: 640px)
{
    .conv-header-crm-summary
    {
        display: inline-flex;
    }
    .conv-header-crm:not(.is-expanded) .conv-header-crm-chips
    {
        display: none;
    }
}

.conv-header-crm-chip
{
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 270px;
    padding: 5px 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
}
.conv-header-crm-chip:hover
{
    border-color: #c7d2fe;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.conv-header-crm-logo
{
    width: 26px;
    height: 26px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
}
.conv-header-crm-logo-fallback
{
    width: 26px;
    font-size: 18px;
    color: #6b7280;
    text-align: center;
    flex-shrink: 0;
}
.conv-header-crm-text
{
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.conv-header-crm-name
{
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-header-crm-sub
{
    font-size: 10.5px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Call back" — red CTA variant on missed-call cards */
.conv-redesign .conv-call-action-callback
{
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    font-weight: 600;
    padding: 5px 14px;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
}
.conv-redesign .conv-call-action-callback i
{
    opacity: 1;
}
.conv-redesign .conv-call-action-callback:hover
{
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(185, 28, 28, 0.45);
}

/* ---- recording control + decorative waveform ---- */
.conv-redesign .conv-call-recording
{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.conv-redesign .conv-wave
{
    display: flex;
    align-items: center;
    gap: 2px;
    height: 22px;
}
.conv-redesign .conv-wave .conv-wave-bar
{
    width: 2px;
    height: 6px;
    border-radius: 1px;
    background: var(--conv-accent-call);
    opacity: 0.5;
}
.conv-redesign .conv-wave .conv-wave-bar:nth-child(3n)   { height: 14px; }
.conv-redesign .conv-wave .conv-wave-bar:nth-child(3n+1) { height: 9px; }
.conv-redesign .conv-wave .conv-wave-bar:nth-child(4n)   { height: 18px; }
.conv-redesign .conv-wave .conv-wave-bar:nth-child(5n)   { height: 4px; }
/* active-call waveform — bars pulse with a staggered delay */
@keyframes conv-wave-pulse
{
    0%, 100% { transform: scaleY(0.35); }
    50%      { transform: scaleY(1); }
}
.conv-redesign .conv-wave-active .conv-wave-bar
{
    transform-origin: center;
    animation: conv-wave-pulse 0.9s ease-in-out infinite;
}
.conv-redesign .conv-wave-active .conv-wave-bar:nth-child(2n) { animation-delay: 0.12s; }
.conv-redesign .conv-wave-active .conv-wave-bar:nth-child(3n) { animation-delay: 0.24s; }
.conv-redesign .conv-wave-active .conv-wave-bar:nth-child(4n) { animation-delay: 0.36s; }
/* call-event icon avatar — sized to match the other event badges */
.conv-redesign .conv-call .conversation-call-avatar
{
    width: 38px;
    height: 38px;
    font-size: 14px;
}

/* ---- AI Insights toggle bar ---- */
.conv-redesign .conv-ai-toggle
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-top: 1px solid var(--conv-border);
    background: rgba(99, 102, 241, 0.05);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--conv-accent-ai);
    cursor: pointer;
}
.conv-redesign .conv-ai-toggle:hover
{
    background: rgba(99, 102, 241, 0.1);
}
.conv-redesign .conv-ai-toggle-icon
{
    font-size: 13px;
}
.conv-redesign .conv-ai-toggle-chevron
{
    margin-left: auto;
    font-size: 10px;
}

/* ==============================================================
   Issue 11 — Thread-order toggle. Sits in the conversation header
   next to the kebab; same round-icon look as the rest of the
   header action buttons. Two surfaces:
     - standalone round button (visible on wide screens)
     - kebab dropdown entry (visible only on narrow screens)
   The breakpoint matches Tailwind's `sm` (640px) — the same one
   the prototype uses (`hidden sm:flex` / `sm:hidden`).
   ============================================================== */
.conv-thread-order-button
{
    align-items: center;
    justify-content: center;
}
.conv-thread-order-button i
{
    font-size: 15px;
    color: #6b7280;
}
.conv-thread-order-button:hover
{
    background: #f3f4f6;
    border-radius: 9999px;
}
/* Hide the dropdown entry on wide screens — the standalone button covers it. */
.conv-thread-order-menuitem
{
    display: none !important;
}
@media (max-width: 640px)
{
    /* Narrow viewport — flip: standalone hidden, dropdown entry shown. */
    .conv-thread-order-button
    {
        display: none !important;
    }
    .conv-thread-order-menuitem
    {
        display: block !important;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px)
{
    /* Tablet-landscape / narrow desktop: keep the row compact by moving
       sorting into the options menu, same as mobile. */
    .conv-thread-order-button
    {
        display: none !important;
    }
    .conv-thread-order-menuitem
    {
        display: block !important;
    }
}

/* Load-Earlier time-range combo: native <select> defaults to a white
   background. Strip it so the control sits flush on the page background. */
.conversation-time-select-combo-box,
.conversation-time-select-combo-box:focus,
.conversation-time-select-combo-box:hover
{
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* sms-send: composer greys + blocks input while a send is in flight (the
   class is applied client-side at send time, removed by the server response —
   pointer-events also blocks a second Send click on slow connections). */
.conv-composer-sending
{
    opacity: .55;
    pointer-events: none;
}

/* sms-delivery-state: red "Not sent" marker on a bubble whose carrier send
   failed (errorCode == Failed, from VOIPSMS.deliveryState). */
.conv-sms-notsent
{
    color: #F64E60;
    font-size: .85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-right: 8px;
}

/* mms-drag-drop: composer highlight while a file drag hovers it (class is
   applied/removed client-side by the depth-counted drag handlers). */
.f_conversation_reply_text_box.conv-composer-dropzone
{
    position: relative;
    outline: 2px dashed #6993FF;
    outline-offset: -2px;
    background-color: rgba(105, 147, 255, .08);
}
.f_conversation_reply_text_box.conv-composer-dropzone::after
{
    content: "Drop files to attach";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #6993FF;
    background-color: rgba(255, 255, 255, .7);
    pointer-events: none;
    z-index: 2;
}

/* ai-provider-connections 08: Markdown in AI posts in AI channels
   (Util::CSMarkdownRenderer output, a div.md-body inside the bubble).
   Metronic 7 greys; sized for the 14px bubble text. */
.md-body > :first-child
{
    margin-top: 0;
}
.md-body > :last-child
{
    margin-bottom: 0;
}
.md-body p
{
    margin: 0 0 6px;
}
.md-body h1,
.md-body h2,
.md-body h3
{
    margin: 10px 0 4px;
    font-weight: 600;
    line-height: 1.3;
    color: #181C32;
}
.md-body h1
{
    font-size: 17px;
}
.md-body h2
{
    font-size: 15.5px;
}
.md-body h3
{
    font-size: 14.5px;
}
.md-body ul,
.md-body ol
{
    margin: 0 0 6px;
    padding-left: 22px;
}
.md-body li
{
    margin: 1px 0;
}
.md-body li > ul,
.md-body li > ol
{
    margin: 2px 0;
}
.md-body hr
{
    margin: 8px 0;
    border: 0;
    border-top: 1px solid #EBEDF3;
}
.md-body code
{
    padding: 1px 4px;
    border-radius: 4px;
    background: #F3F6F9;
    color: #3F4254;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
}
.md-body pre.md-code
{
    max-width: 100%;
    margin: 0 0 6px;
    padding: 8px 10px;
    overflow-x: auto;
    border: 1px solid #EBEDF3;
    border-radius: 6px;
    background: #F3F6F9;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
}
.md-body pre.md-code code
{
    padding: 0;
    background: none;
    white-space: pre;
}
/* a wide table scrolls inside the bubble instead of widening the page */
.md-body .md-table-wrap
{
    max-width: 100%;
    margin: 0 0 6px;
    overflow-x: auto;
}
.md-body table.md-table
{
    border-collapse: collapse;
    font-size: 13px;
    overflow-wrap: normal;
    word-break: normal;
}
.md-body table.md-table th,
.md-body table.md-table td
{
    padding: 3px 8px;
    border: 1px solid #EBEDF3;
    text-align: left;
    vertical-align: top;
}
.md-body table.md-table th
{
    background: #F3F6F9;
    font-weight: 600;
    color: #3F4254;
    white-space: nowrap;
}
/* "### Steps taken" (long-running results): a small collapsed toggle */
.md-body details.md-steps
{
    margin: 8px 0 0;
    padding-top: 4px;
    border-top: 1px solid #EBEDF3;
    font-size: 12.5px;
    color: #7E8299;
}
.md-body details.md-steps > summary
{
    display: inline-block;
    cursor: pointer;
    font-weight: 600;
    color: #7E8299;
    list-style: none;
    user-select: none;
}
.md-body details.md-steps > summary::-webkit-details-marker
{
    display: none;
}
.md-body details.md-steps > summary::before
{
    content: "\f105";
    display: inline-block;
    width: 10px;
    margin-right: 4px;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    transition: transform .15s ease;
}
.md-body details.md-steps[open] > summary::before
{
    transform: rotate(90deg);
}
.md-body details.md-steps[open] > summary
{
    margin-bottom: 4px;
}

/* Channel AI live progress card (docs/ai-provider-connections-issues 10): a long-running job's
   "AI is working" row - what it is doing, its latest reasoning, the last steps, and live clocks. */
.ai-live
{
    font-style: normal;
    color: #3f4254;
    background: #f3f6f9;
    border: 1px solid #e4e6ef;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 4px 0;
    font-size: 0.925rem;
    line-height: 1.45;
}
.ai-live-head
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.ai-live-dot
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3699ff;
    flex-shrink: 0;
    animation: ai-live-pulse 1.6s infinite;
}
@keyframes ai-live-pulse
{
    0% { box-shadow: 0 0 0 0 rgba(54, 153, 255, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(54, 153, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(54, 153, 255, 0); }
}
@media (prefers-reduced-motion: reduce)
{
    .ai-live-dot { animation: none; }
}
.ai-live-title
{
    font-weight: 600;
}
.ai-live-meta
{
    color: #7e8299;
    font-size: 0.85rem;
}
.ai-live-now
{
    margin-top: 4px;
    overflow-wrap: anywhere;
}
.ai-live-now > i
{
    color: #3699ff;
    width: 16px;
    text-align: center;
    margin-right: 6px;
}
.ai-live-detail
{
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85em;
}
.ai-live-thought
{
    margin-top: 4px;
    color: #7e8299;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-live-steps
{
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    color: #5e6278;
    font-size: 0.85rem;
}
.ai-live-steps li
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ai-live-steps i
{
    color: #1bc5bd;
    margin-right: 6px;
}
.ai-live-ago
{
    margin-top: 4px;
    color: #b5b5c3;
    font-size: 0.8rem;
}
.ai-live-stale .ai-live-dot
{
    background: #ffa800;
    animation: none;
}
.ai-live-stale .ai-live-ago
{
    color: #ffa800;
}
/* The card's timeline: everything the job did and thought, scrolling inside the card. */
.ai-live-log
{
    margin-top: 6px;
    max-height: 190px;
    overflow-y: auto;
    border-top: 1px solid #e4e6ef;
    padding-top: 4px;
    font-size: 0.85rem;
}
.ai-live-entry
{
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    color: #5e6278;
}
.ai-live-entry > i
{
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    color: #b5b5c3;
}
.ai-live-text
{
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ai-live-when
{
    flex-shrink: 0;
    color: #b5b5c3;
    font-size: 0.75rem;
    white-space: nowrap;
}
.ai-live-k-thought .ai-live-text
{
    font-style: italic;
    color: #7e8299;
}
.ai-live-k-thought > i { color: #ffa800; }
.ai-live-k-calling > i { color: #3699ff; }
.ai-live-k-changing > i { color: #8950fc; }
.ai-live-k-step > i { color: #1bc5bd; }
.ai-live-k-approved > i { color: #1bc5bd; }
.ai-live-k-calling .ai-live-text
{
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.95em;
}