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

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

/* Root variables define core colors for light and dark modes */
:root {
  --lollms-title: "LoLLMS";
  --falling-object: •; /* Simple dot */
  --activate-dropping-animation: 0; /* Keep animation off for sober theme */
  --lollms-welcome-short-message: Welcome;
  --lollms-welcome-message: Engage with LoLLMS, a platform designed for clarity and efficiency in AI interaction. Explore the capabilities of large language models in a focused environment.;

  /* Core Palette - Grays */
  --color-bg-light: #ffffff; /* White */
  --color-bg-light-tone: #f8f9fa; /* Very light gray */
  --color-bg-light-panel: #ffffff; /* White */
  --color-bg-light-tone-panel: #f1f3f5; /* Light gray */
  --color-bg-light-code-block: #f1f3f5; /* Light gray */
  --color-bg-light-discussion: #ffffff; /* White */
  --color-bg-light-discussion-odd: #f8f9fa; /* Very light gray */

  --color-bg-dark: #121212; /* Very dark gray / near black */
  --color-bg-dark-tone: #1e1e1e; /* Dark gray */
  --color-bg-dark-panel: #1e1e1e; /* Dark gray */
  --color-bg-dark-tone-panel: #2a2a2a; /* Slightly lighter dark gray */
  --color-bg-dark-code-block: #2a2a2a; /* Slightly lighter dark gray */
  --color-bg-dark-discussion: #1e1e1e; /* Dark gray */
  --color-bg-dark-discussion-odd: #121212; /* Very dark gray / near black */

  /* Text Palette */
  --color-text-light: #212529; /* Almost black */
  --color-text-light-muted: #6c757d; /* Gray */
  --color-text-dark: #e9ecef; /* Light gray / Off-white */
  --color-text-dark-muted: #adb5bd; /* Lighter gray */

  /* Accent Palette (Optional - using a neutral dark/light gray here) */
  --color-accent-light: #343a40; /* Dark Gray */
  --color-accent-dark: #ced4da; /* Light Gray */

  /* Border Palette */
  --color-border-light: #dee2e6; /* Light gray */
  --color-border-dark: #495057; /* Dark gray */
}

