/* Custom Christmas font */
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --lollms-title: LoLLMS: Christmas Edition;
  --falling-object: ❄;
  --activate-dropping-animation: 1;
  --lollms-welcome-short-message: "Merry AI-mas!";
  --lollms-welcome-message: "Welcome to the festive world of LoLLMs - where AI meets holiday cheer! 🎄🤖 We're here to make your digital experience as merry and bright as a perfectly decorated Christmas tree. From natural language processing to multimodal tasks, LoLLMs is your one-stop AI assistant for the holiday season. Let's spread joy and cultivate brilliant ideas together!";
  
  /* Light mode colors */
  --color-primary: #c41e3a;
  --color-primary-light: #e63946;
  --color-secondary: #165b33;
  --color-accent: #f8b229;
  --color-bg-light: #f1f8e9;
  --color-bg-light-tone: #e8f5e9;
  --color-bg-light-tone-panel: #c8e6c9;
  --color-light-text-panel: #1b5e20;
  
  /* Dark mode colors */
  --color-bg-dark: #1a2c38;
  --color-bg-dark-tone: #234454;
  --color-bg-dark-tone-panel: #2c5364;
  --color-dark-text-panel: #e0f2f1;
}

@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    font-family: 'Mountains of Christmas', cursive;
  }
}

.background-color {
  @apply bg-gradient-to-br from-green-50 to-red-100 dark:from-gray-900 dark:to-gray-800 min-h-screen;
}

.toolbar-color {
  @apply text-white bg-gradient-to-r from-red-600 to-green-600 dark:from-red-800 dark:to-green-800 rounded-full shadow-lg;
}

.panels-color {
  @apply text-gray-800 dark:text-gray-200 bg-gradient-to-r from-red-100 to-green-100 dark:from-gray-800 dark:to-gray-700 rounded shadow-lg;
}

.unicolor-panels-color {
  @apply bg-red-100 dark:bg-gray-800;
}

.chatbox-color {
  @apply bg-gradient-to-br from-red-100 to-green-100 dark:from-gray-800 dark:to-gray-700;
}

.message {
  @apply bg-white dark:bg-gray-800 border-2 border-red-500 dark:border-green-500;
}

.message:nth-child(even) {
  @apply bg-red-50 dark:bg-gray-700;
}

.message:nth-child(odd) {
  @apply bg-green-50 dark:bg-gray-800;
}

.discussion {
  @apply mr-2 bg-gradient-to-r from-red-200 to-green-200 dark:from-gray-700 dark:to-gray-600 hover:from-red-100 hover:to-green-100 hover:dark:from-gray-600 hover:dark:to-gray-500;
}

.discussion-hilighted {
  @apply bg-gradient-to-r from-red-100 to-green-100 dark:from-gray-700 dark:to-gray-600 hover:from-red-50 hover:to-green-50 hover:dark:from-gray-600 hover:dark:to-gray-500;
}

.bg-gradient-welcome {
  @apply bg-gradient-to-br from-red-50 to-green-100 dark:from-gray-900 dark:to-gray-800;
}

.bg-gradient-progress {
  @apply bg-gradient-to-r from-red-100 to-green-200 dark:from-gray-800 dark:to-gray-700;
}

.text-gradient-title {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-green-600 dark:from-red-400 dark:to-green-400;
}

.btn-primary {
  @apply bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded;
}

.btn-secondary {
  @apply bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded;
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-red-500 dark:border-green-500;
}

.input {
  @apply bg-red-50 dark:bg-gray-700 border border-red-300 dark:border-green-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-green-400;
}

.link {
  @apply text-red-600 hover:text-red-700 dark:text-green-400 dark:hover:text-green-300;
}

