/* Mobile advisor: keep both floating tools visible without giving up cart dragging. */
@media (max-width: 760px) {
  body:not(.wp-admin) .ot-ai-advisor,
  body:not(.wp-admin) .single-product .ot-ai-advisor {
    /* Rest just below the product information, aligned with the marked mobile position. */
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    right: 0 !important;
    transform: translateX(calc(100% - 42px)) !important;
    width: min(250px, calc(100vw - 104px)) !important;
    z-index: 1000 !important;
  }

  body:not(.wp-admin) .ot-ai-advisor-toggle,
  body:not(.wp-admin) .single-product .ot-ai-advisor-toggle {
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 10px 14px !important;
    width: 100% !important;
  }

  body:not(.wp-admin) .ot-advisor-cart,
  body:not(.wp-admin) .single-product .ot-advisor-cart {
    /* Keep the movable cart independently above the advisor on every phone page. */
    bottom: calc(220px + env(safe-area-inset-bottom)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    z-index: 1001 !important;
  }

  /* The panel becomes a real mobile drawer so no question or result card is clipped. */
  body:not(.wp-admin) .ot-ai-advisor-panel,
  body:not(.wp-admin) .single-product .ot-ai-advisor-panel {
    border-radius: 22px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    height: auto !important;
    left: 12px !important;
    max-height: none !important;
    overflow: hidden !important;
    position: fixed !important;
    right: 12px !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    width: auto !important;
    z-index: 1002 !important;
  }

  body:not(.wp-admin) .ot-ai-advisor.is-open .ot-ai-advisor-toggle,
  body:not(.wp-admin) .single-product .ot-ai-advisor.is-open .ot-ai-advisor-toggle {
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* The parent filter would otherwise make the fixed drawer position relative to the tab. */
  body:not(.wp-admin) .ot-ai-advisor.is-open,
  body:not(.wp-admin) .single-product .ot-ai-advisor.is-open {
    filter: none !important;
    transform: none !important;
  }

  body:not(.wp-admin) .ot-ai-advisor.is-open .ot-ai-advisor-panel,
  body:not(.wp-admin) .ot-ai-advisor-panel:not([hidden]),
  body:not(.wp-admin) .single-product .ot-ai-advisor.is-open .ot-ai-advisor-panel,
  body:not(.wp-admin) .single-product .ot-ai-advisor-panel:not([hidden]) {
    display: grid !important;
    height: calc(100dvh - 24px) !important;
  }

  body:not(.wp-admin) .ot-ai-advisor-body,
  body:not(.wp-admin) .single-product .ot-ai-advisor-body {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body:not(.wp-admin) .ot-ai-advisor-panel .ot-ai-result-card,
  body:not(.wp-admin) .ot-ai-advisor-panel .ot-ai-result-actions,
  body:not(.wp-admin) .ot-ai-advisor-panel .ot-ai-options,
  body:not(.wp-admin) .single-product .ot-ai-advisor-panel .ot-ai-result-card,
  body:not(.wp-admin) .single-product .ot-ai-advisor-panel .ot-ai-result-actions,
  body:not(.wp-admin) .single-product .ot-ai-advisor-panel .ot-ai-options {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.wp-admin) .ot-ai-advisor-panel .ot-ai-result-card *,
  body:not(.wp-admin) .single-product .ot-ai-advisor-panel .ot-ai-result-card * {
    overflow-wrap: anywhere;
  }
}