@layer base {
  html {
    @apply scroll-smooth;
  }
  body {
    font-family: 'Inter', sans-serif; /* Modern sans-serif */
    /* Uses Tailwind dark: prefix for background and text colors */
    @apply bg-white dark:bg-[#121212] text-[#212529] dark:text-[#e9ecef];
  }
}

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

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

.display-none {
  @apply hidden;
}

/* --- Typography --- */
/* Uses dark: prefixes for text colors */
h1 { @apply text-3xl md:text-4xl font-semibold text-gray-900 dark:text-white mb-5; }
h2 { @apply text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-100 mb-4; }
h3 { @apply text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-3; }
h4 { @apply text-lg md:text-xl font-medium text-gray-600 dark:text-gray-300 mb-2; }

/* Subtle borders with dark mode variant */
h1, h2 { @apply border-b border-gray-200 dark:border-gray-700 pb-2; }

/* Paragraphs with dark mode text color */
p {
  @apply
    text-base
    text-gray-700 dark:text-gray-300
    break-words
    font-sans
    antialiased
    tracking-normal /* Adjusted tracking */
    leading-relaxed
    md:text-base /* Keep base text size consistent */
    md:leading-7; /* Adjusted leading */
}

/* Lists base styles */
ul, ol {
  @apply
      my-4
      pl-5 /* Use padding for indentation */
      leading-7
      text-base;
}

/* Unordered lists */
ul {
  @apply
      list-disc
      space-y-1.5; /* Slightly tighter spacing */
}

/* List items */
li {
  @apply
      pl-1 /* Minimal padding left */
      relative;
}

/* Ordered lists */
ol {
  @apply
      list-decimal
      space-y-1.5; /* Slightly tighter spacing */
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
  @apply
      mt-2
      mb-0
      ml-5; /* Consistent indentation */
}

/* List markers with dark mode variant */
li::marker {
  color: var(--color-text-light-muted); /* Use CSS var */
}
.dark li::marker {
  color: var(--color-text-dark-muted); /* Use CSS var for dark mode */
}

/* --- Core Component Styling --- */
/* Form elements with dark mode variants */
textarea, input, select {
  @apply bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-1 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-gray-900 dark:text-gray-100;
}

/* Background color with dark mode variant */
.background-color {
  @apply bg-gray-50 dark:bg-gray-900 min-h-screen; /* Solid colors */
}

/* Toolbar color with dark mode variants */
.toolbar-color {
  @apply text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
}

/* Panels color with dark mode variants */
.panels-color {
  @apply text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-800;
}

/* Uni-color panels with dark mode variants */
.unicolor-panels-color {
  @apply bg-gray-100 dark:bg-gray-700;
}

/* Chatbox color with dark mode variant */
.chatbox-color {
  @apply bg-white dark:bg-gray-800;
}

/* Message styling with dark mode variants */
.message {
  @apply relative w-full m-2 shadow-sm rounded-lg border border-gray-200 dark:border-gray-700 flex flex-col flex-grow flex-wrap overflow-visible p-4 pb-3 text-base; /* Adjusted padding & text size */
  @apply text-gray-800 dark:text-gray-200;
}

.message:hover {
  @apply border-gray-300 dark:border-gray-600; /* Subtle hover border */
}

/* Alternating message background colors with dark mode variants */
.message:nth-child(even) {
  @apply bg-gray-50 dark:bg-gray-800;
}

.message:nth-child(odd) {
  @apply bg-white dark:bg-[#1e1e1e];
}

/* Message header with dark mode variant */
.message-header {
  @apply text-lg font-medium mb-2 text-gray-700 dark:text-gray-300; /* Slightly smaller/lighter header */
}

/* Message content (inherits dark mode text color from .message) */
.message-content {
  @apply text-base leading-relaxed;
}

/* Body already defined with dark mode in @layer base */
body {
  /* @apply bg-white dark:bg-[#121212] text-[#212529] dark:text-[#e9ecef]; */
}

/* Discussion text with dark mode variant */
.discussion {
  @apply mr-2 text-xs text-gray-500 dark:text-gray-400;
}

/* Highlighted discussion text with dark mode variant */
.discussion-hilighted {
  @apply bg-gray-200 dark:bg-gray-700 text-xs rounded px-1;
}

/* Welcome area background with dark mode variant */
.bg-gradient-welcome {
  @apply bg-white dark:bg-gray-800; /* Solid background */
}

/* Progress bar background with dark mode variant */
.bg-gradient-progress {
  @apply bg-gray-200 dark:bg-gray-700; /* Solid background */
}

/* Title text with dark mode variant */
.text-gradient-title {
  @apply text-gray-900 dark:text-white font-bold; /* Solid color, remove gradient */
}

/* Subtitle text with dark mode variant */
.text-subtitle {
  @apply text-gray-600 dark:text-gray-400;
}

/* Author text with dark mode variant */
.text-author {
  @apply text-gray-500 dark:text-gray-400 text-sm;
}

/* Loading text with dark mode variant */
.text-loading {
  @apply text-gray-700 dark:text-gray-300;
}

/* Progress text with dark mode variant */
.text-progress {
  @apply text-gray-600 dark:text-gray-400;
}

/* Base button styles */
.btn {
  @apply font-medium py-2 px-4 rounded-md transition-all duration-200 ease-in-out shadow-sm flex items-center focus:outline-none focus:ring-2 focus:ring-offset-1;
}

/* Primary button with dark mode variants */
.btn-primary {
  @apply bg-gray-800 hover:bg-gray-700 text-white dark:bg-gray-300 dark:text-gray-900 dark:hover:bg-gray-400 focus:ring-gray-500 dark:focus:ring-gray-400;
}

/* Secondary button with dark mode variants */
.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 focus:ring-gray-400 dark:focus:ring-gray-500 border border-gray-300 dark:border-gray-600;
}

/* Card styling with dark mode variants */
.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6;
}

/* Input styling (already defined with dark mode variants) */
.input {
  @apply bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-1 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-gray-900 dark:text-gray-100;
}

/* Label with dark mode variant */
.label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

/* Link with dark mode variants */
.link {
  @apply text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white underline decoration-gray-400 dark:decoration-gray-500 hover:decoration-gray-600 dark:hover:decoration-gray-400;
}

/* Navbar container with dark mode variants */
.navbar-container {
  @apply text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 rounded-md shadow-sm border-b border-gray-200 dark:border-gray-700;
}

