/* NEXUS × Royal Velvet Theme for Nerve
   Inspired by Obsidian Royal Velvet by @caro401
   Gradient folder titles, deep purple-blue backgrounds, pink/orange accents */

:root, .dark {
  /* Royal Velvet base layers — deep indigo-purple */
  --background: hsl(235, 15%, 9%);
  --foreground: hsl(60, 30%, 96%);
  --card: hsl(235, 15%, 13%);
  --card-foreground: hsl(60, 30%, 96%);
  --popover: hsl(235, 15%, 11%);
  --popover-foreground: hsl(60, 30%, 96%);

  /* Royal Velvet accent: pink → orange gradient feel */
  --primary: hsl(330, 100%, 75%);
  --primary-foreground: hsl(235, 15%, 9%);
  --secondary: hsl(235, 15%, 19%);
  --secondary-foreground: hsl(60, 30%, 96%);
  --muted: hsl(235, 15%, 15%);
  --muted-foreground: hsla(60, 30%, 96%, 0.4);
  --accent: hsl(235, 15%, 19%);
  --accent-foreground: hsl(60, 30%, 96%);
  --destructive: hsl(10, 100%, 75%);

  /* Sidebar — deeper layer */
  --sidebar: hsl(235, 15%, 11%);
  --sidebar-foreground: hsl(60, 30%, 96%);
  --sidebar-primary: hsl(330, 100%, 75%);
  --sidebar-primary-foreground: hsl(235, 15%, 9%);
  --sidebar-accent: hsl(235, 15%, 17%);
  --sidebar-accent-foreground: hsl(60, 30%, 96%);
  --sidebar-border: hsla(250, 100%, 75%, 0.13);
  --sidebar-ring: hsl(330, 100%, 75%);

  /* Border — subtle purple tint */
  --border: hsla(250, 100%, 75%, 0.13);
  --input: hsla(250, 100%, 75%, 0.13);
  --ring: hsl(330, 100%, 75%);

  /* Chart colors — Royal Velvet palette */
  --chart-1: hsl(330, 100%, 75%);  /* pink */
  --chart-2: hsl(35, 100%, 75%);   /* orange */
  --chart-3: hsl(115, 100%, 75%);  /* green */
  --chart-4: hsl(170, 100%, 75%);  /* blue/cyan */
  --chart-5: hsl(250, 100%, 75%);  /* purple */
}

/* ═══════════════════════════════════════════
   Gradient folder/section titles (Royal Velvet signature)
   ═══════════════════════════════════════════ */

/* Sidebar section/folder titles — pink→orange gradient */
[data-sidebar] h2,
[data-sidebar] h3,
[data-sidebar] .font-semibold,
nav h2,
nav h3,
aside h2,
aside h3,
[class*=sidebar] [class*=title],
[class*=sidebar] [class*=heading],
[class*=sidebar] [class*=label] {
  background-image: linear-gradient(135deg, hsl(330, 100%, 75%) 0%, hsl(35, 100%, 75%) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Main content headings — purple→pink gradient */
main h1,
.prose h1,
[class*=chat] h1 {
  background-image: linear-gradient(135deg, hsl(250, 100%, 75%) 0%, hsl(330, 100%, 75%) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

main h2,
.prose h2,
[class*=chat] h2 {
  background-image: linear-gradient(135deg, hsl(330, 100%, 75%) 0%, hsl(285, 100%, 75%) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

main h3,
.prose h3,
[class*=chat] h3 {
  background-image: linear-gradient(135deg, hsl(35, 100%, 75%) 0%, hsl(330, 100%, 75%) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Session titles in sidebar — gradient treatment */
[data-sidebar] [class*=session],
[data-sidebar] [class*=conversation] {
  border-left: 2px solid transparent;
  border-image: linear-gradient(to bottom, hsl(330, 100%, 75%), hsl(35, 100%, 75%)) 1;
}

/* Active/selected state — pink glow */
[data-sidebar] [data-active=true],
[data-sidebar] [aria-selected=true],
[data-sidebar] .active {
  background: hsla(330, 100%, 75%, 0.08) !important;
  border-left: 2px solid hsl(330, 100%, 75%) !important;
}

/* ═══════════════════════════════════════════
   Links & interactive elements
   ═══════════════════════════════════════════ */

a:not([class]) {
  color: hsl(35, 100%, 75%) !important;
}
a:not([class]):hover {
  color: hsl(35, 100%, 90%) !important;
}

/* Code blocks — deeper layer */
pre, code {
  background: hsl(235, 15%, 11%) !important;
  border: 1px solid hsla(250, 100%, 75%, 0.1) !important;
}
code {
  color: hsl(330, 100%, 75%) !important;
}

/* Inline code in chat */
:not(pre) > code {
  background: hsla(250, 100%, 75%, 0.08) !important;
  color: hsl(330, 100%, 80%) !important;
  padding: 0.1em 0.3em !important;
  border-radius: 3px !important;
}

/* ═══════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════ */

button[class*=primary],
[class*=btn-primary] {
  background: linear-gradient(135deg, hsl(330, 100%, 65%) 0%, hsl(35, 100%, 65%) 100%) !important;
  border: none !important;
  color: hsl(235, 15%, 9%) !important;
}
button[class*=primary]:hover,
[class*=btn-primary]:hover {
  background: linear-gradient(135deg, hsl(330, 100%, 75%) 0%, hsl(35, 100%, 75%) 100%) !important;
}

/* ═══════════════════════════════════════════
   Scrollbar — subtle purple
   ═══════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsla(250, 100%, 75%, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsla(330, 100%, 75%, 0.3);
}

/* ═══════════════════════════════════════════
   Chat bubbles
   ═══════════════════════════════════════════ */

/* User message — subtle purple tint */
[class*=user-message],
[class*=human] {
  background: hsla(250, 100%, 75%, 0.06) !important;
  border: 1px solid hsla(250, 100%, 75%, 0.1) !important;
}

/* Agent/bot message — deeper background */
[class*=assistant-message],
[class*=bot-message] {
  background: hsla(235, 15%, 13%, 0.8) !important;
}

/* Title bar / top nav */
header, [class*=topbar], [class*=navbar] {
  background: hsl(235, 15%, 9%) !important;
  border-bottom: 1px solid hsla(250, 100%, 75%, 0.1) !important;
}