html {
    font-size: 106.25%; /* Sets base to 17px */
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    display: none;
}
* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.cosmic-background {
    position: relative;
    background-color: var(--light-bg-primary, #F9FAFB);
    background-image:
        radial-gradient(ellipse at 10% 90%, rgba(59, 130, 246, 0.05), transparent 60%),
        radial-gradient(ellipse at 90% 20%, rgba(168, 85, 247, 0.05), transparent 60%);
    overflow: hidden;
}

.dark .cosmic-background {
    background-color: #111827; /* gray-900 */
    background-image:
        radial-gradient(ellipse at 10% 90%, rgba(59, 130, 246, 0.2), transparent 60%),
        radial-gradient(ellipse at 90% 20%, rgba(168, 85, 247, 0.2), transparent 60%);
}


/* Cyber Grid Background for Auth Screen */
.cyber-grid {
    background-image:
        linear-gradient(rgba(168, 85, 247, 0.1), 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.1), 1px, transparent 1px);
    background-size: 2rem 2rem;
}

.dark .cyber-grid {
     background-image:
        linear-gradient(rgba(128, 0, 128, 0.15), 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 0, 128, 0.15), 1px, transparent 1px);
}

/* Scan Line Animation for Auth Screen */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to bottom, rgba(79, 70, 229, 0.5), transparent);
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.8);
    animation: scan 8s linear infinite;
    opacity: 0.6;
}