/* Menu container with dark mode border */
.game-menu { /* Renamed conceptually, still affects nav */
  @apply flex justify-center items-center relative border-b border-gray-200 dark:border-gray-700;
}

/* Removed custom text shadow */
.text-shadow-custom {
  /* text-shadow: none; */
}

/* Menu item with dark mode text and hover */
.menu-item {
  @apply relative mb-0 px-4 py-3 text-gray-600 dark:text-gray-400 font-medium text-sm transition-colors duration-200 ease-in-out;
  @apply hover:text-gray-900 hover:dark:text-white;
}

/* Active menu item with dark mode text and border */
.menu-item.active-link {
  @apply text-gray-900 dark:text-white font-semibold;
}
.menu-item.active-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    @apply bg-gray-800 dark:bg-gray-200; /* Dark mode border color */
}

/* Optional subtle bounce animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.feather-emoji {
  display: inline-block;
  margin-left: 4px;
  /* animation: bounce 1.5s infinite; Optional: remove if too playful */
}

/* App card with dark mode variants */
.app-card {
  @apply transition-all duration-200 ease-in-out bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6 hover:shadow-md;
}

.app-card:hover {
  @apply transform -translate-y-0.5; /* Subtle lift */
}

/* Base button transition */
button {
  @apply transition-all duration-200 ease-in-out;
}

/* Button hover handled by btn-* classes which have dark variants */
button:hover {
  /* Hover handled by btn-* classes */
}

/* Scrollbar base styles */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.gray.400') theme('colors.gray.200');
}

/* Scrollbar dark mode colors */
.dark .scrollbar-thin {
  scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
}

/* Webkit scrollbar styles with dark mode variants */
.scrollbar-thin::-webkit-scrollbar {
  @apply w-1.5 h-1.5; /* Make scrollbar thinner */
}

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

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

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

/* Search input with dark mode variants */
.search-input {
  @apply w-full border-b border-gray-300 dark:border-gray-600 py-2 px-4 pl-10 transition-colors duration-200 ease-in-out focus:outline-none focus:border-gray-500 dark:focus:border-gray-400 bg-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500;
}

/* General scrollbar utility with dark mode variants */
.scrollbar {
  @apply scrollbar-thin scrollbar-track-gray-200 scrollbar-thumb-gray-400 hover:scrollbar-thumb-gray-500 dark:scrollbar-track-gray-700 dark:scrollbar-thumb-gray-600 dark:hover:scrollbar-thumb-gray-500;
}

/* Animated progress bar background with dark mode variant */
.animated-progressbar-bg{
  @apply w-full h-2 relative overflow-hidden bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner; /* Thinner bar, subtle shadow */
}
/* Animated progress bar foreground with dark mode variant */
.animated-progressbar-fg{
  @apply absolute top-0 left-0 h-full bg-gray-600 dark:bg-gray-400 transition-all duration-300 rounded-full; /* Solid color */
}

/* Discussion toolbox with dark mode variants */
.discussion-toolbox{
  @apply flex gap-1 items-center bg-white dark:bg-gray-700 p-1 rounded-l-md shadow-sm border border-r-0 border-gray-200 dark:border-gray-600 transform translate-x-full group-hover:translate-x-0 transition-transform duration-200;
}
/* LoLLMS title style with dark mode variant */
.lollms-title-style{
  @apply font-semibold text-gray-900 dark:text-white;
}

/* Chat bar with dark mode variants */
.chat-bar {
  @apply relative text-gray-700 dark:text-gray-300 grow flex cursor-pointer select-none items-center gap-2 bg-gray-100 dark:bg-gray-800 p-2 shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 border-t border-gray-200 dark:border-gray-700;
  height: 48px; /* Slightly reduced height */
  transition: background-color 0.2s ease;
}

/* Chat bar hover handled by base class dark variant */
.chat-bar:hover {
  /* Hover handled by base class */
}

/* SVG button with dark mode variants */
.svg-button{
  @apply text-gray-500 dark:text-gray-400 p-1.5 rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500 dark:focus:ring-gray-400;
}

.svg-button:hover{
  @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200;
}
.svg-button:active{
  @apply bg-gray-300 dark:bg-gray-600;
}
/* Nav button with dark mode variants */
.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-600 dark:text-gray-300;
}

