/* ==========================================
   PAGE-SPECIFIC OVERRIDES
   ========================================== */

/* Hide sidebar on home page only */
.page-home .sidebar {
  display: none !important;
}

/* Hide mobile menu toggle on home page since sidebar is completely hidden */
.page-home .mobile-menu-toggle {
  display: none !important;
}

/* Remove scrollbar from sidebar on about page */
.page-about .sidebar-content {
  overflow-y: hidden !important;
  -ms-overflow-style: none !important; /* IE/Edge */
  scrollbar-width: none !important; /* Firefox */
}

.page-about .sidebar-content::-webkit-scrollbar {
  display: none !important; /* Chrome/Safari/WebKit */
}

/* Ensure mobile hamburger menu is visible on about page for mobile screens */
@media (max-width: 767px) {
  .page-about .mobile-menu-toggle {
    display: block !important;
  }
  
  .page-about .sidebar {
    display: flex !important;
  }
}

/* Biblia AI icon hover animation - colorful indigo and blue shine */
#sidebar-ai-toggle:hover .sidebar-icon {
  animation: aiIconShine 2s ease-in-out infinite !important;
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.8)) !important;
}

@keyframes aiIconShine {
  0% {
    stroke: #6366f1;
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.6));
  }
  25% {
    stroke: #3b82f6;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.8));
  }
  50% {
    stroke: #1d4ed8;
    filter: drop-shadow(0 0 16px rgba(29, 78, 216, 1));
  }
  75% {
    stroke: #3b82f6;
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.8));
  }
  100% {
    stroke: #6366f1;
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.6));
  }
}

/* Adjust main content when sidebar is hidden on home page */
.page-home .main-content,
.page-home .main-wrapper,
.page-home .ai-chat-container,
.page-home .header {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure main wrapper transitions are disabled on home page when sidebar is hidden */
.page-home .main-wrapper {
  transition: none !important;
}

/* Ensure home page content is full width */
.page-home body {
  padding-left: 0 !important;
  margin: 0 !important;
}

/* ==========================================
   THEME-AWARE OVERRIDES FOR LAYOUT.CSS
   ========================================== */

/* Ensure responsive variables are available for theme overrides */
:root {
  /* Import responsive font sizes from layout.css */
  --font-size-xs: clamp(0.75rem, 0.8vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 1vw, 1rem);
  --font-size-base: clamp(1rem, 1.2vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1.4vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 2vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 2.5vw, 2.25rem);
  --font-size-4xl: clamp(2.25rem, 3vw, 2.5rem);
  --font-size-5xl: clamp(2.5rem, 4vw, 3rem);
  --font-size-6xl: clamp(3rem, 5vw, 4rem);
  
  /* Import responsive spacing from layout.css */
  --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --spacing-sm: clamp(0.5rem, 1vw, 0.75rem);
  --spacing-md: clamp(0.75rem, 1.5vw, 1rem);
  --spacing-lg: clamp(1rem, 2vw, 1.5rem);
  --spacing-xl: clamp(1.5rem, 3vw, 2rem);
  --spacing-2xl: clamp(2rem, 4vw, 3rem);
  --spacing-3xl: clamp(3rem, 5vw, 4rem);
}

/* Override all hardcoded colors with theme variables */

/* Main Content Area */
.bible-main-content {
  background: var(--theme-gradient-card) !important;
  color: var(--theme-text-primary) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
}

/* Mobile/Tablet: Force pure white background in light mode */
@media (max-width: 1366px) {
  .bible-main-content {
    background: var(--bible-bg-primary, #ffffff) !important;
  }
}

/* Welcome Content - ensure consistent with shalom elements */
.welcome-content h1 {
  color: var(--theme-text-chapter) !important;
  font-size: var(--font-size-6xl) !important;
  font-family: 'Bodoni Moda', serif !important;
  font-weight: 200 !important;
  letter-spacing: clamp(-5px, -0.3vw, -2px) !important;
  line-height: 1.1 !important;
}

.welcome-content p {
  color: var(--theme-text-secondary) !important;
  font-size: var(--font-size-xl) !important;
  font-family: 'Bodoni Moda', serif !important;
  font-weight: 200 !important;
  line-height: 1.2 !important;
  letter-spacing: clamp(-0.5px, -0.05vw, -0.2px) !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: clamp(300px, 50vw, 450px) !important;
}

/* Shalom Welcome Section */
.shalom-title {
  color: var(--theme-text-chapter) !important;
  font-size: var(--font-size-6xl) !important;
  font-family: 'Bodoni Moda', serif !important;
  font-weight: 200 !important;
  letter-spacing: clamp(-5px, -0.3vw, -2px) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  margin-bottom: var(--spacing-md) !important;
}

.shalom-subtitle {
  color: var(--theme-text-secondary) !important;
  font-size: var(--font-size-xl) !important; 
  font-family: 'Bodoni Moda', serif !important;
  font-weight: 200 !important;
  line-height: 1.2 !important;
  letter-spacing: clamp(-0.5px, -0.05vw, -0.2px) !important;
  text-align: center !important;
  margin: calc(-1 * var(--spacing-md)) auto var(--spacing-lg) auto !important;
  max-width: clamp(300px, 50vw, 450px) !important;
}

.shalom-or {
  color: var(--theme-text-chapter) !important;
  font-size: var(--font-size-xl) !important;
  font-family: 'Libre Baskerville', serif !important;
  text-align: center !important;
  margin: var(--spacing-xs) 0 !important;
}

/* Book Selector */
.book-selector-btn {
  background: var(--theme-bg-card) !important;
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border-gentle) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
}

.custom-book-selector.expanded .book-selector-btn {
  background: var(--theme-gradient-card) !important;
  box-shadow: var(--theme-shadow-elevated) !important;
}

.book-selector-btn:hover {
  border-color: var(--theme-text-chapter) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
  color: var(--theme-text-primary) !important;
}

.custom-book-selector.expanded .book-selector-btn .btn-text {
  color: var(--theme-text-chapter) !important;
}

.book-grid-container {
  background: var(--theme-bg-card) !important;
  box-shadow: var(--theme-shadow-elevated) !important;
}

.book-grid-header h3 {
  color: var(--theme-text-chapter) !important;
}

.grid-close-btn {
  background: var(--theme-bg-tertiary) !important;
  color: var(--theme-text-secondary) !important;
}

.grid-close-btn:hover {
  background: var(--theme-bg-panel) !important;
  color: var(--theme-text-primary) !important;
}

.book-tile {
  background: var(--theme-gradient-card) !important;
  border-color: var(--theme-border-gentle) !important;
  color: var(--theme-text-chapter) !important;
  box-shadow: var(--theme-shadow-soft) !important;
}

.book-tile:hover {
  background: var(--theme-gradient-grace) !important;
  border-color: var(--theme-text-chapter) !important;
  color: var(--theme-text-chapter) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
}

.book-tile.selected {
  background: var(--theme-gradient-wisdom) !important;
  border-color: var(--theme-text-chapter) !important;
  color: var(--theme-bg-primary) !important;
  box-shadow: var(--theme-shadow-elevated) !important;
}

/* Search Elements */
.shalom-search-input {
  background: var(--theme-gradient-card) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
  color: var(--theme-text-primary) !important;
  border-color: transparent !important;
  width: clamp(280px, 40vw, 400px) !important;
  height: clamp(40px, 6vw, 56px) !important;
  border-radius: clamp(18px, 3vw, 28px) !important;
  font-size: var(--font-size-base) !important;
  padding: 0 var(--spacing-lg) !important;
  font-family: "Suisse Intl Book", sans-serif !important;
}

.shalom-search-input:focus {
  border-color: var(--theme-text-chapter) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
}

.shalom-search-input:hover {
  border-color: var(--theme-text-chapter) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
}

.shalom-search-input::placeholder {
  color: var(--theme-text-muted) !important;
  font-size: var(--font-size-sm) !important;
  font-style: italic !important;
}

.shalom-search-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  color: #fff !important;
  height: clamp(40px, 6vw, 56px) !important;
  padding: 0 var(--spacing-lg) !important;
  border-radius: clamp(16px, 2.5vw, 20px) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
  font-family: "Suisse Intl Book", sans-serif !important;
  min-width: clamp(120px, 20vw, 160px) !important;
  white-space: nowrap !important;
}