/* Basic styling for rendered markdown */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: #111827;
  font-weight: 600;
  margin-bottom: 0.75em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #E5E7EB;
}
.prose h2 { color: #111827; font-weight: 700; }
.prose h3 { color: #4338CA; } /* indigo-700 */
.prose p { color: #374151; line-height: 1.7; margin-bottom: 1em; }
.prose ul, .prose ol { color: #374151; margin-left: 1.5em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.5em; }
.prose strong { color: #111827; }
.prose a { color: #3B82F6; text-decoration: none; border-bottom: 1px solid #3B82F6; transition: color 0.2s, border-color 0.2s; }
.prose a:hover { color: #0EA5E9; border-bottom-color: #0EA5E9; } /* sky-500 */
.prose code { background-color: #F3F4F6; color: #BE185D; padding: 0.2em 0.4em; border-radius: 4px; font-family: 'Source Code Pro', monospace; font-size: 0.9em; border: 1px solid #E5E7EB; }
.prose pre { background-color: #F3F4F6; color: #111827; padding: 1em; border-radius: 8px; overflow-x: auto; border: 1px solid #E5E7EB; }
.prose pre code { background-color: transparent; padding: 0; color: inherit; border: none; }
.prose blockquote { border-left: 3px solid #A855F7; padding: 0.5em 1.2em; margin-left: 0; color: #4B5563; background-color: #F3F4F6; border-radius: 0 8px 8px 0; }

/* Dark mode prose */
.dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4, .dark .prose h5, .dark .prose h6 { color: #F0F0F0; border-bottom-color: rgba(255, 255, 255, 0.1); }
.dark .prose h2 { color: #E0E0E0; }
.dark .prose h3 { color: #d0c0f0; }
.dark .prose p { color: #B0B0B0; }
.dark .prose ul, .dark .prose ol { color: #B0B0B0; }
.dark .prose strong { color: #F0F0F0; }
.dark .prose a { color: #60A5FA; border-bottom-color: #60A5FA; } /* blue-400 */
.dark .prose a:hover { color: #22D3EE; border-bottom-color: #22D3EE; }
.dark .prose code { background-color: #374151; color: #EC4899; border-color: rgba(255, 255, 255, 0.1); }
.dark .prose pre { background-color: #1F2937; color: #F0F0F0; border-color: rgba(255, 255, 255, 0.1); }
.dark .prose blockquote { border-color: #A855F7; color: #D1D5DB; background-color: rgba(168, 85, 247, 0.1); }


/* Styles for the new Upgrade Modal Plan Cards */
.plan-card-content {
  position: relative;
  z-index: 2;
}

/* Light mode default spotlight */
.plan-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: radial-gradient(
    300px circle at var(--mouse-x) var(--mouse-y),
    rgba(0, 0, 0, 0.04),
    transparent 80%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

/* Dark mode spotlight override */
.dark .plan-card::before {
  background: radial-gradient(
    300px circle at var(--mouse-x) var(--mouse-y),
    rgba(168, 85, 247, 0.1),
    transparent 80%
  );
}

.plan-card:hover::before {
  opacity: 1;
}

/* --- New Highlighted Message Animation --- */
@keyframes highlight-pulse {
  0% {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    border-color: rgba(168, 85, 247, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
    border-color: rgba(168, 85, 247, 0.8);
  }
  100% {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    border-color: rgba(168, 85, 247, 0.5);
  }
}

/* Style for highlighted message from search */
.highlight-message {
  transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out;
  background-color: rgba(168, 85, 247, 0.1) !important;
  border: 1px solid rgba(168, 85, 247, 0.5);
  animation: highlight-pulse 2s ease-in-out infinite;
  border-radius: 1rem; /* Match the bubble rounding */
}
.dark .highlight-message {
    background-color: rgba(168, 85, 247, 0.2) !important;
}


/* --- New Chat Button Enhancements --- */
@keyframes new-chat-border-spin {
  100% {
    transform: rotate(1turn);
  }
}

.new-chat-button-container {
  position: relative;
  z-index: 0;
  border-radius: 9999px; /* Pill shape */
  overflow: hidden;
}

/* The spinning gradient layer */
.new-chat-button-container::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    from 180deg,
    #a855f7,
    #ec4899,
    #ff8c00,
    #22d3ee,
    #3b82f6,
    #a855f7
  );
  animation: new-chat-border-spin 4s linear infinite;
  /* Start with a subtle, blurred border */
  opacity: 0.6;
  filter: blur(3px);
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* On hover of the container, make the border sharp and bright */
.new-chat-button-container:hover::before {
  opacity: 1;
  filter: blur(0px);
}

/* The solid background "cutout" that reveals the border */
.new-chat-button-container::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #FFFFFF;
  border-radius: 9999px; /* Pill shape */
}

.dark .new-chat-button-container::after {
  background: #111827;
}

/* Redesigned button surface */
.new-chat-button {
  background: transparent;
  transition: background 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}

.new-chat-button:hover {
   background: rgba(243, 244, 246, 0.6); /* Use light panel color for subtle depth */
   text-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.dark .new-chat-button:hover {
   background: rgba(55, 65, 81, 0.6); /* Use dark panel color for subtle depth */
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

/* The interactive spotlight effect on the button itself */
.new-chat-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    150px circle at var(--mouse-x) var(--mouse-y),
    rgba(0, 0, 0, 0.1),
    transparent 80%
  );
  border-radius: inherit; /* Inherits pill shape */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.dark .new-chat-button::after {
    background: radial-gradient(
    150px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.25),
    transparent 80%
  );
}

.new-chat-button:hover::after {
  opacity: 1;
}

/* Spotlight Effect for Cards */
.spotlight-card {
  position: relative;
  z-index: 1;
}

.spotlight-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: radial-gradient(
    250px circle at var(--mouse-x) var(--mouse-y),
    rgba(0, 0, 0, 0.04),
    transparent 80%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: -1;
}
.dark .spotlight-card::before {
    background: radial-gradient(
    250px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.08),
    transparent 80%
  );
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* --- Sidebar Link Spotlight & Shimmer Effect --- */
@keyframes shimmer-animation {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.sidebar-link-spotlight {
    position: relative;
    /* transition for border and background is handled by tailwind `transition-colors` */
}

/* This is the aurora/glow effect */
.sidebar-link-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color, rgba(168, 85, 247, 0.15)),
    transparent 65%
  );
  opacity: 0;
  transform: scale(1);
  filter: blur(15px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease-out;
  z-index: 0;
}
.dark .sidebar-link-spotlight::before {
    background: radial-gradient(
    300px circle at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color, rgba(168, 85, 247, 0.3)),
    transparent 65%
  );
}

/* This is the colored shimmer effect */
.sidebar-link-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        110deg,
        transparent 30%,
        var(--spotlight-color) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    opacity: 0;
    z-index: 0;
    filter: brightness(1.5) blur(2px);
    transition: opacity 0.5s ease-in-out;
}


/* The hover state reveals the effects */
.sidebar-link-spotlight:hover {
  background-color: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.05);
}

.dark .sidebar-link-spotlight:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.sidebar-link-spotlight:hover::before {
  opacity: 1;
  transform: scale(2.2);
  filter: blur(35px);
}

.sidebar-link-spotlight:hover::after {
  opacity: 0.6;
  animation: shimmer-animation 3s linear infinite;
}

/* --- New Active Link Pulsating Glow --- */
@keyframes active-glow-pulse {
  0% { box-shadow: 0 0 8px 0px var(--spotlight-color); }
  50% { box-shadow: 0 0 16px 3px var(--spotlight-color); }
  100% { box-shadow: 0 0 8px 0px var(--spotlight-color); }
}

.active-link-glow {
    animation: active-glow-pulse 3s ease-in-out infinite;
}

/* --- Animated Icon Container --- */
@keyframes icon-bg-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.sidebar-icon-container {
    position: relative;
    z-index: 1; /* Keep icon above link effects */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sidebar-icon-container--motion {
    background-image: linear-gradient(
        135deg,
        var(--icon-color-1),
        var(--icon-color-2),
        var(--icon-color-3)
    );
    background-size: 300% 300%;
    animation: icon-bg-pan 6s ease-in-out infinite;
}

/* On hover of the parent link, the icon can lift up a bit */
.sidebar-link-spotlight:hover .sidebar-icon-container {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dark .sidebar-link-spotlight:hover .sidebar-icon-container {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* --- Screen-specific Background Glows --- */
.search-screen-bg {
    background-image: radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.05), transparent 60%);
}
.dark .search-screen-bg {
    background-image: radial-gradient(ellipse at 20% 80%, rgba(59, 130, 246, 0.1), transparent 60%);
}

.gpts-screen-bg {
    background-image: radial-gradient(ellipse at 80% 80%, rgba(168, 85, 247, 0.05), transparent 60%);
}
.dark .gpts-screen-bg {
    background-image: radial-gradient(ellipse at 80% 80%, rgba(168, 85, 247, 0.1), transparent 60%);
}

.templates-screen-bg {
    background-image: radial-gradient(ellipse at 50% 20%, rgba(255, 140, 0, 0.05), transparent 60%);
}
.dark .templates-screen-bg {
    background-image: radial-gradient(ellipse at 50% 20%, rgba(255, 140, 0, 0.1), transparent 60%);
}

/* --- Animated Astra Logo --- */
@keyframes pulse-stroke {
    0%, 100% { stroke-width: 1.5; opacity: 1; }
    50% { stroke-width: 2.5; opacity: 0.7; }
}
.astra-logo-path {
    animation: pulse-stroke 4s ease-in-out infinite;
}
.astra-logo-path:nth-child(2) { animation-delay: 0.2s; }
.astra-logo-path:nth-child(3) { animation-delay: 0.4s; }

/* --- Animated Avatar Glow --- */
@keyframes rotate-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.avatar-glow-animate {
    background-size: 200% 200%;
    animation: rotate-gradient 4s linear infinite;
}


/* --- Pitch Black Theme Overrides --- */
/* This section overrides the default .dark styles when the .pitch-black class is also present */

.dark.pitch-black .cosmic-background {
    background-color: #000000;
}
.dark.pitch-black .dark\:bg-dark-bg-primary {
    background-color: #000000;
}
.dark.pitch-black .dark\:bg-dark-bg-secondary {
    background-color: #111111;
}
.dark.pitch-black .dark\:hover\:bg-dark-hover:hover,
.dark.pitch-black .group:hover .dark\:group-hover\:bg-dark-hover {
    background-color: #18181b; /* zinc-900 */
}
.dark.pitch-black .dark\:border-dark-border {
    border-color: #27272A; /* zinc-800 */
}
.dark.pitch-black .dark\:bg-dark-ai-bubble {
    background-color: #111111;
}
.dark.pitch-black .dark\:bg-dark-user-bubble {
    background-color: #27272A;
}

/* Overrides for non-tailwind utility classes */
.dark.pitch-black .prose code { background-color: #111111; }
.dark.pitch-black .prose pre { background-color: #111111; }
.dark.pitch-black .prose blockquote { background-color: rgba(168, 85, 247, 0.05); }
.dark.pitch-black .new-chat-button-container::after { background: #000000; }
.dark.pitch-black .new-chat-button:hover { background: rgba(17, 17, 17, 0.6); }
.dark.pitch-black .sidebar-link-spotlight:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.dark.pitch-black .spotlight-card::before { background: radial-gradient(250px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.08), transparent 80%); }

/* --- Smooth Textarea Resizing --- */
.smooth-resize {
    transition: height 0.2s ease-in-out;
}

/* --- Innovator Card v4 (3D Tilt) --- */
@keyframes aurora-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Dark mode glow animations */
@keyframes innovator-logo-glow-animation {
  0% { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 1)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.8)) drop-shadow(0 0 24px rgba(34, 211, 238, 0.5)); }
  33% { filter: drop-shadow(0 0 8px rgba(168, 85, 247, 1)) drop-shadow(0 0 16px rgba(168, 85, 247, 0.8)) drop-shadow(0 0 32px rgba(168, 85, 247, 0.5)); }
  66% { filter: drop-shadow(0 0 6px rgba(236, 72, 153, 1)) drop-shadow(0 0 12px rgba(236, 72, 153, 0.8)) drop-shadow(0 0 24px rgba(236, 72, 153, 0.5)); }
  100% { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 1)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.8)) drop-shadow(0 0 24px rgba(34, 211, 238, 0.5)); }
}
@keyframes innovator-text-glow-animation {
  0% { text-shadow: 0 0 6px rgba(34, 211, 238, 1), 0 0 12px rgba(34, 211, 238, 0.7), 0 0 24px rgba(34, 211, 238, 0.4); }
  33% { text-shadow: 0 0 8px rgba(168, 85, 247, 1), 0 0 16px rgba(168, 85, 247, 0.7), 0 0 32px rgba(168, 85, 247, 0.4); }
  66% { text-shadow: 0 0 6px rgba(236, 72, 153, 1), 0 0 12px rgba(236, 72, 153, 0.7), 0 0 24px rgba(236, 72, 153, 0.4); }
  100% { text-shadow: 0 0 6px rgba(34, 211, 238, 1), 0 0 12px rgba(34, 211, 238, 0.7), 0 0 24px rgba(34, 211, 238, 0.4); }
}
@keyframes innovator-circle-glow-animation {
  0% { filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.7)); }
  33% { filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.7)); }
  66% { filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.7)); }
  100% { filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.7)); }
}

/* Light mode shadow animations */
@keyframes light-innovator-logo-glow-animation {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(55, 65, 81, 0.2)); }
  50% { filter: drop-shadow(0 4px 8px rgba(17, 24, 39, 0.25)); }
}
@keyframes light-innovator-text-glow-animation {
  0%, 100% { text-shadow: 0 1px 2px rgba(55, 65, 81, 0.2); }
  50% { text-shadow: 0 2px 4px rgba(17, 24, 39, 0.25); }
}
@keyframes light-innovator-circle-glow-animation {
  0%, 100% { filter: drop-shadow(0 1px 2px rgba(55, 65, 81, 0.2)); }
  50% { filter: drop-shadow(0 2px 4px rgba(17, 24, 39, 0.25)); }
}

.innovator-card-3d {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
}

/* Light mode spotlight */
.innovator-card-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(0, 0, 0, 0.03), transparent 40%),
                    radial-gradient(600px circle at 100% 0%, rgba(0, 0, 0, 0.03), transparent 40%);
  opacity: 0;
  transition: opacity 500ms;
  z-index: 1;
}
/* Dark mode spotlight */
.dark .innovator-card-3d::before {
    background-image: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(168, 85, 247, 0.1), transparent 40%),
                      radial-gradient(600px circle at 100% 0%, rgba(34, 211, 238, 0.1), transparent 40%);
}

.innovator-card-3d:hover::before {
  opacity: 1;
}

/* Light mode aurora */
.innovator-card-aurora-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.8), rgba(243, 244, 246, 0.8), rgba(249, 250, 251, 0.8), rgba(59, 130, 246, 0.05), rgba(168, 85, 247, 0.05));
    background-size: 400% 400%;
    animation: aurora-flow 15s ease infinite;
    opacity: 0.6;
}
/* Dark mode aurora */
.dark .innovator-card-aurora-bg {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8), rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.8), rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1));
    opacity: 0.3;
}

