/* --- 1. DESIGN SYSTEM & VARIABLES ---
   Tokens moved to styles/tokens.css (Task 287). Loaded via <link> in
   index.html before this stylesheet. Dark-mode overrides also live in
   tokens.css. */

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE (Task 178)
   Segmented control in profile dropdown
   ═══════════════════════════════════════════════════════════════ */

.theme-toggle {
    display: flex;
    gap: 2px;
    padding: 8px;
    border-top: 1px solid var(--border);
    background-color: var(--bg-hover);
    border-radius: 0 0 8px 8px;
}

.theme-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.theme-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-card);
}

.theme-btn.active {
    color: var(--text-primary);
    background-color: var(--bg-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.theme-btn svg {
    width: 14px;
    height: 14px;
}

/* --- 2. RESET & BASE STYLES --- */
* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-app);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Existing Client Document picker (Task 609). Modal depth and general chrome
   remain owned by the shared modal-shell primitives. */
.existing-client-document-picker__panel {
    width: min(720px, 100%);
}

.existing-client-document-picker__body {
    min-height: min(520px, 70vh);
}

.existing-client-document-picker__search-field {
    flex: 0 0 auto;
}

.existing-client-document-picker__status {
    min-height: var(--line-height-normal);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.existing-client-document-picker__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    padding-inline-end: var(--space-1);
    min-height: 0;
    max-height: 420px;
    overflow-y: auto;
}

.existing-client-document-picker__row-control {
    grid-template-columns: auto auto minmax(0, 1fr);
}

.existing-client-document-picker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.existing-client-document-picker__metadata {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    overflow-wrap: anywhere;
}

.existing-client-document-picker__disabled-reason {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.existing-client-document-picker__retry {
    align-self: flex-start;
}

@media (max-width: 560px) {
    .existing-client-document-picker__body {
        min-height: min(440px, 65vh);
    }

    .existing-client-document-picker__row {
        padding: var(--space-2);
    }
}

/* Client administration purge controls (Task 544). */
.client-admin__panel { max-width: 520px; }
.client-admin-trigger {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background-color: transparent;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}
.client-admin-trigger:hover,
.client-admin-trigger:focus-visible {
    color: var(--text-primary);
    background-color: var(--bg-active);
}
.client-admin-trigger__icon {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: -5px 0 currentColor, 5px 0 currentColor;
}
.client-purge-status {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}

@media (max-width: 768px) {
    .client-admin__panel { max-width: calc(100vw - 24px); }
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* --- 3. LAYOUT CONTAINER --- */
.app-container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* --- 3b. APP VIEW SWITCHER RAIL (Task 483) --- */
.app-nav {
    width: var(--app-nav-width);
    min-width: var(--app-nav-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    flex-shrink: 0;
}

.app-nav__btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all 0.2s;
}
.app-nav__btn:hover { background-color: var(--bg-hover); color: var(--text-primary); }
.app-nav__btn--active { background-color: var(--bg-active); color: var(--text-primary); }
.app-nav__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-bottom: 4px;
}
.app-nav__brand img { display: block; }

/* App-view switching — data-app-view on .app-container is the single switch
   (stamped ONLY by appNavView). Hidden views keep their DOM/listeners alive
   (recording safety); no unmount path exists by design. */
.app-view-root {
    display: none;
    align-items: center;
    justify-content: center;
}
.app-container[data-app-view="book"] #bookViewRoot { display: flex; flex: 1; min-width: 0; }
.app-container[data-app-view="book"] .sidebar { display: none; }
.app-container[data-app-view="book"] .main-area { display: none; }
.app-container[data-app-view="inbox"] #inboxViewRoot { display: flex; flex: 1; min-width: 0; }
.app-container[data-app-view="inbox"] .sidebar { display: none; }
.app-container[data-app-view="inbox"] .main-area { display: none; }

/* --- 4. LEFT SIDEBAR --- */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.icon-btn {
    padding: 6px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all 0.2s;
}
.icon-btn:hover { background-color: var(--bg-hover); color: var(--text-primary); }

/* ─── Participant Filter (Task 189) ──────────────────────── */
.sidebar-filter {
    padding: 10px 12px 6px;
}

.sidebar-filter__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-filter__icon {
    position: absolute;
    left: 10px;
    color: var(--text-tertiary, var(--text-secondary));
    pointer-events: none;
    transition: color 0.2s;
}

.sidebar-filter__input-wrap:focus-within .sidebar-filter__icon {
    color: var(--text-secondary);
}

.sidebar-filter__input {
    width: 100%;
    padding: 8px 32px 8px 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.sidebar-filter__input:hover {
    background: var(--bg-active, var(--bg-hover));
}

.sidebar-filter__input:focus {
    background: var(--bg-primary);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.sidebar-filter__input::placeholder {
    color: var(--text-tertiary, var(--text-secondary));
}

.sidebar-filter__clear {
    position: absolute;
    right: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--text-tertiary, var(--text-secondary));
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.sidebar-filter__clear:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.conversation-item {
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid rgba(128, 128, 128, 0.15);
    transition: all 0.2s ease;
    position: relative;
}

.conversation-item:hover {
    background-color: var(--bg-hover);
}

.conversation-item.active {
    background-color: var(--bg-card);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

.conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.conv-id {
    font-weight: 500;
    color: var(--text-primary);
    margin-right: auto;
    min-width: 0;
}
.conv-id-text {
    font: inherit;
}
.conv-date { font-size: 12px; color: var(--text-tertiary); }

.hover-marquee {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.hover-marquee__text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
}

.hover-marquee-trigger:hover .hover-marquee--overflowing .hover-marquee__text,
.hover-marquee--overflowing:hover .hover-marquee__text {
    animation: hover-marquee-scroll var(--hover-marquee-duration, 2s) linear infinite alternate;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

.hover-marquee--auto.hover-marquee--overflowing .hover-marquee__text {
    animation: hover-marquee-scroll var(--hover-marquee-duration, 2s) linear infinite alternate;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

.hover-marquee--auto.hover-marquee--overflowing:hover .hover-marquee__text,
.hover-marquee--auto.hover-marquee--overflowing:focus-within .hover-marquee__text {
    animation-play-state: paused;
}

@keyframes hover-marquee-scroll {
    0%, 15% { transform: translateX(0); }
    85%, 100% { transform: translateX(var(--hover-marquee-offset, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    .hover-marquee-trigger:hover .hover-marquee--overflowing .hover-marquee__text,
    .hover-marquee--overflowing:hover .hover-marquee__text,
    .hover-marquee--auto.hover-marquee--overflowing .hover-marquee__text {
        animation: none;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: none;
    }
}

/* Task 183: Sidebar activity indicator */
.conv-activity-indicator {
    flex-shrink: 0;
    margin-left: 6px;
    font-size: 12px;
    line-height: 1;
}
.conv-activity-indicator.spinner-small {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}
.conv-activity-success { color: var(--accent-green); font-weight: 700; }
.conv-activity-error { color: var(--accent-red); font-weight: 700; }

.conv-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Badge keeps its right-edge position now that counts sit beside the date */
.conv-meta .status-badge {
    margin-left: auto;
}

.status-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-badge.completed { background-color: var(--bg-active); color: var(--text-secondary); }
.status-badge.active { background-color: var(--accent-green-bg); color: var(--accent-green); }
.status-badge.recording { background-color: var(--accent-red-bg); color: var(--accent-red); animation: pulse 2s infinite; }
/* Email direction (inbound/outbound) — understated variant of the badge standard */
.status-badge.email-direction-badge { background-color: var(--bg-hover); color: var(--text-secondary); }

/* Recording conversation card indicator */
.conversation-item.recording {
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4);
    animation: recording-glow 2s ease-in-out infinite;
}
@keyframes recording-glow {
    0%, 100% { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 12px 4px rgba(239, 68, 68, 0.5); }
}
.conversation-item.recording .conv-id::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent-red);
    border-radius: 50%;
    margin-left: 8px;
    animation: pulse 2s infinite;
}

.delete-trigger {
    opacity: 0;
    color: var(--text-tertiary);
    font-size: 18px;
    padding: 2px;
    line-height: 1;
}
.conversation-item:hover .delete-trigger,
.delete-trigger:focus-visible { opacity: 1; }
.delete-trigger:hover { color: var(--accent-red); }
@media (hover: none) {
    .delete-trigger { opacity: 1; }
}

/* Task 254: Client cards in mixed sidebar */
.client-card {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: rgba(37, 99, 235, 0.06);
    transition: all 0.2s ease;
}
.client-card:hover {
    background-color: rgba(37, 99, 235, 0.1);
}
.client-card.active {
    background-color: rgba(37, 99, 235, 0.12);
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}
.client-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.client-avatar {
    flex: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--accent-blue-bg);
    color: var(--accent-blue);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.client-name {
    flex: 1;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
/* Task 395: sidebar draft-client demarcation */
.sidebar-draft-badge {
    flex: none;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--accent-amber-bg);
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.client-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-tertiary);
}
/* Compact icon+number chips shared by client cards and conversation rows */
.sidebar-counts {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.sidebar-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1;
}
.sidebar-count svg {
    width: 12px;
    height: 12px;
    flex: none;
    color: var(--text-tertiary);
}
.client-last-activity {
    color: var(--text-tertiary);
    font-size: 11.5px;
}
/* Task 254: Client summary placeholder */
.client-summary-placeholder h3 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Dark mode: shift tint to work on dark surfaces */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .client-card { background-color: rgba(96, 165, 250, 0.08); }
    :root:not([data-theme]) .client-card:hover { background-color: rgba(96, 165, 250, 0.13); }
    :root:not([data-theme]) .client-card.active { background-color: rgba(96, 165, 250, 0.16); }
}
html[data-theme="dark"] .client-card { background-color: rgba(96, 165, 250, 0.08); }
html[data-theme="dark"] .client-card:hover { background-color: rgba(96, 165, 250, 0.13); }
html[data-theme="dark"] .client-card.active { background-color: rgba(96, 165, 250, 0.16); }

.loading {
    text-align: center;
    padding: 20px;
    color: var(--text-tertiary);
}

/* --- 4. MAIN CONTENT --- */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background-color: var(--bg-app);
    position: relative;
}

@keyframes pulse-amber {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Gentle opacity "breath" for the actively-syncing icon/pill — intentionally light so it
   recedes rather than demands attention (no box-shadow halo, no scale, no circle). */
@keyframes sync-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Controls */
.controls-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background-color: var(--accent-primary);
    color: var(--accent-text);
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-danger {
    background-color: var(--accent-red-bg);
    color: var(--accent-red);
}
.btn-danger:hover { background-color: #fee2e2; filter: brightness(0.95); }

.recording-icon-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
}

.recording-icon-btn svg {
    width: 16px;
    height: 16px;
}

/* Record trigger — signature control: perfect circle with a red dot */
.recording-icon-btn--record {
    border-radius: var(--radius-pill);
}
.recording-icon-btn--record svg {
    color: var(--accent-red);
}

/* Task 186: Inline button group for pause/resume + stop */
.btn-group { display: flex; gap: 8px; }
.btn-group .btn { flex: 1; }

.btn-outline {
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.btn-outline:hover { border-color: var(--text-secondary); background-color: var(--bg-hover); }

/* Task 171: Secondary button with visible contrast in dark mode */
.btn-secondary {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.btn-secondary:hover {
    background-color: var(--bg-active);
    border-color: var(--text-tertiary);
}

/* Transcript View */
.transcript-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding: 10px;
    overflow: hidden;
    position: relative;
    /* M97: Scroll moved to .tab-content-body */
}

.empty-state {
    flex: 1;  /* M97: Fill available space in flex parent */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    text-align: center;
}
.empty-state h3 { font-size: 18px; color: var(--text-primary); margin-bottom: 8px; }
.empty-state p { margin-bottom: 20px; }

/* Start panel — the no-selection front door. Mirrors the Ask empty state
   (arcs mark + title, card actions, quiet hint). Cards are the agent-home
   anatomy: tinted icon tile + title/description + chevron. Broker-journey
   primaries (create client / pre-renewal) carry a violet accent border;
   recording and upload stay quiet. Tokens only — dark mode falls out of
   tokens.css. Promotion candidate: lift the card anatomy to a primitives.css
   .action-card when a second surface adopts it (rule-of-three). */
.start-panel {
    gap: var(--space-5);
    padding: var(--space-6);
    container-type: inline-size;
}

.start-panel__mark {
    width: 56px;
    height: 56px;
}

.start-panel .start-panel__heading {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

.start-panel__actions {
    display: grid;
    /* Three peer actions share one row when the PANE is wide enough. The
       start-panel container query below responds to pane width rather than
       viewport width (the sidebar and workflow rail make those diverge). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: calc(900px + var(--space-8));
    gap: var(--space-4);
    justify-content: center;
    width: 100%;
}

@container (max-width: 760px) {
    .start-panel__actions {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
}

.start-panel__action {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: var(--space-3);
    padding: var(--space-5);
    white-space: normal;
    border-radius: var(--radius-xl);
    transition: background 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease;
}

/* Quiet-card surface only — primaries get theirs from .card-highlight
   (primitives.css loads first; an unscoped rule here would beat it). */
.start-panel__action:not(.card-highlight) {
    background: var(--bg-card);
    border-color: var(--border);
}

.start-panel__action:hover {
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

.start-panel__action:hover .start-panel__action-chevron {
    transform: translateX(2px);
}

/* Neutral slate tile, lifted by the shared .bezel primitive (primitives.css,
   design-system §2.11); the accent lives on the icon stroke only. */
.start-panel__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
}

.start-panel__action-icon svg {
    width: 24px;
    height: 24px;
}

/* Broker-journey primaries carry a larger tile (mock hierarchy). */
.start-panel__action--primary .start-panel__action-icon {
    width: 64px;
    height: 64px;
}

.start-panel__action--primary .start-panel__action-icon svg {
    width: 28px;
    height: 28px;
}

.start-panel__action-icon--violet { color: var(--accent-violet); }
.start-panel__action-icon--red    { color: var(--accent-red); }
.start-panel__action-icon--blue   { color: var(--accent-blue); }

.start-panel__action-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1;
}

.start-panel__action-title {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.start-panel__action-desc {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.start-panel__action-chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-primary);
    transition: transform 0.15s ease;
}

/* Primaries: taller card; the tinted surface + gradient hairline come from
   the shared .card-highlight primitive (primitives.css, design-system §2.12)
   — do not re-own background/border here. */
.start-panel__action--primary {
    padding-block: var(--space-8);
}

.start-panel__hint {
    margin: 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

/* Content header — step-specific section in client header bar (Task 264) */
#clientHeader {
    min-width: 0;
    flex: 1 1 auto;
    /* Stretch so header rows pin to the top of the chrome row in both layout
       modes — step row 1 shares the client-identity row-1 line. */
    align-self: stretch;
    display: flex;
}

#clientHeader .client-header-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}
#clientHeader .client-header:has(.content-header-step) .client-header-identity {
    flex: 0 1 30%;
    max-width: 30%;
}
#clientHeader .content-header-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0 0.25rem;
}
#clientHeader .content-header-step {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: var(--space-2);
}
#clientHeader .content-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    overflow: hidden;
}
/* Title row: title + inline sync pill, left-aligned. The pill lives in grid column 1 next
   to the title, so its presence/absence never shifts the participants/tags columns; the
   title is left-anchored and ellipsizes to yield room. */
#clientHeader .content-header-titlebar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
#clientHeader .content-header-titlebar .content-header-title {
    flex: 0 1 auto;
    min-width: 0;
}
#clientHeader .content-header-titlebar .user-storage-badge {
    flex: 0 0 auto;
    margin-right: 0;
}
#clientHeader .content-header-right {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* Meeting header: 3-column grid (50% title, 25% participants, 25% tags) */
#clientHeader .content-header-step--meeting {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: flex-start;
}
#clientHeader .content-header-participants {
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
}
#clientHeader .content-header-tags {
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    min-width: 0;
}
#clientHeader .content-header-tags .tag-pill {
    font-size: 10px;
    padding: 2px 6px;
}
#clientHeader .content-header-title {
    font-weight: 600;
    font-size: var(--header-row-1-size);
    color: var(--text-primary);
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#clientHeader .content-header-title[contenteditable="true"]:hover {
    background-color: var(--bg-hover);
}
#clientHeader .content-header-title[contenteditable="true"]:focus {
    background-color: var(--bg-active);
    outline: none;
}
#clientHeader .content-header-subtitle {
    font-size: var(--header-row-2-size);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Content header bar — standalone mode (no client identity).
   Chromeless: same top-aligned row standard as the client-context header. */
.content-header-bar {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
}

/* Transcript Tab Bar (Milestone 18) */
.transcript-tabs {
    display: flex;
    gap: 4px;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;  /* M97: Prevent tabs from shrinking when scrolling */
}

.transcript-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.transcript-tab:hover:not(.active) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.transcript-tab.active {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.transcript-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--accent-primary);
}

/* Tab content wrapper */
.transcript-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
    position: relative;  /* For absolute-positioned overlays */
    font-size: 13px;
}

.transcript-tab-content.hidden {
    display: none;
}

/* .btn-sm lives in styles/primitives.css (shared small-button standard). */

/* Transcript Version Toggle */
.version-toggle {
    display: flex;
    background-color: var(--bg-hover);
    border-radius: var(--radius-sm);
    padding: 2px;
    flex-shrink: 0;
}

.version-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border-radius: calc(var(--radius-sm) - 2px);
    transition: all 0.15s;
}

.version-btn:hover:not(.active) {
    color: var(--text-primary);
}

.version-btn.active {
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

/* Transcript Messages */
.message-block {
    display: flex;
    gap: 16px;
    margin: 0 10px 15px 0;
}

.speaker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--bg-active);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 4px;
}

