/* ============================================================
   EchoConversations — Shared Component Styles
   3-column layout: inbox list | transcript | caller info panel
   Shrinks at <1280px, collapses to 2-column <1024px, 1-column <768px

   Used in both client portal (full page) and admin shell (section).
   In admin context, convos-container height comes from the section
   container instead of 100dvh.
   ============================================================ */

/* === CONTAINER === */
.convos-container {
    display: grid;
    grid-template-columns: 340px minmax(400px, 720px) 340px;
    height: 100dvh;
    overflow: hidden;
}

/* Account for impersonation banner when present */
.v2-impersonation-banner ~ .v2-layout .convos-container {
    height: calc(100dvh - 48px);
}

/* Account for trial banner when present */
body:has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .convos-container {
    height: calc(100dvh - var(--v2-trial-banner-height, 64px));
}

/* Account for both banners stacked */
body:has(> .v2-impersonation-banner):has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .convos-container {
    height: calc(100dvh - 48px - var(--v2-trial-banner-height, 64px));
}

.v2-main.has-convos-welcome .convos-container {
    height: calc(100dvh - var(--convos-welcome-offset, 0px));
}

.v2-impersonation-banner ~ .v2-layout .v2-main.has-convos-welcome .convos-container {
    height: calc(100dvh - 48px - var(--convos-welcome-offset, 0px));
}

body:has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .v2-main.has-convos-welcome .convos-container {
    height: calc(100dvh - var(--v2-trial-banner-height, 64px) - var(--convos-welcome-offset, 0px));
}

body:has(> .v2-impersonation-banner):has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .v2-main.has-convos-welcome .convos-container {
    height: calc(100dvh - 48px - var(--v2-trial-banner-height, 64px) - var(--convos-welcome-offset, 0px));
}

/* Admin shell: fill viewport below toolbar (56px + 1px border) */
.v2-section-content .convos-container {
    height: calc(100dvh - 57px);
}

/* === SETUP WELCOME CARD === */
.convos-welcome {
    position: relative;
    margin: var(--v2-space-4);
    margin-bottom: 0;
    padding: var(--v2-space-4);
    border-radius: var(--v2-radius-lg);
    border: 1px solid var(--v2-border-accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--v2-accent) 14%, var(--v2-bg-surface)) 0%, var(--v2-bg-surface) 55%);
    box-shadow: var(--v2-shadow-lg);
}

.convos-welcome.hidden {
    display: none;
}

.convos-welcome-dismiss {
    position: absolute;
    top: var(--v2-space-3);
    right: var(--v2-space-3);
    width: 28px;
    height: 28px;
    border-radius: var(--v2-radius-full);
    border: 1px solid var(--v2-border);
    background: var(--v2-bg-elevated);
    color: var(--v2-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.convos-welcome-dismiss:hover {
    color: var(--v2-fg);
    border-color: var(--v2-border-accent);
}

.convos-welcome-dismiss svg {
    width: 14px;
    height: 14px;
}

.convos-welcome-title {
    font-size: var(--v2-text-md);
    font-weight: 700;
    color: var(--v2-fg);
    margin-right: 34px;
}

.convos-welcome-text {
    margin-top: var(--v2-space-2);
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
}

.convos-welcome-actions {
    margin-top: var(--v2-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-space-2);
}

.convos-welcome-btn {
    white-space: nowrap;
}

.convos-welcome-text #convos-welcome-number {
    color: var(--v2-accent-text);
    font-weight: 600;
}

/* === FIRST-RUN EMPTY STATE ===
   Shown when org has 0 non-test calls — replaces the inbox/detail layout
   with a single-CTA centered state. Owns the full viewport when active.
   .v2-main.has-convos-first-run hides #conversations-root + #convos-setup-welcome.
   ============================================================ */
.convos-first-run {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--v2-bg-body);
}
.convos-first-run.hidden {
    display: none;
}
.v2-impersonation-banner ~ .v2-layout .convos-first-run {
    height: calc(100dvh - 48px);
}
body:has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .convos-first-run {
    height: calc(100dvh - var(--v2-trial-banner-height, 64px));
}
body:has(> .v2-impersonation-banner):has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .convos-first-run {
    height: calc(100dvh - 48px - var(--v2-trial-banner-height, 64px));
}

.v2-main.has-convos-first-run #conversations-root,
.v2-main.has-convos-first-run #convos-setup-welcome {
    display: none !important;
}

.convos-first-run-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--v2-border);
    flex-shrink: 0;
}

.convos-first-run-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--v2-fg);
    margin: 0;
}

.convos-first-run-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--v2-fg-muted);
}

.convos-first-run-phone-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.convos-first-run-phone-prefix {
    color: var(--v2-fg-muted);
}

.convos-first-run-phone-link {
    color: var(--v2-fg);
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.convos-first-run-phone-link:hover {
    color: var(--v2-accent-text);
}

.convos-first-run-divider {
    color: var(--v2-fg-dim);
}

.convos-first-run-webcall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--v2-border);
    border-radius: 8px;
    color: var(--v2-fg);
    font-weight: 500;
    background: transparent;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

.convos-first-run-webcall:hover {
    border-color: var(--v2-border-hover);
    background: var(--v2-bg-elevated);
}

.convos-first-run-webcall svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.convos-first-run-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
}

.convos-first-run-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    border-radius: 18px;
    background: var(--v2-bg-elevated);
    border: 1px solid var(--v2-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-fg-muted);
}

.convos-first-run-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    fill: none;
}

.convos-first-run-headline {
    font-size: 22px;
    font-weight: 600;
    color: var(--v2-fg);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.convos-first-run-subtitle {
    font-size: 14px;
    color: var(--v2-fg-muted);
    margin: 0 0 22px;
    line-height: 1.5;
    max-width: 420px;
}

.convos-first-run-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    background: var(--v2-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.convos-first-run-cta:hover {
    background: var(--v2-accent-hover);
}

.convos-first-run-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.convos-first-run-secondary {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    color: var(--v2-fg-muted);
    text-decoration: none;
}

.convos-first-run-secondary:hover {
    color: var(--v2-accent-text);
}

/* Web-call session active: phone CTAs neutralized so the user can't
   double-dial while the modal owns the screen (T11). */
.convos-first-run-webcall:disabled,
.convos-first-run-webcall[aria-busy='true'] {
    cursor: progress;
    opacity: 0.6;
}

.convos-first-run-cta:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.convos-first-run-cta:disabled:hover {
    background: var(--v2-accent);
}

.convos-first-run-phone-link[aria-disabled='true'] {
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .convos-first-run-topbar {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .convos-first-run-actions {
        flex-wrap: wrap;
    }
    .convos-first-run-phone-prefix {
        display: none;
    }
    .convos-first-run-body {
        padding: 24px 20px;
    }
    .convos-first-run-headline {
        font-size: 20px;
    }
}

/* === INBOX TITLE === */
.convos-inbox-title {
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-fg);
    margin-bottom: var(--v2-space-3);
}

/* === INBOX SEARCH === */
.convos-search-box {
    position: relative;
    margin-top: var(--v2-space-2);
}

.convos-search-box svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v2-fg-muted);
    pointer-events: none;
}

.convos-search-input {
    width: 100%;
    padding: 8px 34px 8px 34px;
    font-size: var(--v2-text-sm);
    font-family: var(--v2-font-sans);
    background: var(--v2-bg-elevated);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    color: var(--v2-fg);
    box-sizing: border-box;
}

.convos-search-input:focus {
    outline: none;
    border-color: var(--v2-border-accent);
    box-shadow: 0 0 0 2px var(--v2-accent-ring);
}

.convos-search-input::placeholder {
    color: var(--v2-fg-dim);
}

.convos-search-clear {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--v2-radius-sm);
    color: var(--v2-fg-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.convos-search-clear svg {
    width: 16px;
    height: 16px;
}

.convos-search-clear.visible {
    display: inline-flex;
}

.convos-search-clear:hover {
    background: var(--v2-surface-hover);
    color: var(--v2-fg);
}


/* === COLUMN 1: INBOX === */
.convos-inbox {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--v2-border);
    background: var(--v2-bg-body);
    overflow: hidden;
    min-width: 0;
}

/* --- Inbox Header (Tabs + Category Filter) --- */
.convos-inbox-header {
    padding: var(--v2-space-4) var(--v2-space-4) var(--v2-space-3);
    border-bottom: 1px solid var(--v2-border);
    flex-shrink: 0;
}

.convos-tabs {
    display: flex;
    gap: var(--v2-space-2);
    margin-bottom: var(--v2-space-3);
}

.convos-tab {
    flex: 1;
    padding: 6px 12px;
    font-size: var(--v2-text-sm);
    font-weight: 500;
    font-family: var(--v2-font-sans);
    color: var(--v2-fg-muted);
    background: transparent;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    cursor: pointer;
    transition: all var(--v2-duration-fast);
    white-space: nowrap;
    position: relative;
}

.convos-tab:hover {
    background: var(--v2-surface-hover);
    color: var(--v2-fg);
}

.convos-tab.active {
    background: var(--v2-accent-subtle);
    color: var(--v2-accent-text);
    border-color: var(--v2-border-accent);
}

