/* AAOL Product Expert — floating launcher + iframe panel.
 * Brand: deep oxblood-berry #5b201d (primary) + gold #a97b47 (accent), clean/light.
 * Color rules are id-scoped (#aaol-chatbot) + !important so the host store theme
 * (Woodmart styles EVERY <button> with its own bg/border/box-shadow) cannot bleed in
 * and wash out the launcher label, the header, or the close ×. An ID selector outranks
 * the theme's class selectors even when the theme uses !important. */

.aaol-chatbot {
  --aaol-oxblood: #5b201d;
  --aaol-oxblood-hover: #7a2f2a;
  --aaol-gold: #a97b47;
  --aaol-cream: #fff8ef;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999990;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Force our brand font on the controls — the store theme sets a caps display font
   ("Julius Sans One") on buttons that otherwise bleeds into the launcher label. */
#aaol-chatbot .aaol-chatbot-launcher,
#aaol-chatbot .aaol-chatbot-launcher-label,
#aaol-chatbot .aaol-chatbot-panel-title,
#aaol-chatbot .aaol-chatbot-close {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* --- Launcher --- */
#aaol-chatbot .aaol-chatbot-launcher {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  min-width: 0 !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--aaol-oxblood) !important;
  background-image: none !important;
  color: var(--aaol-cream) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: 0 6px 22px rgba(91, 32, 29, 0.30) !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, opacity 0.2s ease;
}
#aaol-chatbot .aaol-chatbot-launcher:hover {
  background: var(--aaol-oxblood-hover) !important;
  color: var(--aaol-cream) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(91, 32, 29, 0.38) !important;
}
#aaol-chatbot .aaol-chatbot-launcher:focus-visible {
  outline: 2px solid var(--aaol-gold) !important;
  outline-offset: 2px;
}
#aaol-chatbot .aaol-chatbot-launcher-icon { flex: 0 0 auto; color: var(--aaol-gold) !important; }
#aaol-chatbot .aaol-chatbot-launcher-label { color: var(--aaol-cream) !important; font-size: 15px !important; line-height: 1 !important; }

/* Hide the launcher while the panel is open */
.aaol-chatbot.is-open .aaol-chatbot-launcher {
  opacity: 0;
  pointer-events: none;
}

/* --- Panel --- */
.aaol-chatbot-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(400px, calc(100vw - 40px));
  height: min(640px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(60, 40, 20, 0.28);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
/* The [hidden] attribute MUST override the display:flex above. Otherwise the
   closed panel stays in layout (just opacity:0) and its iframe covers the
   launcher, swallowing every click. */
.aaol-chatbot-panel[hidden] { display: none !important; }
.aaol-chatbot.is-open .aaol-chatbot-panel {
  transform: translateY(0);
  opacity: 1;
}

#aaol-chatbot .aaol-chatbot-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--aaol-oxblood) !important;
  background-image: none !important;
  color: var(--aaol-cream) !important;
  flex: 0 0 auto;
}
#aaol-chatbot .aaol-chatbot-panel-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: var(--aaol-cream) !important;
  text-transform: none !important;
}

/* Close button — circular translucent control; id-scoped + !important so the store
   theme's <button> styling can't render a "white box" around the ×. */
#aaol-chatbot .aaol-chatbot-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  align-self: center !important;
  width: 30px !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 0 !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 248, 239, 0.18) !important;
  background-image: none !important;
  color: var(--aaol-cream) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
}
#aaol-chatbot .aaol-chatbot-close:hover {
  background: rgba(255, 248, 239, 0.32) !important;
  transform: scale(1.05);
}
#aaol-chatbot .aaol-chatbot-close:focus-visible {
  outline: 2px solid var(--aaol-gold) !important;
  outline-offset: 2px;
}

.aaol-chatbot-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* Lift the launcher above Woodmart's sticky mobile bottom toolbar (cart / my account),
   which is fixed at bottom:0 on phones. Otherwise our CTA overlaps it AND taps in that
   zone land on the toolbar instead of the launcher, so it won't open. The toolbar shows
   up to the theme's mobile breakpoint (~768px); env() clears the iOS home indicator. */
@media (max-width: 768.98px) {
  .aaol-chatbot {
    right: 16px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Mobile: panel goes full-screen (and reclaims the full viewport when open) --- */
@media (max-width: 480px) {
  .aaol-chatbot.is-open { right: 0; bottom: 0; left: 0; top: 0; }
  .aaol-chatbot-panel {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #aaol-chatbot .aaol-chatbot-launcher,
  .aaol-chatbot-panel,
  #aaol-chatbot .aaol-chatbot-close { transition: none; }
}