:root {
  color-scheme: light;
  --bg: #eef2f1;
  --surface: #ffffff;
  --surface-2: #f7faf8;
  --text: #17211f;
  --muted: #66736f;
  --line: #dce5e1;
  --border: #dce5e1;
  --control-bg: #f7faf8;
  --selection-bg: #eaf7f0;
  --focus: #9a3d0b;
  --success-bg: #dcf5e9;
  --warning-bg: #fff1d8;
  --danger-bg: #fff1ef;
  --thread-bg: #f8fbfa;
  --chrome-bg: #eef2f1;
  --green: #168a63;
  --green-dark: #0c694c;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171e1b;
  --surface: #232c28;
  --surface-2: #2e3933;
  --text: #f2f7f3;
  --muted: #b9cbc1;
  --line: #52655a;
  --border: #52655a;
  --control-bg: #303c35;
  --selection-bg: #294b3a;
  --focus: #ffd17b;
  --success-bg: #254c3b;
  --warning-bg: #49391f;
  --danger-bg: #4c2d2c;
  --thread-bg: #1d2722;
  --chrome-bg: #202924;
  --green: #75d5a6;
  --green-dark: #91e8b9;
  --brand: #0e7754;
  --brand-dark: #7bd9aa;
  --blue: #9bd4e3;
  --accent: #8cb7ff;
  --warning: #ffd18b;
  --danger: #ffaaa3;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.theme-switcher {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.theme-switcher label {
  position: relative;
  cursor: pointer;
}