.convos-tab .convos-tab-count {
    font-size: var(--v2-text-xs);
    color: var(--v2-fg-dim);
    margin-left: 4px;
}

.convos-tab.active .convos-tab-count {
    color: var(--v2-accent-text);
}

/* --- Call List --- */
.convos-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.convos-list > .convos-empty {
    flex: 1;
}

.convos-call-item {
    padding: 14px var(--v2-space-4);
    border-bottom: 1px solid var(--v2-border);
    cursor: pointer;
    transition: background var(--v2-duration-fast);
    position: relative;
    /* Prevent flex-column parent (.convos-list) from shrinking rows below their
       natural content height, which would crush the caller row into the badge row. */
    flex-shrink: 0;
}

.convos-call-item:hover {
    background: var(--v2-surface);
}

.convos-call-item.active {
    background: var(--v2-surface-active);
}

.convos-call-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--v2-accent);
    border-radius: 0 2px 2px 0;
}

.convos-call-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.convos-call-caller {
    font-size: var(--v2-text-base);
    font-weight: 600;
    color: var(--v2-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.convos-call-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: var(--v2-text-xs);
    color: var(--v2-fg-dim);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: var(--v2-space-2);
}

.convos-call-duration {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--v2-fg-muted, var(--v2-fg-dim));
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.convos-call-duration svg {
    width: 11px;
    height: 11px;
}

.convos-call-bottom {
    display: flex;
    align-items: center;
    gap: var(--v2-space-2);
    /* Indent to align with caller name (past checkbox: 16px + 8px margin) */
    padding-left: calc(16px + var(--v2-space-2));
}

/* Inline icons in call list (star, archive) */
.convos-call-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.convos-call-star {
    color: var(--v2-warning);
}

.convos-call-star.convos-hover-icon {
    color: var(--v2-fg-muted);
}

.convos-call-star.convos-hover-icon:hover {
    color: var(--v2-warning);
}

.convos-call-archive {
    color: var(--v2-accent-text);
}

.convos-call-archive.convos-hover-icon {
    color: var(--v2-fg-muted);
}

.convos-call-archive.convos-hover-icon:hover {
    color: var(--v2-accent-text);
}

/* Hover-only icons: hidden by default, shown on card hover (pointer devices).
   On touch devices (mobile Safari, Android) hide entirely — star/archive live
   in the detail view, and iOS "ghost hover" would otherwise force a double-tap. */
.convos-hover-icon {
    opacity: 0;
    transition: opacity var(--v2-duration-fast);
    pointer-events: none;
}

@media (hover: hover) {
    .convos-call-item:hover .convos-hover-icon {
        opacity: 0.5;
        pointer-events: auto;
    }

    .convos-call-item:hover .convos-hover-icon:hover {
        opacity: 1;
    }
}

@media (hover: none) {
    .convos-hover-icon {
        display: none;
    }
}

.convos-call-icon.clickable {
    cursor: pointer;
    transition: transform var(--v2-duration-fast), opacity var(--v2-duration-fast);
}

.convos-call-icon.clickable:hover {
    transform: scale(1.2);
}

/* Don't reduce opacity on permanently visible (non-hover) icons */
.convos-call-icon.clickable:not(.convos-hover-icon):hover {
    opacity: 0.7;
}

/* Outcome indicator icon in call list (booking / transfer) — passive,
   non-interactive, mutually exclusive (booking > transfer per D03). */
.convos-outcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.convos-outcome-icon--booking {
    color: var(--v2-success-text);
}

.convos-outcome-icon--transfer {
    color: var(--v2-info-text);
}

/* Block indicator icon in call list — passive, non-interactive. Mirrors
   .convos-outcome-icon sizing; admin-managed blocks use warning color. */
.convos-block-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--v2-error-text);
}

.convos-block-icon--admin {
    color: var(--v2-warning-text);
}

/* Trust indicator icon in call list — mirrors .convos-block-icon sizing.
   Uses the success color to distinguish a passive trusted state. */
.convos-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--v2-success-text);
}

/* Detail-header outcome strip (single-line, sits above AI Summary). */
.convos-outcome-strip {
    display: flex;
    align-items: center;
    gap: var(--v2-space-2);
    padding: var(--v2-space-2) var(--v2-space-3);
    margin-bottom: var(--v2-space-3);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    font-size: var(--v2-text-sm);
    color: var(--v2-fg);
}

.convos-outcome-strip-icon {
    line-height: 1;
}

.convos-outcome-strip-text {
    font-weight: 500;
}

/* Unified transfer outcome strip — shared visual contract with mobile.
 * Renders below the action pill row, above the summary card. The whole
 * strip is the click target and seeks audio to the transfer time. */
.convos-transfer-strip {
    display: flex;
    align-items: center;
    gap: var(--v2-space-2);
    padding: var(--v2-space-2) var(--v2-space-3);
    margin-bottom: var(--v2-space-3);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    font-size: var(--v2-text-sm);
    color: var(--v2-fg);
    cursor: pointer;
    text-align: left;
}

.convos-transfer-strip:hover,
.convos-transfer-strip:focus-visible {
    background: var(--v2-surface-hover, var(--v2-surface));
    outline: none;
}

.convos-transfer-strip:focus-visible {
    box-shadow: 0 0 0 2px var(--v2-accent-ring);
}

.convos-transfer-strip-icon {
    line-height: 1;
    font-size: 1.1em;
}

.convos-transfer-strip-verb {
    font-weight: 600;
}

.convos-transfer-strip-chip {
    margin-left: var(--v2-space-1);
}

.convos-transfer-strip-time {
    margin-left: auto;
    color: var(--v2-fg-muted);
    font-variant-numeric: tabular-nums;
}

/* Info-panel outcome card (column 3 — booking/transfer details). */
.convos-outcome-card {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-2);
    padding: var(--v2-space-3);
    margin-top: var(--v2-space-3);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
}

.convos-outcome-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--v2-space-3);
    font-size: var(--v2-text-sm);
}

.convos-outcome-card-row--full {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--v2-space-1);
}

.convos-outcome-card-label {
    color: var(--v2-fg-muted);
    flex-shrink: 0;
}

.convos-outcome-card-value {
    color: var(--v2-fg);
    text-align: right;
    word-break: break-word;
}

.convos-outcome-card-row--full .convos-outcome-card-value {
    text-align: left;
}

.convos-outcome-card-message {
    font-style: italic;
    color: var(--v2-fg-muted);
}

/* Admin-only: cost badge in call list */
.convos-cost-badge {
    font-size: var(--v2-text-xs);
    font-variant-numeric: tabular-nums;
}

/* Tab badge (count indicator) — positioned top-right corner */
.convos-tab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    /* D04: 9px badge digit is intentionally below --v2-text-xs to fit a 16x16
       absolutely-positioned counter on the inbox tab corner. */
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--v2-radius-full);
    background: var(--v2-accent-subtle);
    color: var(--v2-accent-text);
}

.convos-tab.active .convos-tab-badge {
    background: var(--v2-accent);
    color: var(--v2-fg-on-accent);
}

@media (max-width: 768px) {
    .convos-welcome {
        margin: var(--v2-space-3);
        margin-bottom: 0;
    }

    .convos-welcome-actions {
        flex-direction: column;
    }

    .convos-welcome-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Row removal animation */
.convos-call-item.removing {
    animation: convos-row-exit 250ms var(--v2-ease-out) forwards;
    pointer-events: none;
    overflow: hidden;
}

@keyframes convos-row-exit {
    0% {
        opacity: 1;
        max-height: 100px;
        transform: translateX(0);
    }
    50% {
        opacity: 0.3;
        transform: translateX(-12px);
    }
    100% {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom-width: 0;
        transform: translateX(-20px);
    }
}


/* === COLUMN 2: DETAIL === */
.convos-detail {
    display: flex;
    flex-direction: column;
    background: var(--v2-bg-body);
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

[data-ref="detail-view"] {
    min-height: 0;
}

/* --- Detail Header --- */
.convos-detail-header {
    display: flex;
    align-items: center;
    padding: var(--v2-space-4) var(--v2-space-6);
    border-bottom: 1px solid var(--v2-border);
    flex-shrink: 0;
    gap: var(--v2-space-3);
    transition: padding var(--v2-duration-fast);
}

.convos-detail-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: var(--v2-leading-tight);
}

.convos-detail-caller-name {
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: font-size var(--v2-duration-fast);
}

.convos-detail-caller-phone {
    font-size: var(--v2-text-xs);
    color: var(--v2-fg-muted);
    font-family: var(--v2-font-mono);
    white-space: nowrap;
    overflow: hidden;
    max-height: 1.5em;
    transition: max-height var(--v2-duration-fast), opacity var(--v2-duration-fast);
}

/* --- Detail Top (chips + meta + actions, centered above cards) --- */
.convos-detail-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--v2-space-3);
    padding-bottom: var(--v2-space-2);
}

.convos-detail-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-space-2);
    flex-wrap: wrap;
}

.convos-detail-chips:empty {
    display: none;
}

.convos-detail-chips .v2-badge {
    font-size: var(--v2-text-xs);
}

