/* SVAKOM AI theme, layered over LibreChat v0.8.8's semantic tokens. */
html:not(.high-contrast) {
  --presentation: 250 249 253;
  --text-primary: 36 30 46;
  --text-secondary: 109 99 122;
  --text-secondary-alt: 119 109 133;
  --text-tertiary: 119 109 133;
  --text-muted: 119 109 133;
  --accent-primary: 134 84 201;
  --accent-primary-hover: 113 62 182;
  --ring-primary: 154 108 213;
  --header-primary: 250 249 253;
  --header-hover: 240 234 249;
  --header-button-hover: 240 234 249;
  --surface-primary: 255 255 255;
  --surface-primary-alt: 244 241 249;
  --surface-primary-contrast: 238 232 247;
  --surface-secondary: 244 239 251;
  --surface-secondary-alt: 235 227 245;
  --surface-tertiary: 235 227 245;
  --surface-tertiary-alt: 255 255 255;
  --surface-active: 231 219 247;
  --surface-active-alt: 236 227 248;
  --surface-hover: 236 229 247;
  --surface-hover-alt: 228 216 243;
  --surface-composer-hover: 241 235 249;
  --surface-chat: 255 255 255;
  --surface-dialog: 255 255 255;
  --surface-code: 244 242 248;
  --surface-submit: 134 84 201;
  --surface-submit-hover: 113 62 182;
  --border-light: 229 220 239;
  --border-medium: 219 206 234;
  --border-medium-alt: 219 206 234;
  --border-heavy: 184 157 216;
  --link: 125 77 184;
  --link-hover: 109 59 169;
  --switch-unchecked: 170 156 184;
  --svakom-glow: .5;
  --svakom-card-shadow: 0 10px 44px -20px #7545a830;
}
html.dark:not(.high-contrast) {
  --presentation: 25 22 32;
  --text-primary: 239 233 247;
  --text-secondary: 188 176 201;
  --text-secondary-alt: 170 156 184;
  --text-tertiary: 170 156 184;
  --text-muted: 170 156 184;
  --accent-primary: 188 146 237;
  --accent-primary-hover: 206 172 247;
  --ring-primary: 188 146 237;
  --header-primary: 25 22 32;
  --header-hover: 44 34 56;
  --header-button-hover: 44 34 56;
  --surface-primary: 30 25 38;
  --surface-primary-alt: 21 18 28;
  --surface-primary-contrast: 41 32 52;
  --surface-secondary: 43 33 56;
  --surface-secondary-alt: 51 38 66;
  --surface-tertiary: 51 38 66;
  --surface-tertiary-alt: 35 28 45;
  --surface-active: 64 44 83;
  --surface-active-alt: 49 36 63;
  --surface-hover: 47 36 60;
  --surface-hover-alt: 58 43 74;
  --surface-composer-hover: 47 36 60;
  --surface-chat: 37 29 47;
  --surface-dialog: 33 26 43;
  --surface-code: 21 18 28;
  --surface-submit: 173 124 229;
  --surface-submit-hover: 191 147 240;
  --border-light: 58 45 72;
  --border-medium: 72 54 89;
  --border-medium-alt: 72 54 89;
  --border-heavy: 128 96 158;
  --link: 198 160 240;
  --link-hover: 220 191 252;
  --switch-unchecked: 95 76 114;
  --svakom-glow: .2;
  --svakom-card-shadow: 0 12px 44px -20px #04010780;
}
body { background: rgb(var(--presentation)); }
main { position: relative; isolation: isolate; }
/* Decorative movement is confined to an empty chat. */
main:has(.split-parent)::before,
main:has(.split-parent)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(50px);
  opacity: var(--svakom-glow);
}
main:has(.split-parent)::before {
  top: 8%; left: 8%; width: 58%; height: 38%;
  background: radial-gradient(ellipse, #cda4f1, #ceb7f160 50%, #d8c8f000 74%);
  animation: svakom-welcome-drift 19s ease-in-out infinite alternate;
}
main:has(.split-parent)::after {
  top: 24%; right: 0; width: 56%; height: 35%;
  background: radial-gradient(ellipse, #9cbcf8, #a8b9ef55 50%, #a5b9f000 73%);
  animation: svakom-welcome-drift 23s -6s ease-in-out infinite alternate-reverse;
}
main:has(.split-parent) > div { position: relative; z-index: 1; }
main:has(.split-parent) div.transform-gpu:has(.split-parent) {
  height: auto !important;
  max-height: none !important;
  flex: none;
  padding-bottom: 0;
  margin: 0 0 28px;
}
main .transform-gpu > div > div:has(.split-parent) { flex-direction: column; gap: 12px; }
main .transform-gpu > div > div:has(.split-parent) > .relative {
  width: 54px; height: 54px;
  filter: drop-shadow(0 6px 18px #8956c130);
}
main .split-parent {
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.35;
  font-weight: 450;
  letter-spacing: -1.5px;
  color: #8654c9;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.dark main .split-parent { color: #d7bcf5; }
main .transform-gpu > div > .animate-fadeIn { margin-top: 10px; font-size: 13px; color: rgb(var(--text-secondary)); }
main .transform-gpu > div > .animate-fadeIn p { color: inherit; }
main:has(.split-parent) form { max-width: 760px !important; margin-bottom: 20px !important; }
main:has(.split-parent) div.bg-presentation:has(> form) { background-color: transparent !important; }
[data-testid="composer-surface"] {
  position: relative;
  isolation: isolate;
  border-radius: 25px !important;
  border-color: rgb(var(--border-medium) / .85);
  box-shadow: var(--svakom-card-shadow);
  transition: box-shadow .3s, border-color .25s;
}
main:has(.split-parent) [data-testid="composer-surface"] { background-color: rgb(var(--surface-chat) / .88); }
[data-testid="composer-surface"]:focus-within {
  border-color: rgb(var(--accent-primary) / .7);
  box-shadow: 0 0 0 4px rgb(var(--accent-primary) / .055), var(--svakom-card-shadow);
}
[data-testid="composer-surface"]::before {
  content: "";
  position: absolute; inset: 0; padding: 1px;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 18%, #a77be380 37%, #92aaf3b0 50%, #dcb3e580 61%, transparent 81%);
  background-size: 280% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .45;
}
main:has(.split-parent) [data-testid="composer-surface"]::before { animation: svakom-composer-light 10s linear infinite; opacity: .9; }
#prompt-textarea { font-size: 15px; line-height: 1.75; }
main:has(.split-parent) #prompt-textarea { min-height: 104px; padding-top: 21px; }
main:has(.split-parent) #prompt-textarea:placeholder-shown { height: 104px !important; }
button[data-testid="send-button"], button[aria-label="发送消息"], button[aria-label="Send message"] {
  transition: transform .2s, box-shadow .2s;
}
button[data-testid="send-button"]:not(:disabled),
button[aria-label="发送消息"]:not(:disabled), button[aria-label="Send message"]:not(:disabled) {
  background: rgb(var(--surface-submit)); color: #fff; box-shadow: 0 3px 13px #9463c926;
}
button[data-testid="send-button"]:hover:not(:disabled),
button[aria-label="发送消息"]:hover:not(:disabled), button[aria-label="Send message"]:hover:not(:disabled) { transform: translateY(-2px); }
[data-testid="model-selector-button"] { border-radius: 14px !important; box-shadow: 0 2px 9px #00000003; }
[data-testid="model-selector-button"]:hover { border-color: rgb(var(--accent-primary) / .45); }
/* Keep native starter buttons and their actual submit behavior. */
main button:has(> span.line-clamp-2) {
  min-height: 56px;
  max-width: 15rem;
  border-radius: 15px;
  background: rgb(var(--surface-primary) / .65);
  border-color: rgb(var(--border-light));
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 2px 10px #8654c905;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
main button:has(> span.line-clamp-2):hover {
  transform: translateY(-3px);
  border-color: rgb(var(--accent-primary) / .5);
  box-shadow: 0 8px 22px -14px #8654c950;
}
aside { border-right: 1px solid rgb(var(--border-light)); }
aside > div > div:first-child { padding-top: 15px; }
aside > div > div:first-child::before {
  content: "";
  display: block; flex: none;
  width: 31px; height: 31px;
  margin: 0 auto 8px;
  background: url("/svakom/brand-icon.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 8px #8654c920);
}
aside nav { background-color: rgb(var(--surface-primary-alt)); }
aside button, aside a { transition: background-color .2s, color .2s, transform .2s; }
aside [data-testid="new-chat-button"] { color: rgb(var(--accent-primary)); background: rgb(var(--accent-primary) / .09); }
aside [data-testid="new-chat-button"]:hover { background: rgb(var(--accent-primary) / .17); }
aside [aria-selected="true"], aside [aria-current="page"] { color: rgb(var(--accent-primary)); }
aside [role="gridcell"] button { border-radius: 11px; }
[role="dialog"], [role="menu"], [data-radix-popper-content-wrapper] > div { border-radius: 16px; }
a[href="https://ai.svakomcloud.com"] { text-underline-offset: 3px; }
@keyframes svakom-welcome-drift { from { transform: translate3d(-25px,-15px,0) scale(.95); } to { transform: translate3d(55px,30px,0) scale(1.1); } }
@keyframes svakom-composer-light { from { background-position: 150% 50%; } to { background-position: -150% 50%; } }
@media (max-width: 767px) {
  main:has(.split-parent)::before, main:has(.split-parent)::after { filter: blur(32px); width: 85%; height: 32%; }
  main .split-parent { font-size: 31px; letter-spacing: -.8px; }
  main:has(.split-parent) div.transform-gpu:has(.split-parent) { margin-bottom: 21px; }
  main .transform-gpu > div > div:has(.split-parent) > .relative { width: 45px; height: 45px; }
  main .transform-gpu > div > .animate-fadeIn { font-size: 12px; padding: 0 14px; }
  main:has(.split-parent) form { margin-bottom: 13px !important; padding: 0 12px; }
  [data-testid="composer-surface"] { border-radius: 22px !important; }
  main:has(.split-parent) #prompt-textarea { min-height: 90px; font-size: 14px; }
  main:has(.split-parent) #prompt-textarea:placeholder-shown { height: 90px !important; }
  main button:has(> span.line-clamp-2) { min-height: 43px; max-width: 100%; font-size: 11px; }
  main:has(.split-parent) [data-testid="composer-surface"]::before { animation-duration: 14s; }
}
/* Preserve native high-contrast palettes and honor the viewer's motion preference. */
html.high-contrast main::before, html.high-contrast main::after,
html.high-contrast [data-testid="composer-surface"]::before { display: none; }
html.high-contrast main .split-parent { color: rgb(var(--text-primary)); background: none; -webkit-text-fill-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  main::before, main::after, [data-testid="composer-surface"]::before { animation: none !important; }
  main button, aside button, aside a, [data-testid="composer-surface"] { transition: none !important; }
  main .split-parent [aria-hidden="true"] span { opacity: 1 !important; transform: none !important; }
}