/* Shared palette for account portals and the messenger/calling settings.
   Keep these aliases on html: portals and lazy-loaded panels must use the same
   appearance as the workspace. Component layout and channel brand colours stay
   in their own stylesheets. The body qualifier also beats legacy lazy CSS. */
:root {
  --settings-surface: var(--slate-card, var(--dk-surface, #fff));
  --settings-solid: var(--slate-card-solid, var(--dk-surface-solid, #fff));
  --settings-field: var(--slate-field, var(--dk-input, #f7faf9));
  --settings-ink: var(--slate-ink, var(--dk-text-primary, #243247));
  --settings-muted: var(--slate-muted, var(--dk-text-muted, #607080));
  --settings-edge: var(--slate-edge, var(--dk-border, #dce5e9));
  --settings-hover: var(--dk-hover, #edf5f1);
  --settings-selected: var(--dk-selected, #e9f6ef);
  --settings-accent: var(--slate-link, var(--dk-link, #146c55));
  --settings-positive: var(--slate-positive, var(--dk-success, #14765e));
  --settings-warning: var(--slate-warning, var(--dk-warning, #8a5c0d));
  --settings-danger: var(--slate-negative, var(--dk-error, #b53434));
  --settings-positive-fill: color-mix(in srgb, var(--settings-positive) 10%, var(--settings-solid));
  --settings-danger-fill: color-mix(in srgb, var(--settings-danger) 10%, var(--settings-solid));
  --settings-action: var(--violet-action, #087f5b);
  --settings-action-hover: var(--violet-action-hover, #066649);
  --settings-action-ink: var(--violet-action-ink, #fff);
  --settings-dialog: var(--crm-dialog-surface, var(--settings-solid));
  --settings-overlay: var(--dk-overlay, rgb(15 23 42 / 45%));
}

/* Account menu, including its body portal and the sign-in page entry. */
html:root body .account-switcher-trigger {
  background: var(--settings-field); color: var(--settings-ink); border-color: var(--settings-edge);
}
html:root body .account-switcher-trigger:hover { background: var(--settings-hover); }
html:root body .account-switcher-backdrop { background: var(--settings-overlay); }
html:root body .account-switcher-dialog {
  background: var(--settings-dialog); color: var(--settings-ink); border: 1px solid var(--settings-edge);
}
html:root body :is(.account-switcher-dialog p, .account-switcher-label small, .account-switcher-dialog header button, .account-switcher-remove) { color: var(--settings-muted); }
html:root body .account-switcher-row { background: var(--settings-field); border-color: var(--settings-edge); }
html:root body .account-switcher-row[data-active=true] { background: var(--settings-selected); border-color: var(--settings-positive); }
html:root body .account-switcher-choice:not(:disabled):hover { background: var(--settings-hover); border-radius: 10px; }
html:root body .account-switcher-avatar { background: var(--settings-selected); color: var(--settings-positive); }
html:root body .account-switcher-label em { color: var(--settings-positive); }
html:root body .account-switcher-remove:hover { color: var(--settings-danger); background: var(--settings-danger-fill); }
html:root body .account-switcher-dialog header button:hover { color: var(--settings-ink); background: var(--settings-hover); }
html:root body .account-switcher-add { background: var(--settings-action); color: var(--settings-action-ink); }
html:root body .account-switcher-add:hover:enabled { background: var(--settings-action-hover); }
html:root body .account-switcher-error { color: var(--settings-danger) !important; }
html:root body .account-switcher-dialog button:disabled { opacity: .6; }
html:root body .account-switcher-dialog .account-switcher-choice:disabled { opacity: 1; }
html:root body :is(.account-switcher-dialog button, .account-switcher-trigger):focus-visible { outline-color: var(--settings-accent); }

/* WatsyApp channel catalogue, creation form and connection details. */
html:root body .wc-connect {
  --wc-ink: var(--settings-ink); --wc-muted: var(--settings-muted);
  --wc-border: var(--settings-edge); --wc-accent: var(--settings-action);
  background: var(--settings-surface); color: var(--settings-ink); border-color: var(--settings-edge);
}
html:root body :is(.wc-intro, .wc-workspace, .wc-empty) { background: var(--settings-field); border-color: var(--settings-edge); }
html:root body :is(.wc-service, .wc-channel, .wc-setup, .wc-icon-button, .wc-workspace button) {
  background: var(--settings-solid); border-color: var(--settings-edge); color: var(--settings-ink);
}
html:root body :is(.wc-service:hover:enabled, .wc-channel:hover:enabled, .wc-icon-button:hover:enabled, .wc-workspace button:hover:enabled) { background: var(--settings-hover); border-color: var(--settings-accent); }
html:root body .wc-channel.is-selected { background: var(--settings-selected); border-color: var(--settings-positive); }
html:root body .wc-connect :is(.wc-section-head h3, .wc-empty strong) { color: var(--settings-ink); }
html:root body .wc-connect :is(.wc-trust, .wc-section-head>span, .wc-empty, .wc-service>svg, .wc-channel>svg, .wc-details summary, .wc-connection-footer button) { color: var(--settings-muted); }
html:root body :is(.wc-eyebrow, .wc-trust svg, .wc-status.is-active) { color: var(--settings-positive); }
html:root body .wc-status { color: var(--settings-warning); }
html:root body .wc-free { color: var(--settings-positive); background: var(--settings-positive-fill); border-color: var(--settings-edge); }
html:root body .wc-count { background: var(--settings-field); color: var(--settings-muted); }
html:root body .wc-setup input { background: var(--settings-field); color: var(--settings-ink); border-color: var(--settings-edge); }
html:root body .wc-setup input::placeholder { color: var(--settings-muted); opacity: 1; }
html:root body .wc-primary { background: var(--settings-action); color: var(--settings-action-ink); }
html:root body .wc-primary:hover:enabled { background: var(--settings-action-hover); }
html:root body :is(.wc-connected, .wc-alert) { color: var(--settings-positive); background: var(--settings-positive-fill); }
html:root body .wc-connected p { color: var(--settings-muted); }
html:root body .wc-error { color: var(--settings-danger); background: var(--settings-danger-fill); }
html:root body .wc-connection-footer { border-color: var(--settings-edge); }
html:root body .wc-connect :is(button, input, summary):focus-visible { outline-color: var(--settings-accent); }
/* The QR quiet zone and messenger logos deliberately retain their own colours. */
html:root body .wc-qr img { background: #fff; border-color: #fff; }

/* Calling preferences are also displayed inside the integration screen. */
html:root body section[aria-label="Звонки из чатов"] { background: var(--settings-surface) !important; border-color: var(--settings-edge) !important; color: var(--settings-ink); }
html:root body section[aria-label="Звонки из чатов"] :is(select, button) { background: var(--settings-field); color: var(--settings-ink); border-color: var(--settings-edge); }
html:root body section[aria-label="Звонки из чатов"] p { color: var(--settings-muted); }
html:root body :is(.chat-call-center, .chat-voice-panel, .chat-voice-inbound, .chat-voice-mini, .chat-voice-receive-status) {
  background: var(--settings-dialog); color: var(--settings-ink); border-color: var(--settings-edge);
}
html:root body .chat-call-center::backdrop { background: var(--settings-overlay); }
html:root body :is(.chat-call-center, .chat-voice-panel, .chat-voice-inbound, .chat-voice-mini) :is(button, summary, select):focus-visible { outline-color: var(--settings-accent); }
html:root body :is(.chat-call-reception p, .chat-call-mobile p, .desktop-call-settings p, .desktop-call-settings .desktop-call-note, .chat-call-default, .wv-engine, .chat-voice-heading>div>span, .chat-voice-heading button, .chat-voice-recipient span, .chat-voice-agent>div>span, .chat-voice-permission, .chat-voice-permission button, .chat-voice-footnote, .chat-voice-settings, .chat-voice-muted, .chat-voice-description, .chat-voice-options summary>span:nth-child(2), .chat-voice-mini-person span, .chat-app-ai-card span:not(.chat-app-ai-symbol)) { color: var(--settings-muted); }
html:root body :is(.chat-call-mobile, .chat-call-routing, .chat-voice-recipient, .chat-voice-settings, .chat-voice-options, .chat-voice-inbound-history>div, .chat-app-reception) { border-color: var(--settings-edge); }
html:root body :is(.desktop-call-settings, .chat-app-ai-card) { background: var(--settings-field); border-color: var(--settings-edge); }
html:root body :is(.chat-call-status, .chat-voice-note, .chat-voice-secondary, .chat-voice-duration, .chat-voice-mini-action, .chat-voice-icon, .chat-app-ai-symbol, .chat-call-links button) { background: var(--settings-positive-fill); color: var(--settings-positive); }
html:root body :is(.chat-call-center, .chat-voice-panel, .chat-voice-inbound) .chat-voice-heading .chat-voice-icon { background: var(--settings-positive-fill); color: var(--settings-positive); }
html:root body :is(.desktop-call-settings .desktop-call-ready, .chat-call-links a, .chat-voice-agent, .chat-voice-progress, .chat-app-ai-card>button) { color: var(--settings-positive); }
html:root body :is(.chat-voice-agent>div, .chat-voice-mini-person, .chat-voice-device) { color: var(--settings-ink); }
html:root body :is(.wv-engine select, .chat-voice-device select) { color: var(--settings-ink); background: var(--settings-field); border-color: var(--settings-edge); }
html:root body :is(.wv-engine select, .chat-voice-device select, .wv-phone select) option { color: var(--settings-ink); background: var(--settings-solid); }
html:root body .chat-voice-modes { background: var(--settings-field); }
html:root body .chat-voice-modes button { color: var(--settings-muted); }
html:root body .chat-voice-modes button[aria-pressed=true] { color: var(--settings-ink); background: var(--settings-selected); border-color: var(--settings-accent); }
html:root body .chat-voice-start { background: var(--settings-action); color: var(--settings-action-ink); }
html:root body .chat-voice-start:hover:enabled { background: var(--settings-action-hover); }
html:root body :is(.chat-voice-error, .chat-voice-stop, .chat-voice-mini-action.is-end, .chat-voice-mini-action[aria-pressed=true], .chat-voice-mute[aria-pressed=true]) { color: var(--settings-danger); background: var(--settings-danger-fill); }
html:root body .chat-voice-heading button:hover { background: var(--settings-hover); color: var(--settings-ink); }
html:root body .chat-call-switch::before { background: var(--settings-muted); }
html:root body .chat-call-switch[aria-checked=true]::before { background: var(--settings-action); }
html:root body .chat-voice-receive-status { color: var(--settings-positive); }
html:root body .chat-voice-receive-status.is-offline { color: var(--settings-warning); }

/* WatsyVoice service tabs and setup forms. */
html:root body .wv-phone { color: var(--settings-ink); }
html:root body :is(.wv-card, .wv-catalog .wv-card) { background: var(--settings-surface); border-color: var(--settings-edge); }
html:root body .wv-phone :is(button, select, input:not([type=checkbox]), textarea) { background: var(--settings-field); color: var(--settings-ink); border-color: var(--settings-edge); }
html:root body .wv-phone :is(button, select, input, textarea):focus-visible { outline-color: var(--settings-accent); }
html:root body .wv-phone button:hover:enabled { background: var(--settings-hover); }
html:root body :is(.wv-phone header p, .wv-small, .wv-call-state p, .wv-call-duration, .wv-breadcrumb, .wv-service-hero p, .wv-setup-grid small, .wv-knowledge-stats span, .wv-service-footer) { color: var(--settings-muted); }
html:root body :is(.wv-service a, .wv-catalog a, .wv-eyebrow, .wv-setup-grid span, .wv-knowledge-stats strong) { color: var(--settings-accent); }
html:root body :is(.wv-badge, .wv-call-avatar, .wv-service-notice) { background: var(--settings-positive-fill); color: var(--settings-positive); }
html:root body :is(.wv-notice, .wv-call-result, .wv-meter) { background: var(--settings-field); }
html:root body :is(.wv-tabs, .wv-knowledge-stats, .wv-call-scenarios) { border-color: var(--settings-edge); }
html:root body .wv-phone .wv-tabs button { background: transparent; color: var(--settings-muted); }
html:root body .wv-phone .wv-tabs button[aria-current=page] { background: var(--settings-selected); color: var(--settings-accent); }
html:root body .wv-phone :is(.wv-primary, .wv-call-accept) { background: var(--settings-action); border-color: var(--settings-action); color: var(--settings-action-ink); }
html:root body .wv-phone :is(.wv-primary, .wv-call-accept):hover:enabled { background: var(--settings-action-hover); }
html:root body :is(.wv-service-error, .wv-phone .wv-call-decline) { background: var(--settings-danger-fill); color: var(--settings-danger); border-color: var(--settings-danger); }
html:root body .wv-phone .wv-call-hangup { background: #b63832; color: #fff; border-color: #b63832; }
html:root body .wv-phone .wv-call-buttons button:disabled { background: var(--settings-field); color: var(--settings-muted); border-color: var(--settings-edge); }

@media (prefers-reduced-transparency: reduce) {
  html:root body :is(.account-switcher-dialog, .chat-call-center, .chat-voice-panel, .chat-voice-inbound, .chat-voice-mini, .wc-connect, .wv-card) { background: var(--settings-solid); }
  html:root body .account-switcher-backdrop { backdrop-filter: none; }
}
@media (forced-colors: active) {
  :root { --settings-surface: Canvas; --settings-solid: Canvas; --settings-dialog: Canvas; --settings-field: Canvas; --settings-ink: CanvasText; --settings-muted: CanvasText; --settings-edge: ButtonText; --settings-accent: LinkText; --settings-positive: LinkText; --settings-warning: CanvasText; --settings-danger: CanvasText; --settings-positive-fill: Canvas; --settings-danger-fill: Canvas; --settings-action: Highlight; --settings-action-hover: Highlight; --settings-action-ink: HighlightText; --settings-hover: Canvas; --settings-selected: Canvas; }
}