.ask-wazigo { display: grid; gap: 18px; }
.ask-wazigo-context, .ask-wazigo-links, .ask-wazigo-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ask-wazigo-summary { padding: 16px; border: 1px solid var(--color-primary-soft-border); border-radius: 12px; background: var(--color-primary-soft); }
.ask-wazigo-summary summary { cursor: pointer; line-height: 1.5; }
.ask-wazigo-summary[open] summary { margin-bottom: 16px; }
.ask-wazigo-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.ask-wazigo-counts div { display: grid; gap: 4px; }
.ask-wazigo-counts strong { font-size: 28px; line-height: 1.2; }
.ask-wazigo-counts span { font-size: 14px; }
.ask-wazigo-summary p { margin: 0 0 8px; font-size: 14px; }
.ask-wazigo-links { justify-content: flex-start; font-size: 13px; }
.ask-wazigo-welcome h3 { margin: 0 0 8px; }
.ask-wazigo-welcome p { margin: 0 0 14px; }
.ask-wazigo-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-wazigo-turns { display: grid; gap: 14px; }
.ask-wazigo-turn { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; overflow-wrap: anywhere; }
.ask-wazigo-turn.is-user { background: var(--color-primary-soft); margin-left: 36px; }
.ask-wazigo-turn p { margin: 8px 0; white-space: pre-wrap; }
.ask-wazigo-draft { display: grid; justify-items: start; gap: 8px; padding-top: 14px; }
.ask-wazigo-form { display: grid; gap: 8px; width: 100%; }
.ask-wazigo-form textarea { width: 100%; resize: vertical; min-height: 64px; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; background: var(--color-surface); color: inherit; }
.ask-wazigo-form small { line-height: 1.5; }
.modal-footer .ask-wazigo-form-actions .btn { width: auto; }
@media (max-width: 600px) {
  .ask-wazigo-counts { grid-template-columns: repeat(2, 1fr); }
  .ask-wazigo-trigger { padding: 8px; font-size: 13px; }
  .ask-wazigo-trigger svg { display: none; }
  .ask-wazigo-turn.is-user { margin-left: 12px; }
}
/* AI Knowledge Hub (Phase 3a): scope bar, status counts, lists, review, export, health. */
.kh-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.kh-page .wz-page-header-row { align-items: flex-start; }
.kh-page .wz-page-subtitle { max-width: 900px; font-size: 14px; line-height: 1.6; }
.kh-page .kh-scope { padding: 16px 20px; background: var(--color-surface); border: 1px solid var(--wz-border); border-radius: 10px; }
.kh-overview .kh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kh-kpis .wz-kpi { padding: 20px; border-left: 4px solid var(--wz-border); text-decoration: none; }
.kh-kpis .wz-kpi:nth-child(2) { order: -3; border-left-color: #e9a03b; background: #fffaf1; }
.kh-kpis .wz-kpi:nth-child(3) { order: -2; border-left-color: #e9a03b; background: #fffaf1; }
.kh-kpis .wz-kpi:nth-child(6) { order: -1; border-left-color: var(--color-primary); background: var(--color-primary-soft); }
.kh-overview-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kh-overview-links .wz-card { min-width: 0; }
.kh-overview .wz-table th { white-space: nowrap; }
.kh-page .wz-table-wrap { max-width: 100%; overflow-x: auto; }
.kh-page .kh-teach { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.kh-teach > :not(.wz-card) { grid-column: 1 / -1; }
.kh-teach > .wz-card { min-width: 0; }
.kh-teach .kh-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kh-teach .kh-legend { grid-column: 1 / -1; }
.kh-teach .kh-radio { padding: 12px 10px; border: 1px solid var(--wz-border); border-radius: 8px; }
.kh-teach .kh-radio:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.kh-review-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.kh-review-grid .kh-list { min-width: 0; }
.kh-review-grid .kh-row { align-items: flex-start; flex-wrap: wrap; }
.kh-review-grid .kh-row-main { flex-basis: calc(100% - 45px); }
.kh-review-grid .kh-row-actions { margin-left: auto; }
.kh-review-evidence { min-width: 0; position: sticky; top: 88px; scroll-margin-top: 100px; }
.kh-review-evidence .kh-evidence { margin-top: 18px; }
.kh-review-evidence .kh-evidence li { background: var(--color-primary-soft); padding: 16px; }
.kh-review-evidence blockquote { padding: 14px; background: white; border: 0; border-radius: 6px; line-height: 1.7; }
.kh-review .kh-bulk { margin-bottom: 18px; padding: 14px 18px; border: 1px solid var(--wz-border); background: var(--color-surface); border-radius: 10px; }
@media (max-width: 1100px) { .kh-page .kh-teach, .kh-review-grid { grid-template-columns: minmax(0, 1fr); } .kh-review-evidence { position: static; } }
@media (max-width: 600px) { .kh-overview .kh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kh-overview-links { grid-template-columns: minmax(0, 1fr); } .kh-kpis .wz-kpi { padding: 14px; } .kh-page .kh-scope { padding: 14px; } .kh-page .kh-scope .wz-field { min-width: 0; flex-basis: 100%; } .kh-teach .kh-formats { grid-template-columns: minmax(0, 1fr); } }

/* Section tabs are links: no link underline, and only the current section is
   blue. A tab that keeps focus after a click shows the focus outline, never
   the active colour, so two tabs never look selected at once. */
.kh-page .wz-tabs .wz-tab { text-decoration: none; }
:root[data-look="v2"] .kh-page .wz-tabs .wz-tab:not(.is-active),
:root[data-look="v2"] .kh-page .wz-tabs .wz-tab:not(.is-active):focus,
:root[data-look="v2"] .kh-page .wz-tabs .wz-tab:not(.is-active):visited { color: var(--wz-text-secondary); }
:root[data-look="v2"] .kh-page .wz-tabs .wz-tab:not(.is-active):hover { color: var(--wz-text); }

.kh-scope { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.kh-scope .wz-field { min-width: 200px; flex: 0 1 260px; margin: 0; }
.kh-scope-fixed { display: grid; gap: 2px; margin: 0; font-size: 14px; }

.kh-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kh-overview { display: grid; gap: 16px; }
.kh-later { margin: 0; font-size: 14px; }
.kh-link { padding: 0; border: 0; background: none; color: var(--wz-primary); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.kh-link:hover { text-decoration: underline; }
.kh-link:focus-visible, .kh-tick:focus-visible { outline: 2px solid var(--wz-focus); outline-offset: 2px; border-radius: 4px; }

.kh-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kh-toolbar .wz-tabs { flex: 1 1 auto; margin: 0; overflow-x: auto; }
.kh-notice { min-height: 0; margin: 0; color: var(--wz-success); font-size: 14px; }
.kh-notice:empty { display: none; }
.kh-error { margin: 0; padding: 10px 12px; border-radius: var(--wz-radius-input); background: var(--wz-danger-soft); color: var(--color-danger-text); font-size: 14px; }
.kh-warn { margin: 0; padding: 8px 12px; border-radius: var(--wz-radius-input); background: var(--wz-warning-soft); color: var(--color-warning-text); font-size: 14px; }
.kh-note { margin: 0; padding: 8px 12px; border-radius: var(--wz-radius-input); background: var(--wz-primary-soft); color: var(--color-info-text); font-size: 14px; }

.kh-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kh-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; }
.kh-row.is-selected { border-color: var(--wz-primary); box-shadow: 0 0 0 1px var(--wz-primary); }
.kh-tick { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.kh-row-main { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.kh-row-main p { margin: 0; overflow-wrap: anywhere; }
.kh-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kh-row-meta { color: var(--wz-text-secondary); font-size: 13px; }
.kh-row-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.kh-row-body { font-size: 14px; }
.kh-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }

.kh-bulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kh-bulk-why { color: var(--wz-text-secondary); font-size: 14px; }

.kh-form { display: grid; gap: 12px; }
.kh-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: start; }
.kh-price { display: grid; gap: 12px; margin: 4px 0 8px; padding: 12px 16px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); }
.kh-price legend { padding: 0 6px; font-weight: 600; }

.kh-drawer { display: grid; gap: 18px; }
.kh-h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
:root[data-look="v2"] .kh-diff th[scope="row"] { width: 28%; padding: 8px 16px; background: none; border-bottom: 1px solid var(--wz-border); color: var(--wz-text); font-size: 14px; font-weight: 600; letter-spacing: normal; text-align: left; text-transform: none; }
.kh-drawer section > .kh-row-price { margin: 10px 0 0; }
:root[data-look="v2"] .kh-diff tr.is-changed td:last-child { background: var(--wz-primary-soft); font-weight: 600; }
:root[data-look="v2"] .kh-diff td { height: auto; overflow-wrap: anywhere; }
.kh-conflict ul, .kh-evidence { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kh-evidence li { padding: 10px 12px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); font-size: 14px; }
.kh-evidence blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--wz-border-strong); color: var(--wz-text); }
.kh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kh-chip { padding: 2px 10px; border-radius: 999px; background: var(--wz-surface-muted); border: 1px solid var(--wz-border); font-size: 13px; }

.kh-export { display: grid; gap: 16px; }
.kh-formats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; padding: 0; border: 0; }
.kh-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.kh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.kh-legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--wz-text-secondary); width: 100%; }
.kh-readable-frame { width: 100%; height: 520px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); background: #fff; }

.kh-health { display: grid; gap: 14px; margin: 0; }
.kh-health-row { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--wz-border); }
.kh-health-row:last-child { border-bottom: 0; }
.kh-health dt { font-weight: 600; }
.kh-health dd { display: grid; gap: 4px; margin: 0; }
.kh-health-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.kh-health meter { width: 100%; max-width: 320px; height: 10px; }
.kh-health-def { margin: 0; color: var(--wz-text-secondary); font-size: 13px; }

.kh-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.kh-check input { margin-top: 3px; flex-shrink: 0; }
.kh-days { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; border: 0; }
.kh-days legend { width: 100%; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.kh-evidence-form { display: grid; gap: 12px; margin: 0; padding: 12px 16px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); }
.kh-evidence-form legend { padding: 0 6px; font-weight: 600; }
.kh-actions-end { align-items: flex-end; margin-bottom: 0; }
.kh-row-link { color: var(--wz-text); font-weight: 600; text-decoration: none; }
.kh-row-link:hover { color: var(--wz-primary); text-decoration: underline; }
.kh-row-link:focus-visible { outline: 2px solid var(--wz-focus); outline-offset: 2px; border-radius: 4px; }
.kh-fact { display: grid; gap: 16px; }
.kh-back { margin: 0; font-size: 14px; }
.kh-snapshot { margin: 0; font-size: 14px; }
.kh-plain { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.kh-history { display: grid; gap: 14px; margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.kh-history li { display: grid; gap: 4px; justify-items: start; }
.kh-audit { display: grid; gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; }
.kh-audit li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--wz-border); }
.kh-audit-when { color: var(--wz-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }

.kh-cell { display: grid; gap: 4px; justify-items: start; }
@media (max-width: 767px) { .kh-cell { justify-items: end; text-align: right; } }
.kh-price-check { display: grid; gap: 8px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); }
.kh-inline-field { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.kh-inline-field .form-control { width: 80px; }
.kh-price-result p { margin: 0; font-size: 15px; }

@media (max-width: 1023.98px) {
  .kh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .kh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-scope .wz-field { flex: 1 1 100%; }
  .kh-row { flex-wrap: wrap; }
  .kh-row-actions { justify-content: flex-start; width: 100%; }
  .kh-health-row { grid-template-columns: 1fr; }
  :root[data-look="v2"] .kh-diff th[scope="row"] { width: auto; padding: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-page *, .kh-page *::before, .kh-page *::after { transition: none !important; animation: none !important; }
}

/* Current AI knowledge (the legacy library, Phase 3a section "current"): readiness cards, kind tabs, list and form. */
.knowledge-readiness { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.knowledge-readiness-card { display: grid; gap: var(--spacing-2xs); padding: var(--spacing-md); text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--color-border); }
.knowledge-readiness-card.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.knowledge-readiness-card small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.knowledge-ready { color: var(--color-success-text); font-size: var(--font-size-sm); }
.knowledge-missing { color: var(--color-warning-text); font-size: var(--font-size-sm); }

.knowledge-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.knowledge-toolbar .settings-tabs { margin-bottom: 0; }
.knowledge-filter .form-control { width: auto; min-width: 190px; }

.knowledge-list { display: grid; gap: var(--spacing-sm); margin: 0; padding: 0; list-style: none; }
.knowledge-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); }
.knowledge-item-main { display: grid; gap: var(--spacing-2xs); min-width: 0; }
.knowledge-item-main p { margin: 0; overflow-wrap: anywhere; }
.knowledge-item-title { display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap; }
.knowledge-item-detail { font-size: var(--font-size-sm); }
.knowledge-item-actions { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }

.knowledge-form { display: grid; gap: var(--spacing-2xs); }
.knowledge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-md); }
.knowledge-days { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); border: 0; padding: 0; margin-inline: 0; }
.knowledge-days legend { width: 100%; padding: 0; }
.knowledge-day { display: inline-flex; align-items: center; gap: var(--spacing-2xs); font-size: var(--font-size-sm); }

.knowledge-history { display: grid; gap: var(--spacing-md); margin: 0; padding-left: var(--spacing-lg); }
.knowledge-history-snapshot { margin-top: var(--spacing-2xs); font-size: var(--font-size-sm); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .knowledge-readiness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .knowledge-item { flex-direction: column; }
  .knowledge-item-actions { justify-content: flex-start; }
  .knowledge-filter, .knowledge-filter .form-control { width: 100%; }
}

/* Current AI answer vs prepared revision (Codex 53443dcb). */
.kh-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.kh-compare-col { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); }
.kh-compare-col p { margin: 0; overflow-wrap: anywhere; }
.kh-differs { color: var(--color-warning-text); }
.kh-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kh-section-title { margin: 0 0 4px; font-size: 18px; }
.kh-section-head p { margin: 0; }

/* Phase 3b: Teach AI, source progress, Test AI and Questions to answer. */
.kh-teach, .kh-sandbox, .kh-gaps { display: grid; gap: 16px; }
.kh-break { overflow-wrap: anywhere; }
.kh-steps { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.kh-step { display: inline-flex; align-items: center; gap: 8px; color: var(--wz-text-secondary); }
.kh-step-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--wz-border-strong); flex-shrink: 0; }
.kh-step.is-done { color: var(--wz-text); }
.kh-step.is-done .kh-step-dot { border-color: var(--wz-success); background: var(--wz-success); }
.kh-step.is-current { color: var(--wz-text); font-weight: 600; }
.kh-step.is-current .kh-step-dot { border-color: var(--wz-primary); background: var(--wz-primary-soft); }
.kh-step.is-stopped { color: var(--color-danger-text); font-weight: 600; }
.kh-step.is-stopped .kh-step-dot { border-color: var(--color-danger-text); }
.kh-chunks { display: grid; gap: 8px; max-height: 360px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.kh-chunks li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); font-size: 14px; }
.kh-chunks p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.kh-never { margin: 0; padding: 10px 14px; border: 1px solid var(--wz-primary); border-radius: var(--wz-radius-input); background: var(--wz-primary-soft); color: var(--color-info-text); font-size: 14px; }
.kh-datasets { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.kh-dataset { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); font-size: 14px; cursor: pointer; }
.kh-dataset input { margin-top: 3px; flex-shrink: 0; }
.kh-dataset.is-selected { border-color: var(--wz-primary); box-shadow: 0 0 0 1px var(--wz-primary); }
.kh-pick { display: grid; gap: 8px; margin: 0; padding: 12px 16px; border: 1px solid var(--wz-border); border-radius: var(--wz-radius-input); }
.kh-pick legend { padding: 0 6px; }
.kh-run { display: grid; gap: 10px; }
.kh-run p { margin: 0; }
.kh-run-action { font-size: 16px; }
.kh-run-reply { margin: 0; padding: 10px 14px; border-left: 3px solid var(--wz-primary); background: var(--wz-surface-muted); border-radius: 0 var(--wz-radius-input) var(--wz-radius-input) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kh-run, .kh-run > * { min-width: 0; overflow-wrap: anywhere; }
.kh-run-dataset { padding: 6px 10px; border-left: 3px solid var(--wz-primary); background: var(--wz-primary-soft); color: var(--color-info-text); font-size: 14px; }
.kh-run-dataset.is-current { border-left-color: var(--wz-success); background: var(--wz-surface-muted); color: var(--wz-text); }
/* =========================================================================
   Workspace Today (Phase 4a, brief Part 1, laid out to the owner's mockup).
   Common CSS on the design tokens (look-v2.css). Desk first on phones.
   ========================================================================= */

.td-page { display: grid; gap: 20px; min-width: 0; }
.td-page > * { min-width: 0; }

/* ---- Shared pieces ------------------------------------------------------- */
.td-card {
  background: var(--wz-surface, #fff);
  border: 1px solid var(--wz-border, #dee6f0);
  border-radius: var(--wz-radius-card, 14px);
  box-shadow: var(--wz-shadow-card, 0 1px 3px rgba(16, 28, 53, 0.06));
  padding: 20px;
  min-width: 0;
}
.td-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.td-card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--wz-text, #111c32); }
.td-card-sub { margin: 2px 0 0; font-size: 13px; color: var(--wz-text-secondary, #52627a); }
.td-muted { margin: 0; color: var(--wz-text-secondary, #52627a); font-size: 13px; }
.td-small { font-size: 12px; }
.td-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--wz-primary, #2563eb); text-decoration: none; }
.td-link:hover { text-decoration: underline; }
.td-chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--wz-border, #dee6f0);
  border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--wz-text-secondary, #52627a); background: var(--wz-surface, #fff); text-decoration: none;
}
.td-chip.is-danger { border-color: #fecaca; color: #b91c1c; background: var(--wz-danger-soft, #fee2e2); }
.td-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--wz-danger, #dc2626); color: #fff; font-size: 12px; font-weight: 700;
}
.td-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.td-pill-success { background: var(--wz-success-soft, #dcfce7); color: #166534; }
.td-pill-warning { background: var(--wz-warning-soft, #fef3c7); color: #92400e; }
.td-pill-danger { background: var(--wz-danger-soft, #fee2e2); color: #b91c1c; }
.td-pill-info { background: var(--wz-primary-soft, #eff6ff); color: #1d4ed8; }
.td-pill-ai { background: var(--wz-ai-soft, #f3eeff); color: var(--wz-ai, #6d28d9); }
.td-pill-neutral { background: var(--wz-surface-muted, #f8fafc); color: var(--wz-text-secondary, #52627a); border: 1px solid var(--wz-border, #dee6f0); }

.td-tone-blue { --td-tint: #eff6ff; --td-ink: #2563eb; }
.td-tone-green { --td-tint: #ecfdf5; --td-ink: #15803d; }
.td-tone-violet { --td-tint: #f3eeff; --td-ink: #6d28d9; }
.td-tone-orange { --td-tint: #fff7ed; --td-ink: #c2410c; }
.td-side-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--td-tint); color: var(--td-ink); flex: none; }

/* ---- Header -------------------------------------------------------------- */
.td-header { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.td-hello { min-width: 0; flex: 1 1 320px; display: grid; gap: 4px; }
.td-title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.025em; color: var(--wz-text, #111c32); }
.td-hello-line { margin: 0; font-size: 15px; color: var(--wz-text-secondary, #52627a); }
.td-hello .page-subtitle { margin: 4px 0 0; }
.td-header-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.td-ai-pill {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-width: 0;
  background: var(--wz-surface, #fff); border: 1px solid var(--wz-border, #dee6f0); border-radius: var(--wz-radius-card, 14px);
}
.td-ai-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--wz-ai-soft, #f3eeff); color: var(--wz-ai, #6d28d9); flex: none; }
.td-ai-text { min-width: 0; }
.td-ai-name { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.td-ai-line { margin: 2px 0 0; font-size: 12px; color: var(--wz-text-secondary, #52627a); }
.td-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-period { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; border: 1px solid var(--wz-border-strong, #c8d5e5); border-radius: 8px; background: var(--wz-surface, #fff); color: var(--wz-text-secondary, #52627a); }
.td-period .form-control { border: 0; min-height: 40px; width: auto; padding-left: 0; background-color: transparent; box-shadow: none; }
.td-icon-btn { min-width: 40px; min-height: 40px; padding: 0 10px; }
.td-cta { min-height: 44px; padding: 0 18px; gap: 8px; display: inline-flex; align-items: center; }

.td-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--wz-radius-card, 14px);
  border: 1px solid #fcd34d; background: var(--wz-warning-soft, #fef3c7); color: #78350f; font-size: 14px;
}
.td-banner p { margin: 0; }
.td-banner p + p { margin-top: 4px; }
.td-banner a { color: inherit; font-weight: 600; text-decoration: underline; }
.td-partial { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--wz-surface-muted, #f8fafc); color: var(--wz-text-secondary, #52627a); font-size: 13px; }

/* ---- Figures ------------------------------------------------------------- */
.td-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.td-kpi {
  display: grid; gap: 6px; padding: 16px 18px; min-width: 0; text-decoration: none; color: inherit;
  border-radius: var(--wz-radius-card, 14px); border: 1px solid var(--wz-border, #dee6f0);
  background: linear-gradient(180deg, var(--td-tint) 0%, var(--wz-surface, #fff) 70%);
  box-shadow: var(--wz-shadow-card, 0 1px 3px rgba(16, 28, 53, 0.06));
}
.td-kpi.is-link { transition: box-shadow var(--wz-dur-hover, 140ms) var(--wz-ease, ease), transform var(--wz-dur-hover, 140ms) var(--wz-ease, ease); }
.td-kpi.is-link:hover { box-shadow: var(--wz-shadow-hover, 0 4px 16px rgba(16, 28, 53, 0.08)); }
.td-kpi.is-link:focus-visible { outline: 2px solid var(--wz-focus, #3b82f6); outline-offset: 2px; }
.td-kpi-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.td-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--wz-surface, #fff); color: var(--td-ink); box-shadow: 0 1px 2px rgba(16, 28, 53, 0.08); flex: none; }
.td-kpi-label { font-size: 14px; font-weight: 600; color: var(--wz-text, #111c32); overflow-wrap: anywhere; }
.td-kpi-value { font-size: 30px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wz-text, #111c32); }
.td-kpi-caption { font-size: 12px; color: var(--wz-text-secondary, #52627a); overflow-wrap: anywhere; }
.td-footnote { margin: 8px 0 0; font-size: 12px; color: var(--wz-text-secondary, #52627a); }

/* ---- Layout: main (desk + performance, AI + follow-ups) and right column -- */
.td-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.td-main { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 20px; align-items: start; min-width: 0; }
.td-side { display: grid; gap: 16px; min-width: 0; }
.td-desk { grid-column: span 6; }
.td-perf { grid-column: span 4; }
.td-ai { grid-column: span 5; }
.td-fu { grid-column: span 5; }

/* ---- Action Desk --------------------------------------------------------- */
.today-asof { font-size: 12px; color: var(--wz-text-secondary, #52627a); }
.td-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
/* position: relative keeps each tab's screen-reader text inside the scrolling strip on phones. */
.td-tab {
  position: relative;
  min-height: 34px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--wz-border, #dee6f0);
  background: var(--wz-surface, #fff); color: var(--wz-text-secondary, #52627a); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--wz-dur-tab, 180ms) var(--wz-ease, ease), color var(--wz-dur-tab, 180ms) var(--wz-ease, ease);
}
.td-tab.is-active { background: var(--wz-primary-soft, #eff6ff); border-color: var(--wz-primary-border, #bfdbfe); color: var(--wz-primary, #2563eb); }
.td-tab:focus-visible { outline: 2px solid var(--wz-focus, #3b82f6); outline-offset: 2px; }

.today-live { margin: 0; font-size: 13px; color: var(--wz-text-secondary, #52627a); }
.today-live:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.today-tab-empty { margin: 16px 0; color: var(--wz-text-secondary, #52627a); font-size: 14px; }
.today-desk-skeleton { padding: 8px 0; }
.today-more { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.today-more-error { font-size: 13px; color: var(--wz-danger, #dc2626); }
.today-overdue, .td-late { color: var(--wz-danger, #dc2626); font-weight: 600; }

.td-list { list-style: none; margin: 0; padding: 0; display: grid; }
.td-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wz-border, #dee6f0);
  /* backwards, never forwards/both: a transform left on the row would become the
     containing block of the row's fixed-position menu and push it off its button. */
  animation: today-reveal 200ms var(--wz-ease, ease-out) backwards;
}
.td-row:last-child { border-bottom: 0; }
.td-row.is-overdue { box-shadow: inset 3px 0 0 var(--wz-danger, #dc2626); padding-left: 8px; }
.td-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px;
  background: var(--wz-primary-soft, #eff6ff); color: var(--wz-primary, #2563eb); font-size: 13px; font-weight: 700; flex: none;
}
.td-avatar-sm { width: 28px; height: 28px; font-size: 11px; margin-right: 8px; vertical-align: middle; }
.td-row-main { min-width: 0; }
.td-row-name { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--wz-text, #111c32); overflow: hidden; }
.td-row-line { margin: 1px 0 0; font-size: 13px; color: var(--wz-text-secondary, #52627a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-row-people { margin: 1px 0 0; font-size: 12px; color: var(--wz-text-muted, #748299); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-flag { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 6px; }
.td-flag-danger { background: var(--wz-danger-soft, #fee2e2); color: #b91c1c; }
.td-flag-warning { background: var(--wz-warning-soft, #fef3c7); color: #92400e; }
.td-when { font-size: 12px; color: var(--wz-text-secondary, #52627a); text-align: right; white-space: nowrap; }
.td-when.is-late { color: var(--wz-danger, #dc2626); font-weight: 600; }
.td-wa { color: #16a34a; display: inline-flex; }
.td-row-meta { display: grid; justify-items: end; gap: 4px; }
.td-row-when { display: inline-flex; align-items: center; gap: 6px; }
.td-row-actions { display: flex; align-items: center; gap: 2px; }
.td-row-btn { min-height: 34px; min-width: 76px; justify-content: center; }

/* ---- Message Performance ------------------------------------------------- */
.td-perf-top { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.td-perf-delivery { flex: 1; min-width: 180px; border-top: 1px solid var(--color-border); padding-top: 12px; }
.td-perf-big { margin: 0; font-size: 32px; line-height: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.td-perf-legend { margin: 0; display: grid; gap: 4px; min-width: 180px; font-size: 13px; }
.td-perf-legend-row { display: flex; justify-content: space-between; gap: 12px; }
.td-perf-legend dt { display: inline-flex; align-items: center; gap: 6px; color: var(--wz-text-secondary, #52627a); }
.td-perf-legend dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.td-perf-window { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--wz-text-muted, #748299); }
.td-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: #94a3b8; }
.td-dot-sent, .td-dot-out { background: #2563eb; }
.td-dot-delivered { background: #14b8a6; }
.td-dot-read { background: #7c3aed; }
.td-dot-failed { background: #ef4444; }
.td-dot-flight { background: #94a3b8; }
.td-dot-in { background: #14b8a6; }
.td-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 150px; margin-top: 18px; align-items: end; }
.td-bar-day { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; min-width: 0; }
.td-bar-pair { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; border-bottom: 1px solid var(--wz-border, #dee6f0); }
.td-bar { display: block; width: 10px; min-height: 2px; border-radius: 3px 3px 0 0; }
.td-bar-out { background: #2563eb; }
.td-bar-in { background: #14b8a6; }
.td-bar-label { font-size: 11px; line-height: 13px; color: var(--wz-text-secondary, #52627a); text-align: center; overflow-wrap: anywhere; }
.td-bars-key { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wz-text-secondary, #52627a); flex-wrap: wrap; }
.td-bars-key .td-dot + * { margin-right: 8px; }

/* ---- Right column -------------------------------------------------------- */
.td-side-card { padding: 16px; }
.td-side-card .td-card-head { margin-bottom: 10px; }
.td-side-card .td-card-title { font-size: 15px; }
.td-number { margin: 0 0 10px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.td-warn-line { margin: 0 0 10px; font-size: 13px; color: #92400e; }
.td-quality { display: grid; gap: 6px; margin-bottom: 10px; }
.td-quality-head, .td-kv { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--wz-text-secondary, #52627a); }
.td-quality-head strong, .td-kv strong { color: var(--wz-text, #111c32); font-weight: 650; text-align: right; }
.td-kv { margin-bottom: 10px; }
.td-quality-bar { height: 8px; border-radius: 999px; background: var(--wz-surface-muted, #eef2f7); overflow: hidden; }
.td-quality-bar span { display: block; height: 100%; border-radius: 999px; background: #94a3b8; }
.td-quality-green span { background: #16a34a; }
.td-quality-yellow span { background: #f59e0b; }
.td-quality-red span { background: #dc2626; }

.td-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.td-quick-tile {
  display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--wz-text, #111c32); text-decoration: none; min-height: 44px;
  transition: background var(--wz-dur-hover, 140ms) var(--wz-ease, ease);
}
.td-quick-tile:hover { background: var(--wz-surface-muted, #f8fafc); }
.td-quick-tile:focus-visible { outline: 2px solid var(--wz-focus, #3b82f6); outline-offset: 1px; }
.td-quick-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--td-tint); color: var(--td-ink); }

.td-mini-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.td-mini-grid > div { min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.td-mini-grid dt { font-size: 12px; color: var(--wz-text-secondary, #52627a); }
.td-mini-grid dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.td-mini-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.td-mini-3 > div { padding: 8px 10px; border-radius: 10px; }
.td-tint-green { background: #ecfdf5; }
.td-tint-red { background: #fef2f2; }
.td-tint-blue { background: #eff6ff; }
.td-alert {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
}
.td-alert p { margin: 0; flex: 1 1 120px; font-weight: 600; }

/* ---- AI Assistant Overview + Follow-ups ---------------------------------- */
.td-ai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.td-stat { padding: 12px; border-radius: 10px; background: var(--wz-surface-muted, #f8fafc); border: 1px solid var(--wz-border, #dee6f0); min-width: 0; }
.td-stat-value { margin: 0; font-size: 20px; line-height: 26px; overflow-wrap: anywhere; font-weight: 700; font-variant-numeric: tabular-nums; }
.td-stat-label { margin: 2px 0 0; font-size: 12px; color: var(--wz-text-secondary, #52627a); }
.td-stat-note { display: block; margin: 4px 0 0; font-size: 11px; color: var(--wz-text-muted, #748299); }
.td-ai-lower { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.td-status-list { margin: 0; display: grid; gap: 6px; padding: 12px; border-radius: 10px; border: 1px solid var(--wz-border, #dee6f0); }
.td-token-box .td-status-list { padding: 0; border: 0; margin: 6px 0; }
.td-token-box { padding: 12px; border-radius: 10px; border: 1px solid var(--wz-border, #dee6f0); }
.td-token-title { margin: 0; font-size: 13px; font-weight: 700; }
.td-token-links { display: flex; gap: 12px; margin: 8px 0 0; }
.td-status-list > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.td-status-list dt { color: var(--wz-text-secondary, #52627a); }
.td-status-list dd { margin: 0; }
.td-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; text-align: right; }
.td-state-dot { width: 8px; height: 8px; border-radius: 999px; background: #94a3b8; }
.td-state.is-on { color: #15803d; }
.td-state.is-on .td-state-dot { background: #16a34a; }
.td-state.is-off { color: var(--wz-text-secondary, #52627a); }

.td-fu-counts { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }

.td-fu-list { list-style: none; margin: 0; padding: 0; display: grid; }
.td-fu-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--wz-border, #dee6f0); }
.td-fu-item .td-avatar-sm { margin: 0; }
.td-fu-main { min-width: 0; }
.td-fu-name { margin: 0; font-size: 14px; font-weight: 650; }
.td-fu-name a { color: var(--wz-text, #111c32); text-decoration: none; }
.td-fu-name a:hover { text-decoration: underline; }
.td-fu-what { margin: 1px 0 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-fu-side { text-align: right; }
.td-fu-side p { margin: 0; font-size: 12px; white-space: nowrap; }
.td-fu-due { color: var(--wz-text, #111c32); font-weight: 600; }

.td-connect { padding: 8px; }
.td-connect-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.today-form { display: grid; gap: 16px; }
.today-form-error { margin: 0; color: var(--wz-danger, #dc2626); font-size: 14px; }

@keyframes today-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- Widths -------------------------------------------------------------- */
@media (max-width: 1439px) {
  .td-main { grid-template-columns: minmax(0, 1fr); }
  .td-desk, .td-perf, .td-ai, .td-fu { grid-column: 1 / -1; }
}
@media (max-width: 1279px) {
  .td-layout { grid-template-columns: minmax(0, 1fr); }
  .td-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 1023px) {
  .td-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-header-side { justify-content: flex-start; }
}
@media (max-width: 767px) {
  /* Phones: the Action Desk first (Part 1 §3), then the figures, then the rest. */
  .td-layout, .td-main { display: contents; }
  .td-desk { order: 1; }
  .td-figures { order: 2; }
  .td-perf { order: 3; }
  .td-side { order: 4; grid-template-columns: minmax(0, 1fr); }
  .td-ai { order: 5; }
  .td-fu { order: 6; }
  .td-kpis { gap: 12px; }
  .td-title { font-size: 24px; line-height: 30px; }
  .td-card { padding: 16px; }
  .td-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .td-tab { flex: none; }
  .td-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: 'av main meta' 'av actions actions'; row-gap: 8px; }
  .td-row > .td-avatar { grid-area: av; align-self: start; }
  .td-row > .td-row-main { grid-area: main; }
  .td-row > .td-row-meta { grid-area: meta; align-self: start; }
  .td-row > .td-row-actions { grid-area: actions; justify-self: stretch; }
  .td-row-actions .td-row-btn { flex: 1; }
  .td-row-btn { min-height: 44px; }
  .td-ai-stats { grid-template-columns: minmax(0, 1fr); }
  .td-ai-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 419px) {
  .td-kpi { padding: 12px 14px; }
  .td-kpi-value { font-size: 24px; line-height: 30px; }
  .td-ai-pill { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .td-row { animation: none; }
  .td-kpi.is-link, .td-tab, .td-quick-tile { transition: none; }
}

/* ---- Inbox follow-ups (chat header button + side panel) ----------------- */
.fu-open { white-space: nowrap; }
.fu-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--wz-primary, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.fu-list { list-style: none; margin: 0; padding: 0; display: grid; }
.fu-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wz-border, #dee6f0);
}
.fu-row.is-overdue { box-shadow: inset 3px 0 0 var(--wz-danger, #dc2626); padding-left: 10px; }
.fu-row-main { min-width: 0; flex: 1; display: grid; gap: 4px; }
.fu-row-title { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.fu-row-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--wz-text-secondary, #52627a); }
.fu-row-note { margin: 0; font-size: 13px; color: var(--wz-text-secondary, #52627a); overflow-wrap: anywhere; }
.fu-row-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.fu-note { margin: 8px 0; font-size: 13px; color: var(--wz-text-secondary, #52627a); }
.fu-closed { margin-top: 12px; }
.fu-closed summary { cursor: pointer; font-size: 13px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 480px) {
  .fu-row { flex-direction: column; }
  .fu-row-actions { width: 100%; }
  .fu-row-actions > .btn { flex: 1; min-height: 44px; }
}
/* AI replies: the chip in the inbox thread header, its "Why?" list, and the number switch. */
.ai-chip { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-2xs) var(--spacing-sm); border-radius: var(--radius-full); background: var(--color-surface-sunken); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.ai-chip.is-active { background: var(--color-primary-soft); border-color: var(--color-primary-soft-border); color: var(--color-primary); }
.ai-chip__text { font-weight: 600; }
.ai-chip__btn { background: none; border: 0; padding: var(--spacing-2xs) var(--spacing-xs); border-radius: var(--radius-xs); color: inherit; font-size: var(--font-size-xs); font-weight: 600; text-decoration: underline; cursor: pointer; }
.ai-chip__btn:disabled { opacity: 0.6; cursor: default; }
.ai-decisions { display: grid; gap: var(--spacing-md); margin: 0; padding-left: var(--spacing-lg); }
.ai-decisions li { overflow-wrap: anywhere; }
.ai-decisions__warn { color: var(--color-danger-text); }
.ai-replies-setting { display: grid; gap: var(--spacing-sm); }
.ai-replies-setting__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; }

/* Phase 3a: a Wazigo support pause the customer cannot lift. */
.ai-replies-staff-paused { padding: 8px 12px; border-radius: 8px; background: var(--color-warning-soft); color: var(--color-warning-text); }

/* Phase 3c: where the answers come from, per number and per decision, and the chat's branch. */
.ai-replies-source { padding: 8px 12px; border-radius: 8px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); }
.ai-replies-source .form-helper { margin: 4px 0 0; }
.ai-replies-card .ai-replies-setting { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.ai-replies-card .ai-replies-setting > :not(.ai-replies-source) { grid-column: 1; }
.ai-replies-card .ai-replies-source { grid-column: 2; grid-row: 1 / 5; padding: 22px; border-color: var(--color-primary-soft-border); background: var(--color-primary-soft); border-radius: 12px; }
.ai-replies-source h3 { font-size: 18px; margin: 0 0 18px; }
.ai-replies-source strong { display: block; font-size: 14px; margin-bottom: 10px; }
.ai-replies-card .ai-replies-setting__row { align-items: flex-start; }
.ai-replies-card .form-helper { line-height: 1.7; }
@media (max-width: 850px) { .ai-replies-card .ai-replies-setting { grid-template-columns: minmax(0, 1fr); } .ai-replies-card .ai-replies-source { grid-column: 1; grid-row: auto; } }
.ai-decisions__source { margin-top: var(--spacing-2xs); }
.ai-decisions__items { margin: var(--spacing-2xs) 0 0; padding-left: var(--spacing-lg); }
.ai-location { display: inline-flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap; font-size: var(--font-size-xs); }
.ai-location.is-readonly { padding: var(--spacing-2xs) var(--spacing-sm); border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-muted); white-space: nowrap; }
.ai-location__label { font-weight: 600; color: var(--color-text-muted); }
.ai-location__select { max-width: 220px; text-overflow: ellipsis; padding: var(--spacing-2xs) var(--spacing-xs); border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-xs); }
.ai-location__error { flex-basis: 100%; color: var(--color-danger-text); white-space: normal; }
/* Inbox 3-pane layout — feature-scoped, imported only by InboxPage. Uses the
   global CSS variables so it stays consistent with the rest of the app. */

.inbox {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  /* Constrain the single row to the container height (minmax(0,...) lets the
     columns shrink below their content) so each pane scrolls internally
     instead of stretching the grid to content height and scrolling the window. */
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  height: calc(100dvh - var(--header-height) - (2 * var(--content-padding)));
  min-height: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --- Left: conversation list --- */
.conv-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  min-width: 0;
  min-height: 0;
}

/* --- Filter bar -----------------------------------------------------------
   Two compact rows (search, then status + a Filters disclosure) instead of the
   four stacked rows this replaced, which cost ~230px of a 320px-wide column.
   A third row appears only when filters are actually applied. */

.conv-filterbar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.conv-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.conv-search-icon {
  position: absolute;
  left: 11px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

.conv-search.form-control {
  /* Slightly tighter than a form input: this is a toolbar control, but still
     16px text so mobile Safari does not zoom on focus. */
  min-height: 40px;
  padding: 8px 34px;
  width: 100%;
}

/* The native search clear button would sit under ours. */
.conv-search::-webkit-search-cancel-button { display: none; }

.conv-search-clear {
  position: absolute;
  right: 4px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

.conv-search-clear:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.conv-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Segmented Open / Resolved */
.conv-segmented {
  display: inline-flex;
  flex: 1;
  min-width: 0;
  padding: 3px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.conv-seg {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.conv-seg:hover { color: var(--color-text); }

.conv-seg.is-active {
  background: var(--color-surface);
  color: var(--color-primary-active);
  box-shadow: var(--shadow-xs);
}

/* Filters disclosure */
.conv-filter-menu { position: relative; flex-shrink: 0; }

.conv-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.conv-filter-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.conv-filter-btn.has-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
}

.conv-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.conv-filter-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  max-width: 80vw;
  padding: var(--spacing-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-sticky);
}

.conv-pop-check { min-height: 36px; padding: 0 0 var(--spacing-sm); }
.conv-pop-group { margin-bottom: var(--spacing-sm); }
.conv-pop-group .form-control { min-height: 38px; padding: 8px 12px; }

.conv-pop-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

/* Applied filters: wrapped, never clipped, each individually removable. */
.conv-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.conv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--color-primary-soft-border);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-info-text);
  font-size: var(--font-size-xs);
  font-weight: 600;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.conv-chip:hover { background: #dbeafe; }

.conv-chip-clear {
  min-height: 28px;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.conv-chip-clear:hover { color: var(--color-text); }

.conv-list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-xs);
}

.conv-row {
  display: flex;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}

.conv-row:hover {
  background: var(--color-bg);
}

.conv-row.is-active {
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Unread should be legible from the name alone, not only from the badge. */
.conv-row.is-unread .conv-name { font-weight: 700; }
.conv-row.is-unread .conv-preview { color: var(--color-text); font-weight: 500; }

.conv-avatar,
.contact-avatar-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

/* Must come after .conv-avatar: same specificity, so source order decides.
   All six clear 4.5:1 against the white initial. */
.conv-avatar-t0 { background: #2563eb; }
.conv-avatar-t1 { background: #7c3aed; }
.conv-avatar-t2 { background: #0f766e; }
.conv-avatar-t3 { background: #b45309; }
.conv-avatar-t4 { background: #be123c; }
.conv-avatar-t5 { background: #4338ca; }

.conv-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.conv-top,
.conv-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.conv-name {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-time {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.conv-preview {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.conv-load-more {
  display: block;
  margin: var(--spacing-sm) auto;
}

.conv-list-footer {
  padding: 8px var(--spacing-md);
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
}

/* --- Center: thread --- */
.thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.thread-empty {
  align-items: center;
  justify-content: center;
}

.thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The chips (chatbot, AI, window) and Resolve wrap under the name rather
     than pushing Resolve off the edge of a narrow thread pane. */
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.thread-header > :last-child {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.thread-name {
  font-weight: 700;
}

.thread-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Green here is genuine WhatsApp state (the free-reply window is open), which
   is exactly what the palette reserves green for. */
.window-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-whatsapp-text);
  background: var(--color-whatsapp-soft);
  border: 1px solid #a7f3d0;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Under an hour the same control turns amber — an approaching deadline the
   user may want to act on, not an error. */
.window-countdown.is-urgent {
  color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border-color: #fcd34d;
}

.window-closed-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-warning-text);
  background: var(--color-warning-soft);
  border: 1px solid #fcd34d;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.thread-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-md);
  background: #f7f9fa;
}

.thread-load-older {
  display: block;
  margin: 0 auto var(--spacing-md);
}

.msg-day-group {
  margin-bottom: var(--spacing-sm);
}

.msg-day-label {
  text-align: center;
  margin: var(--spacing-sm) 0;
  font-size: 11px;
  color: var(--color-text-muted);
}

.msg-row {
  display: flex;
  margin-bottom: 6px;
}

.msg-in {
  justify-content: flex-start;
}

.msg-out {
  justify-content: flex-end;
}

.msg-bubble {
  max-width: 68%;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  word-wrap: break-word;
}

.msg-out .msg-bubble {
  background: #d9fdd3;
}

.msg-bubble.is-failed {
  background: #fee2e2;
}

/* Phase 8.2 — inbound button tap / list pick.
   Static badge, never clickable: it reports state, it is not an action. Paired
   with a visible word rather than colour alone, and neutral (not the blue of
   the outbound Template tag) so it reads as subordinate to the message text.
   nowrap keeps the label whole — it is fixed copy, so it can never overflow. */
.msg-reply-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  margin-bottom: 4px;
  white-space: nowrap;
}

.msg-text {
  margin: 0;
  white-space: pre-wrap;
  font-size: var(--font-size-md);
  color: var(--color-text);
}

.msg-caption {
  margin-top: 4px;
}

.msg-link {
  color: var(--color-info);
  text-decoration: underline;
  word-break: break-all;
}

.msg-out .msg-link {
  color: var(--color-primary-active);
}

/* Link preview card (OpenGraph) */
.link-preview {
  display: block;
  max-width: 320px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}

.link-preview-img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.link-preview-body {
  padding: 6px 10px;
}

.link-preview-domain {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.link-preview-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-top: 1px;
}

.link-preview-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}

.msg-time {
  font-size: 10px;
  color: var(--color-text-muted);
}

.msg-tick {
  font-size: 11px;
  color: var(--color-text-muted);
}

.tick-read {
  color: #34b7f1;
}

.tick-failed {
  color: var(--color-danger);
}

.tick-retrying {
  color: var(--color-text-muted);
}

/* Failed send: the reason, then the recovery. An error without a way out is
   the anti-pattern — every failure here either offers Try again or explains in
   words why trying again cannot help. */
.msg-error {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 11px;
  color: var(--color-danger);
}

.msg-error-text {
  margin: 0;
}

/* Sits inside a bubble, so it stays small — but not below the 24px pointer
   target minimum, and its label is a word rather than the icon alone. */
.msg-retry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-danger-text, var(--color-danger));
  background: var(--color-danger-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.msg-retry:hover:not(:disabled) {
  border-color: var(--color-danger);
}

.msg-retry:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-danger, var(--focus-ring));
}

.msg-retry:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Why a retry will not help, or how many have already been made. Muted so it
   reads as a footnote to the error rather than a second error. */
.msg-error-hint {
  margin: 0;
  color: var(--color-text-muted);
}

.msg-media {
  display: block;
  margin-bottom: 4px;
}

.msg-media-image {
  max-width: 260px;
  max-height: 260px;
  border-radius: var(--radius-sm);
}

.msg-media-video {
  max-width: 260px;
  border-radius: var(--radius-sm);
}

.msg-media-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.msg-media-pending,
.msg-media-error {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* --- Composer --- */
.composer {
  position: relative;
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
}

/* Inline "/shortcut" canned-reply autocomplete — floats above the composer so
   it doesn't shift the chat layout. Reuses the .canned-item rows from team.css. */
.composer-autocomplete {
  position: absolute;
  left: var(--spacing-md);
  right: var(--spacing-md);
  bottom: calc(100% - var(--spacing-sm));
  max-height: 260px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 20;
  padding: 4px;
}

.composer-autocomplete-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 6px 8px;
}

.composer-autocomplete .canned-item.is-active {
  background: var(--color-bg);
}

.composer-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.composer-input {
  flex: 1;
}

/* Icon-only composer controls. Full 44px hit box even though the glyph is
   20px — these sit close together above the keyboard on a phone. */
.composer-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
}

.composer-attach:hover {
  background: var(--color-surface-hover);
  color: var(--color-primary);
}

/* Labeled template trigger in the open composer — discoverable (not a bare icon). */
.composer-tpl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-target);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.composer-tpl-btn:hover {
  background: var(--color-primary-soft);
}

.composer-file-input {
  display: none;
}

.composer-preview-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 6px 10px;
  margin-bottom: var(--spacing-sm);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.composer-preview-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
}

.composer-error {
  margin-bottom: var(--spacing-sm);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.composer-closed {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-md);
  background: #fffbeb;
}

/* The 24h-window notice explains a WhatsApp rule the owner did not choose, so
   it reads as guidance rather than an error they caused. */
.composer-closed-text {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin: 0;
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* --- Right: contact panel --- */
.contact-panel {
  border-left: 1px solid var(--color-border);
  padding: var(--spacing-lg);
  min-height: 0;
  overflow-y: auto;
  text-align: center;
}

.contact-panel-empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.contact-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 28px;
  margin: 0 auto var(--spacing-sm);
}

.contact-name {
  font-weight: 700;
  font-size: var(--font-size-lg);
}

.contact-phone {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.contact-section {
  text-align: left;
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.contact-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.contact-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: var(--font-size-sm);
}

.contact-details dt {
  color: var(--color-text-muted);
}

.contact-details dd {
  margin: 0;
  text-align: right;
  word-break: break-all;
}

.contact-placeholder-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* Narrow screens: collapse the contact panel; stack list over thread. */
@media (max-width: 1024px) {
  .inbox {
    grid-template-columns: 280px 1fr;
  }

  .contact-panel {
    display: none;
  }
}

@media (max-width: 640px) {
  .inbox {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Contact panel — collapsible sections
   -------------------------------------------------------------------------
   The panel is a dense ~320px column that now carries counts, campaigns,
   broadcasts, notes and a history rail, so everything below the header
   collapses. Density is bought with rhythm, not by shrinking text: the type
   floor stays at --font-size-xs (12px) and every header is a full 44px target,
   per the audience note in variables.css.
   ========================================================================= */

.panel-section {
  text-align: left;
  border-top: 1px solid var(--color-border);
}

/* The heading exists for document structure (h3 inside the panel's own
   hierarchy); all of its styling lives on the button it wraps. */
.panel-section-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.panel-section-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  /* Full tap target without padding the collapsed panel out of usefulness. */
  min-height: var(--tap-target);
  padding: var(--spacing-sm) var(--spacing-2xs);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.panel-section-head:hover {
  background: var(--color-surface-hover);
}

/* Never remove: keyboard users navigate this panel section by section. */
.panel-section-head:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.panel-section-chevron {
  flex: none;
  color: var(--color-text-subtle);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.panel-section-chevron.is-open {
  transform: rotate(90deg);
}

.panel-section-title {
  /* min-width:0 lets the title shrink instead of shoving the count pill out of
     the row — the count is the part that must never wrap. */
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* A state badge, not a chip: it reports a count and is never itself clickable.
   Hidden from assistive tech — PanelSection renders the same figure as a full
   phrase beside it. */
.panel-section-count {
  flex: none;
  min-width: 20px;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-full);
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}

.panel-section-body {
  padding: 0 var(--spacing-2xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* A nested contact-section would draw a second divider immediately under the
   header it already sits beneath. */
.panel-section-body .contact-section {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* Figures in the Overview/Messages tables are read as a column, so they need
   tabular figures — Inter has them, and proportional digits make 11 vs 8 look
   like different indents. */
.panel-section-body .contact-details dd {
  font-variant-numeric: tabular-nums;
}

/* --- List rows (campaigns, broadcasts) --- */
.panel-list,
.panel-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.panel-list-item {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

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

.panel-list-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

/* Wraps rather than truncates. A campaign name is the one thing that
   identifies the row, and an ellipsis with the full value only on hover is
   unreachable by keyboard and touch — so the name gets the extra line. */
.panel-list-title {
  min-width: 0;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.panel-list-meta {
  margin-top: var(--spacing-2xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

/* --- History rail --- */
.panel-timeline-item {
  position: relative;
  display: flex;
  gap: var(--spacing-sm);
  padding: 0 0 var(--spacing-md);
}

/* The connecting line, drawn behind the dots and stopped at the last item so
   the rail reads as a finished sequence rather than trailing off. */
.panel-timeline-item::before {
  content: '';
  position: absolute;
  top: var(--spacing-sm);
  bottom: 0;
  left: 3px;
  width: 2px;
  background: var(--color-border);
}

.panel-timeline-item:last-child {
  padding-bottom: 0;
}

.panel-timeline-item:last-child::before {
  display: none;
}

.panel-timeline-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: var(--spacing-sm);
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.panel-timeline-body {
  min-width: 0;
}

/* --- Notes --- */
.contact-note-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.contact-note-form textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
}

.contact-note-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-note {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.contact-note:last-child {
  border-bottom: 0;
}

.contact-note-body {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-text);
  /* Agents paste order ids and links in here; let them reflow rather than
     stretch the panel into a horizontal scroll. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.contact-note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.contact-note-author {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Text button, but still a real pointer target (WCAG 2.2 target size). */
.panel-text-button {
  flex: none;
  min-height: 24px;
  padding: var(--spacing-2xs) var(--spacing-xs);
  margin-right: calc(var(--spacing-xs) * -1);
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.panel-text-button:hover {
  background: var(--color-danger-soft);
}

.panel-text-button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 1px;
}

/* Motion here is orientation (the chevron points where the section went), so
   it is the first thing to drop when the user asks for less of it. */
@media (prefers-reduced-motion: reduce) {
  .panel-section-head,
  .panel-section-chevron {
    transition: none;
  }
}

/* Phase 3b: "Mark as knowledge gap" on a customer's message. */
.msg-gap { display: flex; margin-top: 4px; }
.msg-gap-btn {
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.msg-gap-btn:hover { color: var(--color-text); border-color: var(--color-primary); }
.msg-gap-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.msg-gap-done { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); font-size: 11px; }
.msg-gap-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--color-border); color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-gap-notice { margin: 0; padding: 6px 16px; color: var(--color-success-text); font-size: 13px; }
.msg-gap-form { display: grid; gap: 12px; }
.msg-gap-form p { margin: 0; }

.app-main:has(.inbox-page) { height: 100dvh; min-height: 0; overflow: hidden; }
.app-main:has(.inbox-page) > :not(.app-content) { flex-shrink: 0; }
.app-content:has(> .inbox-page) { display: flex; flex-direction: column; min-height: 0; max-width: none; padding: 12px; }
.inbox-page { display: flex; flex-direction: column; flex: 1; gap: 8px; min-height: 0; min-width: 0; }
.inbox-page > .number-work-header { margin: 0; }
.inbox-page .inbox { flex: 1; height: auto; min-height: 0; grid-template-columns: minmax(260px, .95fr) minmax(340px, 1.6fr) minmax(260px, .85fr); gap: 10px; border: 0; border-radius: 0; background: transparent; }
.inbox-page .conv-list, .inbox-page .thread, .inbox-page .contact-panel { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); overflow: hidden; }
.inbox-page .contact-panel { overflow-y: auto; }
.inbox-page .conv-controls { order: -1; }
.inbox-page .conv-filterbar { padding: 12px; gap: 10px; }
.inbox-page .conv-row { padding: 14px 12px; border-left: 3px solid transparent; gap: 10px; }
.inbox-page .conv-row.is-active { border-left-color: var(--color-primary); background: var(--color-primary-soft); }
.inbox-page .conv-avatar { width: 40px; height: 40px; font-size: 16px; flex-shrink: 0; }
.inbox-page .conv-name { font-size: 13px; }
.inbox-page .conv-preview { font-size: 12px; }
.inbox-page .conv-time { font-size: 11px; }
.inbox-page .conv-assignee { font-size: 11px; margin-top: 6px; }
.inbox-page .thread-header { padding: 14px 16px; gap: 10px; }
.thread-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thread-identity > div { min-width: 0; }
.thread-avatar { display: inline-flex; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; background: #eee6ff; color: #7040bb; border-radius: 50%; font-size: 18px; font-weight: 600; }
.inbox-page .thread-name { font-size: 16px; }
.inbox-page .thread-sub { font-size: 12px; }
.inbox-page .thread-body { padding: 16px; background: linear-gradient(180deg, #f5f9ff, #fff); }
.inbox-page .msg-bubble { background: #f0f2f8; border-radius: 14px 14px 14px 4px; box-shadow: none; font-size: 13px; }
.inbox-page .msg-out .msg-bubble { background: #d9ffd0; border-radius: 14px 14px 4px 14px; }
.inbox-page .msg-bubble.is-failed { background: var(--color-danger-soft); border: 1px solid var(--color-danger); }
.inbox-page .msg-day-label { background: none; border: 0; color: var(--color-text-muted); font-size: 12px; }
.inbox-page .composer { padding: 12px; background: white; }
.inbox-page .composer-row { flex-wrap: wrap; gap: 8px; }
.inbox-page .composer-input { order: -1; flex: 1 0 100%; width: 100%; min-height: 56px; }
.inbox-page .composer-row > .btn:last-child { margin-left: auto; min-width: 80px; }
.inbox-page .composer-from { font-size: 11px; margin: 0 0 5px; }
.inbox-page .composer-closed { padding: 16px; background: #fff9eb; border-top: 1px solid #f2d18b; }
.contact-profile { display: flex; gap: 12px; align-items: center; padding: 20px 16px 14px; }
.inbox-page .contact-avatar-lg { margin: 0; width: 48px; height: 48px; font-size: 20px; flex-shrink: 0; }
.inbox-page .contact-name { font-size: 16px; text-align: left; }
.inbox-page .contact-phone { font-size: 12px; text-align: left; margin: 4px 0 0; }
.contact-quick-actions { display: flex; gap: 8px; padding: 0 16px 16px; }
.contact-quick-actions .btn { flex: 1; padding-left: 8px; padding-right: 8px; }
.inbox-page .contact-section-title { font-size: 13px; text-transform: none; letter-spacing: 0; }
.inbox-page .contact-details { font-size: 12px; }
.inbox-pane-nav { display: none; }
@media (max-width: 1200px) {
  .inbox-page .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox-pane-nav { display: flex; gap: 4px; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; flex-shrink: 0; }
  .inbox-pane-nav button { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; min-height: 44px; padding: 7px 5px; border: 0; background: transparent; color: var(--color-text-muted); font-size: 12px; border-radius: 7px; }
  .inbox-pane-nav button[aria-pressed='true'] { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
  .inbox-pane-nav button:disabled { opacity: .45; }
  .inbox-page .inbox > .conv-list, .inbox-page .inbox > .thread, .inbox-page .inbox > .contact-panel { display: none; }
  .inbox-page[data-mobile-pane='list'] .inbox > .conv-list, .inbox-page[data-mobile-pane='thread'] .inbox > .thread { display: flex; }
  .inbox-page[data-mobile-pane='details'] .inbox > .contact-panel { display: block; }
  .inbox-page .thread-header { padding: 12px; }
  .inbox-page .thread-header > :last-child { width: 100%; justify-content: flex-start; gap: 6px !important; }
  .inbox-page .thread-header .btn { min-height: 40px; padding: 8px; font-size: 12px; }
  .inbox-page .thread-header .window-closed-tag { padding: 5px 8px; font-size: 12px; }
  .inbox-page .thread-body { padding: 12px; }
}
.wa-chat { padding: var(--spacing-lg); }
.wa-chat-reply { padding: var(--spacing-md); margin: var(--spacing-md) 0; background: var(--color-bg); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.wa-chat-reply p + p { margin-top: var(--spacing-sm); }
.wa-chat-form { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.wa-chat-form label { width: 100%; }
.wa-chat-form input { flex: 1; min-width: 160px; }
.guided-wa { padding: 24px; }
.guided-wa-heading, .guided-wa-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.guided-wa-steps { display: flex; gap: 16px; padding: 0; margin: 24px 0; list-style: none; flex-wrap: wrap; }
.guided-wa-steps li { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.guided-wa-steps li span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--color-border); border-radius: 50%; }
.guided-wa-steps li[aria-current] { color: var(--color-text); font-weight: 600; }
.guided-wa-steps li[aria-current] span { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.guided-wa .wa-es { margin: 16px 0; padding: 20px; }
.guided-wa-checks p { margin: 16px 0; }
.guided-wa-actions { justify-content: flex-start; }
.guided-wa-steps li.is-complete { color: var(--color-primary); }
.setup-preparation { background: var(--color-bg); border-radius: 12px; padding: 16px; }
.setup-preparation h3 { margin: 0; font-size: 16px; }
.setup-help > details { padding-left: 16px; border-left: 2px solid var(--color-border); }
.setup-readiness { list-style: none; padding: 0; margin: 16px 0; }
.setup-readiness li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.setup-readiness span { color: var(--color-text-muted); text-align: right; }
@media (max-width: 600px) { .guided-wa { padding: 16px; } .guided-wa-steps { flex-direction: column; } }
.setup-task { display: flex; gap: 16px; border-top: 1px solid var(--color-border); padding: 24px 0; }
.setup-task > div { flex: 1; min-width: 0; }
.setup-task h3 { margin: 0; font-size: 18px; }
.setup-task-number { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; background: var(--color-primary); color: white; border-radius: 50%; font-weight: 600; }
.setup-instructions { padding-left: 20px; line-height: 1.7; margin-bottom: 16px; }
.setup-message-preview { border-left: 3px solid var(--color-primary); background: var(--color-bg); border-radius: 8px; padding: 16px; margin: 16px 0; line-height: 1.6; }
.setup-success, .setup-delivery-status { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; margin: 16px 0; }
.setup-success strong { color: var(--color-primary); }
.setup-help { margin: 16px 0; }
.setup-help summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.setup-help p { line-height: 1.6; }
@media (max-width: 600px) { .setup-task { gap: 10px; } .setup-task .guided-wa-actions { align-items: stretch; flex-direction: column; } }
/* Guided setup — its own full-screen chrome, outside MainLayout.
   Imported only by OnboardingPage. */

.ob-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

/* ---- Top bar ------------------------------------------------------- */

.ob-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.ob-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  color: var(--color-text);
}

/* The mark itself is <BrandMark/> — see components/layout/BrandMark.jsx.
   This header used to draw its own blue tile with a generic chat glyph, which
   meant the product had two different logos depending on which screen you
   landed on first. */

.ob-top-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.ob-step-count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* ---- Step rail ----------------------------------------------------- */

.ob-rail {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--spacing-lg) var(--spacing-sm);
}

.ob-rail-track {
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.ob-rail-fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
  /* Width, not transform: the bar is a measure of progress and reads more
     honestly growing from its own start than scaling from the middle. */
  transition: width 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .ob-rail-fill {
    transition: none;
  }
}

.ob-rail-steps {
  display: flex;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.ob-rail-step button {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-subtle);
  font: inherit;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  cursor: default;
}

.ob-rail-step button:not(:disabled) {
  cursor: pointer;
}

.ob-rail-step button:not(:disabled):hover {
  background: var(--color-surface-hover);
}

.ob-rail-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  font-size: 11px;
  font-weight: 700;
}

.ob-rail-step.is-current button {
  color: var(--color-text);
  font-weight: 600;
}

.ob-rail-step.is-current .ob-rail-num {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.ob-rail-step.is-done .ob-rail-num {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

/* ---- Body ---------------------------------------------------------- */

.ob-main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.ob-card {
  width: 100%;
  max-width: 640px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-xl);
  align-self: flex-start;
}

/* Step one carries the connect form and needs the room. */
.ob-card-wide {
  max-width: 860px;
}

.ob-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-subtle);
  margin-bottom: var(--spacing-xs);
}

.ob-heading {
  font-size: var(--font-size-2xl);
  line-height: 1.25;
  margin-bottom: var(--spacing-sm);
  /* Balance only, no width cap: a cap short enough to force a break on the
     longest heading also breaks the ones that fit. Where a heading does wrap,
     balance keeps the last line from holding a single word. */
  text-wrap: balance;
}

.ob-lede {
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 60ch;
  margin-bottom: var(--spacing-lg);
}

.ob-number {
  color: var(--color-text);
  white-space: nowrap;
}

.ob-instructions {
  margin: 0 0 var(--spacing-lg);
  padding-left: var(--spacing-lg);
  color: var(--color-text-muted);
  line-height: 2;
  max-width: 58ch;
}

.ob-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.ob-note {
  margin-top: var(--spacing-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  max-width: 60ch;
}

.ob-done,
.ob-warning,
.ob-check {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  line-height: 1.6;
}

.ob-done {
  border: 1px solid var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.ob-warning,
.ob-check.is-warn {
  border: 1px solid var(--color-warning);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.ob-check {
  margin-top: var(--spacing-lg);
}

.ob-check.is-ok {
  border: 1px solid var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.ob-done svg,
.ob-warning svg,
.ob-check svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.ob-connect-panel {
  margin-top: var(--spacing-lg);
}

/* The connect panels are cards in their own right on the settings screen.
   Inside the wizard they are already inside one, so drop the second frame. */
.ob-connect-panel > .card {
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

/* ---- Closing screen ------------------------------------------------ */

.ob-seal {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: var(--spacing-md);
}

.ob-seal.is-ready {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.ob-seal.is-waiting {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.ob-recap {
  list-style: none;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ob-recap li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.ob-recap li:last-child {
  border-bottom: 0;
}

.ob-recap li.is-done {
  color: var(--color-text);
}

.ob-recap-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-subtle);
}

.ob-recap li.is-done .ob-recap-mark {
  background: var(--color-success);
  color: #fff;
}

.ob-recap-title {
  flex: 1;
  overflow-wrap: anywhere;
}

.ob-recap-tag {
  margin-left: var(--spacing-xs);
  font-size: 12px;
  color: var(--color-text-subtle);
}

.ob-recap-link {
  border: 0;
  background: none;
  padding: var(--spacing-xs);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.ob-recap-link:hover {
  text-decoration: underline;
}

/* ---- Footer -------------------------------------------------------- */

.ob-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.ob-foot-right {
  display: flex;
  gap: var(--spacing-sm);
}

@media (max-width: 640px) {
  .ob-top,
  .ob-rail,
  .ob-foot {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .ob-main {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .ob-card {
    padding: var(--spacing-lg);
  }

  .ob-brand-name {
    display: none;
  }

  /* Stacked, full-width and thumb-reachable rather than two cramped buttons. */
  .ob-actions > * {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .ob-top { flex-wrap: wrap; }
  .ob-top-right { min-width: 0; flex: 1 1 240px; justify-content: space-between; gap: 8px; }
  .ob-top-right .btn { white-space: normal; }
  .ob-foot { flex-wrap: wrap; gap: 12px; }
  .ob-foot-right { min-width: 0; flex-wrap: wrap; }
}

.ob-main > div { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.webhooks-page .page-header { display: block; }
.webhooks-page .page-subtitle { max-width: 850px; }
.webhook-layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); align-items: start; gap: 18px; }
.webhook-main, .webhook-aside { display: grid; min-width: 0; gap: 18px; }
.webhook-layout h2 { margin: 0 0 8px; font-size: 16px; }
.webhook-layout p { margin: 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }
.webhook-about { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: var(--color-primary-soft); border-color: var(--color-primary-soft-border); }
.webhook-about > svg { color: var(--color-primary); flex-shrink: 0; }
.webhook-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; }
.webhook-card-head .btn { flex-shrink: 0; }
.webhook-directory { overflow: hidden; }
.webhook-directory .table-wrapper { margin: 0 12px 12px; }
.webhook-directory .table-header th { font-size: 10px; }
.webhook-directory .table-row td { font-size: 12px; padding: 14px 10px; }
.webhook-directory .webhook-url { max-width: 230px; overflow-wrap: anywhere; }
.webhook-event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px 16px; }
.webhook-event-grid article { display: flex; align-items: flex-start; gap: 7px; border: 1px solid var(--color-border); border-radius: 8px; padding: 12px 10px; background: var(--color-primary-soft); }
.webhook-event-grid article > svg { color: var(--color-primary); flex-shrink: 0; }
.webhook-event-grid strong { display: block; font-size: 11px; overflow-wrap: anywhere; }
.webhook-event-grid p { font-size: 11px; margin-top: 5px; }
.webhook-aside > .card { padding: 20px; }
.webhook-aside > .card > p { margin-bottom: 16px; }
.webhook-aside .btn { width: 100%; }
.webhook-aside .form-group { margin: 16px 0; }
.webhook-test-kind { display: flex; justify-content: space-between; gap: 8px; }
.webhook-empty-help { padding: 12px; border-radius: 8px; background: var(--color-surface-sunken); }
.webhook-payload .copy-field { display: flex; flex-direction: column; align-items: stretch; }
.webhook-payload .copy-field-value { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 8px; font-size: 11px; line-height: 1.7; }
.webhook-payload .copy-field .btn { margin-top: 8px; }
@media (max-width: 1100px) { .webhook-layout { grid-template-columns: minmax(0, 1fr); } .webhook-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .webhook-aside { grid-template-columns: minmax(0, 1fr); } .webhook-card-head { flex-direction: column; } .webhook-card-head .btn { width: 100%; } .webhook-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* =========================================================================
   Locations & WhatsApp Numbers (Phase 2a). Builds on components/ui; only the
   few pieces the shared blocks do not have live here.
   ========================================================================= */

.loc-page .wz-tab { text-decoration: none; }
.loc-page .wz-page-header-row { align-items: flex-start; }
.loc-page .wz-page-subtitle { font-size: 14px; }
.loc-page .loc-business { padding: 16px 20px; border: 1px solid var(--wz-border); border-radius: 10px; background: var(--color-surface); max-width: 600px; }
.loc-page .wz-table td { padding-top: 20px; padding-bottom: 20px; }
.loc-page .loc-cell-name strong { color: var(--color-text); }
.loc-page .loc-chip { background: var(--color-primary-soft); border-color: var(--color-primary-soft-border); color: var(--color-primary); }
.loc-panel .loc-owner { padding: 14px; background: var(--color-primary-soft); border-radius: 8px; font-weight: 600; }
.loc-panel .loc-panel-section { padding: 18px 0; }
.loc-panel .loc-checks li { border: 1px solid var(--wz-border); padding: 12px; border-radius: 8px; }
.loc-panel .loc-checks li:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.loc-mapping-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.loc-mapping-grid.has-selection { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
.loc-mapping-grid > .wz-card { min-width: 0; }
.loc-mapping-grid .wz-table-wrap { max-width: 100%; overflow-x: auto; }
.loc-mapping-grid.has-selection > .wz-card:first-child > .wz-card-body { padding: 16px; }
.loc-mapping-grid.has-selection .wz-table th, .loc-mapping-grid.has-selection .wz-table td { padding: 12px 8px; font-size: 12px; }
.loc-mapping-grid tr:has(button[aria-expanded='true']) { background: var(--color-primary-soft); }
.loc-inline-panel { position: sticky; top: 88px; }
.loc-inline-panel .wz-card-footer { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) { .loc-mapping-grid.has-selection { grid-template-columns: minmax(0, 1fr); } .loc-inline-panel { position: static; } }
@media (max-width: 600px) { .loc-page .loc-business { max-width: 100%; padding: 14px; } }

.loc-business { display: grid; gap: 12px; max-width: 560px; }

.loc-notice { margin: 0; color: var(--wz-success, #15803d); font-weight: 600; }
.loc-notice:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.loc-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--wz-primary-border, #bfdbfe);
  border-radius: var(--wz-radius-input, 8px);
  background: var(--wz-primary-soft, #eff6ff);
  color: #1e3a8a;
  font-size: 14px;
}
.loc-info p { margin: 0; }
.loc-info .icon { flex: none; margin-top: 1px; }

.loc-alert {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--wz-radius-input, 8px);
  font-size: 14px;
}
.loc-alert p { margin: 0; flex: 1 1 220px; }
.loc-alert.is-danger { border: 1px solid #fecaca; background: #fff7f7; color: #991b1b; }

.loc-muted { color: var(--wz-text-secondary, #52627a); font-size: 13px; }
.loc-cell-name { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.loc-suffix { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wz-text-secondary, #52627a); }

.loc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.loc-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  font-size: 13px;
  line-height: 22px;
}

.loc-row-actions { display: inline-flex; align-items: center; gap: 8px; }
/* 44px touch targets for the row menu and table buttons. */
.loc-page .wz-table .wz-icon-btn,
.loc-page .wz-table .btn { min-height: 44px; min-width: 44px; }

/* ---- Location form -------------------------------------------------------- */
.loc-form { display: grid; gap: 16px; }
.loc-form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.loc-form textarea.form-control { min-height: 88px; resize: vertical; }

/* ---- Mapping panel -------------------------------------------------------- */
.loc-panel { display: grid; gap: 20px; }
.loc-panel-section { display: grid; gap: 6px; margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--wz-border, #dee6f0); }
.loc-panel-heading { margin: 0; padding: 0; font-size: 15px; font-weight: 700; color: var(--wz-text, #111c32); }
.loc-owner { margin: 4px 0 0; padding: 10px 12px; border: 1px solid var(--wz-border, #dee6f0); border-radius: var(--wz-radius-input, 8px); background: var(--wz-surface-muted, #f8fafc); }
.loc-fieldset { min-width: 0; }
.loc-checks { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; }
.loc-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.loc-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--wz-primary, #2563eb); }
.loc-check input:focus-visible { outline: 2px solid var(--wz-focus, #3b82f6); outline-offset: 2px; }
.loc-business-wide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0; font-size: 13px; color: var(--wz-text-secondary, #52627a); }

.loc-impact { display: grid; gap: 10px; margin: 6px 0 0; }
.loc-impact div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 12px; }
.loc-impact dt { font-size: 13px; font-weight: 600; color: var(--wz-text-secondary, #52627a); }
.loc-impact dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Account Settings → Workspaces summary ------------------------------- */
.number-card-ownership { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 14px; }
.number-card-ownership dl { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.number-card-ownership dl div { display: flex; gap: 6px; }
.number-card-ownership dt { color: var(--wz-text-secondary, #52627a); }
.number-card-ownership dd { margin: 0; }
.number-card-ownership a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 767px) {
  .loc-impact div { grid-template-columns: 1fr; gap: 2px; }
  .loc-page .wz-table td { align-items: center; }
}
/* WhatsApp Connection feature — feature-scoped styles (imported only here). */

:root[data-look='v2'] .workspaces-page .page-header { align-items: flex-start; }
.workspaces-page .wa-stack > .setup-help { order: 4; margin: 0; }
.workspace-directory-summary .number-meter { padding: 0; border: 0; background: none; margin: 0 0 8px; }
.workspace-directory-summary .number-meter-head { gap: 4px; }
.workspace-directory-summary .number-meter-count { font-size: 20px; }
.workspace-directory-summary .number-meter-note { font-size: 10px; }
.workspace-directory-summary .number-meter-bar { margin-top: 8px; }
.workspace-directory-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.workspace-directory-summary__item { display: flex; align-items: center; gap: 16px; padding: 20px; margin: 0; }
.workspace-directory-summary__item > span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); }
.workspace-directory-summary__item strong, .workspace-directory-summary__item small { display: block; }
.workspace-directory-summary__item strong { font-size: 26px; margin-bottom: 5px; }
.workspace-directory-summary__item small { font-size: 12px; color: var(--color-text-muted); }
.workspace-directory-toolbar { display: flex; flex-wrap: wrap; gap: 12px; }
.workspace-directory-toolbar input { flex: 1; min-width: 240px; }
.workspace-directory-toolbar select { width: 180px; }
.workspace-directory { margin: 0; overflow: hidden; }
.workspace-directory .table { margin: 0; }
.workspace-directory .table td { padding: 16px; }
.workspace-directory__identity { display: flex; align-items: center; gap: 12px; }
.workspace-directory__identity strong { display: inline-block; margin-right: 8px; }
.workspace-directory__identity small { display: block; color: var(--color-text-muted); margin-top: 5px; }
.workspace-directory__avatar { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; color: white; justify-content: center; align-items: center; flex-shrink: 0; font-size: 18px; font-weight: 600; }
.workspace-directory__primary { background: var(--color-primary-soft); }
.workspace-directory__primary td:first-child { border-left: 3px solid var(--color-primary); }
.workspace-directory__status { display: flex; flex-wrap: wrap; gap: 5px; max-width: 180px; }
.workspace-directory__status small { flex-basis: 100%; font-size: 11px; }
.modal-overlay:has(.workspace-manager) { justify-content: flex-end; padding: 0; }
.modal-container:has(.workspace-manager) { width: min(900px, 100%); max-width: 900px; max-height: 100vh; height: 100vh; border-radius: 16px 0 0 16px; margin: 0; }
.workspace-manager .number-card { border: 0; box-shadow: none; }
.workspace-manager .number-card-body { padding: 16px 0; }
.workspace-manager .number-card-head { padding: 10px 0; }
.workspace-manager-links { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.workspace-manager .number-card-body > .card > .card-body > .detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.workspace-manager .detail-row { gap: 12px; }
.workspace-manager .detail-row dd { overflow-wrap: anywhere; }
.workspace-add-columns { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.workspace-add-columns > div, .workspace-add-guide { min-width: 0; }
.workspace-add-guide h3 { margin: 0 0 16px; font-size: 17px; }
.workspace-add-guide h4 { margin-top: 24px; }
.workspace-add-guide p, .workspace-add-guide li { font-size: 13px; line-height: 1.7; color: var(--color-text-muted); }
.workspace-add-guide ul { padding-left: 18px; }
#workspace-add { scroll-margin-top: 100px; }
@media (max-width: 1100px) { .workspace-directory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workspace-add-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .workspace-directory-summary { gap: 10px; }
  .workspace-directory-summary__item { padding: 14px; gap: 10px; }
  .workspace-directory-summary__item > span { width: 32px; height: 32px; flex-shrink: 0; }
  .workspace-directory-toolbar input { flex-basis: 100%; min-width: 0; }
  .workspace-directory-toolbar select { flex: 1; width: auto; min-width: 130px; }
  .workspace-directory .table, .workspace-directory tbody, .workspace-directory tr { display: block; }
  .workspace-directory thead { display: none; }
  .workspace-directory tr { padding: 12px; border-bottom: 1px solid var(--color-border); }
  .workspace-directory .table td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; font-size: 13px; }
  .workspace-directory td::before { content: attr(data-label); color: var(--color-text-muted); flex-shrink: 0; font-size: 12px; }
  .workspace-directory td:first-child::before { display: none; }
  .workspace-directory__status { justify-content: flex-end; }
  .workspace-directory__status small { text-align: right; }
  :root[data-look='v2'] .modal-container:has(.workspace-manager) { border-radius: 0; }
  .workspace-manager .number-card-body > .card > .card-body > .detail-list { grid-template-columns: minmax(0, 1fr); }
}

.wa-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.wa-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-md);
}

/* The method chooser is a real radio group: the input is visually hidden but
   still focusable, and the card is the label. Never `display: none` on the
   input — that removes it from the tab order and from every screen reader. */
.wa-method-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.wa-method-legend {
  padding: 0;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--color-text);
}

.wa-method-card {
  position: relative;
  display: flex;
  gap: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.wa-method-card:hover:not(.is-disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

/* Same recipe as the house .sr-only: hidden from sight, still focusable and
   still announced. Not opacity/visibility/display, all of which remove it from
   the tab order or the accessibility tree. */
.wa-method-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus lands on the hidden input, so the ring has to be drawn on the card. */
.wa-method-input:focus-visible + .wa-method-body {
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

.wa-method-card.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-sm);
}

.wa-method-card.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wa-method-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.wa-method-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 600;
  color: var(--color-text);
}

.wa-method-desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* The tick is decoration on top of the selected state, never the only signal
   of it — the border, the fill and the radio itself all say the same thing. */
.wa-method-tick {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  display: none;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.wa-method-card.is-selected .wa-method-tick {
  display: flex;
}

/* ---- Embedded Signup panel (Path B) -------------------------------- */

.wa-es-heading {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xs);
}

.wa-es-lede {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  max-width: 62ch;
  line-height: 1.7;
}

.wa-es-points {
  list-style: none;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 68ch;
}

.wa-es-points li {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.wa-es-points svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.wa-es-cta {
  min-width: 240px;
}

.wa-es-note {
  margin-top: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-width: 62ch;
}

/* A connection that succeeded with a caveat. Warning, not error: the number
   IS connected, and colouring it red would send them to support over
   something they can finish themselves. */
.wa-notice {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  padding: var(--spacing-md);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  line-height: 1.6;
}

.wa-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.wa-steps {
  margin: 0 0 var(--spacing-md);
  padding-left: var(--spacing-lg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}

.wa-copy-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.wa-code {
  flex: 1;
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-sm);
  word-break: break-all;
}

/* Auto-pause banner. Sits above the card header because the tenant's sending
   has actually stopped — this is not a hint, it is the reason nothing is going
   out, and burying it in a detail row would let them miss it entirely. */
.connection-paused {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-danger-soft, rgba(220, 38, 38, 0.08));
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.connection-paused strong {
  color: var(--color-danger);
}

/* Meta refusing every send — same red as the pause above it, but with the way
   out beside the text: this one is repaired in Meta, not here. */
.connection-blocked {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-danger-soft, rgba(220, 38, 38, 0.08));
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.connection-blocked > div { flex: 1; min-width: 260px; }

/* The title carries the alarm colour; a menu path quoted mid-sentence does
   not — red there reads as another thing being wrong. */
.connection-blocked > div > strong { display: block; color: var(--color-danger); }

.connection-blocked span { display: block; margin-top: 2px; max-width: 78ch; }

.connection-blocked .btn { flex-shrink: 0; }

.connection-blocked-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Why clearing the warning was refused, beside the button that was pressed. */
.connection-blocked-note {
  margin-top: var(--spacing-sm);
  font-weight: 600;
  color: var(--color-danger);
}

/* Takes the place of the block once cleared. Neutral, for the same reason the
   app-wide bar is: WhatsApp has confirmed nothing, the tenant has. */
.connection-cleared {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-primary-soft);
  color: var(--color-info-text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.connection-cleared > svg { flex-shrink: 0; margin-top: 2px; }

.connection-cleared span { max-width: 78ch; }

/* Missing webhook fields. Warning-coloured rather than error: the connection
   works, but specific events will never arrive — a silent gap, not a failure. */
.wa-missing-fields {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning, #d97706);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.wa-missing-fields ul {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-md);
}

.wa-missing-fields code {
  font-family: var(--font-mono, monospace);
}

/* The way out of this screen and into Meta's, at the head of the steps that
   tell them what to do once they are there. Primary-soft rather than a plain
   row: it is the one action in a card that is otherwise all reading. */
.wa-meta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-soft-border);
  border-radius: var(--radius-md);
}

.wa-meta-link > div { flex: 1; min-width: 220px; }

/* The heading only. An inline <strong> naming a menu path inside the sentence
   must not become its own line — it reads as a broken layout. */
.wa-meta-link > div > strong:first-child { display: block; font-weight: 700; }

.wa-meta-link p {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.wa-meta-link .btn { flex-shrink: 0; }

/* The second-best link, and it reads as second-best on purpose: one primary
   action per block, or neither gets pressed. */
.wa-meta-fallback {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.wa-meta-fallback a { color: var(--color-primary); text-decoration: underline; }

.wa-fields-ok {
  margin: var(--spacing-md) 0;
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

/* ==========================================================================
   Coexistence — the Business app and this inbox on one number
   ========================================================================== */

.coex-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  /* `.card` carries no padding in this system — each row supplies its own, so
     the dividers can span the full width. This card has no rows to hang it on,
     so it takes the same 16/24 inset directly and stays in rhythm with the
     Connection card above it. */
  padding: 16px 24px;
}

.coex-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}

.coex-heading {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

/* Status, not brand: this says "your phone is still live", which is a state.
   Kept to one line with a shrinkable label so a badge never wraps. */
.coex-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-success-text);
  background: var(--color-success-soft);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}

.coex-lede {
  margin: 0;
  max-width: 65ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted, var(--gray-600));
}

.coex-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.coex-row {
  display: flex;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
}

.coex-row-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-text-muted, var(--gray-600));
}

.coex-row-body { min-width: 0; flex: 1 1 auto; }

.coex-row-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.coex-row-status {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-text-muted, var(--gray-600));
}

/* Tone carries the icon colour only. The status word beside it always says the
   same thing in text, so nothing here depends on seeing a colour. */
.coex-row.is-done .coex-row-icon { color: var(--color-success); }
.coex-row.is-working .coex-row-icon { color: var(--color-primary, #2563eb); }
.coex-row.is-problem .coex-row-icon { color: var(--color-danger); }
/* Stalled is not failed: nobody refused us, the import simply went quiet, and
   it is usually recoverable by asking again. Warning rather than danger. */
.coex-row.is-stalled .coex-row-icon { color: var(--color-warning); }

/* Why it stopped, and the one button that does something about it. Kept inside
   the row so the reason can never be read against the wrong sync. */
.coex-row-problem {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.coex-row-reason {
  margin: 0;
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted, var(--gray-600));
}

.coex-row-refusal {
  margin: 0;
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-danger-text, var(--color-danger));
}

.coex-progress {
  margin-top: 8px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  overflow: hidden;
}

.coex-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary, #2563eb);
  /* Width only, and only while a real import is moving. */
  transition: width 400ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .coex-progress-fill { transition: none; }
}

.coex-progress-note {
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted, var(--gray-600));
}

.coex-alert {
  display: flex;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--color-danger-soft);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md, 8px);
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}

.coex-alert > .icon { flex: 0 0 auto; color: var(--color-danger); }
.coex-alert-title { margin: 0; font-size: 13px; font-weight: 600; }
.coex-alert-body { margin: 4px 0 0; max-width: 60ch; font-size: 12px; line-height: 1.6; }

/* --- Pre-connect disclosure -------------------------------------------- */

.coex-disclose {
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px);
  border: 1px solid var(--color-primary-soft-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-primary-soft);
}

.coex-disclose-lede {
  display: flex;
  gap: 8px;
  margin: 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-info-text);
}

.coex-disclose-lede > .icon { flex: 0 0 auto; margin-top: 2px; }

.coex-disclose-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  /* 44px is the touch minimum; the padding is what gets it there rather than a
     height that would leave the label floating. */
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-info-text);
  text-align: left;
}

.coex-disclose-toggle:hover { text-decoration: underline; }

.coex-disclose-toggle .icon { transition: transform 150ms ease; }
.coex-disclose-toggle .icon.is-open { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .coex-disclose-toggle .icon { transition: none; }
}

.coex-disclose-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coex-disclose-list li {
  display: flex;
  gap: 8px;
  max-width: 62ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-info-text);
}

.coex-disclose-list li > .icon { flex: 0 0 auto; margin-top: 3px; }

/* --- Which Embedded Signup flow to run ---------------------------------- */

.wa-mode {
  margin: 0 0 var(--space-4, 16px);
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wa-mode-legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.wa-mode-option {
  display: flex;
  gap: 10px;
  /* 12px + the 20px control keeps the whole row past the 44px touch minimum,
     and the label IS the target — not just the radio dot. */
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #fff);
  cursor: pointer;
}

.wa-mode-option:hover { border-color: var(--color-border-strong); }

/* Selection is carried by the border AND the radio itself, never by colour
   alone — the fill is a tint, not the signal. */
.wa-mode-option.is-selected {
  border-color: var(--color-primary, #2563eb);
  background: var(--color-primary-soft);
}

.wa-mode-option input { margin-top: 3px; flex: 0 0 auto; }

.wa-mode-option:focus-within {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

.wa-mode-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.wa-mode-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.wa-mode-note {
  max-width: 60ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted, var(--gray-600));
}

.wa-mode-disclose {
  margin: -4px 0 4px 30px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-primary-soft);
}

/* =====================================================================
   Multi-number (MN.8): the workspace's list of WhatsApp numbers.

   The list is the screen when a tenant has more than one number, and it is a
   single opened card when they have one — so every rule here has to look
   deliberate at a length of one. Nothing below introduces a colour, a radius or
   a spacing value of its own: all of it is variables.css.
   ===================================================================== */

.number-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.number-card {
  padding: 0;
  overflow: hidden;
}

/* The number that is asking for something. A left edge rather than a fill:
   the card carries badges that are already red, and a red card behind red
   badges reads as one alarm twice. */
.number-card.is-attention {
  box-shadow: inset 3px 0 0 0 var(--color-danger);
}

/* The whole header is the disclosure control, so it is a button and has to
   shed the button defaults rather than fight them. */
.number-card-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-md);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.number-card-head:hover {
  background: var(--color-surface-hover);
}

/* Never removed — keyboard users navigate this list by it. Inset so the ring
   is not clipped by the card's own overflow. */
.number-card-head:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -3px;
}

.number-card-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.number-card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-height-tight);
  /* A tenant may type 60 characters into `label`. Wrap rather than truncate —
     the name is the one thing on the row that must stay whole. */
  overflow-wrap: anywhere;
}

.number-card-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  /* Tabular figures so a column of numbers lines up. */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Wraps before anything shrinks: a status the tenant cannot read is worse than
   a taller row (chip-collection reflow). */
.number-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  min-width: 0;
}

.number-badge-primary {
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
  border-color: var(--color-primary-soft-border);
}

.number-card-facts {
  padding: 0 var(--spacing-md);
}

.number-card-facts .detail-list {
  margin: 0;
}

.number-card-facts:empty {
  display: none;
}

.number-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.number-card-rename {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 420px;
}

.number-card-rename .form-group {
  margin-bottom: 0;
}

.number-card-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  margin: calc(-1 * var(--spacing-sm)) var(--spacing-md) var(--spacing-md);
  max-width: 70ch;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

.number-card-hint > .icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* The open card's detail. Its children are full cards of their own, so the
   body is a sunken tray that groups them under the number they belong to. */
.number-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
}

.number-card-body:empty {
  display: none;
}

/* --- The plan meter ------------------------------------------------- */

.number-meter {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.number-meter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sm);
  justify-content: space-between;
}

.number-meter-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.number-meter-note {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  max-width: 60ch;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.number-meter-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  overflow: hidden;
}

.number-meter-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--duration-base) var(--ease-out);
}

/* At the cap the bar stops being informative and starts being a limit. */
.number-meter.is-full .number-meter-fill {
  background: var(--color-warning);
}

/* --- Who can see this number ---------------------------------------- */

.number-access-lede {
  max-width: 70ch;
  margin-bottom: var(--spacing-md);
}

.number-access-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  margin: 0 0 var(--spacing-md);
  padding: 0;
  list-style: none;
}

.number-access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.number-access-row:hover {
  background: var(--color-surface-hover);
}

/* The label is the target, so the whole row height is clickable rather than a
   14px box. */
.number-access-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  cursor: pointer;
}

.number-access-row.is-fixed .number-access-label {
  cursor: default;
}

.number-access-label input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

.number-access-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}

.number-access-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  text-transform: capitalize;
}

/* Says whose rule the disabled checkbox is. A greyed box with no sentence is
   read as a fault, and gets reported as one. */
.number-access-always {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.number-access-actions {
  align-items: center;
  flex-wrap: wrap;
}

.number-access-done {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-success-text);
}

/* --- Add another number ---------------------------------------------- */

.number-add {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.number-add-lede {
  max-width: 70ch;
}

/* An action that succeeded, in the same place its failures appear. */
.wa-notice.is-done {
  border-color: #a7f3d0;
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

@media (max-width: 640px) {
  /* At 375px the badge rail has no room beside the name, so the header becomes
     three stacked rows and the chevron moves to the top-right corner. */
  .number-card-head {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .number-card-identity {
    flex: 1 1 60%;
  }

  .number-card-badges {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .number-card-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}