.convos-detail-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-space-3);
    flex-wrap: wrap;
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
}

/* Detail-meta uses the same .convos-call-duration markup as the list view, but
 * needs to scale the clock icon + text to the larger detail-meta font size. */
.convos-detail-meta .convos-call-duration {
    font-size: inherit;
    gap: 4px;
    opacity: 1;
}

.convos-detail-meta .convos-call-duration svg {
    width: 14px;
    height: 14px;
}

/* Mobile/tablet detail-top actions — hidden on desktop (>1024px), where the
   info panel handles them. Stacked icon-over-label so 3 or 4 buttons share a
   single row without wrapping. */
.convos-detail-actions {
    display: flex;
    align-items: stretch;
    gap: var(--v2-space-2);
    width: 100%;
}

.convos-detail-actions .convos-action-btn.convos-action-btn-labeled {
    flex: 1;
    min-width: 0;
    height: auto;
    padding: 8px 4px;
    gap: 4px;
    flex-direction: column;
    border-radius: var(--v2-radius-md);
}

.convos-detail-actions .convos-action-label {
    font-size: var(--v2-text-xs);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- Action Buttons (shared between detail top + info panel) --- */
.convos-action-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-radius-md);
    border: 1px solid var(--v2-border);
    background: transparent;
    color: var(--v2-fg-muted);
    cursor: pointer;
    transition: all var(--v2-duration-fast);
    padding: 0;
}

/* Labeled variant: outlined pill with icon + text */
.convos-action-btn.convos-action-btn-labeled {
    width: auto;
    min-width: 36px;
    height: 36px;
    padding: 0 14px;
    gap: 6px;
    border-radius: var(--v2-radius-full);
}

.convos-action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.convos-action-label {
    font-size: var(--v2-text-xs);
    font-weight: 500;
    white-space: nowrap;
}

.convos-action-btn:hover {
    background: var(--v2-surface-hover);
    color: var(--v2-fg);
}

/* Star active */
.convos-action-btn.star-active {
    background: var(--v2-warning-bg);
    color: var(--v2-warning);
    border-color: var(--v2-warning-border);
}

/* Rate up active */
.convos-action-btn.rate-up-active {
    background: var(--v2-success-bg);
    color: var(--v2-success);
    border-color: var(--v2-success-border);
}

/* Rate down active */
.convos-action-btn.rate-down-active {
    background: var(--v2-error-bg);
    color: var(--v2-error);
    border-color: var(--v2-error-border);
}

/* Archive active */
.convos-action-btn.archive-active {
    background: var(--v2-accent-subtle);
    color: var(--v2-accent-text);
    border-color: var(--v2-border-accent);
}

/* Block active */
.convos-action-btn.block-active {
    background: var(--v2-error-bg);
    color: var(--v2-error-text);
    border-color: color-mix(in srgb, var(--v2-error-text) 30%, transparent);
}

.convos-action-btn.block-active:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Trust active — caller is on the trusted list. */
.convos-action-btn.trust-active {
    background: var(--v2-success-bg);
    color: var(--v2-success-text);
    border-color: color-mix(in srgb, var(--v2-success-text) 30%, transparent);
}

/* Trust collision — both blocked and trusted; one-click resolution prompt. */
.convos-action-btn.trust-collision {
    background: var(--v2-warning-bg);
    color: var(--v2-warning-text);
    border-color: color-mix(in srgb, var(--v2-warning-text) 30%, transparent);
}

/* Kebab overflow trigger — sits at the end of the action row as a 36×36
   icon-only button regardless of whether the parent row uses flex (mobile
   detail) or grid (desktop info panel). */
.convos-detail-actions .convos-action-btn.convos-action-kebab,
.convos-info-actions .convos-action-btn.convos-action-kebab {
    width: 36px;
    height: 36px;
    flex: none;
    padding: 0;
    border-radius: var(--v2-radius-md);
    flex-direction: row;
    align-self: center;
}

.convos-info-actions .convos-action-btn.convos-action-kebab {
    grid-column: auto;
}

.convos-action-kebab[aria-expanded="true"] {
    background: var(--v2-surface-hover);
    color: var(--v2-fg);
}

/* Floating overflow menu (rendered on document.body, positioned by JS). */
.convos-actions-menu {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    padding: 4px;
    background: var(--v2-bg-elevated);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    box-shadow: var(--v2-shadow-modal);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.convos-actions-menu-item {
    display: flex;
    align-items: center;
    gap: var(--v2-space-2);
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--v2-radius-sm);
    color: var(--v2-fg);
    font-size: var(--v2-text-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--v2-duration-fast) var(--v2-ease-out),
                color var(--v2-duration-fast) var(--v2-ease-out);
}

.convos-actions-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--v2-fg-muted);
}

.convos-actions-menu-item:hover {
    background: var(--v2-surface-hover);
}

.convos-actions-menu-item:hover svg {
    color: var(--v2-fg);
}

.convos-actions-menu-item--active {
    color: var(--v2-success-text);
}

.convos-actions-menu-item--active svg {
    color: var(--v2-success-text);
}

.convos-actions-menu-item--collision {
    color: var(--v2-warning-text);
}

.convos-actions-menu-item--collision svg {
    color: var(--v2-warning-text);
}

.convos-actions-menu-empty {
    padding: 8px 10px;
    color: var(--v2-fg-muted);
    font-size: var(--v2-text-sm);
}


/* --- Detail Body: scrollable column of centered-top + section cards --- */
.convos-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--v2-space-5) var(--v2-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-4);
}

/* Sticky group: Summary + Recording stay pinned to the top of the
   scrollable detail body while the Transcript scrolls beneath. The negative
   margins bleed through the parent's top/horizontal padding so the sticky
   background fully covers the viewport edge; the matching negative `top`
   pulls the sticky position up into that padding area so transcript
   messages can't peek through above the cards. The negative bottom margin
   cancels the inner padding-bottom so the natural flex gap to the next
   sibling is preserved. */
.convos-detail-sticky {
    position: sticky;
    top: calc(-1 * var(--v2-space-5));
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-4);
    background: var(--v2-bg-body);
    margin: calc(-1 * var(--v2-space-5)) calc(-1 * var(--v2-space-6)) calc(-1 * var(--v2-space-4));
    padding: var(--v2-space-5) var(--v2-space-6) var(--v2-space-4);
}

.convos-detail-sticky:empty {
    display: none;
}

/* --- Section Card shell (Summary / Recording / Transcript) --- */
.convos-section-card {
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-bg-surface);
    padding: var(--v2-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-3);
}

.convos-section-label {
    font-size: var(--v2-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--v2-tracking-wide);
    color: var(--v2-fg-muted);
}

/* --- Summary --- */
.convos-summary-text {
    font-size: var(--v2-text-sm);
    color: var(--v2-fg);
    line-height: var(--v2-leading-relaxed);
}

/* --- Agent SMS Replies --- */
.convos-agent-sms-replies-body {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-3);
    min-width: 0;
}

.convos-agent-sms-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-space-3);
    padding: var(--v2-space-3);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface);
    color: var(--v2-fg-muted);
}

.convos-agent-sms-state--empty {
    align-items: flex-start;
    justify-content: flex-start;
}

.convos-agent-sms-state--error {
    border-color: var(--v2-error-border);
    background: var(--v2-error-bg);
    color: var(--v2-error-text);
}

.convos-agent-sms-state-title {
    font-size: var(--v2-text-sm);
    font-weight: 600;
    color: var(--v2-fg);
}

.convos-agent-sms-state--error .convos-agent-sms-state-title {
    color: var(--v2-error-text);
}

.convos-agent-sms-state-text {
    margin-top: 2px;
    font-size: var(--v2-text-xs);
    line-height: var(--v2-leading-normal);
    color: var(--v2-fg-muted);
}

.convos-agent-sms-state--error .convos-agent-sms-state-text {
    color: var(--v2-error-text);
}

.convos-agent-sms-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid var(--v2-border);
    border-top-color: var(--v2-accent);
    border-radius: var(--v2-radius-full);
    animation: convos-agent-sms-spin 0.8s linear infinite;
}

@keyframes convos-agent-sms-spin {
    to { transform: rotate(360deg); }
}

.convos-agent-sms-reply-list {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-3);
}

.convos-agent-sms-reply {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-3);
    padding-top: var(--v2-space-3);
    border-top: 1px solid var(--v2-border);
}

.convos-agent-sms-reply:first-child {
    padding-top: 0;
    border-top: 0;
}

.convos-agent-sms-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-space-3);
    min-width: 0;
}

.convos-agent-sms-reply-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--v2-space-2);
    min-width: 0;
    font-size: var(--v2-text-sm);
    font-weight: 600;
    color: var(--v2-fg);
}

.convos-agent-sms-time,
.convos-agent-sms-sender,
.convos-agent-sms-original-label,
.convos-agent-sms-media-summary,
.convos-agent-sms-media-meta {
    font-size: var(--v2-text-xs);
    color: var(--v2-fg-muted);
}

.convos-agent-sms-time {
    white-space: nowrap;
}

.convos-agent-sms-sender {
    font-family: var(--v2-font-mono);
}

