/* Max Universal Mobile Responsiveness & A11y */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}

:focus-visible {
  outline: 2px solid #ea580c !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media screen and (max-width: 768px) {
  /* Prevent iOS Safari 16px auto-zoom on input focus */
  input, textarea, select {
    font-size: 16px !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
}

/* Voice Orb Specific Responsive & A11y Tweaks */
@media screen and (max-width: 768px) {
  #max-voice-orb-container {
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 12px !important;
  }

  #max-voice-orb-button {
    width: 44px !important;
    height: 44px !important;
  }

  #max-config-modal {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding: 20px 16px max(24px, env(safe-area-inset-bottom)) 16px !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8) !important;
  }
}

@media screen and (max-width: 1024px) {
  body:has(#app-sidebar.translate-x-0) #max-orb-root,
  body:has([aria-expanded="true"]) #max-orb-root,
  [data-mobile-drawer-open="true"] #max-orb-root {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.7) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }
}

.mobile-stack-list {
  animation: stackSlideLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mobile-stack-chat {
  animation: stackSlideRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes stackSlideRight {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes stackSlideLeft {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}