/* Soft Bluish Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --lollms-title: LoLLMS;
  --falling-object: "";
  --activate-dropping-animation: 0;
  --lollms-welcome-short-message: Welcome to LoLLMS;
  --lollms-welcome-message: Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.;
}

@layer base {
  html {
    @apply scroll-smooth;
  }
  body {
    font-family: 'Roboto', sans-serif;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.display-none {
  @apply hidden;
}

h1 { @apply text-4xl md:text-5xl font-bold text-blue-800 dark:text-blue-100 mb-6; }
h2 { @apply text-3xl font-semibold text-blue-700 dark:text-blue-200 mb-4; }
h3 { @apply text-2xl font-medium text-blue-600 dark:text-blue-300 mb-3; }
h4 { @apply text-xl font-medium text-blue-500 dark:text-blue-400 mb-2; }

h1, h2 { @apply border-b border-blue-300 dark:border-blue-600 pb-2; }

p {
  @apply 
    text-base 
    dark:text-blue-300 
    break-words
    font-sans 
    antialiased 
    tracking-tight 
    leading-relaxed;
}

@screen md {
  p {
    @apply 
      text-lg
      leading-loose;
  }
}


/* Base list styling */
ul, ol {
  @apply 
      my-4          /* Margin top and bottom */
      px-4          /* Horizontal padding */
      leading-7     /* Line height */
      text-base;    /* Text size */
}

/* Unordered lists */
ul {
  @apply 
      list-disc     /* Disc style bullets */
      ml-2          /* Left margin */
      space-y-2;    /* Vertical spacing */
}

/* List items */
li {
  @apply 
      pl-2         /* Padding left */
      relative;    /* Positioning */
}

/* Ordered lists */
ol {
  @apply 
      list-decimal  /* Numbered style */
      ml-2          /* Left margin */
      space-y-2;    /* Vertical spacing */
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
  @apply 
      mt-2         /* Top margin */
      mb-0         /* Bottom margin */
      ml-6;        /* Indentation */
}

/* For custom properties that aren't available in Tailwind, use regular CSS */
li::marker {
  color: #4B5563; /* gray-600 equivalent */
}


:root {
  --color-primary: #4a90e2;
  --color-primary-light: #6ab7f1;
  --color-secondary: #8ab8e0;
  --color-accent: #3a7ca1;
  --color-light-text-panel: #ffffff;
  --color-dark-text-panel: #e0e0e0;
  --color-bg-light-panel: #f0faff;
  --color-bg-light: #ffffff;
  --color-bg-light-tone: #e0f0ff;
  --color-bg-light-code-block: #f5faff;
  --color-bg-light-tone-panel: #d0e0f0;
  --color-bg-light-discussion: #f8faff;
  --color-bg-light-discussion-odd: #f0faff;
  --color-bg-dark: #0a0a1a; /* Updated to a darker blue */
  --color-bg-dark-tone: #151521; /* Updated to a darker blue */
  --color-bg-dark-tone-panel: #1c1c2a; /* Updated to a darker blue */
  --color-bg-dark-code-block: #151521; /* Updated to a darker blue */
  --color-bg-dark-discussion: #0e0e1a; /* Updated to a darker blue */
  --color-bg-dark-discussion-odd: #0d0d1a; /* Updated to a darker blue */
}

textarea, input, select {
  @apply bg-blue-100 dark:bg-blue-900;
}

.background-color {
  @apply bg-gradient-to-br from-blue-100 to-purple-300 dark:from-blue-800 dark:to-purple-900 min-h-screen;
}

.toolbar-color {
  @apply text-blue-700 dark:text-blue-200 bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md;
}

.panels-color {
  @apply text-blue-700 dark:text-blue-200 bg-blue-100 dark:bg-blue-800;
}

.unicolor-panels-color {
  @apply bg-blue-200 dark:bg-blue-700;
}

.chatbox-color {
  @apply bg-blue-50 dark:bg-blue-800;
}

.message {
  @apply relative w-full m-2 shadow-lg rounded-lg border border-blue-300 dark:border-blue-600 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
  @apply bg-blue-100 text-blue-900 dark:bg-gradient-to-br dark:from-blue-900 dark:to-blue-800 dark:text-blue-100; /* Added gradient for dark mode */
}

