/* Timeline Grammar App - Minimal Custom CSS */

/* Custom keyframes for animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Enhanced backdrop blur for better browser support */
.backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(24px)) {
  .backdrop-blur-xl {
    background: rgba(255, 255, 255, 0.95) !important;
  }
}

/* Enhanced smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

/* iOS Safari floating toolbar fix - based on iOS 15+ behavior */
/* Ensure background extends to true fullscreen */
.fixed.inset-0 {
  height: 100vh !important;
  height: 100dvh !important; /* Dynamic viewport height for true fullscreen */
  height: calc(100vh + env(safe-area-inset-top)) !important; /* Extend beyond Safari's floating toolbar */
}

/* iOS Safari specific fixes for floating compact toolbar */
@supports (-webkit-touch-callout: none) {
  /* Target iOS Safari specifically */
  body {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(100vh + env(safe-area-inset-top)); /* Reddit hack for PWAs */
  }

  /* Ensure fixed background elements extend properly */
  .fixed.inset-0 {
    height: 100vh !important;
    height: 100dvh !important;
    height: -webkit-fill-available !important;
    top: calc(-1 * env(safe-area-inset-top)) !important; /* Extend above safe area */
  }
}

/* Improved scroll performance */
* {
  scroll-margin-top: 2rem;
}

/* Better AOS animation consistency */
[data-aos] {
  pointer-events: none;
}

[data-aos].aos-animate {
  pointer-events: auto;
}

/* Consistent animation timing */
[data-aos='fade-up'] {
  transform: translate3d(0, 40px, 0);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos='fade-right'] {
  transform: translate3d(-40px, 0, 0);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos='fade-left'] {
  transform: translate3d(40px, 0, 0);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos='fade-down'] {
  transform: translate3d(0, -40px, 0);
  opacity: 0;
  transition-property: transform, opacity;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Print styles */
@media print {
  .backdrop-blur-xl {
    background: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .shadow-xl,
  .shadow-lg {
    box-shadow: none !important;
  }

  .bg-gradient-to-br,
  .bg-gradient-to-r {
    background: white !important;
  }
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .backdrop-blur-xl {
    background: white !important;
    border: 2px solid black !important;
  }

  .text-slate-600,
  .text-slate-700 {
    color: black !important;
  }

  .bg-white\/80,
  .bg-white\/90 {
    background: white !important;
  }
}
/* Loading state for better UX */
.loading {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.loaded {
  opacity: 1;
}

/* Faster transitions for interactive elements */
.transition-all {
  transition-duration: 0.2s !important;
}

/* Ensure icons are properly sized */
[data-lucide] {
  width: 1.25rem;
  height: 1.25rem;
}

.glass-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  /*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);*/
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3));
}
/* Enhanced background animations for glassmorphism showcase */
@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(1deg);
  }
  66% {
    transform: translateY(-8px) rotate(-1deg);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translateX(0px) translateY(0px);
  }
  25% {
    transform: translateX(10px) translateY(-5px);
  }
  50% {
    transform: translateX(-5px) translateY(-10px);
  }
  75% {
    transform: translateX(-10px) translateY(5px);
  }
}

/* Apply new animations */
.animate-float {
  animation: float-slow 8s ease-in-out infinite;
}

/* Enhanced pulse with slight movement */
.animate-pulse-slow {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite, drift 12s ease-in-out infinite;
}

/* Add some texture to the main background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 25% 25%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(119, 198, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Enhanced Timeline Dot Styles */
.timeline-dot {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 3px solid #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.timeline-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #3b82f6;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.timeline-dot:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: #2563eb;
}

.timeline-dot:hover::before {
  background: #2563eb;
  transform: translate(-50%, -50%) scale(1.2);
}