.innovator-card-shimmer-border {
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 18px; /* Should match parent's rounded-2xl + border width */
    background: conic-gradient(from 180deg at 50% 50%, #22D3EE 0deg, #A855F7 120deg, #EC4899 240deg, #22D3EE 360deg);
    opacity: 0;
    transition: opacity 500ms;
}

.innovator-card-3d:hover .innovator-card-shimmer-border {
    opacity: 0.8;
}

/* Light mode default styles */
.innovator-card-3d .innovator-logo-glow { transition: filter 0.5s ease; filter: drop-shadow(0 1px 3px rgba(55, 65, 81, 0.1)); }
.innovator-card-3d .innovator-text-glow { transition: text-shadow 0.5s ease; text-shadow: 0 0 8px transparent; }
.innovator-card-3d .logo-circle { transition: filter 0.5s ease; }

/* Dark mode default styles */
.dark .innovator-card-3d .innovator-logo-glow { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.4)); }
.dark .innovator-card-3d .innovator-text-glow { text-shadow: 0 0 8px transparent; }

/* Light mode hover animations */
.innovator-card-3d:hover .innovator-logo-glow { animation: light-innovator-logo-glow-animation 4s ease-in-out infinite; }
.innovator-card-3d:hover .innovator-text-glow { animation: light-innovator-text-glow-animation 4s ease-in-out infinite; }
.innovator-card-3d:hover .logo-circle { animation: light-innovator-circle-glow-animation 4s ease-in-out infinite; }