.convos-agent-sms-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: var(--v2-radius-full);
    border: 1px solid var(--v2-border);
    font-size: var(--v2-text-xs);
    font-weight: 600;
    line-height: var(--v2-leading-tight);
}

.convos-agent-sms-status.is-archived {
    border-color: var(--v2-success-border);
    background: var(--v2-success-bg);
    color: var(--v2-success-text);
}

.convos-agent-sms-status.is-pending,
.convos-agent-sms-status.is-partial {
    border-color: var(--v2-warning-border);
    background: var(--v2-warning-bg);
    color: var(--v2-warning-text);
}

.convos-agent-sms-status.is-failed {
    border-color: var(--v2-error-border);
    background: var(--v2-error-bg);
    color: var(--v2-error-text);
}

.convos-agent-sms-original,
.convos-agent-sms-message {
    border-radius: var(--v2-radius-md);
    background: var(--v2-surface);
}

.convos-agent-sms-original {
    padding: var(--v2-space-3);
    border-left: 3px solid var(--v2-border-strong);
}

.convos-agent-sms-original--missing {
    color: var(--v2-fg-muted);
}

.convos-agent-sms-original-text,
.convos-agent-sms-message {
    font-size: var(--v2-text-sm);
    line-height: var(--v2-leading-relaxed);
    color: var(--v2-fg);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.convos-agent-sms-original-text {
    margin-top: 4px;
}

.convos-agent-sms-message {
    padding: var(--v2-space-3);
}

.convos-agent-sms-message.is-empty {
    color: var(--v2-fg-muted);
    font-style: italic;
}

.convos-agent-sms-media {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-2);
}

.convos-agent-sms-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: var(--v2-space-2);
}

.convos-agent-sms-media-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: var(--v2-space-2);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    background: var(--v2-bg-surface);
    color: var(--v2-fg);
    text-decoration: none;
}

.convos-agent-sms-media-item.is-archived:hover {
    border-color: var(--v2-border-hover);
    background: var(--v2-surface-hover);
}

.convos-agent-sms-media-item.is-pending {
    border-style: dashed;
}

.convos-agent-sms-media-item.is-failed {
    border-color: var(--v2-error-border);
    background: var(--v2-error-bg);
}

.convos-agent-sms-media-thumb,
.convos-agent-sms-media-file {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-surface);
}

.convos-agent-sms-media-thumb {
    display: block;
    object-fit: cover;
}

.convos-agent-sms-media-file {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--v2-fg-muted);
}

.convos-agent-sms-media-name {
    min-width: 0;
    font-size: var(--v2-text-xs);
    font-weight: 600;
    color: var(--v2-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.convos-agent-sms-media-meta {
    overflow-wrap: anywhere;
}


/* --- Transcript bubbles --- */
.convos-transcript {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-3);
}

.convos-msg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 85%;
}

.convos-msg.agent {
    align-self: flex-start;
    align-items: flex-start;
}

.convos-msg.user {
    align-self: flex-end;
    align-items: flex-end;
}

.convos-msg.continued {
    margin-top: calc(-1 * var(--v2-space-3) + var(--v2-space-1));
}

.convos-msg-label {
    font-size: var(--v2-text-xs);
    font-weight: 700;
    letter-spacing: var(--v2-tracking-wide);
    text-transform: uppercase;
    color: var(--v2-fg-muted);
}

.convos-msg-label.is-placeholder {
    visibility: hidden;
}

/* Caller (user) bubbles stack label/bubble vertically — collapse the placeholder
 * entirely so consecutive bubbles in a chain don't carry an empty label-row of
 * vertical space. Agent bubbles use a row layout in the portal, so they need the
 * placeholder's width preserved (visibility:hidden above) to keep the bubble
 * column-aligned with non-continued ones. */
.convos-msg.user .convos-msg-label.is-placeholder {
    display: none;
}

/* The time row lives BELOW the bubble in user (column) layout and is invisible
 * by default (opacity:0) but still occupies ~20px of vertical space, which makes
 * a tight chain look spaced out. In a chain, drop the time entirely on the
 * leader (any user bubble directly followed by a continued user bubble) and on
 * every continued bubble, so the bubbles sit flush. Agent bubbles use a row
 * layout, so their time sits beside the bubble — no chain gap to worry about. */
.convos-msg.user:has(+ .convos-msg.user.continued) .convos-msg-time,
.convos-msg.user.continued .convos-msg-time {
    display: none;
}

.convos-msg.agent.continued .convos-msg-bubble {
    border-top-left-radius: 4px;
}

.convos-msg.user.continued .convos-msg-bubble {
    border-top-right-radius: 4px;
}

.convos-msg-bubble {
    max-width: 100%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: var(--v2-text-base);
    line-height: var(--v2-leading-normal);
    word-wrap: break-word;
    white-space: pre-wrap;
    cursor: pointer;
    transition: box-shadow var(--v2-duration-fast);
}

.convos-msg-bubble:hover {
    box-shadow: 0 0 0 1.5px var(--v2-border-strong);
}

.convos-msg.agent .convos-msg-bubble {
    background: var(--v2-accent);
    color: var(--v2-fg-on-accent);
    border-bottom-left-radius: 4px;
}

.convos-msg.user .convos-msg-bubble {
    background: var(--v2-surface);
    color: var(--v2-fg);
    border: 1px solid var(--v2-border);
    border-bottom-right-radius: 4px;
}

.convos-msg-time {
    font-size: var(--v2-text-xs);
    color: var(--v2-accent-text);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--v2-duration-fast), color var(--v2-duration-fast);
    display: flex;
    align-items: center;
    gap: 4px;
}

.convos-msg:hover .convos-msg-time,
.convos-msg.playing .convos-msg-time {
    opacity: 1;
}

.convos-msg-time svg {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity var(--v2-duration-fast);
}

.convos-msg-time:hover svg,
.convos-msg.playing .convos-msg-time svg {
    opacity: 1;
}

/* Playback highlight — both bubbles glow accent */
.convos-msg.playing .convos-msg-bubble {
    box-shadow: 0 0 0 2px var(--v2-accent);
    outline: none;
}

/* --- Transfer attempt markers + recipient-audience bubbles ---
 * A transfer call surfaces two markers per attempt: a START divider at the
 * moment the agent invokes the transfer tool, and an END divider when the
 * tool result lands (success → "Connected", failure → "Transfer failed"
 * with a reason chip). Agent bubbles that fall inside an open attempt span
 * get a hollow `.to-recipient` treatment so the audience shift is
 * unambiguous; after a failed END, agent bubbles return to the solid
 * "to caller" style until the next attempt starts.
 *
 * The three variants share .convos-transfer-divider for line/label layout
 * but swap the label tone via --variant-bg / --variant-ring / --variant-fg
 * custom properties so a future variant just sets those.
 */
.convos-transfer-divider {
    --transfer-divider-bg: var(--v2-accent-subtle);
    --transfer-divider-ring: var(--v2-accent-ring);
    --transfer-divider-fg: var(--v2-accent-text);
    --transfer-divider-line: var(--v2-accent-ring);
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
    align-self: stretch;
    margin: var(--v2-space-3) 0 var(--v2-space-2);
    cursor: pointer;
    color: var(--transfer-divider-fg);
}

/* Tighten spacing when start divider sits immediately above end divider
 * (transfer that resolved with no agent speech in between) so the pair
 * reads as one event. */
.convos-transfer-divider--start + .convos-transfer-divider--end {
    margin-top: calc(var(--v2-space-1) * -1);
}

.convos-transfer-divider-line {
    flex: 1;
    height: 1px;
    background: var(--transfer-divider-line);
}

.convos-transfer-divider-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--v2-radius-full);
    border: 1px solid var(--transfer-divider-ring);
    background: var(--transfer-divider-bg);
    font-size: var(--v2-text-xs);
    font-weight: 600;
    letter-spacing: var(--v2-tracking-wide);
    text-transform: uppercase;
    color: var(--transfer-divider-fg);
}

.convos-transfer-divider-label svg {
    flex-shrink: 0;
}