/* Timeline dot colors matching card badges */
.timeline-dot.dot-blue {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-blue::before {
  background: #3b82f6;
}

.timeline-dot.dot-green {
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-green::before {
  background: #10b981;
}

.timeline-dot.dot-purple {
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-purple::before {
  background: #8b5cf6;
}

.timeline-dot.dot-orange {
  border-color: #f97316;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-orange::before {
  background: #f97316;
}

.timeline-dot.dot-indigo {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-indigo::before {
  background: #6366f1;
}

.timeline-dot.dot-emerald {
  border-color: #059669;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-emerald::before {
  background: #059669;
}

.timeline-dot.dot-pink {
  border-color: #ec4899;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-pink::before {
  background: #ec4899;
}

.timeline-dot.dot-red {
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-red::before {
  background: #dc2626;
}

.timeline-dot.dot-violet {
  border-color: #7c3aed;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-violet::before {
  background: #7c3aed;
}

.timeline-dot.dot-teal {
  border-color: #0d9488;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-teal::before {
  background: #0d9488;
}

.timeline-dot.dot-amber {
  border-color: #d97706;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.timeline-dot.dot-amber::before {
  background: #d97706;
}

/* Timeline Line Styles */
.timeline-line {
  background: #cbd5e1;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1);
}

.timeline-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
  overflow: visible; /* Ensure timeline line is visible */
}

/* Ensure timeline extends to cover all events */
.timeline-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2rem;
  width: 2px;
  height: 20px;
  background: transparent;
  pointer-events: none;
}

@media (min-width: 768px) {
  .timeline-container::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Ensure timeline cards have consistent heights */
.timeline-container .glass-card {
  min-height: 120px;
  display: flex;
  align-items: center;
}

.timeline-container .glass-card .p-6 {
  width: 100%;
}

/* Better timeline line positioning */
#timeline-line {
  position: absolute;
  background: linear-gradient(to bottom, #cbd5e1, #94a3b8, #cbd5e1);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1);
  transition: height 0.3s ease;
  min-height: 200px; /* Ensure minimum height */
}

/* Timeline line positioning adjustments to match dots */
#timeline-line.left-8 {
  left: 2rem !important; /* Match dot position on mobile */
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 767px) {
  #timeline-line {
    left: 2rem !important;
    min-height: 300px;
  }
}

/* Desktop positioning */
@media (min-width: 768px) {
  #timeline-line.left-8 {
    left: 50% !important;
  }

  #timeline-line.md\:left-1\/2 {
    left: 50% !important;
  }

  #timeline-line.md\:transform {
    transform: translateX(-50%) !important;
  }

  #timeline-line {
    min-height: 400px;
  }
}

/* Enhanced timeline positioning - Override Tailwind classes */
.timeline-dot.w-3 {
  width: 20px !important;
}

.timeline-dot.h-3 {
  height: 20px !important;
}

.timeline-dot.left-8 {
  left: 1.5rem !important; /* Better mobile positioning */
}

@media (min-width: 768px) {
  .timeline-dot.left-8 {
    left: 50% !important;
  }

  .timeline-dot.md\:left-1\/2 {
    left: 50% !important;
  }

  .timeline-dot.md\:transform {
    transform: translateX(-50%) !important;
  }
}

/* Adjust card margins for better dot alignment */
.timeline-container .ml-20 {
  margin-left: 4rem !important;
}

@media (min-width: 768px) {
  .timeline-container .ml-20.md\:ml-0 {
    margin-left: 0 !important;
  }
}

/* Responsive timeline adjustments */
@media (max-width: 639px) {
  .timeline-container .glass-card {
    min-height: 100px;
  }

  /* Mobile timeline line positioning */
  #timeline-line {
    left: 2rem !important;
    width: 2px !important; /* Slightly thicker on mobile for better visibility */
  }

  .timeline-container {
    padding-bottom: 2rem; /* Extra space at bottom */
  }
}

/* Tablet specific adjustments */
@media (min-width: 640px) and (max-width: 767px) {
  .timeline-container .glass-card {
    min-height: 110px;
  }

  #timeline-line {
    width: 2px !important;
  }

  .timeline-container {
    padding-bottom: 2rem;
  }
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .timeline-container {
    padding-bottom: 1rem;
  }
}
/* Sidebar Style Legend */
.legend-sidebar-container {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 2rem;
  transition: all 0.3s ease;
}

