/*
 * CHAT-1, 2026-10-22: the chat launcher and its teaser on phones and small tablets.
 *
 * The round launcher and the "Need help with ...?" teaser are not this plugin's own
 * markup (class-renderer.php suppresses that). They are drawn by the Owner App's
 * widget-shim.js, which the HFCM snippet "VE Chat Widget" loads on every page. Since
 * shim v0.7.5 the launcher is pinned to the UPPER right on every villa page (top 92px
 * at 480 px and under, 108px above), where it floats over the season prices, the
 * dates and the calendar.
 *
 * At 860 px and under these rules put it back at the bottom right: directly above the
 * sticky "Inquire Now" bar on villa pages, 16px from the bottom everywhere else. The
 * theme's back-to-top button stacks above it on the same right edge, 12px apart, and
 * the teaser sits to its left. Nothing here applies above 860 px.
 *
 * At 480 px and under the launcher is 56px, the size the shim's own phone rule asks
 * for (that rule never wins against its 64px base rule). At 56px with a 16px edge it
 * clears the calendar's last column and the right-aligned season prices.
 *
 * ve-chat1-mobile.js measures the bar into --ve-chat1-bar, the launcher's resolved
 * bottom into --ve-chat1-btn and the back-to-top stop into --ve-chat1-stack, and runs
 * the teaser. Without it these rules still place the launcher, assuming the villa bar
 * is up (its 100px height).
 *
 * The experience pages keep their own rules: EXP-3 lifts the launcher to 90px while
 * the reserve bar is up (its selector outranks the ones below) and EXP-4 holds it back
 * over the hero.
 */
@media (max-width:860px){
  html body{
    --ve-chat1-size:64px;
    --ve-chat1-bottom:max(16px, calc(var(--ve-chat1-bar, 0px) + 12px));
  }
  html body.single-estate_property{
    --ve-chat1-bottom:max(16px, calc(var(--ve-chat1-bar, 100px) + 12px));
  }

  /* The launcher: bottom right, above the bar. Its colours, icon and rings are the shim's. */
  html body .ve-widget-shim-btn,
  html body .ve-widget-shim-btn.ve-widget-shim--villa{
    top:auto!important;
    bottom:var(--ve-chat1-bottom)!important;
    right:16px!important;
  }

  /* Back to top: same right edge, 12px above the launcher. Its parked (off-screen) state
     sits at the same height, so it slides in sideways and never crosses the launcher. */
  html body a.backtop{
    bottom:var(--ve-chat1-stack, calc(var(--ve-chat1-bottom) + var(--ve-chat1-size) + 12px))!important;
  }
  html body a.backtop.islive{
    right:16px!important;
  }

  /* The teaser: to the left of the launcher (10px gap), centred on it, never over the bar. */
  html body .ve-widget-shim-bubble,
  html body .ve-widget-shim-bubble.ve-widget-shim--villa{
    top:auto!important;
    bottom:calc(var(--ve-chat1-btn, var(--ve-chat1-bottom)) + (var(--ve-chat1-size) - 43px) / 2)!important;
    right:calc(26px + var(--ve-chat1-size))!important;
    max-width:min(260px, calc(100vw - 42px - var(--ve-chat1-size)))!important;
  }
  /* Its tail points right, at the launcher (the shim hides it on villa pages). */
  html body .ve-widget-shim-bubble::after,
  html body .ve-widget-shim-bubble.ve-widget-shim--villa::after{
    display:block!important;
    top:50%;
    bottom:auto;
    right:-7px;
    margin-top:-6px;
    transform:rotate(-45deg);
  }
  /* Only ve-chat1-mobile.js shows the teaser here: once per visit, about 8 s after load.
     The shim's own 30 s / 60 %-scroll teaser stays hidden. */
  html.ve-chat1:not(.ve-chat1-teaser) body .ve-widget-shim-bubble{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Stepping aside fades (the shim's transition list plus opacity; its !important rule
     otherwise makes every hide on the site instant). */
  html body .ve-widget-shim-btn{
    transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease,visibility .2s ease!important;
  }
  /* At rest over a button, a form field, a calendar day or a price, the launcher steps
     aside until that has scrolled on (ve-chat1-mobile.js sets the class). */
  html.ve-chat1-aside body .ve-widget-shim-btn,
  html.ve-chat1-aside body .ve-widget-shim-bubble,
  /* While the full-screen inquiry form is open (Inquire Now, or the theme's "Make a
     reservation") the launcher steps aside, as it does for the menu drawer. */
  body:has(#myModal[style*="block"]) .ve-widget-shim-btn,
  body:has(#myModal[style*="block"]) .ve-widget-shim-bubble,
  body:has(#booking_form_request.booking_on_mobile) .ve-widget-shim-btn,
  body:has(#booking_form_request.booking_on_mobile) .ve-widget-shim-bubble{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

@media (max-width:860px) and (prefers-reduced-motion:reduce){
  html body .ve-widget-shim-btn{ transition:none!important; }
}

@media (max-width:480px){
  html body{ --ve-chat1-size:56px; }
  html body .ve-widget-shim-btn{
    width:56px;
    height:56px;
  }
  html body .ve-widget-shim-btn svg{
    width:26px!important;
    height:26px!important;
  }
}