/* Dynamic speaker colors */
.speaker-0 { background-color: #e0e7ff; color: #3730a3; }
.speaker-1 { background-color: #dcfce7; color: #166534; }
.speaker-2 { background-color: #ffedd5; color: #9a3412; }
.speaker-3 { background-color: #fce7f3; color: #9d174d; }
.speaker-4 { background-color: #e0f2fe; color: #0369a1; }
.speaker-5 { background-color: #fef3c7; color: #92400e; }
.speaker-6 { background-color: #f3e8ff; color: #7c3aed; }
.speaker-7 { background-color: #ccfbf1; color: #0f766e; }

.message-content {
    flex: 1;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.speaker-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.message-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

.message-text {
    line-height: 1.4;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Highlighting new text */
.message-text span.new {
    animation: highlightFade 2s forwards;
}

@keyframes highlightFade {
    0% { background-color: var(--accent-green-bg); color: var(--text-primary); }
    100% { background-color: transparent; }
}

/* --- 5. MODAL --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.modal-overlay.visible { opacity: 1; pointer-events: auto; }

.modal {
    background: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-lg);
    width: 400px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transform: scale(0.95);
    transition: transform 0.2s;
}
.modal-overlay.visible .modal { transform: scale(1); }

.modal h3 { margin-bottom: 8px; }
.modal p { color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
/* Tab-specific actions (e.g. "Test Deepgram") go on the LEFT, leaving the
   Cancel/Save group on the right — keeps the action row visually consistent
   across all settings tabs and other modals. */
.modal-actions .btn-leading { margin-right: auto; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .sidebar { position: absolute; height: 100%; z-index: 20; transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-md); }
    .hamburger { display: block !important; }
    .close-sidebar-btn { display: block !important; }
}
.hamburger { display: none; margin-right: 16px; }
.close-sidebar-btn { display: none; }

/* --- INLINE EDITABLE SPEAKER NAME --- */
.speaker-name[contenteditable="true"] {
    cursor: text;
    padding: 1px 4px;
    margin: -1px -4px;
    border-radius: 3px;
    transition: background-color 0.15s;
}

.speaker-name[contenteditable="true"]:hover {
    background-color: var(--bg-hover);
}

.speaker-name[contenteditable="true"]:focus {
    background-color: var(--bg-active);
    outline: none;
}


/* --- ACTION MODAL FORM --- */
.action-modal {
    width: 450px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    /* 2026-04-27 tightening pass — match primitive .form-field__control */
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.35;
    font-family: inherit;
    background: var(--bg-app);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-group select option {
    background: var(--bg-sidebar);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--border-focus);
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-tertiary);
}

#testConnectionGroup {
    display: flex;
    align-items: center;
    gap: 12px;
}

#testConnectionResult {
    font-size: 13px;
}

#testConnectionResult.success {
    color: var(--accent-green);
}

#testConnectionResult.error {
    color: var(--accent-red);
}

/* --- AI accountability notice (Task 550 — forced alert archetype) --- */
.ai-accountability-modal__panel {
    width: 100%;
    max-width: 560px;
    max-height: none;
}

.ai-accountability-modal__body {
    flex: 0 0 auto;
    overflow: visible;
    line-height: var(--line-height-normal);
}

.ai-accountability-modal__body p {
    margin: 0;
}

/* --- Quota Exceeded modal (Task 304 — .modal-shell archetype) --- */
.quota-exceeded-modal__panel {
    width: min(440px, 100%);
    max-height: none;
}

.quota-exceeded-modal__type {
    font-weight: 600;
    margin: 0;
}

.quota-exceeded-modal__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

.quota-exceeded-modal__details p {
    margin: 0;
    color: var(--text-secondary);
}

/* --- Error modal (Task 176; Task 304 — migrated to .modal-shell archetype) --- */
.error-modal__panel {
    width: min(420px, 100%);
    max-height: none;
}

.error-modal__body {
    align-items: center;
    padding: var(--space-4) var(--space-5);
    text-align: center;
}

.error-modal__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-modal__icon--critical {
    background: rgba(239, 68, 68, 0.15);
}

.error-modal__icon--critical::before {
    content: '!';
    font-size: 24px;
    font-weight: bold;
    color: var(--accent-red);
}

.error-modal__icon--minor {
    background: rgba(245, 158, 11, 0.15);
}

.error-modal__icon--minor::before {
    content: '!';
    font-size: 24px;
    font-weight: bold;
    color: var(--accent-amber);
}

.error-modal__message {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    margin: 0;
    white-space: pre-line;
    text-align: left;
    overflow-wrap: anywhere;
    max-height: min(40vh, 320px);
    overflow-y: auto;
}

.error-modal__progress {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.error-modal__progress::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent-amber);
    transform-origin: left center;
}

/* Animation runs only when --armed is present. The view toggles the class
 * off → reflow → on to restart the countdown when the (message, severity)
 * tuple changes during visibility (Invariant 2 visual companion). */
.error-modal__progress--armed::after {
    animation: errorModalCountdown 5s linear forwards;
}

@keyframes errorModalCountdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* --- Resume Recording modal (Task 304 — .modal-shell archetype) --- */
.resume-recording-modal__panel {
    width: min(440px, 100%);
    max-height: none;
}

.resume-recording-modal__body {
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    overflow: visible;
}

.resume-recording-modal__body p {
    margin: 0;
}

.resume-recording-modal__error {
    color: var(--accent-red);
    margin: var(--space-2) 0 0 0;
    min-height: 1.4em;
}

/* Scoped orange override — global .btn-warning is shared with confirmDialog. */
.resume-recording-modal__footer .btn-warning {
    background: #f97316;
}

.resume-recording-modal__footer .btn-warning:hover:not(:disabled) {
    background: #ea580c;
    filter: none;
}

/* Scoped green override — Resume is the recommended action. */
.resume-recording-modal__footer .btn-primary {
    background: var(--accent-green);
    color: #ffffff;
}

.resume-recording-modal__footer .btn-primary:hover:not(:disabled) {
    background: #059669;
}


/* --- RECORDING MODE DROPDOWN --- */
.recording-dropdown {
    position: relative;
    display: inline-block;
}

.recording-dropdown .btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-chevron {
    margin-left: 4px;
    transition: transform 0.2s;
}

.recording-dropdown.open .dropdown-chevron {
    transform: rotate(180deg);
}

.recording-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    z-index: 50;
}

.recording-dropdown.open .recording-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    border: none;
    background: none;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-primary);
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-item:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.dropdown-item:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.dropdown-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.dropdown-icon {
    font-size: 10px;
    color: var(--accent-blue);
}

.dropdown-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
    margin-left: 18px;
}

/* --- DOWNLOAD DROPDOWN --- */
.download-dropdown {
    position: relative;
    display: inline-block;
}

/* download-dropdown trigger inherits circle style from .action-tab-icon-btn */

.download-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    z-index: 50;
}

.download-dropdown.open .download-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.download-dropdown .dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
}

/* --- BATCH TOGGLE --- */
.batch-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: 16px;
}

.batch-toggle input {
    display: none;
}

.toggle-slider {
    width: 36px;
    height: 20px;
    background: var(--bg-hover);
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.batch-toggle input:checked + .toggle-slider {
    background: var(--accent-green);
}

.batch-toggle input:checked + .toggle-slider::after {
    transform: translateX(16px);
}

.toggle-text {
    user-select: none;
}

/* --- RECORDING MODE BADGE --- */
.recording-mode-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 500;
    margin-left: 16px;
}

.recording-mode-badge.batch {
    background: var(--accent-blue);
    color: white;
}

/* M80: Processing overlay removed - batch status shown in button */

/* Spinner animation (used by buttons) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Spinner in buttons */
.btn .spinner {
    animation: spin 1s linear infinite;
}

/* --- SETTINGS MODAL --- */
/* .settings-modal is applied as a size override on .modal-shell__panel.
   The panel handles flex layout, borders, background; this rule only
   constrains width + overall height. */
.settings-modal {
    width: 640px;
    max-width: 95vw;
    height: 620px;
}

.settings-page > h3 {
    margin: 0;
}

/* Settings-scoped card treatment: .form-section blocks inside .settings-page
   render as bordered cards (matching the .connection-row treatment on the
   Connections + AI Provider tabs). Out-of-scope consumers like promptEditor
   keep the divider-style base. */
.settings-page .form-section {
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-1);
}

/* Card has a full border; override the base :last-of-type rule that drops
   the bottom border (intended for divider-style stacking, not cards). */
.settings-page .form-section:last-of-type {
    border-bottom: 1px solid var(--border);
}

/* Same lift for .connection-row when inside settings (Connections + AI
   Provider rows). Hover effect from primitives.css still applies. */
.settings-page .connection-row {
    box-shadow: var(--elevation-1);
}

.settings-filename-heading {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.settings-filename-fields {
    gap: var(--space-5);
}

.settings-filename-fields .form-field__label {
    color: var(--text-secondary);
}

.settings-filename-info {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
}

.settings-filename-info:hover,
.settings-filename-info:focus-visible,
.settings-filename-info[aria-expanded="true"] {
    color: var(--text-primary);
    background: var(--bg-hover);
    box-shadow: 0 0 0 2px var(--border-focus);
}

.settings-filename-counter {
    display: none;
}

.form-field:focus-within > .settings-filename-counter,
.form-field--error > .settings-filename-counter {
    display: block;
}

.settings-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

.settings-nav {
    width: 140px;
    flex-shrink: 0;
    padding: 16px 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav-item {
    background: none;
    border: none;
    padding: 8px 16px;
    text-align: left;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.settings-nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.settings-nav-item.active {
    color: var(--text-primary);
    font-weight: 600;
    background: var(--bg-hover);
}

.settings-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    min-width: 0;
    background: var(--bg-app);
}

.settings-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

.settings-page > .modal-actions {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: var(--space-3) 0 var(--space-1);
    background: var(--bg-app);
}

.settings-page.hidden {
    display: none;
}

.key-status {
    display: block;
    font-size: 12px;
    margin-top: 8px;
    color: var(--text-tertiary);
}

.key-status.success {
    color: var(--accent-green);
}

.key-status.warning {
    color: #f59e0b;
}

.key-status.error {
    color: var(--accent-red);
}


/* --- TOAST NOTIFICATIONS (Task 134 PR3) --- */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 10000;
    border: 1px solid var(--border);
    max-width: 400px;
    text-align: center;
}

.toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-warning {
    border-left: 4px solid #f59e0b; /* Amber warning */
}

.toast-info {
    border-left: 4px solid var(--accent-blue);
}

.toast-error {
    border-left: 4px solid var(--accent-red);
}

/* Whisper status styling */
#whisperStatus {
    display: block;
    margin-top: 8px;
}

/* --- TAGS (Milestone 15) --- */

/* Sidebar tag pills (compact) */
.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.tag-pill-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-radius: 4px;
    white-space: nowrap;
}

/* Tag color dot (Milestone 16) */
.tag-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-overflow {
    font-size: 10px;
    padding: 2px 6px;
    color: var(--text-tertiary);
}

/* Transcript header tags section */
.tags-section {
    margin-top: 0;
    flex-shrink: 0;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 4px 8px;
    background: var(--bg-hover);
    color: var(--text-primary);
    border-radius: 4px;
    transition: background 0.15s;
}

.tag-pill:hover {
    background: var(--bg-active);
}

.tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 1;
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    border-radius: 50%;
    transition: all 0.15s;
}

.tag-remove:hover {
    color: var(--accent-red);
    background: var(--accent-red-bg);
}

.tag-add-btn {
    font-size: 12px;
    padding: 4px 8px;
    color: var(--text-tertiary);
    background: none;
    border: 1px dashed var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.tag-add-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-tertiary);
    background: var(--bg-hover);
}

.tag-input {
    font-size: 12px;
    padding: 4px 8px;
    margin: 4px 8px;
    min-width: 120px;
    max-width: 200px;
    border: 1px solid var(--border-focus);
    border-radius: 4px;
    background: var(--bg-app);
    color: var(--text-primary);
    outline: none;
}

.tag-input::placeholder {
    color: var(--text-tertiary);
}

/* Tag dropdown (CM-005) */
.tag-dropdown {
    position: relative;
    display: inline-block;
}

.tag-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    min-width: 180px;
    margin-top: 4px;
}

.tag-dropdown.open .tag-dropdown-list {
    display: block;
}

/* Reuses existing .dropdown-item styles */
.tag-dropdown-item {
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.tag-dropdown-item.hidden {
    display: none;
}

.tag-dropdown-name {
    flex: 1;
}

/* Tag delete button in dropdown (CM-007) */
.tag-delete-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.tag-dropdown-item:hover .tag-delete-btn {
    opacity: 1;
}

.tag-delete-btn:hover {
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
 * M97: HOVER DROPDOWN PATTERNS
 * ═══════════════════════════════════════════════════════════════ */

/* Tags hover dropdown wrapper */
.tags-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.tags-dropdown-wrapper .tag-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    padding: 4px 0;
}

/* M97.1: Override .tag-dropdown-list styles when inside hover menu */
.tags-dropdown-wrapper .tag-dropdown-list {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
    max-height: none;
}

.tags-dropdown-wrapper:hover .tag-dropdown-menu,
.tags-dropdown-wrapper.focus-locked .tag-dropdown-menu {
    display: block;
}

/* Speaker hover dropdown wrapper */
.speaker-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.speaker-dropdown-wrapper .speaker-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
}

.speaker-dropdown-wrapper:hover .speaker-dropdown-menu,
.speaker-dropdown-wrapper.focus-locked .speaker-dropdown-menu {
    display: block;
}

/* Touch device fallback */
@media (hover: none) {
    .tags-dropdown-wrapper.touch-open .tag-dropdown-menu,
    .speaker-dropdown-wrapper.touch-open .speaker-dropdown-menu {
        display: block;
    }
}