.shalom-search-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #059669 !important;
}

.shalom-search-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-lg) !important;
  margin-top: var(--spacing-2xl) !important;
}

.shalom-form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-md) !important;
  align-items: center !important;
  margin-bottom: var(--spacing-sm) !important;
  width: 100% !important;
}

.animated-search-bar {
  background: var(--theme-gradient-card) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
}

.animated-search-bar:hover {
  border-color: var(--theme-text-chapter) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
}

.search-icon {
  color: var(--theme-text-muted) !important;
}

.animated-search-bar:hover .search-icon {
  color: var(--theme-text-chapter) !important;
}

.search-input {
  color: var(--theme-text-primary) !important;
}

.search-typewriter {
  color: var(--theme-text-primary) !important;
  border-right-color: var(--theme-text-chapter) !important;
}

/* Split Sections */
.split-section {
  background: var(--theme-gradient-heaven);
}

.split-section:nth-child(odd) {
  background: var(--theme-gradient-peace) !important;
}

.quote-left h2 {
  color: var(--theme-text-chapter);
}

.quote-left h2 * {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
}

.quote-left span {
  color: var(--theme-text-secondary) !important;
}

.description-right h3 {
  color: var(--theme-text-chapter) !important;
}

.description-right p {
  color: var(--theme-text-primary) !important;
}

/* Animated Quote Highlighting */
.interactive-quote .highlight-ask,
.interactive-quote .highlight-receive,
.interactive-quote .highlight-joy {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}

.interactive-quote.prompt-1-hover .highlight-ask,
.interactive-quote.prompt-1-hover .highlight-receive,
.interactive-quote.prompt-2-hover .highlight-receive,
.interactive-quote.prompt-2-hover .highlight-joy,
.interactive-quote.prompt-3-hover .highlight-ask,
.interactive-quote.prompt-3-hover .highlight-joy {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}

/* Prompt Pills */
.prompt-pill {
  border-color: var(--theme-border-gentle) !important;
  color: var(--theme-text-secondary) !important;
  box-shadow: var(--theme-shadow-soft) !important;
  font-size: clamp(0.65rem, 0.8vw, 0.7rem) !important;
  padding: clamp(0.3rem, 0.6vw, 0.4rem) clamp(0.8rem, 1.4vw, 1rem) !important;
}

/* Light theme prompt pill hover */
[data-theme="light"] .prompt-pill:hover {
  background: linear-gradient(135deg, #6B4596, #5B3A93) !important;
  color: white !important;
  border-color: #6B4596 !important;
  box-shadow: 0 4px 12px rgba(107, 69, 150, 0.3) !important;
}

/* Dark theme prompt pill hover */
[data-theme="dark"] .prompt-pill:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.3) !important;
}

[data-theme="light"] .prompt-pill:hover .typewriter,
[data-theme="light"] .prompt-pill:hover span {
  color: white !important;
}

[data-theme="dark"] .prompt-pill:hover .typewriter,
[data-theme="dark"] .prompt-pill:hover span {
  color: #ffffff !important;
}

.prompt-pill.loading {
  background: var(--theme-gradient-panel) !important;
}

.loading-dots {
  color: var(--theme-text-muted) !important;
}

/* AI Loading Indicator */
.ai-loading-indicator {
  background: var(--theme-gradient-grace) !important;
  border-color: var(--theme-border-gentle) !important;
  box-shadow: var(--theme-shadow-soft) !important;
}