/* Active nav button with dark mode variants */
.nav-button-active{
  @apply bg-gray-200 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-700 font-semibold;
}

/* On/Off button states with dark mode variants */
.btn-on{
  @apply text-green-600 dark:text-green-400;
}

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

/* Interesting facts section with dark mode variants */
.interesting-facts{
  @apply mt-6 mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 transform transition-transform duration-200 hover:scale-[1.02];
}

/* Toolbar button with dark mode variants */
.toolbar-button {
  @apply bg-transparent border-none cursor-pointer p-2 transition-colors duration-200 text-gray-600 dark:text-gray-400;
}

.toolbar-button:hover {
  @apply text-gray-900 dark:text-gray-100;
}


/* Context Menu - Sober Styling with Dark Mode */
@layer components {
  .context-menu {
    @apply absolute bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 shadow-lg rounded-md py-1 min-w-[160px] z-[1000];
  }

  .context-menu-item {
    @apply px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 cursor-pointer transition-colors duration-150 ease-in-out;
    @apply hover:bg-gray-100 hover:dark:bg-gray-700; /* Dark mode hover */
  }

  .context-menu-separator {
    @apply h-px bg-gray-200 dark:bg-gray-700 my-1; /* Dark mode separator */
  }

  .context-menu-item-disabled {
    @apply text-gray-400 dark:text-gray-500 cursor-not-allowed; /* Dark mode disabled */
  }

  .context-menu-item-icon {
    @apply mr-2 text-gray-500 dark:text-gray-400; /* Dark mode icon */
  }
}


/* Steps theming - Sober with Dark Mode */
.steps-container {
  @apply border border-gray-200 dark:border-gray-700 rounded-md mb-4 bg-white dark:bg-gray-800;
}

.steps-header {
  @apply flex items-center p-3 bg-gray-50 dark:bg-gray-700 cursor-pointer border-b border-gray-200 dark:border-gray-700; /* Dark mode bg/border */
}

.steps-icon {
  @apply mr-3;
}

.steps-summary {
  @apply flex-grow;
}

.steps-title {
  @apply m-0 text-sm font-medium text-gray-700 dark:text-gray-300; /* Dark mode text */
}

.steps-status {
  @apply m-0 text-xs text-gray-500 dark:text-gray-400; /* Dark mode text */
}

.toggle-icon {
  @apply text-sm text-gray-400 dark:text-gray-500; /* Dark mode text */
}

.steps-content {
  @apply p-4;
}

.steps-list {
  @apply list-none p-0 m-0;
}

.step-item {
  @apply mb-1 pl-4 border-l-2 border-gray-200 dark:border-gray-600 last:mb-0; /* Dark mode border */
}

/* Step Component Styles with Dark Mode */
.step-container {
  @apply mb-3 transition-all duration-200 ease-in-out;
}

.step-wrapper {
  @apply flex items-start p-2 rounded-md bg-transparent;
}

.step-icon {
  @apply flex-shrink-0 w-5 h-5 mr-2 mt-0.5;
}

.icon-success {
  @apply w-5 h-5 text-green-500 dark:text-green-400; /* Dark mode color */
}

.icon-fail {
  @apply w-5 h-5 text-red-500 dark:text-red-400; /* Dark mode color */
}

.icon-spinner {
  @apply w-5 h-5 border-2 border-gray-500 dark:border-gray-400 border-t-transparent rounded-full animate-spin; /* Dark mode color */
}

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

.step-text {
  @apply text-sm font-medium text-gray-700 dark:text-gray-300; /* Dark mode text */
}

.step-description {
  @apply mt-0.5 text-xs text-gray-500 dark:text-gray-400; /* Dark mode text */
}

/* Transition Styles (Keep as is) */
.fade-enter-active, .fade-leave-active {
  @apply transition-opacity duration-300;
}
.fade-enter, .fade-leave-to {
  @apply opacity-0;
}

/* Status Icon Styles with Dark Mode */
.status-icon {
  @apply cursor-pointer transition-colors duration-200;
}
.icon {
  @apply w-5 h-5;
}
.icon-text {
  @apply text-lg font-semibold text-gray-700 dark:text-gray-300; /* Dark mode text */
}

