.hover-scale {
  transition: transform 0.3s ease-in-out;
}
.hover-scale:hover {
  transform: scale(1.05);
}
.gradient-text {
  background: linear-gradient(to right, #ff61a6, #ff3d8e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} 

/* Ensure clickable elements show pointer cursor */
a, button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"] {
  cursor: pointer;
}

/* Roboto utility */
.font-roboto {
  font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

/* Logo fine-tuning: 15% smaller middle E */
.logo-type { letter-spacing: 0.02em; }
.logo-mini-e {
  display: inline-block;
  font-size: 1.1em; /* ~15% smaller */
  line-height: 1;
  position: relative;
  transform: rotate(-3deg); /* Spin the middle E a few degrees */
  margin-left: 0.02em; /* tighten spacing before */
  margin-right: -0.01em; /* and after */
}

/* add the code bellow */ 
@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
      display: none;
  }
 /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
}

  /* Ultra minimalistic scrollbar styling */
  .scrollbar-thin {
      scrollbar-width: thin;              /* Firefox */
      scrollbar-color: rgba(148, 163, 184, 0.2) transparent; /* Firefox - subtle gray */
  }
  
  .scrollbar-thin::-webkit-scrollbar {
      width: 6px;                         /* WebKit - very thin */
      height: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
      background: transparent;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
      background-color: rgba(148, 163, 184, 0.2); /* Subtle gray, barely visible */
      border-radius: 9999px;
      border: 1px solid transparent;
      background-clip: content-box;
  }
  
  .scrollbar-thin:hover::-webkit-scrollbar-thumb {
      background-color: rgba(148, 163, 184, 0.35); /* Slightly more visible on hover */
  }
  
  /* Dark mode scrollbar */
  html.dark .scrollbar-thin {
      scrollbar-color: rgba(113, 113, 122, 0.3) transparent; /* Firefox */
  }
  
  html.dark .scrollbar-thin::-webkit-scrollbar-thumb {
      background-color: rgba(113, 113, 122, 0.3); /* Dark mode - subtle */
  }
  
  html.dark .scrollbar-thin:hover::-webkit-scrollbar-thumb {
      background-color: rgba(113, 113, 122, 0.5); /* Dark mode hover */
  }
}


/* Enhanced Markdown Content Styles */
.markdown-content {
  line-height: 1.7;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  font-weight: 600;
  color: inherit;
}

.markdown-content h1 {
  font-size: 1.25em;
  border-bottom: 2px solid #d4d4d8;
  padding-bottom: 0.5em;
}

.markdown-content h2 {
  font-size: 1.125em;
  border-bottom: 1px solid #d4d4d8;
  padding-bottom: 0.3em;
}

.markdown-content h3 {
  font-size: 1.1em;
}

.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-size: 1em;
}

.markdown-content p {
  margin-bottom: 1em;
  margin-top: 0;
}

.markdown-content ul,
.markdown-content ol {
  margin-bottom: 1em;
  margin-top: 0;
  padding-left: 1.5em;
}

.markdown-content ul {
  list-style-type: disc;
}

.markdown-content ol {
  list-style-type: decimal;
}

.markdown-content li {
  margin-bottom: 0.5em;
  margin-top: 0.25em;
}

.markdown-content li > p {
  margin-bottom: 0.5em;
}

.markdown-content blockquote {
  border-left: 4px solid #a1a1aa;
  padding-left: 1em;
  margin: 1em 0;
  font-style: italic;
  color: #71717a;
}