.ai-loading-text {
  color: var(--theme-text-muted) !important;
}

/* Verses Loading Indicator */
#versesLoadingIndicator {
  background: var(--theme-gradient-grace) !important;
  border-color: var(--theme-border-gentle) !important;
  box-shadow: var(--theme-shadow-soft) !important;
}

#versesLoadingIndicator .ai-loading-text {
  color: var(--theme-text-muted) !important;
}

/* Emoji Items */
.emoji-item {
  background: var(--theme-gradient-card) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
  border-color: var(--theme-border-gentle) !important;
  font-size: clamp(6rem, 10vw, 9rem);
  width: clamp(80px, 15vw, 120px);
  height: clamp(80px, 15vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: clamp(2px, 0.5vw, 3px) solid rgba(145, 56, 229, 0.2);
  opacity: 0;
  transform: translateY(30px) scale(0.6);
  animation: emojiFloat 1s ease-out forwards;
  cursor: pointer;
  transition: all 0.4s ease;
}

.emoji-item:hover {
  box-shadow: var(--theme-shadow-elevated) !important;
  border-color: var(--theme-text-chapter) !important;
  background: var(--theme-gradient-grace) !important;
}

/* Emoji Tooltip Theme Styles */
.emoji-tooltip {
  background: var(--theme-text-chapter) !important;
  color: var(--theme-text-primary) !important;
  box-shadow: var(--theme-shadow-elevated) !important;
}

.emoji-tooltip::before {
  border-bottom-color: var(--theme-text-chapter) !important;
}

/* Biblia AI Demo Panel Theme Styles */
.demo-panel {
  background: var(--theme-gradient-grace) !important;
  border-color: var(--theme-text-chapter) !important;
  box-shadow: 
    var(--theme-shadow-elevated),
    0 0 0 1px var(--theme-text-chapter),
    inset 0 0 20px rgba(145, 56, 229, 0.05) !important;
  opacity: 0.85;
}

.biblia-ai-demo.active .demo-panel {
  animation: panelGlowTheme 2s ease-in-out infinite alternate !important;
}

@keyframes panelGlowTheme {
  0% {
    box-shadow: 
      var(--theme-shadow-elevated),
      0 0 0 1px var(--theme-text-chapter),
      inset 0 0 20px rgba(145, 56, 229, 0.05) !important;
  }
  100% {
    box-shadow: 
      var(--theme-shadow-elevated),
      0 0 0 2px var(--theme-text-chapter),
      inset 0 0 30px rgba(145, 56, 229, 0.1) !important;
  }
}

.demo-header {
  background: var(--theme-gradient-divine) !important;
}

.prototype-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.demo-content {
  background: transparent !important;
}

.demo-quote {
  background: var(--theme-bg-secondary) !important;
  color: var(--theme-text-primary) !important;
  border-left-color: var(--theme-text-chapter) !important;
}

.demo-reference {
  color: var(--theme-text-secondary) !important;
}

.demo-ai-response {
  background: var(--theme-bg-main) !important;
  border-color: var(--theme-text-chapter) !important;
}

.demo-ai-response::before {
  background: var(--theme-text-chapter) !important;
}

.demo-ai-message {
  color: var(--theme-text-primary) !important;
}

.demo-ai-signature {
  color: var(--theme-text-chapter) !important;
  border-top-color: var(--theme-text-chapter) !important;
}

/* Bible Verses Search Container Theme Styles */
.bible-verses-search {
  background: var(--theme-gradient-card) !important;
  border-color: var(--theme-text-chapter) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
}

.bible-verses-search.active {
  opacity: 0.65 !important;
}

/* Ultra-thin scrollbar theme support */
.verses-content::-webkit-scrollbar-thumb {
  background: rgba(145, 56, 229, 0.15) !important;
}

.verses-content::-webkit-scrollbar-thumb:hover {
  background: rgba(145, 56, 229, 0.25) !important;
}

/* Theme-aware scrollbar for dark mode */
[data-theme="dark"] .verses-content::-webkit-scrollbar-thumb {
  background: var(--theme-bg-panel) !important;
}

[data-theme="dark"] .verses-content::-webkit-scrollbar-thumb:hover {
  background: var(--theme-bg-panel)  !important;
}

/* Firefox scrollbar theming - Firefox-specific properties, ignored by other browsers */
.verses-content {
  /* Firefox only - fallback for custom scrollbar styling */
  scrollbar-color: rgba(145, 56, 229, 0.15) transparent !important;
}

[data-theme="dark"] .verses-content {
  /* Firefox only - fallback for custom scrollbar styling */
  scrollbar-color: var(--theme-bg-secondary)  transparent !important;
}

/* ==========================================
   CROSS-BROWSER COMPATIBILITY RULES
   ========================================== */

/* User Select - Prevents text selection */
.no-select {
  /* Legacy WebKit */
  -khtml-user-select: none;
  /* WebKit browsers (Chrome, Safari, newer versions of Opera) */
  -webkit-user-select: none;
  /* Mozilla Firefox */
  -moz-user-select: none;
  /* Internet Explorer/Edge */
  -ms-user-select: none;
  /* Old versions of Opera */
  -o-user-select: none;
  /* Standard property */
  user-select: none;
}

.select-text {
  /* WebKit browsers */
  -webkit-user-select: text;
  /* Mozilla Firefox */
  -moz-user-select: text;
  /* Internet Explorer/Edge */
  -ms-user-select: text;
  /* Old versions of Opera */
  -o-user-select: text;
  /* Standard property */
  user-select: text;
}

.select-all {
  /* WebKit browsers */
  -webkit-user-select: all;
  /* Mozilla Firefox */
  -moz-user-select: all;
  /* Internet Explorer/Edge */
  -ms-user-select: all;
  /* Standard property */
  user-select: all;
}

/* Hyphens - Automatic word breaking */
.hyphens-auto {
  /* WebKit browsers (Safari, Chrome) */
  -webkit-hyphens: auto;
  /* Mozilla Firefox */
  -moz-hyphens: auto;
  /* Internet Explorer/Edge */
  -ms-hyphens: auto;
  /* Standard property */
  hyphens: auto;
  /* Word break fallback for browsers that don't support hyphens */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hyphens-manual {
  /* WebKit browsers */
  -webkit-hyphens: manual;
  /* Mozilla Firefox */
  -moz-hyphens: manual;
  /* Internet Explorer/Edge */
  -ms-hyphens: manual;
  /* Standard property */
  hyphens: manual;
}

.hyphens-none {
  /* WebKit browsers */
  -webkit-hyphens: none;
  /* Mozilla Firefox */
  -moz-hyphens: none;
  /* Internet Explorer/Edge */
  -ms-hyphens: none;
  /* Standard property */
  hyphens: none;
}

/* Scrollbar Styling - Cross-browser compatibility */
.custom-scrollbar {
  /* Modern browsers (Firefox 64+) */
  scrollbar-width: thin;
  scrollbar-color: var(--theme-text-chapter) transparent;
  
  /* Internet Explorer and Edge Legacy */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.custom-scrollbar-dark {
  /* Modern browsers (Firefox 64+) */
  scrollbar-width: thin;
  scrollbar-color: var(--theme-bg-panel) transparent;
}

.custom-scrollbar-hidden {
  /* Modern browsers (Firefox 64+) */
  scrollbar-width: none;
  /* Internet Explorer and Edge */
  -ms-overflow-style: none;
}

/* WebKit scrollbar styling (Chrome, Safari, Edge Chromium) */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--theme-text-chapter);
  border-radius: 4px;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  opacity: 0.5;
  background: var(--theme-text-chapter);
}

.custom-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark theme scrollbar */
.custom-scrollbar-dark::-webkit-scrollbar-thumb {
  background: var(--theme-bg-panel);
  opacity: 0.4;
}

.custom-scrollbar-dark::-webkit-scrollbar-thumb:hover {
  opacity: 0.6;
  background: var(--theme-bg-panel);
}

/* Hidden scrollbar for WebKit browsers */
.custom-scrollbar-hidden::-webkit-scrollbar {
  display: none;
  width: 0px;
  background: transparent;
}

/* Thin scrollbar variant */
.custom-scrollbar-thin {
  /* Modern browsers */
  scrollbar-width: thin;
  scrollbar-color: rgba(145, 56, 229, 0.2) transparent;
}

.custom-scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.custom-scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(145, 56, 229, 0.2);
  border-radius: 2px;
}

.custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(145, 56, 229, 0.4);
}

/* Auto-hiding scrollbar (appears on hover) */
.custom-scrollbar-auto {
  /* Modern browsers */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

.custom-scrollbar-auto:hover {
  scrollbar-color: var(--theme-text-chapter) transparent;
}

.custom-scrollbar-auto::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar-auto::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar-auto::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.custom-scrollbar-auto:hover::-webkit-scrollbar-thumb {
  background: var(--theme-text-chapter);
  opacity: 0.3;
}

.custom-scrollbar-auto::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-chapter);
  opacity: 0.5;
}

/* Theme-aware scrollbar classes */
[data-theme="light"] .scrollbar-theme {
  scrollbar-color: rgba(145, 56, 229, 0.15) transparent;
}

[data-theme="light"] .scrollbar-theme::-webkit-scrollbar-thumb {
  background: rgba(145, 56, 229, 0.15);
}

[data-theme="dark"] .scrollbar-theme {
  scrollbar-color: var(--theme-bg-secondary) transparent;
}

[data-theme="dark"] .scrollbar-theme::-webkit-scrollbar-thumb {
  background: var(--theme-bg-secondary);
}

.verses-header {
  background: var(--theme-gradient-divine) !important;
}

.verse-item {
  background: var(--theme-bg-secondary) !important;
  border-left-color: var(--theme-text-chapter) !important;
}

.verse-text {
  color: var(--theme-text-primary) !important;
}

.verse-reference {
  color: var(--theme-text-chapter) !important;
}

.verse-ref-text {
  color: var(--theme-text-chapter) !important;
}

.context-btn {
  background: var(--theme-gradient-divine) !important;
  color: white !important;
}

.context-btn:hover {
  background: var(--theme-gradient-wisdom) !important;
}

.context-message {
  background: transparent !important;
  border: none !important;
}

.context-message p {
  color: var(--theme-text-chapter) !important;
  font-family: "cursive" !important;
  font-style: italic !important;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;
  text-shadow: 0 2px 4px rgba(145, 56, 229, 0.2) !important;
}

/* Get Started Button */
.get-started-container {
  margin-top: var(--spacing-2xl) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.get-started-btn {
  background: var(--theme-gradient-wisdom) !important;
  box-shadow: var(--theme-shadow-gentle) !important;
  border: none !important;
  color: white !important;
  padding: var(--spacing-md) var(--spacing-2xl) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: 600 !important;
  font-family: "Suisse Intl Book", sans-serif !important;
  border-radius: clamp(20px, 3vw, 28px) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  min-width: clamp(160px, 25vw, 200px) !important;
  white-space: nowrap !important;
}

.get-started-btn:hover {
  box-shadow: var(--theme-shadow-elevated) !important;
  background: var(--theme-gradient-divine) !important;
}

/* Search Button */
.search-button,
.shalom-search-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  color: #fff !important;
  height: clamp(40px, 6vw, 56px) !important;
  padding: 0 var(--spacing-lg) !important;
  border-radius: clamp(16px, 2.5vw, 20px) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
  font-family: "Suisse Intl Book", sans-serif !important;
  min-width: clamp(120px, 20vw, 160px) !important;
  white-space: nowrap !important;
}

.search-button:hover,
.shalom-search-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: #059669 !important;
}

/* Verse Text */
.verse-text {
  color: var(--theme-text-primary) !important;
}

