:root {
  /* Primary Color Palette */
  --messy-lavender: #e5deff;
  --messy-violet: #7e57c2;
  --messy-gold: #ffd700;
  --messy-teal: #00bcd4;
  --messy-pink: #f06292;
  --messy-darkpurple: #3f3356;
  --messy-midnight: #292639;
  --messy-slate: #1e1c2a;
  --messy-light: #f8f7fc;

  /* Semantic Colors */
  --color-background: hsl(250 20% 10%);
  --color-foreground: hsl(0 0% 100%);
  --color-primary: hsl(260 45% 55%);
  --color-secondary: hsl(250 15% 25%);
  --color-muted: hsl(250 15% 20%);
  --color-accent: hsl(340 60% 65%);
  --color-border: hsl(250 15% 30%);

  /* Bootstrap Override Variables */
  --bs-primary: var(--messy-violet);
  --bs-secondary: var(--color-secondary);
  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--color-foreground);
  --bs-border-color: var(--color-border);

  /* Bootstrap Root Variable Overrides for LovableUI */

  /* Primary color system - User messages */
  --bs-primary: #7e57c2 !important;
  --bs-primary-rgb: 126, 87, 194 !important;
  --bs-primary-text-emphasis: #fff !important;

  /* Light color system - Assistant messages */
  --bs-light: #1e1c2a !important;
  --bs-light-rgb: 30, 28, 42 !important;
  --bs-light-text-emphasis: #fff !important;

  /* ===== LOVABLE UI SIDEBAR CUSTOM PROPERTIES ===== */

  /* SIDEBAR CONTAINER */
  --sidebar-width-mobile: 75%;
  --sidebar-width-desktop: 384px;
  --sidebar-bg-gradient: linear-gradient(135deg, #1e1c2a 0%, #292639 50%, #3f3356 100%);
  --sidebar-border-color: rgb(126 87 194 / 20%);
  --sidebar-z-index: 1050;
  --sidebar-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);

  /* BACKDROP/OVERLAY */
  --sidebar-overlay-bg: rgb(0 0 0 / 80%);

  /* NEW CHAT BUTTON */
  --new-chat-btn-bg-gradient: linear-gradient(90deg, #7e57c2 0%, #f06292 100%);
  --new-chat-btn-transition: transform 0.2s ease;
  --new-chat-btn-hover-transform: scale(0.95);

  /* SIDEBAR SECTIONS */
  --section-title-color: #e5deff;
  --section-title-font-size: 12px;
  --section-title-font-weight: 700;

  /* LIST ITEMS */
  --list-item-bg-hover: rgb(126 87 194 / 20%);
  --list-item-timestamp-color: rgb(229 222 255 / 70%);
}