/* Dark mode hover animations */
.dark .innovator-card-3d:hover .innovator-logo-glow { animation: innovator-logo-glow-animation 4s ease-in-out infinite; }
.dark .innovator-card-3d:hover .innovator-text-glow { animation: innovator-text-glow-animation 4s ease-in-out infinite; }
.dark .innovator-card-3d:hover .logo-circle { animation: innovator-circle-glow-animation 4s ease-in-out infinite; }

/* --- Animated Button Gradient --- */
@keyframes button-gradient-pan {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* --- Redesigned Modal Buttons --- */

/* Apply Now Button v2 */
.apply-now-button-v2 {
  position: relative;
  overflow: hidden;
  background-size: 200% auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-image: linear-gradient(90deg, #22D3EE, #A855F7, #EC4899, #22D3EE);
  animation: button-gradient-pan 4s linear infinite;
}

.apply-now-button-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(168, 85, 247, 0.4);
}

/* Shimmer/shine effect on hover */
.apply-now-button-v2::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    transition: transform 0.7s ease-in-out;
    z-index: 1;
}

.apply-now-button-v2:hover::after {
    transform: translateX(100%);
}

.apply-now-button-v2 > * {
  position: relative;
  z-index: 2;
}

/* Email Us Button v2 */
.email-us-button-v2 {
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: color 0.4s ease, border-color 0.4s ease;
}