.legend-sidebar-container:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.legend-sidebar-item {
  padding: 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  cursor: default;
}

.legend-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.legend-sidebar-content {
  width: 100%;
}

.legend-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.legend-sidebar-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  position: relative;
}

.legend-sidebar-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.legend-sidebar-item:hover .legend-sidebar-dot {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.legend-sidebar-item:hover .legend-sidebar-dot::before {
  transform: translate(-50%, -50%) scale(1.2);
}

.legend-sidebar-text {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.legend-sidebar-item:hover .legend-sidebar-text {
  color: #111827;
  font-weight: 700;
}

.legend-sidebar-desc {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
  margin-left: 1.75rem;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.legend-sidebar-item:hover .legend-sidebar-desc {
  opacity: 1;
  color: #4b5563;
}

/* Color variants */
.legend-sidebar-dot-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.legend-sidebar-dot-green {
  background: linear-gradient(135deg, #10b981, #059669);
}

.legend-sidebar-dot-orange {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.legend-sidebar-dot-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* Enhanced hover effects for specific colors */
.legend-sidebar-item:hover .legend-sidebar-dot-blue {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.legend-sidebar-item:hover .legend-sidebar-dot-green {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.legend-sidebar-item:hover .legend-sidebar-dot-orange {
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.legend-sidebar-item:hover .legend-sidebar-dot-purple {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .legend-sidebar-container {
    position: static;
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .legend-sidebar-container {
    padding: 1.25rem;
  }

  .legend-sidebar-item {
    padding: 0.625rem;
  }

  .legend-sidebar-header {
    gap: 0.625rem;
    margin-bottom: 0.25rem;
  }

  .legend-sidebar-dot {
    width: 0.875rem;
    height: 0.875rem;
  }

  .legend-sidebar-dot::before {
    width: 3px;
    height: 3px;
  }

  .legend-sidebar-text {
    font-size: 0.8125rem;
  }

  .legend-sidebar-desc {
    font-size: 0.6875rem;
    margin-left: 1.5rem;
  }
}

@media (max-width: 640px) {
  .legend-sidebar-container {
    padding: 1rem;
  }

  .legend-sidebar-item {
    padding: 0.5rem;
  }

  .legend-sidebar-header {
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .legend-sidebar-dot {
    width: 0.75rem;
    height: 0.75rem;
  }

  .legend-sidebar-text {
    font-size: 0.75rem;
  }

  .legend-sidebar-desc {
    font-size: 0.625rem;
    margin-left: 1.25rem;
  }
}
/* Horizontal Legend */
.legend-horizontal-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.legend-horizontal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.legend-horizontal-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
}

.legend-horizontal-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}

.legend-horizontal-text {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.legend-horizontal-desc {
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.4;
}

/* Color variants - balanced mid-tone colors */
.legend-horizontal-dot-blue {
  background: #3b82f6; /* blue-500 */
}

.legend-horizontal-dot-green {
  background: #10b981; /* emerald-500 */
}

.legend-horizontal-dot-orange {
  background: #f97316; /* orange-500 */
}

.legend-horizontal-dot-purple {
  background: #8b5cf6; /* violet-500 */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .legend-horizontal-item {
    padding: 1.25rem 0.875rem;
  }

  .legend-horizontal-header {
    gap: 0.625rem;
    margin-bottom: 0.625rem;
  }

  .legend-horizontal-dot {
    width: 0.875rem;
    height: 0.875rem;
  }

  .legend-horizontal-dot::before {
    width: 3px;
    height: 3px;
  }

  .legend-horizontal-text {
    font-size: 0.8125rem;
  }

  .legend-horizontal-desc {
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  .legend-horizontal-item {
    padding: 1rem 0.75rem;
  }

  .legend-horizontal-header {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .legend-horizontal-dot {
    width: 0.75rem;
    height: 0.75rem;
  }

  .legend-horizontal-text {
    font-size: 0.75rem;
  }

  .legend-horizontal-desc {
    font-size: 0.8125rem;
  }
}
/* Minimalistic Sentence Numbers */
.sentence-number {
  display: inline-block;
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.875rem;
  margin-right: 1rem;
  flex-shrink: 0;
  min-width: 1.5rem;
  text-align: right;
  position: relative;
}

.sentence-number::after {
  content: '.';
  color: #cbd5e1;
  margin-left: 0.125rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .sentence-number {
    font-size: 0.8125rem;
    min-width: 1.25rem;
  }
}

/* Mobile Background Optimization - Reduce saturation while keeping some shapes */
@media (max-width: 768px) {
  /* Hide only the most overwhelming elements on mobile */
  .fixed.inset-0 .absolute.top-2\/3.right-1\/4 {
    display: none !important;
  }

  .fixed.inset-0 .absolute.top-20.right-1\/3 {
    display: none !important;
  }

  /* Reduce opacity of some elements instead of hiding them completely */
  .fixed.inset-0 .absolute.top-1\/4.left-1\/3 {
    opacity: 0.4 !important;
  }

  .fixed.inset-0 .absolute.top-1\/2.left-1\/4 {
    opacity: 0.5 !important;
  }

  .fixed.inset-0 .absolute.bottom-32.left-1\/2 {
    opacity: 0.6 !important;
  }

  /* Slightly reduce opacity of main background orbs */
  .fixed.inset-0 .absolute.-top-40.-right-40 {
    opacity: 0.7 !important;
  }

  .fixed.inset-0 .absolute.-bottom-40.-left-40 {
    opacity: 0.7 !important;
  }

  /* Hide only some of the small decorative dots, keep a few for texture */
  .fixed.inset-0 .absolute.inset-0.opacity-10 .absolute.top-32.right-20,
  .fixed.inset-0 .absolute.inset-0.opacity-10 .absolute.top-1\/2.right-1\/3 {
    display: none !important;
  }
}
/* Handle iOS Safari's dynamic toolbar behavior */
@media screen and (max-device-width: 768px) {
  /* Mobile Safari specific adjustments */
  html {
    height: 100%;
    height: 100vh;
    height: 100dvh;
  }

  /* Prevent content from being hidden behind floating toolbar */
  body {
    padding-bottom: env(safe-area-inset-bottom);
    /* Add extra padding to account for floating toolbar */
    padding-bottom: calc(env(safe-area-inset-bottom) + 44px); /* 44px is typical Safari toolbar height */
  }

  /* Ensure main content has proper spacing */
  main {
    padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
  }
}

/* Detect and handle Safari's compact mode floating toolbar */
@media screen and (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  /* iPhone specific - handle the floating toolbar overlay */
  .fixed.inset-0 {
    /* Extend background to cover the entire screen including behind toolbar */
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: -webkit-fill-available !important;
  }

  /* Ensure content doesn't get cut off by toolbar */
  .max-w-7xl {
    margin-bottom: calc(env(safe-area-inset-bottom) + 60px); /* Extra space for floating toolbar */
  }
}
/* Dynamic iOS Safari toolbar handling with JavaScript */
:root {
  --safari-toolbar-height: 0px;
  --viewport-height: 100vh;
}

/* When Safari toolbar is visible, adjust background accordingly */
body.safari-toolbar-visible .fixed.inset-0 {
  /* Extend background to cover full screen including behind toolbar */
  height: calc(var(--viewport-height) + var(--safari-toolbar-height)) !important;
}

/* Alternative approach using CSS environment variables */
@supports (height: 100dvh) {
  .fixed.inset-0 {
    height: 100dvh !important; /* Use dynamic viewport height when supported */
  }
}

/* Fallback for older iOS versions */
@supports not (height: 100dvh) {
  .fixed.inset-0 {
    height: 100vh !important;
    height: -webkit-fill-available !important;
  }
}