/* Custom font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&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;
  }
  @font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  }
  @font-face {
    font-family: 'PTSans';
    src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
  }
}

@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-gray-900 dark:text-gray-100 mb-6; }
h2 {
@apply text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-4;
}

h3 {
@apply text-2xl font-medium text-gray-700 dark:text-gray-300 mb-3;
}

h4 {
@apply text-xl font-medium text-gray-600 dark:text-gray-400 mb-2;
}

/* Optional: Add a subtle bottom border to headers for added distinction */
h1, h2{
@apply border-b border-gray-200 dark:border-gray-700 pb-2;
}


p {
  @apply text-base text-gray-600 dark:text-gray-300 break-words;
}

/* 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: #0e8ef0;
  --color-primary-light: #3dabff;
  --color-secondary: #0fd974;
  --color-accent: #f0700e;
  --color-light-text-panel: #ffffff;
  --color-dark-text-panel: #ffffff;
  --color-bg-light-panel: #7cb5ec;
  --color-bg-light: #e2edff;
  --color-bg-light-tone: #b9d2f7;
  --color-bg-light-code-block: #cad7ed;
  --color-bg-light-tone-panel: #8fb5ef;
  --color-bg-light-discussion: #c5d8f8;
  --color-bg-light-discussion-odd: #d6e7ff;
  --color-bg-dark: #132e59;
  --color-bg-dark-tone: #25477d;
  --color-bg-dark-tone-panel: #4367a3;
  --color-bg-dark-code-block: #2254a7;
  --color-bg-dark-discussion: #435E8A;
  --color-bg-dark-discussion-odd: #284471;
}
/* For both textarea and input elements */
textarea, input, select {
  @apply bg-gray-100 dark:bg-gray-800;
}

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

.toolbar-color {
  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg
}
.panels-color {
  @apply text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg;
}
.unicolor-panels-color {
  @apply bg-blue-200 dark:bg-blue-800
}
.chatbox-color {
  @apply bg-gradient-to-br from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900
}

/* Base message styling */ 
.message { @apply relative w-full rounded-lg m-2 shadow-lg border border-gray-200 dark:border-gray-700 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg; /* Increased from text-base to text-lg */ }
.message:hover {
@apply border-blue-400 dark:border-blue-500;
}

/* Light theme */
.message {
@apply bg-blue-200 text-gray-800;
}

/* Dark theme */
.dark .message {
@apply bg-blue-800 text-gray-200;
}

/* Alternating backgrounds for better distinction */
.message:nth-child(even) {
@apply bg-blue-50 dark:bg-blue-700;
}

.message:nth-child(odd) {
@apply bg-blue-200 dark:bg-blue-800;
}

/* Additional styling for more professional look */
.message-header {
@apply text-xl font-semibold mb-2; /* Increased from text-lg to text-xl */
}

.message-content {
@apply text-lg leading-relaxed; /* Increased from text-base to text-lg */
}

/* Body styling */
body {
@apply bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen text-base; /* Added text-base for default body text */
}

.discussion{
  @apply mr-2 bg-gradient-to-r from-blue-200 to-blue-200 dark:from-blue-900 dark:to-blue-900 text-xs
}
.discussion-hilighted{
  @apply bg-gradient-to-r from-blue-300 to-blue-200 dark:from-blue-800 dark:to-purple-900 text-xs
}



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

.bg-gradient-progress {
  @apply bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800;
}

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

.text-subtitle {
  @apply text-gray-600 dark:text-gray-300;
}

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

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

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

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

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

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

.input {
  @apply bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-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-gray-700 dark:text-gray-300 mb-1;
}

.link {
  @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300;
}
.navbar-container {
  @apply  text-gray-700 dark:text-gray-50 bg-gradient-to-r from-blue-200 to-blue-300 dark:from-blue-800 dark:to-blue-900 rounded shadow-lg
}

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