/* Action trigger tab (WF-007) */
.action-trigger-tab {
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 50%;
    color: var(--text-secondary);
    padding: 0;
    margin-left: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-trigger-tab:hover:not(:disabled) {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.action-trigger-tab:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.queued-badge {
    background: var(--accent-blue);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.action-trigger-item {
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    color: var(--text-primary);
    font-size: 13px;
    transition: background 0.15s;
}

.action-trigger-item:hover:not(:disabled) {
    background: var(--bg-hover);
}

.action-trigger-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.action-trigger-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

.processing-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* @keyframes spin is defined once above (line ~1198) — duplicate removed (TD-T265-005) */

/* --- ACTION TABS (WF-009) --- */

/* Action tab styling */
.transcript-tab.action-tab {
    position: relative;
    padding-right: 24px; /* Space for close button */
    max-width: 150px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.transcript-tab.action-tab .tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transcript-tab .tab-close {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s;
}

.transcript-tab.action-tab:hover .tab-close {
    opacity: 1;
}

.transcript-tab .tab-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Disabled action in dropdown (has existing tab) */
.action-trigger-item.has-tab {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-trigger-item .has-tab-indicator {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-left: 8px;
}

/* --- Dropdown section chrome (divider + label) --- */

.proposal-section-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.dropdown-section-label {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

/* Tab content - pending state */
.action-tab-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    color: var(--text-secondary);
}

.action-tab-pending .processing-spinner {
    margin-bottom: 16px;
}

.action-tab-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

/* Tab content - error state */
.action-tab-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    color: var(--accent-red);
}

.action-tab-error .error-icon {
    margin-bottom: 16px;
    stroke: var(--accent-red);
}

.action-tab-error-message {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 8px;
    max-width: 400px;
    text-align: center;
}

/* Tab content - result state */
.action-tab-result {
    padding: 0 10px 0 0;
    flex: 1;
    overflow-y: auto;
}

.action-output-raw {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    overflow-x: auto;
    font-size: 12px;
    color: var(--text-secondary);
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.action-tab-empty {
    color: var(--text-tertiary);
    text-align: center;
    padding: 20px 0;
}

/* Tab content wrapper (M22 v3) */
.action-tab-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Streaming content: shrink to fit so no spurious scrollbar */
.action-tab-content-wrapper:has(.action-output--streaming) {
    height: auto;
}

/* Proposal PDF viewer fills remaining space in tab content */
.proposal-pdf-viewer {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 0;
}

/* Raw LLM output view */
.proposal-raw-output {
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 16px;
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg-sidebar);
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Active state for raw toggle button */
.proposal-raw-toggle.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

/* Header bar with action buttons (M22 v3, Task 171: added edit button) */
.action-tab-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 8px;
    gap: 8px;
    flex-shrink: 0; /* Prevent header from shrinking */
}

/* Circular icon button (shared style for header buttons) */
.action-tab-icon-btn,
.action-tab-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.action-tab-icon-btn:hover,
.action-tab-delete-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.action-tab-icon-btn svg,
.action-tab-delete-btn svg {
    flex-shrink: 0;
}

/* Task 171: Circular edit button in header (matches delete button style) */
.action-tab-edit-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.action-tab-edit-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.action-tab-edit-btn svg {
    flex-shrink: 0;
}

/* Circular copy button in header (matches edit/delete button style) */
.action-tab-copy-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.action-tab-copy-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.action-tab-copy-btn.copied {
    color: var(--success, #22c55e);
    border-color: var(--success, #22c55e);
}

.action-tab-copy-btn svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * EDITOR INTEGRATION (Task 162)
 * Styles for inline output editing
 * ═══════════════════════════════════════════════════════════════ */

/* Task 171: Removed .action-output-edit-btn float style - button moved to header */

.action-output-editor {
    padding: 0 10px 10px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Required for flex child to scroll */
}

.editor-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.editorjs-container {
    flex: 1;
    background: var(--bg-primary);
    min-height: 0; /* Required for flex child to scroll */
    overflow-y: auto;
}

/* Editor.js overrides for dark theme */
.editorjs-container .codex-editor {
    padding: 0;
}

.editorjs-container .ce-block__content {
    max-width: 100%;
}

.editor-error {
    color: var(--accent-red);
    font-size: 13px;
}

/* Task 171: Error bar above editor when save fails */
.editor-error-bar {
    padding: 8px 12px;
    background-color: rgba(239, 68, 68, 0.1);
    border-bottom: 1px solid var(--accent-red);
}

/* Task 171: Editor.js toolbar dark/light mode support */
.editorjs-container .ce-toolbar__plus,
.editorjs-container .ce-toolbar__settings-btn {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.editorjs-container .ce-toolbar__plus:hover,
.editorjs-container .ce-toolbar__settings-btn:hover {
    background-color: var(--bg-active);
}

/* Editor.js inline toolbar */
.editorjs-container .ce-inline-toolbar {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.editorjs-container .ce-inline-tool {
    color: var(--text-primary);
}

.editorjs-container .ce-inline-tool:hover {
    background-color: var(--bg-hover);
}

/* Editor.js conversion toolbar (block type dropdown) */
.editorjs-container .ce-conversion-toolbar {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
}

.editorjs-container .ce-conversion-tool {
    color: var(--text-primary);
}

.editorjs-container .ce-conversion-tool:hover {
    background-color: var(--bg-hover);
}

/* Editor.js popover menus */
.editorjs-container .ce-popover {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.editorjs-container .ce-popover-item {
    color: var(--text-primary);
}

.editorjs-container .ce-popover-item:hover {
    background-color: var(--bg-hover);
}

.editorjs-container .ce-popover-item__icon {
    background-color: var(--bg-hover);
    border: 1px solid var(--border);
}

/* Editor.js block content text color */
.editorjs-container .ce-paragraph,
.editorjs-container .ce-header,
.editorjs-container .cdx-list__item,
.editorjs-container .cdx-quote__text,
.editorjs-container .tc-cell {
    color: var(--text-primary);
}

/* Editor.js code block */
.editorjs-container .ce-code__textarea {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
 * TAB CONTENT STRUCTURE (M80)
 * Shared wrapper pattern for transcript and action tabs
 * ═══════════════════════════════════════════════════════════════ */

.tab-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-content-header {
    display: flex;
    align-items: center;
    padding: 4px 16px 8px;
    gap: 12px;
    flex-shrink: 0;
}

.tab-content-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;  /* M97: Moved from .transcript-container */
    padding-top: 8px;
}

/* Transcript and action tab headers - controls aligned right */
.tab-content-header--transcript,
.tab-content-header--action {
    justify-content: flex-end;
}

/* Batch button processing state */
#batchProcessBtn.batch-processing {
    pointer-events: none;
    opacity: 0.8;
}

#batchProcessBtn.batch-processing .spinner {
    display: inline-block;
}

/* --- TASK CARDS (M68) --- */
.task-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.task-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.task-card:hover {
    border-color: var(--text-tertiary);
    box-shadow: var(--shadow-sm);
}

.task-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.task-card-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: transparent;
}

.task-card-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.task-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 28px;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.priority-badge.priority-high {
    background: var(--accent-red-bg);
    color: var(--accent-red);
}

.priority-badge.priority-medium {
    background: #fef3c7;
    color: #d97706;
}

.priority-badge.priority-low {
    background: var(--accent-green-bg);
    color: var(--accent-green);
}

@media (prefers-color-scheme: dark) {
    .priority-badge.priority-medium {
        background: #451a03;
        color: #fbbf24;
    }
}

.assignee-badge,
.due-date-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-hover);
    border-radius: 4px;
}

.assignee-badge::before {
    content: "@";
    margin-right: 2px;
    color: var(--text-tertiary);
}

.task-card-context {
    margin-left: 28px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.task-cards-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* --- MARKDOWN OUTPUT STYLES (M23 Plan D) --- */
.action-output-markdown {
    padding: 0;
    line-height: 1.6;
    color: var(--text-primary);
}

.action-output-markdown h1,
.action-output-markdown h2,
.action-output-markdown h3,
.action-output-markdown h4,
.action-output-markdown h5,
.action-output-markdown h6 {
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
}

.action-output-markdown h1 { font-size: 24px; }
.action-output-markdown h2 { font-size: 20px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.action-output-markdown h3 { font-size: 16px; }
.action-output-markdown h4 { font-size: 14px; }
.action-output-markdown h5 { font-size: 13px; }
.action-output-markdown h6 { font-size: 12px; color: var(--text-secondary); }

.action-output-markdown h1:first-child,
.action-output-markdown h2:first-child,
.action-output-markdown h3:first-child,
.action-output-markdown h4:first-child {
    margin-top: 0;
}

.action-output-markdown p {
    margin: 12px 0;
}

.action-output-markdown p:first-child {
    margin-top: 0;
}

.action-output-markdown p:last-child {
    margin-bottom: 0;
}

.action-output-markdown ul,
.action-output-markdown ol {
    margin: 12px 0;
    padding-left: 24px;
}

.action-output-markdown li {
    margin: 6px 0;
}

.action-output-markdown li > ul,
.action-output-markdown li > ol {
    margin: 4px 0;
}

.action-output-markdown strong {
    font-weight: 600;
    color: var(--text-primary);
}

.action-output-markdown em {
    font-style: italic;
}

.action-output-markdown code {
    font-family: var(--font-mono);
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.action-output-markdown pre {
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 16px 0;
}

.action-output-markdown pre code {
    background: none;
    padding: 0;
    font-size: 13px;
}

.action-output-markdown blockquote {
    border-left: 3px solid var(--accent-blue);
    padding-left: 16px;
    margin: 16px 0;
    color: var(--text-secondary);
}

.action-output-markdown hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

.action-output-markdown a {
    color: var(--accent-blue);
    text-decoration: none;
}

.action-output-markdown a:hover {
    text-decoration: underline;
}

.action-output-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.action-output-markdown th,
.action-output-markdown td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}

.action-output-markdown th {
    background: var(--bg-sidebar);
    font-weight: 600;
}

.action-output-markdown img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Streaming preview (Task 201) */
.action-output--streaming {
    opacity: 0.9;
    line-height: 1.6;
    color: var(--text-primary);
}

.action-generating-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ========================================
   AUDIO PLAYER (AP-001)
   ======================================== */

.audio-player {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.audio-player.visible {
    display: flex;
}

.audio-player-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.audio-player-btn:hover {
    opacity: 0.9;
}

/* Toggle play/pause icons */
.audio-player-btn .pause-icon {
    display: none;
}

.audio-player.playing .audio-player-btn .play-icon {
    display: none;
}

.audio-player.playing .audio-player-btn .pause-icon {
    display: block;
}

.audio-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 45px;
    text-align: center;
}

/* Styled range input as progress bar */
.audio-seek {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-hover);
    border-radius: 3px;
    cursor: pointer;
}

.audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-blue);
    border-radius: 50%;
    cursor: pointer;
}

.audio-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent-blue);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   INLINE FORM ERRORS — shared (m97-ui-tweaks, resumeRecordingError,
   testConnectionResult, participantModalView, clientModalView)
   ═══════════════════════════════════════════════════════════════ */

.form-error {
    display: none;
    color: var(--accent-red);
    font-size: 13px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: var(--accent-red-bg);
    border-radius: var(--radius-sm);
    text-align: left;
}

/* Profile Dropdown */
.profile-dropdown {
    position: relative;
    flex-shrink: 0;
}

.profile-btn {
    border-radius: var(--radius-sm);
}

/* Panel chrome from .menu-panel (primitives.css). */
.profile-menu {
    display: none;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 180px;
    z-index: var(--z-popover);
    overflow: hidden;
}

.profile-dropdown.open .profile-menu {
    display: block;
}

.profile-email {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .profile-menu-item styling lives in the shared menu-item standard
   (grouped with .action-trigger-item — see that block). */

/* --- Task 375: Notifications bell + dropdown (content chrome) --- */
/* Mirrors the .profile-dropdown/.profile-menu shape — absolute overlay anchored
   to the bell button so it floats over the page instead of expanding the top-bar
   flex row. Toggled via the [hidden] attribute on the dropdown + badge; native
   [hidden] has 0,0,0 specificity, so the companion `[hidden]{display:none}`
   rules are load-bearing alongside the author-specificity display values. */

.notifications-container {
    position: relative;
    flex-shrink: 0;
}

.notifications-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--accent-red);
    color: #ffffff;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.notifications-badge[hidden] {
    display: none;
}

/* Panel chrome from .menu-panel (primitives.css). */
.notifications-dropdown {
    display: flex;
    flex-direction: column;
    top: calc(100% + 6px);
    right: 0;
    width: 360px;
    max-height: 480px;
    z-index: var(--z-popover);
    overflow: hidden;
}

.notifications-dropdown[hidden] {
    display: none;
}

.notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

.notifications-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.notification-item {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    border-left: 3px solid transparent;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item--info    { border-left-color: var(--accent-blue); }
.notification-item--success { border-left-color: var(--accent-green); }
.notification-item--warning { border-left-color: var(--accent-amber); }
.notification-item--error   { border-left-color: var(--accent-red); }

.notification-item__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

.notification-item__body {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
    word-wrap: break-word;
}

.notification-item__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* Dismiss × — inherits chrome (bg/hover/transition/border-radius) from
   .btn .btn-ghost primitive; this rule scopes ONLY the dimensions + glyph
   size that the primitive doesn't constrain. The × needs a larger font
   than .btn-sm's default so the glyph reads as a target. */
.notification-item__dismiss {
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.notifications-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border);
    background: var(--bg-app);
}

/* --- Task 284: User Profile (top-bar chrome, dropdown header, Profile tab) --- */

/* No global .hidden utility exists (each component scopes its own). These
   rules give the new chrome elements an explicit hidden state so JS toggling
   `.hidden` actually hides them — without this, all three siblings render
   simultaneously. */
.profile-btn-avatar.hidden,
.profile-btn-initials.hidden,
.profile-btn-icon.hidden,
.profile-menu-avatar.hidden,
.profile-menu-initials.hidden,
.profile-name.hidden,
.profile-image-circle img.hidden,
.profile-image-placeholder.hidden,
.profile-image-remove.hidden {
    display: none;
}

/* Top-bar profile button — avatar img / initials span variants */
.profile-btn-avatar,
.profile-btn-initials {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-btn-initials {
    background: var(--bg-active);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}

/* Tighter padding when chrome has replaced the default icon */
.profile-btn:has(.profile-btn-avatar:not(.hidden)),
.profile-btn:has(.profile-btn-initials:not(.hidden)) {
    padding: 2px;
}

/* Dropdown menu header — avatar / initials / name above existing email */
.profile-menu-avatar,
.profile-menu-initials {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin: 16px auto 8px;
}

.profile-menu-avatar {
    display: block;
}

.profile-menu-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-active);
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}

.profile-name {
    padding: 0 16px 4px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu .profile-email {
    text-align: center;
}

/* Profile settings tab — form layout */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Image slots — three circles in one row */
.profile-images-row {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.profile-image-slot { flex: 0 0 auto; }

.profile-image-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.profile-image-slot input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.profile-image-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px dashed var(--border);
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    transition: border-color 0.2s;
}
.profile-image-circle:hover { border-color: var(--text-secondary); }
.profile-image-circle.has-image { border-style: solid; border-color: var(--border); }

.profile-image-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-image-placeholder { color: var(--text-tertiary); }

.profile-image-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-red);
    color: #fff;
    border: 2px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.profile-image-remove:hover { filter: brightness(0.85); }

.profile-image-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Signature section — label + upload icon inline, textarea below */
.profile-signature-section input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.profile-signature-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.profile-signature-header > label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}
.profile-signature-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.profile-signature-upload-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

/* WYSIWYG signature editor (contenteditable) */
.profile-signature-editor {
    min-height: 60px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-app);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s;
}
.profile-signature-editor:focus {
    border-color: var(--border-focus);
}
.profile-signature-editor:empty::before {
    content: "Type your email signature\2026";
    color: var(--text-tertiary);
    pointer-events: none;
}
.profile-signature-editor img {
    max-width: 200px;
    max-height: 80px;
    display: block;
    margin: 4px 0;
    border-radius: var(--radius-sm);
}

#signatureEditor :is(p, div) {
    margin: 0;
}

/* --- Task 203/210: QUOTA TRACKERS (moved to settings modal) --- */

.quota-item {
    margin-bottom: var(--space-2);
}

.quota-item:last-child {
    margin-bottom: 0;
}

.quota-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-1);
}

.quota-name {
    color: var(--text-secondary);
}

.quota-value {
    color: var(--text-tertiary);
}

.quota-bar {
    height: 6px;
    background: var(--bg-active);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.quota-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--duration-slow) var(--ease-standard);
}

.quota-bar-fill.green { background: var(--accent-green); }
.quota-bar-fill.amber { background: var(--accent-amber); }
.quota-bar-fill.red { background: var(--accent-red); }

/* --- Task 374: mic level meter + device picker --- */
/* Clones .quota-bar / .quota-bar-fill (6px, --radius-pill, semantic accents) but
   MUST override the inherited slow width transition — a per-frame write against
   --duration-slow smears/lags the meter. */
.mic-controls-pill {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 2px 5px 2px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.mic-meter {
    width: 76px;
    height: 6px;
    background: var(--bg-active);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.mic-meter-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-pill);
    background: var(--accent-green);
    transition: none;  /* override .quota-bar-fill's width var(--duration-slow) */
}
.mic-meter-fill.is-low { background: var(--accent-amber); }

/* Device picker — dropdown built on the dropdown-utils click-outside pattern. */
.mic-picker {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}
.mic-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 4px;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
}
.mic-picker__trigger:hover { background: var(--bg-active); color: var(--text-primary); }
.mic-picker__trigger.is-warning {
    color: var(--accent-amber);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.mic-picker__trigger.is-warning:hover {
    color: var(--accent-amber);
    background: rgba(245, 158, 11, 0.18);
}
.mic-picker__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: var(--z-popover);
    min-width: 200px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.mic-picker__preview {
    height: 6px;
    margin: 4px 6px 8px;
    background: var(--bg-active);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.mic-picker__preview-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-pill);
    background: var(--accent-green);
    transition: none;  /* per-frame preview write — no slow transition */
}
.mic-device-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    font-size: 13px;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mic-device-option:hover { background: var(--bg-active); }
.mic-device-option.is-selected { background: var(--bg-active); font-weight: 600; }

/* --- M45: CLICK-TO-PLAY TRANSCRIPT SEGMENTS --- */

/* Clickable segment spans */
.transcript-segment {
    cursor: pointer;
    padding: 2px 4px;
    margin: 0 -2px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease;
}

/* Hover state for segments */
.message-text[data-has-audio="true"] .transcript-segment:hover {
    background-color: var(--bg-hover);
}

/* Currently playing segment highlight */
.transcript-segment.segment-playing {
    background-color: var(--accent-green-bg);
    color: var(--accent-green);
    font-weight: 500;
}

/* --- M110: AUTO-SCROLL INDICATOR --- */

.autoscroll-indicator {
    position: sticky;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: block;
    margin: 0 auto;
}

.autoscroll-indicator:hover {
    filter: brightness(1.1);
}

/* --- M46: CALENDAR SECTION --- */

.sidebar-section {
    border-bottom: 1px solid var(--border);  /* M97: Changed from border-top since calendar now at top */
    padding: 12px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.calendar-header h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.calendar-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sidebar-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 4px;
    padding: 12px 12px 0;
}

.calendar-empty,
.calendar-loading,
.calendar-error {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 8px 0;
}

.calendar-loading .spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.calendar-error {
    color: var(--accent-red);
}

/* BUG-106: inline pill in calendar header for failed background polls. */
.calendar-refresh-error {
    font-size: 11px;
    color: var(--accent-red);
    background: var(--accent-red-bg);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
}

/* M50: Calendar connect button section */
.calendar-connect {
    padding: 12px 0;
}

.calendar-connect p {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0 0 12px 0;
}

.calendar-connect-btn {
    width: 100%;
    margin-bottom: 8px;
}

