/* The operator workspace uses one quiet, high-contrast visual language.
   Public invitation pages keep their own presentation. */
:root {
  color-scheme: dark;
  --ink: #f1f0ed;
  --muted: #aaa8a3;
  --rail: #09090a;
  --rail-soft: #77746e;
  --surface: #19191a;
  --canvas: #0d0d0e;
  --line: #333334;
  --accent: #d8bd79;
  --accent-dark: #ead39a;
  --accent-soft: #30291a;
  --danger: #f08079;
  --panel-raised: #222223;
  --panel-inset: #111112;
  font-family: Inter, 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
}

html { scrollbar-color: #484644 #111112; }
body { color: var(--ink); background: var(--canvas); }
::selection { color: #151310; background: #d8bd79; }

/* Shell: the navigation recedes while content remains the focal point. */
.sidebar {
  width: 252px;
  min-width: 252px;
  padding: 27px 15px 20px;
  color: var(--ink);
  background: #09090a;
  border-right: 1px solid #242425;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 0 5px 24px; border-bottom: 1px solid #202021; }
.brand { min-width: 0; gap: 12px; padding: 0; border: 0; }
.brand-name { min-width: 0; }
.brand strong { color: #f6f4ef; font-size: 18px; font-weight: 700; letter-spacing: -.045em; }
.brand small { color: #a69a7c; font-size: 10px; letter-spacing: .13em; }
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: block;
  border: 1px solid #f0d894;
  border-radius: 50%;
  background: radial-gradient(circle at 27% 22%, #fff0ba 0, #d8b75e 25%, #73551e 59%, #1b160d 86%);
  box-shadow: inset -3px -4px 6px #0807059e, 0 0 14px #d6b46527;
  transform: none;
}
.nav-list { gap: 5px; margin-top: 25px; }
.nav-label { padding: 0 12px 9px; color: #73716d; font-size: 10px; letter-spacing: .12em; }
.nav-label-space { margin-top: 29px; }
.nav-item { height: 42px; gap: 12px; padding: 0 12px; color: #b7b5b0; font-size: 13px; font-weight: 600; }
.nav-item:hover { color: #f5e8c5; background: #191817; }
.nav-icon { width: 19px; color: #99958a; font-size: 18px; }
.nav-active, .nav-active:hover { color: #e9ce8a; background: #1d1b16; box-shadow: inset 2px 0 0 var(--accent); }
.nav-active .nav-icon { color: var(--accent); }
.nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer { color: #89857c; border-color: #252423; font-size: 10px; }
.sidebar-footer span { font-family: inherit; }
.sidebar-collapsed .sidebar { width: 72px; min-width: 72px; padding-inline: 10px; }
.sidebar-collapsed .sidebar-header { flex-direction: column; gap: 13px; padding: 0 0 18px; }
.sidebar-collapsed .brand { justify-content: center; }
.sidebar-collapsed .brand-name, .sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-text, .sidebar-collapsed .sidebar-footer { display: none; }
.sidebar-collapsed .nav-list { margin-top: 20px; }
.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
.sidebar-collapsed .nav-icon { width: auto; }
.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.main-content { background: var(--canvas); }
.topbar { position: sticky; z-index: 5; top: 0; height: 66px; padding: 0 clamp(20px, 3vw, 46px); border-color: #29292a; background: #0b0b0c; }
.topbar-leading { gap: 15px; }
.sidebar-toggle {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--accent);
  border-color: #323130;
  background: #141415;
  border-radius: 8px;
}
.sidebar-toggle:hover { color: var(--accent-dark); background: #24211b; }
.sidebar-toggle svg { display: block; transition: transform .18s ease; }
.breadcrumb { color: #c9c7c0; font-size: 12px; }
.breadcrumb span { color: #77736c; }
.breadcrumb #breadcrumb-page { color: #eeeae0; }
.environment-pill { display: none; }
.user-email { color: #b4b0a6; font-size: 11px; }
.sign-out-button { min-height: 34px; color: #d0c8b4; border: 1px solid #3a3428; background: #1b1915; }
.sign-out-button:hover { color: #f7e7bc; background: #29241a; }
.content-wrap { max-width: 1510px; padding: clamp(28px, 3vw, 46px) clamp(20px, 3vw, 46px) 76px; }
.sidebar-collapsed #campaigns-view,
#campaigns-view:has(#message-sequence-panel:not([hidden])),
.sidebar-collapsed #campaigns-view:has(#message-sequence-panel:not([hidden])) { max-width: 1880px; }
.heading-row { align-items: flex-start; margin-bottom: 28px; }
.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .14em; }
h1 { color: var(--ink); font-size: clamp(30px, 3vw, 40px); font-weight: 700; letter-spacing: -.045em; }
h2, h3, h4, strong { color: inherit; }
.intro { max-width: 670px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.workspace-picker { margin-top: 20px; }
.workspace-picker label { color: var(--muted); }
.connection-graphic { display: none; }

/* Cards, fields and controls. */
.form-card, .status-card, .auth-card, .campaign-overview-intro,
.campaign-overview-stats > div, .campaign-overview-chart-card,
.campaign-overview-links button, .campaign-dashboard-head,
.action-history-card, .campaign-rotation-dialog, .action-review-dialog,
.campaign-templates-dialog, .campaign-picker {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}
.form-card, .status-card, .auth-card { border-radius: 14px; }
.status-card { padding: clamp(20px, 2.2vw, 30px); }
.status-card > p { min-height: 0; }
.card-head { padding: 24px 28px; border-color: var(--line); }
.card-head h2, .status-card h2 { color: var(--ink); font-size: 17px; }
.card-head p, .status-card p, .auth-card > p:not(.eyebrow), .intro { color: var(--muted); }
.status-card p { font-size: 13px; }
.step-number { color: #e8cf90; background: #30291a; }
.field-help, .auth-card > small { color: #aaa8a3; }
label { color: #e2dfd7; }
.required { color: var(--danger); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  color: var(--ink);
  border: 1px solid #43413d;
  background: #111112;
  border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: #817e78; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #d8bd7929;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
input[type="file"] { color: var(--muted); }
input[type="file"]::file-selector-button { color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--panel-raised); }
button {
  min-height: 40px;
  color: #211b10;
  border-radius: 8px;
  background: var(--accent);
  font-weight: 750;
  box-shadow: none;
}
button:hover { color: #14110c; background: #e8cf90; }
button:disabled { opacity: .58; cursor: not-allowed; }
button:focus-visible, .sidebar-toggle:focus-visible,
.campaign-tabs button:focus-visible, .secondary-action:focus-visible,
.campaign-picker button:focus-visible, .campaign-rotation-dialog button:focus-visible,
.campaign-list-button:focus-visible, #campaign-new-button:focus-visible,
.campaign-overview-links button:focus-visible, #campaign-back-link:focus-visible,
.campaign-create-back:focus-visible, .campaign-photo-upload:focus-visible,
.action-history-open:focus-visible {
  outline: 2px solid #f2d68d;
  outline-offset: 3px;
}
.secondary-action, .picker-close {
  color: #e2c987;
  border: 1px solid #675a3c;
  background: #201d17;
}
.secondary-action:hover, .picker-close:hover { color: #f5dfaa; background: #30291b; }
.form-footer { border-color: var(--line); background: #171718; }
.form-message { color: var(--muted); }
.form-message.success { color: #72c99a; }
.form-message.error { color: var(--danger); }
.status-rule { background: var(--line); }
.local-note, .step-list, .step-list strong { color: var(--muted); }
.step-list li > span { border-color: var(--line); }
.step-list .step-current > span { color: #211b10; }
.step-list .step-current strong { color: var(--ink); }
.auth-card { padding: clamp(28px, 4vw, 42px); }

/* Accounts, connection states, and blacklist. */
.connection-directory { margin-bottom: 18px; }
.connection-status-filters { margin-top: 20px; }
.connection-status-filters button { color: #a9a6a0; }
.connection-status-filters button:hover { color: var(--accent-dark); background: #211e18; }
.connection-status-filters button.is-active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.connection-directory-item, .blacklist-row, .blacklist-event,
.campaign-list-button, .campaign-groups-list li {
  color: var(--ink);
  border-color: var(--line);
  background: var(--panel-raised);
}
.connection-directory-item:hover, .campaign-list-button:hover {
  color: var(--ink);
  border-color: #716344;
  background: #29261f;
}
.connection-directory-item.is-selected, .campaign-list-button.is-selected {
  color: var(--ink);
  border-color: var(--accent);
  background: #2b261b;
  box-shadow: inset 3px 0 0 var(--accent);
}
.connection-directory-avatar, .action-sender-avatar { color: #e7d19a; background: #363022; }
.connection-directory-indicator { background: #d8b653; box-shadow: 0 0 0 4px #3a321d; }
.connection-directory-item[data-tone="connected"] .connection-directory-indicator { background: #48bd7c; box-shadow: 0 0 0 4px #1a3525; }
.connection-directory-item[data-tone="disconnected"] .connection-directory-indicator { background: #f0726d; box-shadow: 0 0 0 4px #3a2423; }
.connection-directory-arrow { color: var(--accent); }
.connection-qr-panel, .campaign-invite-metrics > div { border-color: var(--line); background: var(--panel-inset); }
.connection-qr-panel img { border-color: #f5f2e8; }
.blacklist-explainer { color: #dec58e; border-color: #66502c; background: #252015; }
.blacklist-row button { color: var(--danger); border-color: #70413d; background: #2a1b1a; }
.blacklist-row button:hover { color: #ffaaa2; background: #3a2321; }
.blacklist-event-state { color: #f1d78e; background: #3c321b; }
.blacklist-event-state[data-status="removed"] { color: #80d5a4; background: #1d3829; }
.blacklist-event-state[data-status="failed"] { color: #ffaaa2; background: #3a2321; }
.status-top, .status-top[data-tone="unstable"] { color: #e5ca86; border-color: #65532b; background: #302818; }
.is-saved .status-top, .status-top[data-tone="connected"] { color: #8bddad; border-color: #315d42; background: #1e3627; }
.is-saved .status-dot { background: #48bd7c; }
.status-top[data-tone="disconnected"] { color: #ffa5a0; border-color: #6d3935; background: #39211f; }
.connection-actions button:first-child { color: #e2c987; background: #30291a; }
.connection-actions button:first-child:hover { background: #45381f; }
.groups-panel li, .campaign-list li, .draft-list li { border-color: var(--line); }

/* Campaign workspace. */
.campaign-dashboard-head {
  padding: clamp(25px, 3vw, 38px);
  border-left: 3px solid var(--accent);
  background: #1a1a1b;
}
#campaign-back-link { color: var(--accent-dark); }
.campaign-dashboard-title .eyebrow { color: var(--accent); }
.campaign-dashboard-title h1 { color: var(--ink); }
.campaign-dashboard-title p:last-child { color: var(--muted); }
.campaign-status { color: #8bddad; border-color: #41674d; background: #223329; }
.campaign-status[data-status="draft"] { color: #e9cf8b; border-color: #806538; background: #32291a; }
.campaign-list strong, .draft-list strong { color: var(--ink); }
.campaign-list-button { min-height: 112px; }
.campaign-list-button::after { color: var(--accent); }
.campaign-overview-stats strong, .campaign-overview-chart-title strong,
.campaign-invite-metrics strong { color: var(--accent-dark); }
.campaign-chart-period, .campaign-click-chart-head > div { border-color: var(--line); background: var(--panel-inset); }
.campaign-chart-period button, .campaign-click-chart-head button { color: var(--muted); background: transparent; }
.campaign-chart-period button.is-active, .campaign-click-chart-head button.is-active { color: #211b10; background: var(--accent); }
.campaign-overview-bars, .campaign-click-chart { border-color: var(--line); background: var(--panel-inset); }
.campaign-click-chart li strong { color: var(--ink); }
.campaign-overview-bars li span { background: #c5ad74; }
.campaign-overview-chart-card:first-child .campaign-overview-bars li span { background: #ddc17d; }
.campaign-overview-chart-card:nth-child(3) .campaign-overview-bars li span { background: #8b91b3; }
.campaign-overview-chart-card:nth-child(4) .campaign-overview-bars li span { background: #df827a; }
.campaign-overview-chart-card:nth-child(5) .campaign-overview-bars li span { background: #c97888; }
.campaign-overview-links button { min-height: 68px; }
.campaign-overview-links button:hover { color: var(--ink); border-color: #716344; background: #29261f; }
.campaign-overview-links span { color: var(--accent); }
.campaign-tabs { margin-top: 26px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.campaign-tabs button { min-height: 44px; padding: 10px 15px; color: #b5b2aa; border-radius: 0; border-bottom: 2px solid transparent; }
.campaign-tabs button:hover { color: var(--accent-dark); background: #1c1a16; }
.campaign-tabs button.is-active { color: var(--accent-dark); border-bottom-color: var(--accent); background: transparent; box-shadow: none; }
.campaign-activity-table th { color: #d7d3c8; background: #252525; }
.campaign-activity-table td.is-entry { color: #72c99a; }
.campaign-activity-table td.is-exit { color: #f08079; }
.campaign-activity-chart { border-color: var(--line); background: var(--panel-inset); }
.campaign-activity-legend .is-entry, .campaign-activity-bars .is-entry { background: #56be82; }
.campaign-activity-legend .is-exit, .campaign-activity-bars .is-exit { background: #ec756f; }
.campaign-diagnostic-card { border-color: var(--line); background: var(--panel-raised); }
.status-card .campaign-diagnostic-warning { color: var(--danger); }
.campaign-invite-photo, .campaign-webhook-form,
.campaign-webhook-events fieldset, .campaign-webhook-card,
.campaign-webhook-delivery, .campaign-group-row { border-color: var(--line); }
.campaign-invite-photo-preview { color: var(--accent); background: #343022; }
.campaign-webhook-form, .campaign-webhook-secret-box { background: var(--panel-inset); }
.campaign-webhook-event small { color: var(--muted); }
.campaign-webhook-delivery.is-succeeded strong { color: #72c99a; }
.campaign-webhook-delivery.is-failed strong { color: var(--danger); }
.campaign-activity-chart-section, .campaign-activity-table-wrap { border-color: var(--line); }
.campaign-group-actions .campaign-group-entry-button:hover,
.campaign-group-actions .campaign-group-remove-button:hover { background: #39211f; }
.campaign-groups-list li > button:hover { background: #39211f; }
.campaign-groups-list li > .campaign-group-link-button:hover,
.campaign-group-actions .campaign-group-link-button:hover { background: #30291b; }
.campaign-group-tool-row button, .campaign-group-bulk button,
.campaign-picker-list button {
  color: var(--accent-dark);
  border-color: #665838;
  background: #201d17;
}
.campaign-group-tool-row button:hover, .campaign-group-tool-row button.is-active {
  color: #211b10;
  border-color: var(--accent);
  background: var(--accent);
}
.campaign-group-bulk [data-group-tool="remove"] { color: var(--danger); border-color: #70413d; background: #2a1b1a; }
.campaign-group-results { border-color: var(--line); background: var(--panel-inset); }
.campaign-group-directory .campaign-group-row.is-entry-closed { border-color: #6b4842; background: #2a211e; }
.campaign-webhook-event input { accent-color: var(--accent); }
.campaign-webhook-card code, .campaign-webhook-delivery span { color: var(--muted); }

/* Action flow and history. */
.action-wizard-nav li { color: #8e8b84; }
.action-wizard-nav li:not(:last-child)::after { background: #3a3937; }
.action-wizard-nav li > span:first-child { color: #aeaba4; background: #302f2c; }
.action-wizard-nav li[data-state="current"] > span:first-child,
.action-wizard-nav li[data-state="done"] > span:first-child { color: #211b10; background: var(--accent); }
.action-wizard-option, .action-composer-group-list label,
.action-sender-mode-option, .action-sender-account,
.action-wizard-summary > div, .action-wizard-context,
.action-sender-panel, .campaign-groups-list li {
  color: var(--ink);
  border-color: var(--line);
  background: var(--panel-raised);
}
.action-wizard-option:hover, .action-sender-mode-option:hover,
.action-composer-group-list label:hover { border-color: #8f794b; background: #29261f; }
.action-wizard-option[aria-pressed="true"], .action-sender-mode-option:has(input:checked),
.action-sender-account:has(input:checked),
.action-composer-group-list label:has(input:checked) {
  border-color: var(--accent);
  background: #30291b;
  box-shadow: inset 3px 0 0 var(--accent);
}
.action-wizard-option-mark { color: var(--accent); }
.action-history-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.action-history-item-head { color: var(--ink); background: #252525; }
.action-history-open:hover { color: var(--accent-dark); background: transparent; }
.action-history-open small { color: #b9b5aa; }
.action-history-badge { color: #b2e6c5; background: #254431; }
.action-history-badge[data-status="scheduled"], .action-history-badge[data-status="queued"] { color: #efd18a; background: #45351b; }
.action-history-badge[data-status="failed"], .action-history-badge[data-status="uncertain"],
.action-history-badge[data-status="partial"] { color: #ffd4ca; background: #63332c; }
.action-history-badge[data-status="cancelled"], .action-history-badge[data-status="draft"] { color: #d0cdc6; background: #444341; }
.action-history-item-body > * + *, .action-history-senders,
.action-history-sender, .action-history-item-footer { border-color: var(--line); }
.action-history-preview { background: #101511; }
.action-history-preview .action-history-kicker { color: #8fb8a0; }
.action-history-preview p { color: #eaf6eb; background: #174932; }
.action-history-preview small { color: #a9cdb3; }
.action-history-kicker, .action-history-facts dt { color: var(--muted); }
.action-history-facts dd { color: var(--ink); }
.action-history-item-footer { color: var(--muted); }
.action-progress-track { background: #383633; }
.action-list-button[data-status="processing"] { background: #25291e; }
.action-execute-form, #action-composer-confirmation { border-color: #70413d; background: #2a1b1a; }
.action-execute-form h3, .action-execute-form p { color: #f1aaa2; }
.action-execute-form button { color: #fff3f1; background: #9a433d; }
.action-execute-form button:hover { color: #fff; background: #b14d46; }
.action-message-preview, .action-delivery-panel, .action-schedule-panel { border-color: #61563d; background: #201e19; }
.action-message-preview strong, .action-schedule-panel strong { color: var(--accent-dark); }
.action-delivery-head button, .delivery-count { color: var(--ink); border-color: var(--line); background: var(--panel-raised); }
.action-delivery-head button:hover { color: var(--accent-dark); background: #30291b; }
.action-cancel-button { color: var(--danger); background: transparent; }
.action-cancel-button:hover { color: #ffa8a0; background: transparent; }

/* Message composer: a larger WhatsApp-like preview and clear editor surfaces. */
.message-sequence-layout { grid-template-columns: minmax(310px, 1.15fr) minmax(360px, 1.35fr) minmax(260px, .8fr); gap: 14px; }
.message-sequence-layout > * { min-height: 590px; padding: 21px; border-color: var(--line); background: var(--surface); }
.message-sequence-main { background: #1d1d1e; }
.message-sequence-list {
  min-height: 420px;
  max-height: 680px;
  padding: 18px;
  background: radial-gradient(circle at 18% 21%, #253029 0 1px, transparent 2px),
    radial-gradient(circle at 83% 68%, #253029 0 1px, transparent 2px), #101712;
  background-size: 48px 48px, 65px 65px, auto;
}
.message-sequence-item { color: #eaf3e9; border-color: #306247; background: #1b5138; box-shadow: none; }
.message-sequence-item.is-active { border-color: #91bb97; background: #226045; }
.message-sequence-item button { color: #e3eedf; background: transparent; }
.message-sequence-item button:hover { color: #fff; background: #ffffff1b; }
.message-sequence-select strong, .message-sequence-select small { color: #cce6d1; }
.message-preview-image { background: #203c2e; }
.message-preview-actions { border-color: #3b7053; }
.message-sequence-types button { color: var(--accent-dark); border-color: #665838; background: #201d17; }
.message-sequence-types button:hover { color: #f6dda7; background: #30291b; }
.sequence-poll-option { border-color: var(--line); background: var(--panel-inset); }
.sequence-poll-option input { background: #19191a; }
.sequence-poll-remove:hover { color: #ffaaa2; background: #3a2321; }
.sequence-format-toolbar button { color: var(--ink); border-color: var(--line); background: var(--panel-raised); }
.sequence-format-toolbar button:hover { color: var(--accent-dark); background: #30291b; }
.message-setting-choices span { color: #d7d3c9; border-color: var(--line); background: var(--panel-inset); }
.message-setting-choices input:checked + span { color: #f1d894; border-color: var(--accent); background: #30291b; }
.action-composer-footer .secondary-action { background: #201d17; }

.campaign-picker::backdrop, .campaign-rotation-dialog::backdrop,
.campaign-templates-dialog::backdrop, .action-review-dialog::backdrop { background: #000b; }
.campaign-templates-dialog-head, .action-review-head { border-color: var(--line); background: #212122; }
.campaign-picker-list li { border-color: var(--line); }
.action-review-head span { color: var(--accent-dark); }
.action-review-list dd { color: var(--ink); }

@media (max-width: 1250px) {
  .message-sequence-layout { grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.25fr); }
}
@media (max-width: 1020px) and (min-width: 701px) {
  .sidebar { width: 220px; min-width: 220px; }
}
@media (max-width: 700px) {
  .sidebar { position: static; width: 100%; min-width: 0; min-height: 0; height: auto; overflow: visible; padding: 13px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-header { padding: 0; border: 0; }
  .brand { padding: 0; border: 0; }
  .brand-mark { width: 25px; height: 25px; flex-basis: 25px; }
  .nav-list { margin-top: 13px; }
  .sidebar-collapsed .sidebar { width: 100%; min-width: 0; padding: 13px 18px; }
  .sidebar-collapsed .sidebar-header { flex-direction: row; padding: 0; }
  .sidebar-collapsed .nav-list { display: none; }
  .content-wrap { padding: 26px 18px 54px; }
  .topbar { height: 54px; padding: 0 18px; }
  .message-sequence-layout { grid-template-columns: 1fr; }
  .message-sequence-layout > * { min-height: 0; }
  .message-sequence-list { min-height: 260px; }
}
@media (max-width: 480px) {
  .topbar-actions { gap: 5px; }
  .sign-out-button { padding: 0 9px; }
  .breadcrumb { font-size: 11px; }
  .connection-directory-actions { width: 100%; }
  .connection-directory-actions button { flex: 1; }
  .message-sequence-types button { width: auto; }
  .campaign-tabs button, .campaign-chart-period button, .campaign-click-chart-head button { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}