/* User Settings Panel - Sober with Dark Mode */
.user-settings-panel {
  @apply bg-white dark:bg-gray-800 space-y-4 p-4 md:p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200; /* Dark mode bg/border/text */
}

/* Folder Items - Sober with Dark Mode */
.folder-item-base {
  @apply flex flex-col items-center justify-center p-3 rounded-lg cursor-pointer transition-all duration-150 hover:shadow-sm;
  @apply bg-gray-50 dark:bg-gray-700; /* Dark mode bg */
  @apply hover:bg-gray-100 dark:hover:bg-gray-700; /* Dark mode hover */
  @apply border border-gray-200 dark:border-gray-600; /* Dark mode border */
}
.folder-item-icon {
  @apply w-8 h-8 group-hover:scale-105 transition-transform duration-150 mb-1;
}
.folder-item-label {
  @apply mt-1 text-[11px] text-center text-gray-600 dark:text-gray-300; /* Dark mode text */
}

/* Folder Item Colors with Dark Mode Borders/Text */
.folder-item-personalities { @apply border-blue-400 dark:border-blue-600; }
.folder-item-icon-personalities { @apply text-blue-500 dark:text-blue-400; }

.folder-item-functions { @apply border-green-500 dark:border-green-500; }
.folder-item-icon-functions { @apply text-green-500 dark:text-green-400; }

.folder-item-configs { @apply border-yellow-500 dark:border-yellow-500; }
.folder-item-icon-configs { @apply text-yellow-500 dark:text-yellow-400; }

.folder-item-outputs { @apply border-purple-500 dark:border-purple-500; }
.folder-item-icon-outputs { @apply text-purple-500 dark:text-purple-400; }

.folder-item-discussions { @apply border-red-500 dark:border-red-500; }
.folder-item-icon-discussions { @apply text-red-500 dark:text-red-400; }


@layer components {
  /* Settings Layout with Dark Mode Borders/Text */
  .setting-item {
      @apply flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4 py-2 border-t border-gray-100 dark:border-gray-700 first:border-t-0;
  }
  .setting-label {
      @apply label md:w-40 flex-shrink-0 text-sm; /* Inherits dark mode from .label */
  }
  .toggle-item {
      @apply flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 py-2 border-t border-gray-100 dark:border-gray-700 pt-3 mt-2;
  }
  .toggle-label {
      @apply label !mb-0 flex-grow cursor-pointer mr-4 text-sm; /* Inherits dark mode from .label */
  }
  .toggle-description {
      @apply block text-xs text-gray-500 dark:text-gray-400 font-normal mt-0.5; /* Dark mode text */
  }

  /* Range Inputs - Sober with Dark Mode */
  input[type='range'] {
      @apply h-1.5 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer w-full; /* Dark mode track */
  }
  input[type='range']::-webkit-slider-thumb {
      @apply w-4 h-4 bg-gray-600 dark:bg-gray-300 rounded-full appearance-none cursor-pointer transition-colors duration-150 ease-in-out; /* Dark mode thumb */
      margin-top: -5px;
  }
  input[type='range']::-moz-range-thumb {
      @apply w-4 h-4 bg-gray-600 dark:bg-gray-300 rounded-full border-none cursor-pointer transition-colors duration-150 ease-in-out; /* Dark mode thumb */
  }
  /* Track styles already applied above with dark mode */

  /* Buttons & Inputs with Dark Mode Variants */
  .btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-700 focus:ring-2 focus:ring-green-400 dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-500;
  }
  .btn-sm {
    @apply py-1 px-2.5 text-xs rounded;
  }
  .input-sm {
      @apply input px-3 py-1 text-sm rounded; /* Inherits dark mode from .input */
  }
  .range-input { /* Already defined above with input[type=range] */ }

  /* Status Dots with Dark Mode Variants */
  .bg-status-healthy { @apply bg-green-500 dark:bg-green-400; }
  .bg-status-unhealthy { @apply bg-red-500 dark:bg-red-400; }
  .bg-status-loading { @apply bg-yellow-500 dark:bg-yellow-400; }
  .bg-status-unknown { @apply bg-gray-400 dark:bg-gray-500; }
}

