/* XpertBoost mobile/tablet overlap fixes, V31. Loaded after site and AI-agent styles. */
:root { --xb-mobile-safe-bottom: env(safe-area-inset-bottom, 0px); }
html, body { max-width: 100%; }
body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
.site-header, .topline, .topline-inner, .nav-wrap { min-width: 0; }
.topline-inner > *, .nav-wrap > *, .nav-actions > * { min-width: 0; }

@media (max-width: 780px) {
  /* Purchase notices compete with the AI and contact controls on phones. */
  .purchase-toast-root { display: none !important; }

  /* Keep a fixed CTA available after scrolling, but never over the initial hero. */
  .mobile-action-bar {
    display: flex !important;
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(7px + var(--xb-mobile-safe-bottom)) !important;
    z-index: 1140 !important;
    transform: translateY(calc(100% + 18px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
    padding: 6px !important;
    gap: 7px !important;
    border-radius: 15px !important;
  }
  .mobile-action-bar.xb-mobile-action-bar-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mobile-action-bar a { min-height: 40px !important; font-size: 11px !important; }

  /* Default mobile placement when the sticky CTA is not visible. */
  .whatsapp-float {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(14px + var(--xb-mobile-safe-bottom)) !important;
    z-index: 1200 !important;
    min-height: 43px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px 11px !important;
    font-size: 11px !important;
  }
  .whatsapp-float .wa-button-icon { width: 25px !important; height: 25px !important; flex-basis: 25px !important; }
  .whatsapp-float .wa-button-icon svg { width: 22px !important; height: 22px !important; }

  .xb-ai-launcher {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(70px + var(--xb-mobile-safe-bottom)) !important;
    z-index: 1250 !important;
    min-height: 43px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 7px 10px !important;
    gap: 7px !important;
    font-size: 11px !important;
  }
  .xb-ai-launcher-icon { width: 26px !important; height: 26px !important; flex-basis: 26px !important; }
  .xb-ai-panel {
    right: 9px !important;
    bottom: calc(124px + var(--xb-mobile-safe-bottom)) !important;
    width: calc(100vw - 18px) !important;
    max-width: 480px !important;
    height: min(540px, calc(100dvh - 150px - var(--xb-mobile-safe-bottom))) !important;
    min-height: min(300px, calc(100dvh - 150px)) !important;
    max-height: calc(100dvh - 105px - var(--xb-mobile-safe-bottom)) !important;
    z-index: 1251 !important;
  }

  /* If the AI chat is open, give it the screen and suppress other floating controls. */
  body.xb-mobile-ai-open .whatsapp-float,
  body.xb-mobile-ai-open .mobile-action-bar,
  body.xb-mobile-ai-open .purchase-toast-root { visibility: hidden !important; pointer-events: none !important; }
  body.xb-mobile-ai-open .xb-ai-launcher { visibility: hidden !important; pointer-events: none !important; }
  body.xb-mobile-ai-open .xb-ai-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + var(--xb-mobile-safe-bottom)) !important;
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px - var(--xb-mobile-safe-bottom)) !important;
    max-height: calc(100dvh - 16px - var(--xb-mobile-safe-bottom)) !important;
    min-height: min(320px, calc(100dvh - 16px)) !important;
    border-radius: 18px !important;
  }

  /* Hide chat/sticky controls while the login/signup dialog is active. */
  body.xb-mobile-auth-open .whatsapp-float,
  body.xb-mobile-auth-open .mobile-action-bar,
  body.xb-mobile-auth-open .purchase-toast-root,
  body.xb-mobile-auth-open .xb-ai-launcher { visibility: hidden !important; pointer-events: none !important; }

  /* Prevent long labels, search, and currency selectors from causing horizontal scroll. */
  .xb-hero, .xb-hero-copy, .xb-hero-visual, .xb-activity-panel,
  .xb-packages-section, .xb-packages-head, .xb-package-grid, .xb-cart-page,
  .xb-cart-layout, .xb-cart-list, .xb-cart-summary { min-width: 0; max-width: 100%; }
  .xb-hero h1 { overflow-wrap: anywhere; }
  .xb-hero-actions .btn { min-width: 0; }
  .xb-currency-picker { flex: 0 0 auto; }
}

@media (max-width: 650px) {
  .topline.xb-topline .topline-inner { padding: 8px 12px !important; gap: 6px !important; }
  .xb-topline .xb-topline-offer { font-size: 10px !important; line-height: 1.35 !important; }
  .xb-topline-benefits { display: none !important; }
  .site-header { width: 100%; }
  .nav-wrap { padding: 10px 12px !important; gap: 8px !important; flex-wrap: wrap !important; }
  .brand { gap: 8px !important; font-size: 15px !important; }
  .brand-mark { width: 34px !important; height: 34px !important; flex: 0 0 34px; }
  .mobile-menu { margin-left: auto !important; }
  .nav-actions { gap: 5px !important; flex-wrap: nowrap !important; max-width: 100%; }
  .nav-actions .btn { padding: 8px 9px !important; font-size: 10px !important; }
  .nav-actions .xb-my-orders { white-space: nowrap; }
  .header-search { min-width: 0 !important; }
  .xb-currency-picker { max-width: 86px !important; }
  .xb-currency-picker select { max-width: 60px !important; }
  body { padding-bottom: calc(14px + var(--xb-mobile-safe-bottom)) !important; }
  body.xb-mobile-actions-active { padding-bottom: calc(72px + var(--xb-mobile-safe-bottom)) !important; }
}

@media (max-width: 420px) {
  .xb-ai-launcher-label { font-size: 10px !important; }
  .xb-ai-launcher { padding: 6px 9px !important; }
  .mobile-action-bar a { min-height: 38px !important; padding: 7px 5px !important; font-size: 10px !important; }
  .whatsapp-float b { font-size: 10px !important; }
  .xb-hero-actions { gap: 8px !important; }
  .xb-hero-actions .btn { flex: 1 1 45% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-action-bar { transition: none !important; }
}