/* ============================================
   CROSS-BROWSER COMPATIBILITY FIXES
   ============================================ */

/* Backdrop-filter fallbacks for Firefox and older browsers */
@supports not (backdrop-filter: blur(10px)) {
  .chat-header,
  .suggested-questions,
  .chat-container,
  .projects-filter-section,
  header,
  .nav-links,
  .glass-card,
  .bento-item,
  .project-card {
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-strong) !important;
  }
  
  body.dark-mode .chat-header,
  body.dark-mode .suggested-questions,
  body.dark-mode .chat-container,
  body.dark-mode .projects-filter-section,
  body.dark-mode header,
  body.dark-mode .nav-links,
  body.dark-mode .glass-card,
  body.dark-mode .bento-item,
  body.dark-mode .project-card {
    background: var(--color-bg-secondary) !important;
  }
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
  /* Fix Safari blur rendering */
  .chat-header,
  .suggested-questions,
  .chat-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Flexbox fixes for older browsers */
.hero-content,
.nav-links,
.hero-buttons,
.filter-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Grid fallback for older browsers */
@supports not (display: grid) {
  .bento-grid,
  .projects-grid,
  .skills-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .bento-item,
  .project-card,
  .skill-item {
    flex: 1 1 300px;
    margin: 10px;
  }
}

/* Fix for horizontal scrolling */
body, html {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  max-width: 100%;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}