/* BSC ECOAI is a dark-only product surface. Keep this after shared Account styles. */
:root {
  color-scheme: dark;
  --bsc-navy: #26d391;
  --bsc-navy-hover: #55e4ad;
  --bsc-ocean: #71a7ff;
  --bsc-sky: #71a7ff;
  --bsc-page: #050506;
  --bsc-surface: #111114;
  --bsc-surface-subtle: #18181b;
  --bsc-text: #f6f6f7;
  --bsc-text-secondary: #b8b8c0;
  --bsc-text-muted: #8d8d96;
  --bsc-line: #2c2c31;
  --bsc-line-strong: #55555f;
  --bsc-focus: rgba(113, 167, 255, 0.4);
  --bsc-success: #3ddc97;
  --bsc-warning: #f7c948;
  --bsc-danger: #ff6b6b;
  --bsc-info: #71a7ff;
  --bsc-shadow-sm: none;
  --bsc-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  --primary: #26d391;
  --primary-hover: #55e4ad;
  --primary-active: #1db87c;
  --primary-light: rgba(38, 211, 145, 0.12);
  --secondary: #18181b;
  --secondary-hover: #242429;
  --accent: #26d391;
  --accent-hover: #55e4ad;
  --accent-light: rgba(38, 211, 145, 0.12);
  --accent-2: #71a7ff;
  --success-light: rgba(61, 220, 151, 0.12);
  --warning-light: rgba(247, 201, 72, 0.12);
  --danger-light: rgba(255, 107, 107, 0.12);
  --info-light: rgba(113, 167, 255, 0.12);
  --text-inverse: #050506;
  --border-light: #242429;
  --shadow-lg: 0 24px 72px rgba(0, 0, 0, 0.42);
  --glass-bg: rgba(17, 17, 20, 0.92);
  --glass-border: rgba(255, 255, 255, 0.1);
}

html,
body,
.app-frame,
.chat-main {
  background: var(--bsc-page);
  color: var(--bsc-text);
}

.header,
.topbar,
.bsc-header,
.chat-top {
  border-color: var(--bsc-line);
  background: rgba(5, 5, 6, 0.9);
}

.header-brand,
.brand,
.bsc-brand,
.sidebar .product {
  color: var(--bsc-text);
}

.card,
.panel,
.bsc-card,
.product-card,
.message,
.composer,
.canvas,
.console-preview,
.credit,
.glass-effect {
  border-color: var(--bsc-line);
  background: var(--bsc-surface);
  box-shadow: none;
}

.sidebar {
  border-color: var(--bsc-line);
  background: #0b0b0d;
}

.sidebar a.active,
.sidebar a:hover,
.sidebar .new-chat,
.message.user {
  border-color: rgba(38, 211, 145, 0.28);
  background: rgba(38, 211, 145, 0.1);
  color: var(--bsc-text);
}

.btn,
.button,
.open-button,
button[type="submit"],
.tool-row button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #04110c;
}

.btn:hover,
.button:hover,
.open-button:hover,
button[type="submit"]:hover {
  border-color: var(--primary-hover);
  background: var(--primary-hover);
  color: #04110c;
}

.btn-danger,
.btn.danger {
  border-color: var(--bsc-danger);
  background: rgba(255, 107, 107, 0.12);
  color: var(--bsc-danger);
}

.btn-danger:hover,
.btn.danger:hover {
  border-color: var(--bsc-danger);
  background: rgba(255, 107, 107, 0.2);
  color: #ff8c8c;
}

.btn-secondary,
.btn-outline,
.btn-ghost,
.button.ghost,
.tool-row button {
  border-color: var(--bsc-line-strong);
  background: var(--bsc-surface);
  color: var(--bsc-text-secondary);
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.button.ghost:hover,
.tool-row button:hover {
  border-color: var(--bsc-line-strong);
  background: var(--bsc-surface-subtle);
  color: var(--bsc-text);
}

.form-control,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color: var(--bsc-line-strong);
  background: #0b0b0d;
  color: var(--bsc-text);
}

.user-avatar,
.badge,
th {
  background: var(--bsc-surface-subtle);
}

.badge-primary,
.alert-info {
  border-color: rgba(113, 167, 255, 0.32);
  background: rgba(113, 167, 255, 0.1);
}

.badge-success,
.alert-success {
  border-color: rgba(61, 220, 151, 0.32);
  background: rgba(61, 220, 151, 0.1);
}

.badge-warning,
.alert-warning {
  border-color: rgba(247, 201, 72, 0.32);
  background: rgba(247, 201, 72, 0.1);
}

.badge-danger,
.alert-danger {
  border-color: rgba(255, 107, 107, 0.32);
  background: rgba(255, 107, 107, 0.1);
}

.alert,
table,
.code-block,
pre {
  background: #0b0b0d;
  color: var(--bsc-text);
}

.loading-shimmer {
  background: #18181b;
}

.loading-shimmer::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

header img[src*="bsc-ecolab-logo"] {
  filter: none;
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .chat-top {
    background: #050506;
  }
}