/*
 * Fomin Clinic-inspired theme for LibreChat.
 * Uses LibreChat semantic tokens so the extension survives UI updates better
 * than selectors tied to generated component markup.
 */

html {
  --theme-font-family: "Avenir Next", Manrope, Montserrat, "Segoe UI", sans-serif !important;
  --theme-display-font-family: "Avenir Next", Manrope, Montserrat, "Segoe UI", sans-serif !important;
  --theme-dialog-title-font-family: var(--theme-display-font-family) !important;
  --theme-control-radius: 0.9rem !important;
  --theme-round-control-radius: 9999px !important;
  --theme-surface-radius: 1.25rem !important;
  --theme-large-surface-radius: 1.75rem !important;
  --theme-menu-radius: 1rem !important;
  --theme-popover-radius: 1.25rem !important;
  --theme-menu-panel-radius: 1rem !important;
  --theme-compact-panel-radius: 0.8rem !important;
  --theme-auth-control-radius: 9999px !important;
  --theme-auth-action-radius: 9999px !important;
  --theme-checkbox-radius: 0.4rem !important;
  --theme-dialog-stroke: 1px !important;
  --theme-dialog-padding-x: 1.75rem !important;
  --theme-dialog-title-font-weight: 700 !important;
  --theme-control-font-weight: 600 !important;
  --theme-button-padding-x: 1.25rem !important;
  --theme-elevation-surface:
    0 22px 60px rgb(108 42 75 / 0.12), 0 4px 16px rgb(108 42 75 / 0.08) !important;

  font-family: var(--theme-font-family);
  font-synthesis: none;
}

html:not(.dark) {
  color-scheme: light;

  --accent-primary: 214 0 109 !important;
  --accent-primary-hover: 235 0 120 !important;
  --ring-primary: 214 0 109 !important;
  --focus-control: 214 0 109 !important;
  --focus-outline: 214 0 109 !important;
  --link: 201 0 102 !important;
  --link-hover: 235 0 120 !important;
  --link-inline: 201 0 102 !important;
  --link-prose: 201 0 102 !important;
  --link-visited: 147 71 108 !important;

  --page-canvas: 249 244 244 !important;
  --presentation: 249 244 244 !important;
  --header-primary: 255 252 252 !important;
  --header-hover: 251 230 240 !important;
  --header-button-hover: 251 230 240 !important;
  --surface-active: 244 214 230 !important;
  --surface-active-alt: 251 230 240 !important;
  --surface-hover: 251 230 240 !important;
  --surface-hover-alt: 244 214 230 !important;
  --surface-pressed: 238 198 219 !important;
  --surface-composer-hover: 253 246 249 !important;
  --surface-primary: 255 252 252 !important;
  --surface-primary-alt: 249 244 244 !important;
  --surface-primary-contrast: 251 230 240 !important;
  --surface-secondary: 255 255 255 !important;
  --surface-secondary-alt: 247 240 239 !important;
  --surface-tertiary: 251 230 240 !important;
  --surface-tertiary-alt: 255 255 255 !important;
  --surface-dialog: 255 255 255 !important;
  --surface-submit: 214 0 109 !important;
  --surface-submit-hover: 235 0 120 !important;
  --surface-chat: 255 255 255 !important;
  --surface-code: 247 240 239 !important;
  --surface-code-body: 255 252 252 !important;
  --surface-code-inline: 251 230 240 !important;
  --surface-canvas: 249 244 244 !important;
  --surface-user-message: 251 230 240 !important;
  --surface-card: 255 255 255 !important;
  --surface-card-hover: 253 246 249 !important;
  --surface-nav-hover: 251 230 240 !important;
  --surface-nav-selected: 244 214 230 !important;
  --surface-tab-selected: 251 230 240 !important;
  --surface-menu: 255 255 255 !important;
  --surface-popover: 255 255 255 !important;
  --surface-composer: 255 255 255 !important;
  --surface-search: 247 240 239 !important;
  --surface-sidebar: 249 244 244 !important;
  --surface-tooltip: 255 255 255 !important;
  --surface-inverted: 33 34 35 !important;
  --surface-inverted-hover: 61 57 59 !important;

  --text-primary: 33 34 35 !important;
  --text-secondary: 79 69 74 !important;
  --text-secondary-alt: 112 93 103 !important;
  --text-tertiary: 147 117 131 !important;
  --text-muted: 126 105 115 !important;
  --text-tooltip: 33 34 35 !important;
  --text-inverted: 255 255 255 !important;
  --text-on-status: 255 255 255 !important;

  --border-light: 238 225 231 !important;
  --border-medium-alt: 228 208 218 !important;
  --border-medium: 218 191 205 !important;
  --border-heavy: 190 154 172 !important;
  --border-xheavy: 147 117 131 !important;
  --border-control: 232 216 224 !important;
  --border-field-focus: 214 0 109 !important;
  --border-menu: 238 225 231 !important;
  --drawer-edge: 228 208 218 !important;
  --field-fill: 255 255 255 !important;
  --field-text: 33 34 35 !important;
  --checkbox-fill: 255 255 255 !important;
  --select-fill: 255 255 255 !important;
  --select-edge: 190 154 172 !important;
  --scrollbar-thumb: 147 117 131 !important;
  --scrollbar-thumb-alpha: 0.35 !important;

  --status-success: 51 116 88 !important;
  --status-success-subtle: 221 231 202 !important;
  --status-success-border: 173 196 151 !important;
  --status-info: 70 111 151 !important;
  --status-info-subtle: 226 234 246 !important;
  --status-info-border: 176 199 226 !important;
  --status-warning: 155 92 38 !important;
  --status-warning-subtle: 252 235 213 !important;
  --status-warning-border: 234 196 153 !important;
}