.convos-transfer-divider-time {
    color: var(--v2-fg-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.convos-transfer-divider-reason {
    color: var(--v2-fg-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 2px 8px;
    border-radius: var(--v2-radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--v2-border);
}

.convos-transfer-divider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
    animation: convos-transfer-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes convos-transfer-dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 8%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .convos-transfer-divider-dot { animation: none; }
}

.convos-transfer-divider:hover .convos-transfer-divider-label {
    filter: brightness(1.08);
}

/* --- Variant: start (in progress, neutral/info tone) --- */
.convos-transfer-divider--start {
    --transfer-divider-bg: var(--v2-accent-subtle);
    --transfer-divider-ring: var(--v2-accent-ring);
    --transfer-divider-fg: var(--v2-accent-text);
    --transfer-divider-line: var(--v2-accent-ring);
}

/* --- Variant: success --- */
.convos-transfer-divider--success {
    --transfer-divider-bg: var(--v2-success-bg);
    --transfer-divider-ring: var(--v2-success-border);
    --transfer-divider-fg: var(--v2-success-text);
    --transfer-divider-line: var(--v2-success-border);
}

/* --- Variant: failure --- */
.convos-transfer-divider--failure {
    --transfer-divider-bg: var(--v2-warning-bg);
    --transfer-divider-ring: var(--v2-warning-border);
    --transfer-divider-fg: var(--v2-warning-text);
    --transfer-divider-line: var(--v2-warning-border);
}

/* ------------------------------------------------------------------
 * Booking transcript callouts
 *
 * Two shapes: dividers for `book_calendar_appointment` / `book_demo`
 * attempts (mirrors the transfer divider — start + end pair) and
 * compact event pills for atomic events (lookup, SMS link send, gated
 * availability checks). Visually distinct from transfer dividers via a
 * teal start tone so the operator can spot booking flow at a glance,
 * while still falling back to the shared success/warning palette for
 * resolved outcomes (D04, D06).
 * ------------------------------------------------------------------ */
.convos-booking-divider {
    --booking-divider-bg: rgba(20, 184, 166, 0.10);
    --booking-divider-ring: rgba(20, 184, 166, 0.42);
    --booking-divider-fg: #5eead4;
    --booking-divider-line: rgba(20, 184, 166, 0.42);
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
    align-self: stretch;
    margin: var(--v2-space-3) 0 var(--v2-space-2);
    cursor: pointer;
    color: var(--booking-divider-fg);
}

.convos-booking-divider--start + .convos-booking-divider--end {
    margin-top: calc(var(--v2-space-1) * -1);
}

.convos-booking-divider-line {
    flex: 1;
    height: 1px;
    background: var(--booking-divider-line);
}

.convos-booking-divider-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: var(--v2-radius-full);
    border: 1px solid var(--booking-divider-ring);
    background: var(--booking-divider-bg);
    font-size: var(--v2-text-xs);
    font-weight: 600;
    letter-spacing: var(--v2-tracking-wide);
    text-transform: uppercase;
    color: var(--booking-divider-fg);
}

.convos-booking-divider-label svg { flex-shrink: 0; }

.convos-booking-divider-time {
    color: var(--v2-fg-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.convos-booking-divider-chip {
    color: var(--v2-fg-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 2px 8px;
    border-radius: var(--v2-radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--v2-border);
}

.convos-booking-divider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
    animation: convos-transfer-dot-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .convos-booking-divider-dot { animation: none; }
}

.convos-booking-divider:hover .convos-booking-divider-label {
    filter: brightness(1.08);
}

.convos-booking-divider--start {
    --booking-divider-bg: rgba(20, 184, 166, 0.10);
    --booking-divider-ring: rgba(20, 184, 166, 0.42);
    --booking-divider-fg: #5eead4;
    --booking-divider-line: rgba(20, 184, 166, 0.42);
}

.convos-booking-divider--success {
    --booking-divider-bg: var(--v2-success-bg);
    --booking-divider-ring: var(--v2-success-border);
    --booking-divider-fg: var(--v2-success-text);
    --booking-divider-line: var(--v2-success-border);
}

/* Degraded success: amber to flag downstream warnings without alarming. */
.convos-booking-divider--success.is-degraded {
    --booking-divider-bg: rgba(251, 191, 36, 0.10);
    --booking-divider-ring: rgba(251, 191, 36, 0.4);
    --booking-divider-fg: #fbbf24;
    --booking-divider-line: rgba(251, 191, 36, 0.4);
}

.convos-booking-divider--failure {
    --booking-divider-bg: var(--v2-warning-bg);
    --booking-divider-ring: var(--v2-warning-border);
    --booking-divider-fg: var(--v2-warning-text);
    --booking-divider-line: var(--v2-warning-border);
}

/* --- Atomic booking events: lookup, SMS link send, availability check --- */
.convos-booking-event {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: var(--v2-space-2) 0;
    padding: 4px 10px;
    border-radius: var(--v2-radius-full);
    border: 1px solid var(--v2-border);
    background: rgba(255, 255, 255, 0.02);
    font-size: var(--v2-text-xs);
    color: var(--v2-fg-muted);
    cursor: pointer;
}

.convos-booking-event svg { flex-shrink: 0; }

.convos-booking-event strong {
    color: var(--v2-fg);
    font-weight: 600;
    letter-spacing: var(--v2-tracking-wide);
    text-transform: uppercase;
    font-size: var(--v2-text-xs);
}

.convos-booking-event-time {
    color: var(--v2-fg-muted);
    font-weight: 500;
}

.convos-booking-event-chip {
    color: var(--v2-fg-muted);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--v2-radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--v2-border);
}

.convos-booking-event--info {
    border-color: rgba(20, 184, 166, 0.32);
    color: #5eead4;
}
.convos-booking-event--info strong { color: #5eead4; }

.convos-booking-event--success {
    border-color: var(--v2-success-border);
    color: var(--v2-success-text);
}
.convos-booking-event--success strong { color: var(--v2-success-text); }

.convos-booking-event--failure {
    border-color: var(--v2-warning-border);
    color: var(--v2-warning-text);
}
.convos-booking-event--failure strong { color: var(--v2-warning-text); }

.convos-booking-event--neutral {
    border-color: var(--v2-border);
    color: var(--v2-fg-muted);
}

.convos-booking-event:hover {
    filter: brightness(1.08);
}

.convos-msg.agent.to-recipient .convos-msg-bubble {
    background: var(--v2-accent-subtle);
    color: var(--v2-accent-text);
    border: 1px solid var(--v2-accent-ring);
}

.convos-msg.agent.to-recipient .convos-msg-label {
    color: var(--v2-accent-text);
}


/* --- Audio Player (inside Recording card) --- */
.convos-audio-footer {
    flex-shrink: 0;
    padding: var(--v2-space-3) var(--v2-space-4);
    transition: padding var(--v2-duration-fast);
}

.convos-audio-player {
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
}

.convos-audio-play {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-radius-full);
    background: var(--v2-accent);
    color: white;
    cursor: pointer;
    transition: background var(--v2-duration-fast), width var(--v2-duration-fast), height var(--v2-duration-fast);
    flex-shrink: 0;
    border: none;
    padding: 0;
}

.convos-audio-play:hover {
    background: var(--v2-accent-hover);
}

.convos-audio-play svg {
    width: 20px;
    height: 20px;
    transition: width var(--v2-duration-fast), height var(--v2-duration-fast);
}

.convos-audio-track {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
}

.convos-audio-progress {
    flex: 1;
    height: 6px;
    background: var(--v2-surface);
    border-radius: var(--v2-radius-full);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.convos-audio-progress-fill {
    height: 100%;
    background: var(--v2-accent);
    border-radius: var(--v2-radius-full);
    width: 0%;
    transition: width 100ms linear;
}

.convos-audio-time {
    font-size: var(--v2-text-xs);
    color: var(--v2-fg-muted);
    font-variant-numeric: tabular-nums;
    font-family: var(--v2-font-mono);
    white-space: nowrap;
    min-width: 75px;
    text-align: center;
}


/* === COLUMN 3: INFO PANEL === */
.convos-info-panel {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--v2-border);
    background: var(--v2-bg-body);
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
}

[data-ref="info-view"] {
    padding: var(--v2-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-4);
}

[data-ref="info-view"].hidden {
    display: none !important;
}

/* Caller name */
.convos-info-caller {
    font-size: var(--v2-text-xl);
    font-weight: 600;
    color: var(--v2-fg);
    word-wrap: break-word;
    line-height: var(--v2-leading-tight);
    margin-bottom: calc(-1 * var(--v2-space-2));
}

/* Phone row */
.convos-info-phone-row {
    display: flex;
    align-items: center;
    gap: var(--v2-space-2);
    padding-bottom: var(--v2-space-2);
    border-bottom: 1px solid var(--v2-border);
}

.convos-info-phone {
    font-size: var(--v2-text-base);
    color: var(--v2-fg-muted);
    font-family: var(--v2-font-mono);
}

.convos-info-copy-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v2-radius-sm);
    border: none;
    background: transparent;
    color: var(--v2-fg-muted);
    cursor: pointer;
    transition: all var(--v2-duration-fast);
    padding: 0;
    flex-shrink: 0;
}

.convos-info-copy-btn svg {
    width: 16px;
    height: 16px;
}

.convos-info-copy-btn:hover {
    background: var(--v2-surface-hover);
    color: var(--v2-fg);
}

/* Meta: category + date + duration */
.convos-info-meta {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-2);
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
    padding-bottom: var(--v2-space-4);
    border-bottom: 1px solid var(--v2-border);
}

.convos-info-meta .v2-badge {
    font-size: var(--v2-text-xs);
    align-self: flex-start;
}

.convos-info-meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v2-space-2);
}

/* Actions in info panel — one row that scales to 3 or 4 buttons.
   Stacked icon-over-label so each cell stays narrow but breathable. */
.convos-info-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--v2-space-2);
    padding-bottom: var(--v2-space-4);
    border-bottom: 1px solid var(--v2-border);
}

.convos-info-actions.no-border-bottom {
    border-bottom: none;
    padding-bottom: 0;
}

.convos-info-actions .convos-action-btn {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 8px 4px;
    gap: 4px;
    flex-direction: column;
    border-radius: var(--v2-radius-md);
}

