/* ==========================================================================
   LEGENDARY STAKES — ls-chat-modal.css
   Site-wide modal host for the AI Assistant (thejsasse.github.io/legendary-stakes-chat)

   INSTALL
     Upload to /wp-content/themes/dt-the7-child/css/ls-chat-modal.css
     Enqueue after brand-overrides.css (see functions-additions-chat.php).

   The assistant styles itself — this file only styles the container around it:
   backdrop, dialog frame, close control, and the "Chat Now" trigger.

   Every colour comes from tokens.css. Fallbacks are inlined on each var() so
   the modal still renders correctly if it ever loads before the token file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · SHELL
   z-index has to clear The7's sticky header and Elementor's own overlays.
   -------------------------------------------------------------------------- */
.ls-chat-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 24px;
}

.ls-chat-modal[hidden] { display: none; }

.ls-chat-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 12, .74);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
  backdrop-filter: blur(10px) saturate(.9);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.2, .7, .2, 1);
}

.ls-chat-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  height: min(860px, 100%);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  transition: opacity 320ms cubic-bezier(.2, .7, .2, 1),
              transform 320ms cubic-bezier(.2, .7, .2, 1);
}
.ls-chat-modal__dialog:focus { outline: none; }

.ls-chat-modal.is-open .ls-chat-modal__backdrop { opacity: 1; }
.ls-chat-modal.is-open .ls-chat-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------------------
   2 · CLOSE CONTROL
   The assistant's own header already occupies its top-right corner ("New
   Chat"), so the close control sits in a strip ABOVE the frame rather than
   floating over it. Same structure on both breakpoints.
   -------------------------------------------------------------------------- */
.ls-chat-modal__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  flex: none;
}

.ls-chat-modal__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  background: rgba(20, 17, 12, .55);
  border: 1px solid var(--ls-gold-line, rgba(201, 160, 44, .40));
  border-radius: var(--ls-radius, 3px);
  color: var(--ls-gold-bright, #E3BC27);
  -webkit-appearance: none;
  appearance: none;
  transition: background 200ms cubic-bezier(.2, .7, .2, 1),
              border-color 200ms cubic-bezier(.2, .7, .2, 1),
              transform 120ms cubic-bezier(.2, .7, .2, 1);
}
.ls-chat-modal__close:hover {
  background: var(--ls-gold-tint, rgba(201, 160, 44, .14));
  border-color: var(--ls-gold, #C9A02C);
}
.ls-chat-modal__close:active { transform: translateY(1px); }
.ls-chat-modal__close:focus-visible {
  outline: 2px solid var(--ls-gold-bright, #E3BC27);
  outline-offset: 2px;
}
.ls-chat-modal__close svg {
  width: 15px;
  height: 15px;
  display: block;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3 · FRAME
   -------------------------------------------------------------------------- */
.ls-chat-modal__panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--ls-ink-950, #14110C);
  border: 1px solid var(--ls-gold-line, rgba(201, 160, 44, .40));
  border-radius: var(--ls-radius-lg, 6px);
  box-shadow: var(--ls-shadow-3, 0 24px 60px -20px rgba(20, 17, 12, .65));
}

.ls-chat-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--ls-ink-950, #14110C);
}

/* Shown until the assistant reports ready over postMessage. */
.ls-chat-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ls-ink-950, #14110C);
  pointer-events: none;
  opacity: 1;
  transition: opacity 200ms cubic-bezier(.2, .7, .2, 1);
}
.ls-chat-modal.is-ready .ls-chat-modal__loading { opacity: 0; }

.ls-chat-modal__loading span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ls-gold, #C9A02C);
  opacity: .5;
  animation: ls-chat-bounce 1.2s ease-in-out infinite;
}
.ls-chat-modal__loading span:nth-child(2) { animation-delay: .2s; }
.ls-chat-modal__loading span:nth-child(3) { animation-delay: .4s; }

@keyframes ls-chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   4 · SCROLL LOCK
   Applied to <html> while the modal is open. Padding compensates for the
   removed scrollbar so the header doesn't jump on open.
   -------------------------------------------------------------------------- */
html.ls-chat-locked,
html.ls-chat-locked body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* --------------------------------------------------------------------------
   5 · MOBILE — full-bleed sheet
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
  .ls-chat-modal { padding: 0; }

  .ls-chat-modal__dialog {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .ls-chat-modal__bar {
    /* Clears the notch / status bar on iOS. */
    height: calc(48px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: var(--ls-ink-950, #14110C);
  }

  .ls-chat-modal__panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Landscape phones — the 48px bar is too much of the viewport. */
@media (max-width: 900px) and (max-height: 460px) {
  .ls-chat-modal__bar { height: 38px; }
}

/* --------------------------------------------------------------------------
   6 · TRIGGER — "Chat Now"
   Add the CSS class `ls-chat-cta` to a nav menu item (Appearance → Menus →
   Screen Options → CSS Classes) or to an Elementor button (Advanced → CSS
   Classes). WordPress puts the class on the <li>, Elementor on the wrapper,
   so both the element and its descendant <a> are targeted.

   !important is required here to beat The7's nav link rules, consistent with
   how brand-overrides.css already handles header links.
   -------------------------------------------------------------------------- */
a.ls-chat-cta,
.ls-chat-cta > a,
.ls-chat-cta .elementor-button {
  font-family: var(--ls-font-cond, 'Saira Condensed', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: var(--ls-tracking-label, .14em) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .55em;
  padding: 12px 22px !important;
  min-height: 44px;
  border-radius: var(--ls-radius, 3px) !important;
  border: 1px solid transparent !important;
  background: var(--ls-gold-fill, linear-gradient(180deg, #E3BC27, #C9A02C)) !important;
  color: var(--ls-ink-950, #14110C) !important;
  box-shadow: var(--ls-shadow-gold, 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -8px rgba(201,160,44,.8));
  cursor: pointer;
  transition: box-shadow 200ms cubic-bezier(.2, .7, .2, 1),
              transform 120ms cubic-bezier(.2, .7, .2, 1);
}

/* The7 wraps nav labels in a <span> and colours it separately. */
a.ls-chat-cta span,
.ls-chat-cta > a span,
.ls-chat-cta .elementor-button span {
  color: var(--ls-ink-950, #14110C) !important;
  letter-spacing: inherit !important;
}

a.ls-chat-cta:hover,
.ls-chat-cta > a:hover,
.ls-chat-cta .elementor-button:hover {
  color: var(--ls-ink-950, #14110C) !important;
  box-shadow: var(--ls-shadow-gold-hover, 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 22px -8px rgba(201,160,44,.9));
}
a.ls-chat-cta:active,
.ls-chat-cta > a:active { transform: translateY(1px); }

/* The7 draws an underline/marker on the active nav item — not wanted on a button. */
.ls-chat-cta > a::before,
.ls-chat-cta > a::after { display: none !important; }

/* In The7's mobile menu the item is full width, so let the button fill it. */
.dt-mobile-header .ls-chat-cta > a,
.dt-mobile-menu-bar .ls-chat-cta > a {
  width: 100%;
  margin: 8px 0;
}

/* --------------------------------------------------------------------------
   7 · REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ls-chat-modal__backdrop,
  .ls-chat-modal__dialog,
  .ls-chat-modal__loading,
  .ls-chat-modal__close,
  a.ls-chat-cta,
  .ls-chat-cta > a {
    transition-duration: .01ms !important;
  }
  .ls-chat-modal__dialog { transform: none !important; }
  .ls-chat-modal__loading span { animation: none; opacity: .6; }
}