/* Prose Styling - Sober with Dark Mode */
@layer components {
  .prose-sober { /* Using a custom class name */
    h3 { @apply text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2 mt-4 border-b border-gray-200 dark:border-gray-700 pb-1; }
    ul { @apply list-disc pl-5 space-y-1 mb-3 text-gray-600 dark:text-gray-400 text-sm; }
    li::marker { color: theme('colors.gray.500'); } /* Dark mode marker handled by .dark li::marker */
    code { @apply bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded text-[0.8em] font-mono text-gray-700 dark:text-gray-300; }
    blockquote { @apply border-l-4 border-gray-300 dark:border-gray-600 pl-3 italic text-gray-500 dark:text-gray-400 my-3 py-1 text-sm; }
    a { @apply text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white underline font-medium; }
    p { @apply mb-3 leading-relaxed text-gray-700 dark:text-gray-300 text-sm; }
  }
}

/* Thinking Prose - Sober with Dark Mode */
.thinking-prose { /* Base styles */ }
.dark .thinking-prose { /* Dark mode CSS variables */
  --tw-prose-headings: theme('colors.gray.100');
  --tw-prose-links: theme('colors.gray.300');
  --tw-prose-code: theme('colors.gray.300');
  --tw-prose-pre-code: theme('colors.gray.300');
  --tw-prose-pre-bg: theme('colors.gray.800');
  --tw-prose-quotes: theme('colors.gray.400');
  --tw-prose-quote-borders: theme('colors.gray.600');
}
.thinking-prose h1, .thinking-prose h2, .thinking-prose h3, .thinking-prose h4, .thinking-prose h5, .thinking-prose h6 {
  @apply mt-4 mb-1.5 font-semibold text-gray-800 dark:text-gray-100; /* Uses dark: prefix */
}
.thinking-prose h1 { @apply text-lg; }
.thinking-prose h2 { @apply text-base; }
.thinking-prose h3 { @apply text-sm; }

.thinking-prose p { @apply my-2 leading-normal text-sm text-gray-700 dark:text-gray-300; } /* Uses dark: prefix */
.thinking-prose ul, .thinking-prose ol { @apply my-2 pl-5 text-sm text-gray-600 dark:text-gray-400; } /* Uses dark: prefix */
.thinking-prose li > p { @apply my-0.5; }

.thinking-prose code:not(pre code) {
  @apply px-1 py-0.5 bg-gray-100 dark:bg-gray-700 rounded text-[0.85em] font-mono before:content-none after:content-none text-gray-700 dark:text-gray-300; /* Uses dark: prefix */
}
.thinking-prose pre {
  @apply p-3 rounded-md overflow-x-auto my-3 shadow-sm text-xs;
  background-color: var(--tw-prose-pre-bg, theme('colors.gray.50')); /* Uses variable */
}
.dark .thinking-prose pre { background-color: var(--tw-prose-pre-bg); } /* Applies dark variable */
.thinking-prose pre code {
 @apply p-0 bg-transparent font-mono;
 color: var(--tw-prose-pre-code, inherit); /* Uses variable */
}
.dark .thinking-prose pre code { color: var(--tw-prose-pre-code); } /* Applies dark variable */
.thinking-prose blockquote {
  @apply pl-3 py-0.5 border-l-4 italic my-2 text-sm;
  color: var(--tw-prose-quotes, theme('colors.gray.600')); /* Uses variable */
  border-color: var(--tw-prose-quote-borders, theme('colors.gray.300')); /* Uses variable */
}
.dark .thinking-prose blockquote {
  color: var(--tw-prose-quotes); border-color: var(--tw-prose-quote-borders); /* Applies dark variable */
}
.thinking-prose a {
  @apply hover:underline break-words text-sm;
  color: var(--tw-prose-links, theme('colors.gray.700')); /* Uses variable */
}
.dark .thinking-prose a { color: var(--tw-prose-links); } /* Applies dark variable */

/* Custom Scrollbar - Sober with Dark Mode */
.thinking-prose::-webkit-scrollbar { @apply w-1.5 h-1.5; }
.thinking-prose::-webkit-scrollbar-track { @apply bg-gray-100 dark:bg-gray-700/50 rounded-lg; } /* Uses dark: prefix */
.thinking-prose::-webkit-scrollbar-thumb { @apply bg-gray-400 dark:bg-gray-500 rounded-full hover:bg-gray-500 dark:hover:bg-gray-400 transition-colors duration-150; } /* Uses dark: prefix */
.thinking-prose { scroll-behavior: smooth; }

