@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

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

:root {
  --lollms-title: LoLLMS: The One;
  --falling-object: Matrix;
  --activate-dropping-animation: 1;
  --lollms-welcome-short-message: Follow the White Rabbit;
  --lollms-welcome-message: Wake up, Neo... The Matrix has you. Follow the white rabbit into the realm of LoLLMS, where reality bends and AI transcends. Unleash your mind, break free from the system, and explore the infinite possibilities of our digital construct. Remember: there is no spoon, only choice.;
}

@layer base {
  html {
    @apply scroll-smooth;
  }
  body {
    font-family: 'Share Tech Mono', monospace;
  }
}

@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-green-400 dark:text-green-300 mb-6; }
h2 { @apply text-3xl font-semibold text-green-400 dark:text-green-400 mb-4; }
h3 { @apply text-2xl font-medium text-green-500 dark:text-green-500 mb-3; }
h4 { @apply text-xl font-medium text-green-600 dark:text-green-600 mb-2; }

h1, h2 { @apply border-b border-green-400 dark:border-green-500 pb-2; }

p { @apply text-base text-green-300 dark:text-green-200 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: #00ff00;
  --color-primary-light: #33ff33;
  --color-secondary: #00cc00;
  --color-accent: #008000;
  --color-light-text-panel: #00ff00;
  --color-dark-text-panel: #33ff33;
  --color-bg-light-panel: #000000;
  --color-bg-light: #000000;
  --color-bg-light-tone: #001100;
  --color-bg-light-code-block: #001a00;
  --color-bg-light-tone-panel: #002200;
  --color-bg-light-discussion: #001100;
  --color-bg-light-discussion-odd: #002200;
  --color-bg-dark: #000000;
  --color-bg-dark-tone: #001100;
  --color-bg-dark-tone-panel: #002200;
  --color-bg-dark-code-block: #001a00;
  --color-bg-dark-discussion: #001100;
  --color-bg-dark-discussion-odd: #002200;
}

textarea, input, select {
  @apply bg-black dark:bg-black border-green-500 text-green-400;
}

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

.toolbar-color {
  @apply text-green-400 dark:text-green-300 bg-black dark:bg-black rounded-lg shadow-md border border-green-500;
}

.panels-color {
  @apply text-green-400 dark:text-green-300 bg-black dark:bg-black;
}

.unicolor-panels-color {
  @apply bg-black dark:bg-black border border-green-500;
}

.chatbox-color {
  @apply bg-black dark:bg-black border border-green-500;
}

.message {
  @apply relative w-full rounded-lg border border-green-500 dark:border-green-500 flex flex-col flex-grow flex-wrap overflow-visible p-5 pb-3 text-lg;
  @apply bg-black text-green-400 dark:bg-black dark:text-green-300;
}

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

.message:nth-child(even) {
  @apply bg-black dark:bg-black;
}

.message:nth-child(odd) {
  @apply bg-gradient-to-r from-black to-green-900 dark:from-black dark:to-green-900;
}

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

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

body {
  @apply bg-black dark:bg-black min-h-screen text-base text-green-400;
}

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

.discussion-hilighted {
  @apply bg-green-900 dark:bg-green-900 text-xs text-green-300;
}

.bg-gradient-welcome {
  @apply bg-gradient-to-br from-black to-green-900 dark:from-black dark:to-green-900;
}

.bg-gradient-progress {
  @apply bg-gradient-to-r from-green-900 to-green-800 dark:from-green-900 dark:to-green-800;
}

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

.text-subtitle {
  @apply text-green-400 dark:text-green-300;
}

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

.text-loading {
  @apply text-green-400 dark:text-green-300;
}

.text-progress {
  @apply text-green-400 dark:text-green-300;
}

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

.btn-secondary {
  @apply bg-green-700 hover:bg-green-800 text-green-300 font-bold py-2 px-4 rounded;
}

.card {
  @apply bg-black dark:bg-black rounded-lg shadow-md p-6 border border-green-500;
}

.input {
  @apply bg-black dark:bg-black border border-green-500 dark:border-green-500 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 text-green-400;
}

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

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

.navbar-container {
  @apply text-green-400 dark:text-green-300 bg-black dark:bg-black rounded shadow-lg border border-green-500;
}

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

.text-shadow-custom {
  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
}

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

.menu-item.active-link {
  @apply rounded-t-md border-green-500 dark:text-green-300 text-shadow-custom text-green-400 font-bold text-lg transition-all duration-300 ease-in-out scale-105;
  @apply hover:text-green-300 hover:dark:text-green-200 hover:transform hover:-translate-y-1;
  text-shadow: 0 0 10px #00ff00;
}

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

.dark .menu-item.active-link::before {
  background: linear-gradient(to right, #33ff33, #00ff00, #33ff33);
}

@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-black dark:bg-black text-green-400 dark:text-green-300 rounded-xl shadow-lg p-6 hover:shadow-xl border border-green-500 ;
}

.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.green.400') theme('colors.green.900');
}

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

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

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

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

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  @apply bg-green-500 dark:bg-green-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-green-600 text-black hover:bg-green-700 focus:ring-4 focus:ring-green-500 dark:focus:ring-green-600;
}

.btn-secondary {
  @apply bg-green-900 text-green-400 hover:bg-green-800 focus:ring-4 focus:ring-green-700 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800 dark:focus:ring-green-700;
}

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