/* Spotlight effect */
.email-us-button-v2::before {
  content: '';
  position: absolute;
  left: var(--mouse-x);
  top: var(--mouse-y);
  width: 0;
  height: 0;
  background: radial-gradient(circle closest-side, rgba(168, 85, 247, 0.5), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  z-index: 0;
}

.email-us-button-v2:hover::before {
  width: 250px;
  height: 250px;
}

.dark .email-us-button-v2:hover {
    border-color: rgba(168, 85, 247, 0.8);
    color: #FFFFFF;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.light .email-us-button-v2:hover {
    border-color: #A855F7;
    color: #A855F7;
    background-color: rgba(168, 85, 247, 0.05);
}

/* Ensure content is above the spotlight */
.email-us-button-v2 > * {
  position: relative;
  z-index: 1;
}

/* --- Advanced Tools Button --- */
@keyframes tool-icon-glow {
  0% { filter: drop-shadow(0 0 2px rgba(168, 85, 247, 0.7)); }
  50% { filter: drop-shadow(0 0 6px rgba(168, 85, 247, 1)); }
  100% { filter: drop-shadow(0 0 2px rgba(168, 85, 247, 0.7)); }
}

.tools-icon--active {
    animation: tool-icon-glow 2.5s ease-in-out infinite;
}

/* --- STEM Model Card Advanced Design --- */
.stem-model-grid {
  perspective: 1000px;
}

.stem-model-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.stem-model-card-inner-wrapper {
  position: relative;
  border-radius: 0.75rem; /* 12px */
  overflow: hidden;
  transform: translateZ(20px);
}

/* The solid background "cutout" that reveals the border */
.stem-model-card-inner-wrapper::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 2px;
  background: #1F2937; /* gray-800 */
  border-radius: 0.6rem; /* 10px */
}

