:root {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

html,
body {
  min-height: 100%;
}

html.dark {
  --background: #0b1020;
  --foreground: #e9eefb;
  --muted: #a9b2c7;
  --muted-foreground: #d0d8eb;
  --card: rgba(19, 26, 51, 0.82);
  --card-foreground: #e9eefb;
  --accent: #6ea8ff;
  --accent-foreground: #0b1020;
  --primary: #6ea8ff;
  --primary-foreground: #0b1020;
  --secondary: rgba(233, 238, 251, 0.08);
  --secondary-foreground: #e9eefb;
  --ring: 203 217 255;
  --sidebar-background: rgba(15, 21, 42, 0.82);
  --sidebar-foreground: #e9eefb;
  --sidebar-border: rgba(142, 239, 255, 0.14);
  --sidebar-primary: #6ea8ff;
  --sidebar-primary-foreground: #0b1020;
  --sidebar-accent: rgba(110, 168, 255, 0.25);
  --sidebar-accent-foreground: #e9eefb;
  --sidebar-ring: #6ea8ff;
}

html.light {
  color-scheme: light;
  --background: #f6f8fe;
  --foreground: #101323;
  --muted: #4a576d;
  --muted-foreground: #606c84;
  --card: rgba(255, 255, 255, 0.92);
  --card-foreground: #101323;
  --accent: #2b6aff;
  --accent-foreground: #ffffff;
  --primary: #2b6aff;
  --primary-foreground: #ffffff;
  --secondary: rgba(16, 19, 35, 0.05);
  --secondary-foreground: #101323;
  --ring: 43 106 255;
  --sidebar-background: rgba(255, 255, 255, 0.95);
  --sidebar-foreground: #101323;
  --sidebar-border: rgba(16, 19, 35, 0.08);
  --sidebar-primary: #2b6aff;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(43, 106, 255, 0.12);
  --sidebar-accent-foreground: #101323;
  --sidebar-ring: #2b6aff;
}

body,
button,
input,
textarea,
select {
  font-family: inherit;
}

html.dark body {
  background: radial-gradient(1200px 600px at 20% -10%, rgba(110, 168, 255, 0.18), transparent),
    radial-gradient(1200px 600px at 100% 10%, rgba(20, 121, 255, 0.16), transparent),
    var(--background);
  color: var(--foreground);
}

html.light body {
  background: radial-gradient(1000px 540px at 10% -10%, rgba(43, 106, 255, 0.12), transparent),
    radial-gradient(960px 520px at 90% 0%, rgba(20, 121, 255, 0.08), transparent),
    var(--background);
  color: var(--foreground);
}

body {
  margin: 0;
  display: flex;
  justify-content: stretch;
  min-height: 100vh;
  transition: background 0.6s ease, color 0.4s ease;
}

#root {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: transparent !important;
}

#header,
#message-composer,
#thread-history,
#side-view-content,
#chat-settings,
[data-sonner-toast] {
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid rgba(142, 239, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(5, 12, 30, 0.45);
  backdrop-filter: blur(14px);
}

#header {
  margin: 8px 16px 0;
  padding: 14px 18px !important;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

#message-composer {
  border-radius: 22px;
  margin-top: 8px;
  gap: 14px;
}

#message-composer textarea,
#message-composer input {
  background: transparent !important;
  color: var(--foreground) !important;
}

#message-composer button {
  border-radius: 999px;
}

.step {
  margin: 6px 0;
}

.ai-message > .flex {
  background: var(--card);
  border-radius: 22px;
  border: 1px solid rgba(142, 239, 255, 0.12);
  padding: 18px 22px;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(4, 10, 28, 0.38);
}

.ai-message .message-content,
.message-content {
  color: var(--foreground);
}

.step[data-step-type="tool"] .ai-message > .flex,
.step[data-step-type="function_call"] .ai-message > .flex {
  border-left: 3px solid var(--accent);
  box-shadow: 0 24px 50px rgba(8, 20, 48, 0.42);
}

.loading-shimmer {
  background-image: linear-gradient(
    120deg,
    transparent 0%,
    rgba(142, 239, 255, 0.25) 45%,
    transparent 90%
  );
}

button,
input,
textarea,
select {
  border-radius: 12px;
  color: var(--foreground);
}

button.bg-secondary,
button[data-variant="secondary"],
a.btn.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

button.bg-primary,
button[data-variant="default"],
a.btn.btn-primary {
  background: linear-gradient(135deg, var(--accent), #8eefff);
  color: var(--accent-foreground);
  box-shadow: 0 14px 32px rgba(32, 125, 255, 0.35);
}

a.btn.btn-primary:hover,
button.bg-primary:hover,
button[data-variant="default"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(32, 125, 255, 0.45);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(142, 239, 255, 0.3);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 239, 255, 0.45);
}

[data-sonner-toast]::after {
  border-radius: 18px;
}

html.light #header,
html.light #message-composer,
html.light #thread-history,
html.light #side-view-content,
html.light [data-sonner-toast] {
  border-color: rgba(16, 19, 35, 0.08);
  box-shadow: 0 18px 35px rgba(15, 25, 60, 0.12);
  backdrop-filter: blur(18px);
}

html.light .ai-message > .flex {
  border-color: rgba(16, 19, 35, 0.08);
  box-shadow: 0 18px 40px rgba(12, 20, 46, 0.15);
}

.kvase-header-controls {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  margin-right: auto;
  min-width: 0;
}

.kvase-header-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.kvase-header-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  opacity: 0.9;
  white-space: nowrap;
}

.kvase-course-select {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(142, 239, 255, 0.24);
  padding: 0 38px 0 14px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.72));
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(142, 239, 255, 0.6) 50%),
    linear-gradient(135deg, rgba(142, 239, 255, 0.6) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(14, 30, 58, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 190px;
  max-width: 260px;
}

.kvase-course-select:focus {
  outline: none;
  border-color: rgba(142, 239, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(142, 239, 255, 0.2);
}

.kvase-course-select option {
  color: #0b1020;
}

@media (max-width: 820px) {
  #header {
    flex-wrap: wrap;
    gap: 14px;
  }

  .kvase-header-controls {
    flex-wrap: wrap;
    gap: 12px;
  }

  .kvase-header-group {
    flex-basis: 150px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .kvase-header-label {
    display: none;
  }

  .kvase-course-select {
    max-width: 100%;
  }
}