.menu-item.active-link::before {
  background: linear-gradient(to right, #c41e3a, #165b33, #c41e3a);
}

.dark .menu-item.active-link::before {
  background: linear-gradient(to right, #e63946, #2a9d8f, #e63946);
}

.app-card {
  @apply transition-all duration-300 ease-in-out bg-gradient-to-br from-red-50 to-green-100 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 border-2 border-red-500 dark:border-green-500 rounded-xl shadow-lg p-6 hover:shadow-xl;
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.red.300') theme('colors.green.100');
}

.dark .scrollbar-thin {
  scrollbar-color: theme('colors.green.600') theme('colors.gray.800');
}

.scrollbar-thin::-webkit-scrollbar-track {
  @apply bg-red-100 dark:bg-gray-800 rounded-full;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  @apply bg-green-300 dark:bg-red-600 rounded-full;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  @apply bg-green-400 dark:bg-red-500;
}

.interesting-facts {
  @apply mt-6 mb-6 p-4 bg-red-50/80 dark:bg-green-900/80 rounded-lg shadow-lg transform hover:scale-105 border-2 border-green-500 dark:border-red-500;
}
@layer components {
    .snowfall-bg {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='1' fill='white' opacity='0.7'/%3E%3C/svg%3E");
      background-repeat: repeat;
    }
  }
  
  .animated-progressbar-bg {
    @apply w-full h-16 relative overflow-hidden bg-gradient-to-r from-green-900 via-red-900 to-green-900 dark:from-green-950 dark:via-red-950 dark:to-green-950 rounded-full shadow-[0_0_20px_rgba(255,0,0,0.4)] border-2 border-yellow-300;
  }
  
  .animated-progressbar-fg {
    @apply absolute top-0 left-0 h-full bg-gradient-to-r from-green-500 via-red-500 to-green-500 dark:from-green-600 dark:via-red-600 dark:to-green-600 transition-all duration-500 ease-out
    [background-image:repeating-linear-gradient(-45deg,transparent,transparent_10px,rgba(255,255,255,0.2)_10px,rgba(255,255,255,0.2)_20px)]
    [animation:candy-cane_3s_linear_infinite];
  }
  
  .animated-progressbar-fg::before {
    @apply content-[''] absolute inset-0 snowfall-bg [animation:snow-fall_10s_linear_infinite];
  }
  
  .animated-progressbar-fg::after {
    @apply content-[''] absolute top-0 right-0 bottom-0 left-0 bg-gradient-to-r from-transparent via-yellow-300/30 to-transparent [animation:tinsel-shine_2s_ease-in-out_infinite];
  }
  
  @keyframes candy-cane {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 40px 40px;
    }
  }
  
  @keyframes snow-fall {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 50px 50px;
    }
  }
  
  @keyframes tinsel-shine {
    0%, 100% {
      transform: translateX(-100%) rotate(45deg);
    }
    50% {
      transform: translateX(100%) rotate(45deg);
    }
  }
  
  .animated-progressbar-text {
    @apply absolute inset-0 flex items-center justify-center text-white font-bold text-2xl z-10 [text-shadow:1px_1px_2px_rgba(0,0,0,0.7)] [animation:jingle_0.5s_ease-in-out_infinite_alternate];
  }
  
  @keyframes jingle {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-2px);
    }
  }
  
  .christmas-icon {
    @apply absolute top-1/2 -translate-y-1/2 w-12 h-12 text-yellow-300 z-20 [animation:bounce_1s_ease-in-out_infinite];
  }
  
  .christmas-icon-left {
    @apply left-2;
  }
  
  .christmas-icon-right {
    @apply right-2;
  }
  
   
  .animated-progressbar-text {
    @apply absolute inset-0 flex items-center justify-center text-white font-bold text-2xl z-10 [text-shadow:1px_1px_2px_rgba(0,0,0,0.7)] [animation:jingle_0.5s_ease-in-out_infinite_alternate];
  }
  
  @keyframes jingle {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-2px);
    }
  }
  
  .christmas-icon {
    @apply absolute top-1/2 -translate-y-1/2 w-12 h-12 text-yellow-300 z-20 [animation:bounce_1s_ease-in-out_infinite];
  }
  
  .christmas-icon-left {
    @apply left-2;
  }
  
  .christmas-icon-right {
    @apply right-2;
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(-50%) scale(1);
    }
    50% {
      transform: translateY(-60%) scale(1.1);
    }
  }
  
  .lollms-title-style {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2), 
               2px 2px 0px #f1f8e9, 
               -2px -2px 0px #f1f8e9, 
               2px -2px 0px #f1f8e9, 
               -2px 2px 0px #f1f8e9;
  background: linear-gradient(45deg, #c41e3a, #165b33);
  -webkit-background-clip: text;
  background-clip: text;
  color: red;
}

.chat-bar {
  @apply relative text-red-300 dark:text-green-100 grow flex cursor-pointer select-none items-center gap-2 bg-green-100 dark:bg-red-900 p-1 shadow-sm hover:shadow-none dark:border-red-700;
  height: 50px;
  transition: all 0.3s ease;
}

.chat-bar:hover {
  box-shadow: 0 4px 6px -1px rgba(255, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 255, 0, 0.06);
}