html.dark {
  color-scheme: dark;

  --accent-primary: 255 81 161 !important;
  --accent-primary-hover: 255 122 184 !important;
  --ring-primary: 255 81 161 !important;
  --focus-control: 255 122 184 !important;
  --focus-outline: 255 122 184 !important;
  --link: 255 122 184 !important;
  --link-hover: 255 163 205 !important;
  --link-inline: 255 122 184 !important;
  --link-prose: 255 163 205 !important;
  --link-visited: 223 147 184 !important;

  --page-canvas: 28 23 26 !important;
  --presentation: 28 23 26 !important;
  --header-primary: 35 28 32 !important;
  --header-hover: 68 43 55 !important;
  --header-button-hover: 68 43 55 !important;
  --surface-active: 91 47 69 !important;
  --surface-active-alt: 76 42 59 !important;
  --surface-hover: 68 43 55 !important;
  --surface-hover-alt: 91 47 69 !important;
  --surface-pressed: 109 48 78 !important;
  --surface-composer-hover: 60 43 51 !important;
  --surface-primary: 35 28 32 !important;
  --surface-primary-alt: 28 23 26 !important;
  --surface-primary-contrast: 68 43 55 !important;
  --surface-secondary: 46 36 41 !important;
  --surface-secondary-alt: 58 42 50 !important;
  --surface-tertiary: 76 42 59 !important;
  --surface-tertiary-alt: 58 42 50 !important;
  --surface-dialog: 42 31 37 !important;
  --surface-submit: 214 0 109 !important;
  --surface-submit-hover: 235 0 120 !important;
  --surface-chat: 46 36 41 !important;
  --surface-code: 31 25 29 !important;
  --surface-code-body: 28 23 26 !important;
  --surface-code-inline: 76 42 59 !important;
  --surface-canvas: 28 23 26 !important;
  --surface-user-message: 91 47 69 !important;
  --surface-card: 46 36 41 !important;
  --surface-card-hover: 58 42 50 !important;
  --surface-nav-hover: 68 43 55 !important;
  --surface-nav-selected: 91 47 69 !important;
  --surface-tab-selected: 76 42 59 !important;
  --surface-menu: 42 31 37 !important;
  --surface-popover: 46 36 41 !important;
  --surface-composer: 46 36 41 !important;
  --surface-search: 58 42 50 !important;
  --surface-sidebar: 31 25 29 !important;
  --surface-tooltip: 58 42 50 !important;
  --surface-inverted: 255 248 251 !important;
  --surface-inverted-hover: 246 226 236 !important;

  --text-primary: 255 248 251 !important;
  --text-secondary: 226 203 214 !important;
  --text-secondary-alt: 204 172 188 !important;
  --text-tertiary: 185 154 170 !important;
  --text-muted: 185 154 170 !important;
  --text-tooltip: 255 248 251 !important;
  --text-inverted: 33 27 30 !important;
  --text-on-status: 255 255 255 !important;

  --border-light: 73 55 64 !important;
  --border-medium-alt: 91 67 79 !important;
  --border-medium: 109 77 93 !important;
  --border-heavy: 151 105 127 !important;
  --border-xheavy: 185 154 170 !important;
  --border-control: 73 55 64 !important;
  --border-field-focus: 255 81 161 !important;
  --border-menu: 73 55 64 !important;
  --drawer-edge: 91 67 79 !important;
  --field-fill: 46 36 41 !important;
  --field-text: 255 248 251 !important;
  --checkbox-fill: 46 36 41 !important;
  --select-fill: 46 36 41 !important;
  --select-edge: 151 105 127 !important;
  --scrollbar-thumb: 255 163 205 !important;
  --scrollbar-thumb-alpha: 0.3 !important;

  --theme-elevation-surface:
    0 24px 64px rgb(0 0 0 / 0.34), 0 6px 20px rgb(0 0 0 / 0.24) !important;
}