.markdown-content code {
  background-color: #e4e4e7;
  color: #18181b;
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-size: 0.875em;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

.markdown-content pre {
  background-color: #f4f4f5;
  color: #18181b;
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto;
  margin: 1em 0;
}

.markdown-content pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

.markdown-content strong {
  font-weight: 600;
  color: inherit;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content a {
  color: #2563eb;
  text-decoration: underline;
}

.markdown-content a:hover {
  color: #1d4ed8;
}

.markdown-content hr {
  border: none;
  border-top: 1px solid #d4d4d8;
  margin: 1.5em 0;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid #d4d4d8;
  padding: 0.5em;
  text-align: left;
}

.markdown-content th {
  background-color: #f4f4f5;
  font-weight: 600;
  color: #18181b;
}

/* Dark mode overrides */
html.dark .markdown-content h1 {
  border-bottom-color: #374151;
}

html.dark .markdown-content h2 {
  border-bottom-color: #374151;
}

html.dark .markdown-content blockquote {
  border-left-color: #6b7280;
  color: #d1d5db;
}

html.dark .markdown-content code {
  background-color: #374151;
  color: #f9fafb;
}

html.dark .markdown-content pre {
  background-color: #1f2937;
  color: #f9fafb;
}

html.dark .markdown-content a {
  color: #60a5fa;
}

html.dark .markdown-content a:hover {
  color: #93c5fd;
}

html.dark .markdown-content hr {
  border-top-color: #374151;
}

html.dark .markdown-content th,
html.dark .markdown-content td {
  border-color: #374151;
}

html.dark .markdown-content th {
  background-color: #374151;
  color: #f9fafb;
}

/* Improve spacing for first and last elements */
.markdown-content > *:first-child {
  margin-top: 0;
}

.markdown-content > *:last-child {
  margin-bottom: 0;
}

 /* Remove .light-ray and .light-ray-soft styles */
    .glow-field {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0;
      animation: glowAppear 20s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes glowAppear {
      0% { 
        opacity: 0; 
        transform: scale(0.95) translate(0, 0);
      }
      10% { 
        opacity: 0.4; 
        transform: scale(1.02) translate(calc(var(--move-x, 20px) * 0.1), calc(var(--move-y, -10px) * 0.1));
      }
      25% { 
        opacity: 0.6; 
        transform: scale(1.08) translate(calc(var(--move-x, 20px) * 0.25), calc(var(--move-y, -10px) * 0.25));
      }
      40% { 
        opacity: 0.7; 
        transform: scale(1.12) translate(calc(var(--move-x, 20px) * 0.4), calc(var(--move-y, -10px) * 0.4));
      }
      60% { 
        opacity: 0.8; 
        transform: scale(1.15) translate(calc(var(--move-x, 20px) * 0.6), calc(var(--move-y, -10px) * 0.6));
      }
      75% { 
        opacity: 0.7; 
        transform: scale(1.1) translate(calc(var(--move-x, 20px) * 0.75), calc(var(--move-y, -10px) * 0.75));
      }
      85% { 
        opacity: 0.5; 
        transform: scale(1.05) translate(calc(var(--move-x, 20px) * 0.85), calc(var(--move-y, -10px) * 0.85));
      }
      95% { 
        opacity: 0.3; 
        transform: scale(1.02) translate(calc(var(--move-x, 20px) * 0.95), calc(var(--move-y, -10px) * 0.95));
      }
      100% { 
        opacity: 0; 
        transform: scale(0.98) translate(calc(var(--move-x, 20px) * 1), calc(var(--move-y, -10px) * 1));
      }
    }
    .central-glow {
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,200,0.3) 20%, rgba(255,200,150,0.2) 40%, rgba(255,180,120,0.1) 60%, transparent 100%);
      filter: blur(30px);
      animation: centralPulse 12s ease-in-out infinite;
    }

    /* Responsive scaling for central glow on small screens */
    @media (max-width: 768px) {
      .central-glow {
        width: 150px;
        height: 150px;
        filter: blur(20px);
      }
    }

    @media (max-width: 480px) {
      .central-glow {
        width: 100px;
        height: 100px;
        filter: blur(15px);
      }
    }
    @keyframes centralPulse {
      0%, 100% { 
        opacity: 0.6; 
        transform: translateX(-50%) scale(1); 
        filter: blur(30px);
      }
      20% { 
        opacity: 0.8; 
        transform: translateX(-50%) scale(1.15); 
        filter: blur(28px);
      }
      40% { 
        opacity: 1; 
        transform: translateX(-50%) scale(1.25); 
        filter: blur(25px);
      }
      60% { 
        opacity: 0.9; 
        transform: translateX(-50%) scale(1.2); 
        filter: blur(27px);
      }
      80% { 
        opacity: 0.7; 
        transform: translateX(-50%) scale(1.1); 
        filter: blur(32px);
      }
    }
    .atmospheric-glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      animation: atmosphericFloat 25s ease-in-out infinite;
      --atmospheric-scale: 1;
    }

    @keyframes atmosphericFloat {
      0%, 100% {
        opacity: 0.2;
        transform: translateY(0px) translateX(0px) scale(calc(1 * var(--atmospheric-scale, 1)));
      }
      25% {
        opacity: 0.4;
        transform: translateY(-15px) translateX(10px) scale(calc(1.1 * var(--atmospheric-scale, 1)));
      }
      50% {
        opacity: 0.6;
        transform: translateY(-25px) translateX(-5px) scale(calc(1.15 * var(--atmospheric-scale, 1)));
      }
      75% {
        opacity: 0.4;
        transform: translateY(-20px) translateX(15px) scale(calc(1.08 * var(--atmospheric-scale, 1)));
      }
    }

    /* Responsive scaling for atmospheric glows on small screens */
    @media (max-width: 768px) {
      .atmospheric-glow {
        filter: blur(30px);
        --atmospheric-scale: 0.4;
      }
    }

    @media (max-width: 480px) {
      .atmospheric-glow {
        filter: blur(25px);
        --atmospheric-scale: 0.3;
      }
    }

    /* Mobile Menu Styles */
    .hamburger-icon {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 20px;
      height: 16px;
      cursor: pointer;
    }

    .hamburger-icon span {
      display: block;
      height: 2px;
      width: 100%;
      background-color: #ffffff;
      border-radius: 1px;
      transition: all 0.3s ease-in-out;
      transform-origin: center;
    }

    .hamburger-icon.open span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger-icon.open span:nth-child(2) {
      opacity: 0;
    }

    .hamburger-icon.open span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Mobile menu positioning and animations */
    @media (max-width: 768px) {
      [data-mobile-menu-target="menu"] {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        z-index: 50;
        margin: 0;
        border-radius: 0;
        border-right: 1px solid #27272a;
        border-top: none;
        border-bottom: none;
        border-left: none;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
      }

      [data-mobile-menu-target="menu"]:not(.hidden) {
        transform: translateX(0);
      }

      /* Overlay animation */
      [data-mobile-menu-target="overlay"] {
        transition: opacity 0.3s ease-in-out;
      }

      [data-mobile-menu-target="overlay"]:not(.hidden) {
        opacity: 1;
      }

      [data-mobile-menu-target="overlay"].hidden {
        opacity: 0;
      }
    }

    /* Hamburger button smooth transitions */
    .hamburger-icon {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Smooth button hover effects */
    [data-mobile-menu-target="hamburger"] {
      transition: all 0.2s ease-in-out;
    }

    [data-mobile-menu-target="hamburger"]:hover {
      transform: scale(1.05);
    }

    [data-mobile-menu-target="hamburger"]:active {
      transform: scale(0.95);
    }

    /* Hide hamburger when menu is open */
    @media (max-width: 768px) {
      body.mobile-menu-open [data-mobile-menu-target="hamburger"] {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.8) !important;
        visibility: hidden !important;
        transition: all 0.3s ease-in-out !important;
      }
      
      /* Show hamburger when menu is closed */
      body:not(.mobile-menu-open) [data-mobile-menu-target="hamburger"] {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: scale(1) !important;
        visibility: visible !important;
        transition: all 0.3s ease-in-out !important;
      }
    }

    /* Header Mobile Menu Styles */
    .header-hamburger-icon {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 20px;
      height: 16px;
      cursor: pointer;
    }

    .header-hamburger-icon span {
      display: block;
      height: 2px;
      width: 100%;
      background-color: #ffffff;
      border-radius: 1px;
      transition: all 0.3s ease-in-out;
      transform-origin: center;
    }

    .header-hamburger-icon.open span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .header-hamburger-icon.open span:nth-child(2) {
      opacity: 0;
    }

    .header-hamburger-icon.open span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Header mobile menu positioning and animations */
    [data-header-mobile-menu-target="menu"] {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-header-mobile-menu-target="menu"].hidden {
      display: none;
    }

    [data-header-mobile-menu-target="menu"]:not(.hidden) {
      display: block !important;
    }

    /* Header overlay animation */
    [data-header-mobile-menu-target="overlay"] {
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      pointer-events: none;
    }

    [data-header-mobile-menu-target="overlay"]:not(.hidden) {
      opacity: 1;
      pointer-events: auto;
    }


    /* Header hamburger button smooth transitions */
    .header-hamburger-icon {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Smooth button hover effects */
    [data-header-mobile-menu-target="hamburger"] {
      transition: all 0.2s ease-in-out;
    }

    [data-header-mobile-menu-target="hamburger"]:hover {
      transform: scale(1.05);
    }

    [data-header-mobile-menu-target="hamburger"]:active {
      transform: scale(0.95);
    }

    /* Dropdown positioning fixes for mobile */
    @media (max-width: 768px) {
      /* Force dropdown container to right edge */
      .relative[data-controller*="dropdown"] {
        position: relative !important;
        margin-left: auto !important;
        margin-right: 0 !important;
      }
      
      [data-dropdown-target="menu"] {
        right: 0 !important;
        left: auto !important;
        width: 280px !important;
        max-width: calc(100vw - 2rem) !important;
        min-width: 250px !important;
        transform: none !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
      }
      
      /* Ensure dropdown appears on screen */
      [data-dropdown-target="menu"]:not(.hidden) {
        right: 0 !important;
        left: auto !important;
        transform: translateX(0) !important;
        z-index: 9999 !important;
      }
      
      /* Additional specificity to override any conflicting styles */
      div[data-dropdown-target="menu"].absolute {
        right: 0 !important;
        left: auto !important;
      }

      [data-dropdown-mobile="inline"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
      }

      [data-dropdown-mobile="inline"] [data-dropdown-target="menu"] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        transform: none !important;
      }

[data-dropdown-mobile="inline"] [data-dropdown-target="menu"]:not(.hidden) {
        left: 0 !important;
        right: 0 !important;
      }
    }

/* Embed theming - Dark mode (default) */

@keyframes chat-message-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message-enter {
  animation: chat-message-enter 0.2s ease forwards;
}

.compact-chat {
  background: transparent;
}

.compact-chat [data-chat-target="messagesContainer"] {
  min-height: 2.25rem;
  max-height: 200px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.compact-chat [data-chat-target="messages"] > div {
  width: 100%;
}

.compact-chat-message {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: calc(1.4em * 3);
  word-wrap: break-word;
  overflow-wrap: break-word;
}