.convos-info-actions .convos-action-label {
    font-size: var(--v2-text-xs);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Comment in info panel */
.convos-info-comment {
    display: none;
    flex-direction: column;
    gap: var(--v2-space-2);
    padding-bottom: var(--v2-space-4);
    border-bottom: 1px solid var(--v2-border);
}

.convos-info-comment.no-border-bottom {
    border-bottom: none;
    padding-bottom: 0;
}

.convos-info-comment.visible {
    display: flex;
}

.convos-info-comment .v2-btn {
    align-self: flex-end;
    font-size: var(--v2-text-xs);
    padding: 4px 12px;
    height: 28px;
}

.convos-info-comment-input {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--v2-text-sm);
    font-family: var(--v2-font-sans);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    background: var(--v2-bg-surface);
    color: var(--v2-fg);
    resize: vertical;
    min-height: 72px;
    line-height: var(--v2-leading-normal);
    box-sizing: border-box;
}

.convos-info-comment-input:focus {
    outline: none;
    border-color: var(--v2-border-accent);
    box-shadow: 0 0 0 2px var(--v2-accent-ring);
}

/* Lead data in info panel */
.convos-info-lead-section {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-3);
}

.convos-info-lead-title {
    font-size: var(--v2-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--v2-tracking-wide);
    color: var(--v2-fg-dim);
}

.convos-info-lead-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.convos-info-lead-label {
    font-size: var(--v2-text-xs);
    font-weight: 500;
    color: var(--v2-fg-muted);
}

.convos-info-lead-value {
    font-size: var(--v2-text-sm);
    color: var(--v2-fg);
    word-break: break-word;
}

/* Contact link */
.convos-info-contact {
    padding: var(--v2-space-3);
    background: var(--v2-accent-subtle);
    border: 1px solid var(--v2-border-accent);
    border-radius: var(--v2-radius-md);
    font-size: var(--v2-text-sm);
    color: var(--v2-accent-text);
}

.convos-info-contact a {
    color: var(--v2-accent-text);
    text-decoration: none;
    font-weight: 500;
}

.convos-info-contact a:hover {
    text-decoration: underline;
}


/* === EMPTY STATES === */
.convos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--v2-space-12);
    text-align: center;
    height: 100%;
}

.convos-empty-icon {
    width: 64px;
    height: 64px;
    color: var(--v2-fg-dim);
    opacity: 0.3;
    margin-bottom: var(--v2-space-4);
}

.convos-empty-title {
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-fg);
    margin-bottom: var(--v2-space-2);
}

.convos-empty-text {
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
    max-width: 420px;
    line-height: var(--v2-leading-relaxed);
}


/* === VIP BYPASS EMPTY STATE === */
.convos-empty-vip {
    gap: var(--v2-space-3);
    position: relative;
}

.convos-back-btn--vip {
    position: absolute;
    top: var(--v2-space-4);
    left: var(--v2-space-4);
    display: none;
}

@media (max-width: 768px) {
    .convos-back-btn--vip {
        display: inline-flex;
    }
}

.convos-empty-vip__caller {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: var(--v2-space-2);
}

.convos-empty-vip__caller .convos-detail-caller-name {
    display: block;
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-fg);
}

.convos-empty-vip__caller .convos-detail-caller-phone {
    display: block;
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
}

.convos-empty-vip__badge {
    display: flex;
    justify-content: center;
}

.convos-empty-vip__icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--v2-vip-bg);
    color: var(--v2-vip-text);
    margin: var(--v2-space-2) 0 var(--v2-space-1);
}

.convos-empty-vip__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-space-3);
    margin-top: var(--v2-space-3);
    font-size: var(--v2-text-sm);
    color: var(--v2-fg-muted);
}


/* === SKELETON LOADING === */
.convos-skeleton-item {
    padding: 14px var(--v2-space-4);
    border-bottom: 1px solid var(--v2-border);
}

.convos-skeleton-line {
    height: 14px;
    border-radius: var(--v2-radius-sm);
    background: linear-gradient(90deg,
        var(--v2-surface) 25%,
        var(--v2-surface-hover) 50%,
        var(--v2-surface) 75%);
    background-size: 200% 100%;
    animation: convos-shimmer 1.5s infinite;
}

.convos-skeleton-line.w-40 { width: 40%; }
.convos-skeleton-line.w-60 { width: 60%; }
.convos-skeleton-line.w-80 { width: 80%; }
.convos-skeleton-line.short { height: 12px; margin-top: 8px; }

@keyframes convos-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* === MOBILE BACK BUTTON === */
.convos-back-btn {
    display: none;
    align-items: center;
    gap: var(--v2-space-2);
    padding: 6px 12px;
    font-size: var(--v2-text-sm);
    font-weight: 500;
    font-family: var(--v2-font-sans);
    color: var(--v2-fg-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    margin-right: auto;
    transition: min-height var(--v2-duration-fast);
}

.convos-back-btn svg {
    width: 16px;
    height: 16px;
}

.convos-back-btn:hover {
    color: var(--v2-fg);
}

.convos-back-btn--spacer {
    visibility: hidden;
    pointer-events: none;
}

.convos-info-back-btn {
    display: none;
    align-items: center;
    gap: var(--v2-space-2);
    padding: var(--v2-space-3) var(--v2-space-4);
    font-size: var(--v2-text-sm);
    font-weight: 500;
    font-family: var(--v2-font-sans);
    color: var(--v2-fg-muted);
    background: var(--v2-bg-body);
    border: none;
    border-bottom: 1px solid var(--v2-border);
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 1;
}

.convos-info-back-btn svg {
    width: 16px;
    height: 16px;
}

.convos-info-back-btn:hover {
    color: var(--v2-fg);
}


/* === RESPONSIVE === */

/* Medium: shrink columns but keep 3-column layout */
@media (max-width: 1280px) {
    .convos-container {
        grid-template-columns: 300px minmax(300px, 1fr) 300px;
    }
}

/* Narrow: collapse info panel — it becomes a slide-in via btn-info-toggle */
@media (max-width: 1024px) {
    .convos-container {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .convos-info-panel {
        display: none;
    }

    .convos-info-panel.mobile-active {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: var(--v2-z-fixed);
        border-left: none;
        background: var(--v2-bg-body);
    }

    .convos-info-back-btn {
        display: inline-flex;
    }
}

/* Mobile-only topbar: conversations has no desktop topbar, but needs one on
   mobile so sidebar-v2.js can inject the hamburger for sidebar access.
   Replicates the v2-shell-topbar centered-title layout (see client-page-shell.css)
   without wrapping the page in a v2-client-page-shell card. */
.v2-topbar--mobile-only { display: none; }
.v2-topbar--mobile-only .v2-shell-topbar-title-wrap {
    flex: 1;
    text-align: center;
    min-width: 0;
}
.v2-topbar--mobile-only .v2-shell-topbar-title {
    margin: 0;
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v2-topbar--mobile-only .v2-shell-topbar-actions {
    min-width: 40px;
}

/* Mobile: single column, detail as overlay */
@media (max-width: 768px) {
    .v2-topbar--mobile-only { display: flex; }

    /* Title now lives in the mobile topbar — hide the duplicate inline heading. */
    .convos-inbox-title { display: none; }

    /* Topbar eats into viewport height on mobile — shrink convos-container to fit */
    .v2-main:has(> .v2-topbar--mobile-only) .convos-container {
        height: calc(100dvh - var(--v2-topbar-height-mobile));
    }
    .v2-main:has(> .v2-topbar--mobile-only).has-convos-welcome .convos-container {
        height: calc(100dvh - var(--v2-topbar-height-mobile) - var(--convos-welcome-offset, 0px));
    }
    .v2-impersonation-banner ~ .v2-layout .v2-main:has(> .v2-topbar--mobile-only) .convos-container {
        height: calc(100dvh - 48px - var(--v2-topbar-height-mobile));
    }
    .v2-impersonation-banner ~ .v2-layout .v2-main:has(> .v2-topbar--mobile-only).has-convos-welcome .convos-container {
        height: calc(100dvh - 48px - var(--v2-topbar-height-mobile) - var(--convos-welcome-offset, 0px));
    }
    body:has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .v2-main:has(> .v2-topbar--mobile-only) .convos-container {
        height: calc(100dvh - var(--v2-trial-banner-height, 64px) - var(--v2-topbar-height-mobile));
    }
    body:has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .v2-main:has(> .v2-topbar--mobile-only).has-convos-welcome .convos-container {
        height: calc(100dvh - var(--v2-trial-banner-height, 64px) - var(--v2-topbar-height-mobile) - var(--convos-welcome-offset, 0px));
    }
    body:has(> .v2-impersonation-banner):has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .v2-main:has(> .v2-topbar--mobile-only) .convos-container {
        height: calc(100dvh - 48px - var(--v2-trial-banner-height, 64px) - var(--v2-topbar-height-mobile));
    }
    body:has(> .v2-impersonation-banner):has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .v2-layout .v2-main:has(> .v2-topbar--mobile-only).has-convos-welcome .convos-container {
        height: calc(100dvh - 48px - var(--v2-trial-banner-height, 64px) - var(--v2-topbar-height-mobile) - var(--convos-welcome-offset, 0px));
    }

    .convos-container {
        grid-template-columns: 1fr;
    }

    .convos-detail {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Override desktop base rule's `height: 100%` so top/bottom define the
           box. Otherwise, when a banner shifts top down (trial 56px / impersonation
           48px / both stacked), the panel is still 100vh tall and overshoots the
           viewport, clipping the last N pixels of the transcript below the fold. */
        height: auto;
        z-index: var(--v2-z-fixed);
        background: var(--v2-bg-body);
    }

    .convos-detail.mobile-active {
        display: flex;
    }

    /* Pinned banners (z-index 9998/9999) sit above the fullscreen detail
       overlay (z-index 300). Push the detail down so its header isn't
       covered. */
    body:has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .convos-detail {
        top: var(--v2-trial-banner-height, 64px);
    }
    body:has(> .v2-impersonation-banner) .convos-detail {
        top: 48px;
    }
    body:has(> .v2-impersonation-banner):has(> .v2-trial-banner:not(.is-dismissed):not(.is-hidden)) .convos-detail {
        top: calc(48px + var(--v2-trial-banner-height, 64px));
    }

    .convos-back-btn {
        display: inline-flex;
        min-height: 44px;
    }

    .convos-detail-header {
        padding: var(--v2-space-3) var(--v2-space-4);
    }

    /* Scrolled state: shrink top bar + sticky audio player to claw back
       vertical space once the sticky Summary + Recording cards pin to the
       top of the detail body. The class is toggled on .convos-detail by
       the scroll listener so a single state drives both shrink animations. */
    .convos-detail.is-scrolled .convos-detail-header {
        padding-top: var(--v2-space-1);
        padding-bottom: var(--v2-space-1);
    }

    .convos-detail.is-scrolled .convos-detail-caller-name {
        font-size: var(--v2-text-base);
    }

    .convos-detail.is-scrolled .convos-detail-caller-phone {
        max-height: 0;
        opacity: 0;
    }

    .convos-detail.is-scrolled .convos-back-btn {
        min-height: 36px;
    }

    .convos-detail.is-scrolled .convos-audio-footer {
        padding: var(--v2-space-2) var(--v2-space-3);
    }

    .convos-detail.is-scrolled .convos-audio-play {
        width: 28px;
        height: 28px;
    }

    .convos-detail.is-scrolled .convos-audio-play svg {
        width: 14px;
        height: 14px;
    }

    .convos-detail-body {
        padding: var(--v2-space-4);
    }

    .convos-section-card {
        padding: var(--v2-space-3);
    }

    .convos-agent-sms-state {
        align-items: flex-start;
        flex-direction: column;
    }

    .convos-agent-sms-reply-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--v2-space-1);
    }

    .convos-agent-sms-time {
        white-space: normal;
    }

    .convos-agent-sms-media-grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    }

    /* Raise tab tap targets to 44px minimum */
    .convos-tab {
        min-height: 44px;
        padding: 10px 12px;
    }

    /* Raise action buttons to 44px */
    .convos-action-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .convos-action-btn.convos-action-btn-labeled {
        height: 44px;
        padding: 0 14px;
    }

    /* Raise search input to 44px */
    .convos-search-input {
        min-height: 44px;
        padding: 10px 12px 10px 34px;
    }

    /* Raise call list items for touch */
    .convos-call-item {
        min-height: 44px;
    }
}

