:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #f2f6f8;
  --ink: #223042;
  --muted: #5b687a;
  --line: #d8e2ea;
  --teal: #2f6f8f;
  --teal-soft: #d9eef7;
  --coral: #b44535;
  --coral-soft: #fdebe7;
  --amber: #805a00;
  --amber-soft: #fff5d6;
  --navy: #1c2b3c;
  --success: #2f7d5b;
  --success-soft: #e7f5ee;
  --focus: #3f83a8;
  --shadow: 0 12px 28px rgba(31, 49, 67, .10);
  --font-body: "Aptos", "Segoe UI", sans-serif;
  --font-display: "Avenir Next", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: 68px minmax(0, 1fr); }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand-lockup, .topbar-actions, .header-controls, .section-title, .panel-header, .thread-header, .lead-summary, .lead-meta, .conversation-item, .conversation-main, .conversation-trailing { display: flex; align-items: center; }.panel-header-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.brand-lockup { gap: 11px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--navy); font-weight: 800; }
.brand-lockup strong, .brand-lockup span { display: block; }
.brand-lockup strong { letter-spacing: -.01em; }
.brand-lockup span { color: var(--muted); font-size: 11px; margin-top: 1px; }
.topbar-actions { gap: 15px; }
.environment-badge, .connection-status, .live-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.environment-badge { padding: 7px 10px; border: 1px solid #efdba9; color: var(--amber); background: var(--amber-soft); border-radius: 6px; }
.environment-badge i, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #c49332; display: inline-block; }
.connection-status.connected { color: var(--teal); }
.connection-status.connected::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.icon-button, .avatar-button, .send-button, .dialog-close { border: 0; background: transparent; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); border-radius: 7px; font-size: 20px; }
.icon-button:hover { color: var(--ink); background: var(--surface-soft); }
.icon-button.small { width: 28px; height: 28px; font-size: 15px; }
.avatar-button { width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--teal); font-size: 10px; font-weight: 800; }
.sidebar { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 14px 18px; background: var(--surface); border-right: 1px solid var(--line); }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; text-align: left; }
.nav-item:hover { color: var(--ink); background: var(--surface-soft); }
.nav-item.active { color: var(--navy); background: #edf2f8; font-weight: 700; }
.nav-icon { width: 17px; color: currentColor; font-size: 14px; text-align: center; }
.sidebar-footer { padding: 14px 12px; border-top: 1px solid var(--line); }
.scope-label, .scope-note { display: block; color: var(--muted); font-size: 11px; }
.sidebar-footer strong { display: block; margin: 3px 0 10px; color: var(--navy); }
.scope-note { line-height: 1.35; }.presence-list { display: grid; gap: 4px; margin: 5px 0 10px; }.presence-item { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.presence-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #b9c1cc; }.presence-dot.online { background: var(--teal); }
.main-content { grid-column: 2; grid-row: 2; min-width: 0; max-width: 1600px; width: 100%; margin: 0 auto; padding: 30px 34px 48px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 7px; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: clamp(23px, 2.3vw, 31px); letter-spacing: -.04em; }
h2 { margin-bottom: 2px; font-size: 15px; letter-spacing: -.015em; }
.page-subtitle, .panel-caption { color: var(--muted); }
.page-subtitle { margin: 0; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 0; border-radius: 6px; color: #fff; background: var(--navy); font-weight: 700; box-shadow: 0 5px 12px rgba(38, 56, 88, .14); }
.primary-button:hover { background: #1b2b49; }
.primary-button span { font-size: 18px; line-height: 0; font-weight: 400; }
.primary-button.full { width: 100%; margin-top: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { position: relative; overflow: hidden; padding: 16px 18px; min-height: 114px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.metric-card::before { position: absolute; content: ""; inset: 0 auto 0 0; width: 4px; background: var(--teal); }
.metric-card.accent-coral::before { background: var(--coral); }.metric-card.accent-amber::before { background: var(--amber); }.metric-card.accent-ink::before { background: var(--navy); }
.metric-card span, .metric-card small { display: block; color: var(--muted); }.metric-card span { font-size: 12px; font-weight: 700; }.metric-card strong { display: block; margin: 9px 0 2px; font-size: 27px; letter-spacing: -.04em; }.metric-card small { font-size: 11px; }
.workspace-grid { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.35fr) minmax(220px, .72fr); min-height: 470px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.panel { min-width: 0; background: var(--surface); }.conversation-panel { border-right: 1px solid var(--line); }.thread-panel { border-right: 1px solid var(--line); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }.lead-panel { padding-bottom: 18px; }
.panel-header { justify-content: space-between; min-height: 64px; padding: 15px 17px; border-bottom: 1px solid var(--line); }.panel-caption { display: block; font-size: 11px; }.header-controls { gap: 4px; }.header-controls select { max-width: 105px; padding: 5px 4px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font-size: 11px; }
.channel-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.channel-rail-item { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 7px; border: 1px solid transparent; border-radius: 6px; color: var(--ink); background: transparent; text-align: left; }
.channel-rail-item:hover, .channel-rail-item.active { border-color: var(--teal); background: var(--surface); }
.channel-rail-item > b { margin-left: auto; color: var(--navy); font-size: 13px; }
.channel-rail-icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: var(--navy); font-size: 11px; font-weight: 800; }
.channel-whatsapp { background: #218c68; }.channel-instagram { background: #b44e78; }.channel-messenger { background: #3975c6; }.channel-webchat { background: var(--teal); }.channel-rail-copy { min-width: 0; }.channel-rail-copy strong, .channel-rail-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.channel-rail-copy strong { font-size: 10px; }.channel-rail-copy small { margin-top: 2px; font-size: 8px; }.channel-rail-status.ready { color: var(--teal); }.channel-rail-status.pending { color: var(--amber); }.channel-rail-status.all { color: var(--muted); }
.conversation-list { max-height: 505px; overflow: auto; }.conversation-item { width: 100%; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 0; border-bottom: 1px solid #eef1f5; background: var(--surface); text-align: left; }.conversation-item:hover, .conversation-item.selected { background: #f7fafc; }.conversation-avatar { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--coral); font-size: 12px; font-weight: 800; }.conversation-main { align-items: flex-start; flex: 1; min-width: 0; display: block; }.conversation-main strong, .conversation-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.conversation-main strong { font-size: 12px; }.conversation-main span { margin-top: 3px; color: var(--muted); font-size: 11px; }.conversation-trailing { flex-direction: column; align-items: flex-end; gap: 5px; }.conversation-trailing time { color: var(--muted); font-size: 10px; }.status-pill { padding: 3px 6px; color: var(--teal); background: var(--teal-soft); border-radius: 4px; font-size: 9px; font-weight: 800; text-transform: uppercase; }.status-pill.pending { color: var(--amber); background: var(--amber-soft); }.status-pill.resolved { color: var(--muted); background: #eef1f5; }
.conversation-item-row { display: flex; align-items: stretch; border-bottom: 1px solid #eef1f5; background: var(--surface); }.conversation-item-row .conversation-item { border-bottom: 0; flex: 1; min-width: 0; }.conversation-select { flex: 0 0 16px; margin: 17px 0 0 12px; accent-color: var(--teal); }.conversation-bulk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: #f7fafc; color: var(--muted); font-size: 10px; }.conversation-bulk-toolbar select { max-width: 145px; padding: 5px 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 10px; }.conversation-bulk-toolbar .outline-button { padding: 5px 8px; font-size: 10px; }
.thread-header { min-height: 64px; padding: 13px 18px; border-bottom: 1px solid var(--line); }.thread-heading { flex: 1; min-width: 0; }.thread-heading strong, .thread-heading span { display: block; }.thread-heading span { color: var(--muted); font-size: 11px; }.thread-actions { display: flex; gap: 6px; }.messaging-window { margin-top: 3px; font-size: 10px !important; font-weight: 700; }.messaging-window.open { color: var(--teal) !important; }.messaging-window.closed { color: var(--coral) !important; }.outline-button, .text-button { border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; color: var(--navy); background: var(--surface); font-size: 11px; font-weight: 700; }.outline-button:hover, .text-button:hover { border-color: #bcc9d9; background: var(--surface-soft); }.thread-placeholder, .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }.thread-placeholder { width: 100%; gap: 4px; }.thread-placeholder strong, .empty-state strong { color: var(--ink); }.placeholder-icon { color: var(--teal); font-size: 28px; }.message-list { min-height: 0; padding: 18px; overflow: auto; background: #fafbfd; }.message { max-width: 78%; margin-bottom: 12px; }.message.inbound { margin-right: auto; }.message.outbound { margin-left: auto; }.message-bubble { padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }.message.outbound .message-bubble { color: #fff; background: var(--navy); border-color: var(--navy); }.message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }.message-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.message.outbound .message-meta { text-align: right; }.notes-section { border-top: 1px solid var(--line); background: #fffdf9; }.notes-heading { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 6px; }.notes-heading h2 { margin: 0; font-size: 12px; }.notes-count { min-width: 20px; padding: 2px 6px; border-radius: 4px; color: var(--amber); background: var(--amber-soft); font-size: 10px; font-weight: 800; text-align: center; }.notes-list { max-height: 132px; padding: 0 12px; overflow: auto; }.notes-empty { padding: 5px 0 8px; color: var(--muted); font-size: 11px; }.note-item { padding: 7px 0; border-top: 1px solid #f2eadb; }.note-item > div { display: flex; justify-content: space-between; gap: 8px; }.note-item strong { color: var(--navy); font-size: 10px; }.note-item time { color: var(--muted); font-size: 9px; }.note-item p { margin: 3px 0 0; color: var(--ink); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }.note-form { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 6px; padding: 8px 12px 10px; }.note-form input, .note-form select { min-width: 0; padding: 7px 8px; border: 1px solid #eadfce; border-radius: 5px; background: #fff; font-size: 10px; }.note-form button:disabled { opacity: .45; cursor: not-allowed; }.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }.composer input { min-width: 0; flex: 1; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; outline: none; }.composer input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20, 125, 125, .1); }.composer input:disabled { background: var(--surface-soft); }.send-button { width: 38px; border-radius: 6px; color: #fff; background: var(--teal); font-size: 18px; }.send-button:disabled { opacity: .45; cursor: not-allowed; }
.lead-panel .panel-header { min-height: 64px; }.lead-placeholder { padding: 28px 18px; color: var(--muted); font-size: 12px; text-align: center; }.lead-summary { gap: 11px; padding: 18px; }.lead-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--coral); font-size: 16px; font-weight: 800; }.lead-summary strong, .lead-summary span { display: block; }.lead-summary span { color: var(--muted); font-size: 11px; }.lead-details { padding: 0 18px; }.detail-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef1f5; }.detail-row span { color: var(--muted); font-size: 11px; }.detail-row strong { max-width: 58%; font-size: 11px; text-align: right; overflow-wrap: anywhere; }.lead-actions { display: grid; gap: 7px; padding: 18px; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 18px; margin-top: 18px; }.funnel-panel, .campaign-panel { min-height: 250px; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }.funnel, .campaign-table-wrap { padding: 15px 18px; }.funnel-row { display: grid; grid-template-columns: 105px 1fr 38px; align-items: center; gap: 10px; margin: 13px 0; }.funnel-row label { color: var(--muted); font-size: 11px; }.funnel-track { height: 9px; border-radius: 99px; background: #edf1f5; overflow: hidden; }.funnel-bar { height: 100%; border-radius: inherit; background: var(--teal); }.funnel-row strong { font-size: 11px; text-align: right; }.live-label { color: var(--teal); font-size: 9px; }.campaign-table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th, td { padding: 10px 5px; border-bottom: 1px solid #eef1f5; text-align: left; font-size: 11px; }th { color: var(--muted); font-weight: 700; }td strong { display: block; }td span { color: var(--muted); font-size: 10px; }.table-empty { padding: 30px 5px; color: var(--muted); text-align: center; }.text-button { padding: 0; border: 0; color: var(--teal); }
.detail-view { margin-top: 2px; }.section-title { justify-content: space-between; margin-bottom: 17px; }.section-title h2 { font-size: 22px; }.hidden { display: none !important; }.lead-table { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: auto; box-shadow: var(--shadow); }.lead-table-row { display: grid; grid-template-columns: 1.2fr 1.1fr .8fr .8fr 1fr; gap: 12px; min-width: 680px; align-items: center; padding: 14px 17px; border-bottom: 1px solid #eef1f5; }.lead-table-row.header { color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.lead-table-row:last-child { border-bottom: 0; }.lead-table-row strong, .lead-table-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.lead-table-row span { color: var(--muted); font-size: 12px; }.campaign-cards, .analytics-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.campaign-card, .analytics-detail-card { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }.campaign-card .status-pill { display: inline-flex; margin-top: 12px; }.campaign-card small { display: block; margin-top: 13px; color: var(--muted); }.analytics-detail-card strong { display: block; margin-top: 9px; font-size: 25px; }
.empty-state { min-height: 190px; gap: 5px; padding: 18px; }.empty-state.compact { min-height: 120px; }.empty-state span { color: var(--muted); font-size: 11px; }#auth-dialog { padding: 0; border: 0; background: transparent; }#auth-dialog::backdrop { background: rgba(23, 32, 51, .3); }.auth-form { position: relative; width: min(390px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 20px 60px rgba(23, 32, 51, .18); }.auth-form h2 { margin-bottom: 6px; font-size: 22px; }.auth-form p:not(.eyebrow) { color: var(--muted); font-size: 12px; }.auth-form label { display: block; margin: 18px 0 6px; color: var(--muted); font-size: 11px; font-weight: 700; }.auth-form input { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 6px; }.dialog-close { position: absolute; top: 13px; right: 13px; color: var(--muted); }.form-error { display: block; min-height: 16px; margin-top: 9px; color: var(--coral); font-size: 11px; }.toast { position: fixed; right: 22px; bottom: 22px; max-width: 320px; padding: 11px 14px; color: #fff; background: var(--navy); border-radius: 6px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s ease; font-size: 12px; }.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 1100px) { .workspace-grid { grid-template-columns: minmax(220px, .8fr) minmax(340px, 1.2fr); }.lead-panel { grid-column: 1 / -1; border-top: 1px solid var(--line); }.lower-grid { grid-template-columns: 1fr; }.lead-placeholder { display: none; }.lead-panel .panel-header { border-bottom: 1px solid var(--line); }.lead-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }.lead-actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .app-shell { display: block; }.topbar { position: sticky; top: 0; z-index: 5; padding: 0 15px; }.brand-lockup strong { font-size: 12px; }.topbar-actions { gap: 7px; }.connection-status { display: none; }.sidebar { padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }.sidebar nav { display: flex; gap: 3px; }.nav-item { flex: 0 0 auto; padding: 8px 10px; font-size: 12px; }.sidebar-footer { display: none; }.main-content { padding: 22px 14px 35px; }.page-heading { align-items: flex-start; flex-direction: column; }.page-heading .primary-button { width: 100%; }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-card { min-height: 104px; padding: 14px; }.metric-card strong { font-size: 23px; }.workspace-grid { display: block; min-height: 0; }.conversation-panel, .thread-panel { border-right: 0; }.conversation-list { max-height: 260px; }.channel-rail { grid-template-columns: repeat(5, minmax(112px, 1fr)); overflow-x: auto; }.channel-rail-item { min-width: 112px; }.thread-panel { min-height: 440px; border-top: 1px solid var(--line); }.lead-panel { border-top: 1px solid var(--line); }.lead-details { grid-template-columns: 1fr 1fr; }.lead-actions { grid-template-columns: 1fr 1fr; }.campaign-cards, .analytics-detail-grid { grid-template-columns: 1fr; }.funnel-row { grid-template-columns: 90px 1fr 30px; } }
.campaign-view-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }.campaign-summary-item { display: grid; gap: 5px; min-height: 62px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.campaign-summary-item:hover { border-color: var(--teal); background: var(--surface); }.campaign-summary-item span { color: var(--muted); font-size: 10px; font-weight: 700; }.campaign-summary-item strong { font-size: 20px; }
@media (max-width: 760px) { .campaign-view-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lead-view-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }.lead-summary-item { display: grid; gap: 5px; min-height: 62px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }.lead-summary-item:hover { border-color: var(--teal); background: var(--surface); }.lead-summary-item span { color: var(--muted); font-size: 10px; font-weight: 700; }.lead-summary-item strong { font-size: 20px; }
@media (max-width: 760px) { .lead-view-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.conversation-view-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }.conversation-summary-item { display: grid; gap: 5px; min-height: 62px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); font: inherit; text-align: left; color: inherit; cursor: pointer; }.conversation-summary-item:hover { border-color: var(--accent); }.conversation-summary-item span { color: var(--muted); font-size: 10px; font-weight: 700; }.conversation-summary-item strong { font-size: 20px; }
@media (max-width: 760px) { .conversation-view-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .environment-badge { display: none; }.metric-grid { gap: 9px; }.metric-card span { font-size: 11px; }.metric-card strong { font-size: 21px; }.lead-details { grid-template-columns: 1fr; }.lead-actions { grid-template-columns: 1fr; }.thread-actions .outline-button { padding: 6px; font-size: 10px; } }

/* Responsive shell: keep the work surface readable and cheap to paint. */
html { min-width: 320px; background: var(--bg); }
body { overflow-x: hidden; }
.app-shell { contain: layout style; }
.main-content { max-width: 1440px; }
.detail-view, .lower-grid { content-visibility: auto; contain-intrinsic-size: 480px; }
.workspace-grid { grid-template-columns: minmax(260px, .82fr) minmax(420px, 1.45fr) minmax(250px, .78fr); min-height: min(700px, calc(100vh - 250px)); }
.conversation-list { max-height: min(610px, calc(100vh - 350px)); }
.thread-panel { min-height: 0; }
.thread-panel > section { min-width: 0; }
.ai-section { min-height: 0; max-height: 260px; overflow: auto; }
.notes-section { min-height: 0; max-height: 210px; overflow: auto; }
.message-list { min-height: 240px; }
.header-controls { flex-wrap: wrap; justify-content: flex-end; }
.header-controls input { min-width: 120px; max-width: 170px; }
.channel-rail { position: sticky; top: 0; z-index: 2; }

@media (max-width: 1180px) {
  .main-content { padding-inline: 24px; }
  .workspace-grid { grid-template-columns: minmax(230px, .8fr) minmax(360px, 1.2fr); }
  .lead-panel { grid-column: 1 / -1; }
  .lead-panel .lead-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
  .lead-panel .lead-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .topbar { min-height: 60px; padding: 0 12px; }
  .brand-lockup { min-width: 0; }
  .brand-lockup > div:last-child { min-width: 0; }
  .brand-lockup strong { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { gap: 3px; }
  .sidebar { position: sticky; top: 60px; z-index: 4; padding: 6px 10px; box-shadow: 0 2px 8px rgba(27, 44, 72, .05); }
  .sidebar nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-item { min-height: 38px; padding: 8px 11px; white-space: nowrap; }
  .sidebar-footer { display: none; }
  .main-content { padding: 18px 12px 32px; }
  .page-heading { gap: 12px; margin-bottom: 16px; }
  .page-heading h1 { font-size: 24px; }
  .page-subtitle { font-size: 12px; }
  .page-heading .primary-button { width: 100%; }
  .metric-grid { gap: 8px; margin-bottom: 12px; }
  .metric-card { min-height: 92px; padding: 12px; }
  .metric-card strong { font-size: 22px; }
  .workspace-grid { display: block; min-height: 0; border-radius: 7px; }
  .conversation-panel, .thread-panel, .lead-panel { border-right: 0; }
  .conversation-panel { border-bottom: 1px solid var(--line); }
  .panel-header { align-items: flex-start; gap: 10px; padding: 13px 12px; }
  .header-controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .header-controls input, .header-controls select { width: 100%; max-width: none; min-height: 36px; }
  .header-controls input { grid-column: 1 / -1; }
  .channel-rail { grid-template-columns: repeat(5, minmax(118px, 1fr)); padding: 8px; overflow-x: auto; }
  .conversation-list { max-height: 340px; }
  .conversation-item { padding: 12px; }
  .thread-panel { min-height: 0; border-top: 1px solid var(--line); }
  .thread-header { padding: 12px; }
  .message-list { min-height: 300px; max-height: 52vh; padding: 12px; }
  .message { max-width: 88%; }
  .notes-section, .ai-section { max-height: none; overflow: visible; }
  .notes-list { max-height: 180px; }
  .ai-suggestions-list { max-height: 220px; overflow: auto; }
  .composer { position: sticky; bottom: 0; z-index: 3; padding: 9px; }
  .lead-panel { border-top: 1px solid var(--line); }
  .lead-panel .lead-details { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .lead-panel .lead-actions { grid-template-columns: 1fr 1fr; padding: 12px; }
  .lower-grid { margin-top: 12px; gap: 12px; }
  .section-title { align-items: flex-start; gap: 8px; }
  .section-title h2 { font-size: 20px; }
}

@media (max-width: 480px) {
  .brand-mark { width: 30px; height: 30px; }
  .brand-lockup span, .connection-status { display: none; }
  .topbar-actions .icon-button { width: 30px; height: 30px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-card small { font-size: 10px; }
  .lead-panel .lead-details, .lead-panel .lead-actions { grid-template-columns: 1fr; }
  .header-controls { grid-template-columns: 1fr; }
  .header-controls input { grid-column: auto; }
  .thread-actions { flex-wrap: wrap; }
  .thread-actions .outline-button { flex: 1 1 auto; }
}

/* Inbox reengineering: a focused omnichannel work surface inspired by WhatsApp Web. */
:root {
  --inbox-bg: #eef3f5;
  --inbox-surface: #ffffff;
  --inbox-surface-muted: #f7fafb;
  --inbox-ink: #182b36;
  --inbox-muted: #647681;
  --inbox-line: #d9e3e7;
  --inbox-brand: #176b63;
  --inbox-brand-soft: #e3f3f0;
  --inbox-wa: #20966b;
  --inbox-instagram: #b4537a;
  --inbox-messenger: #3977c9;
}

.main-content { max-width: none; padding: 24px 28px 40px; }
.page-heading { margin-bottom: 18px; }
.page-heading h1 { color: var(--inbox-ink); font-size: clamp(26px, 2.7vw, 38px); }
.page-subtitle { color: var(--inbox-muted); }
.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.metric-card { min-height: 82px; padding: 13px 16px; border: 1px solid var(--inbox-line); border-radius: 10px; box-shadow: none; }
.metric-card strong { font-size: 24px; }

.inbox-channelbar { display: grid; grid-template-columns: minmax(120px, 1.15fr) repeat(4, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; padding: 8px; border: 1px solid var(--inbox-line); border-radius: 12px; background: var(--inbox-surface); box-shadow: 0 4px 14px rgba(24, 43, 54, .05); }
.inbox-channelbar .channel-rail-item { min-height: 52px; padding: 8px 10px; border-radius: 9px; }
.inbox-channelbar .channel-rail-item.active { border-color: var(--inbox-brand); background: var(--inbox-brand-soft); }
.inbox-channelbar .channel-rail-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
.inbox-channelbar .channel-rail-copy strong { font-size: 12px; }
.inbox-channelbar .channel-rail-copy small { font-size: 10px; }
.channel-whatsapp { background: var(--inbox-wa); }
.channel-instagram { background: var(--inbox-instagram); }
.channel-messenger { background: var(--inbox-messenger); }
.channel-webchat { background: var(--inbox-brand); }

.workspace-grid { grid-template-columns: minmax(270px, .78fr) minmax(460px, 1.65fr) minmax(285px, .88fr); min-height: calc(100vh - 255px); gap: 0; overflow: hidden; border: 1px solid var(--inbox-line); border-radius: 12px; background: var(--inbox-surface); box-shadow: 0 10px 28px rgba(24, 43, 54, .08); }
.workspace-grid > .panel { min-height: 0; background: var(--inbox-surface); }
.conversation-panel, .thread-panel { border-right: 1px solid var(--inbox-line); }
.conversation-panel .panel-header { display: block; padding: 15px 14px 12px; }
.conversation-panel .panel-header > div:first-child { margin-bottom: 11px; }
.conversation-panel .panel-header h2 { font-size: 17px; color: var(--inbox-ink); }
.conversation-panel .header-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.conversation-panel .header-controls input { grid-column: 1 / -1; width: 100%; max-width: none; min-height: 36px; }
.conversation-panel .header-controls select { width: 100%; min-width: 0; min-height: 34px; }
.conversation-panel .conversation-view-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0 12px 10px; }
.conversation-panel .conversation-summary-item { min-height: 54px; padding: 9px 10px; border-radius: 8px; }
.conversation-list { max-height: none; height: calc(100vh - 440px); min-height: 260px; border-top: 1px solid var(--inbox-line); }
.conversation-item { padding: 13px 12px; border-bottom-color: #edf2f3; }
.conversation-item:hover, .conversation-item.selected { background: #f0f7f6; }
.conversation-main strong { color: var(--inbox-ink); font-size: 13px; }
.conversation-main span { color: var(--inbox-muted); }
.conversation-avatar { background: var(--inbox-brand); }

.thread-panel { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.thread-header { min-height: 72px; padding: 14px 18px; background: var(--inbox-surface); }
.message-list { padding: 22px 24px; background: #f5f8f8; background-image: radial-gradient(rgba(23, 107, 99, .055) 1px, transparent 1px); background-size: 18px 18px; }
.message { max-width: min(78%, 700px); }
.message-bubble { border-color: #dce8e7; border-radius: 4px 12px 12px 12px; box-shadow: 0 1px 2px rgba(24, 43, 54, .04); }
.message.outbound .message-bubble { background: var(--inbox-brand); border-color: var(--inbox-brand); border-radius: 12px 4px 12px 12px; }
.composer { padding: 12px 16px; background: var(--inbox-surface); }
.composer input { min-height: 42px; border-radius: 21px; background: var(--inbox-surface-muted); }
.send-button { width: 42px; height: 42px; border-radius: 50%; background: var(--inbox-brand); }
.notes-section, .ai-section { background: var(--inbox-surface); }
.notes-section { max-height: 150px; }
.ai-section { max-height: 190px; }

.lead-panel { overflow: auto; }
.lead-panel .panel-header { padding: 15px 16px; background: var(--inbox-surface-muted); }
.lead-summary { padding: 18px 16px; }
.lead-details { padding: 0 16px; }
.lead-actions { padding: 16px; }
.detail-row { padding: 11px 0; border-bottom-color: #edf2f3; }
.lead-avatar { background: var(--inbox-brand); }

@media (max-width: 1180px) {
  .inbox-channelbar { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
  .inbox-channelbar .channel-rail-item { min-width: 120px; }
  .workspace-grid { grid-template-columns: minmax(250px, .85fr) minmax(420px, 1.35fr); }
  .lead-panel { grid-column: 1 / -1; }
  .conversation-list { height: 460px; }
}
@media (max-width: 760px) {
  .main-content { padding: 16px 10px 28px; }
  .page-heading { align-items: flex-start; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inbox-channelbar { grid-template-columns: repeat(5, minmax(128px, 1fr)); margin-inline: -2px; }
  .workspace-grid { display: block; min-height: 0; overflow: visible; }
  .conversation-panel, .thread-panel { border-right: 0; }
  .conversation-list { height: 360px; }
  .thread-panel { min-height: 650px; border-top: 1px solid var(--inbox-line); }
  .lead-panel { border-top: 1px solid var(--inbox-line); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.outline-button:disabled, .text-button:disabled { opacity: .45; cursor: not-allowed; }
.note-mentions { display: inline-block; margin-top: 4px; color: var(--teal); font-size: 9px; font-weight: 700; }
.outline-button.full { width: 100%; margin-top: 8px; }
.topbar { position: relative; }
.notification-button { position: relative; }
.notification-icon { font-size: 16px; line-height: 1; }
.notification-count { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; color: #fff; background: var(--coral); font-size: 9px; font-weight: 800; line-height: 15px; text-align: center; }
.notifications-panel { position: absolute; z-index: 10; top: 54px; right: 72px; width: min(330px, calc(100vw - 28px)); max-height: 360px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 16px 38px rgba(27, 44, 72, .16); }
.notifications-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 8px; border-bottom: 1px solid var(--line); }
.notifications-panel-header strong { font-size: 12px; }
.notification-item { display: grid; gap: 3px; width: 100%; padding: 10px 7px; border: 0; border-bottom: 1px solid #eef1f5; background: transparent; text-align: left; }
.notification-item:hover, .notification-item.unread { background: #f7fafc; }
.notification-item strong { color: var(--ink); font-size: 11px; font-weight: 700; }
.notification-item.read strong { color: var(--muted); font-weight: 500; }
.notification-item time { color: var(--muted); font-size: 10px; }
.audit-table { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.audit-row { display: grid; grid-template-columns: 150px 1.3fr 1fr 1.2fr; gap: 14px; min-width: 700px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eef1f5; }
.analytics-rates { display: block; min-width: 150px; color: var(--teal) !important; font-size: 10px !important; white-space: nowrap; }.attribution-state { display: block; font-size: 10px !important; }.attribution-state.matched { color: var(--teal) !important; }.attribution-state.incomplete { color: var(--amber) !important; }.attribution-state.conflict { color: var(--coral) !important; }.attribution-state.unattributed { color: var(--muted) !important; }
.audit-row:last-child { border-bottom: 0; }
.audit-row span, .audit-row time { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-row strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handoff-table-row { display: grid; grid-template-columns: 1.2fr 1.1fr 1fr .9fr 1fr 1.4fr auto; gap: 12px; min-width: 980px; align-items: center; padding: 14px 17px; border-bottom: 1px solid #eef1f5; }
.handoff-table-row.header { color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.handoff-table-row:last-child { border-bottom: 0; }
.handoff-table-row strong, .handoff-table-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handoff-table-row span { color: var(--muted); font-size: 12px; }
.handoff-workload { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 0 18px; }
.handoff-workload span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font-size: 10px; }
.handoff-workload strong { margin-right: 3px; color: var(--navy); font-size: 14px; }
.handoff-workload .overdue strong { color: var(--coral); }
.audit-row.audit-header { color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.session-panel { margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.session-panel .panel-header { min-height: 58px; }
.session-state.active { color: var(--teal); font-size: 11px; font-weight: 700; }
.session-state.revoked { color: var(--muted); font-size: 11px; }
.revoke-session { margin-left: 6px; padding: 0; border: 0; color: var(--coral); font-size: 10px; }
.readiness-card { margin-bottom: 18px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.readiness-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.readiness-heading h2 { margin: 0; font-size: 16px; }
.readiness-status { padding: 5px 8px; border-radius: 4px; font-size: 9px; font-weight: 800; }
.readiness-status.ready { color: var(--teal); background: var(--teal-soft); }.readiness-status.blocked { color: var(--coral); background: var(--coral-soft); }.readiness-status.reviewed { color: var(--amber); background: var(--amber-soft); }
.readiness-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }.readiness-check { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }.readiness-check i { width: 7px; height: 7px; border-radius: 50%; background: #b9c1cc; }.readiness-check.passed i { background: var(--teal); }.readiness-check.failed i { background: var(--coral); }.readiness-reasons { margin: 12px 0 0; color: var(--coral); font-size: 11px; }
.integration-readiness-card { margin-bottom: 18px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }.integration-readiness-card .panel-header { padding: 0 0 12px; border-bottom: 0; }.integration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.integration-card { display: grid; gap: 3px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--teal); background: var(--surface-soft); }.integration-card.blocked { border-left-color: var(--coral); }.integration-card span { color: var(--muted); font-size: 10px; }.integration-card strong { font-size: 11px; }.integration-card small { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.integration-intake { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface-muted); }.integration-intake > strong { font-size: 11px; }.integration-intake > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.integration-intake span { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }.integration-intake b { color: var(--ink); font-size: 10px; }.integration-intake code { width: fit-content; max-width: 100%; padding: 2px 4px; overflow-wrap: anywhere; color: var(--ink); background: var(--surface); border: 1px solid var(--line); font-size: 9px; }
.intake-review-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.intake-review-action span { max-width: 64ch; }.intake-review-action button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }.intake-review-action button:disabled { opacity: .45; cursor: wait; }
.sandbox-attribution-note { margin: 12px 18px 18px; color: var(--muted); font-size: 10px; line-height: 1.45; }.sandbox-attribution-note code { color: var(--ink); }
.pilot-card { margin-bottom: 18px; padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }.pilot-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.pilot-header h2 { margin: 0; font-size: 16px; }.pilot-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }.pilot-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }.pilot-metrics span { padding: 10px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); font-size: 10px; }.pilot-metrics strong { display: block; color: var(--navy); font-size: 18px; }.pilot-blockers { margin: 12px 0 0; color: var(--coral); font-size: 11px; overflow-wrap: anywhere; }.pilot-candidates { margin-top: 14px; }.pilot-candidates .audit-row { grid-template-columns: 1.1fr 1.2fr .8fr .7fr; }.pilot-card .empty-state { margin-top: 14px; }.confirmation-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }.confirmation-input-grid label { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); font-size: 11px; }.confirmation-input-grid input { accent-color: var(--teal); }
.control-center-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.control-action { display: grid; gap: 4px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--amber); background: var(--surface-soft); }
.control-action.blocked { border-left-color: var(--coral); }
.control-action strong { font-size: 11px; overflow-wrap: anywhere; }
.control-action span, .control-action small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.control-blockers { margin-top: 12px; color: var(--muted); font-size: 11px; }
.control-blockers summary { cursor: pointer; font-weight: 700; }
.control-blockers p { margin: 7px 0 0; overflow-wrap: anywhere; }
.report-clean-note { margin: 12px 0 0; color: var(--teal); font-size: 11px; overflow-wrap: anywhere; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.catalog-card { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.catalog-card-inactive { opacity: .68; }
.catalog-card-top, .catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-card h2 { margin: 14px 0 7px; font-size: 16px; }
.catalog-card p { min-height: 52px; color: var(--muted); font-size: 12px; }
.catalog-meta { padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.catalog-meta strong { color: var(--navy); }
.catalog-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lead-workflow { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.workflow-row { display: flex; flex: 1 1 100%; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.workflow-control { display: flex; align-items: center; gap: 6px; min-width: 0; }
.workflow-control select { max-width: 190px; min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
.status-pill.approved { color: var(--teal); background: var(--teal-soft); }
.status-pill.pending { color: var(--amber); background: var(--amber-soft); }
.section-actions { display: flex; align-items: center; gap: 8px; }
.catalog-preview-panel { margin-bottom: 16px; padding: 0 14px 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; }
.catalog-preview-panel .panel-header { min-height: 48px; padding: 0; }
.catalog-preview-panel .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-form { position: relative; width: min(620px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 20px 60px rgba(23, 32, 51, .18); }
#catalog-dialog::backdrop { background: rgba(23, 32, 51, .3); }
#catalog-dialog { padding: 0; border: 0; background: transparent; }
.catalog-form h2 { margin-bottom: 6px; font-size: 22px; }
.catalog-form p:not(.eyebrow) { color: var(--muted); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea, .form-grid select { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; }
.form-grid textarea { min-height: 82px; resize: vertical; }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(20, 125, 125, .1); }
.catalog-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 900px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .control-center-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .catalog-grid { grid-template-columns: 1fr; } .section-title { align-items: flex-start; flex-direction: column; gap: 12px; } .section-actions { width: 100%; } .section-actions button { flex: 1; } .catalog-preview-panel .catalog-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .form-grid label.wide { grid-column: auto; } .pilot-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pilot-candidates .audit-row { grid-template-columns: 1fr 1fr; } .control-center-actions { grid-template-columns: 1fr; } .confirmation-input-grid { grid-template-columns: 1fr; } }
.campaign-preflight { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }.campaign-preflight span { color: var(--muted); overflow-wrap: anywhere; }.campaign-preflight.blocked strong { color: var(--coral); }.campaign-preflight.ready strong { color: var(--teal); }.campaign-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.campaign-attribution-quality { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 11px; }.campaign-attribution-quality span { color: var(--muted); overflow-wrap: anywhere; }.campaign-attribution-quality.ready strong { color: var(--teal); }.campaign-attribution-quality.blocked strong { color: var(--coral); }
.campaign-quality { display: grid; gap: 4px; margin-top: 12px; padding: 10px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 11px; }.campaign-quality span, .campaign-quality small { color: var(--muted); overflow-wrap: anywhere; }.campaign-quality.insufficient_data strong { color: var(--muted); }.campaign-quality.healthy strong { color: var(--teal); }.campaign-quality.watch strong { color: var(--amber); }.campaign-quality.pause_recommended strong { color: var(--coral); }
.analytics-quality-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.analytics-quality-summary-item { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }.analytics-quality-summary-item span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }.analytics-quality-summary-item strong { font-size: 22px; }.analytics-quality-summary-item:hover { border-color: var(--teal); }.analytics-quality-summary-item.healthy strong { color: var(--teal); }.analytics-quality-summary-item.watch strong { color: var(--amber); }.analytics-quality-summary-item.pause_recommended strong { color: var(--coral); }.analytics-quality-summary-item.insufficient_data strong { color: var(--muted); }
.pilot-experiment-summary { display: grid; gap: 4px; margin-top: 12px; padding: 10px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 11px; }.pilot-experiment-summary span, .pilot-experiment-summary small { color: var(--muted); overflow-wrap: anywhere; }
.analytics-quality { display: inline-block; width: fit-content; margin-top: 4px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; }.analytics-quality.healthy { color: var(--teal); border-color: rgba(20, 125, 125, .35); }.analytics-quality.watch { color: var(--amber); border-color: rgba(185, 126, 26, .35); }.analytics-quality.pause_recommended { color: var(--coral); border-color: rgba(188, 83, 83, .4); }
.campaign-consent-check{font-weight:700}.campaign-consent-check.ready{color:var(--teal)}.campaign-consent-check.blocked{color:var(--coral)}
.campaign-audience-preview { display: grid; gap: 4px; margin-top: -4px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 11px; }.campaign-audience-preview strong { color: var(--navy); }.campaign-audience-preview span { color: var(--muted); overflow-wrap: anywhere; }.campaign-audience-preview.ready { border-color: rgba(20, 125, 125, .35); }.campaign-audience-preview.blocked { border-color: rgba(188, 83, 83, .4); }.campaign-audience-preview.blocked strong { color: var(--coral); }
.template-summary { display: grid; gap: 8px; margin-bottom: 16px; }.template-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }.template-row div { display: grid; gap: 3px; min-width: 0; }.template-row span { color: var(--muted); font-size: 11px; }.template-empty { padding: 14px 2px; color: var(--muted); font-size: 12px; }.campaign-form { position: relative; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 20px 60px rgba(23, 32, 51, .18); }.campaign-form h2 { margin-bottom: 6px; font-size: 22px; }.campaign-form p:not(.eyebrow) { color: var(--muted); font-size: 12px; }.campaign-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }.campaign-form select:disabled, .campaign-form button:disabled { cursor: not-allowed; opacity: .55; }
#template-dialog, #campaign-dialog { padding: 0; border: 0; background: transparent; }#template-dialog::backdrop, #campaign-dialog::backdrop { background: rgba(23, 32, 51, .3); }
.forms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }.form-card { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }.form-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.form-card h2 { margin-top: 4px; font-size: 17px; overflow-wrap: anywhere; }.form-card small { display: block; margin-top: 14px; color: var(--muted); }.form-card-actions { min-height: 20px; margin-top: 16px; }.executions-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }.executions-panel .panel-header { min-height: 58px; }.executions-panel select { min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }.executions-list { padding: 0 18px; }.execution-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #eef1f5; }.execution-row:last-child { border-bottom: 0; }.execution-row div { display: grid; gap: 3px; min-width: 0; }.execution-row div span, .execution-row time { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }.form-test-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.form-test-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }.form-test-fields input, .form-test-fields select { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; }.form-test-fields input:focus, .form-test-fields select:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(20, 125, 125, .1); }.form-test-fields input[type="password"] { letter-spacing: .08em; }
#form-dialog, #form-test-dialog { padding: 0; border: 0; background: transparent; }#form-dialog::backdrop, #form-test-dialog::backdrop { background: rgba(23, 32, 51, .3); }
@media (max-width: 900px) { .forms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .forms-grid { grid-template-columns: 1fr; } .form-test-fields { grid-template-columns: 1fr; } .execution-row { align-items: flex-start; flex-direction: column; gap: 6px; } }
.ai-section { border-top: 1px solid var(--line); background: #f6fbfb; }.ai-count { color: var(--teal); background: #dff2f0; }.ai-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 8px; }.ai-toolbar .scope-note { font-size: 10px; }.ai-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }.ai-toolbar-actions select { min-height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; font-size: 10px; }.ai-suggestions-list { max-height: 240px; padding: 0 12px 8px; overflow: auto; }.ai-suggestion { padding: 9px 0; border-top: 1px solid #dceeed; }.ai-suggestion-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }.ai-suggestion-heading strong, .ai-suggestion-heading span { display: block; }.ai-suggestion-heading strong { color: var(--navy); font-size: 11px; }.ai-suggestion-heading div > span { margin-top: 2px; color: var(--muted); font-size: 9px; }.ai-summary { margin: 6px 0; color: var(--ink); font-size: 11px; }.ai-fields, .ai-flags { display: flex; flex-wrap: wrap; gap: 4px; }.ai-fields span, .ai-flag { padding: 3px 5px; border-radius: 3px; color: var(--navy); background: #e8f3f2; font-size: 9px; }.ai-flag { color: #7b4c00; background: #fff0c8; }.ai-reply { margin-top: 7px; padding: 7px 8px; border-left: 3px solid var(--teal); background: #fff; }.ai-reply span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }.ai-reply p { margin: 3px 0 0; font-size: 10px; white-space: pre-wrap; }.ai-evidence { margin-top: 7px; color: var(--muted); font-size: 10px; }.ai-evidence summary { cursor: pointer; }.ai-evidence ul { margin: 5px 0 0; padding-left: 18px; }.ai-evidence li { margin-bottom: 4px; }.ai-evidence li span { display: block; }.ai-review-reason { margin: 6px 0 0; color: var(--muted); font-size: 10px; }.ai-actions { display: flex; gap: 6px; margin-top: 8px; }.danger-button { color: #9b3f3f; }.ai-suggestion.approved { background: #f4fbf7; }.ai-suggestion.rejected { opacity: .72; }
.range-control { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }.range-control select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--surface); font-size: 11px; }.analytics-campaign-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }.analytics-campaign-panel .campaign-table-wrap { overflow-x: auto; }
.phase-roadmap-card { margin-bottom: 18px; padding: 17px; background: var(--navy); border: 1px solid var(--navy); border-radius: 8px; color: #f4f8fb; box-shadow: var(--shadow); }
.phase-roadmap-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.phase-roadmap-heading h2 { margin: 0; color: #fff; font-size: 16px; }.phase-roadmap-heading .eyebrow { color: #8fd4ce; }.phase-roadmap-heading .panel-caption { color: #b7c7d0; }.phase-roadmap-note { max-width: 230px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: #d7e6e9; font-size: 10px; overflow-wrap: anywhere; }
.phase-roadmap-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 15px; }.phase-step { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.16); border-top: 3px solid #d69d35; background: rgba(255,255,255,.06); }.phase-step.done { border-top-color: #71d2c2; }.phase-step.blocked { border-top-color: #f07a6b; }.phase-step-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }.phase-step-index { color: #9eb1bb; font-size: 10px; font-weight: 800; letter-spacing: .08em; }.phase-step-status { color: #d8b36f; font-size: 9px; font-weight: 800; text-transform: uppercase; }.phase-step.done .phase-step-status { color: #8bded3; }.phase-step.blocked .phase-step-status { color: #ff9c91; }.phase-step strong { color: #fff; font-size: 12px; overflow-wrap: anywhere; }.phase-step > span:not(.phase-step-index):not(.phase-step-status) { min-height: 30px; color: #b7c7d0; font-size: 10px; line-height: 1.45; }.phase-step-action { justify-self: start; margin-top: 3px; padding: 0; color: #9ee1d7; }.phase-step-action:hover { color: #fff; }
@media (max-width: 900px) { .phase-roadmap-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .phase-roadmap-heading { flex-direction: column; }.phase-roadmap-note { max-width: none; }.phase-roadmap-track { grid-template-columns: 1fr; } }
.outline-button.danger-button { color: #a33b32; border-color: #e6b9b2; }.outline-button.danger-button:hover { color: #842b25; border-color: #c97970; background: #fff3f1; }
.follow-up-section { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }.follow-up-section .workflow-row { align-items: flex-start; }.follow-up-section .workflow-control { flex-wrap: wrap; }.follow-up-section select, .follow-up-section input { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font-size: 10px; }.follow-up-list { display: grid; gap: 5px; margin-top: 7px; }.follow-up-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); background: var(--surface-soft); }.follow-up-item span { display: flex; gap: 8px; align-items: center; }.follow-up-item strong { color: var(--navy); font-size: 10px; text-transform: uppercase; }.follow-up-item time { color: var(--muted); font-size: 10px; }
.follow-up-table-row { display: grid; grid-template-columns: 28px 1.2fr 1.1fr 1.1fr .9fr 1fr .5fr 1fr .8fr; gap: 12px; min-width: 1080px; align-items: center; padding: 14px 17px; border-bottom: 1px solid #eef1f5; }.follow-up-table-row.header { color: var(--muted); background: var(--surface-soft); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.follow-up-table-row:last-child { border-bottom: 0; }.follow-up-table-row strong, .follow-up-table-row span, .follow-up-table-row time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.follow-up-table-row span, .follow-up-table-row time { color: var(--muted); font-size: 12px; }.follow-up-assignee { min-width: 0; padding: 6px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font-size: 10px; }.follow-up-select { accent-color: var(--teal); }
.follow-up-bulk-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-bottom: 0; background: #f7fafc; color: var(--muted); font-size: 10px; }.follow-up-bulk-toolbar select { max-width: 145px; padding: 5px 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 10px; }.follow-up-bulk-toolbar .outline-button { padding: 5px 8px; font-size: 10px; }
.privacy-operations-card { margin-bottom: 18px; padding: 17px; }.privacy-operation-controls { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; }.privacy-operation-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }.privacy-operation-controls input { padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--surface); font-size: 11px; }.privacy-operations-card .scope-note { display: block; margin-top: 9px; }
.follow-up-workload { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }.follow-up-workload span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font-size: 10px; }.follow-up-workload strong { margin-right: 3px; color: var(--navy); font-size: 14px; }.follow-up-workload .follow-up-alert.overdue, .follow-up-due.overdue { color: var(--coral); }.follow-up-workload .follow-up-alert.overdue strong { color: var(--coral); }.follow-up-workload .follow-up-alert.clear strong { color: var(--teal); }.follow-up-next { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.follow-up-next strong { color: var(--ink); font-size: 11px; }.follow-up-actions { display: flex; align-items: center; gap: 5px; min-width: 0; }.follow-up-reschedule-date { width: 145px; min-width: 0; padding: 5px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font-size: 10px; color: var(--ink); }.follow-up-view-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }.follow-up-summary-item { display: grid; gap: 5px; min-height: 62px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); font: inherit; text-align: left; color: inherit; cursor: pointer; }.follow-up-summary-item:hover { border-color: var(--accent); }.follow-up-summary-item span { color: var(--muted); font-size: 10px; font-weight: 700; }.follow-up-summary-item strong { font-size: 20px; }
@media (max-width: 760px) { .follow-up-view-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.consent-control { border-top: 1px solid var(--line); padding-top: 12px; }
.consent-control select { min-width: 132px; }
.stage-control { border-top: 1px solid var(--line); padding-top: 12px; }
.handoff-control { border-top: 1px solid var(--line); padding-top: 12px; }
.conversion-control { border-top: 1px solid var(--line); padding-top: 12px; }
.tag-control { border-top: 1px solid var(--line); padding-top: 12px; }
.tag-control input { min-width: 0; flex: 1; }
.lead-tags-readonly { border-top: 1px solid var(--line); padding: 12px 0 0; }
.lead-tags-readonly > span { color: var(--muted); display: block; font-size: 11px; margin-bottom: 6px; }
.tag-pill { background: #edf2f8; border-radius: 4px; color: var(--navy); display: inline-block; font-size: 10px; font-weight: 700; margin: 0 4px 4px 0; padding: 3px 6px; }
.template-send-section { border-top: 1px solid var(--line); background: #f7fafc; padding: 10px 12px; }
.template-send-heading { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.template-send-heading strong, .template-send-heading span { display: block; }
.template-send-heading strong { font-size: 11px; }
.template-send-heading span { color: var(--muted); font-size: 10px; }
.template-send-controls { display: flex; gap: 7px; margin-top: 8px; }
.template-send-controls select { min-width: 0; flex: 1; }
.unread-badge { background: var(--coral-soft); border-radius: 4px; color: var(--coral); font-size: 9px; font-weight: 800; padding: 3px 5px; white-space: nowrap; }
.campaign-preview { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 9px; }
.campaign-preview strong, .campaign-preview span, .campaign-preview small { display: block; }
.campaign-preview strong { font-size: 11px; }
.campaign-preview span, .campaign-preview small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.lead-timeline { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.header-controls { flex-wrap: wrap; }
.header-controls input[type="search"] { max-width: 150px; min-width: 110px; }
.thread-actions select { max-width: 140px; min-width: 105px; }
.lead-timeline .section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.lead-timeline h3 { font-size: 14px; margin: 0; }
.timeline-count { color: var(--muted); font-size: 12px; }
.timeline-list { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 16px 1fr; min-height: 52px; position: relative; }
.timeline-item:not(:last-child)::before { background: var(--line); content: ""; left: 7px; position: absolute; top: 14px; bottom: -2px; width: 1px; }
.timeline-marker { background: var(--accent); border: 3px solid var(--panel); border-radius: 50%; height: 8px; margin-top: 5px; position: relative; width: 8px; z-index: 1; }
.timeline-item.message-inbound .timeline-marker { background: var(--green); }
.timeline-item.follow-up .timeline-marker { background: var(--amber); }
.timeline-item.audit .timeline-marker { background: var(--muted); }
.timeline-content { min-width: 0; padding: 0 0 14px 8px; }
.timeline-content > div { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; }
.timeline-content strong { font-size: 12px; }
.timeline-content time { color: var(--muted); flex: 0 0 auto; font-size: 11px; }
.timeline-content p { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 4px 0 0; overflow-wrap: anywhere; }
.agent-workload-panel { margin-top: 16px; }
.workload-awaiting { color: var(--coral); font-weight: 800; }
.lead-row-action { width: 100%; border-left: 0; border-right: 0; border-top: 0; color: inherit; background: var(--surface); cursor: pointer; font: inherit; text-align: left; }
.lead-row-action:hover { background: var(--surface-soft); }
.lead-row-action:disabled { color: inherit; cursor: default; opacity: .7; }
.lead-table-with-tags { grid-template-columns: 32px 1.1fr 1fr .75fr .75fr 1.2fr 1fr; }
.lead-bulk-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.lead-bulk-toolbar .bulk-selection-count { color: var(--muted); font-size: 12px; }
.lead-select { width: 16px; height: 16px; }
.lead-tag-list { align-items: center; display: flex; flex-wrap: wrap; gap: 3px; white-space: normal !important; }
.lead-tag-list .tag-pill { margin: 0; }
.section-actions input[type="search"] { min-width: 120px; max-width: 160px; }
.campaign-audience{display:grid;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px}.campaign-audience strong{color:var(--ink)}.campaign-audience span{color:var(--muted);line-height:1.45}
.contract-readiness{display:grid;gap:5px;margin-top:14px;padding:12px 14px;border:1px solid var(--line);background:var(--surface-muted);font-size:12px}.contract-readiness span{color:var(--warning-ink, #8a5a00);font-weight:700}.contract-readiness small{color:var(--muted);line-height:1.45}.contract-readiness code{font-size:11px;overflow-wrap:anywhere}
.lead-attribution{display:grid;gap:3px;margin-top:10px;padding:10px 12px;border-top:1px solid var(--line);font-size:12px}.lead-attribution strong{color:var(--ink)}.lead-attribution span{color:var(--muted);overflow-wrap:anywhere}
.delivery-status{display:inline-block;margin-left:4px;padding:2px 5px;border-radius:4px;color:#53708f;background:#eaf0f6;font-size:9px;font-weight:800;text-transform:uppercase}.delivery-status.delivered{color:#176b63;background:#dff4ef}.delivery-status.read{color:#245c9a;background:#e3efff}.delivery-status.failed{color:#a53d34;background:#fde6e2}
.delivery-history{margin-top:5px;color:var(--muted);font-size:9px}.delivery-history summary{cursor:pointer;color:var(--teal);font-weight:700}.delivery-history div{display:grid;gap:2px;margin-top:3px;padding-left:8px}.delivery-history b{color:var(--ink);font-weight:700}
.response-time{display:inline-block;color:#176b63;font-size:10px;font-weight:700}.response-time.pending{color:#a85a1c}.response-time.overdue{color:#a53d34}.response-time.within_sla{color:#176b63}
.notification-item span{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.channel-label{display:block;margin-top:4px;color:var(--teal);font-size:9px;font-weight:800;text-transform:uppercase}
.automation-status{display:inline-flex;align-items:center;width:max-content;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase}.automation-status.active{color:#176b63;background:#e6f4f1}.automation-status.paused{color:#a85a1c;background:#fff1df}
.thread-sla{width:max-content}.thread-next-action{color:var(--muted);font-size:10px;font-weight:700}
.knowledge-panel{margin:10px 0;padding:10px;border-top:1px solid #eef1f5;border-bottom:1px solid #eef1f5}.knowledge-panel-header,.knowledge-source-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.knowledge-panel-header{font-size:11px}.knowledge-panel-header span,.knowledge-source-row small{color:var(--muted);font-size:10px}.knowledge-source-row{padding:7px 0;border-top:1px solid #f1f3f6}.knowledge-source-row span{display:grid;gap:2px}.knowledge-form{display:grid;gap:6px;margin-top:8px}.knowledge-form textarea{min-height:54px;resize:vertical}.conversation-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:7px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.conversation-pagination .text-button{padding:5px 8px;font-size:10px}.conversation-pagination .text-button:disabled{opacity:.55;cursor:wait}
.sandbox-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px}.sandbox-form-panel,.sandbox-result-panel{min-width:0}.sandbox-form{padding:0 18px 18px}.sandbox-form-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:18px}.sandbox-result{min-height:220px;padding:0 18px 18px}.sandbox-success,.sandbox-error{display:grid;gap:9px;padding:18px;border:1px solid var(--line);background:var(--surface-soft);font-size:12px}.sandbox-success{border-left:3px solid var(--teal)}.sandbox-error{border-left:3px solid var(--coral)}.sandbox-success span,.sandbox-error span{color:var(--muted);overflow-wrap:anywhere}.sandbox-form .form-error{min-height:18px;margin:10px 0 0}.sandbox-form textarea{min-height:108px}
@media (max-width:900px){.sandbox-grid{grid-template-columns:1fr}}
.sandbox-attribution{display:grid;gap:4px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}.sandbox-attribution small{color:var(--muted);line-height:1.45}.conversion-review-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.conversion-review-action{font-size:11px}.campaign-attribution-preview{margin:12px 0 0;padding:10px 12px;border:1px solid var(--line);background:var(--surface-soft);color:var(--muted);font-size:11px;line-height:1.45;min-height:18px}
.campaign-budget-summary{display:grid;gap:4px;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft)}.campaign-budget-summary strong{font-size:11px}.campaign-budget-summary span,.campaign-budget-summary small{color:var(--muted);font-size:10px}.campaign-budget-summary.exceeded{border-color:#efb7b7;background:#fff5f5}.campaign-budget-summary.exceeded small{color:#b84848;font-weight:700}
.intake-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }.intake-form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }.intake-form-heading strong, .intake-form-heading span { display: block; }.intake-form-heading strong { color: var(--navy); font-size: 12px; }.intake-form-heading span { margin-top: 3px; color: var(--muted); font-size: 10px; }.intake-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.intake-form-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }.intake-form-grid input { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; }.intake-form-grid input:focus { border-color: var(--teal); outline: 2px solid rgba(20, 125, 125, .12); }.intake-form-grid label:nth-child(3), .intake-form-grid label:nth-child(10), .intake-form-grid label:nth-child(20), .intake-form-grid label:nth-child(22) { grid-column: span 2; }
.contract-preview { display: grid; gap: 4px; margin-top: 12px; padding: 10px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 10px; }.contract-preview.ready { border-color: #a9d8c4; background: #f2fbf7; }.contract-preview.blocked { border-color: #e8c3c3; background: #fff7f7; }.contract-preview span { color: var(--muted); }.contract-preview code { width: fit-content; padding: 2px 4px; color: var(--navy); background: #fff; }
.journey-trace { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }.journey-trace-item { display: grid; gap: 3px; min-width: 0; padding: 9px; border: 1px solid var(--line); background: var(--surface-soft); }.journey-trace-item span { color: var(--muted); font-size: 9px; text-transform: uppercase; }.journey-trace-item strong { color: var(--navy); font-size: 11px; overflow-wrap: anywhere; }.journey-trace-item small { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.replay-history { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .85rem; }.replay-history-header, .replay-history-row { display: grid; grid-template-columns: minmax(5rem, .7fr) minmax(4rem, .5fr) minmax(4rem, .5fr) minmax(9rem, 1fr); gap: .75rem; align-items: center; }.replay-history-header { margin-bottom: .45rem; }.replay-history-header small, .replay-history-row time { color: var(--muted); font-size: .78rem; }.replay-history-row { border-top: 1px solid var(--line); padding: .5rem 0; font-size: .82rem; }
.replay-comparison { display: grid; gap: 4px; margin-top: 10px; padding: 9px 10px; border: 1px solid var(--line); font-size: 10px; }.replay-comparison.ready { border-color: #a9d8c4; background: #f2fbf7; }.replay-comparison.blocked { border-color: #e8c3c3; background: #fff7f7; }.replay-comparison span { color: var(--muted); }
.commercial-work-queue-card { margin-bottom: 16px; }.work-queue-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }.work-queue-filters label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }.work-queue-filters select { min-width: 118px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; }.work-queue-campaign-summary { display: grid; gap: 5px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); background: #fbfcfd; color: var(--navy); font-size: 10px; }.work-queue-campaign-summary-list { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); }.work-queue-campaign-summary-entry { padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; }.work-queue-campaign-summary-entry:hover, .work-queue-campaign-summary-entry:focus-visible { color: var(--navy); text-decoration-color: currentColor; }.work-queue-list { display: grid; gap: 0; margin-top: 10px; }.work-queue-item { display: grid; grid-template-columns: minmax(4.5rem, .7fr) minmax(8rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(6rem, auto); gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 11px; }.work-queue-item strong { color: var(--navy); }.work-queue-item span:not(.readiness-status), .work-queue-item time, .work-queue-item small { color: var(--muted); overflow-wrap: anywhere; }.work-queue-item small { font-size: 10px; }.work-queue-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
@media (max-width: 860px) { .work-queue-item { grid-template-columns: minmax(4.5rem, .7fr) minmax(8rem, 1fr) minmax(6rem, 1fr) minmax(4rem, auto); }.work-queue-item time, .work-queue-item small { grid-column: span 1; } }
@media (max-width: 680px) { .replay-history-row { grid-template-columns: minmax(4.5rem, .7fr) minmax(4rem, .5fr) minmax(4rem, .5fr); }.replay-history-row time { grid-column: 1 / -1; } }
@media (max-width: 560px) { .intake-form-grid { grid-template-columns: 1fr; } .intake-form-grid label:nth-child(n) { grid-column: auto; } .intake-form-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 900px) { .journey-trace { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Reingeniería visual Amautix · Centro de operaciones educativo */
:root {
  --brand-deep: #162232;
  --brand-deep-raised: #1e2c3d;
  --brand-teal: #2f6f8f;
  --brand-copper: #8a6f3a;
  --brand-copper-soft: #f3e8c9;
  --brand-paper: #f6f8fb;
  --brand-rule: #d8e2ea;
  --brand-text: #223042;
  --brand-muted: #5b687a;
}

body {
  background: var(--brand-paper);
  color: var(--brand-text);
  font-size: 14px;
}

.topbar {
  position: relative;
  min-height: 76px;
  padding: 0 32px;
  background: var(--brand-deep);
  border-bottom: 0;
  color: #e8eef6;
  box-shadow: 0 8px 24px rgba(22, 34, 50, .18);
}
.topbar::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: var(--brand-teal);
}
.brand-mark { width: 38px; height: 38px; border: 1px solid rgba(232, 238, 246, .24); border-radius: 12px; color: var(--brand-deep); background: #9ed4e8; box-shadow: none; font-size: 15px; }
.brand-lockup strong { color: #f0f5fa; font-size: 14px; letter-spacing: -.02em; }
.brand-lockup span { color: #b4c0ce; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.environment-badge { color: #ffe7a3; background: rgba(138, 111, 58, .28); border-color: rgba(243, 232, 201, .5); }
.environment-badge i { background: #f3d16b; }
.connection-status { color: #b4c0ce; }
.connection-status.connected { color: #9ad9be; }
.topbar .icon-button { color: #b4c0ce; }
.topbar .icon-button:hover { color: #f0f5fa; background: var(--brand-deep-raised); }
.avatar-button { color: var(--brand-deep); background: #d8c17d; }

.sidebar {
  padding: 28px 13px 20px;
  background: var(--brand-deep);
  border-right: 1px solid #365067;
  color: #b4c0ce;
}
.sidebar nav { gap: 7px; }
.nav-item { min-height: 42px; padding: 10px 13px; border-radius: 10px; color: #b4c0ce; }
.nav-item:hover { color: #f0f5fa; background: var(--brand-deep-raised); }
.nav-item.active { color: #162232; background: #9ed4e8; box-shadow: none; font-weight: 800; }
.nav-icon { color: currentColor; }
.sidebar-footer { border-top-color: #365067; }
.scope-label, .scope-note, .presence-item { color: #91a1b3; }
.sidebar-footer strong { color: #f0f5fa; }

.main-content { max-width: 1680px; padding: 38px 42px 56px; }
.page-heading { position: relative; align-items: flex-end; min-height: 82px; margin-bottom: 30px; padding-left: 18px; }
.page-heading::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; border-radius: 4px; content: ""; background: var(--brand-copper); }
.eyebrow { color: var(--brand-teal); letter-spacing: .18em; }
h1 { color: var(--brand-deep); font-size: clamp(28px, 3vw, 42px); line-height: 1.05; letter-spacing: -.055em; }
.page-subtitle { max-width: 620px; color: var(--brand-muted); font-size: 14px; }
.metric-grid { gap: 16px; margin-bottom: 22px; }
.metric-card { min-height: 128px; padding: 20px 21px; border-color: var(--brand-rule); border-radius: 16px; background: #fff; box-shadow: 0 14px 30px rgba(31, 49, 67, .08); }
.metric-card::before { width: 6px; background: var(--brand-teal); }
.metric-card.accent-coral::before { background: var(--coral); }
.metric-card.accent-amber::before { background: var(--brand-copper); }
.metric-card.accent-ink::before { background: var(--brand-deep); }
.metric-card span { color: var(--brand-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.metric-card strong { margin-top: 13px; color: var(--brand-deep); font-size: 32px; }

.workspace-grid { min-height: 540px; border-radius: 16px; box-shadow: 0 18px 40px rgba(31, 49, 67, .09); }
.panel-header { min-height: 72px; padding: 17px 19px; }
.panel-header h2 { font-size: 16px; }
.panel-caption { color: var(--brand-muted); }
.channel-rail { gap: 8px; padding: 12px 14px; background: #eef4f7; }
.channel-rail-item { min-height: 44px; border-radius: 9px; }
.channel-rail-item:hover, .channel-rail-item.active { border-color: var(--brand-teal); background: #d9eef7; }
.conversation-item { padding: 15px 17px; border-bottom-color: #e5ecf1; }
.conversation-item:hover, .conversation-item.selected { background: #eef4f7; }
.conversation-avatar { background: var(--brand-copper); }
.message-list { background: #eef4f7; }
.message-bubble { border-radius: 14px; box-shadow: 0 4px 12px rgba(31, 49, 67, .05); }
.message.outbound .message-bubble { background: var(--brand-deep); }
.lead-avatar { background: var(--brand-copper); }
.notes-section { background: #fffaf0; }

.primary-button { min-height: 42px; padding: 0 17px; border-radius: 10px; background: var(--brand-teal); box-shadow: 0 7px 16px rgba(47, 111, 143, .2); }
.primary-button:hover { background: #285f7b; }
.outline-button, .text-button { min-height: 38px; border-color: var(--brand-rule); border-radius: 9px; color: var(--brand-deep); background: #fff; }
.outline-button:hover, .text-button:hover { border-color: var(--brand-teal); background: #d9eef7; }
input, select, textarea { min-height: 38px; border-color: #afc2d0 !important; border-radius: 9px !important; background: #fff; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(63, 131, 168, .35); outline-offset: 2px; }
.status-pill { border-radius: 999px; color: #1f5c41; background: #e7f5ee; }
.status-pill.pending { color: #5f4200; background: #fff5d6; }
.readiness-status { border-radius: 999px; }
.dialog-close { color: var(--brand-muted); }
#auth-dialog, #admin-token-dialog { border: 1px solid var(--brand-rule); border-radius: 18px; box-shadow: 0 24px 70px rgba(22, 34, 50, .24); }
#auth-dialog::backdrop, #admin-token-dialog::backdrop { background: rgba(22, 34, 50, .56); backdrop-filter: blur(3px); }

@media (max-width: 900px) {
  .topbar { padding: 0 18px; }
  .main-content { padding: 28px 20px 42px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 68px auto minmax(0, 1fr); }
  .sidebar { grid-column: 1; grid-row: 2; padding: 8px; overflow-x: auto; }
  .sidebar nav { display: flex; gap: 5px; overflow-x: auto; }
  .nav-item { min-width: max-content; min-height: 38px; padding: 8px 10px; }
  .sidebar-footer { display: none; }
  .main-content { grid-column: 1; grid-row: 3; padding: 24px 14px 34px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 104px; padding: 15px 14px; }
  .metric-card strong { font-size: 25px; }
}

/* Amautix calm-study system: structured neutrals, teal navigation, warm review states. */
:root { color-scheme: light; }
body { font-family: var(--font-body); letter-spacing: .005em; }
h1, h2, h3, .brand-lockup strong, .section-title h2 { font-family: var(--font-display); }
h1 { color: var(--navy); font-weight: 750; }
h2, h3 { color: var(--ink); font-weight: 700; }
.topbar, .sidebar { background: var(--surface); }
.topbar { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(31, 49, 67, .04); }
.sidebar { background: var(--surface-soft); border-right-color: var(--line); }
.nav-item { border-radius: 10px; }
.nav-item.active { color: var(--teal); background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal); }
.brand-mark { border-radius: 11px; background: var(--teal); box-shadow: 0 6px 14px rgba(47, 111, 143, .22); }
.main-content { padding-top: 34px; }
.metric-card, .workspace-grid, .panel, .session-panel, .pilot-card { border-radius: 14px; }
.metric-card, .workspace-grid { border-color: var(--line); box-shadow: var(--shadow); }
.metric-card::before { width: 5px; background: var(--teal); }
.metric-card.accent-coral::before { background: var(--coral); }
.metric-card.accent-amber::before { background: var(--amber); }
.metric-card.accent-ink::before { background: var(--navy); }
.primary-button { background: var(--teal); border-radius: 9px; box-shadow: 0 6px 14px rgba(47, 111, 143, .18); }
.primary-button:hover { background: #285f7b; }
.outline-button, .text-button { border-color: var(--line); border-radius: 9px; color: var(--navy); }
.outline-button:hover, .text-button:hover { border-color: var(--focus); background: var(--teal-soft); }
input, select, textarea { border-color: #afc2d0 !important; color: var(--ink); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.channel-rail, .conversation-bulk-toolbar { background: var(--surface-soft); }
.channel-rail-item:hover, .channel-rail-item.active { border-color: var(--teal); background: var(--teal-soft); }
.status-pill { color: #1f5c41; background: var(--success-soft); }
.status-pill.pending { color: var(--amber); background: var(--amber-soft); }
.message-list { background: #eef4f7; }
.message-bubble { border-radius: 12px; }
.message.outbound .message-bubble { background: var(--navy); border-color: var(--navy); }
.readiness-status.ready, .session-state.active { color: var(--success); }
.environment-badge { color: var(--amber); background: var(--amber-soft); border-color: #d8bd78; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Final inbox layout overrides: channels first, work surface second. */
.main-content { max-width: none; padding: 24px 28px 40px; }
.inbox-channelbar { display: grid; grid-template-columns: minmax(150px, 1.2fr) repeat(4, minmax(120px, 1fr)); gap: 8px; margin: 0 0 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 4px 14px rgba(31,49,67,.06); }
.inbox-channelbar .channel-rail-item { min-height: 52px; padding: 8px 10px; border-radius: 9px; }
.inbox-channelbar .channel-rail-item.active { border-color: var(--teal); background: var(--teal-soft); }
.inbox-channelbar .channel-rail-icon { width: 30px; height: 30px; border-radius: 8px; }
.inbox-channelbar .channel-rail-copy strong { font-size: 12px; }
.inbox-channelbar .channel-rail-copy small { font-size: 10px; }
.workspace-grid { grid-template-columns: minmax(270px,.8fr) minmax(460px,1.65fr) minmax(285px,.88fr); min-height: calc(100vh - 255px); gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 28px rgba(31,49,67,.08); }
.workspace-grid > .panel { min-height: 0; background: var(--surface); }
.conversation-panel, .thread-panel { border-right: 1px solid var(--line); }
.conversation-panel .panel-header { display: block; padding: 15px 14px 12px; }
.conversation-panel .panel-header > div:first-child { margin-bottom: 11px; }
.conversation-panel .panel-header h2 { font-size: 17px; }
.conversation-panel .header-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.conversation-panel .header-controls input { grid-column: 1 / -1; width: 100%; max-width: none; min-height: 36px; }
.conversation-panel .header-controls select { width: 100%; min-width: 0; min-height: 34px; }
.conversation-panel .conversation-view-summary { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; padding: 0 12px 10px; }
.conversation-panel .conversation-summary-item { min-height: 54px; padding: 9px 10px; }
.conversation-list { height: calc(100vh - 440px); max-height: none; min-height: 260px; border-top: 1px solid var(--line); }
.conversation-item { padding: 13px 12px; }
.conversation-item:hover, .conversation-item.selected { background: #eef7f5; }
.conversation-avatar, .lead-avatar { background: var(--teal); }
.thread-panel { grid-template-rows: auto minmax(0,1fr) auto auto auto; }
.message-list { padding: 22px 24px; background: #f5f8f8; background-image: radial-gradient(rgba(47,111,143,.06) 1px, transparent 1px); background-size: 18px 18px; }
.message { max-width: min(78%,700px); }
.message-bubble { border-radius: 4px 12px 12px 12px; box-shadow: 0 1px 2px rgba(31,49,67,.05); }
.message.outbound .message-bubble { background: var(--teal); border-color: var(--teal); border-radius: 12px 4px 12px 12px; }
.composer input { min-height: 42px; border-radius: 21px !important; background: #f7fafb; }
.send-button { width: 42px; height: 42px; border-radius: 50%; background: var(--teal); }
.lead-panel { overflow: auto; }
.lead-panel .panel-header { background: var(--surface-soft); }

@media (max-width: 1180px) {
  .inbox-channelbar { grid-template-columns: repeat(5,minmax(120px,1fr)); overflow-x: auto; }
  .inbox-channelbar .channel-rail-item { min-width: 120px; }
  .workspace-grid { grid-template-columns: minmax(250px,.85fr) minmax(420px,1.35fr); }
  .lead-panel { grid-column: 1 / -1; }
  .conversation-list { height: 460px; }
}
@media (max-width: 760px) {
  .main-content { padding: 16px 10px 28px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inbox-channelbar { grid-template-columns: repeat(5,minmax(128px,1fr)); overflow-x: auto; }
  .workspace-grid { display: block; min-height: 0; overflow: visible; }
  .conversation-panel, .thread-panel { border-right: 0; }
  .conversation-list { height: 360px; }
  .thread-panel { min-height: 650px; border-top: 1px solid var(--line); }
  .lead-panel { border-top: 1px solid var(--line); }
}