/* Servo: one palette per mode, no JavaScript dependency. */
html:root:not(.dark) {
  --text-primary: 37 63 53 !important;
  --text-secondary: 73 99 87 !important;
  --text-secondary-alt: 86 111 99 !important;
  --text-tertiary: 104 126 115 !important;
  --accent-primary: 40 94 63 !important;
  --accent-primary-hover: 50 116 77 !important;
  --surface-active: 220 236 224 !important;
  --surface-active-alt: 231 240 220 !important;
  --surface-hover: 232 243 234 !important;
  --surface-hover-alt: 235 241 224 !important;
  --surface-composer-hover: 239 246 235 !important;
  --surface-primary: 250 247 239 !important;
  --surface-primary-alt: 246 244 235 !important;
  --surface-primary-contrast: 255 253 247 !important;
  --surface-secondary: 238 235 223 !important;
  --surface-secondary-alt: 229 239 217 !important;
  --surface-tertiary: 241 238 228 !important;
  --surface-tertiary-alt: 255 253 247 !important;
  --surface-dialog: 255 253 247 !important;
  --surface-submit: 40 94 63 !important;
  --surface-submit-hover: 50 116 77 !important;
  --surface-chat: 250 247 239 !important;
  --border-light: 207 220 212 !important;
  --border-medium-alt: 183 202 191 !important;
  --border-medium: 183 202 191 !important;
  --border-heavy: 148 175 158 !important;
  --border-xheavy: 109 143 122 !important;
}

html:root.dark {
  --text-primary: 244 239 223 !important;
  --text-secondary: 184 178 195 !important;
  --text-secondary-alt: 194 187 201 !important;
  --text-tertiary: 169 161 176 !important;
  --accent-primary: 185 226 135 !important;
  --accent-primary-hover: 204 239 160 !important;
  --surface-active: 69 56 75 !important;
  --surface-active-alt: 81 64 87 !important;
  --surface-hover: 73 59 79 !important;
  --surface-hover-alt: 89 70 91 !important;
  --surface-composer-hover: 77 62 80 !important;
  --surface-primary: 32 30 48 !important;
  --surface-primary-alt: 39 36 56 !important;
  --surface-primary-contrast: 48 44 64 !important;
  --surface-secondary: 25 23 36 !important;
  --surface-secondary-alt: 44 41 60 !important;
  --surface-tertiary: 52 48 68 !important;
  --surface-tertiary-alt: 45 42 59 !important;
  --surface-dialog: 44 41 60 !important;
  --surface-submit: 185 226 135 !important;
  --surface-submit-hover: 204 239 160 !important;
  --surface-chat: 32 30 48 !important;
  --border-light: 73 68 92 !important;
  --border-medium-alt: 91 85 111 !important;
  --border-medium: 91 85 111 !important;
  --border-heavy: 125 112 132 !important;
  --border-xheavy: 163 146 158 !important;
}

html body, html main { background-color: rgb(var(--surface-primary)); }
html [class*="view-transition-name:chat-form"] {
  background-color: transparent !important;
  background-image: none !important;
}
html textarea, html [contenteditable="true"] { caret-color: rgb(var(--accent-primary)); }
html [role="menu"], html [role="dialog"] { background-color: rgb(var(--surface-dialog)); }

/* Both mounted logo filenames contain the same Servo artwork. */
html img:is([src$="/logo.svg"], [src="logo.svg"], [src*="/logo.svg?"]) {
  width: min(13rem, 80vw) !important;
  height: 5rem !important;
  display: block;
  object-fit: contain;
  margin: 0 auto !important;
  transform: none !important;
}
html body:has(input[type="password"]) div:has(> img:is([src$="/logo.svg"], [src="logo.svg"])) {
  width: min(18rem, 86vw) !important;
  height: 6.5rem !important;
  margin: .75rem auto 0 !important;
  background: url("/assets/servo-logo.svg?v=servo-clean-1") center / contain no-repeat;
}
html body:has(input[type="password"]) img:is([src$="/logo.svg"], [src="logo.svg"]) {
  opacity: 0 !important;
}
html body:has(input[type="password"]) main {
  flex: 0 0 auto !important;
  margin-top: .5rem !important;
}
html:has(input[autocomplete="current-password"]) main > div,
html .kia-auth-card {
  border: 1px solid rgb(var(--border-light));
  border-radius: 1.5rem;
  background: rgb(var(--surface-dialog)) !important;
  box-shadow: 0 16px 48px rgb(20 35 28 / .12);
}
/* Replace only the landing greeting icon with the Servo brain.
   The production bundle predates the kia-landing-card hook, so this selector
   follows LibreChat's stable landing layout instead. */
html body:has(textarea)
  div.flex.items-center.justify-center.gap-2:has(> div.relative.size-10) {
  flex-direction: column !important;
}
html body:has(textarea)
  div.flex.items-center.justify-center.gap-2
  > div.relative.size-10 {
  background: url("/assets/servo-mark.svg?v=servo-clean-4") center / contain no-repeat !important;
}
html body:has(textarea)
  div.flex.items-center.justify-center.gap-2
  > div.relative.size-10
  > * {
  visibility: hidden !important;
}