/* Desktop: info panel shows caller name, phone, badge, time, and actions in
   the right sidebar. Hide the redundant detail header and top row so the
   Summary card sits at the top of the detail body. Mirrors the info panel's
   own breakpoint at max-width: 1024px. */
@media (min-width: 1025px) {
    .convos-detail-header,
    .convos-detail-top {
        display: none;
    }
}


/* === RATING MODAL === */
.convos-rating-buttons {
    display: flex;
    gap: var(--v2-space-3);
}

.convos-rating-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--v2-space-2);
    padding: var(--v2-space-5) var(--v2-space-4);
    border-radius: var(--v2-radius-lg);
    border: 2px solid var(--v2-border);
    background: transparent;
    color: var(--v2-fg-muted);
    font-family: var(--v2-font-sans);
    font-size: var(--v2-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--v2-duration-fast);
}

.convos-rating-btn:hover {
    border-color: var(--v2-border-hover);
    background: var(--v2-surface-hover);
    color: var(--v2-fg);
}

.convos-rating-btn-up.active {
    border-color: var(--v2-success-border);
    background: var(--v2-success-bg);
    color: var(--v2-success-text);
}

.convos-rating-btn-down.active {
    border-color: var(--v2-error-border);
    background: var(--v2-error-bg);
    color: var(--v2-error-text);
}

/* Mobile: render the rating modal as a bottom sheet */
@media (max-width: 768px) {
    .v2-modal-backdrop.active:has(.v2-modal.convos-rating-sheet) {
        align-items: flex-end;
        padding: 0;
    }

    .v2-modal.convos-rating-sheet {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--v2-radius-xl) var(--v2-radius-xl) 0 0;
        border-bottom: 0;
        transform: translateY(100%);
        transition: transform var(--v2-duration-normal) var(--v2-ease-out);
    }

    .v2-modal-backdrop.active .v2-modal.convos-rating-sheet {
        transform: translateY(0);
    }
}


/* === BULK SELECT === */

/* Sticky action bar — sits between header and scrollable list */
.convos-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-space-3);
    padding: var(--v2-space-2) var(--v2-space-4);
    background: var(--v2-accent-subtle);
    border-bottom: 1px solid var(--v2-border-accent);
    flex-shrink: 0;
}

.convos-bulk-bar.hidden {
    display: none;
}

.convos-bulk-left {
    display: flex;
    align-items: center;
    gap: var(--v2-space-3);
}

.convos-bulk-select-all {
    display: flex;
    align-items: center;
    gap: var(--v2-space-2);
    font-size: var(--v2-text-xs);
    font-weight: 500;
    color: var(--v2-accent-text);
    cursor: pointer;
}

.convos-bulk-deselect {
    font-size: var(--v2-text-xs);
    font-weight: 500;
    font-family: var(--v2-font-sans);
    color: var(--v2-fg-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--v2-duration-fast);
}

.convos-bulk-deselect:hover {
    color: var(--v2-fg);
}

.convos-bulk-select-all input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--v2-border-strong);
    border-radius: 4px;
    background: var(--v2-bg-surface);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all var(--v2-duration-fast);
}

.convos-bulk-select-all input[type="checkbox"]:checked {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
}

.convos-bulk-select-all input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid var(--v2-fg-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.convos-bulk-select-all input[type="checkbox"]:indeterminate {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
}

.convos-bulk-select-all input[type="checkbox"]:indeterminate::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 5px;
    width: 8px;
    height: 2px;
    background: var(--v2-fg-on-accent);
    border-radius: 1px;
}

.convos-bulk-actions {
    display: flex;
    gap: var(--v2-space-2);
}

.convos-bulk-actions .convos-action-btn {
    height: 30px;
    font-size: var(--v2-text-xs);
}

.convos-bulk-actions .convos-action-btn svg {
    width: 14px;
    height: 14px;
}

/* Custom checkbox on each card */
.convos-bulk-checkbox-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    margin-right: var(--v2-space-2);
}

.convos-bulk-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--v2-border-strong);
    border-radius: 4px;
    background: var(--v2-bg-surface);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all var(--v2-duration-fast);
}

.convos-bulk-checkbox:hover {
    border-color: var(--v2-accent);
}

.convos-bulk-checkbox:checked {
    background: var(--v2-accent);
    border-color: var(--v2-accent);
}

.convos-bulk-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid var(--v2-fg-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Hide the visual span — only used as click target extension */
.convos-bulk-checkbox-visual {
    display: none;
}

.convos-call-item.bulk-selected {
    background: var(--v2-accent-subtle);
}


/* === LIFECYCLE — live / failed / stale ===
   Locked UX pattern (plan T08–T10, 2026-05-01): 3px left accent strip,
   soft tint, lifecycle pill replacing the badge slot, lifecycle card
   replacing summary/transcript. Same building blocks; only the state
   token + copy differ. Use existing v2 tokens — no bespoke hex. */

/* Inbox row — accent strip + soft tint */
.convos-call-item--lifecycle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
}

.convos-call-item--lifecycle-live::before { background: var(--v2-success); }
.convos-call-item--lifecycle-failed::before { background: var(--v2-warning); }
.convos-call-item--lifecycle-stale::before { background: var(--v2-fg-muted); }

.convos-call-item--lifecycle-live { background: var(--v2-success-bg); }
.convos-call-item--lifecycle-failed { background: var(--v2-warning-bg); }
.convos-call-item--lifecycle-stale { background: rgba(156, 163, 175, 0.06); }

.convos-call-item--lifecycle-live:hover { background: var(--v2-success-bg); }
.convos-call-item--lifecycle-failed:hover { background: var(--v2-warning-bg); }
.convos-call-item--lifecycle-stale:hover { background: rgba(156, 163, 175, 0.10); }

.convos-call-item--lifecycle.active {
    background: var(--v2-surface-active);
}

