:root {
  --bg-app: #090a0f;
  --bg-sidebar: #12141c;
  --bg-header: rgba(18, 20, 28, 0.86);
  --bg-chat-area: #0e1017;
  --bg-input-wrapper: #171a25;
  --bg-ai-bubble: #171a25;
  --bg-user-bubble: #ff007f;
  --bg-hover: #1f2333;

  --text-primary: #f0f0f5;
  --text-secondary: #a0a5b5;
  --text-user-bubble: #ffffff;

  --accent-primary: #ff007f;
  --accent-secondary: #ff4da6;
  --accent-glow: rgba(255, 0, 127, 0.4);

  --border-color: #262a3d;
  --online-dot: #ff007f;

  --shadow-sm:
    4px 4px 10px rgba(0, 0, 0, 0.38),
    -3px -3px 8px rgba(255, 255, 255, 0.025);

  --shadow-md:
    8px 8px 18px rgba(0, 0, 0, 0.46),
    -5px -5px 14px rgba(255, 255, 255, 0.028);

  --shadow-lg:
    14px 14px 30px rgba(0, 0, 0, 0.52),
    -9px -9px 24px rgba(255, 255, 255, 0.03);

  --inset-sm:
    inset 4px 4px 10px rgba(0, 0, 0, 0.46),
    inset -3px -3px 8px rgba(255, 255, 255, 0.025);

  --inset-md:
    inset 7px 7px 15px rgba(0, 0, 0, 0.5),
    inset -5px -5px 12px rgba(255, 255, 255, 0.028);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --avatar-image-url:
    url('https://res.cloudinary.com/dqqyvozdw/image/upload/v1778965093/u7woddbemorhcj7tbwwi.jpg');

  --font-display:
    'Space Grotesk',
    sans-serif;

  --font-body:
    'Inter',
    sans-serif;

  --font-mono:
    'JetBrains Mono',
    monospace;
}

[data-theme="light"] {
  --bg-app: #fdf5f9;
  --bg-sidebar: #f5e4ec;
  --bg-header: rgba(253, 245, 249, 0.92);
  --bg-chat-area: #ffffff;
  --bg-input-wrapper: #f5e4ec;
  --bg-ai-bubble: #f8f0f4;
  --bg-user-bubble: #e05297;
  --bg-hover: #eecede;

  --text-primary: #2d1b24;
  --text-secondary: #7a6370;
  --text-user-bubble: #ffffff;

  --accent-primary: #e05297;
  --accent-secondary: #f07ab3;
  --accent-glow: rgba(224, 82, 151, 0.3);

  --border-color: #eecede;
  --online-dot: #e05297;

  --shadow-sm:
    4px 4px 10px rgba(187, 145, 163, 0.3),
    -3px -3px 8px rgba(255, 255, 255, 0.95);

  --shadow-md:
    8px 8px 18px rgba(187, 145, 163, 0.34),
    -5px -5px 14px rgba(255, 255, 255, 0.98);

  --shadow-lg:
    14px 14px 30px rgba(187, 145, 163, 0.38),
    -9px -9px 24px rgba(255, 255, 255, 1);

  --inset-sm:
    inset 4px 4px 10px rgba(187, 145, 163, 0.32),
    inset -3px -3px 8px rgba(255, 255, 255, 0.95);

  --inset-md:
    inset 7px 7px 15px rgba(187, 145, 163, 0.35),
    inset -5px -5px 12px rgba(255, 255, 255, 0.98);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  overflow-x: hidden;

  font-family: var(--font-body);
  color: var(--text-primary);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 0, 127, 0.09),
      transparent 30%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(255, 77, 166, 0.055),
      transparent 27%
    ),
    var(--bg-app);

  -webkit-font-smoothing: antialiased;
}

button,
textarea,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

textarea {
  resize: none;
}

::selection {
  color: #fff;
  background: var(--accent-primary);
}

.neu-raised {
  box-shadow: var(--shadow-md);
}

.neu-raised-sm {
  box-shadow: var(--shadow-sm);
}

.neu-raised-lg {
  box-shadow: var(--shadow-lg);
}

.neu-inset {
  box-shadow: var(--inset-md);
}

.neu-inset-sm {
  box-shadow: var(--inset-sm);
}

* {
  scrollbar-width: thin;
  scrollbar-color:
    var(--accent-primary)
    transparent;
}

*::-webkit-scrollbar {
  width: 6px;
}

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

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--accent-primary);
}

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

  html {
    scroll-behavior: auto;
  }
}