.text-shadow-custom {
  text-shadow: 1px 1px 0px white, -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white;
}
.menu-item {
  @apply mb-2 px-4 py-2 text-green-600 dark:text-green-300 font-bold text-lg transition-all duration-300 ease-in-out;
  @apply hover:text-red-400 hover:dark:text-red-200 hover:transform hover:-translate-y-1;
}

.menu-item.active-link {
  @apply rounded-t-md border-red-500 text-shadow-custom text-red-600 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
  @apply hover:text-red-700 hover:dark:text-red-300 hover:transform hover:-translate-y-1;
  /* Glow effect on text */
  text-shadow: 0 0 10px rgba(255, 100, 100, 0.5);
}

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

.dark .menu-item.active-link::before {
  background: linear-gradient(to right, #8b0000, #ff0000, #8b0000); /* Dark mode strawberry colors */
}

@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;
}



@keyframes lightsaber {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}




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

.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.300') theme('colors.blue.100');
}

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

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

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

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

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  @apply bg-blue-400 dark:bg-blue-600;
}
.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-500 text-white hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800;
}

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

.search-input {
  @apply w-full border-b-2 border-blue-200 dark:border-blue-700 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-gray-800 dark:text-gray-100;
}

.scrollbar {
  @apply scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary
}

.card-title {
  @apply text-xl font-bold text-gray-900 dark:text-white mb-2;
}

.card-content {
  @apply text-gray-700 dark:text-gray-300;
}

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

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

/* Subcard styles */
.subcard {
  @apply bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md p-4;
}

.subcard-title {
  @apply text-lg font-bold text-gray-900 dark:text-white mb-2;
}

.subcard-content {
  @apply text-gray-700 dark:text-gray-300;
}

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

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

.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 
}

.animated-progressbar-bg{
  @apply w-full h-10 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 #e0f2fe, 
               -2px -2px 0px #e0f2fe, 
               2px -2px 0px #e0f2fe, 
               -2px 2px 0px #e0f2fe;
  background: linear-gradient(45deg, #0284c7, #38bdf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.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(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
}

.chat-bar-button{
  @apply text-blue-200 dark:text-blue-100 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
}

.chat-bar-button:hover{
  @apply bg-blue-800 dark:bg-blue-700
}

.chat-bar-button:active{
  @apply bg-blue-700 dark:bg-blue-600
}

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

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

.svg-button{
  @apply text-blue-600 dark:text-blue-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-blue-200 dark:bg-blue-700
}

.svg-button:active{
  @apply bg-blue-300 dark:bg-blue-600
}

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

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

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

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

.interesting-facts{
  @apply mt-6 mb-6 p-4 bg-blue-50/80 dark:bg-blue-900/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;
}
:root {
  --lollms-primary: #0056b3;
  --lollms-secondary: #007bff;
  --lollms-light: #e6f2ff;
  --lollms-dark: #004085;
  --lollms-text: #333333;
}

.context-menu {
  position: absolute;
  background-color: var(--lollms-light);
  border: 1px solid var(--lollms-secondary);
  box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
  border-radius: 6px;
  padding: 8px 0;
  min-width: 180px;
  z-index: 1000;
  font-family: 'Arial', sans-serif;
}

.context-menu-item {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--lollms-text);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.context-menu-item:hover {
  background-color: var(--lollms-secondary);
  color: white;
}

.context-menu-separator {
  height: 1px;
  background-color: var(--lollms-secondary);
  margin: 6px 0;
  opacity: 0.5;
}

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

.context-menu-item-icon {
  margin-right: 10px;
  color: var(--lollms-primary);
}

.context-menu-item:hover .context-menu-item-icon {
  color: white;
}

/* LoLLMs branding */
.context-menu::before {
  content: "LoLLMs";
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 12px;
  color: var(--lollms-primary);
  font-weight: bold;
  letter-spacing: 1px;
}

/* Subtle AI-inspired background pattern */
.context-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle, var(--lollms-secondary) 1px, transparent 1px),
    radial-gradient(circle, var(--lollms-secondary) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.05;
  pointer-events: none;
}