body {
  background: rgb(var(--surface-canvas));
  letter-spacing: -0.008em;
}

::selection {
  background: rgb(var(--accent-primary) / 0.2);
  color: rgb(var(--text-primary));
}

h1,
h2,
h3,
[role="dialog"] [role="heading"] {
  font-family: var(--theme-display-font-family);
  letter-spacing: -0.035em;
}

main {
  background:
    radial-gradient(circle at 82% 9%, rgb(250 227 232 / 0.7), transparent 28rem),
    radial-gradient(circle at 18% 92%, rgb(215 235 233 / 0.5), transparent 24rem),
    rgb(var(--surface-canvas));
}

html.dark main {
  background:
    radial-gradient(circle at 82% 9%, rgb(124 35 78 / 0.22), transparent 30rem),
    radial-gradient(circle at 18% 92%, rgb(58 94 91 / 0.12), transparent 24rem),
    rgb(var(--surface-canvas));
}

aside[aria-label],
[class~="bg-surface-sidebar"] {
  box-shadow: 18px 0 48px rgb(82 38 59 / 0.06);
}

[class~="bg-surface-composer"] {
  border-color: rgb(var(--accent-primary) / 0.14) !important;
  box-shadow:
    0 18px 48px rgb(96 43 69 / 0.12),
    0 3px 12px rgb(96 43 69 / 0.06) !important;
  backdrop-filter: blur(16px);
}

[role="dialog"],
[class~="bg-surface-dialog"] {
  border-color: rgb(var(--border-light)) !important;
  box-shadow: var(--theme-elevation-surface) !important;
}

[class~="bg-surface-submit"] {
  border-radius: 9999px !important;
  box-shadow: 0 10px 22px rgb(var(--accent-primary) / 0.22);
}

button,
a,
[role="button"] {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

button:not(:disabled):active,
[role="button"]:active {
  transform: translateY(1px);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--text-tertiary));
  opacity: 1;
}

*:focus-visible {
  outline-color: rgb(var(--accent-primary));
}

@media (max-width: 767px) {
  html {
    --theme-large-surface-radius: 1.35rem !important;
    --theme-dialog-padding-x: 1.25rem !important;
  }

  main {
    background:
      radial-gradient(circle at 90% 8%, rgb(250 227 232 / 0.55), transparent 20rem),
      rgb(var(--surface-canvas));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}