/* Legacy Key chatbot widget - full rebuild.
   Scoped entirely under the lk-chat- and chatbot- class prefixes so
   nothing here can collide with or override the existing site CSS.

   ARCHITECTURE (exactly three views, one scroll region, nothing else):

     .chatbot-shell                    fixed-position floating card - the
                                        ONLY place a height is set, because
                                        it's an overlay and has to have
                                        some bounding box
       .chatbot-header                 flex-shrink:0, ~62px, always visible
       .chatbot-main                   flex:1; min-height:0; overflow-y:auto
                                        <- the ONLY scrollable element
         [data-view="chat"]              messages + one subtle lead link
         [data-view="lead"]              lead capture form
         [data-view="success"]           confirmation screen
         (exactly one is visible - the other two carry the native
          `hidden` attribute - toggled by the single setView() function
          in widget.js, nothing else touches visibility)
       .chatbot-composer               flex-shrink:0, pinned bottom,
                                        hidden entirely (not just emptied)
                                        whenever the active view isn't chat

   No !important, no fixed heights on scrollable content, no absolute
   positioning for the form or success screen, no spacer divs. */

.lk-chat-launcher{
  /* Sits ABOVE the site's own #toTop back-to-top button (which is at
     right:26px bottom:26px), so the two never overlap and the launcher
     stays findable. */
  position:fixed; right:26px; bottom:84px; z-index:170;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(180deg, #e9d38f, #c9a44c);
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 12px 30px -8px rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  transition:transform .25s cubic-bezier(.22,.9,.32,1), box-shadow .25s;
  animation:lkLauncherEnter .4s cubic-bezier(.22,.9,.32,1), lkLauncherPulse 2.8s ease-in-out 1.2s infinite;
}
.lk-chat-launcher:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -8px rgba(0,0,0,0.6); }
.lk-chat-launcher:active{ transform:translateY(-1px) scale(0.96); }
.lk-chat-launcher svg{ width:26px; height:26px; stroke:#1a1509; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Stops once the visitor has opened/closed the widget at least once -
   widget.js adds this class in markInteracted() so the attention pulse
   never nags someone who has already engaged. */
.lk-chat-launcher.lk-settled{ animation:none; }

@keyframes lkLauncherEnter{ from{ opacity:0; transform:translateY(18px) scale(.85); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes lkLauncherPulse{
  0%,100%{ box-shadow:0 12px 30px -8px rgba(0,0,0,0.55), 0 0 0 0 rgba(201,164,76,0.35); }
  50%{ box-shadow:0 12px 30px -8px rgba(0,0,0,0.55), 0 0 0 9px rgba(201,164,76,0); }
}

@media(max-width:700px){
  /* The site's #mobileCta bar (Call/Text/Book Now) is pinned to the very
     bottom and gets TALLER on notched phones via env(safe-area-inset-
     bottom). Lift the launcher above the bar plus that inset so it's
     never swallowed by it. */
  .lk-chat-launcher{
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
    right:16px; width:52px; height:52px;
  }
}

/* ---- Shell ---- */
.chatbot-shell{
  position:fixed; z-index:160;
  right:22px; left:auto; bottom:96px;
  width:380px; max-width:calc(100vw - 24px);
  height:min(640px, calc(100vh - 32px));
  max-height:calc(100vh - 32px);
  background:#161615; border:1px solid rgba(201,164,76,0.25); border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.7);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'Jost', sans-serif; color:#f7f2e7;
  transform-origin:bottom right;
}
/* Open/close animation. .lk-hidden is display:none (no transition
   possible on that alone), so opening restarts this animation naturally
   every time (display:none -> flex is a fresh render for animation
   purposes) and closing gets a short reverse animation before widget.js
   actually applies .lk-hidden a beat later. */
.chatbot-shell:not(.lk-hidden):not(.lk-closing){ animation:lkPanelIn .22s cubic-bezier(.22,.9,.32,1); }
.chatbot-shell.lk-closing{ animation:lkPanelOut .16s ease-in forwards; }
@keyframes lkPanelIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes lkPanelOut{ from{ opacity:1; transform:translateY(0) scale(1); } to{ opacity:0; transform:translateY(10px) scale(.97); } }

@media(max-width:700px){
  .chatbot-shell{
    right:12px; left:auto;
    /* Clear the #mobileCta bar (and its safe-area inset) so the composer
       is never hidden behind the Call/Text/Book bar. */
    bottom:calc(80px + env(safe-area-inset-bottom, 0px));
    width:calc(100vw - 24px);
    height:min(600px, calc(100vh - 150px - env(safe-area-inset-bottom, 0px)));
    max-height:calc(100vh - 150px - env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Header (fixed, ~62px) ---- */
.chatbot-header{
  flex-shrink:0;
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  min-height:62px; box-sizing:border-box;
  background:#0b0b0d; border-bottom:1px solid rgba(201,164,76,0.2);
}
.chatbot-header .lk-chat-crest{ width:30px; height:30px; border-radius:50%; object-fit:contain; background:#0b0b0d; flex-shrink:0; }
.lk-chat-header-text{ flex:1; min-width:0; }
.lk-chat-header-text .lk-title{ font-family:'Cormorant Garamond', serif; font-weight:600; color:#e9d38f; font-size:1.1rem; line-height:1.15; }
.lk-chat-header-text .lk-subtitle{ font-size:0.68rem; color:#c9a44c; letter-spacing:0.03em; }
.lk-chat-header-actions{ display:flex; gap:6px; flex-shrink:0; }
.lk-chat-icon-btn{
  width:36px; height:36px; border-radius:8px; border:1px solid rgba(201,164,76,0.25); background:transparent;
  color:#e9d38f; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s;
}
.lk-chat-icon-btn:hover{ background:rgba(201,164,76,0.12); }
.lk-chat-icon-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* ---- Main: the single scroll region ---- */
.chatbot-main{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
}
.chatbot-main::-webkit-scrollbar{ width:8px; }
.chatbot-main::-webkit-scrollbar-thumb{ background:rgba(201,164,76,0.3); border-radius:8px; }

.chatbot-view{ padding:16px; box-sizing:border-box; }
/* Fires every time a view's `hidden` attribute is removed (display:none
   -> flex is a fresh render for animation purposes, same as the panel
   open animation above), giving chat/lead/success a subtle transition
   instead of an instant snap. */
.chatbot-view:not([hidden]){ animation:lkViewIn .22s ease-out; }
@keyframes lkViewIn{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:translateX(0); } }

/* ---- Chat view ---- */
.lk-chat-messages{ display:flex; flex-direction:column; gap:12px; }
.lk-msg{ max-width:85%; padding:10px 14px; border-radius:14px; font-size:0.9rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; animation:lkMsgIn .22s ease-out; }
@keyframes lkMsgIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.lk-msg a{ color:inherit; text-decoration:underline; text-underline-offset:2px; word-break:break-all; }
.lk-msg-user a{ color:#1a1509; }
.lk-msg-assistant a, .lk-msg-system a, .lk-msg-error a{ color:#e9d38f; }
.lk-msg-user{ align-self:flex-end; background:linear-gradient(180deg, #e9d38f, #c9a44c); color:#1a1509; border-bottom-right-radius:4px; }
.lk-msg-assistant{ align-self:flex-start; background:#1e1d1a; border:1px solid rgba(201,164,76,0.18); color:#efe6d2; border-bottom-left-radius:4px; }
.lk-msg-system{ align-self:center; background:transparent; color:#9a8f72; font-size:0.78rem; text-align:center; max-width:100%; }
.lk-msg-error{ align-self:center; background:rgba(110,31,43,0.15); border:1px solid rgba(110,31,43,0.4); color:#e8b9c0; font-size:0.82rem; text-align:center; max-width:100%; }

.lk-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:#1e1d1a; border-radius:14px; border-bottom-left-radius:4px; border:1px solid rgba(201,164,76,0.18); }
.lk-typing span{ width:6px; height:6px; border-radius:50%; background:#c9a44c; opacity:0.4; animation:lkTypingPulse 1.2s infinite ease-in-out; }
.lk-typing span:nth-child(2){ animation-delay:.2s; }
.lk-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes lkTypingPulse{ 0%,60%,100%{ opacity:0.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

/* The one subtle "leave your info" link - lives once, right after the
   opening greeting, as plain in-flow content (not a persistent bar). */
.lk-lead-prompt{
  background:none; border:none; padding:2px 0; margin-top:2px; align-self:flex-start;
  font-family:'Jost', sans-serif; font-size:0.78rem; color:#c9a44c; text-decoration:underline;
  cursor:pointer; min-height:28px;
}
.lk-lead-prompt:hover{ color:#e9d38f; }

/* ---- Lead view ---- */
.chatbot-view[data-view="lead"]{ display:flex; flex-direction:column; gap:14px; }
.lk-lead-back{
  display:flex; align-items:center; gap:6px; align-self:flex-start;
  background:none; border:none; cursor:pointer; padding:4px 0; min-height:28px;
  font-family:'Jost', sans-serif; font-size:0.8rem; color:#c9a44c;
}
.lk-lead-back:hover{ color:#e9d38f; }
.lk-lead-back svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.lk-lead-heading{ font-family:'Cormorant Garamond', serif; font-weight:600; color:#e9d38f; font-size:1.25rem; line-height:1.2; }
.lk-lead-subheading{ font-size:0.82rem; color:#9a8f72; margin-top:2px; }

.lk-lead-form{ display:flex; flex-direction:column; gap:14px; }
.lk-lead-form .lk-field{ display:flex; flex-direction:column; gap:5px; }
.lk-lead-form label{ font-size:0.76rem; color:#c9a44c; letter-spacing:0.02em; }
.lk-lead-form .lk-field-optional{ color:#8a7f65; font-weight:400; }
.lk-lead-form input, .lk-lead-form textarea{
  border-radius:10px; border:1px solid rgba(201,164,76,0.3); background:#1e1d1a; color:#f7f2e7;
  font-family:'Jost', sans-serif; font-size:0.9rem; padding:11px 12px;
  width:100%; box-sizing:border-box; min-height:44px;
}
.lk-lead-form input:focus-visible, .lk-lead-form textarea:focus-visible{
  outline:2px solid #e9d38f; outline-offset:1px;
}
.lk-lead-form textarea{ resize:vertical; min-height:76px; }

.lk-lead-submit{
  font-family:'Jost', sans-serif; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; font-size:0.8rem;
  border:none; border-radius:999px; padding:13px; cursor:pointer; color:#1a1509; min-height:44px;
  background:linear-gradient(180deg, #e9d38f, #c9a44c);
}
.lk-lead-submit:disabled{ opacity:0.5; cursor:not-allowed; }

.lk-lead-disclaimer{ font-size:0.68rem; color:#8a7f65; line-height:1.45; margin-top:-4px; }
.lk-lead-disclaimer a{ color:#c9a44c; text-decoration:underline; }

.lk-lead-status{ font-size:0.82rem; padding:2px 0; }
.lk-lead-status.lk-msg-error{ align-self:stretch; max-width:100%; text-align:left; padding:8px 12px; border-radius:10px; }

/* ---- Success view ---- */
.chatbot-view[data-view="success"]{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:12px;
  /* Floor, not a ceiling: resolves against .chatbot-main's definite flexed
     height so short content centers, but if it's ever taller than the
     visible area it just grows and the ancestor scrolls - never clipped. */
  min-height:100%;
}
.lk-success-icon{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:rgba(201,164,76,0.15); border:1px solid rgba(201,164,76,0.4);
  display:flex; align-items:center; justify-content:center; color:#e9d38f;
}
/* widget.js restarts this (remove/reflow/re-add) every time the success
   view is shown, since the element itself isn't re-created each time. */
.lk-success-icon.lk-pop{ animation:lkSuccessPop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes lkSuccessPop{ 0%{ transform:scale(0); opacity:0; } 60%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); } }
.lk-success-icon svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lk-success-title{ font-family:'Cormorant Garamond', serif; font-weight:600; color:#e9d38f; font-size:1.2rem; }
.lk-success-text{ font-size:0.86rem; color:#efe6d2; line-height:1.5; max-width:280px; }
.lk-success-actions{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:220px; margin-top:4px; }
.lk-success-btn{
  font-family:'Jost', sans-serif; font-weight:600; letter-spacing:0.03em; font-size:0.78rem;
  border-radius:999px; padding:11px 16px; cursor:pointer; min-height:44px;
  text-decoration:none; display:flex; align-items:center; justify-content:center;
}
.lk-success-btn-primary{ border:1px solid rgba(201,164,76,0.4); color:#e9d38f; background:transparent; }
.lk-success-btn-primary:hover{ background:rgba(201,164,76,0.12); }
.lk-success-btn-secondary{ border:none; color:#1a1509; background:linear-gradient(180deg, #e9d38f, #c9a44c); }

/* ---- Composer (footer, chat view only) ---- */
.chatbot-composer{ flex-shrink:0; display:flex; flex-direction:column; background:#0b0b0d; border-top:1px solid rgba(201,164,76,0.18); }
.lk-chat-charcount{ font-size:0.68rem; color:#8a7f65; padding:6px 16px 0; text-align:right; }
.lk-chat-inputrow{ display:flex; gap:8px; padding:8px 14px 14px; align-items:flex-end; }
.lk-chat-inputrow textarea{
  flex:1; resize:none; max-height:90px; min-height:44px; border-radius:12px; border:1px solid rgba(201,164,76,0.3);
  background:#1e1d1a; color:#f7f2e7; font-family:'Jost', sans-serif; font-size:0.88rem; padding:11px 12px;
  box-sizing:border-box;
}
.lk-chat-inputrow textarea:focus-visible{ outline:2px solid #e9d38f; outline-offset:1px; }
.lk-chat-send{
  flex-shrink:0; width:44px; height:44px; border-radius:12px; border:none; cursor:pointer;
  background:linear-gradient(180deg, #e9d38f, #c9a44c); color:#1a1509; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease-out;
}
.lk-chat-send:disabled{ opacity:0.5; cursor:not-allowed; }
.lk-chat-send:active:not(:disabled){ transform:scale(0.9); }
.lk-chat-send svg{ width:18px; height:18px; }

.lk-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.chatbot-shell *:focus-visible, .lk-chat-launcher:focus-visible{
  outline:2px solid #e9d38f; outline-offset:2px;
}

/* Generic hide utility for the launcher/shell themselves (open/closed
   state of the whole widget - separate concern from which view is
   showing inside it). Defined last so it wins by source order over the
   earlier single-class rules above without !important. */
.lk-hidden{ display:none; }

/* CRITICAL: the JS switches views and the composer with the native
   `hidden` attribute (els.composer.hidden = true, view.hidden = true).
   But several rules above set `display:flex` on those very elements
   (.chatbot-composer, .chatbot-view[data-view="lead"], etc.), and a
   normal `display` declaration OVERRIDES the `hidden` attribute's
   default display:none - so without this rule the composer and the
   lead/success screens would NEVER actually hide (they'd stack on top
   of each other). This is the one place !important is required: it
   makes the `hidden` attribute authoritative for everything inside the
   widget, which is exactly what the JS assumes. */
.chatbot-shell [hidden]{ display:none !important; }

/* Accessibility: anyone who has asked their OS/browser for reduced
   motion gets none of the above - this is the one place !important is
   actually necessary, since it must always win regardless of which
   animation rule above it's overriding. */
@media (prefers-reduced-motion: reduce){
  .lk-chat-launcher,
  .chatbot-shell,
  .chatbot-view,
  .lk-msg,
  .lk-success-icon,
  .lk-typing span{
    animation:none !important;
  }
}