.theme-switcher input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.theme-switcher span {
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 32px;
  padding: 0 7px;
  border-radius: 4px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.theme-switcher input:checked + span {
  background: var(--selection-bg);
  color: var(--text);
}

.theme-switcher input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

input,
select,
textarea {
  background: var(--control-bg);
  accent-color: var(--brand);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.login-card,
.dashboard-template-options,
.retake-template-options,
.retake-template-option {
  background: var(--surface);
}

.topbar,
.workspace-footer {
  background: var(--chrome-bg);
  border-color: var(--line);
}

.dashboard-quality-tag,
.inbox-icon-button {
  background: var(--surface-2);
}

.dashboard-template-option:hover,
.inbox-icon-button:hover,
.inbox-icon-button[aria-pressed="true"],
.conversation-item.active,
.settings-tab.active,
.reply-tools .icon-action:hover,
.quick-reply-button:hover,
.attachment-button:hover,
.emoji-toggle:hover,
.emoji-option:hover,
.retake-template-option:hover,
.retake-template-option.selected {
  background: var(--selection-bg);
}

.conversation-item.waiting,
.conversation-item.waiting.active,
.chat-meta-window.closed,
.badge.waiting,
.warning-action {
  background: var(--warning-bg);
}

.badge.open,
.chat-meta-window.open,
.message.agent {
  background: var(--success-bg);
}

.danger-action,
.danger-ghost-action,
.retake-alert {
  background: var(--danger-bg);
}

.message-thread {
  background: var(--thread-bg);
}

.message-document-link,
.message-media {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}

.template-preview-cloud,
.template-preview-cloud::after {
  background: var(--surface-2);
  border-color: var(--line);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

:root[data-theme="dark"] .login-screen {
  background: linear-gradient(135deg, #144035, #111a18);
}

:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .dialog-card,
:root[data-theme="dark"] .reply-popover,
:root[data-theme="dark"] .dashboard-response-card,
:root[data-theme="dark"] .dashboard-response-table-row {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme="dark"] .login-card h1,
:root[data-theme="dark"] .conversation-item,
:root[data-theme="dark"] .emoji-option,
:root[data-theme="dark"] .retake-template-option {
  color: var(--text);
}

:root[data-theme="dark"] .badge.closed,
:root[data-theme="dark"] .ai-agent-status-tag.test,
:root[data-theme="dark"] .ai-agent-status-tag.disabled {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line);
}

:root[data-theme="dark"] .badge.forwarded,
:root[data-theme="dark"] .role-chip {
  background: #2b3d59;
  color: #b8d0ff;
}

:root[data-theme="dark"] .ai-agent-status-tag,
:root[data-theme="dark"] .vehicle-insight-button,
:root[data-theme="dark"] .dashboard-quality-tag.quality-green b {
  background: var(--success-bg);
  color: #b3efca;
  border-color: var(--green);
}

:root[data-theme="dark"] .ai-agent-status-tag.assisted,
:root[data-theme="dark"] .ai-agent-status-tag.supervised,
:root[data-theme="dark"] .ai-agent-status-tag.observe,
:root[data-theme="dark"] .competitor-insight-button,
:root[data-theme="dark"] .dashboard-quality-tag.quality-yellow b,
:root[data-theme="dark"] .retake-alert.waiting-response-alert {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning);
}

:root[data-theme="dark"] .dashboard-quality-tag.quality-red b {
  background: var(--danger-bg);
  color: var(--danger);
}

:root[data-theme="dark"] .dashboard-quality-tag.quality-neutral b {
  background: var(--surface-2);
  color: var(--muted);
}

:root[data-theme="dark"] .retake-alert {
  color: var(--text);
  border-color: var(--danger);
}

:root[data-theme="dark"] .account-tag {
  background: color-mix(in srgb, var(--tag-color), var(--surface) 80%);
  color: var(--text);
  border-color: var(--tag-color);
}

:root[data-theme="dark"] .primary-action:hover {
  background: #0a6245;
}

:root[data-theme="dark"] .blue-action {
  background: #315a9c;
  color: #fff;
}

:root[data-theme="dark"] .message-document-link:hover,
:root[data-theme="dark"] .attachment-button.active {
  background: var(--selection-bg);
  color: var(--text);
}

@media (max-width: 640px) {
  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }
  .theme-switcher {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.bulk-variable-preview {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

.bulk-schedule-row {
  border-color: var(--line);
}

:root[data-theme="dark"] .later-purchase-cell.has-purchase strong,
:root[data-theme="dark"] .view-tab.active,
:root[data-theme="dark"] .sales-sort-button:hover,
:root[data-theme="dark"] .sales-sort-button:focus-visible,
:root[data-theme="dark"] .link-button:hover,
:root[data-theme="dark"] .log-responded,
:root[data-theme="dark"] .read-check {
  color: var(--brand-dark) !important;
}

:root[data-theme="dark"] .dashboard-response-card:hover,
:root[data-theme="dark"] .dashboard-response-card.active {
  background: var(--selection-bg);
}

:root[data-theme="dark"] .dashboard-progress,
:root[data-theme="dark"] .log-bar {
  background: var(--line);
}

:root[data-theme="dark"] .dashboard-response-table,
:root[data-theme="dark"] .history-message {
  background: var(--surface);
  color: var(--text);
}

:root[data-theme="dark"] .dashboard-response-table-head,
:root[data-theme="dark"] .sales-schedule-header,
:root[data-theme="dark"] .post-sale-header,
:root[data-theme="dark"] .bulk-header,
:root[data-theme="dark"] .security-log-header,
:root[data-theme="dark"] .log-header,
:root[data-theme="dark"] .history-item,
:root[data-theme="dark"] .user-avatar {
  background: var(--surface-2);
  color: var(--text);
}

:root[data-theme="dark"] .schedule-status,
:root[data-theme="dark"] .whatsapp-health-status {
  background: var(--surface-2);
  color: var(--muted);
}

:root[data-theme="dark"] .schedule-status.pending,
:root[data-theme="dark"] .schedule-status.partial,
:root[data-theme="dark"] .whatsapp-health-status.quality-yellow,
:root[data-theme="dark"] .survey-status-tag.failure.media,
:root[data-theme="dark"] .log-row.score-warning,
:root[data-theme="dark"] .competitor-insight-private {
  background: var(--warning-bg);
  color: var(--warning);
}

:root[data-theme="dark"] .schedule-status.running {
  background: #2b3d59;
  color: #b8d0ff;
}

:root[data-theme="dark"] .schedule-status.completed,
:root[data-theme="dark"] .survey-status-tag,
:root[data-theme="dark"] .whatsapp-health-status.quality-green,
:root[data-theme="dark"] .history-message.agent,
:root[data-theme="dark"] .nps-panel,
:root[data-theme="dark"] .score-row.selected,
:root[data-theme="dark"] .score-filter-summary,
:root[data-theme="dark"] .score-source-tag,
:root[data-theme="dark"] .history-score,
:root[data-theme="dark"] .ai-test-result {
  background: var(--success-bg);
  color: var(--text);
}

:root[data-theme="dark"] .schedule-status.failed,
:root[data-theme="dark"] .survey-status-tag.failure,
:root[data-theme="dark"] .whatsapp-health-status.quality-red,
:root[data-theme="dark"] .security-log-row.failure,
:root[data-theme="dark"] .log-row.score-critical,
:root[data-theme="dark"] .ai-job-row.failed,
:root[data-theme="dark"] .client-card.blocked,
:root[data-theme="dark"] .post-sale-card.blocked,
:root[data-theme="dark"] .blocked-client-tag {
  background: var(--danger-bg);
  color: var(--danger);
}

:root[data-theme="dark"] .template-qualitrack-flag:has(input:checked),
:root[data-theme="dark"] .template-expand-button:hover,
:root[data-theme="dark"] .score-row:hover:not(:disabled),
:root[data-theme="dark"] .meta-faq-code span {
  background: var(--selection-bg);
  color: var(--text);
}

@media (max-width: 640px) {
  .topbar {
    margin: -14px -14px 14px;
    padding: 14px;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --radius-control: 4px;
  --radius-card: 8px;
  --skeleton-base: #e5ece9;
  --skeleton-highlight: #f5f8f6;
}
:root[data-theme="dark"] {
  --skeleton-base: #35413b;
  --skeleton-highlight: #48564e;
}
.session-warning, .query-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}
.session-warning[hidden], .query-status[hidden] { display: none; }
.session-warning { border-color: var(--focus); }
.query-status { margin: var(--space-2) var(--space-3); border-radius: var(--radius-control); }
.skeleton { background: var(--surface-2); }
.skeleton-line {
  display: block;
  width: 68%;
  height: 1em;
  border-radius: var(--radius-control);
  background: var(--skeleton-base);
  animation: skeleton-pulse 1.4s ease-in-out infinite alternate;
}
.skeleton-line:nth-child(2) { width: 42%; height: 1.8em; }
.skeleton-line:nth-child(3) { width: 82%; }
@keyframes skeleton-pulse { to { background: var(--skeleton-highlight); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
}

.query-skeleton {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: var(--surface);
}
.query-skeleton .skeleton-line { width: 100%; height: 2.25em; }
.query-skeleton .skeleton-line:nth-child(2) { width: 100%; height: 2.25em; }
.query-skeleton .skeleton-line:nth-child(3) { width: 100%; height: 2.25em; }

.inbox-quick-filters { display: flex; gap: var(--space-2, 8px); padding: 0 18px 10px; }
.inbox-filter-toggle { min-height: 30px; border: 1px solid var(--line); border-radius: var(--radius-control, 6px); background: var(--surface); color: var(--text); padding: 4px 10px; cursor: pointer; }
.inbox-filter-toggle[aria-pressed="true"] { border-color: var(--brand); background: var(--surface-2); color: var(--text); font-weight: 700; }
.inbox-filter-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.conversation-unread-count, .inbox-nav-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 5px; background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: 700; }
.inbox-nav-unread[hidden] { display: none; }
#pushNotificationButton[hidden] { display: none; }
.inbox-nav-unread[hidden] { display: none; }

.dashboard-canvas-frame { position: relative; width: 100%; min-width: 0; height: 200px; }
.dashboard-canvas-evolution { height: 230px; }
.dashboard-canvas-conversion { height: 125px; }
.dashboard-canvas-frame canvas { display: block; width: 100%; height: 100%; }
.dashboard-chart-data { max-width: 100%; font-size: 0.8rem; }
.dashboard-chart-data summary { width: fit-content; padding: 4px 0; color: var(--text); cursor: pointer; text-decoration: underline; }
.dashboard-chart-data summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.dashboard-chart-data table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.dashboard-chart-data th, .dashboard-chart-data td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.dashboard-chart-data td { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .dashboard-canvas-evolution { height: 200px; } }