/* ==========================================================================
   MagicSea Concierge — chat widget
   Reuses the site's own design tokens (--navy, --turquoise, --gold, --sand,
   --white, --gray-200, --gray-800 from assets/css/style.css) so it always
   matches the current theme without its own color system.

   The TRIGGER (.msc-fab) lives inline in the site header's .nav-right
   (assets/js/site-chrome.js), right after the logo and before the language
   flag/hamburger — see the insertion code in concierge-widget.js. It is a
   normal in-flow nav item now, not a floating fixed-position button, so it
   shows up consistently on mobile too instead of stacking on top of the
   site's WhatsApp/contact floating button at bottom-right (.wa-float /
   .fab-contact, style.css ~line 1336).

   The PANEL (.msc-panel) that opens is still a fixed-position overlay,
   anchored top-right on desktop and edge-to-edge near the top on narrow
   screens (see the max-width:480px override below) — that part is
   unchanged on purpose. The top offset (--msc-top) is set by
   concierge-widget.js, which measures the real height of .site-header
   (sticky top nav) on load/scroll/resize, so the panel always sits just
   below the header instead of overlapping it.
   ========================================================================== */

:root { --msc-top: 84px; --msc-bottom: 88px; } /* fallbacks used only before JS measures real element positions */

.msc-fab {
  /* Solid navy pill (the same blue the old floating fab used) so it reads
     as a clear call-to-action against this site's white header, instead
     of blending in like a plain nav link. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.1rem;
  padding: 0 1rem;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-family: inherit;
  font-weight: 600;
  font-size: .85rem;
  line-height: 1;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  /* Slow navy/gold blink to draw the eye to the chat trigger — hard
     (non-fading) flip via steps(1), 1.2s per color, well under flash-
     hazard rate. Paused (via animation:none) on hover/active so the
     gold hover state below reads as solid, not mid-blink. */
  animation: msc-fab-blink 2.4s steps(1) infinite;
}
@keyframes msc-fab-blink {
  0%, 49.9%  { background: var(--navy); border-color: var(--navy); color: var(--white); }
  50%, 100%  { background: var(--gold); border-color: var(--gold); color: var(--navy); }
}
.msc-fab:hover, .msc-fab.active {
  animation: none;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.msc-fab:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }

/* Fallback only: used if .nav-right isn't found (site-chrome.js hasn't
   run/rendered yet) so the widget still degrades to something usable
   instead of an invisible button pinned at 0,0. Mirrors the old
   floating-fab look. Not expected to apply in normal operation. */
.msc-fab-floating {
  position: fixed;
  right: 1.1rem;
  top: var(--msc-top);
  z-index: 900;
  height: auto;
  padding: .7rem 1.05rem;
  border: none;
  background: var(--navy);
  color: var(--white);
  font-size: .88rem;
  box-shadow: 0 8px 24px -8px rgba(11, 37, 69, .45);
}
.msc-fab-floating:hover { background: var(--navy); color: var(--white); border-color: transparent; transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(11, 37, 69, .55); }

.msc-panel {
  position: fixed;
  right: 1.1rem;
  top: var(--msc-top);
  /* Anchoring both top and bottom (instead of a fixed height) lets the
     panel's height adapt automatically to however much room is left below
     the header — and --msc-bottom (set by concierge-widget.js, measuring
     the site's WhatsApp/contact floating button) keeps it clear of that
     button, including its expandable menu. max-height caps it on tall
     screens. */
  bottom: var(--msc-bottom);
  z-index: 901;
  width: 372px;
  max-width: calc(100vw - 1.6rem);
  max-height: 600px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(11, 37, 69, .5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gray-200);
}
.msc-panel[hidden] { display: none; }

/* Bigger panel on desktop/tablet — the 372×600 default reads a bit
   cramped on a wide screen with room to spare, closer to a mobile-sized
   sheet than a proper desktop panel (compare the FAQ page's embedded
   chat, 560px tall in its own wide column). Left completely untouched
   below 641px: the base .msc-panel width/max-width above already makes
   the panel adapt to the viewport on phones (and the max-width:480px
   rule further down goes edge-to-edge on the smallest ones), so mobile
   sizing is unaffected by this. */
@media (min-width: 641px) {
  .msc-panel {
    width: 600px;
    max-height: 680px;
  }
}

/* Opt-in per page (window.MAGICSEA_CHAT_WIDE) — a bit wider than the
   default floating panel, without changing every other page's size. Not
   currently used by any page (the FAQ page uses .msc-panel-embedded
   below instead) but left available for a future floating+wide page. */