.message:hover {
  @apply border-blue-400 dark:border-blue-500;
}

.message:nth-child(even) {
  @apply bg-blue-50 dark:bg-blue-900; /* Darker background for even messages */
}

.message:nth-child(odd) {
  @apply bg-blue-100 dark:bg-blue-800; /* Darker background for odd messages */
}

.message-header {
  @apply text-xl font-semibold mb-2;
}

.message-content {
  @apply text-lg leading-relaxed;
}

body {
  @apply bg-blue-100 dark:bg-blue-900 min-h-screen text-base;
}

.discussion {
  @apply mr-2 text-xs;
}

.discussion-hilighted {
  @apply bg-blue-200 dark:bg-blue-800 text-xs;
}

.bg-gradient-welcome {
  @apply bg-gradient-to-br from-blue-100 to-purple-300 dark:from-blue-800 dark:to-purple-900;
}

.bg-gradient-progress {
  @apply bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-700 dark:to-blue-600;
}

.text-gradient-title {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-300 dark:to-blue-500;
}

.text-subtitle {
  @apply text-blue-600 dark:text-blue-400;
}

.text-author {
  @apply text-blue-500 dark:text-blue-400;
}

.text-loading {
  @apply text-blue-700 dark:text-blue-300;
}

.text-progress {
  @apply text-blue-600 dark:text-blue-400;
}

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

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

.card {
  @apply bg-white dark:bg-blue-800 rounded-lg shadow-md p-6;
}

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

.label {
  @apply block text-sm font-medium text-blue-700 dark:text-blue-300 mb-1;
}

.link {
  @apply text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200;
}

.navbar-container {
  @apply text-blue-700 dark:text-blue-200 bg-blue-200 dark:bg-blue-800 rounded shadow-lg;
}

.game-menu {
  @apply flex justify-center items-center relative;
}

.text-shadow-custom {
  text-shadow: 1px 1px 0px #e0e0e0, -1px -1px 0px #e0e0e0, 1px -1px 0px #e0e0e0, -1px 1px 0px #e0e0e0;
}

.menu-item {
  @apply mb-2 px-4 py-2 text-blue-600 dark:text-blue-300 font-bold text-lg transition-all duration-300 ease-in-out;
  @apply hover:text-blue-800 hover:dark:text-blue-200 hover:transform hover:-translate-y-1;
}

.menu-item.active-link {
  @apply rounded-t-md border-blue-500 dark:text-blue-300 text-shadow-custom text-blue-800 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
  @apply hover:text-blue-900 hover:dark:text-blue-200 hover:transform hover:-translate-y-1;
  text-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
}

.menu-item.active-link::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, #4a90e2, #8ab8e0, #4a90e2);
  border-radius: 10px;
  animation: shimmer 2s infinite;
}

.dark .menu-item.active-link::before {
  background: linear-gradient(to right, #6ab7f1, #aaaaaa, #6ab7f1);
}

@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.feather-emoji {
  display: inline-block;
  margin-left: 5px;
  animation: bounce 2s infinite;
}

.app-card {
  @apply transition-all duration-300 ease-in-out bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 border rounded-xl shadow-lg p-6 hover:shadow-xl ;
}

.app-card:hover {
  @apply transform -translate-y-1;
}

button {
  @apply transition-all duration-300 ease-in-out;
}

button:hover {
  @apply transform -translate-y-0.5;
}

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.blue.400') theme('colors.blue.200');
}

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

.scrollbar-thin::-webkit-scrollbar {
  @apply w-2;
}

.scrollbar-thin::-webkit-scrollbar-track {
  @apply bg-blue-200 dark:bg-blue-800 rounded-full;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  @apply bg-blue-400 dark:bg-blue-600 rounded-full;
}

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

.btn {
  @apply font-semibold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out shadow-md flex items-center;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600;
}

.btn-secondary {
  @apply bg-blue-200 text-blue-700 hover:bg-blue-300 focus:ring-4 focus:ring-blue-200 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600 dark:focus:ring-blue-600;
}

.search-input {
  @apply w-full border-b-2 border-blue-300 dark:border-blue-600 py-2 px-4 pl-10 transition-colors duration-300 ease-in-out focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 bg-transparent text-blue-800 dark:text-blue-100;
}