.verse-ref {
  color: var(--theme-text-secondary) !important;
}

.hero-verse {
  color: var(--theme-text-primary) !important;
}

.hero-verse-ref {
  color: var(--theme-text-secondary) !important;
}

/* Header Search Demo */
.header-search-demo {
  color: var(--theme-text-muted) !important;
  border-right-color: var(--theme-text-chapter) !important;
}

/* Final Section Override - Indigo and Blue Background (only for non-animated sections) */
[data-theme="light"] .final-section:not(.animated-section) {
  background: linear-gradient(135deg, #b094c2 0%, #f5f9ff 75%) !important ;
  /* box-shadow: inset 0 0 100px rgba(99, 102, 241, 0.3), 0 8px 32px rgba(29, 78, 216, 0.2) !important; */
}

[data-theme="dark"] .final-section:not(.animated-section) {
  /* Firefox only - fallback for custom scrollbar styling */
  scrollbar-color: var(--theme-bg-primary)  transparent !important;
}

.final-section:not(.animated-section) .quote-left h2 {
  color: var(--theme-text-chapter) !important;
  text-shadow: var(--theme-shadow-elevated) !important;
}

.final-section:not(.animated-section) .quote-left span {
  color: var(--theme-text-primary) !important;
  text-shadow: var(--theme-shadow-gentle) !important;
}

.final-section:not(.animated-section) .description-right h3 {
  color: var(--theme-text-primary) !important;
  text-shadow: var(--theme-shadow-gentle) !important;
}

.final-section:not(.animated-section) .description-right p {
  color: var(--theme-text-primary) !important;
  text-shadow: var(--theme-shadow-gentle) !important;
}
/* Typewriter animations */
@keyframes searchTypewriter {
  0% {
    opacity: 1;
    width: 0;
  }
  50% {
    opacity: 1;
    width: 100%;
  }
  100% {
    opacity: 1;
    width: 100%;
    border-right: none;
  }
}

@keyframes searchBlink {
  0%, 50% {
    border-right-color: var(--theme-text-chapter);
  }
  51%, 100% {
    border-right-color: transparent;
  }
}

@keyframes headerBlink {
  0%, 50% {
    border-right-color: var(--theme-text-chapter);
  }
  51%, 100% {
    border-right-color: transparent;
  }
}

/* AI Loading Dots Animation - Theme Aware */
@keyframes aiLoadingDots {
  0% {
    background: var(--theme-text-chapter);
    box-shadow: 
      8px 0 0 0 var(--theme-border-light),
      16px 0 0 0 var(--theme-border-light);
  }
  33% {
    background: var(--theme-border-light);
    box-shadow: 
      8px 0 0 0 var(--theme-text-chapter),
      16px 0 0 0 var(--theme-border-light);
  }
  66% {
    background: var(--theme-border-light);
    box-shadow: 
      8px 0 0 0 var(--theme-border-light),
      16px 0 0 0 var(--theme-text-chapter);
  }
  100% {
    background: var(--theme-text-chapter);
    box-shadow: 
      8px 0 0 0 var(--theme-border-light),
      16px 0 0 0 var(--theme-border-light);
  }
}

/* Loading Dots Animation - Theme Aware */
@keyframes loadingDots {
  0% {
    background: var(--theme-text-chapter);
    box-shadow: 
      12px 0 0 0 var(--theme-text-muted),
      24px 0 0 0 var(--theme-text-muted);
  }
  33% {
    background: var(--theme-text-muted);
    box-shadow: 
      12px 0 0 0 var(--theme-text-chapter),
      24px 0 0 0 var(--theme-text-muted);
  }
  66% {
    background: var(--theme-text-muted);
    box-shadow: 
      12px 0 0 0 var(--theme-text-muted),
      24px 0 0 0 var(--theme-text-chapter);
  }
  100% {
    background: var(--theme-text-chapter);
    box-shadow: 
      12px 0 0 0 var(--theme-text-muted),
      24px 0 0 0 var(--theme-text-muted);
  }
}

/* ==========================================
   RESPONSIVE THEME OVERRIDES
   ========================================== */

/* Desktop Large (1440px+) */
@media (min-width: 1440px) {
  .shalom-title,
  .welcome-content h1 {
    font-size: clamp(3.5rem, 4.5vw, 5rem) !important;
    letter-spacing: clamp(-6px, -0.4vw, -5px) !important;
    margin-bottom: clamp(1.2rem, 2vw, 1.5rem) !important;
  }
  
  .shalom-subtitle,
  .welcome-content p {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important;
    max-width: clamp(400px, 55vw, 500px) !important;
    margin: calc(-1.2 * var(--spacing-md)) auto var(--spacing-xl) auto !important;
  }
  
  .shalom-or {
    font-size: clamp(1.6rem, 2.4vw, 2rem) !important;
    margin: var(--spacing-md) 0 !important;
  }
  
  .get-started-container {
    margin-top: clamp(2rem, 3.5vw, 2.5rem) !important;
  }
  
  .get-started-btn {
    padding: clamp(1rem, 1.8vw, 1.3rem) clamp(2rem, 3.5vw, 2.5rem) !important;
    font-size: clamp(1.2rem, 1.6vw, 1.4rem) !important;
    min-width: clamp(180px, 25vw, 220px) !important;
    border-radius: clamp(24px, 3.5vw, 32px) !important;
  }
  
  .shalom-search-container {
    gap: clamp(1.5rem, 2.5vw, 2rem) !important;
    margin-top: clamp(2.5rem, 4vw, 3rem) !important;
  }
  
  .shalom-search-input {
    width: clamp(400px, 45vw, 480px) !important;
    height: clamp(56px, 7vw, 64px) !important;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important;
    padding: 0 clamp(1.5rem, 2.5vw, 2rem) !important;
    border-radius: clamp(28px, 3.5vw, 32px) !important;
  }
  
  .shalom-search-button {
    height: clamp(56px, 7vw, 64px) !important;
    padding: 0 clamp(1.5rem, 2.5vw, 2rem) !important;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important;
    min-width: clamp(160px, 22vw, 200px) !important;
    border-radius: clamp(20px, 3vw, 24px) !important;
  }
  
  .shalom-search-input::placeholder {
    font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
  }
  
  .quote-left h2 {
    font-size: clamp(1.8rem, 2.5vw, 2.2rem) !important;
  }
  
  .quote-left span {
    font-size: clamp(1.2rem, 1.6vw, 1.4rem) !important;
  }
  
  .description-right h3 {
    font-size: clamp(1.4rem, 1.8vw, 1.6rem) !important;
  }
  
  .description-right p {
    font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
  }
  
  .emoji-item {
    font-size: clamp(8rem, 12vw, 10rem);
    width: clamp(140px, 18vw, 160px);
    height: clamp(140px, 18vw, 160px);
  }
  
  .prompt-pills-container {
    max-width: clamp(320px, 35vw, 420px);
    gap: clamp(0.3rem, 0.6vw, 0.5rem);
  }
  
  .prompt-pill {
    font-size: clamp(0.7rem, 0.9vw, 0.75rem) !important;
    padding: clamp(0.35rem, 0.8vw, 0.45rem) clamp(0.9rem, 1.6vw, 1.1rem) !important;
    min-height: clamp(1.8rem, 2.8vw, 2rem);
  }
}

/* Laptop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .shalom-title,
  .welcome-content h1 {
    font-size: clamp(2.8rem, 4vw, 3.5rem) !important;
    letter-spacing: clamp(-5px, -0.35vw, -4px) !important;
    margin-bottom: clamp(1rem, 1.8vw, 1.2rem) !important;
  }
  
  .shalom-subtitle,
  .welcome-content p {
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
    max-width: clamp(380px, 50vw, 450px) !important;
    margin: calc(-1rem) auto var(--spacing-lg) auto !important;
  }
  
  .shalom-or {
    font-size: clamp(1.4rem, 2vw, 1.6rem) !important;
    margin: var(--spacing-sm) 0 !important;
  }
  
  .get-started-container {
    margin-top: clamp(1.8rem, 3vw, 2.2rem) !important;
  }
  
  .get-started-btn {
    padding: clamp(0.9rem, 1.6vw, 1.1rem) clamp(1.8rem, 3vw, 2.2rem) !important;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important;
    min-width: clamp(160px, 23vw, 200px) !important;
    border-radius: clamp(20px, 3vw, 26px) !important;
  }
  
  .shalom-search-container {
    gap: clamp(1.2rem, 2vw, 1.5rem) !important;
    margin-top: clamp(2.2rem, 3.5vw, 2.5rem) !important;
  }
  
  .shalom-search-input {
    width: clamp(360px, 42vw, 420px) !important;
    height: clamp(52px, 6.5vw, 58px) !important;
    font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
    padding: 0 clamp(1.3rem, 2.2vw, 1.8rem) !important;
    border-radius: clamp(26px, 3.2vw, 29px) !important;
  }
  
  .shalom-search-button {
    height: clamp(52px, 6.5vw, 58px) !important;
    padding: 0 clamp(1.3rem, 2.2vw, 1.8rem) !important;
    font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
    min-width: clamp(150px, 20vw, 180px) !important;
    border-radius: clamp(18px, 2.8vw, 22px) !important;
  }
  
  .shalom-search-input::placeholder {
    font-size: clamp(0.9rem, 1.1vw, 1rem) !important;
  }
  
  .quote-left h2 {
    font-size: clamp(1.6rem, 2.2vw, 1.9rem) !important;
  }
  
  .quote-left span {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem) !important;
  }
  
  .description-right h3 {
    font-size: clamp(1.3rem, 1.6vw, 1.5rem) !important;
  }
  
  .description-right p {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem) !important;
  }
  
  .emoji-item {
    font-size: clamp(7rem, 10vw, 9rem);
    width: clamp(100px, 16vw, 130px);
    height: clamp(100px, 16vw, 130px);
  }
  
  .prompt-pills-container {
    max-width: clamp(350px, 40vw, 410px) ;
    gap: clamp(0.25rem, 0.5vw, 0.4rem);
  }
  
  .prompt-pill {
    font-size: clamp(0.65rem, 0.8vw, 0.7rem) !important;
    padding: clamp(0.32rem, 0.7vw, 0.42rem) clamp(0.95rem, 1.5vw, 1.15rem) !important;
    min-height: clamp(1.7rem, 2.6vw, 1.9rem);
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Remove scrollbar on tablet for Shalom page */
  body:has(.shalom-welcome) {
    overflow-x: hidden !important;
    -ms-overflow-style: none !important; /* IE/Edge */
    scrollbar-width: none !important; /* Firefox */
  }
  
  body:has(.shalom-welcome)::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }
  
  .shalom-welcome {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .shalom-title,
  .welcome-content h1 {
    font-size: clamp(2.2rem, 3.5vw, 2.8rem) !important;
    letter-spacing: clamp(-4px, -0.3vw, -3px) !important;
    margin-bottom: clamp(0.8rem, 1.5vw, 1rem) !important;
  }
  
  .shalom-subtitle,
  .welcome-content p {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem) !important;
    max-width: clamp(350px, 45vw, 400px) !important;
    margin: calc(-0.8rem) auto var(--spacing-md) auto !important;
  }
  
  .shalom-or {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem) !important;
    margin: var(--spacing-xs) 0 !important;
  }
  
  .get-started-container {
    margin-top: clamp(1.5rem, 3vw, 2rem) !important;
  }
  
  .get-started-btn {
    padding: clamp(0.8rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem) !important;
    font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
    min-width: clamp(140px, 22vw, 180px) !important;
    border-radius: clamp(18px, 2.5vw, 24px) !important;
  }
  
  .shalom-search-container {
    flex-direction: column !important;
    gap: clamp(1rem, 1.5vw, 1.2rem) !important;
    margin-top: clamp(1.8rem, 3vw, 2.2rem) !important;
    width: 100% !important;
    max-width: clamp(350px, 90vw, 400px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .shalom-search-input {
    width: 100% !important;
    max-width: clamp(340px, 85vw, 380px) !important;
    height: clamp(48px, 6vw, 52px) !important;
    font-size: clamp(0.95rem, 1.1vw, 1rem) !important;
    padding: 0 clamp(1.2rem, 2vw, 1.5rem) !important;
    border-radius: clamp(24px, 3vw, 26px) !important;
  }
  
  .shalom-search-button {
    height: clamp(48px, 6vw, 52px) !important;
    width: 100% !important;
    max-width: clamp(200px, 60vw, 240px) !important;
    padding: 0 var(--spacing-lg) !important;
    font-size: clamp(0.95rem, 1.1vw, 1rem) !important;
    border-radius: clamp(16px, 2.5vw, 18px) !important;
  }
  
  .shalom-search-input::placeholder {
    font-size: clamp(0.85rem, 1vw, 0.9rem) !important;
  }
  
  .quote-left h2 {
    font-size: clamp(1.4rem, 2vw, 1.7rem) !important;
  }
  
  .quote-left span {
    font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
  }
  
  .description-right h3 {
    font-size: clamp(1.2rem, 1.4vw, 1.3rem) !important;
  }
  
  .description-right p {
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
  }
  
  .emoji-item {
    font-size: clamp(5rem, 8vw, 7rem);
    width: clamp(80px, 12vw, 100px);
    height: clamp(80px, 12vw, 100px);
  }
  
  .prompt-pills-container {
    max-width: clamp(350px, 36vw, 390px);
    gap: clamp(0.2rem, 0.4vw, 0.35rem);
  }
  
  .prompt-pill {
    font-size: clamp(0.6rem, 0.75vw, 0.65rem) !important;
    padding: clamp(0.28rem, 0.6vw, 0.38rem) clamp(.6em, 1.8vw, .8rem) !important;
    min-height: clamp(1.5rem, 2.4vw, 1.7rem);
  }
  
  /* Search container responsive styles for tablet */
  .search-container-wrapper {
    gap: clamp(0.8rem, 1.2vw, 1rem) !important;
    margin-top: clamp(1.2rem, 2vw, 1.5rem) !important;
  }
  
  .animated-search-bar {
    height: clamp(44px, 5.5vw, 48px) !important;
  }
  
  .search-button {
    height: clamp(44px, 5.5vw, 48px) !important;
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    padding: 0 clamp(1rem, 1.5vw, 1.2rem) !important;
  }
}

/* Mobile Large (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  /* Remove scrollbar on mobile for Shalom page */
  body:has(.shalom-welcome) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -ms-overflow-style: none !important; /* IE/Edge */
    scrollbar-width: none !important; /* Firefox */
  }
  
  body:has(.shalom-welcome)::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }
  
  .shalom-welcome {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .shalom-title,
  .welcome-content h1 {
    font-size: clamp(1.8rem, 3vw, 2.2rem) !important;
    letter-spacing: clamp(-3px, -0.25vw, -2px) !important;
    margin-bottom: clamp(0.6rem, 1.2vw, 0.8rem) !important;
  }
  
  .shalom-subtitle,
  .welcome-content p {
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
    max-width: clamp(320px, 40vw, 350px) !important;
    margin: calc(-0.6rem) auto var(--spacing-sm) auto !important;
  }
  
  .shalom-or {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important;
    margin: clamp(0.1rem, 0.3vw, 0.2rem) 0 !important;
  }
  
  .get-started-container {
    margin-top: clamp(1.2rem, 2.5vw, 1.8rem) !important;
  }
  
  .get-started-btn {
    padding: clamp(0.7rem, 1.2vw, 0.9rem) clamp(1.2rem, 2.5vw, 1.8rem) !important;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important;
    min-width: clamp(120px, 20vw, 160px) !important;
    border-radius: clamp(16px, 2.2vw, 20px) !important;
  }
  
  .shalom-search-container {
    flex-direction: column !important;
    gap: clamp(0.8rem, 1.2vw, 1rem) !important;
    margin-top: clamp(1.5rem, 2.5vw, 1.8rem) !important;
    width: 100% !important;
    max-width: clamp(320px, 85vw, 350px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 var(--spacing-sm) !important;
  }
  
  .shalom-search-input {
    width: 100% !important;
    height: clamp(44px, 5.5vw, 48px) !important;
    font-size: clamp(0.9rem, 1vw, 0.95rem) !important;
    padding: 0 clamp(1rem, 1.8vw, 1.2rem) !important;
    border-radius: clamp(22px, 2.8vw, 24px) !important;
  }
  
  .shalom-search-button {
    height: clamp(44px, 5.5vw, 48px) !important;
    width: 100% !important;
    max-width: clamp(180px, 55vw, 200px) !important;
    padding: 0 clamp(1rem, 1.8vw, 1.2rem) !important;
    font-size: clamp(0.9rem, 1vw, 0.95rem) !important;
    border-radius: clamp(14px, 2.2vw, 16px) !important;
  }
  
  .shalom-search-input::placeholder {
    font-size: clamp(0.8rem, 0.9vw, 0.85rem) !important;
  }
  
  .quote-left h2 {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
  }
  
  .quote-left span {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important;
  }
  
  .description-right h3 {
    font-size: clamp(1.1rem, 1.3vw, 1.2rem) !important;
  }
  
  .description-right p {
    font-size: clamp(0.85rem, 0.95vw, 0.9rem) !important;
  }
  
  .emoji-item {
    font-size: clamp(4rem, 6vw, 5rem);
    width: clamp(70px, 10vw, 80px);
    height: clamp(70px, 10vw, 80px);
  }
  
  .prompt-pills-container {
    max-width: clamp(310px, 34vw, 360px);
    gap: clamp(0.18rem, 0.35vw, 0.3rem);
  }
  
  .prompt-pill {
    font-size: clamp(0.55rem, 0.7vw, 0.6rem) !important;
    padding: clamp(0.25rem, 0.5vw, 0.35rem) clamp(0.85rem, 1.3vw, .85rem) !important;
    min-height: clamp(1.3rem, 2.2vw, 1.5rem);
    border-radius: clamp(8px, 1.8vw, 10px);
  }
  
  /* Search container responsive styles for mobile large */
  .search-container-wrapper {
    gap: clamp(0.6rem, 1vw, 0.8rem) !important;
    margin-top: clamp(1rem, 1.8vw, 1.3rem) !important;
  }
  
  .animated-search-bar {
    height: clamp(40px, 5vw, 44px) !important;
  }
  
  .search-button {
    height: clamp(40px, 5vw, 44px) !important;
    font-size: clamp(0.85rem, 0.9vw, 0.9rem) !important;
    padding: 0 clamp(0.8rem, 1.2vw, 1rem) !important;
    max-width: clamp(200px, 60vw, 240px) !important;
  }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
  /* Remove scrollbar on mobile for Shalom page */
  body:has(.shalom-welcome) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -ms-overflow-style: none !important; /* IE/Edge */
    scrollbar-width: none !important; /* Firefox */
  }
  
  body:has(.shalom-welcome)::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }
  
  .shalom-welcome {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .shalom-title,
  .welcome-content h1 {
    font-size: clamp(1.5rem, 2.5vw, 1.8rem) !important;
    letter-spacing: clamp(-2px, -0.2vw, -1px) !important;
    margin-bottom: clamp(0.5rem, 1vw, 0.6rem) !important;
  }
  
  .shalom-subtitle,
  .welcome-content p {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem) !important;
    max-width: clamp(280px, 35vw, 300px) !important;
    margin: calc(-0.5rem) auto clamp(0.8rem, 1.5vw, 1rem) auto !important;
  }
  
  .shalom-or {
    font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
    margin: clamp(0.1rem, 0.2vw, 0.15rem) 0 !important;
  }
  
  .get-started-container {
    margin-top: clamp(1rem, 2vw, 1.5rem) !important;
  }
  
  .get-started-btn {
    padding: clamp(0.6rem, 1vw, 0.8rem) clamp(1rem, 2vw, 1.5rem) !important;
    font-size: clamp(0.85rem, 1.3vw, 1rem) !important;
    min-width: clamp(100px, 18vw, 140px) !important;
    border-radius: clamp(14px, 2vw, 18px) !important;
  }
  
  .shalom-search-container {
    flex-direction: column !important;
    gap: clamp(0.6rem, 1vw, 0.8rem) !important;
    margin-top: clamp(1.2rem, 2vw, 1.5rem) !important;
    width: 100% !important;
    padding: 0 var(--spacing-xs) !important;
  }
  
  .shalom-search-input {
    width: 100% !important;
    height: clamp(40px, 5vw, 44px) !important;
    font-size: clamp(0.85rem, 0.9vw, 0.9rem) !important;
    padding: 0 clamp(0.8rem, 1.5vw, 1rem) !important;
    border-radius: clamp(20px, 2.5vw, 22px) !important;
  }
  
  .shalom-search-button {
    height: clamp(40px, 5vw, 44px) !important;
    width: 100% !important;
    max-width: clamp(160px, 50vw, 180px) !important;
    padding: 0 clamp(0.8rem, 1.5vw, 1rem) !important;
    font-size: clamp(0.85rem, 0.9vw, 0.9rem) !important;
    border-radius: clamp(12px, 2vw, 14px) !important;
  }
  
  .shalom-search-input::placeholder {
    font-size: clamp(0.75rem, 0.8vw, 0.8rem) !important;
  }
  
  .quote-left h2 {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important;
  }
  
  .quote-left span {
    font-size: clamp(0.85rem, 1.1vw, 0.95rem) !important;
  }
  
  .description-right h3 {
    font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
  }
  
  .description-right p {
    font-size: clamp(0.8rem, 0.9vw, 0.85rem) !important;
  }
  
  .emoji-item {
    font-size: clamp(3rem, 5vw, 4rem);
    width: clamp(60px, 8vw, 70px);
    height: clamp(60px, 8vw, 70px);
    border-width: 2px;
  }
  
  .prompt-pills-container {
    max-width: clamp(300px, 30vw, 350px);
    gap: clamp(0.15rem, 0.3vw, 0.25rem);
  }
  
  .prompt-pill {
    font-size: clamp(0.5rem, 0.65vw, 0.55rem) !important;
    padding: clamp(0.22rem, 0.45vw, 0.32rem) clamp(0.6rem, 1vw, 0.6rem) !important;
    min-height: clamp(1.1rem, 2vw, 1.3rem);
    border-radius: clamp(6px, 1.5vw, 8px);
    border-width: 1px;
  }
  
  /* Search container responsive styles for mobile small */
  .search-container-wrapper {
    gap: clamp(0.5rem, 0.8vw, 0.6rem) !important;
    margin-top: clamp(0.8rem, 1.5vw, 1rem) !important;
  }
  
  .animated-search-bar {
    height: clamp(36px, 4.5vw, 40px) !important;
    font-size: clamp(0.8rem, 0.85vw, 0.85rem) !important;
  }
  
  .search-button {
    height: clamp(36px, 4.5vw, 40px) !important;
    font-size: clamp(0.8rem, 0.85vw, 0.85rem) !important;
    padding: 0 clamp(0.6rem, 1vw, 0.8rem) !important;
    max-width: clamp(180px, 55vw, 200px) !important;
    border-radius: clamp(10px, 1.8vw, 12px) !important;
  }
}