/* Shared finishing layer. Palette roles follow the VS Code workbench approach:
   https://code.visualstudio.com/api/references/theme-color */
html.theme-dark { color-scheme: dark; }
html.theme-light { color-scheme: light; }
:root { --nineai-brand-accent: #23a9f2; --nineai-brand-ink: #111417; }
html.theme-dark .nineai-wordmark { color: #e7ebef; }
html.theme-dark .public-nav .nineai-wordmark,
html.theme-dark .public-shell footer .nineai-wordmark { color: #e7ebef; }
.ui-theme-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 8px;
  flex-shrink: 0; border: 1px solid var(--line, var(--cabinet-border)); border-radius: 9px;
  color: var(--text, var(--cabinet-text)); background: var(--surface-solid, var(--cabinet-layer-card));
  cursor: pointer; box-shadow: none;
}
.ui-theme-toggle:hover { background: var(--surface-soft, var(--cabinet-hover)); border-color: var(--line-strong, var(--cabinet-border-strong)); }
.ui-theme-toggle svg { width: 18px; height: 18px; stroke-width: 1.6; }
.ui-theme-toggle__sun, html.theme-dark .ui-theme-toggle__moon { display: none; }
html.theme-dark .ui-theme-toggle__sun { display: block; }
.ui-theme-toggle:focus-visible { outline: 2px solid #23a9f2; outline-offset: 3px; }
body.app-shell .ui-theme-toggle { color: var(--cabinet-text); background: var(--cabinet-layer-card); border-color: var(--cabinet-border); }
.sidebar-theme-control { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--cabinet-muted); font-size: 12px; }
html.sidebar-collapsed .sidebar-theme-control { justify-content: center; }
html.sidebar-collapsed .sidebar-theme-control > span { display: none; }
.cabinet-theme-settings { margin-bottom: 18px; padding: 20px; }
.cabinet-theme-settings h2 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.cabinet-theme-settings p { color: var(--cabinet-muted); font-size: 13px; margin: 0 0 14px; }
.theme-choices { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--cabinet-border); border-radius: 10px; background: var(--cabinet-layer-section); }
.theme-choices button { min-height: 36px; padding: 6px 14px; color: var(--cabinet-muted); border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.theme-choices button[aria-pressed="true"] { color: var(--cabinet-primary); border-color: var(--cabinet-primary-border); background: var(--cabinet-layer-card); }
.theme-choices button:focus-visible { outline: 2px solid var(--cabinet-primary); outline-offset: 2px; }

/* Cyan fill, a dark edge and a distinct outer keyboard-focus ring. */
.button--primary,
.landing-body .workflow-cta--spotlight .button,
.automation-cta .button, .pricing-partner-note__action {
  background: var(--button-bg); color: #ffffff; border: 2px solid #111315;
  border-radius: 10px; box-shadow: 0 0 0 1px #247b9d; font-weight: 650;
}
.button--primary:hover,
.landing-body .workflow-cta--spotlight .button:hover,
.automation-cta .button:hover, .pricing-partner-note__action:hover {
  background: var(--button-hover); color: #ffffff; border-color: #111315;
  box-shadow: 0 0 0 1px #247b9d; transform: none;
}
.button--primary:focus-visible,
.landing-body .workflow-cta--spotlight .button:focus-visible,
.automation-cta .button:focus-visible, .pricing-partner-note__action:focus-visible {
  outline: 2px solid #23a9f2; outline-offset: 3px;
}
body.app-shell #app-main :is(.btn-primary, .ui-btn-primary, .btn-emerald, .btn-dark, .btn-primary-muted),
body.app-shell .side-action {
  background: var(--cabinet-button-bg) !important; color: #ffffff !important;
  border: 2px solid #111315 !important; border-radius: 10px !important;
  box-shadow: 0 0 0 1px #247b9d !important;
}
body.app-shell #app-main :is(.btn-primary, .ui-btn-primary, .btn-emerald, .btn-dark, .btn-primary-muted):hover,
body.app-shell .side-action:hover { background: var(--cabinet-button-hover) !important; }
body.app-shell #app-main :is(.btn-primary, .ui-btn-primary, .btn-emerald, .btn-dark, .btn-primary-muted):focus-visible {
  outline: 2px solid #23a9f2; outline-offset: 3px;
}
body.app-shell #app-main .stepper .step.is-active .ico {
  background: var(--cabinet-button-bg); color: #ffffff;
}
:where(.button--secondary, .auth-input-wrap input, .docs-search, .seo-contact-form input, .seo-contact-form textarea) { border-radius: 8px; }
.button--secondary { border-color: var(--line-strong); }
.auth-input-wrap input { color: var(--text); border-color: var(--line-strong); }
.auth-input-wrap input::placeholder { color: var(--text-faint); }
.product-screen__bar { background: var(--bg-elevated); color: var(--text-faint); border-bottom-color: var(--line); }
.home-product .product-screen { background: var(--surface-solid); box-shadow: var(--shadow-soft); }
.home-product figcaption { color: var(--text-soft); }
.home-product figcaption span { color: var(--text-faint); }
.product-showcase__stage { background: var(--bg-elevated); }
.product-showcase__mobile-note, .product-showcase__mobile-note > span,
.product-showcase__mobile-note p { color: var(--text-soft); }
.product-showcase figcaption, .product-setup-preview figcaption { color: var(--text-soft); }
.product-showcase figcaption span, .product-setup-preview figcaption span { color: var(--text-faint); }
@media (max-width: 760px) { .ui-theme-toggle { width: 40px; height: 40px; } }

/* Keep white text legible in blue chat bubbles in both themes. */
body.app-shell #app-main .lc-workspace .lc-msg--me .lc-bubble { background: var(--cabinet-button-bg); border-color: var(--cabinet-button-bg); color: #ffffff; }
body.app-shell #app-main .lc-workspace .lc-bubble__meta { color: var(--cabinet-muted); opacity: 1; }
body.app-shell #app-main .lc-workspace .lc-msg--me .lc-bubble__meta { color: #ffffff; }
body.app-shell #app-main .lc-workspace .lc-modeBtn { color: var(--cabinet-muted); }
body.app-shell #app-main .lc-workspace .lc-modeBtn.is-active { color: var(--cabinet-primary); background: var(--cabinet-primary-soft); box-shadow: inset 0 0 0 1px var(--cabinet-primary-border); }
@media (max-width: 900px) {
  body.app-shell #app-main .lc-workspace .lc-chat__sub { max-width: 100%; }
  body.app-shell #app-main .lc-workspace .lc-iconBtn--label { width: 34px; padding: 0; }
  body.app-shell #app-main .lc-workspace .lc-iconBtn--label > span { display: none; }
  body.app-shell #app-main .lc-workspace .lc-messageCopy { opacity: 1; }
  body.app-shell #app-main .lc-workspace .lc-msg--me .lc-messageCopy { color: #ffffff; }
}