.calendar-connect-error {
    font-size: 11px;
    color: var(--accent-red);
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.calendar-event {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid rgba(128, 128, 128, 0.15);
}

.calendar-event:hover {
    background: var(--bg-hover);
}

.calendar-event-time {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.calendar-event-separator {
    color: var(--text-tertiary);
    font-size: 12px;
}

.calendar-event-title {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-provider {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.provider-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    border-radius: 2px;
    background: var(--bg-hover);
}

/* Calendar event expansion styles (M57) */
.calendar-event-expanded {
    margin-top: 10px;
    margin-left: 38px; /* align with content (icon width + gap) */
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    overflow-x: auto;
}

.event-attendees {
    margin-bottom: 8px;
}

.event-attendees strong {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-attendees ul {
    margin: 4px 0 0 0;
    padding: 0;
    list-style: none;
}

.event-attendees li {
    padding: 2px 0;
    color: var(--text-secondary);
}

.event-description {
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
    max-height: 150px;
    overflow-y: auto;
}

/* M77: Scrollbar hidden until hover */
.event-description::-webkit-scrollbar {
    width: 6px;
}

.event-description::-webkit-scrollbar-track {
    background: transparent;
}

.event-description::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

.event-description:hover::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
}

.event-actions {
    margin-top: 12px;
}

.join-record-btn {
    width: 100%;
    background: var(--accent-blue);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.join-record-btn:hover:not(:disabled) {
    filter: brightness(0.9);
}

.join-record-btn:disabled {
    background: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* M63: Calendar event layout */
.calendar-event-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.calendar-platform-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.calendar-platform-icon.zoom {
    background-image: url("/assets/icons/zoom.svg");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.calendar-platform-icon.teams {
    background-image: url("/assets/icons/teams.svg");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.calendar-platform-icon.meet {
    background-image: url("/assets/icons/meet.svg");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.calendar-platform-icon.generic {
    background-image: url("/assets/icons/calendar.svg");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.calendar-event-content {
    flex: 1;
    min-width: 0;
}

.calendar-event-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

/* Expanded event styling */
.calendar-event.expanded {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.expand-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--text-tertiary);
    transition: transform 0.2s ease, color 0.2s ease;
}

.expand-chevron.expanded {
    transform: rotate(180deg);
}

.calendar-event.expanded .expand-chevron {
    color: var(--text-primary);
}

.calendar-event-badges {
    display: flex;
    gap: 6px;
}

.event-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-tertiary);
}

.attendees-badge {
    gap: 3px;
}
.attendees-badge svg {
    width: 12px;
    height: 12px;
}

/* Smooth expansion animation */
.calendar-event-expanded {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
 * M82: Meeting Participants Circles
 * ========================================================================== */

.participant-circles {
    display: flex;
    align-items: center;
    margin-top: 0;
    position: relative;
}

.participant-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-active);
    border: 2px solid var(--bg-card);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -8px;
    cursor: default;
    transition: transform 0.15s ease;
}

.participant-circle:first-child {
    margin-left: 0;
}

.participant-circle:hover {
    transform: scale(1.1);
    z-index: 100 !important;
}

/* Host has distinct styling */
.participant-circle--host {
    background: var(--accent-primary);
    color: var(--accent-text);
    border-color: var(--bg-card);
}

/* Task 181: Add participant "+" button */
.participant-circle--add {
    width: 28px;
    height: 28px;
    border: 1.5px dashed var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

.participant-circle--add:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Task 286 legacy .participant-modal* + .client-modal* selectors removed in
   Task 298 Commits 3+4. Both views now use .modal-shell + design-system
   panel classes appended at end of file. */

/* =============================================================================
 * M89: Speaker-Participant Linking Dropdown
 * ========================================================================== */

/* Clickable speaker name with dropdown */
.speaker-name--clickable {
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.speaker-name--clickable:hover {
    background-color: var(--bg-active);
}

.speaker-name--clickable .dropdown-chevron {
    opacity: 0.5;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.speaker-name--clickable:hover .dropdown-chevron {
    opacity: 1;
}

/* Linked badge indicator */
.speaker-linked-badge {
    color: var(--accent-primary);
    font-size: 8px;
    margin-left: 2px;
    vertical-align: middle;
}

/* Speaker dropdown menu */
.speaker-dropdown-menu {
    position: absolute;  /* M97: Changed from fixed to scroll with content */
    z-index: 1000;
    min-width: 220px;
    max-width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
}

/* Speaker filter input */
.speaker-filter-input {
    width: calc(100% - 16px);
    margin: 4px 8px 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 13px;
}

.speaker-filter-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.speaker-filter-input::placeholder {
    color: var(--text-secondary);
}

/* Speaker dropdown items container */
.speaker-dropdown-items {
    max-height: 200px;
    overflow-y: auto;
}

/* Speaker dropdown item */
.speaker-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.speaker-dropdown-item:hover {
    background-color: var(--bg-active);
}

.speaker-dropdown-item .participant-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 13px;
}

.speaker-dropdown-item .participant-email {
    color: var(--text-secondary);
    font-size: 11px;
}

.speaker-dropdown-items .no-results {
    padding: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}

/* Create participant button in speaker dropdown (Task 286).
   Uses `.btn .btn-secondary` for codebase-standard button styling.
   This override only tunes the box (centering + fit inside dropdown column). */
.speaker-create-button.btn {
    display: flex;
    justify-content: center;
    width: calc(100% - 16px);
    margin: 4px 8px 8px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLE RESOLUTION MODAL (Task 281; Task 313 — migrated to .modal-shell + BEM)
   ═══════════════════════════════════════════════════════════════════════════ */

.variable-resolution__panel {
    max-width: 720px;
}

.variable-resolution__body {
    padding: var(--space-6);
}

.variable-resolution__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.variable-resolution__footer {
    padding: var(--space-4) var(--space-6);
    gap: var(--space-3);
}

.var-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.var-row__header {
    grid-column: 1 / -1;
}

.var-row__name {
    font-weight: 600;
}

.var-row__message {
    margin-left: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.var-row__status {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.var-readonly-message {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSENT MODAL (Task 153; Task 313 — extracted to consentModalView; BEM)
   ═══════════════════════════════════════════════════════════════════════════ */

.consent-modal__panel {
    max-width: 480px;
}

.consent-modal__body {
    padding: var(--space-6);
}

.consent-modal__description {
    margin: 0;
    color: var(--text-secondary);
}

.consent-modal__benefits {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--text-primary);
}

.consent-modal__admin-blocked {
    margin: 0;
    padding: var(--space-3);
    background: var(--bg-warning, var(--bg-hover));
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.consent-modal__admin-blocked[hidden] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPLOAD MODAL (Task 167; Task 313 — migrated to .modal-shell + BEM)
   ═══════════════════════════════════════════════════════════════════════════ */

.upload-modal__panel {
    max-width: 520px;
}

.upload-modal__body {
    gap: var(--space-4);
    padding: var(--space-6);
}

.upload-modal__drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-5);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.upload-modal__drop-zone:hover,
.upload-modal__drop-zone--active {
    border-color: var(--accent-blue);
    background: var(--bg-hover);
}

.upload-modal__drop-zone svg {
    color: var(--text-secondary);
}

.upload-modal__drop-zone p {
    margin: 0;
    color: var(--text-secondary);
}

.upload-modal__or {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.upload-modal__file-label {
    cursor: pointer;
}

.upload-modal__file-label .btn {
    pointer-events: none;
}

.upload-modal__hint {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.upload-modal__progress {
    margin-top: var(--space-5);
    text-align: center;
}

.upload-modal__progress[hidden] {
    display: none;
}

.upload-modal__progress-bar {
    height: var(--space-2);
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.upload-modal__progress-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: var(--radius-sm);
    transition: width 0.2s ease;
}

.upload-modal__progress-text {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ── Task 208: Documents tab ───────────────────────────────── */

.document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.document-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.document-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.document-filename {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-meta {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.document-provider-filename,
.document-storage-path {
    display: block;
    max-width: 100%;
    font-size: 0.78em;
    line-height: 1.35;
    color: var(--text-tertiary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.document-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* document-download-btn inherits circle style from .action-tab-icon-btn */

.documents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.documents-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* download-all-btn and client-storage-folder-btn inherit circle style from .action-tab-icon-btn */

.client-storage-folder-btn .provider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: normal;
    background: transparent;
}

.client-storage-folder-btn .provider-icon svg {
    width: 16px;
    height: 16px;
}

.documents-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
}

.documents-list-box {
    margin: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.documents-list-box .document-row:last-child {
    border-bottom: 0;
}

/* ── Task 213: Document upload zone ──────────────────────── */

.upload-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    margin: 8px 12px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    transition: border-color 0.15s, background 0.15s;
}

.upload-zone--dragover {
    border-color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
}

.upload-btn {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-sidebar);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85em;
}

.upload-btn:hover {
    background: var(--bg-hover);
}

.upload-progress-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
}

.upload-progress-filename {
    flex-shrink: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85em;
}

.upload-progress-bar-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 3px;
    transition: width 0.2s ease;
}

.upload-progress-percent {
    flex-shrink: 0;
    font-size: 0.8em;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
}

.upload-progress-error .upload-progress-filename {
    color: var(--error-color, #e53e3e);
}

.upload-progress-error-text {
    flex: 1;
    font-size: 0.8em;
    color: var(--error-color, #e53e3e);
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: var(--text-tertiary);
    color: white;
    font-size: 0.75em;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   WORKFLOW RAIL (Task 224/226)
   Timeline-style side panel showing workflow steps
   ═══════════════════════════════════════════════════════════════ */

/* Content area: side-by-side rail + transcript */
.content-area {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.content-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}

.content-chrome {
    display: flex;
    /* Top-align: chrome clusters share the row-1 line with the header text */
    align-items: flex-start;
    gap: 12px;
    min-height: 52px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-app);
    overflow: visible;
    z-index: var(--z-sticky);
    position: relative;
    flex-shrink: 0;
}

.content-chrome__main {
    display: flex;
    /* flex-start so the hamburger sits on the row-1 line, not mid-identity */
    align-items: flex-start;
    gap: 8px;
    /* Breathing room between the end of the content header and the actions cluster */
    padding-right: var(--space-4);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.content-chrome__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    flex-shrink: 0;
    min-width: 0;
}

.create-menu {
    position: relative;
    flex-shrink: 0;
}

/* Compact secondary command card. Type comes from .btn-sm; the 36px height
   keeps the trigger restrained, while the violet bezel tile echoes action
   cards without spending card-highlight. */
.create-menu__button {
    height: 36px;
    white-space: nowrap;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.create-menu__button:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: color-mix(in srgb, var(--accent-blue) 25%, var(--border));
    box-shadow: var(--shadow-sm);
}

.create-menu__button[aria-expanded="true"] {
    background: var(--bg-active);
    border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
    box-shadow: var(--shadow-sm);
}

.create-menu__button[aria-expanded="true"]:hover:not(:disabled) {
    background: var(--bg-active);
    border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border));
}

.create-menu__button:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.create-menu__button-icon {
    --bezel-surface: color-mix(in srgb, var(--accent-violet) 12%, var(--bg-card));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    color: var(--accent-violet);
}

.create-menu__button-icon svg {
    display: block;
    width: 12px;
    height: 12px;
}

.create-menu__button-label {
    line-height: var(--line-height-tight);
}

.create-menu__button-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.create-menu__button-chevron svg {
    display: block;
    width: 12px;
    height: 12px;
}

.create-menu__button[aria-expanded="true"] .create-menu__button-chevron {
    transform: rotate(180deg);
}

/* Panel chrome from .menu-panel (primitives.css). */
.create-menu__dropdown {
    display: flex;
    flex-direction: column;
    top: calc(100% + 6px);
    right: 0;
    min-width: 270px;
    padding: 6px 0;
    z-index: var(--z-popover);
}

.create-menu__dropdown[hidden] {
    display: none;
}

/* .create-menu__item styling lives in the shared menu-item standard
   (grouped with .action-trigger-item — see that block). */

@media (max-width: 1180px) {
    .content-chrome {
        gap: 8px;
        padding-inline: 10px;
    }

    .content-chrome__actions {
        gap: 6px;
    }

    .mic-meter {
        width: 52px;
    }
}

@media (max-width: 820px) {
    .content-chrome {
        flex-wrap: wrap;
        align-items: stretch;
        row-gap: 6px;
    }

    .content-chrome__main {
        flex: 1 1 100%;
    }

    .content-chrome__actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .mic-meter {
        display: none;
    }
}

@media (max-width: 480px) {
    .content-chrome {
        padding: 6px 8px;
    }

    .content-chrome__actions {
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .create-menu__button,
    .create-menu__button-chevron {
        transition: none;
    }
}

/* Rail panel */
.workflow-rail {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg-sidebar);
    overflow-y: auto;
    padding: 16px 12px;
    gap: 0;
}

/* Rail header — sticky above scrolling cards */
.workflow-rail-header {
    position: sticky;
    top: -16px;
    z-index: 2;
    background: var(--bg-sidebar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: -16px -12px 12px;
    padding: 16px 12px 8px;
    gap: 8px;
}
.workflow-rail-header > span {
    flex: 0 0 auto;
}
.wf-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.wf-header-actions > :not(.user-storage-summary) {
    flex: 0 0 auto;
}
.workflow-sync-btn {
    padding: 4px;
    color: var(--text-tertiary);
}

/* Filter button & dropdown */
.wf-filter-wrap {
    position: relative;
}
.wf-filter-btn {
    padding: 4px;
    color: var(--text-tertiary);
}
.wf-filter-btn.wf-filter-active {
    color: var(--accent-blue);
}
.wf-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}
.wf-filter-dropdown.hidden { display: none; }
.wf-filter-title {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 4px 2px;
}

.wf-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}
.wf-filter-pill.active {
    opacity: 1;
    color: var(--text-primary);
}
.wf-filter-pill--meeting_session.active { background: var(--step-bg-meeting); border-color: var(--step-bg-meeting); }
.wf-filter-pill--action_execution.active { background: var(--step-bg-action); border-color: var(--step-bg-action); }
.wf-filter-pill--proposal_fill.active { background: var(--step-bg-proposal); border-color: var(--step-bg-proposal); }
.wf-filter-pill--document_upload.active { background: var(--step-bg-document); border-color: var(--step-bg-document); }
.wf-filter-pill--client_email.active { background: var(--step-bg-email); border-color: var(--step-bg-email); }
.workflow-sync-btn:hover:not(:disabled) {
    color: var(--text-primary);
}
.workflow-sync-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.workflow-sync-btn svg.spinning {
    animation: spin 1s linear infinite;
}

/* Scroll-back pill — sticky below header (Task 281) */
.workflow-rail-scroll-pill {
    position: sticky;
    top: 44px;
    align-self: center;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 16px;
    background: var(--accent-blue);
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transition: opacity 150ms ease;
}
.workflow-rail-scroll-pill.hidden {
    display: none;
}
.workflow-rail-scroll-pill:hover:not(.hidden) {
    filter: brightness(1.1);
}
.workflow-rail-scroll-pill-icon {
    width: 12px;
    height: 12px;
}

/* Empty and loading states */
.workflow-empty,
.workflow-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    color: var(--text-tertiary);
    font-size: 0.85em;
    text-align: center;
}


/* ── Timeline card ─────────────────────────────────── */
.workflow-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 10px 7px 18px;
    margin-left: 12px;
    margin-bottom: 6px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    transition: background 0.15s ease;
    /* Timeline line: continuous vertical bar along left edge */
    border-left: 2px solid var(--border);
}

.workflow-card:hover {
    background: var(--bg-hover);
}

.workflow-card.selected {
    background: var(--bg-active);
}

/* Dim the icon for pending steps */
.workflow-card:has(.step-progress-indicator--pending) .workflow-card-icon {
    opacity: 0.35;
}

/* Dim icon for failed steps */
.workflow-card:has(.step-progress-indicator--failed) .workflow-card-icon {
    opacity: 0.5;
    filter: grayscale(1);
}

/* Dim icon for blocked steps */
.workflow-card:has(.step-progress-indicator--blocked) .workflow-card-icon {
    opacity: 0.35;
    filter: grayscale(1);
}

/* Task 261: Condensed email rows */
.workflow-email-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 18px;
    margin-left: 12px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    min-height: 28px;
    border-left: 2px solid var(--border);
}
.workflow-email-row:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.workflow-email-row.selected {
    background: var(--bg-active, rgba(59,130,246,0.08));
}
/* Envelope icon on timeline border — swish direction */
.workflow-email-row .workflow-card-icon {
    font-size: 0.95em;
    background: var(--step-bg-email);
}
.workflow-email-row .email-icon-inbound {
    transform: translateY(-50%) rotate(-15deg);
}
.workflow-email-row .email-icon-outbound {
    transform: translateY(-50%) rotate(15deg);
}
.email-row-subject {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-row-end {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.email-attachment-indicator {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* Condensed document rows */
.workflow-document-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 18px;
    margin-left: 12px;
    margin-bottom: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #666);
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    min-height: 28px;
    border-left: 2px solid var(--border);
}
.workflow-document-row:hover {
    background: var(--bg-hover, rgba(0,0,0,0.04));
}
.workflow-document-row.selected {
    background: var(--bg-active, rgba(59,130,246,0.08));
}
.workflow-document-row .workflow-card-icon {
    font-size: 0.95em;
    background: var(--step-bg-document);
}
.document-row-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-highlight {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
    transition: outline-color 0.3s ease;
}

/* Icon */
.workflow-card-icon {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    line-height: 1;
    z-index: 1;
    background: var(--bg-primary);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card body: title, badge, time stacked */
.workflow-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.workflow-card-title {
    font-size: .9em;
    font-weight: 300;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workflow-card--meeting .workflow-card-icon { background: var(--step-bg-meeting); }
.workflow-card--action .workflow-card-icon  { background: var(--step-bg-action); }
.workflow-card--proposal .workflow-card-icon { background: var(--step-bg-proposal); }
.workflow-card--document .workflow-card-icon { background: var(--step-bg-document); }
.workflow-card--email .workflow-card-icon   { background: var(--step-bg-email); }

.workflow-card-time {
    font-size: 0.82em;
    color: var(--text-tertiary);
}

.workflow-card-waiting {
    color: color-mix(in srgb, var(--accent-red) 88%, var(--bg-card));
    font-size: var(--font-size-xs);
    font-weight: 300;
    line-height: var(--line-height-tight);
}

.workflow-card-waiting--saved {
    color: var(--text-secondary);
}

.workflow-card-time--marquee {
    height: 1.2em;
    line-height: 1.2;
}

/* Card menu (⋮ kebab) */
.workflow-card-menu {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.workflow-card:hover .workflow-card-menu {
    opacity: 1;
}

.workflow-card-menu-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.workflow-card-menu-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.workflow-card-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 20;
    padding: 4px 0;
}

.workflow-card-menu-dropdown.hidden {
    display: none;
}

.workflow-card-menu-dropdown--meeting {
    min-width: 220px;
}

.workflow-step-delete {
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--accent-red);
    font-size: 0.85em;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.workflow-step-delete:hover {
    background: var(--accent-red-bg);
}

/* ── Task 453: meeting-card action menu items + nested result indent ── */
/* Items reuse the .workflow-card-menu-dropdown container chrome; the item mirrors
   .workflow-step-delete's chrome but neutral (no red). Indent is token-based. */
.workflow-card--nested {
    margin-left: var(--space-6);
}

.workflow-meeting-action-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.85em;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.workflow-meeting-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.workflow-meeting-action-icon svg {
    width: 14px;
    height: 14px;
}

.workflow-meeting-action-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workflow-meeting-action-item:hover {
    background: var(--bg-hover);
}

.workflow-meeting-action-note {
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-size: 0.78em;
    white-space: nowrap;
}

/* Document step variant */

/* Drag & drop feedback */
.workflow-card[draggable="true"] {
    cursor: grab;
}

.workflow-card[draggable="true"]:active {
    cursor: grabbing;
}

.workflow-card.dragging {
    opacity: 0.4;
    background: var(--bg-hover);
}

/* ── Add step trigger ──────────────────────────────── */
/* Deliberately OFF the timeline: no left border, no indent, no ::before
   dot — the highlighted trigger is rail chrome, not a step row. */
.workflow-add-wrapper {
    position: relative;
    padding: 10px;
}

/* The rail's ONE highlighted action — surface + hairline come from the
   shared .card-highlight primitive (design-system §2.12); re-owning
   background/border here silently kills it (negative-pinned). Anatomy
   mirrors the start-panel action cards: bezel tile + title + description.
   Hover feedback is the primitive's surface swap alone — an accent-blue
   colour shift read muddy on the tinted dark surface. */
.workflow-add-btn {
    width: 100%;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: left;
    gap: var(--space-3);
    padding: var(--space-3);
    transition: background 0.15s;
}

.workflow-add-btn[disabled] {
    cursor: default;
    opacity: 0.6;
    justify-content: center;
}

.workflow-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    color: var(--accent-violet);
}

.workflow-add-plus {
    font-size: 18px;
    line-height: 1;
}

.workflow-add-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.workflow-add-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.workflow-add-desc {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
}

/* ── Dropdown menu ─────────────────────────────────── */
/* Panel chrome from .menu-panel (primitives.css) — this menu sets the standard.
   Anchored to the BUTTON's edges, not the padded wrapper: the wrapper carries
   10px padding on every side, so the left/right insets match the card's width
   and the top offset closes the wrapper's bottom padding to a ~4px gap. */
.workflow-add-dropdown {
    top: calc(100% - 6px);
    left: 10px;
    right: 10px;
    width: auto;
    z-index: 50;
    padding: 6px 0;
    max-height: 380px;
    overflow-y: auto;
}

.workflow-add-dropdown.hidden {
    display: none;
}

.dropdown-note {
    padding: 6px 12px;
    font-size: 0.75em;
    color: var(--accent-amber);
    background: var(--accent-amber-bg);
    border-bottom: 1px solid var(--border);
}

.action-trigger-list {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow-y: visible;
}

/* Menu item standard — shared by rail add-menu, chrome create menu, profile menu. */
.action-trigger-item,
.create-menu__item,
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 0.82em;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.action-trigger-item:hover:not([disabled]),
.create-menu__item:hover:not([disabled]),
.profile-menu-item:hover:not([disabled]) {
    background: var(--bg-hover);
}

/* Shared action-menu row — Create and Add-step menus use the same inset,
   card-like hover treatment and coloured square icon anatomy. Profile rows
   intentionally retain the denser text-only menu standard above. */
.menu-action-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - var(--space-2));
    margin: 1px var(--space-1);
    padding: 6px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-primary);
    gap: 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s;
}

/* Create owns the platform-level journeys, so it adds a restrained two-line
   card treatment without expanding the workflow Add-step rows. */
.create-menu__item {
    min-height: 52px;
    padding: var(--space-2);
}

.create-menu__item .menu-item-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
}

.create-menu__item .menu-item-icon svg {
    width: 16px;
    height: 16px;
}

.menu-action-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.create-menu__item .menu-action-label {
    flex: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.menu-action-description {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-action-row:hover:not([disabled]) {
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

.menu-action-row:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
    border-color: transparent;
}

.menu-action-label {
    flex: 1;
    min-width: 0;
}

.menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.menu-item-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

.menu-item-icon--blue {
    color: var(--accent-blue);
    background: var(--accent-blue-bg);
    border-color: color-mix(in srgb, var(--accent-blue) 22%, transparent);
}

.menu-item-icon--violet {
    color: var(--accent-violet);
    background: color-mix(in srgb, var(--accent-violet) 12%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-violet) 22%, transparent);
}

.menu-item-icon--green {
    color: var(--accent-green);
    background: var(--accent-green-bg);
    border-color: color-mix(in srgb, var(--accent-green) 22%, transparent);
}

.menu-item-icon--amber {
    color: var(--accent-amber);
    background: var(--accent-amber-bg);
    border-color: color-mix(in srgb, var(--accent-amber) 22%, transparent);
}

.action-trigger-item[disabled] {
    opacity: 0.5;
    cursor: default;
}

.action-trigger-item.has-tab {
    opacity: 0.6;
}

.action-trigger-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.has-tab-indicator {
    font-size: 0.75em;
    color: var(--text-tertiary);
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--bg-active);
}

.edit-action-btn {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.edit-action-btn:hover {
    opacity: 1;
}

/* Review status badges (Task 229) */
.review-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 28px;
    font-size: 11px;
    padding: 0 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 8px;
}
.review-status-badge--ai-draft {
    background: var(--accent-amber-bg, #fef3c7);
    color: var(--accent-amber, #92400e);
}
.review-status-badge--user-draft {
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-blue, #1e40af);
}
.review-status-badge--approved {
    background: var(--accent-green-bg, #d1fae5);
    color: var(--accent-green, #065f46);
}

/* Task 373: user-storage sync badge (4 states) + per-workflow summary */
.user-storage-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--space-6);
    font-size: 11px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    margin-right: 6px;
}
.user-storage-badge svg { width: 13px; height: 13px; }
.user-storage-badge--icon {
    height: auto;
    padding: 0;
    background: none;
    margin-right: 4px;
}
/* Per-artifact sync badge inside a workflow card: vertically centered (the card is
   align-items: flex-start), and the actively-uploading state sits in a colored disc. */
.workflow-card > .user-storage-badge--icon {
    align-self: center;
}
/* Card pending icon: no disc — just the bare arrow (centered via the rule above), pulsing
   opacity. Override the pill background that --pending would otherwise apply. */
.workflow-card > .user-storage-badge--icon.user-storage-badge--pending {
    background: none;
}
.user-storage-badge--synced {
    background: var(--accent-green-bg, #d1fae5);
    color: var(--accent-green, #065f46);
}
.user-storage-badge--pending {
    background: var(--bg-hover);
    color: var(--text-secondary);
    animation: sync-pulse 2s ease-in-out infinite;
}
.user-storage-badge--failed,
.user-storage-badge--reconnect {
    background: var(--accent-amber-bg, #fef3c7);
    color: var(--accent-amber, #92400e);
    cursor: pointer;
}
.user-storage-summary {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    color: var(--text-secondary);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px var(--space-2);
    text-transform: none;
    letter-spacing: normal;
}

.review-status-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    cursor: default;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.workflow-card > .review-status-icon {
    align-self: center;
    margin-left: auto;
}
.review-status-medallion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.review-status-medallion svg {
    display: block;
}
.review-status-badge--ai-draft .review-status-medallion {
    background: var(--accent-amber, #d97706);
}
.review-status-badge--user-draft .review-status-medallion {
    background: var(--accent-blue, #2563eb);
}
.review-status-badge--approved .review-status-medallion {
    background: var(--accent-green, #059669);
}
.review-status-badge--partial .review-status-medallion--segments {
    background: conic-gradient(
        var(--accent-green, #059669) 0 var(--review-approved-end),
        var(--accent-blue, #2563eb) var(--review-approved-end) var(--review-user-draft-end),
        var(--accent-amber, #d97706) var(--review-user-draft-end) var(--review-ai-draft-end),
        var(--border) var(--review-ai-draft-end) 100%
    );
    box-shadow: none;
}
/* --- Task 230: Participant Detail Modal & Client Frontend --- */

/* Linked participant badge */
.participant-circle--linked {
    position: relative;
    cursor: pointer;
}

.participant-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--accent-green);
    border: 1.5px solid var(--bg-card);
    border-radius: 50%;
}


/* Email sync toggle + lookback (Task 236) */
.email-sync-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.email-sync-toggle input[type="checkbox"] { width: 16px; height: 16px; }
.lookback-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.lookback-select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; }

/* Task 263: Client Dashboard Shell */

/* Content pane — flex column inside content-area, holds header + transcript */
.content-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Client header bar — persistent above transcript container.
   Scoped under #clientHeader to avoid colliding with sidebar .client-header (line ~428). */
#clientHeader .client-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0;
  border-bottom: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* The renewal Email split menu is anchored inside the header, but must paint
   over the content pane below it. Keep the normal header clipping contract and
   relax only the two clipping ancestors while an open menu is mounted. */
.content-chrome__main:has(.output-review-control__menu),
#clientHeader .client-header:has(.output-review-control__menu) {
  overflow: visible;
}

#clientHeader .client-header-logo {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
}
#clientHeader .client-header-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; overflow: hidden; }
#clientHeader .client-header-name { font-weight: 600; font-size: var(--header-row-1-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clientHeader .client-header-contact { display: flex; gap: 0.75rem; font-size: var(--header-row-2-size); color: var(--text-secondary); min-width: 0; overflow: hidden; }
#clientHeader .client-header-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clientHeader .client-header-phone { white-space: nowrap; }
#clientHeader .client-header-meta { display: flex; gap: 0.75rem; font-size: var(--header-row-3-size); color: var(--text-tertiary); min-width: 0; overflow: hidden; }
#clientHeader .client-header-location,
#clientHeader .client-header-timezone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Client dashboard — CRM grid layout */
.client-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem;
  overflow-y: auto;
}

.client-dashboard-content {
  display: contents;
}

.dashboard-toolbar,
.dashboard-draft-messages,
.client-dashboard-empty {
  grid-column: 1 / -1;
}

.dashboard-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Draft Approve/Abandon buttons sit on the right edge of the toolbar. */
.dashboard-draft-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Draft hint + approval/abandon errors, stacked just below the toolbar. */
.dashboard-draft-messages {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.client-dashboard-empty {
  padding: 1rem;
  color: var(--text-secondary);
}

/* Client metrics — CRM grid layout (Task 330) */
.client-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem;
  overflow-y: auto;
}

/* Two card families (Task 466). Shared card chrome comes from the
   .client-summary-card primitive (styles/primitives.css) — the card roots and
   the metrics sections opt in via markup. */
.dashboard-client-card,
.dashboard-portfolio {
  grid-column: 1 / -1;
}

/* Client and Policy rows share one disclosure anatomy. */
.dashboard-client-card__head,
.dashboard-policy-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}
.dashboard-client-card__toggle,
.dashboard-policy-row__toggle {
  appearance: none;
  display: flex;
  align-items: center;
  flex: 1 1 28rem;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.renewal-review details > summary {
  list-style: none;
}
.renewal-review details > summary::-webkit-details-marker {
  display: none;
}
.dashboard-client-card__toggle::before,
.dashboard-policy-row__toggle::before,
.renewal-review details > summary::before {
  content: '›';
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 1.15rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.dashboard-client-card--expanded .dashboard-client-card__toggle::before,
.dashboard-policy-row--expanded .dashboard-policy-row__toggle::before,
.renewal-review details[open] > summary::before {
  transform: rotate(90deg);
}
.dashboard-client-card__toggle:focus-visible,
.dashboard-policy-row__toggle:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.dashboard-client-card__topline,
.dashboard-client-card__status,
.dashboard-policy-row__summary,
.dashboard-policy-row__status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  min-width: 0;
}
.dashboard-client-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.dashboard-client-card__email,
.dashboard-client-card__phone { font-size: 0.85rem; color: var(--text-secondary); }
.dashboard-client-card__sep { color: var(--text-tertiary); }
.dashboard-client-card__unconfirmed {
  color: var(--accent-amber, #d97706);
  font-size: 0.9rem;
  line-height: 1;
}
.dashboard-client-card__status,
.dashboard-policy-row__status { margin-left: auto; }
.dashboard-policy-row__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  margin-right: var(--space-2);
}
.dashboard-policy-row__action:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text-primary);
}
.dashboard-policy-row__action:disabled {
  opacity: 0.5;
  cursor: default;
}
.dashboard-client-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
}
.dashboard-client-card__body-header,
.dashboard-client-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dashboard-client-card__body-header { justify-content: space-between; }
.dashboard-client-card__body-header h4 {
  margin: 0;
  font-size: var(--font-size-sm);
}
.dashboard-client-card__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}
.dashboard-client-card__fields > .profile-field,
.dashboard-client-card__fields > .dashboard-text-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.dashboard-client-card__fields .profile-field-label,
.dashboard-client-card__fields .dashboard-text-label {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.dashboard-client-card__fields .profile-field-value,
.dashboard-client-card__fields .dashboard-text-value {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-align: left;
}

.dashboard-portfolio__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.dashboard-portfolio__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.dashboard-portfolio__count {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.dashboard-portfolio__summary {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--accent-amber);
  text-align: right;
}
.dashboard-portfolio__placeholder {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin: 0.4rem 0 0;
}

.dashboard-policy-row { border-top: 1px solid var(--border-subtle); padding: var(--space-2) 0; }
.dashboard-policy-row__cell { white-space: nowrap; }
.dashboard-policy-row__cell--primary { color: var(--text-primary); font-weight: 600; }
.dashboard-policy-row__sep { color: var(--text-tertiary); }
.dashboard-policy-error { color: var(--accent-red); font-size: 0.8rem; margin: var(--space-1) 0; }

.dashboard-policy-fallback {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.dashboard-policy-fallback__fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.dashboard-policy-fallback__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.dashboard-policy-fallback__label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.dashboard-policy-fallback__value { color: var(--text-primary); font-size: var(--font-size-sm); }
.dashboard-policy-fallback__ai { margin-left: var(--space-1); color: var(--accent-amber); }
.dashboard-policy-fallback__empty,
.dashboard-policy-fallback__source {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.dashboard-policy-fallback__empty { grid-column: 1 / -1; }

/* Task 495 + compact-dashboard follow-up — dynamic Policy review/editor. */
.renewal-review {
  min-width: 0;
  overflow-wrap: anywhere;
}
.renewal-review__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.renewal-review__header,
.renewal-review__actions,
.renewal-review__control-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.renewal-review__header { justify-content: space-between; }
.renewal-review__actions { justify-content: flex-end; }
.renewal-review__header h4,
.renewal-review__item h6 { margin: 0; }
.renewal-review__header h4 { font-size: var(--font-size-sm); }
.renewal-review__fields,
.renewal-review__item-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}
.renewal-review__item-type,
.renewal-review__item,
.renewal-review__questions,
.renewal-review__disclosure,
.renewal-review__warnings,
.renewal-review__group-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.renewal-review__item-type,
.renewal-review__questions,
.renewal-review__disclosure,
.renewal-review__warnings {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.renewal-review__group > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.renewal-review__group-count {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: 400;
}
.renewal-review__group-body { padding-top: var(--space-2); }
.renewal-review__endorsements {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.renewal-review__endorsements .renewal-review__field {
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.renewal-review__endorsements .renewal-review__value {
  white-space: pre-wrap;
}
.renewal-review__endorsements textarea.renewal-review__editable-value {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  white-space: pre-wrap;
}
.renewal-review__disclosure-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.renewal-review__disclosure-section + .renewal-review__disclosure-section {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.renewal-review__disclosure-section h6 {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.renewal-review__item {
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.renewal-review__item .renewal-review__field {
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.renewal-review__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.renewal-review__label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.renewal-review__label-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.renewal-review__description {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1px solid var(--text-tertiary);
  border-radius: 50%;
  color: var(--text-tertiary);
  cursor: help;
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
  line-height: 1;
}
.renewal-review__description:hover,
.renewal-review__description:focus {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}
.renewal-review__description:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.renewal-review__evidence,
.renewal-review__guidance,
.renewal-review__questions,
.renewal-review__warning {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.renewal-review__value { color: var(--text-primary); font-size: var(--font-size-sm); }
.renewal-review__evidence {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding-top: var(--space-1);
}
.renewal-review__questions p,
.renewal-review__disclosure p {
  margin: 0;
}
.renewal-review__control-row { min-width: 0; width: 100%; }
.renewal-review__control-main {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.renewal-review__control-main > input:not([type="checkbox"]),
.renewal-review__control-main > select { min-width: 0; flex: 1 1 12rem; }
/* Native-control twin of the Client card's borderless contenteditable values. */
.renewal-review__editable-value {
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--bg-hover);
  box-shadow: none;
  color: var(--text-primary);
  font: inherit;
  line-height: var(--line-height-tight);
  min-width: 0;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color 0.15s;
}
.renewal-review__editable-value:not(:disabled):hover {
  background-color: var(--bg-hover);
}
.renewal-review__editable-value:focus {
  background-color: var(--bg-active);
  outline: none;
}
select.renewal-review__editable-value { cursor: pointer; }
.renewal-review__boolean-toggle { gap: 0; }
.renewal-review__boolean-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  min-height: 24px;
  padding: 0 1.4rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  line-height: var(--line-height-normal);
  transition: background var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}
.renewal-review__boolean-switch::before {
  content: '';
  position: absolute;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--elevation-1);
  transition: left var(--duration-base) var(--ease-standard);
}
.renewal-review__boolean-toggle .toggle__input:checked + .renewal-review__boolean-switch::before {
  left: calc(100% - 18px);
}
.renewal-review__boolean-toggle .toggle__input:focus-visible + .renewal-review__boolean-switch {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}
.renewal-review__missing-toggle {
  flex: 0 0 3.25rem;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  margin-left: auto;
}
.renewal-review__missing-toggle .toggle__label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.renewal-review__boolean-toggle:has(.toggle__input:disabled),
.renewal-review__missing-toggle:has(.toggle__input:disabled) {
  cursor: not-allowed;
  opacity: 0.65;
}
.renewal-review__distribution,
.renewal-review__distribution-inputs {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.renewal-review__distribution-inputs { flex: 1 1 auto; }
.renewal-review__distribution-row,
.renewal-review__distribution-total,
.renewal-review__distribution-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.renewal-review__distribution-row,
.renewal-review__distribution-total {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.renewal-review__distribution-total {
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
  font-weight: 600;
}
.renewal-review__distribution-label {
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}
.renewal-review__distribution-member > input {
  flex: 0 1 7rem;
  min-width: 0;
}
.renewal-review__distribution-error {
  min-width: 0;
  color: var(--accent-red);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

@media (max-width: 1500px) {
  .dashboard-client-card__fields,
  .renewal-review__fields,
  .renewal-review__item-fields,
  .dashboard-policy-fallback__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-client-card__toggle,
  .dashboard-policy-row__toggle { flex-basis: 100%; }
  .dashboard-client-card__status,
  .dashboard-policy-row__status { width: 100%; margin-left: 1.35rem; }
  .dashboard-client-card__fields,
  .renewal-review__fields,
  .renewal-review__item-fields,
  .dashboard-policy-fallback__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .renewal-review__actions { align-items: stretch; width: 100%; }
  .renewal-review__actions .output-review-control { flex: 1 1 100%; }
  .renewal-review__control-main > input:not([type="checkbox"]),
  .renewal-review__control-main > select { width: 100%; }
}

/* Profile fields */
.profile-field {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.profile-field:last-child { border-bottom: none; }
.profile-field-label { color: var(--text-secondary); font-size: 0.8rem; }
.profile-field-value { font-size: 0.8rem; color: var(--text-tertiary); text-align: right; }
/* Groups the label with its trailing AI marker so the marker reads as part of
   the label and the value still sits on the right (parent is space-between). */
.profile-field-labelgroup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* AI-provenance indicator: amber ✦ star matching the AI-draft card badge
   (.review-status-icon.review-status-badge--ai-draft), appended to the label. */
.profile-field-ai-marker {
  margin-left: 0.3rem;
  color: var(--accent-amber, #d97706);
  font-size: 0.9rem;
  line-height: 1;
  vertical-align: middle;
}

.profile-field--editing,
.dashboard-text-field--editing {
  align-items: center;
}

.dashboard-editable-value {
  background-color: var(--bg-hover);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  min-width: 0;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color 0.15s;
}
.dashboard-editable-value[contenteditable="true"]:hover {
  background-color: var(--bg-hover);
}
.dashboard-editable-value[contenteditable="true"]:focus {
  background-color: var(--bg-active);
  outline: none;
}
.profile-field--editing .dashboard-editable-value {
  flex: 1 1 auto;
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
  text-align: right;
  white-space: pre-wrap;
}
.dashboard-editable-value--block {
  display: block;
  min-height: 1.2em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  width: 100%;
}

.dashboard-error {
  color: var(--accent-red);
  font-size: 0.8rem;
}

.dashboard-activation-email {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* Text field sections (description, insurance strategy) */
.dashboard-text-field {
  margin-bottom: 0.4rem;
}
.dashboard-text-field:last-child { margin-bottom: 0; }
.dashboard-text-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
  display: block;
}
.dashboard-text-value {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.4;
}

/* Full-width sections */
.metrics-overview { grid-column: 1 / -1; }

/* Client documents list (Docs tab) */
.client-documents-list { padding: 1rem; }
.dashboard-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-subtle);
}
.dashboard-doc-download { font-size: 0.85rem; cursor: pointer; }

/* Notes tab — compose area (Task 271) */
.new-note-area {
    padding: 12px;
    display: flow-root; /* contain floated .note-save-btn — BUG-093 */
    margin-bottom: 12px; /* gap to first note card — BUG-093 */
}
.note-textarea {
    width: 100%;
    resize: vertical;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-hover);
    color: var(--text-primary);
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.note-textarea:focus {
    border-color: var(--text-primary);
    outline: none;
}
.note-textarea::placeholder {
    color: var(--text-tertiary);
}
.note-card {
    max-width: 100%;
    margin-left: 12px; /* align with .new-note-area inner content — BUG-093 */
    margin-right: 12px;
    /* Card chrome carried over from the deleted Task-270 bubble base
       (Task 475 — notes own their classes now). */
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md, 6px);
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.note-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.75rem;
    background: var(--bg-hover);
    margin: -10px -14px 8px -14px;
    padding: 8px 14px 6px 14px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-md, 6px) var(--radius-md, 6px) 0 0;
}
.note-save-btn {
    margin-top: 8px;
    float: right;
    padding: 4px 12px;
    font-size: 12px;
}
.note-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Notes tab — edit actions */
.note-edit-actions {
    padding: 4px 12px 8px;
    text-align: right;
}
.edit-note-btn,
.save-edit-btn,
.cancel-edit-btn {
    font-size: 0.75rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--accent-blue);
    padding: 2px 6px;
}
.edit-note-btn:hover,
.save-edit-btn:hover,
.cancel-edit-btn:hover {
    text-decoration: underline;
}

/* Note card body (Task 271; classes own since Task 475) — preserves
   multiline plain text + carries the wrap/containment the body inherited
   from the deleted Task-270 block. */
.note-card__body {
    font-size: 0.8rem;
    line-height: 1.5;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}
.note-card__body img { max-width: 100%; height: auto; }
.note-card__body table { max-width: 100%; table-layout: fixed; overflow: hidden; }
.note-card__body pre { overflow-x: auto; max-width: 100%; }

/* Note save error feedback */
.note-error {
    color: var(--error-color, #d32f2f);
    font-size: 0.8rem;
    margin-top: 4px;
    padding: 0 4px;
}

/* Note card in editing mode */
.note-card.editing .note-edit-textarea {
    width: calc(100% - 24px);
    margin: 0 12px;
}

/* ═══════════════════════════════════════════════════════════════
   AUTH MODALS — Task 292
   ═══════════════════════════════════════════════════════════════ */
/* Layout dimensions (380px panel width, 90vw fallback) are component-local
   structural constants — no corresponding width token exists in tokens.css;
   matches the settings modal precedent in primitives.css (900px literal).
   If a --modal-width-auth token is introduced later, substitute both values
   here in one place. */
.auth-modal__panel {
    width: 380px;
    max-width: 90vw;
}
.auth-modal__body {
    padding: var(--space-5) var(--space-6);
}
.auth-modal__subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}
.auth-modal__oauth {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.auth-modal__oauth-error {
    color: var(--accent-red);
    font-size: var(--font-size-sm);
    display: none;
}
.auth-modal__oauth-error.visible { display: block; }
.auth-modal__switch {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}
.auth-modal__switch a { color: var(--accent-blue); }

/* PROMPT EDITOR — Task 297 */
/* Multi-panel form archetype (design-system.md §4.4): variable panel | editor | test panel */
.prompt-editor__panel {
  width: min(96vw, 920px);
  height: 92vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
  transition: width var(--duration-base) var(--ease-standard);
}
.prompt-editor__panel--test-open .prompt-editor__panel {
  width: min(96vw, 1400px);
}
.prompt-editor__body {
  display: grid;
  grid-template-columns: 280px 1fr 0fr;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  overflow: auto;
  transition: grid-template-columns var(--duration-base) var(--ease-standard);
}
.prompt-editor__panel--test-open .prompt-editor__body {
  grid-template-columns: 280px 1fr 480px;
}
.prompt-editor__variable-panel {
  border-right: 1px solid var(--border-subtle);
  padding-right: var(--space-3);
  overflow: auto;
}
.prompt-editor__center {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
}
.prompt-editor__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.prompt-editor__form .form-field--block {
  flex: 1;
  min-height: 0;
}
.prompt-editor__form .form-field--block .form-field__control {
  flex: 1;
  min-height: 0;
}
.prompt-editor__footer {
  justify-content: space-between;
  gap: var(--space-3);
}
.prompt-editor__test-btn { flex: 0 0 auto; }
.prompt-editor__form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.prompt-editor__form textarea {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  resize: none;
}

/* Highlight overlay rules (recovered from pre-9c524e33). The textarea rule
   is re-anchored to .form-field__control .prompt-highlight-wrap textarea
   (0,3,1) so it beats the .form-field__control textarea primitive (0,2,1)
   after the symptom-2 wrapper landed. */
.prompt-highlight-wrap {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
}

.prompt-highlight-overlay {
  position: absolute;
  inset: 0;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-sidebar);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  pointer-events: none;
}

.prompt-highlight-overlay .prompt-variable-pill {
  padding: 0 4px;
  margin: -1px 0;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.form-field__control .prompt-highlight-wrap textarea {
  flex: 1;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  position: relative;
  caret-color: var(--text-primary);
}

.form-field__control .prompt-highlight-wrap textarea:focus {
  border-color: var(--border-focus);
}

.prompt-editor__version-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  margin-right: var(--space-2);
}
.prompt-editor__version-btn { padding: var(--space-1); }
.prompt-editor__version-display {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.prompt-editor__fork-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--accent-amber-bg);
  color: var(--text-primary);
  border: 1px solid var(--accent-amber);
  font-size: var(--font-size-sm);
}
/* The base rule above sets display:flex which beats the HTML [hidden]
   attribute. This restores the expected hide behaviour. */
.prompt-editor__fork-banner[hidden] {
  display: none;
}
.prompt-editor__error {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--accent-red-bg);
  color: var(--accent-red);
  font-size: var(--font-size-sm);
}
.prompt-editor__test-panel {
  border-left: 1px solid var(--border-subtle);
  padding-left: var(--space-3);
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.prompt-editor__panel--test-open .prompt-editor__test-panel {
  opacity: 1;
  pointer-events: auto;
}
.prompt-editor__test-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-2);
}
/* BUG-104: inline notice banner inside the test panel (e.g. when a client
   has no linked conversations). Mirrors .prompt-editor__fork-banner amber
   styling but does not set display:flex so the native [hidden] works. */
.prompt-editor__test-notice {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--accent-amber-bg);
  color: var(--text-primary);
  border: 1px solid var(--accent-amber);
  font-size: var(--font-size-sm);
}

/* Variable panel inner content — promptVariableView.render() output */
.prompt-variable-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prompt-variable-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.prompt-variable-toggle {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
}
.prompt-variable-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.prompt-variable-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  cursor: pointer;
  margin-bottom: 1px;
}
.prompt-variable-item:hover .prompt-variable-pill {
  filter: brightness(1.15);
}
.prompt-variable-pill {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.prompt-variable-pill--variable { border-color: #5b8def; background: rgba(91, 141, 239, 0.10); }
.prompt-variable-pill--document { border-color: #34b27b; background: rgba(52, 178, 123, 0.10); }
.prompt-variable-pill--image    { border-color: #a678e0; background: rgba(166, 120, 224, 0.10); }
.prompt-variable-pill--action   { border-color: #e0a040; background: rgba(224, 160, 64, 0.10); }
.prompt-variable-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--text-tertiary);
  font-size: 10px;
  font-style: italic;
  font-family: Georgia, serif;
  color: var(--text-tertiary);
  flex-shrink: 0;
  cursor: default;
  line-height: 1;
}
.prompt-variable-info:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}
.prompt-variable-tooltip-content {
  display: none;
}
.prompt-variable-tooltip {
  display: none;
  position: fixed;
  background: var(--bg-sidebar);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 12px;
  font-style: normal;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  white-space: nowrap;
  text-align: left;
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.prompt-variable-tooltip.visible {
  display: block;
}
.prompt-variable-tooltip code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-blue);
}
.prompt-variable-section {
  margin-bottom: 4px;
}
.prompt-variable-section-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.prompt-variable-section-header:hover {
  background: var(--bg-hover);
}
.prompt-variable-chevron {
  transition: transform 0.15s ease;
  flex-shrink: 0;
  color: var(--text-tertiary);
}
.prompt-variable-section.collapsed .prompt-variable-chevron {
  transform: rotate(-90deg);
}
.prompt-variable-section.collapsed .prompt-variable-section-body {
  display: none;
}
.prompt-variable-empty {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Task 298 — Phase 7 participant info modal (item 15a). */
.participant-info-modal__panel {
  max-width: 420px;
  width: 100%;
}
.participant-info-modal__body {
  color: var(--text-primary);
}
@media (max-width: 480px) {
  .participant-info-modal__panel {
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}

/* Task 298 — Commit 3: participant modal (item 13 form archetype migrated to
   ModalShell + SaveBar). Token-driven, no legacy color vars. */
.participant-modal__panel {
  max-width: 480px;
  width: 100%;
}
.participant-modal__body {
  gap: var(--space-4);
}
.participant-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.participant-modal__aux-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-3);
}
@media (max-width: 480px) {
  .participant-modal__panel {
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}

/* Task 298 — Commit 4: client detail modal (item 14 form archetype migrated
   to ModalShell + single SaveBar). Token-driven. */
.client-detail-modal__panel {
  max-width: 560px;
  width: 100%;
}
.client-detail-modal__body {
  gap: var(--space-4);
}
.client-detail-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.client-detail-modal__form .email-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.client-detail-modal__form .email-chip {
  background: var(--bg-hover);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.client-detail-modal__form .sync-status {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.client-detail-modal__error,
.client-editor__error {
  display: block;
  color: var(--accent-red);
  background: var(--accent-red-bg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: var(--space-2) var(--space-5) 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.client-detail-modal__error:empty,
.client-editor__error:empty {
  display: none;
}
.client-detail-modal__footer {
  gap: var(--space-3);
}
.client-detail-modal__unlink {
  margin-right: auto;
}
@media (max-width: 600px) {
  .client-detail-modal__panel {
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}

/* Task 298 — Commit 5: client editor modal (item 15b form archetype).
   Token-driven. 720px panel + mobile takeover. */
.client-editor__panel {
  max-width: 560px;
  width: 100%;
}
.client-editor__body {
  gap: var(--space-4);
  max-height: 70vh;
  overflow-y: auto;
}
.client-editor__mode-toggle {
  display: flex;
  gap: 0;
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}
/* ADR-047 — author display:flex (0,1,0) defeats native [hidden] (0,0,0). */
.client-editor__mode-toggle[hidden] {
  display: none;
}
.client-editor__mode-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}
.client-editor__mode-btn--active {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 500;
}
.client-editor__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.client-editor__email-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.client-editor__email-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  /* Align under the input column using the shared modal form geometry. */
  padding-inline-start: var(--modal-form-control-offset);
}
.client-editor__email-chip-list .email-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-hover);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}
.client-editor__email-chip-list .email-chip__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
}
.client-editor__preview {
  display: flex;
  flex-direction: column;
  /* No gap — .section-label owns its margin-bottom; list spacing follows. */
}
.client-editor__preview-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.client-editor__preview-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.client-editor__preview-row--excluded {
  opacity: 0.5;
}
.client-editor__preview-row--linked {
  opacity: 0.6;
}
.client-editor__preview-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.client-editor__preview-row-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.client-editor__preview-row-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.client-editor__preview-row-status {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}
.client-editor__preview-row-status--will-link {
  font-style: normal;
  font-weight: 500;
  color: var(--accent-text, #fff);
  background: var(--accent-amber);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}
.client-editor__preview-row-aside {
  display: flex;
  flex-shrink: 0;
}
/* Exclude/Include button stretches to the row height — no `height` from btn-sm. */
.client-editor__preview-row-aside .btn {
  height: auto;
  align-self: stretch;
}
.client-editor__preview-row-meta {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-editor__conflicts {
  background: var(--bg-hover);
  border: 1px solid var(--accent-amber);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}
@media (max-width: 480px) {
  .client-editor__panel {
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
  }
  .client-editor__body { max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CLIENT ASK — grounded agent workspace (Tasks 334/498)
   A quiet research canvas: compact chat rail, editorial assistant answers,
   explicit evidence cards, and a persistent composer. Tokens provide theme.
   ═══════════════════════════════════════════════════════════════ */
.client-ask {
  display: grid;
  grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
}
.client-ask--history-collapsed { grid-template-columns: 56px minmax(0, 1fr); }

/* Ask-local chat history. */
.ask-history {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--space-3);
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
}
.client-ask--history-collapsed .ask-history__list,
.client-ask--history-collapsed .ask-history__toggle-label,
.client-ask--history-collapsed [data-ask-new-chat] { display: none; }
.client-ask--history-collapsed .ask-history { padding-inline: var(--space-2); }
.client-ask--history-collapsed .ask-history__header { justify-content: center; }
.client-ask--history-collapsed .ask-history__toggle { width: 36px; padding-inline: 0; }
.ask-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 36px;
}
.ask-history__toggle { color: var(--text-secondary); }
.ask-history__toggle-icon {
  font-size: 15px;
  line-height: 1;
  transform: scaleX(0.86);
}
.ask-history__new { white-space: nowrap; }
.ask-history__list {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  margin-top: var(--space-3);
  overflow-y: auto;
  scrollbar-width: thin;
}
.ask-history__row {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-md);
}
.ask-history__session {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 9px 58px 9px 10px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.ask-history__session:hover { background: var(--bg-hover); color: var(--text-primary); }
.ask-history__row[aria-current="true"] .ask-history__session {
  border-color: var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-sm);
}
.ask-history__archive {
  position: absolute;
  top: 5px;
  right: 4px;
  height: 28px;
  padding-inline: 7px;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.ask-history__row:hover .ask-history__archive,
.ask-history__row:focus-within .ask-history__archive { opacity: 1; }
.ask-history__loading,
.ask-history__empty,
.ask-history__recovery {
  margin: var(--space-3) var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}
.ask-history__load-more { justify-self: start; margin-top: var(--space-2); }

/* Active conversation header and canvas. */
.ask-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}
.ask-main__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: 10px var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.ask-main__heading { min-width: 0; }
.ask-main__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}
.ask-main__heading h2 {
  max-width: min(56vw, 620px);
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-conversation {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin-inline: 0;
  overflow: hidden;
}
.ask-timeline {
  flex: 1 1 auto;
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--text-tertiary) transparent;
}
.ask-timeline::-webkit-scrollbar { width: 6px; }
.ask-timeline::-webkit-scrollbar-track { background: transparent; }
.ask-timeline::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--text-tertiary);
}
.ask-timeline__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 760px;
  min-height: 100%;
  margin-inline: auto;
  padding: var(--space-8) var(--space-2) var(--space-5);
}
.ask-timeline__earlier { align-self: center; }

/* Empty canvas: explains the value and evidence contract before first send. */
.ask-empty {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 510px;
  margin: auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.ask-empty__mark {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: var(--space-4);
  place-items: center;
}
.ask-empty-mark { width: 44px; height: 44px; }
.ask-empty__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ask-empty-title {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.025em;
  line-height: var(--line-height-tight);
}
.ask-empty__description {
  max-width: 470px;
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
}

/* User questions are compact bubbles; Tenzi answers read as documents. */
.ask-message {
  position: relative;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
}
.ask-message--user {
  align-self: flex-end;
  max-width: min(78%, 610px);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl);
  background: var(--bg-subtle);
}
.ask-message--assistant {
  align-self: stretch;
  width: 100%;
  max-width: none;
  padding: 1px 0 0 46px;
  background: transparent;
}
.ask-message--assistant::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: transparent url("assets/icons/tenzi-arcs-small.svg") center / 24px 24px no-repeat;
  content: "";
}
.ask-message__content { overflow-wrap: anywhere; }
.ask-message__content--markdown > :first-child { margin-top: 0; }
.ask-message__content--markdown > :last-child { margin-bottom: 0; }
.ask-message__content--markdown p { margin: 0 0 var(--space-3); }
.ask-message__content--markdown h1,
.ask-message__content--markdown h2,
.ask-message__content--markdown h3,
.ask-message__content--markdown h4,
.ask-message__content--markdown h5,
.ask-message__content--markdown h6 {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
.ask-message__content--markdown ul,
.ask-message__content--markdown ol { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-5); }
.ask-message__content--markdown li + li { margin-top: 6px; }
.ask-message__content--markdown blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--border);
  color: var(--text-secondary);
}
.ask-message__content--markdown code {
  padding: 1px 5px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.ask-message__content--markdown pre {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--slate-900);
  color: var(--slate-100);
}
.ask-message__content--markdown pre code { padding: 0; border: 0; background: transparent; color: inherit; }
.ask-message__content--markdown table {
  width: 100%;
  margin: var(--space-4) 0;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.ask-message__content--markdown th,
.ask-message__content--markdown td { padding: var(--space-2); border: 1px solid var(--border); text-align: left; }

/* Evidence is secondary at rest, inspectable on demand, and source-first. */
.ask-citations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.ask-citation {
  flex: 1 1 220px;
  max-width: 330px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.ask-citation[open] { flex-basis: 100%; max-width: 100%; }
.ask-citation summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  list-style: none;
  cursor: pointer;
}
.ask-citation summary::-webkit-details-marker { display: none; }
.ask-citation summary > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-citation summary::after {
  margin-left: auto;
  color: var(--text-tertiary);
  content: "+";
  font-size: 16px;
  font-weight: var(--font-weight-regular);
}
.ask-citation[open] summary::after { content: "−"; }
.ask-citation__icon {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent-blue-bg);
}
.ask-citation__icon::before {
  position: absolute;
  inset: 6px 7px 5px;
  border: 1px solid var(--accent-blue);
  border-radius: 1px;
  content: "";
}
.ask-citation__body { padding: 0 var(--space-3) var(--space-3) 42px; }
.ask-citation__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--text-tertiary);
  font-size: 11px;
}
.ask-citation__meta span:not(:last-child)::after { margin-left: 5px; content: "·"; }
.ask-citation__snippet {
  margin: var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}
.ask-citation__open { margin-top: var(--space-1); }

/* Closed, read-only explanation of how a completed Ask answer was produced. */
.client-ask .ask-workings {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}
.client-ask .ask-workings > summary,
.client-ask .ask-workings__technical > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: var(--space-2) 0;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
  list-style: none;
  cursor: pointer;
}
.client-ask .ask-workings > summary::-webkit-details-marker,
.client-ask .ask-workings__technical > summary::-webkit-details-marker { display: none; }
.client-ask .ask-workings > summary::after,
.client-ask .ask-workings__technical > summary::after {
  margin-left: auto;
  color: var(--text-tertiary);
  content: "+";
}
.client-ask .ask-workings[open] > summary::after,
.client-ask .ask-workings__technical[open] > summary::after { content: "−"; }
.client-ask .ask-workings > summary:focus-visible,
.client-ask .ask-workings__technical > summary:focus-visible {
  border-radius: var(--radius-xs);
}
.client-ask .ask-workings__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-1) 0 var(--space-2);
}
.client-ask .ask-workings__summary,
.client-ask .ask-workings__usage dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.client-ask .ask-workings__row,
.client-ask .ask-workings__source-group {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.client-ask .ask-workings__row dt,
.client-ask .ask-workings__source-group dt {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.client-ask .ask-workings__row dd,
.client-ask .ask-workings__source-group dd { min-width: 0; margin: 0; }
.client-ask .ask-workings__outcome dd {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}
.client-ask .ask-workings__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-ask .ask-workings__chips li {
  padding: 2px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.client-ask .ask-workings__evidence,
.client-ask .ask-workings__partial {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
}
.client-ask .ask-workings__partial {
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + var(--space-4));
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-xs);
  background: var(--accent-amber-bg);
  color: var(--text-primary);
}
.client-ask .ask-workings__alternate {
  margin: var(--space-3) 0 0;
  color: var(--text-secondary);
}
.client-ask .ask-workings__technical {
  border-top: 1px solid var(--border-subtle);
}
.client-ask .ask-workings__technical-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-3);
}
.client-ask .ask-workings__technical-body h4 {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.client-ask .ask-workings__model p,
.client-ask .ask-workings__unavailable,
.client-ask .ask-workings__overflow { margin: 0; }
.client-ask .ask-workings__unavailable { color: var(--text-tertiary); }
.client-ask .ask-workings__receipts {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-ask .ask-workings__receipt {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(72px, auto));
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: var(--font-size-xs);
}
.client-ask .ask-workings__receipt-operation {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}
.client-ask .ask-workings__overflow {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}

/* Progress and errors use explicit, calm status surfaces. */
.ask-answer-progress { color: var(--text-secondary); font-size: var(--font-size-sm); }
.ask-answer-progress--generating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: 46px;
}
.ask-answer-progress__dots { display: inline-flex; gap: 4px; }
.ask-answer-progress__dots i {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--text-tertiary);
  animation: ask-progress-pulse 1.2s infinite var(--ease-standard);
}
.ask-answer-progress__dots i:nth-child(2) { animation-delay: 140ms; }
.ask-answer-progress__dots i:nth-child(3) { animation-delay: 280ms; }
@keyframes ask-progress-pulse {
  0%, 70%, 100% { opacity: 0.35; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}
.ask-operation-error,
.ask-history__error,
.ask-message__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: var(--space-3);
  border: 1px solid var(--accent-red-bg);
  border-radius: var(--radius-md);
  background: var(--accent-red-bg);
  color: var(--accent-red);
  font-size: var(--font-size-xs);
}
.ask-main > .ask-operation-error {
  width: calc(100% - 2 * var(--space-8));
  max-width: 760px;
  margin: 0 auto var(--space-2);
}

/* Composer remains anchored while the conversation scrolls. */
.ask-composer {
  flex: 0 0 auto;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: 0 var(--space-2) var(--space-4);
}
.ask-suggested-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.ask-suggested-prompt {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.ask-suggested-prompt:hover {
  border-color: var(--text-tertiary);
  background: var(--bg-hover);
  color: var(--text-primary);
}
.ask-input-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  min-height: 56px;
  padding: 9px 9px 9px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.ask-input {
  flex: 1;
  min-width: 0;
  min-height: 24px;
  max-height: 160px;
  padding: 7px 0 6px;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  resize: none;
}
.ask-input::placeholder { color: var(--text-tertiary); }
.client-ask .ask-input:focus-visible { outline: 0; }
.ask-input:disabled { color: var(--text-tertiary); cursor: not-allowed; }
.ask-send-btn {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--accent-primary);
  color: var(--accent-text);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.ask-send-btn:hover:not(:disabled) { opacity: 0.82; }
.ask-send-btn:active:not(:disabled) { transform: scale(0.96); }
.ask-send-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.ask-composer__hint {
  margin: var(--space-2) 0 0;
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: var(--line-height-normal);
  text-align: center;
}

.client-ask :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.client-ask :disabled { cursor: not-allowed; opacity: 0.5; }

@media (hover: none) {
  .ask-history__archive { opacity: 1; }
}
@media (max-width: 720px) {
  .client-ask { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .client-ask--history-collapsed { grid-template-columns: 1fr; }
  .client-ask .ask-history {
    max-height: min(220px, 34vh);
    padding: var(--space-2) var(--space-3);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .client-ask--history-collapsed .ask-history { padding-inline: var(--space-3); }
  .client-ask--history-collapsed .ask-history__header { justify-content: flex-start; }
  .client-ask--history-collapsed .ask-history__toggle { width: auto; padding-inline: var(--space-3); }
  .client-ask--history-collapsed .ask-history__toggle-label { display: inline; }
  .ask-history__list { margin-top: var(--space-2); }
  .ask-main__header { min-height: 54px; padding-inline: var(--space-4); }
  .ask-timeline__content { padding: var(--space-5) var(--space-4); }
  .ask-composer { padding: 0 var(--space-4) var(--space-3); }
  .ask-suggested-prompts { flex-wrap: nowrap; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
  .ask-suggested-prompt { flex: 0 0 auto; }
  .client-ask .ask-workings__receipt {
    grid-template-columns: minmax(0, 1fr) repeat(2, auto);
  }
  .client-ask .ask-workings__receipt-operation { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .ask-main__heading h2 { max-width: 78vw; }
  .ask-empty { padding-block: var(--space-6); }
  .ask-empty-title { font-size: 24px; }
  .ask-empty__description { font-size: var(--font-size-sm); }
  .ask-message--user { max-width: 88%; }
  .ask-message--assistant { padding-left: 40px; }
  .ask-message--assistant::before { width: 28px; height: 28px; }
  .ask-citation { flex-basis: 100%; max-width: 100%; }
  .ask-composer__hint { display: none; }
  .client-ask .ask-workings__row,
  .client-ask .ask-workings__source-group { grid-template-columns: 1fr; gap: 2px; }
  .client-ask .ask-workings__receipt { display: flex; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-answer-progress__dots i { animation: none; opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSABLE WIZARD SHELL (Task 370 — Release 006 Phase 0 P0-2)
   Per-modal CSS; primitive extraction deferred to second wizard surface.
   ═══════════════════════════════════════════════════════════════ */
.wizard-modal__panel {
  max-width: 760px;
  width: 100%;
  max-height: min(840px, calc(100vh - var(--space-8)));
}
.wizard-modal__body  {
  gap: 24px;
  min-height: 0;
  overflow-y: auto;
}
#wizardBody {
  min-height: 0;
}

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.wizard-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-tertiary);
}
.wizard-step.active .wizard-step-circle {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  font-weight: 600;
}
.wizard-step.done .wizard-step-circle {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-card);
}
.wizard-step.skippable .wizard-step-circle {
  border-style: dashed;
}
.wizard-step-label {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.3;
}
.wizard-step.active .wizard-step-label {
  color: var(--text-primary);
  font-weight: 500;
}
.wizard-step.done .wizard-step-label {
  color: var(--text-secondary);
}
.wizard-step-divider {
  flex: 1;
  height: 2px;
  background: var(--border);
}

/* Global `.btn[hidden]{display:none}` lives in styles/primitives.css (ADR-047);
 * #wizardSkipBtn's `[hidden]` attribute is honoured by that rule. No per-modal
 * companion needed. */

/* ============================================================================
 * Task 375 — Pre-renewal schedule cleanup (rail accent, wizard collector,
 * content-pane PDF-overlay keep/drop review). Overlay boxes are positioned PURELY
 * by the inline bbox_pct percentages within .sched-page — no DPI / page dimensions
 * / scale on the client (load-bearing invariant #1).
 * ========================================================================== */

/* Rail card accent + "Pre-renewal" add-dropdown entry */
.workflow-card--schedule .workflow-card-icon { background: var(--step-bg-document, #eef2ff); }

/* Wizard upload collectors */
.schedules-step { display: flex; flex-direction: column; gap: var(--space-4); }
.schedules-step__picker { margin: 0; }
.schedules-step__picker .form-field__control { width: auto; }
.schedules-step__toggle { align-self: flex-start; }
.schedules-step__files:empty,
.declarations-step [data-declaration-list]:empty {
  display: none;
}
.declarations-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.declarations-step__bucket {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: var(--space-3);
}
.declarations-step__bucket-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}
.declarations-step__bucket-copy .section-label {
  margin: 0;
}
.declarations-step__bucket-copy p {
  margin: 0;
}
.document-naming-control {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  margin-top: var(--space-1);
  text-align: left;
  cursor: default;
}
.upload-modal__drop-zone > .document-naming-control {
  /* Keep the row in flow so the drop zone retains its intrinsic height, then
   * use the existing bottom padding to create a larger visual gap above it. */
  position: relative;
  top: var(--space-5);
}
.document-naming-control__toggle {
  flex: 0 0 auto;
}
.document-naming-control__toggle .toggle__label {
  white-space: nowrap;
}
.document-naming-control__preview {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  font-style: italic;
  line-height: var(--line-height-normal);
}
.declarations-step__picker {
  margin: 0;
}
.declarations-step__toggle {
  align-self: flex-start;
}
.declarations-step__toggle .toggle__label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.declarations-step__toggle-note {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}
/* Task 477 — renewal-review per-policy groups (declarations-step sibling;
   composes tokens/primitives only). */
.renewal-groups__region {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.renewal-groups__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.renewal-groups__card-title {
  margin: 0;
}
.renewal-groups__add {
  align-self: flex-start;
}
.wizard-upload-list {
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.wizard-upload-list__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0;
}
.wizard-upload-list__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.wizard-upload-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.wizard-upload-list__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 2px var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
}
.wizard-upload-list__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wizard-upload-list__size {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.wizard-upload-list__remove {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1;
}
.wizard-upload-list__remove:hover,
.wizard-upload-list__remove:focus-visible {
  border-color: var(--border);
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Schedule-clean has bounded review columns. The PDF and policy-list columns
   own scrolling; the tab wrapper must not add a third pane-level scrollbar. */
.transcript-tab-content[data-tab="schedule-clean"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.transcript-tab-content.hidden[data-tab="schedule-clean"] {
  display: none;
}
.transcript-tab-content[data-tab="schedule-clean"] > .sched-review {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}
.transcript-tab-content[data-tab="schedule-clean"] > .pane-state {
  min-height: 0;
}
.transcript-tab-content[data-tab="schedule-clean"] > .sched-review--not-applicable {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
}
.sched-review--not-applicable > .pane-state {
  flex: 1 1 auto;
}

/* Bounded two-column pane: the PDF review fills the main space; schedule
   metadata keeps the same width token as the app sidebar/workflow rail. */
.sched-review {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(340px, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "meta pdf";
  align-items: stretch;
  gap: var(--space-5);
  /* The pane no longer has a review bar above it (the review control moved to
     the content header in Task 411), so the content butted against the edges.
     Restore breathing room with a small inset. */
  padding: 10px;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
.sched-review__pdf {
  grid-area: pdf;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.sched-review__pdf-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  background: var(--bg-app);
}
.sched-review__pdf-loading > .pane-state { flex: 1 1 auto; }
.sched-review__pdf-loading[hidden] { display: none; }
.sched-review__pdf:not(.sched-review__pdf--ready) .sched-source__pages,
.sched-review__pdf:not(.sched-review__pdf--ready) .sched-missing-bbox {
  visibility: hidden;
}
/* Sidebar: one bordered column — a fixed header over a scrolling body of
   policy lists. Flat; the only cards are the policy items. */
.sched-review__meta {
  grid-area: meta;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.sched-review__header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-inline: 0 var(--space-3);
  box-sizing: border-box;
}
.sched-review__header h3 { margin: 0; }
.sched-review__document {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.sched-review__filename {
  width: 100%;
}
/* Compact download action beneath the document heading. */
.sched-review__actions {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  align-items: stretch;
}
.sched-review__actions .btn { flex: 1; height: auto; min-height: 32px; }
.sched-download:disabled {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  background: var(--bg-subtle);
  cursor: not-allowed;
  opacity: 1;
}
/* A source section in the (multi-source) scroll body — flat, no card chrome. */
.sched-meta-source {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Flat label spacing: section labels use the sidebar's flex gaps, not their own
   margins, so the gap above a label matches the gap to its content below. */
.sched-review__meta .section-label { margin: 0; }
/* Shared label/value row for policy metadata. */
.sched-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.sched-field__label { color: var(--text-secondary); font-size: var(--font-size-xs); }
.sched-field__value { color: var(--text-primary); font-size: var(--font-size-sm); font-weight: 300; }
.sched-marquee {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.sched-marquee__track {
  display: inline-block;
  min-width: max-content;
}
.sched-field__marquee {
  flex: 0 1 62%;
  max-width: 62%;
  text-align: right;
}
.sched-marquee--overflowing {
  text-align: left;
}
.sched-marquee--overflowing .sched-marquee__track {
  will-change: transform;
  animation: sched-marquee var(--sched-marquee-duration, 8s) ease-in-out infinite alternate;
}
@keyframes sched-marquee {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(calc(0px - var(--sched-marquee-distance, 0px))); }
}
/* Scroll region: the header stays fixed above; policy lists scroll here using
   the same narrow global scrollbar treatment as the app sidebar. */
.sched-review__sources {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline: 0 var(--space-3);
  box-sizing: border-box;
}
.sched-policy-card__body h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 300;
}
.sched-meta-source__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sched-policy-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--bg-card);
  box-shadow: var(--elevation-1);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.sched-policy-card:hover {
  border-color: var(--accent-blue);
}
.sched-policy-card:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.sched-policy-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}
.sched-policy-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.sched-policy-card__warnings {
  display: grid;
  gap: var(--space-1);
}
.sched-policy-card__warning {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: var(--accent-amber-bg, #fef3c7);
  font-size: var(--font-size-xs);
}
.sched-policy-card__warning-icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-amber, #d97706);
}
.sched-policy-card__warning-icon svg {
  width: 28px;
  height: 28px;
}
.sched-policy-card__warning-content {
  grid-column: 2;
  line-height: 1.4;
}
.sched-policy-card__fields {
  display: grid;
  gap: var(--space-2);
}
.sched-source {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sched-source__pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
/* Page "sheet" + absolutely-positioned per-line overlay boxes. Overlays are
   measured from the page's inner edge, so padding MUST stay 0 — the border
   below never offsets them (preserves the bbox_pct contract, ADR-069). */
.sched-page {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 760px;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-1);
}
.sched-page__img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.sched-line {
  position: absolute;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.sched-page:not(.sched-page--ready) .sched-line { opacity: 0; pointer-events: none; }
.sched-page--ready .sched-line { opacity: 1; }
/* Keep/drop are functional highlight tints painted over the white PDF page
   image (theme-independent) — intentionally tuned rgba, not UI-surface tokens. */
.sched-line--keep { border-color: rgba(22, 163, 74, 0.9); background: rgba(22, 163, 74, 0.12); }
.sched-line--keep:hover { background: rgba(22, 163, 74, 0.22); }
.sched-line--drop { border-color: rgba(220, 38, 38, 0.9); background: rgba(220, 38, 38, 0.16); }
.sched-line--drop:hover { background: rgba(220, 38, 38, 0.26); }
.sched-line:disabled,
.sched-missing-bbox__line:disabled {
  cursor: wait;
  opacity: 0.7;
}
.sched-line--flash {
  animation: sched-line-flash 900ms ease-out;
}
@keyframes sched-line-flash {
  0%, 100% { box-shadow: none; }
  35% { box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .sched-line--flash { animation: none; }
  .sched-marquee--overflowing .sched-marquee__track {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: none;
  }
}
.sched-routing {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.sched-routing .toggle__label {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
.sched-routing[data-routing-current="needs_confirmation"] .toggle__track {
  background: var(--accent-amber, #d97706);
}
.sched-routing[data-routing-current="needs_confirmation"] .toggle__thumb {
  transform: translateX(8px);
}
.sched-routing .toggle__input:disabled + .toggle__track {
  cursor: wait;
  opacity: 0.65;
}
.sched-missing-bbox {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--bg-card);
}
/* Reuse the .section-label primitive for the heading; just drop its top margin
   so it sits flush inside the callout padding. */
.sched-missing-bbox .section-label { margin-top: 0; }
.sched-missing-bbox__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sched-missing-bbox__line {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
}
.sched-missing-bbox__line small {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.sched-missing-bbox__line span {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

/* Declaration review PDF panes use the same normalized bbox_pct contract as schedule cleanup. */
.declaration-fill__review,
.declaration-fill__documents,
.declaration-fill__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.declaration-fill__documents {
  align-items: center;
}
.declaration-pdf-page {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 760px;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-1);
}
.declaration-pdf-page--unavailable {
  padding: var(--space-3);
  color: var(--text-secondary);
  text-align: center;
}
.declaration-pdf-page img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
[data-declaration-target-highlight],
[data-declaration-source-highlight] {
  position: absolute;
  padding: 0;
  pointer-events: none;
  border: 2px solid rgba(37, 99, 235, 0.9);
  border-radius: var(--radius-xs);
  background: rgba(37, 99, 235, 0.14);
}
[data-declaration-source-highlight] {
  border-color: rgba(22, 163, 74, 0.9);
  background: rgba(22, 163, 74, 0.14);
}
.declaration-gap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--accent-amber, #92400e);
  background: var(--accent-amber-bg, #fef3c7);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.warning-hover-trigger--workflow {
  min-width: 1.75rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.workflow-card > .warning-hover {
  align-self: center;
}

.warning-hover-trigger--policy {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: var(--font-size-sm);
}

@media (max-width: 980px) {
  /* Stack vertically and let the whole pane scroll normally — no bounded
     columns or nested scroll areas on narrow screens. */
  .transcript-tab-content[data-tab="schedule-clean"] {
    display: block;
    overflow-y: auto;
  }
  .sched-review {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "meta"
      "pdf";
    height: auto;
    overflow: visible;
  }
  .sched-review__pdf { overflow: visible; }
  .sched-review__meta { overflow: visible; }
  .sched-review__sources { overflow: visible; }
  .sched-page { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   RENEWAL-REVIEW EMAIL OUTPUT PANE (Task 473)
   Styles views/transcriptRenewalEmailView.js — the email_draft
   registered-output composition surface. Compose redesign 2026-07:
   email-client layout — one compose card (.remail-compose) with
   inline chromeless header rows (To/Cc/Bcc/Subject), a contenteditable
   rich-text body, a document-card attachment picker, and a single
   action bar. Task 517 sidebar: .remail-layout puts the compose card
   beside a sticky .remail-layout__side holding the presentation controls
   and their status block. Token-only, dark mode from tokens.css.
   Recipe: design-system.md §4.7.
   No [data-tab="renewal-email"] container override BY DESIGN — the
   base .transcript-tab-content block+scroll flow suits a normally-
   scrolling composition column (§4.7 documents the .hidden re-assert
   twin required whenever a pane DOES override the container).
   Contract tests: renewal-email-pane-css.test.js (REPC-473) +
   renewal-email-compose-css.test.js (REC).
   Task 475: column geometry, card chrome, and body rhythm promoted to
   primitives.css (.output-pane/.output-card/.output-body — OPC-475);
   the markup carries those classes beside .remail-*. This block keeps
   view-specific residue only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Two-column layout ────────────────────────────────────────────
   Sticky sidebar + compose card. Sidebar LEFT, matching the
   schedule-clean review pane (.sched-review__meta), the app sidebar and
   the workflow rail. Wrap-based (no media or container query):
   the pane lives in a user-resizable panel, so the flex basis decides
   when the columns stack rather than a viewport width that does not
   track the panel. Sidebar-first DOM order means the stacked fallback is
   the old layout — controls above the compose card. */
.remail-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}
/* Sticky, so the controls stay put while the email body scrolls. The
   scroll container is .transcript-tab-content; align-items: flex-start
   above keeps this item from stretching (a stretched item cannot stick). */
/* Narrower than --sidebar-width (300px): the panel is flat cards, not a
   framed box, and the compose column needs the room more than the
   controls do. */
.remail-layout__side {
  display: flex;
  flex-direction: column;
  flex: 0 1 260px;
  min-width: 0;
  min-height: calc(100vh - var(--header-height) - var(--space-12) - var(--space-12));
  min-height: calc(100dvh - var(--header-height) - var(--space-12) - var(--space-12));
  position: sticky;
  top: var(--space-2);
}

/* ── Compose card (chrome rides .output-card) ───────────────────
   `flex` sizes this as the main column of .remail-layout; the
   display/direction pair is its own internal stacking. */
.remail-compose {
  display: flex;
  flex-direction: column;
  flex: 1 1 320px;
  min-width: 0;
  position: relative;
  padding: var(--space-2) var(--space-6) var(--space-4);
}
.remail-attachment-drop-overlay {
  display: none;
  position: fixed;
  top: calc(var(--remail-drop-overlay-top) + var(--space-2));
  left: calc(var(--remail-drop-overlay-left) + var(--space-2));
  width: max(0px, calc(var(--remail-drop-overlay-width) - var(--space-4)));
  height: max(0px, calc(var(--remail-drop-overlay-height) - var(--space-4)));
  z-index: 2;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  border: 4px dotted var(--accent-blue);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
}
.remail-compose--drag-active .remail-attachment-drop-overlay {
  display: flex;
}
.remail-attachment-drop-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* ── Inline header rows (To / Cc / Bcc / Subject) ─────────────────
   The canonical .form-field wrappers stay (EDR-F-12); this scope flips
   them to email-client rows: fixed 64px label rail, chromeless input,
   hairline separator that doubles as the focus affordance. */
.remail-compose__fields {
  display: flex;
  flex-direction: column;
}
.remail-compose__fields .form-field {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-1) 0;
}
.remail-compose__fields .form-field:focus-within {
  border-bottom-color: var(--border-focus);
}
.remail-compose__fields .remail-recipient-field[hidden] {
  display: none;
}
.remail-compose__fields .form-field__label {
  flex: 0 0 64px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}
.remail-compose__fields .form-field__control {
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.remail-compose__fields .form-field__control input {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
  box-shadow: none;
  width: auto;
  flex: 1 1 160px;
  min-width: 120px;
}
.remail-compose__fields .form-field__control input:focus {
  border: none;
  box-shadow: none;
}
.remail-compose__fields .form-field__control input::placeholder {
  color: var(--text-tertiary);
}
.remail-recipient-disclosures {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--space-2);
  margin-left: auto;
}
.remail-recipient-disclosure {
  padding: var(--space-1) 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1;
}
.remail-recipient-disclosure:hover {
  color: var(--text-primary);
}
.remail-recipient-disclosure:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* Recipient pills (draft rows): .email-chip primitive + a quiet remove
   button. Removal is DOM-local until Save persists it. */
.remail-recipient-chip__remove {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
}
.remail-recipient-chip__remove:hover {
  color: var(--accent-red);
}
.remail-recipient-chip__remove:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
/* Read-only recipient pills sit inline after the To/Cc/Bcc label. */
.remail-recipients .email-chip {
  margin-left: var(--space-1);
}
/* Subject is the last header row — read as the message title. */
.remail-compose__fields .form-field:last-child .form-field__control input {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

/* ── Body ─────────────────────────────────────────────────────────
   Contenteditable editor (draft) and read-only render share a fixed
   white reading/compose surface — the same --email-surface/--email-ink
   canvas the incoming thread body (.email-msg__reading) uses (email HTML
   assumes a light background; both tokens are theme-fixed).
   Reading rhythm (p/ul/ol margins, edge clips, img containment) rides
   .output-body on the same elements. */
.remail-body {
  background: var(--email-surface);
  color: var(--email-ink);
  border-radius: var(--radius-sm);
  padding: 0;
}
/* App-only preview typography. The generated body retains its inline
   recipient-safe system stack; these declarations are not serialized or sent. */
.remail-body > table,
.remail-body > table h1 {
  font-family: var(--font-sans) !important;
}
.remail-body--editor {
  flex: 1;
  min-height: 320px;
  outline: none;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
}
.remail-body--readonly {
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
}
/* TD-473-007: sanitized-empty read-only body — quiet tertiary line
   (.remail-attachments--empty idiom), not a blank stretch of card. */
.remail-body--empty {
  margin: 0;
  padding: var(--space-4) 0;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.remail-signature {
  color: var(--email-ink);
  margin-top: var(--space-4);
}
.remail-signature :is(p, div) {
  margin: 0;
}
.remail-signature > :first-child {
  margin-top: 0;
}
.remail-signature > :last-child {
  margin-bottom: 0;
}

/* ── Generated-email presentation (sidebar) ─────────────────────
   One bounded email-content panel: compact detail level, a cumulative
   content key, then independently controlled optional sections. */
.remail-email-content {
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text-primary);
}
.remail-email-content > .section-label {
  margin: 0 0 var(--space-3);
}
.remail-presentation {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
}
.remail-presentation__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.remail-presentation__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 7px var(--space-1);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.remail-presentation__card:hover {
  background: var(--bg-hover);
}
.remail-presentation__card:has(input:checked) {
  background: var(--accent-blue-bg);
  box-shadow: inset 0 0 0 1px var(--accent-blue);
  color: var(--text-primary);
}
.remail-presentation__card-title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.remail-presentation__card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.remail-presentation__card:has(input:focus-visible) {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.remail-presentation__card:has(input:disabled) {
  color: var(--text-tertiary);
  cursor: default;
}
.remail-presentation[aria-busy="true"] {
  cursor: progress;
}
.remail-presentation__requested,
.remail-presentation__readonly {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.remail-presentation__requested {
  font-weight: var(--font-weight-medium);
}
.remail-presentation__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}
.remail-presentation__feature {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}
.remail-presentation__feature--included {
  color: var(--text-primary);
}
.remail-presentation__feature--included .remail-presentation__feature-icon {
  color: var(--accent-green);
}
.remail-presentation__feature--excluded {
  color: var(--text-tertiary);
}
.remail-presentation__feature-icon {
  font-weight: var(--font-weight-semibold);
}
/* ── Panel status ───────────────────────────────────────────────
   ONE surface for generation state + the requested settings, at the END
   of the panel so a state change never pushes the cards down. NOT a
   .pane-alert: that primitive is a pane-level banner above pane content
   (design-system §2.9) and its 36px icon column does not belong in a
   260px column. This is status inside a control panel — the accent left
   rule carries the tone, as the requested line already did. */
.remail-presentation__status {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-left: var(--space-2);
  border-left: 2px solid var(--border);
}
.remail-presentation__status--warning {
  border-left-color: var(--accent-amber);
}
.remail-presentation__status--error {
  border-left-color: var(--accent-red);
}
.remail-presentation__status-title {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.remail-presentation__status-text {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
/* The flex gap owns the rhythm inside the block. */
.remail-presentation__status .remail-presentation__requested {
  margin: 0;
}
.remail-presentation__status .btn {
  margin-top: var(--space-1);
}
.remail-presentation__readonly {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-semibold);
}

.remail-inclusions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.remail-inclusions > .section-label {
  margin: 0;
}
.remail-inclusion {
  min-width: 0;
}
.remail-inclusion__control {
  display: flex;
  align-items: center;
}
.remail-inclusion__toggle {
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--space-2);
}
.remail-inclusion__toggle .toggle__track {
  margin-left: auto;
  order: 1;
}
.remail-inclusion__toggle .toggle__label {
  min-width: 0;
  order: 0;
  font-size: var(--font-size-xs);
}
.remail-inclusion__toggle:has(.toggle__input:disabled) {
  color: var(--text-tertiary);
  cursor: default;
}
.remail-inclusion__toggle:has(.toggle__input:disabled) .toggle__label {
  color: var(--text-tertiary);
}
.remail-additional-config {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
}
.remail-additional-config > summary {
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}
.remail-additional-config > summary:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.remail-additional-config__body {
  margin-top: var(--space-3);
}
.remail-sidebar-attachments {
  margin: var(--space-4) 0 0;
  min-width: 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-primary);
}
.remail-sidebar-attachments .section-label {
  margin: 0 0 var(--space-2);
}
.remail-sidebar-attachments__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.remail-sidebar-attachments__documents {
  display: contents;
}
.remail-sidebar-attachment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}
.remail-sidebar-attachment .remail-doc__name,
.remail-attachment__select .remail-doc__name {
  min-width: 0;
  width: 100%;
  white-space: nowrap;
}
.remail-sidebar-attachment .remail-doc__name-text,
.remail-attachment__select .remail-doc__name-text {
  white-space: nowrap;
}
.remail-attachment__select .remail-doc__name {
  flex: 1 1 auto;
}
.remail-sidebar-attachments__empty {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.remail-sidebar-attachments__empty[hidden] {
  display: none;
}
.settings-optional-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.settings-optional-form__icon {
  display: inline-flex;
  color: var(--text-secondary);
}
.settings-optional-form__details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-1);
}
.settings-optional-form__name {
  min-width: 0;
  font-size: var(--font-size-sm);
}
.settings-optional-form__date {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}
.settings-optional-form__actions {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  align-items: center;
  justify-self: end;
  flex-wrap: nowrap;
  gap: var(--space-2);
}
/* Read-only Subject uses the same labelled header-row geometry as the
   editable Subject input and the To/Cc/Bcc rows. */
.remail-subject {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.remail-recipients {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ── Attachments ──────────────────────────────────────────────────
   Read-only and editable attachment rows live in the sidebar. */
.remail-attachments--empty {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.remail-attachments--edit {
  margin: 0;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.remail-attachments--edit ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.remail-attachment--edit {
  min-width: 0;
}
.remail-attachment__select {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.remail-attachment__select:not(:has(input:disabled)):not(:has(input:checked)):hover {
  background: var(--bg-hover);
}
.remail-attachment__select:has(input:disabled) {
  cursor: default;
}
.remail-attachment__select:has(input:checked) {
  border-color: var(--accent-blue);
  background: var(--accent-blue-bg);
}
.remail-attachment__select input[type="checkbox"] {
  flex: none;
  accent-color: var(--accent-blue);
}
.remail-attachment__select input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.remail-doc__ext {
  flex: none;
  padding: 2px var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-subtle);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.remail-doc__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Actions ──────────────────────────────────────────────────────
   Send is the sidebar-level terminal action. Draft persistence remains
   attached to the compose surface below the editable body. */
.remail-sidebar-send {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.remail-sidebar-send .btn {
  width: 100%;
}
.remail-actionbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.remail-send-hint {
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
}
.remail-pane .btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ═══ EMAIL THREAD PANE (Task 475) ═══
   Styles views/transcriptThreadView.js — the email-client thread pane on
   the shared .output-pane column (design-system §4.7). Token-only; dark
   mode comes from tokens.css; the reading card rides the theme-invariant
   --email-surface/--email-ink tokens (§2.10).
   NO [data-tab]-scoped container override BY DESIGN — the base
   .transcript-tab-content block+scroll flow suits a normally-scrolling
   reading column (same posture as the remail pane; §4.7 documents the
   .hidden re-assert twin required whenever a pane DOES override it).
   Contract tests: email-thread-css.test.js (ETC-475) + the THR-475
   view suite. */
.email-thread {
  /* Local knob consumed by the clamp rule below. */
  --email-clamp-height: 400px;
}
.email-thread__truncation {
  text-align: center;
  padding: var(--space-2) var(--space-3);
  background: var(--accent-amber-bg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Expanded message card — surface chrome rides .output-card */
.email-msg--expanded {
  position: relative;
  padding: var(--space-4) var(--space-5);
}
.email-msg__collapse {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}
.email-msg__meta {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.email-msg__meta-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
/* The from-row carries the date at its right end (margin-left:auto); reserve
   space so it clears the absolutely-positioned collapse button (top-right). */
.email-msg__from { padding-right: var(--space-7); }
.email-msg__from strong { color: var(--text-primary); }
.email-msg__addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-msg__date {
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Reading card: fixed-light surface — email HTML assumes a light canvas */
.email-msg__reading {
  background: var(--email-surface);
  color: var(--email-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.email-msg__reading--clamped {
  max-height: var(--email-clamp-height);
  overflow: hidden;
  position: relative;
}
.email-msg__reading--clamped::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--space-8);
  background: linear-gradient(to bottom, transparent, var(--email-surface));
  pointer-events: none;
}
.email-msg__quoted {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-top: 1px dashed var(--border);
  background: var(--email-surface);
  color: var(--email-ink);
  border-radius: var(--radius-sm);
}
.email-msg__pre {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
}

/* Collapsed one-line rows (button elements — chrome reset here) */
.email-msg--collapsed {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.email-msg--collapsed:hover { background: var(--bg-hover); }
.email-msg--collapsed:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.email-msg__row-sender {
  flex: 0 1 auto;
  color: var(--text-primary);
  white-space: nowrap;
}
.email-msg__row-snippet {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-msg__row-end {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Attachment chip row — badges are chip SIBLINGS (retry/reconnect clicks
   bubble to the app-level delegation, not the chip navigate handler) */
.email-thread__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* BUG-093 companion for the measure-gated Show more control */
.email-thread [hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════
   BOOK VIEW — RENEWALS DASHBOARD (demo wireframe, 2026-07-17)
   Painted by views/bookView.js (mock data, demo only). Tokens and
   shared primitives only — no new tokens, so no dark-block edits.
   Remove or promote when the real Book dashboard lands.
   ═══════════════════════════════════════════════════════════════ */

/* The placeholder empty-state centres content; the dashboard fills it. */
#bookViewRoot { align-items: stretch; justify-content: flex-start; }

.renewals-dash {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--bg-app);
}
/* Sections never absorb vertical squeeze — the dash scrolls instead. Without
   this, overflow-x on a section (e.g. the funnel) zeroes its min-height and
   it gets crushed once content exceeds the viewport. */
.renewals-dash > * { flex-shrink: 0; }

.renewals-dash__header { display: flex; align-items: center; gap: var(--space-4); }
.renewals-dash__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.renewals-dash__demo-pill { margin-left: auto; }

.rd-workflow-tabs { display: flex; gap: var(--space-1); }
.rd-workflow-tab {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.rd-workflow-tab--active {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.rd-workflow-tab[disabled] { color: var(--text-tertiary); cursor: default; }

/* KPI tiles */
.rd-kpis { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: var(--space-3); }
.rd-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.rd-kpi__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.rd-kpi__value--alert { color: var(--accent-red); }
.rd-kpi__label {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.rd-kpi__hint { font-size: var(--font-size-xs); color: var(--text-tertiary); }

/* Funnel checkpoint strip */
.rd-funnel {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  overflow-x: auto;
}
.rd-stage {
  flex: 1;
  min-width: 72px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: var(--space-2);
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
  overflow: hidden; /* radius clips the bottom-anchored fill */
}
.rd-stage:hover { background: var(--bg-hover); }
.rd-stage--active { border-color: var(--border-focus); background: var(--bg-card-accent); }
.rd-stage__count {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  position: relative; /* paints above the fill layer */
}
.rd-stage__label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  position: relative;
}
/* Bottom-anchored proportional card fill — shared baseline across segments */
.rd-stage__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--accent-blue-bg);
  pointer-events: none;
}
.rd-stage__fill--final { background: var(--accent-green-bg); }
.rd-funnel__sep { color: var(--text-tertiary); flex-shrink: 0; }

/* Work-queue tabs */
.rd-queue-tabs { display: flex; gap: var(--space-2); }
.rd-queue-tab {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.rd-queue-tab:hover { background: var(--bg-hover); }
.rd-queue-tab--active {
  background: var(--bg-active);
  border-color: var(--border-focus);
  color: var(--text-primary);
}
.rd-queue-tab__count { color: var(--text-tertiary); }

/* Expiry buckets + rows */
.rd-list { display: flex; flex-direction: column; gap: var(--space-4); }
/* Floating shared column header — same grid as .rd-row; +1px pads compensate
   for the bucket-card border so columns line up with the rows below. */
.rd-row--cols {
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: calc(var(--space-4) + 1px);
  padding-right: calc(var(--space-4) + 1px);
  margin-bottom: calc(-1 * var(--space-2));
}
.rd-bucket {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rd-bucket__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.rd-bucket__header--overdue { color: var(--accent-red); }
.rd-bucket__meta {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}
.rd-rows { overflow-x: auto; }
.rd-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) 110px 70px 90px 110px 140px minmax(100px, 0.9fr) minmax(150px, 1.2fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
  min-width: 960px;
}
.rd-row:last-child { border-bottom: none; }
.rd-row--head {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.rd-row:not(.rd-row--head):hover { background: var(--bg-hover); }

.rd-client {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.rd-days { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.rd-days--warn { color: var(--accent-amber); }
.rd-days--overdue { color: var(--accent-red); }
.rd-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.rd-flag {
  font-size: var(--font-size-xs);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
  white-space: nowrap;
}
.rd-flag--red { color: var(--accent-red); background: var(--accent-red-bg); }
.rd-flag--amber { color: var(--accent-amber); background: var(--accent-amber-bg); }
.rd-premium { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rd-insurer { color: var(--text-secondary); }

.rd-dots { display: flex; gap: var(--space-1); }
.rd-dot {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  flex-shrink: 0;
}
.rd-dot--hit { background: var(--accent-blue); border-color: var(--accent-blue); }
.rd-dot--final { background: var(--accent-green); border-color: var(--accent-green); }

.rd-engagement { font-size: var(--font-size-xs); color: var(--text-secondary); }
.rd-next { color: var(--text-primary); }
.rd-next--urgent { color: var(--accent-red); font-weight: var(--font-weight-medium); }

.rd-empty {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
#renewalRecipeWaitingModal .modal-shell__panel {
  width: min(672px, 100%);
}
.renewal-recipe-resolution__body {
  overflow-wrap: anywhere;
}
.renewal-recipe-resolution__intro {
  display: grid;
  gap: var(--space-2);
}
.renewal-recipe-resolution__policy {
  display: grid;
  gap: var(--space-3);
}
.renewal-recipe-resolution__policy:not(:last-child) {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.renewal-recipe-resolution__policy > .form-field {
  gap: var(--space-3);
}
.renewal-recipe-resolution__policy > .form-field .section-label {
  display: block;
  margin: 0;
}
.renewal-recipe-resolution__summary:not(.choice-card) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.renewal-recipe-resolution__summary-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.renewal-recipe-resolution__summary-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}
.renewal-recipe-resolution__summary-details > .form-field__hint {
  flex: 1 1 180px;
  min-width: 0;
}
.renewal-recipe-resolution__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.renewal-recipe-resolution__decision {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.renewal-recipe-resolution__choices,
.renewal-recipe-resolution__missing:not([hidden]) {
  display: grid;
  gap: var(--space-2);
}
.renewal-recipe-resolution__choices[hidden] {
  display: none;
}
.renewal-recipe-resolution__summary .choice-card__row {
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--space-3);
}
.renewal-recipe-resolution__other-toggle {
  display: inline-flex;
  width: auto;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  text-transform: inherit;
  letter-spacing: inherit;
}
.renewal-recipe-resolution__other-toggle:hover:not(:disabled) {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.renewal-recipe-resolution__other-toggle > span {
  display: inline-flex;
}
.renewal-recipe-resolution__other-toggle svg {
  width: 16px;
  height: 16px;
}
.renewal-recipe-resolution__other-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.renewal-recipe-resolution__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  min-width: 0;
  overflow-wrap: anywhere;
}
.renewal-recipe-resolution__body .form-error:not([hidden]) {
  display: block;
  margin: 0;
}
#renewalRecipeWaitingModal .btn:focus-visible,
#renewalRecipeWaitingModal .modal-shell__close:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}