/*
 * Jetwheels AI Assistant — Mobile UI
 * v0.5.0
 *
 * One stylesheet, one layout model.
 * No keyboard transition patches and no runtime Woodmart measurements.
 */

@media (max-width: 767px) {
  :root {
    --jw-woodmart-toolbar: 55px;
    --jw-mobile-gap: 8px;
  }

  html.jw-ai-mobile-open,
  body.jw-ai-mobile-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* Prevent iOS input auto-zoom. */
  .jw-ai__input {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }

  /* ---------- floating hub while chat is closed ---------- */
  .jw-hub {
    --jw-hub-size: 62px !important;
    --jw-hub-gap: 12px !important;
    right: 20px !important;
    bottom: 74px !important;
    width: 62px !important;
    height: 62px !important;
  }

  .jw-hub__actions {
    right: 0 !important;
    bottom: 74px !important;
    gap: 12px !important;
  }

  .jw-hub .jw-hub__action,
  .jw-hub button.jw-hub__action,
  .jw-hub a.jw-hub__action,
  .jw-hub .jw-hub__circle,
  .jw-hub .jw-hub__launcher {
    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
  }

  .jw-hub .jw-hub__action--ai .jw-hub__label {
    min-width: 158px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin-right: -17px !important;
    font-size: 13px !important;
  }

  /* ---------- mobile chat root = real visual viewport ---------- */
  .jw-ai[data-open="1"] {
    position: fixed !important;
    left: 0 !important;
    top: var(--jw-mobile-vv-top, 0px) !important;
    width: 100vw !important;
    height: var(--jw-mobile-vv-height, 100dvh) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;

    /*
     * Deliberately ABOVE Woodmart. Even during the 55px return animation the
     * composer can never be hidden underneath the white toolbar.
     */
    z-index: 2147483647 !important;
  }

  html.jw-ai-mobile-open #jw-hub,
  body.jw-ai-mobile-open #jw-hub {
    display: none !important;
  }

  /* ---------- site blur ---------- */
  .jw-ai[data-open="1"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 var(--jw-woodmart-toolbar) 0 !important;
    background: rgba(4,7,6,.22) !important;
    -webkit-backdrop-filter:
      blur(10px) brightness(.70) saturate(.90) !important;
    backdrop-filter:
      blur(10px) brightness(.70) saturate(.90) !important;
    transform: translateZ(0) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transition:
      bottom .36s cubic-bezier(.16,1,.30,1) !important;
  }

  .jw-ai[data-open="1"].jw-ai--keyboard-open::before {
    bottom: 0 !important;
  }

  .jw-ai[data-open="1"]::after {
    content: none !important;
  }

  /* ---------- the single authoritative sheet ---------- */
  .jw-ai[data-open="1"] .jw-ai__panel {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: var(--jw-mobile-sheet-top, 140px) !important;
    bottom: var(--jw-woodmart-toolbar) !important;

    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 22px 22px 0 0 !important;

    background: rgba(8,12,14,.97) !important;
    pointer-events: auto !important;

    box-shadow:
      0 28px 65px rgba(0,0,0,.72),
      0 12px 34px rgba(0,0,0,.58),
      0 0 12px rgba(183,239,37,.58),
      0 0 24px rgba(183,239,37,.42),
      0 0 42px rgba(183,239,37,.30),
      0 0 70px rgba(183,239,37,.20),
      0 0 100px rgba(183,239,37,.12) !important;

    /*
     * These are the ONLY keyboard layout transitions.
     * Safari controls viewport height; CSS only interpolates the intentional
     * Bottom Sheet <-> messenger-mode geometry.
     */
    transition:
      top .36s cubic-bezier(.16,1,.30,1),
      bottom .36s cubic-bezier(.16,1,.30,1),
      left .36s cubic-bezier(.16,1,.30,1),
      right .36s cubic-bezier(.16,1,.30,1),
      border-radius .34s cubic-bezier(.16,1,.30,1),
      box-shadow .34s ease !important;
  }

  /* Keyboard mode. Class exists only while VisualViewport is truly short. */
  .jw-ai[data-open="1"].jw-ai--keyboard-open .jw-ai__panel {
    left: 8px !important;
    right: 8px !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  /* ---------- header ---------- */
  .jw-ai[data-open="1"] .jw-ai__header {
    flex: 0 0 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 12px 12px 0 14px !important;
    border-radius: 22px 22px 0 0 !important;
    background:
      linear-gradient(
        180deg,
        rgba(15,20,25,.96) 0%,
        rgba(12,17,22,.94) 100%
      ) !important;

    transition:
      height .32s cubic-bezier(.16,1,.30,1),
      min-height .32s cubic-bezier(.16,1,.30,1),
      flex-basis .32s cubic-bezier(.16,1,.30,1),
      padding .32s cubic-bezier(.16,1,.30,1),
      border-radius .32s cubic-bezier(.16,1,.30,1) !important;
  }

  .jw-ai[data-open="1"].jw-ai--keyboard-open .jw-ai__header {
    flex-basis: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 7px 10px 0 12px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  /* ---------- messages ---------- */
  .jw-ai[data-open="1"] .jw-ai__messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;

    background-color: #151b1f !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMTQwIiB2aWV3Qm94PSIwIDAgMTQwIDE0MCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M3ZmYzOCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4wNDUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CjxjaXJjbGUgY3g9IjIyIiBjeT0iMjQiIHI9IjEwIi8+PGNpcmNsZSBjeD0iMjIiIGN5PSIyNCIgcj0iMyIvPjxwYXRoIGQ9Ik0yMiAxNHYyME0xMiAyNGgyME0xNSAxN2wxNCAxNE0yOSAxN0wxNSAzMSIvPgo8Y2lyY2xlIGN4PSI3MiIgY3k9IjI4IiByPSI5Ii8+PGNpcmNsZSBjeD0iNzIiIGN5PSIyOCIgcj0iMi41Ii8+PHBhdGggZD0iTTcyIDE5bDQgOSA5IDQtOSA0LTQgOS00LTktOS00IDktNHoiLz4KPGNpcmNsZSBjeD0iMTE4IiBjeT0iMjIiIHI9IjguNSIvPjxjaXJjbGUgY3g9IjExOCIgY3k9IjIyIiByPSIyLjUiLz48cGF0aCBkPSJNMTE4IDEzbDMgOSA4IDMtOCAzLTMgOC0zLTgtOC0zIDgtM3oiLz4KPHBhdGggZD0iTTE4IDY2aDExYTUgNSAwIDAgMSA1IDV2NWE1IDUgMCAwIDEtNSA1aC01bC00IDN2LTNoLTJhNSA1IDAgMCAxLTUtNXYtNWE1IDUgMCAwIDEgNS01eiIvPgo8cGF0aCBkPSJNNjEgNjNoMTBhNCA0IDAgMCAxIDQgNHY0YTQgNCAwIDAgMS00IDRoLTRsLTMgM3YtM2gtM2E0IDQgMCAwIDEtNC00di00YTQgNCAwIDAgMSA0LTR6Ii8+CjxwYXRoIGQ9Ik0xMDMgNjloMTBNMTA5IDY1bDQgNC00IDQiLz4KPGNpcmNsZSBjeD0iMzEiIGN5PSIxMTEiIHI9IjgiLz48Y2lyY2xlIGN4PSIzMSIgY3k9IjExMSIgcj0iMi41Ii8+PHBhdGggZD0iTTMxIDEwM3YxNk0yMyAxMTFoMTZNMjUgMTA1bDEyIDEyTTM3IDEwNWwtMTIgMTIiLz4KPGNpcmNsZSBjeD0iODMiIGN5PSIxMDciIHI9IjkiLz48Y2lyY2xlIGN4PSI4MyIgY3k9IjEwNyIgcj0iMi41Ii8+PHBhdGggZD0iTTgzIDk4bDMgOSA5IDMtOSAzLTMgOS0zLTktOS0zIDktM3oiLz4KPHBhdGggZD0iTTExNSAxMDRoOE0xMTkgMTAwbDQgNC00IDRNMTExIDExOWwyIDMgMyAyLTMgMi0yIDMtMi0zLTMtMiAzLTJ6Ii8+CjwvZz48L3N2Zz4=") !important;
    background-repeat: repeat !important;
    background-size: 140px 140px !important;
    background-position: 0 0 !important;
  }

  .jw-ai[data-open="1"] .jw-ai__message {
    margin-bottom: 15px !important;
  }

  .jw-ai[data-open="1"] .jw-ai__bubble {
    position: relative !important;
    width: fit-content !important;
    max-width: 84% !important;
    padding: 11px 13px !important;
    border: 0 !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .jw-ai[data-open="1"] .jw-ai__bubble::before,
  .jw-ai[data-open="1"] .jw-ai__bubble::after {
    content: none !important;
    display: none !important;
  }

  .jw-ai[data-open="1"] .jw-ai__message--assistant {
    align-items: flex-start !important;
    padding-left: 7px !important;
  }

  .jw-ai[data-open="1"] .jw-ai__message--assistant .jw-ai__bubble {
    background:
      linear-gradient(180deg,#252b2f 0%,#202529 100%) !important;
    color: #f3f4f5 !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    border-radius: 17px 17px 17px 6px !important;
    box-shadow:
      0 8px 20px rgba(0,0,0,.22),
      0 0 0 1px rgba(183,239,37,.025) !important;
  }

  .jw-ai[data-open="1"] .jw-ai__message--user {
    align-items: flex-end !important;
    padding-right: 7px !important;
  }

  .jw-ai[data-open="1"] .jw-ai__message--user .jw-ai__bubble {
    background:
      linear-gradient(135deg,#88c900 0%,#a3e800 100%) !important;
    color: #fff !important;
    border-radius: 17px 17px 6px 17px !important;
    box-shadow: 0 7px 18px rgba(128,190,0,.13) !important;
  }

  /* ---------- product rail: swipe on phone ---------- */
  .jw-ai[data-open="1"] .jw-ai__products-arrow,
  .jw-product-nav {
    display: none !important;
  }

  .jw-ai[data-open="1"] .jw-ai__products {
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
  }

  .jw-ai[data-open="1"] .jw-ai__product {
    flex: 0 0 145px !important;
    width: 145px !important;
    max-width: 145px !important;
    border-radius: 11px !important;
    scroll-snap-align: start !important;
  }

  .jw-ai[data-open="1"] .jw-ai__product-media {
    height: 94px !important;
  }

  .jw-ai[data-open="1"] .jw-ai__product-body {
    padding: 8px 8px 9px !important;
  }

  .jw-ai[data-open="1"] .jw-ai__product-body strong {
    min-height: 27px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .jw-ai[data-open="1"] .jw-ai__product-body small {
    min-height: 24px !important;
    margin-top: 4px !important;
    font-size: 8.5px !important;
    line-height: 1.3 !important;
  }

  .jw-ai[data-open="1"] .jw-ai__product-body b {
    margin-top: 6px !important;
    font-size: 13px !important;
  }

  .jw-ai[data-open="1"] .jw-ai__product-body em,
  .jw-ai[data-open="1"] .jw-ai__product-link {
    font-size: 8px !important;
  }

  /* ---------- footer removed ---------- */
  .jw-ai__footer {
    display: none !important;
  }

  /* ---------- persistent composer ---------- */
  .jw-ai[data-open="1"] .jw-ai__form {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: 60px !important;
    height: auto !important;

    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;

    margin: 0 0 8px !important;
    padding: 6px 8px !important;

    background: rgba(8,12,14,.985) !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 5 !important;

    transition:
      padding .30s cubic-bezier(.16,1,.30,1),
      margin .30s cubic-bezier(.16,1,.30,1),
      background-color .26s ease !important;
  }

  .jw-ai[data-open="1"].jw-ai--keyboard-open .jw-ai__form {
    margin: 0 !important;
    padding: 4px 8px 2px !important;
  }

  .jw-ai[data-open="1"] .jw-ai__input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px;
    max-height: 104px !important;
    padding: 11px 13px !important;

    resize: none !important;
    overflow-y: hidden;

    border: 2.5px solid rgba(183,239,37,1) !important;
    border-radius: 14px !important;
    background: rgba(18,22,23,.96) !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 12px rgba(183,239,37,.18) !important;
  }

  .jw-ai[data-open="1"] .jw-ai__input::placeholder {
    font-size: 13.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .jw-ai[data-open="1"] .jw-ai__input:focus {
    border-color: #c6ff00 !important;
    box-shadow:
      0 0 15px rgba(198,255,0,.25),
      0 0 26px rgba(198,255,0,.08) !important;
  }

  .jw-ai[data-open="1"] .jw-ai__send {
    align-self: flex-end !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
  }

  .jw-ai[data-open="1"] .jw-ai__form[aria-busy="true"] .jw-ai__input {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .jw-ai[data-open="1"] .jw-ai__form[aria-busy="true"] .jw-ai__send {
    opacity: .72 !important;
  }

  /* ---------- Woodmart integration ---------- */
  .wd-toolbar.wd-toolbar-label-show {
    height: var(--jw-woodmart-toolbar) !important;
    min-height: var(--jw-woodmart-toolbar) !important;
    z-index: 2147483646 !important;
    opacity: 1 !important;
    visibility: visible !important;

    transition:
      opacity .22s ease,
      visibility 0s linear 0s !important;
  }

  /*
   * Safari keyboard and the final sheet settle are two separate animations.
   * Keep Woodmart invisible through BOTH; it fades back only when the composer
   * has already reached its normal 55px-above-bottom position.
   */
  body.jw-ai-keyboard-open .wd-toolbar.wd-toolbar-label-show,
  body.jw-ai-keyboard-settling .wd-toolbar.wd-toolbar-label-show {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity .12s ease,
      visibility 0s linear .12s !important;
  }
}


/* =========================================================
   v0.5.1 — smooth keyboard return
   ========================================================= */
@media (max-width: 767px) {
  .jw-ai[data-open="1"].jw-ai--keyboard-open .jw-ai__panel,
  .jw-ai[data-open="1"].jw-ai--keyboard-settling .jw-ai__panel {
    will-change: top, bottom, left, right, border-radius;
  }

  .jw-ai[data-open="1"].jw-ai--keyboard-open .jw-ai__form,
  .jw-ai[data-open="1"].jw-ai--keyboard-settling .jw-ai__form {
    will-change: margin, padding;
  }
}


/* =========================================================
   v0.5.2 — extra-smooth iOS keyboard return
   ========================================================= */
@media (max-width: 767px) {
  /*
   * Opening remains responsive, but the FINAL return after Safari has almost
   * fully restored the viewport is intentionally slower and softer.
   */
  .jw-ai[data-open="1"].jw-ai--keyboard-settling .jw-ai__panel {
    transition:
      top .52s cubic-bezier(.19,1,.22,1),
      bottom .52s cubic-bezier(.19,1,.22,1),
      left .52s cubic-bezier(.19,1,.22,1),
      right .52s cubic-bezier(.19,1,.22,1),
      border-radius .48s cubic-bezier(.19,1,.22,1),
      box-shadow .46s ease !important;
  }

  .jw-ai[data-open="1"].jw-ai--keyboard-settling .jw-ai__header {
    transition:
      height .44s cubic-bezier(.19,1,.22,1),
      min-height .44s cubic-bezier(.19,1,.22,1),
      flex-basis .44s cubic-bezier(.19,1,.22,1),
      padding .44s cubic-bezier(.19,1,.22,1),
      border-radius .44s cubic-bezier(.19,1,.22,1) !important;
  }

  .jw-ai[data-open="1"].jw-ai--keyboard-settling .jw-ai__form {
    transition:
      padding .40s cubic-bezier(.19,1,.22,1),
      margin .40s cubic-bezier(.19,1,.22,1),
      background-color .34s ease !important;
  }

  /*
   * The backdrop boundary also eases down with the sheet, so the lower edge
   * does not visually "snap" when returning above Woodmart.
   */
  .jw-ai[data-open="1"].jw-ai--keyboard-settling::before {
    transition:
      bottom .52s cubic-bezier(.19,1,.22,1) !important;
  }

  /*
   * Woodmart is revealed last and fades in more slowly after the composer has
   * already reached its resting position.
   */
  .wd-toolbar.wd-toolbar-label-show {
    transition:
      opacity .30s ease,
      visibility 0s linear 0s !important;
  }

  body.jw-ai-keyboard-settling .wd-toolbar.wd-toolbar-label-show {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   v0.5.3 — stronger backdrop + latest-message anchoring
   ========================================================= */
@media (max-width: 767px) {
  .jw-ai[data-open="1"]::before {
    transition:
      bottom .52s cubic-bezier(.19,1,.22,1),
      backdrop-filter .28s ease,
      -webkit-backdrop-filter .28s ease,
      background-color .28s ease !important;
  }
}


/* =========================================================
   v0.5.4 — reliable Safari blur + perfectly round hub icons
   ========================================================= */
@media (max-width: 767px) {
  /* Disable old pseudo-element backdrop. */
  .jw-ai[data-open="1"]::before {
    display: none !important;
    content: none !important;
  }

  /* Reliable direct-body backdrop for Safari. */
  .jw-ai-page-blur {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: var(--jw-woodmart-toolbar, 55px) !important;

    z-index: 2147483500 !important;

    background: rgba(3,6,5,.24) !important;
    -webkit-backdrop-filter:
      blur(12px) brightness(.68) saturate(.88) !important;
    backdrop-filter:
      blur(12px) brightness(.68) saturate(.88) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;

    transition:
      opacity .24s ease,
      bottom .52s cubic-bezier(.19,1,.22,1),
      visibility 0s linear .24s !important;
  }

  body.jw-ai-mobile-open .jw-ai-page-blur {
    opacity: 1 !important;
    visibility: visible !important;
    transition:
      opacity .24s ease,
      bottom .52s cubic-bezier(.19,1,.22,1),
      visibility 0s linear 0s !important;
  }

  body.jw-ai-keyboard-open .jw-ai-page-blur,
  body.jw-ai-keyboard-settling .jw-ai-page-blur {
    bottom: 0 !important;
  }

  /* Lock all hub/social buttons to true circles. */
  .jw-hub .jw-hub__circle,
  .jw-hub .jw-hub__launcher {
    box-sizing: border-box !important;

    flex: 0 0 62px !important;
    flex-basis: 62px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;

    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;

    aspect-ratio: 1 / 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .jw-hub .jw-hub__action,
  .jw-hub button.jw-hub__action,
  .jw-hub a.jw-hub__action {
    box-sizing: border-box !important;
    min-height: 62px !important;
    height: 62px !important;
    max-height: 62px !important;
    flex-shrink: 0 !important;
  }

  .jw-hub .jw-hub__action--tg,
  .jw-hub .jw-hub__action--max,
  .jw-hub .jw-hub__action--wa {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    flex: 0 0 62px !important;
  }

  .jw-hub .jw-hub__action--tg svg,
  .jw-hub .jw-hub__action--wa svg {
    width: 31px !important;
    height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
  }

  .jw-hub .jw-hub__max-icon {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  .jw-hub .jw-hub__headset {
    width: 35px !important;
    height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
  }
}