.scrollbar {
  @apply scrollbar-thin scrollbar-track-blue-200 scrollbar-thumb-blue-400 hover:scrollbar-thumb-blue-500 dark:scrollbar-track-blue-700 dark:scrollbar-thumb-blue-600 dark:hover:scrollbar-thumb-blue-500;
}

.card-title {
  @apply text-xl font-bold text-blue-800 dark:text-blue-100 mb-2;
}

.card-content {
  @apply text-blue-600 dark:text-blue-300;
}

.card-footer {
  @apply mt-4 flex justify-between items-center;
}

.card-footer-button {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.subcard {
  @apply bg-blue-50 dark:bg-blue-800 rounded-lg shadow-md p-4;
}

.subcard-title {
  @apply text-lg font-bold text-blue-800 dark:text-blue-100 mb-2;
}

.subcard-content {
  @apply text-blue-600 dark:text-blue-300;
}

.subcard-footer {
  @apply mt-4 flex justify-between items-center;
}

.subcard-footer-button {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.animated-progressbar-bg{
  @apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
}
.animated-progressbar-fg{
  @apply absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600 transition-all duration-300
}

.discussion-toolbox{
  @apply flex gap-2 items-center bg-white dark:bg-gray-800 p-2 rounded-l-md shadow-md transform translate-x-full group-hover:translate-x-0 transition-transform duration-300
}
.lollms-title-style{
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2), 
  2px 2px 0px white, 
  -2px -2px 0px white, 
  2px -2px 0px white, 
  -2px 2px 0px white;
background: linear-gradient(45deg, #f59e0b, #fbbf24);
-webkit-background-clip: text;
background-clip: text;
}

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


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

.svg-button{
  @apply text-gray-600 dark:text-gray-300  p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
}

.svg-button:hover{
  @apply bg-gray-200 dark:bg-gray-700
}
.svg-button:active{
  @apply bg-gray-300 dark:bg-gray-600
}
.nav-button{
  @apply  px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300
}

.nav-button-active{
  @apply  bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700
}

.btn-on{
  @apply text-green-500 dark:text-green-400
}

.btn-off{
  @apply text-red-500 dark:text-red-400
}

.interesting-facts{
  @apply mt-6 mb-6 p-4 bg-white/80 dark:bg-gray-800/80 rounded-lg shadow-lg transform hover:scale-105 
}


.toolbar-button {
@apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
}
  
.toolbar-button:hover {
@apply text-blue-500; /* Assuming #007bff is close to Tailwind's blue-500 */
}


.context-menu {
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 8px 0;
  min-width: 150px;
  z-index: 1000;
}

.context-menu-item {
  padding: 8px 16px;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.context-menu-item:hover {
  background-color: #f5f5f5;
}

.context-menu-separator {
  height: 1px;
  background-color: #e0e0e0;
  margin: 4px 0;
}

.context-menu-item-disabled {
  color: #999999;
  cursor: not-allowed;
}

.context-menu-item-icon {
  margin-right: 8px;
}
@keyframes matrix-rain {
  0% { background-position: 0 0; }
  100% { background-position: 0 1000px; }
}
@layer components {
  .context-menu {
    @apply absolute bg-opacity-90 bg-green-900 border border-green-500 shadow-lg shadow-green-500/50 rounded-none py-2 min-w-[150px] z-[1000] font-mono;
    
    @apply dark:bg-opacity-90 dark:bg-green-950 dark:border-green-400 dark:shadow-green-400/50;
  }

  .context-menu::before {
    @apply content-[''] absolute inset-0 bg-gradient-to-b from-green-500/10 via-green-500/5 to-transparent bg-[length:100%_1000px] opacity-30 -z-10;
  }

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

  .context-menu-separator {
    @apply h-px bg-green-500 my-1 shadow-green-500;
    
    @apply dark:bg-green-400 dark:shadow-green-400;
  }

  .context-menu-item-disabled {
    @apply text-green-800 cursor-not-allowed shadow-none;
    
    @apply dark:text-green-700;
  }

  .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-transparent via-green-500 to-transparent scale-x-0 origin-center transition-transform duration-300 ease-in-out;
    
    @apply dark:via-green-400;
  }

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

@keyframes matrix-rain {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 1000px;
  }
}