.msc-panel-wide { width: 460px; }

/* Opt-in per page (window.MAGICSEA_CHAT_EMBED, the FAQ page) — the chat
   sits inline in the page instead of floating over it: a normal block,
   sized and styled like the FAQ cards around it (.faq-item, style.css —
   same border color/radius) rather than a fixed-position overlay. It's
   inserted as the FIRST item in the FAQ list (see faq.html/faq-es.html
   and the EMBED_TARGET container, "#mscEmbed" by default). */
.msc-panel-embedded {
  position: static;
  width: 100%;
  height: 560px;
  max-width: none;
  max-height: none;
  margin: 0 0 .9rem;
  border-radius: 12px;
  border-color: #e4e4e7;
  box-shadow: none;
}
@media (max-width: 640px) {
  .msc-panel-embedded { height: 480px; }
}

/* Phones: full-bleed sheet instead of a rounded inset card. The real
   position/size is then driven live from the browser's VisualViewport API
   by concierge-widget.js (see "mobile keyboard fix" there), so it always
   matches exactly the area actually visible — including while the
   on-screen keyboard is open — instead of being anchored with top/bottom
   offsets computed from window.innerHeight, which is what used to squash
   or push the panel off-screen when the keyboard opened. These CSS values
   are just the sane fallback for the moment before JS runs / for browsers
   without visualViewport. */
@media (max-width: 480px) {
  .msc-panel {
    right: 0; left: 0; top: 0; bottom: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
  }
}

/* While the mobile chat sheet is open, stop the page behind it from
   scrolling (set/cleared by concierge-widget.js on open()/close()). */
html.msc-scroll-lock,
html.msc-scroll-lock body {
  overflow: hidden;
}

.msc-header {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background: var(--navy);
  color: var(--white);
  flex: none;
}
.msc-header .msc-fab-icon {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: block; object-fit: cover; background: var(--white);
}
.msc-header-text { flex: 1; min-width: 0; }
.msc-header-text strong {
  display: block; font-family: "Playfair Display", Georgia, serif;
  font-size: .98rem; line-height: 1.2;
}
.msc-header-text span {
  display: block; font-size: .72rem; color: var(--gold);
  margin-top: .1rem;
}
.msc-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.14); color: var(--white);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
}
.msc-close:hover { background: rgba(255,255,255,.24); }

.msc-log {
  flex: 1; overflow-y: auto;
  min-height: 0; /* lets the log shrink inside the flex column instead of pushing the composer off-screen */
  overscroll-behavior: contain; /* scrolling the chat never chains into the page behind it */
  -webkit-overflow-scrolling: touch;
  padding: .9rem .85rem;
  display: flex; flex-direction: column; gap: .65rem;
  background: var(--sand);
}

.msc-welcome {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: .9rem .95rem;
}
.msc-welcome p { margin: 0 0 .7rem; font-size: .86rem; line-height: 1.45; color: var(--gray-800); }
.msc-chips { display: flex; flex-direction: column; gap: .4rem; }
.msc-chip {
  text-align: left;
  font-family: inherit; font-size: .8rem;
  background: var(--sand);
  border: 1px solid var(--gray-200);
  color: var(--navy);
  border-radius: 9px;
  padding: .5rem .65rem;
  cursor: pointer;
}
.msc-chip:hover { border-color: var(--turquoise); }

.msc-msg { display: flex; max-width: 100%; }
.msc-msg.user { justify-content: flex-end; }
.msc-bubble {
  max-width: 86%;
  border-radius: 14px;
  padding: .58rem .78rem;
  font-size: .86rem; line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word;
}
.msc-bubble a { color: var(--turquoise-deep, #0f766e); text-decoration: underline; word-break: break-word; }
.msc-bubble a:hover { color: var(--navy); }
.msc-bubble strong { font-weight: 700; }
.msc-msg.user .msc-bubble { background: var(--turquoise); color: #04241f; border-bottom-right-radius: 3px; }
.msc-msg.assistant .msc-bubble {
  background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-800);
  border-bottom-left-radius: 3px;
}
.msc-msg.error .msc-bubble {
  background: #fbeae7; border: 1px solid #e3b6ac; color: var(--gray-800);
}

.msc-typing { display: inline-flex; gap: 4px; align-items: center; padding: .1rem 0; }
.msc-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--turquoise-deep);
  animation: msc-bounce 1.15s infinite ease-in-out;
}
.msc-typing span:nth-child(2) { animation-delay: .15s; }
.msc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes msc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .msc-typing span { animation: none; opacity: .8; }
}