/* Bounce animation definition */
@keyframes bounce {
  0%, 100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
.animate-bounce { animation: bounce 1s infinite; }

/* Help Content Styling - Sober with Dark Mode */
.help-content h2 { @apply text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3 mt-5 border-b border-gray-200 dark:border-gray-700 pb-1.5; }
.help-content h3 { @apply text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2 mt-4; }
.help-content ul { @apply list-disc pl-5 space-y-1 mb-3 text-gray-700 dark:text-gray-300 text-base; }
.help-content ol { @apply list-decimal pl-5 space-y-1 mb-3 text-gray-700 dark:text-gray-300 text-base; }
.help-content li::marker { color: theme('colors.gray.500'); } /* Dark mode handled by .dark li::marker */
.help-content code:not(pre code) { @apply bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm font-mono text-gray-700 dark:text-gray-300; }
.help-content pre.hljs { @apply bg-gray-50 dark:bg-gray-800/80 p-3 rounded-md overflow-x-auto my-3 shadow-sm text-sm; }
.help-content pre.hljs code { @apply bg-transparent p-0; }
.help-content blockquote { @apply border-l-4 border-gray-300 dark:border-gray-600 pl-3 italic text-gray-600 dark:text-gray-400 my-3 py-1; }
.help-content p { @apply mb-3 leading-relaxed text-gray-700 dark:text-gray-300 text-base; }
.help-content img { @apply rounded-md shadow-sm my-4 max-w-full h-auto mx-auto border border-gray-200 dark:border-gray-700; }
.help-content table { @apply w-full my-4 border-collapse border border-gray-200 dark:border-gray-700 text-sm; }
.help-content th { @apply bg-gray-100 dark:bg-gray-700 p-2 border border-gray-200 dark:border-gray-600 text-left font-medium text-gray-700 dark:text-gray-200; }
.help-content td { @apply p-2 border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300; }

/* Responsive Help Sidebar with Dark Mode */
@media (max-width: 768px) {
 .help-left-bar { @apply fixed top-0 left-0 h-screen z-20 transform -translate-x-full bg-white dark:bg-gray-800 shadow-lg border-r border-gray-200 dark:border-gray-700; } /* Dark mode bg/border */
 .help-main-content { @apply ml-0; }
 .help-left-bar.open { @apply translate-x-0; }
}

/* Animated Thought Bubble - Sober with Dark Mode */
@keyframes bubble-in-down { /* Animation definition */
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.85); }
  60% { opacity: 1; transform: translate(-50%, 1px) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@layer utilities {
  .animate-bubble-in-down { animation: bubble-in-down 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
}
@layer components {
  .animated-thought-bubble {
    @apply absolute top-full left-1/2 mt-1.5 /* Position */
           w-max max-w-[150px] /* Size */
           opacity-0 invisible /* Initial state */
           bg-gray-700 dark:bg-gray-600 rounded-md shadow-lg p-1.5 text-center z-20 /* Styling with dark mode bg */
           text-white dark:text-gray-100 text-xs /* Text with dark mode */
           pointer-events-none origin-top transition-opacity duration-100 /* Base transitions */
           group-hover/item:opacity-100 group-hover/item:visible group-hover/item:pointer-events-auto group-hover/item:animate-bubble-in-down; /* Hover animation */
  }
  .animated-thought-bubble::after { /* Arrow */
    content: '';
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 border-[6px] border-solid border-transparent
           border-b-gray-700 dark:border-b-gray-600; /* Dark mode arrow color */
  }
}

/* Playground Component - Sober with Dark Mode */
@layer components {
  .active-tab-button {
    @apply btn btn-primary btn-sm; /* Uses primary button styles (which have dark variants) */
    @apply ring-1 ring-offset-1 ring-offset-white dark:ring-offset-gray-800 ring-gray-400 dark:ring-gray-500; /* Dark mode ring */
  }
  .inactive-tab-button {
    @apply btn btn-secondary btn-sm; /* Uses secondary button styles (which have dark variants) */
    @apply opacity-70 hover:opacity-100;
  }
}

/* Matrix Rain Animation Removed */