.dark {
  --color-scheme: dark;
  --menu-bg: #00000022;
  --light: white;
  --dark: black;
  /* new */
  --btn-sidebar-bg: #fafafae6;
  --btn-sidebar-fg: #18181b;
  --chat-message-bg: #27272a;
  --code-snippet-bg: #212121;
  --body-primary-bg: #18181b;
  --body-primary-fg: #fafafa;
  --primary-bg: #09090b;
  --primary-fg: #fafafa;
  --primary-main-bg: #27272a;
  --sidebar-bg: #27272a;
  --primary-border: #25252b;
  --primary-bg-hover: #25252b;
  --primary-fg-hover: #ffffff;
  --primary-border-hover: #25252b;
  --sidebar-icon: black;
  --icon-color: white;
  --btn-disabled-bg: #3a3a3a;
  --btn-disabled-fg: #b0b0b0;
  --btn-primary-bg: #fafafae6;
  --btn-primary-fg: #18181b;
  --btn-primary-border: #fafafae6;
  --btn-secondary-bg: #27272a;
  --btn-secondary-fg: #fafafa;
  --btn-secondary-border: #27272a;
  --btn-destructive-bg: #7f1d1de6;
  --btn-destructive-fg: #fafafa;
  --btn-destructive-border: #7f1d1de6;
  --btn-outline-bg: transparent;
  --btn-outline-fg: var(--btn-secondary-fg);
  --btn-outline-border: var(--btn-secondary-bg);
  --btn-ghost-bg: transparent;
  --btn-ghost-fg: var(--btn-secondary-fg);
  --btn-ghost-border: transparent;
  --btn-link-bg: transparent;
  --btn-link-fg: var(--btn-secondary-fg);
  --btn-link-border: transparent;
  --btn-icon-bg: transparent;
  --btn-icon-fg: var(--btn-secondary-fg);
  --btn-icon-border: #e4e4e7;
  --btn-loading-bg: var(--btn-primary-bg);
  --btn-loading-fg: var(--btn-primary-fg);
  --btn-loading-border: #e4e4e7;
  --btn-outline-bg-hover: var(--btn-secondary-bg);
  --overlay-bg: #020202;
  --alert-dialog-bg: #09090b;
  --alert-dialog-border: #25252b;
  --toggle-bg: #27272a;
  --toggle-fg: #09090b;
  --toggle-checked: #fafafa;
  --table-header: #17171a;
  --table-row-bg: #17171a;
  --table-footer: #17171a;
  --error: #ef4444;
  --success-bg: seagreen;
  --success-fg: #fff;
  --warning-bg: orange;
  /* rail + track */
  --scrollbar-track-bg: #1e1e1e;

  /* thumb */
  --scrollbar-thumb-bg: #555;
  --scrollbar-thumb-bg-hover: #888;

  /* overall scrollbar color (Firefox)
       – first value = thumb, second = track  */
  --scrollbar-color-thumb: #999;
  --scrollbar-color-track: var(--scrollbar-track-bg);

  /* geometry */
  --scrollbar-width: 8px;
  --scrollbar-thumb-radius: 4px;
  --scrollbar-thumb-border: 2px solid var(--scrollbar-track-bg);
}
.light {
  --icon-color: black;
  --sidebar-icon: #f8f9fa;
  --primary-main-bg: #fafafa;
  --btn-disabled-bg: #e0e0e0;
  --btn-disabled-fg: #9e9e9e;
  --btn-sidebar-bg: #e4e4e5;
  --btn-sidebar-fg: #18181b;
  --sidebar-bg: #f6f6f6;
  --code-snippet-bg: #fafafa;
  --chat-message-bg: #e9e9e99e;
  --scrollbar-track-bg: #f0f0f0;
  --scrollbar-thumb-bg: #c0c0c0;
  --scrollbar-thumb-bg-hover: #a0a0a0;
  --scrollbar-color-thumb: #666;
  --scrollbar-color-track: var(--scrollbar-track-bg);
  --scrollbar-width: 8px;
  --scrollbar-thumb-radius: 4px;
  --scrollbar-thumb-border: 2px solid var(--scrollbar-track-bg);
}

.dark .sbc-pills {
  --active-pill-color: #3c3c3c;
  --border-pill-color: #3c3c3c;
  --hover-pill-color: #3c3c3c66;
}
.dark .pill {
  --active-pill-color: #3c3c3c;
  --border-pill-color: #3c3c3c;
  --hover-pill-color: #3c3c3c66;
}
.dark .header-pill {
  --active-pill-color: #3c3c3c;
  --border-pill-color: #3c3c3c;
  --hover-pill-color: #3c3c3c66;
}
.dark .prompt-pill {
  --active-pill-color: #3c3c3c;
  --border-pill-color: #3c3c3c;
  --hover-pill-color: #3c3c3c66;
}

.light .sbc-pills {
  --active-pill-color: #e0e0e0;
  --border-pill-color: #b0b0b0;
  --hover-pill-color: #cccccc66;
}
.light .pill {
  --active-pill-color: #e0e0e0;
  --border-pill-color: #b0b0b0;
  --hover-pill-color: #cccccc66;
}
.light .header-pill {
  --active-pill-color: #e0e0e0;
  --border-pill-color: #b0b0b0;
  --hover-pill-color: #cccccc66;
}
.light .prompt-pill {
  --active-pill-color: #e0e0e0;
  --border-pill-color: #b0b0b0;
  --hover-pill-color: #cccccc66;
}
--------------------------------------------- */ body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg);
  border-radius: var(--scrollbar-thumb-radius);
  border: var(--scrollbar-thumb-border);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-bg-hover);
}

/* ---------------------------------------------
   Optional light-mode override (example)
   --------------------------------------------- */
/* Add/remove the data attribute however your theme switcher works */
:root[data-theme="light"] {
  --scrollbar-track-bg: #f0f0f0;
  --scrollbar-thumb-bg: #c0c0c0;
  --scrollbar-thumb-bg-hover: #a0a0a0;
  --scrollbar-color-thumb: #666;
  --scrollbar-color-track: var(--scrollbar-track-bg);
  --scrollbar-thumb-border: 2px solid var(--scrollbar-track-bg);
}