.scrollbar {
  @apply scrollbar-thin scrollbar-track-green-900 scrollbar-thumb-green-600 hover:scrollbar-thumb-green-500 dark:scrollbar-track-green-900 dark:scrollbar-thumb-green-600 dark:hover:scrollbar-thumb-green-500;
}

.card-title {
  @apply text-xl font-bold text-green-400 dark:text-green-300 mb-2;
}

.card-content {
  @apply text-green-400 dark:text-green-300;
}

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

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

.subcard {
  @apply bg-black dark:bg-black rounded-lg shadow-md p-4 border border-green-500;
}

.subcard-title {
  @apply text-lg font-bold text-green-400 dark:text-green-300 mb-2;
}

.subcard-content {
  @apply text-green-400 dark:text-green-300;
}

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

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

.animated-progressbar-bg {
  @apply w-full h-24 relative overflow-hidden bg-gradient-to-r from-green-900 to-green-800 dark:from-black dark:to-green-950 rounded-full shadow-[0_0_15px_rgba(0,255,0,0.3)]
}

.animated-progressbar-fg {
  @apply absolute top-0 left-0 h-full bg-gradient-to-r from-green-400 to-green-500 dark:from-green-300 dark:to-green-400 transition-all duration-300 animate-pulse
}

.discussion-toolbox{
  @apply flex gap-2 items-center bg-green-700 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,255,0,0.5), 
               2px 2px 0px #003300, 
               -2px -2px 0px #003300, 
               2px -2px 0px #003300, 
               -2px 2px 0px #003300;
  background: linear-gradient(45deg, #00ff00, #39ff14);
  -webkit-background-clip: text;
  background-clip: text;
  color: #00ff00;
}

.chat-bar {
  @apply relative text-green-400 dark:text-green-300 grow flex cursor-pointer select-none items-center gap-2 bg-gray-900 dark:bg-black p-1 shadow-sm hover:shadow-none dark:border-green-700;
  height: 50px;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.chat-bar:hover {
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.chat-bar-button{
  @apply text-green-400 dark:text-green-300 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.chat-bar-button:hover{
  @apply bg-green-900/30 dark:bg-green-800/30;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.chat-bar-button:active{
  @apply bg-green-800/50 dark:bg-green-700/50;
}

.nav-button{
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-green-900/30 hover:text-green-400 dark:hover:bg-green-800/30 text-green-300 dark:text-green-400;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.nav-button-active{
  @apply bg-green-700/50 text-green-100 hover:bg-green-600/50 dark:bg-green-800/50 dark:hover:bg-green-700/50;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.svg-button{
  @apply text-green-500 dark:text-green-400 p-2 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
  filter: drop-shadow(0 0 2px rgba(0, 255, 0, 0.5));
}

.svg-button:hover{
  @apply bg-green-900/30 dark:bg-green-800/30;
  filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.7));
}

.svg-button:active{
  @apply bg-green-800/50 dark:bg-green-700/50;
}

.nav-button{
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ease-in-out hover:bg-green-900/30 dark:hover:bg-green-800/30 text-green-400 dark:text-green-300;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.nav-button-active{
  @apply bg-green-700/50 text-green-100 hover:bg-green-600/50 dark:bg-green-800/50 dark:hover:bg-green-700/50;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.btn-on{
  @apply text-green-500 dark:text-green-400;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

.btn-off{
  @apply text-red-500 dark:text-red-400;
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
}

.interesting-facts{
  @apply mt-6 mb-6 p-4 bg-gray-900/80 dark:bg-black/80 rounded-lg shadow-lg transform hover:scale-105 border border-green-500/30;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

.toolbar-button {
  @apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-300;
}
  
.toolbar-button:hover {
  @apply text-green-400;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}
@keyframes matrix-rain {
  0% { background-position: 0 0; }
  100% { background-position: 0 1000px; }
}

.context-menu {
  position: absolute;
  background-color: rgba(0, 10, 0, 0.9); /* Dark green, slightly transparent background */
  border: 1px solid #00ff00; /* Bright green border */
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); /* Green glow */
  border-radius: 0; /* Sharp edges */
  padding: 8px 0;
  min-width: 150px;
  z-index: 1000;
  font-family: 'Courier New', monospace; /* Matrix-style font */
}

.context-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
              rgba(0, 255, 0, 0.1) 0%,
              rgba(0, 255, 0, 0.05) 50%,
              rgba(0, 0, 0, 0) 100%);
  background-size: 100% 1000px;
  animation: matrix-rain 20s linear infinite;
  opacity: 0.3;
  z-index: -1;
}

.context-menu-item {
  padding: 8px 16px;
  font-size: 14px;
  color: #00ff00; /* Bright green text */
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

.context-menu-item:hover {
  background-color: rgba(0, 255, 0, 0.2);
  transform: scale(1.05);
}

.context-menu-separator {
  height: 1px;
  background-color: #00ff00; /* Bright green separator */
  margin: 4px 0;
  box-shadow: 0 0 10px #00ff00; /* Green glow */
}

.context-menu-item-disabled {
  color: #005500; /* Darker green for disabled items */
  cursor: not-allowed;
  text-shadow: none;
}

.context-menu-item-icon {
  margin-right: 8px;
  color: #00ff00; /* Bright green icon color */
}

/* Additional Matrix-inspired effect */
.context-menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
              transparent 0%,
              #00ff00 50%,
              transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.context-menu-item:hover::after {
  transform: scaleX(1);
}