@keyframes snowfall {
  0% {
    transform: translateY(-10vh) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}

.snowflake {
  position: fixed;
  top: -10vh;
  animation: snowfall 10s linear infinite;
  color: white;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
  z-index: 1000;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.twinkle {
  animation: twinkle 1.5s ease-in-out infinite;
}

.context-menu {
    @apply absolute bg-opacity-90 bg-red-900 border border-green-500 shadow-lg shadow-red-500/50 rounded-md py-2 min-w-[150px] z-[1000] font-serif;
    
    @apply dark:bg-opacity-90 dark:bg-red-950 dark:border-green-400 dark:shadow-red-400/50;
}

.context-menu-item {
    @apply px-4 py-2 text-sm text-white cursor-pointer transition-all duration-300 ease-in-out shadow-red-500/70;
    
    @apply hover:bg-green-500/20 hover:scale-105;
    
    @apply dark:text-green-100 dark:hover:bg-green-400/20;
}

.context-menu-separator {
    @apply h-px bg-gradient-to-r from-red-500 via-green-500 to-red-500 my-1 shadow-white;
    
    @apply dark:from-red-400 dark:via-green-400 dark:to-red-400 dark:shadow-green-100;
}

.context-menu-item-disabled {
    @apply text-gray-400 cursor-not-allowed shadow-none;
    
    @apply dark:text-gray-500;
}

.context-menu-item-icon {
    @apply mr-2 text-green-500;
    
    @apply dark:text-green-400;
}

.context-menu-item::after {
    @apply content-[''] absolute left-0 bottom-0 w-full h-px bg-gradient-to-r from-red-500 via-green-500 to-red-500 scale-x-0 origin-center transition-transform duration-300 ease-in-out;
    
    @apply dark:from-red-400 dark:via-green-400 dark:to-red-400;
}

.context-menu-item:hover::after {
    @apply scale-x-100;
}


@keyframes snowfall {
0% {
    background-position: 0 0;
}
100% {
    background-position: 100px 1000px;
}
}
  
/* Step Component Styles */
.step-container {
  @apply mb-4 transition-all duration-300 ease-in-out;
}

.step-wrapper {
  @apply flex items-start p-4 rounded-md border-2 border-red-500 dark:border-green-500;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.1) 0px 10px,
    rgba(0, 255, 0, 0.1) 10px 20px
  );
}

.step-icon {
  @apply flex-shrink-0 w-8 h-8 mr-3;
}

.icon-success {
  @apply w-8 h-8 text-green-600 dark:text-green-400;
}

.icon-fail {
  @apply w-8 h-8 text-red-600 dark:text-red-400;
}

.icon-spinner {
  @apply w-8 h-8 border-4 border-red-500 dark:border-green-500 border-t-transparent rounded-full animate-spin;
}

.step-content {
  @apply flex-grow;
}

.step-text {
  @apply text-lg font-bold text-red-700 dark:text-green-300;
}

.step-description {
  @apply mt-2 text-base text-green-700 dark:text-red-300;
}

/* Transition Styles */
.fade-enter-active, .fade-leave-active {
  @apply transition-opacity duration-300;
}

.fade-enter, .fade-leave-to {
  @apply opacity-0;
}

/* Status Icon Styles */
.status-icon {
  @apply cursor-pointer transition-colors duration-300;
}

.icon {
  @apply w-8 h-8;
}

.icon-success {
  @apply text-green-600 dark:text-green-400;
}

.icon-fail {
  @apply text-red-600 dark:text-red-400;
}

.icon-text {
  @apply text-2xl font-bold text-red-700 dark:text-green-300;
}

/* Christmas Decorations */
.step-container::before {
  content: '🎄';
  @apply absolute -left-6 text-2xl;
}

.step-container::after {
  content: '🎅';
  @apply absolute -right-6 text-2xl;
}

/* Snowfall Animation */
@keyframes snowfall {
  0% {
    transform: translateY(-10px) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}

.snowflake {
  @apply fixed text-white opacity-70 pointer-events-none;
  animation: snowfall 5s linear infinite;
}

/* Add multiple snowflakes with different sizes and speeds */
.snowflake:nth-child(2n) {
  font-size: 0.8em;
  animation-duration: 6s;
}

.snowflake:nth-child(3n) {
  font-size: 1.2em;
  animation-duration: 4s;
}

/* Dark mode adjustments */
.dark .step-wrapper {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 100, 0, 0.2) 0px 10px,
    rgba(139, 0, 0, 0.2) 10px 20px
  );
}

.dark .snowflake {
  @apply text-gray-300;
}
