/**
 * Junet Custom CSS Sample
 * 
 * This file contains example customizations for your Junet chat interface.
 * Copy and modify these styles to match your brand identity.
 * 
 * Upload this CSS in: Settings → Branding → Custom CSS
 */

/* ========================================
   Custom Scrollbar
   ======================================== */

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

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

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
}


/* ========================================
   Animated Message Appearance
   ======================================== */

[id^="message-"] {
  animation: messageAppear 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes messageAppear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ========================================
   User Message Gradient
   ======================================== */

[id^="message-"] .ml-auto.rounded-xl {
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.12) 0%,
    hsl(var(--primary) / 0.06) 100%
  ) !important;
  border: 1px solid hsl(var(--primary) / 0.15);
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.08);
}


/* ========================================
   Send Button Hover Glow
   ======================================== */

button.bg-primary.rounded-lg.h-9.min-w-9 {
  transition: box-shadow 0.25s ease;
}

button.bg-primary.rounded-lg.h-9.min-w-9:hover {
  box-shadow: 
    0 0 20px hsl(var(--primary) / 0.5),
    0 0 40px hsl(var(--primary) / 0.25);
}


/* ========================================
   Code Block Rainbow Top Border
   ======================================== */

pre {
  position: relative;
  border: 1px solid hsl(var(--border) / 0.8);
  overflow: hidden;
}

pre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    hsl(var(--chart-1, 220 70% 50%)) 0%,
    hsl(var(--chart-2, 160 60% 45%)) 25%,
    hsl(var(--chart-3, 30 80% 55%)) 50%,
    hsl(var(--chart-4, 280 65% 60%)) 75%,
    hsl(var(--chart-5, 340 75% 55%)) 100%
  );
}


/* ========================================
   Glassmorphism Sidebar
   ======================================== */

[data-sidebar] {
  background: hsl(var(--sidebar-background) / 0.8) !important;
  backdrop-filter: blur(12px) saturate(180%);
  border-right: 1px solid hsl(var(--border) / 0.5);
}


/* ========================================
   Smooth Focus Rings
   ======================================== */

*:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  transition: outline-offset 0.2s ease;
}

*:focus-visible:active {
  outline-offset: 0px;
}


/* ========================================
   Card Hover Effects
   ======================================== */

.assistant-message-bubble-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.assistant-message-bubble-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
}


/* ========================================
   Custom Typography
   ======================================== */

/* Uncomment to use a custom font from Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */

/* 
body {
  font-family: 'Inter', var(--font-sans);
}
*/


/* ========================================
   Dark Mode Specific Enhancements
   ======================================== */

.dark .assistant-message-bubble-card {
  box-shadow: 0 0 20px hsl(var(--primary) / 0.15);
}

.dark [data-sidebar] {
  box-shadow: 4px 0 24px hsl(var(--foreground) / 0.1);
}


/* ========================================
   Mobile Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
  [id^="message-"] {
    animation-duration: 0.25s;
  }
  
  /* Larger touch targets on mobile */
  button {
    min-height: 44px;
    min-width: 44px;
  }
}


/* ========================================
   Hide Sidebar on Mobile (Optional)
   ======================================== */

/*
@media (max-width: 768px) {
  [data-sidebar] {
    display: none;
  }
}
*/