/* The spinning gradient layer for the border */
.stem-model-card-inner-wrapper::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    from 180deg,
    transparent 25%,
    #a855f7,
    #22d3ee 50%,
    transparent 75%
  );
  animation: new-chat-border-spin 4s linear infinite;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* On hover, or if selected, show the border */
.stem-model-card:hover .stem-model-card-inner-wrapper::before,
.stem-model-card--selected .stem-model-card-inner-wrapper::before {
  opacity: 1;
}

/* Pulsating glow for the selected card */
@keyframes stem-selected-glow {
  0% { box-shadow: 0 0 12px 2px rgba(168, 85, 247, 0.4); }
  50% { box-shadow: 0 0 20px 5px rgba(168, 85, 247, 0.6); }
  100% { box-shadow: 0 0 12px 2px rgba(168, 85, 247, 0.4); }
}

.stem-model-card--selected {
   animation: stem-selected-glow 3s ease-in-out infinite;
}

/* Content button */
.stem-model-card-content {
  position: relative;
  z-index: 2; /* above bg cutout */
  background: transparent;
  transform-style: preserve-3d; /* So children can have translateZ */
}

/* Inner spotlight effect on the button */
.stem-model-card-spotlight {
  position: absolute;
  inset: 0;
  border-radius: 0.6rem; /* Match bg cutout radius */
  background: radial-gradient(
    200px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.1),
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  z-index: 0; /* Behind content, on top of bg */
}
.stem-model-card:hover .stem-model-card-spotlight {
  opacity: 1;
}