/**
 * Open-LLM-VTuber custom UI theme
 * Loaded after the main bundle to refine layout, typography, and polish.
 */

:root {
  --olv-accent: #8b7cf6;
  --olv-accent-soft: rgba(139, 124, 246, 0.18);
  --olv-accent-glow: rgba(139, 124, 246, 0.35);
  --olv-surface: rgba(17, 24, 39, 0.72);
  --olv-surface-strong: rgba(17, 24, 39, 0.88);
  --olv-border: rgba(255, 255, 255, 0.08);
  --olv-border-strong: rgba(255, 255, 255, 0.14);
  --olv-radius-lg: 16px;
  --olv-radius-md: 12px;
  --olv-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --olv-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    system-ui, sans-serif;
}

html,
body {
  font-family: var(--olv-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root {
  background: radial-gradient(
      1200px 600px at 70% 20%,
      rgba(139, 124, 246, 0.08),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 20% 80%,
      rgba(59, 130, 246, 0.06),
      transparent 55%
    ),
    #0f1117;
}

/* Live2D stage — subtle vignette so the character reads clearly */
#live2d-internal-wrapper {
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.25));
}

#live2d-internal-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 70% at 50% 55%,
    transparent 40%,
    rgba(0, 0, 0, 0.18) 100%
  );
  z-index: 0;
}

#live2d-internal-wrapper canvas {
  position: relative;
  z-index: 1;
}

/* Chat panel */
.cs-main-container {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cs-chat-container {
  border: 1px solid var(--olv-border) !important;
  border-radius: var(--olv-radius-lg) !important;
  background: var(--olv-surface) !important;
  box-shadow: var(--olv-shadow);
}

.cs-message-list {
  background: transparent !important;
}

.cs-message__content {
  border-radius: var(--olv-radius-md) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  line-height: 1.55 !important;
}

.cs-message--incoming .cs-message__content {
  background: linear-gradient(
    135deg,
    rgba(55, 65, 81, 0.95),
    rgba(31, 41, 55, 0.95)
  ) !important;
  border: 1px solid var(--olv-border);
}

.cs-message--outgoing .cs-message__content {
  background: linear-gradient(
    135deg,
    rgba(139, 124, 246, 0.35),
    rgba(99, 102, 241, 0.25)
  ) !important;
  border: 1px solid var(--olv-accent-soft);
}

.cs-message:hover .cs-message__content {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cs-avatar > img {
  border: 2px solid var(--olv-border-strong);
  box-shadow: 0 0 0 1px rgba(139, 124, 246, 0.2);
}

/* Footer input */
textarea {
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--olv-accent-glow) !important;
}

/* Background image tuning */
img[alt="background"] {
  filter: brightness(0.92) saturate(1.05);
}

/* Scrollbars */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Buttons */
button {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

/* Mobile layout */
@media (max-width: 768px) {
  .cs-message-list__scroll-wrapper {
    padding: 0 0.6em 0 0.4em !important;
  }

  .cs-message-list__scroll-wrapper > .cs-message,
  .cs-message-list__scroll-wrapper > .cs-message-group {
    max-width: 92% !important;
  }
}