/*
 * Lissaro IA - fonte unica de cores.
 * Layouts consomem apenas estes tokens; claro/escuro e o tema nativo do
 * LibreChat sao atualizados a partir do mesmo estado em lissaro-ui.js.
 */
:root,
html.lissaro-dark {
  color-scheme: dark;

  --lissaro-browser-color: #050308;
  --lissaro-color-accent: #8b3dff;
  --lissaro-color-accent-soft: #b86cff;
  --lissaro-color-bg: #050308;
  --lissaro-color-bg-soft: #09060f;
  --lissaro-color-surface: #100a19;
  --lissaro-color-surface-elevated: #171020;
  --lissaro-color-hover: #21152f;
  --lissaro-color-text: #f8f4ff;
  --lissaro-color-text-muted: #a99db8;
  --lissaro-color-border: rgba(184, 108, 255, .23);
  --lissaro-color-border-strong: rgba(184, 108, 255, .48);
  --lissaro-color-shadow: rgba(0, 0, 0, .48);
  --lissaro-color-danger: #ff8aa6;
  --lissaro-color-danger-bg: rgba(190, 24, 93, .16);
  --lissaro-gradient: linear-gradient(135deg, #6d28d9, #a855f7);

  /* Compatibilidade com os componentes Lissaro existentes. */
  --lissaro-purple: var(--lissaro-color-accent);
  --lissaro-violet: var(--lissaro-color-accent-soft);
  --lissaro-bg: var(--lissaro-color-bg);
  --lissaro-bg-soft: var(--lissaro-color-bg-soft);
  --lissaro-surface: var(--lissaro-color-surface);
  --lissaro-surface-2: var(--lissaro-color-surface-elevated);
  --lissaro-hover: var(--lissaro-color-hover);
  --lissaro-text: var(--lissaro-color-text);
  --lissaro-muted: var(--lissaro-color-text-muted);
  --lissaro-border: var(--lissaro-color-border);
  --lissaro-strong: var(--lissaro-color-border-strong);
  --lissaro-shadow: var(--lissaro-color-shadow);

  /* Tokens nativos do LibreChat (valores RGB, usados por rgb(var(...))). */
  --brand-purple: 139 61 255;
  --presentation: 5 3 8;
  --text-primary: 248 244 255;
  --text-secondary: 199 186 214;
  --text-secondary-alt: 169 157 184;
  --text-tertiary: 169 157 184;
  --text-muted: 169 157 184;
  --accent-primary: 139 61 255;
  --accent-primary-hover: 168 85 247;
  --ring-primary: 184 108 255;
  --header-primary: 16 10 25;
  --header-hover: 33 21 47;
  --header-button-hover: 33 21 47;
  --surface-active: 47 28 67;
  --surface-active-alt: 62 35 88;
  --surface-hover: 33 21 47;
  --surface-hover-alt: 47 28 67;
  --surface-composer-hover: 33 21 47;
  --surface-primary: 5 3 8;
  --surface-primary-alt: 9 6 15;
  --surface-primary-contrast: 16 10 25;
  --surface-secondary: 16 10 25;
  --surface-secondary-alt: 23 16 32;
  --surface-tertiary: 23 16 32;
  --surface-tertiary-alt: 16 10 25;
  --surface-dialog: 16 10 25;
  --surface-overlay: 0 0 0;
  --surface-chat: 16 10 25;
  --surface-code: 9 6 15;
  --border-light: 184 108 255;
  --border-light-alpha: .23;
  --border-medium-alt: 184 108 255;
  --border-medium: 184 108 255;
  --border-medium-alpha: .34;
  --border-heavy: 184 108 255;
  --border-heavy-alpha: .48;
  --border-xheavy: 184 108 255;
  --border-xheavy-alpha: .64;
}

html.lissaro-light {
  color-scheme: light;

  --lissaro-browser-color: #f8f5fc;
  --lissaro-color-accent: #7e22ce;
  --lissaro-color-accent-soft: #9333ea;
  --lissaro-color-bg: #f8f5fc;
  --lissaro-color-bg-soft: #f1eafa;
  --lissaro-color-surface: #ffffff;
  --lissaro-color-surface-elevated: #f4edfc;
  --lissaro-color-hover: #eadffd;
  --lissaro-color-text: #20162b;
  --lissaro-color-text-muted: #6d6079;
  --lissaro-color-border: rgba(111, 45, 184, .18);
  --lissaro-color-border-strong: rgba(126, 34, 206, .42);
  --lissaro-color-shadow: rgba(61, 34, 83, .16);
  --lissaro-color-danger: #be123c;
  --lissaro-color-danger-bg: rgba(190, 18, 60, .08);
  --lissaro-gradient: linear-gradient(135deg, #6d28d9, #9333ea);

  --brand-purple: 126 34 206;
  --presentation: 248 245 252;
  --text-primary: 32 22 43;
  --text-secondary: 82 68 96;
  --text-secondary-alt: 109 96 121;
  --text-tertiary: 109 96 121;
  --text-muted: 109 96 121;
  --accent-primary: 126 34 206;
  --accent-primary-hover: 109 40 217;
  --ring-primary: 126 34 206;
  --header-primary: 255 255 255;
  --header-hover: 244 237 252;
  --header-button-hover: 244 237 252;
  --surface-active: 234 223 253;
  --surface-active-alt: 224 210 247;
  --surface-hover: 234 223 253;
  --surface-hover-alt: 224 210 247;
  --surface-composer-hover: 234 223 253;
  --surface-primary: 248 245 252;
  --surface-primary-alt: 255 255 255;
  --surface-primary-contrast: 244 237 252;
  --surface-secondary: 255 255 255;
  --surface-secondary-alt: 244 237 252;
  --surface-tertiary: 244 237 252;
  --surface-tertiary-alt: 255 255 255;
  --surface-dialog: 255 255 255;
  --surface-overlay: 32 22 43;
  --surface-chat: 255 255 255;
  --surface-code: 244 237 252;
  --border-light: 111 45 184;
  --border-light-alpha: .18;
  --border-medium-alt: 111 45 184;
  --border-medium: 111 45 184;
  --border-medium-alpha: .28;
  --border-heavy: 111 45 184;
  --border-heavy-alpha: .42;
  --border-xheavy: 111 45 184;
  --border-xheavy-alpha: .58;
}

/* Menus, popovers e paineis devem sempre usar o mesmo par fundo/texto. */
html:is(.lissaro-dark, .lissaro-light) :is(
  [role="menu"],
  [role="listbox"],
  [role="dialog"],
  [data-radix-menu-content],
  [data-radix-popover-content]
) {
  background-color: rgb(var(--surface-dialog)) !important;
  color: rgb(var(--text-primary)) !important;
  border-color: rgb(var(--border-light) / var(--border-light-alpha)) !important;
}

html:is(.lissaro-dark, .lissaro-light) :is(
  [role="menuitem"],
  [role="option"],
  [role="dialog"] button,
  [role="dialog"] label
) {
  color: rgb(var(--text-primary)) !important;
}

html:is(.lissaro-dark, .lissaro-light) :is([role="menuitem"], [role="option"]):is(:hover, :focus, [data-highlighted]) {
  background-color: rgb(var(--surface-hover)) !important;
}

html:is(.lissaro-dark, .lissaro-light) :is(input, textarea, select) {
  color: rgb(var(--text-primary));
  caret-color: var(--lissaro-color-accent);
}