/* Live row time slot reads "Live · MM:SS" — match the pill green for
   visual cohesion. */
.convos-call-item--lifecycle-live .convos-call-time {
    color: var(--v2-success);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Lifecycle pill (replaces badge slot) */
.convos-lifecycle-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--v2-space-1);
    padding: 2px var(--v2-space-2);
    border-radius: var(--v2-radius-full, 999px);
    font-size: var(--v2-text-xs);
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid;
    background: transparent;
}

.convos-lifecycle-pill--live {
    color: var(--v2-success);
    border-color: var(--v2-success-border);
    background: var(--v2-success-bg);
}

.convos-lifecycle-pill--failed {
    color: var(--v2-warning);
    border-color: var(--v2-warning-border);
    background: var(--v2-warning-bg);
}

.convos-lifecycle-pill--stale {
    color: var(--v2-fg-muted);
    border-color: var(--v2-border-strong);
    background: rgba(156, 163, 175, 0.10);
}

/* Pulsing dot — live state only, CSS-only (no JS animation). */
.convos-lifecycle-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v2-success);
    box-shadow: 0 0 0 0 var(--v2-success-border);
    animation: convos-lifecycle-pulse 1.4s ease-out infinite;
    flex-shrink: 0;
}

@keyframes convos-lifecycle-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .convos-lifecycle-pulse {
        animation: none;
    }
}

/* Detail-pane meta when live — single "Live · MM:SS" counter. */
.convos-detail-meta-live {
    color: var(--v2-success);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Lifecycle card (replaces summary/transcript for non-complete states) */
.convos-lifecycle-card {
    border-width: 1px;
    border-style: solid;
    gap: var(--v2-space-2);
}

.convos-lifecycle-card--live {
    border-color: var(--v2-success-border);
    background: var(--v2-success-bg);
}
.convos-lifecycle-card--failed {
    border-color: var(--v2-warning-border);
    background: var(--v2-warning-bg);
}
.convos-lifecycle-card--stale {
    border-color: var(--v2-border-strong);
    background: rgba(156, 163, 175, 0.06);
}

.convos-lifecycle-card-heading {
    font-size: var(--v2-text-base);
    font-weight: 700;
    line-height: var(--v2-leading-tight);
}
.convos-lifecycle-card--live .convos-lifecycle-card-heading { color: var(--v2-success); }
.convos-lifecycle-card--failed .convos-lifecycle-card-heading { color: var(--v2-warning); }
.convos-lifecycle-card--stale .convos-lifecycle-card-heading { color: var(--v2-fg-muted); }

.convos-lifecycle-card-body {
    font-size: var(--v2-text-sm);
    line-height: var(--v2-leading-relaxed);
    color: var(--v2-fg);
}

/* Live-only shimmer skeleton lines under the body — implies incoming data. */
.convos-lifecycle-shimmer {
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-2);
    padding-top: var(--v2-space-2);
}
.convos-lifecycle-shimmer.hidden {
    display: none;
}
.convos-lifecycle-shimmer-line {
    display: block;
    height: 8px;
    border-radius: var(--v2-radius-sm, 4px);
    background: linear-gradient(
        90deg,
        rgba(16, 185, 129, 0.10) 0%,
        rgba(16, 185, 129, 0.22) 50%,
        rgba(16, 185, 129, 0.10) 100%
    );
    background-size: 200% 100%;
    animation: convos-lifecycle-shimmer 1.6s ease-in-out infinite;
}
.convos-lifecycle-shimmer-line:nth-child(2) { width: 88%; }
.convos-lifecycle-shimmer-line:nth-child(3) { width: 64%; }

@keyframes convos-lifecycle-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .convos-lifecycle-shimmer-line { animation: none; }
}

/* Real disabled state for action buttons (UX spec: no opacity hack). */
.convos-action-btn:disabled,
.convos-action-btn.convos-action-btn--disabled {
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}


/* === Inbox web-call modal (T08–T13) ===
   Modal markup lives in app/conversations.html. JS controller (T10) toggles [data-state] on the inner wrapper
   and the [hidden] attr on .convos-webcall-status / .convos-webcall-error to
   swap between connecting/active/error views. */

.convos-webcall-modal {
    /* Native <dialog>.showModal() escapes ancestor containing blocks via the
       top-layer, so positioning is viewport-relative. We pin explicitly so
       the dialog renders centered even if a future UA stylesheet stops
       defaulting `inset: 0; margin: auto`. */
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--v2-fg);
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-lg);
    overflow: hidden;
    font-family: inherit;
}

.convos-webcall-modal::backdrop {
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(2px);
}

.convos-webcall-modal-inner {
    background: var(--v2-bg-elevated);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 28px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.convos-webcall-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.convos-webcall-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-fg);
}

.convos-webcall-modal-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--v2-fg-muted);
    min-height: 1.4em;
}

.convos-webcall-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 160px;
}

.convos-webcall-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
}

.convos-webcall-status[hidden] {
    display: none;
}

/* Tip card: tells the user what web calls do (and don't) cover, plus the
   real PSTN numbers they need to test transfers / SMS. Org and user phone
   strings are populated by WebCallSession._renderTipCard. */
.convos-webcall-tip {
    width: 100%;
    background: var(--v2-bg-subtle, rgba(148, 163, 184, 0.08));
    border: 1px solid var(--v2-border-subtle, rgba(148, 163, 184, 0.18));
    border-radius: var(--v2-radius-md, 12px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.convos-webcall-tip-line {
    margin: 0;
    font-size: 13px;
    color: var(--v2-fg-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    line-height: 1.4;
}

.convos-webcall-tip-line--numbers {
    gap: 4px 16px;
}

.convos-webcall-tip-prefix,
.convos-webcall-tip-and,
.convos-webcall-tip-label {
    color: var(--v2-fg-muted);
}

.convos-webcall-tip-row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.convos-webcall-tip-row[hidden] {
    display: none;
}

.convos-webcall-tip-number {
    font-weight: 600;
    color: var(--v2-fg);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.convos-webcall-tip-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.convos-webcall-tip-pill svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.convos-webcall-tip-pill--call {
    background: color-mix(in srgb, #f59e0b 20%, transparent);
    color: #f59e0b;
}

.convos-webcall-tip-pill--text {
    background: color-mix(in srgb, #38bdf8 20%, transparent);
    color: #38bdf8;
}

.convos-webcall-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 64px;
    width: 100%;
    /* Edge fade so the waveform looks bounded by ambient breath rather than
       a hard rectangle. Decorative; safe to drop on browsers without mask. */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.convos-webcall-waveform-bar {
    display: block;
    width: 3px;
    height: 6px;
    border-radius: 999px;
    background: var(--v2-webcall-wave, #ec4899);
    flex-shrink: 0;
    /* Set per-bar via inline `--bar-delay` from JS so we don't need
       nth-child rules for every bar. */
    animation-name: convos-webcall-bar-idle;
    animation-duration: 1.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--bar-delay, 0s);
}

.convos-webcall-modal-inner[data-state="active"] .convos-webcall-waveform.is-talking .convos-webcall-waveform-bar {
    animation-name: convos-webcall-bar-talking;
    animation-duration: 0.6s;
}

.convos-webcall-modal-inner[data-state="error"] .convos-webcall-waveform-bar {
    animation: none;
    opacity: 0.4;
}

@keyframes convos-webcall-bar-idle {
    0%, 100% { height: 6px;  opacity: 0.55; }
    50%      { height: 24px; opacity: 1; }
}

@keyframes convos-webcall-bar-talking {
    0%, 100% { height: 6px;  }
    25%      { height: 38px; }
    50%      { height: 14px; }
    75%      { height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .convos-webcall-waveform-bar,
    .convos-webcall-modal-inner[data-state="active"] .convos-webcall-waveform.is-talking .convos-webcall-waveform-bar {
        animation: none;
        height: 14px;
    }
}

.convos-webcall-modal-footer {
    display: flex;
    justify-content: center;
}

.convos-webcall-end-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 999px;
    border: 1px solid var(--v2-error-border);
    background: var(--v2-error);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.convos-webcall-end-btn:hover {
    background: color-mix(in srgb, var(--v2-error) 85%, #000);
}

.convos-webcall-end-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.convos-webcall-end-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

.convos-webcall-error {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.convos-webcall-error[hidden] {
    display: none;
}

.convos-webcall-error-message {
    margin: 0;
    font-size: 14px;
    color: var(--v2-error-text);
    line-height: 1.5;
}

.convos-webcall-error-fallback {
    margin: 0;
    font-size: 14px;
    color: var(--v2-fg-muted);
    line-height: 1.5;
}

.convos-webcall-error-phone {
    color: var(--v2-fg);
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.convos-webcall-error-phone:hover {
    color: var(--v2-accent-text);
}

.convos-webcall-error-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* Hide the End-call footer button while the error region is visible — the
   error block has its own Try again / Close actions. */
.convos-webcall-modal-inner[data-state="error"] .convos-webcall-modal-footer {
    display: none;
}

@media (max-width: 480px) {
    .convos-webcall-modal-inner {
        padding: 22px 18px;
    }
}


/* === UTILITY === */
.hidden { display: none !important; }