.msc-summary-bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .8rem;
  background: var(--sand);
  border-top: 1px solid var(--gray-200);
}
.msc-summary-bar[hidden] { display: none; }
.msc-summary-bar span {
  font-size: .7rem; line-height: 1.3; color: var(--gray-800); flex: 1;
}

.msc-summary-actions {
  max-width: 86%;
  align-self: flex-start;
  background: var(--white);
  border: 1px dashed var(--gray-200);
  border-radius: 12px;
  padding: .55rem .65rem;
}
.msc-summary-label {
  font-size: .72rem; color: #8a97a8; margin-bottom: .4rem;
}

.msc-summary-buttons { display: flex; gap: .4rem; flex-wrap: wrap; }
.msc-summary-btn {
  font-family: inherit; font-size: .74rem; font-weight: 600;
  border-radius: 8px; padding: .4rem .6rem; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.msc-summary-btn:disabled { opacity: .6; cursor: default; }
.msc-summary-btn-wa {
  background: #e7f7ef; color: #0c6b3d; border-color: #bfe8d2;
}
.msc-summary-btn-wa:hover:not(:disabled) { background: #d7f2e4; }
.msc-summary-btn-mail {
  background: var(--white); color: var(--navy); border-color: var(--gray-200);
}
.msc-summary-btn-mail:hover:not(:disabled) { border-color: var(--turquoise); }

@media (max-width: 340px) {
  .msc-summary-bar { flex-direction: column; align-items: stretch; }
}

.msc-composer {
  flex: none;
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .6rem .7rem;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}
.msc-composer textarea {
  flex: 1; resize: none; border: 1px solid var(--gray-200); outline: none;
  border-radius: 10px; background: var(--sand); color: var(--gray-800);
  font-family: inherit; font-size: .86rem; line-height: 1.4;
  max-height: 5.5em; padding: .5rem .6rem;
}
.msc-composer textarea:focus { border-color: var(--turquoise); }
.msc-send {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--turquoise); color: #04241f;
  display: flex; align-items: center; justify-content: center;
}
.msc-send:hover:not(:disabled) { background: var(--turquoise-deep); }
.msc-send:disabled { opacity: .4; cursor: not-allowed; }
.msc-send.stop { background: #c0392b; color: #fff; }

.msc-hint {
  flex: none; text-align: center; font-size: .64rem; color: #8a97a8;
  padding: 0 .7rem .55rem;
  background: var(--white);
}

.msc-banner {
  margin: .7rem .8rem 0;
  border-radius: 10px;
  padding: .65rem .8rem;
  background: #fbf3e2;
  border: 1px solid #e9d6a6;
  color: var(--gray-800);
  font-size: .78rem; line-height: 1.45;
}


/* ---- AI sparkle icon + fixed left-edge chat tab ---- */
.msc-fab .msc-spark { flex: none; margin-right: .4rem; }
.msc-side-tab {
  position: fixed;
  left: 0;
  top: 40%; /* 10% above the vertical middle */
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(201, 169, 97, .55);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  background: var(--navy, #0b2545);
  color: var(--gold, #c9a961);
  box-shadow: 0 10px 26px -10px rgba(11, 37, 69, .6);
  cursor: pointer;
  transition: width .2s ease, background .2s, color .2s;
}
.msc-side-tab:hover, .msc-side-tab.active { width: 52px; background: var(--gold, #c9a961); color: var(--navy, #0b2545); }
.msc-side-tab:focus-visible { outline: 2px solid var(--turquoise, #14b8a6); outline-offset: 2px; }
.msc-side-tab .msc-spark { transition: transform .25s ease; }
.msc-side-tab:hover .msc-spark { transform: rotate(18deg) scale(1.1); }
/* Narrow screens: the page content sits only 20px from the screen edge, so the
   tab shrinks to 18px wide (no hover widening) to never cover the
   "Book Now" button / calendar card / text. */
@media (max-width: 1100px) {
  .msc-side-tab { width: 18px; height: 52px; opacity: .95; border-radius: 0 12px 12px 0; }
  .msc-side-tab .msc-spark { width: 13px; height: 13px; }
  .msc-side-tab:hover, .msc-side-tab.active { width: 18px; opacity: 1; }
}
@media (max-width: 640px) {
  html.msc-scroll-lock .msc-side-tab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msc-side-tab, .msc-side-tab .msc-spark { transition: none; }
}
@media print { .msc-side-tab { display: none; } }