/* =============================================================================
   VISITOR LIVE CHAT WIDGET — STYLES  (Marlowe & Sons edition)
   =============================================================================
   Drop-in replacement for static/css/chat-widget.css.

   WHAT CHANGED vs. the old file:
   - Re-themed to the Marlowe & Sons design system (ink / bone / aged brass),
     square-ish 2–4px radii, and the site's display + body fonts.
   - The launcher no longer SCALES TO ZERO when the panel opens (that was the
     "circle disappears" bug). It stays put and its icon cross-fades to an X.
   - Added quick-reply chips (.lc-chips) above the composer.
   - Added an offline state (.lc-root.is-offline) with muted status styling.

   Every class is still prefixed `lc-` and scoped under `.lc-root`, so nothing
   leaks onto the host page. Fonts (Big Shoulders Display / Inter) are already
   loaded by the site's style.css; the widget just references them.
   ========================================================================== */

.lc-root {
  /* ---- THEME TOKENS ------------------------------------------------------
     Wired to the site's own design tokens (Marlowe) so the launcher, header
     and send button always match the page they sit on. Previously these were
     hardcoded to the original template's palette, which meant the widget
     showed the wrong brand colours on every site. ---------------------- */
  --lc-ink:        var(--navy);
  --lc-ink-2:      var(--surface-2);
  --lc-brass:      var(--accent);
  --lc-brass-2:    var(--accent-2);
  --lc-brass-soft: var(--accent-soft);
  --lc-text:       var(--fg);
  --lc-muted:      var(--muted);
  --lc-surface:    var(--surface);
  --lc-surface-2:  #FFFFFF;
  --lc-canvas:     var(--bg-2);
  --lc-border:     var(--border);
  --lc-border-2:   var(--border-2);
  --lc-error:      var(--red, #B0322B);
  --lc-online:     #3B3184;
  --lc-radius:     8px;
  --lc-radius-sm:  6px;
  --lc-shadow:     0 18px 50px rgba(0,0,0,0.28);

  --lc-font:  var(--font-body);
  --lc-font-disp: var(--font-disp);

  /* sizing */
  --lc-panel-w: 384px;
  --lc-panel-h: 600px;
  --lc-z: 2147483000;

  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--lc-z);
  font-family: var(--lc-font);
  color: var(--lc-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.lc-root *,
.lc-root *::before,
.lc-root *::after { box-sizing: border-box; }

/* =============================================================================
   FLOATING LAUNCHER  (stays visible when open — icon morphs to X)
   ========================================================================== */
.lc-bubble {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: var(--lc-brass);
  color: var(--lc-on-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--lc-shadow);
  transition: transform 0.18s ease, background 0.18s ease;
  position: relative;
}
.lc-bubble:hover { background: var(--lc-brass-2); transform: translateY(-2px); }
.lc-bubble:active { transform: translateY(0); }
.lc-bubble:focus-visible { outline: 3px solid var(--lc-brass-soft); outline-offset: 3px; }

/* two stacked icon layers cross-fade between chat <-> close */
.lc-bubble__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.lc-bubble__icon svg { width: 26px; height: 26px; }
.lc-bubble__icon--close { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.lc-root.is-open .lc-bubble__icon--chat  { opacity: 0; transform: rotate(45deg) scale(0.7); }
.lc-root.is-open .lc-bubble__icon--close { opacity: 1; transform: rotate(0) scale(1); }

/* "we're online" pulse dot on the launcher (hidden once open) */
.lc-bubble__status {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lc-online);
  border: 2px solid var(--lc-brass);
  transition: opacity 0.18s ease;
}
.lc-bubble__status::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--lc-online);
  animation: lc-pulse 2s ease-out infinite;
}
.lc-root.is-open .lc-bubble__status { opacity: 0; }
.lc-root.is-offline .lc-bubble__status { background: var(--lc-muted); border-color: var(--lc-brass); }
.lc-root.is-offline .lc-bubble__status::after { display: none; }
@keyframes lc-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* =============================================================================
   PANEL
   ========================================================================== */
.lc-panel {
  position: absolute;
  bottom: 78px;
  right: 0;
  width: var(--lc-panel-w);
  height: var(--lc-panel-h);
  max-height: calc(100vh - 116px);
  background: var(--lc-surface);
  border-radius: var(--lc-radius);
  box-shadow: var(--lc-shadow);
  border: 1px solid var(--lc-border-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.lc-root.is-open .lc-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* ---- header ----------------------------------------------------------- */
.lc-header {
  background: var(--lc-ink);
  color: var(--lc-surface);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--lc-brass);
}
.lc-header__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--lc-brass);
  color: var(--lc-on-accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.lc-header__avatar svg { width: 22px; height: 22px; }
.lc-header__meta { flex: 1; min-width: 0; }
.lc-header__title {
  font-family: var(--lc-font-disp);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--lc-surface);
}
.lc-header__subtitle {
  font-size: 12px;
  color: #B9BCC6;
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.lc-header__subtitle .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lc-online); flex-shrink: 0;
}
.lc-root.is-offline .lc-header__subtitle .dot { background: var(--lc-muted); }
.lc-header__close {
  background: transparent; border: none; color: #B9BCC6;
  cursor: pointer; padding: 6px; border-radius: var(--lc-radius-sm); line-height: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.lc-header__close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.lc-header__close svg { width: 20px; height: 20px; }

/* =============================================================================
   VIEW SWITCHING  (Pre-Chat Form <-> Chat)
   ========================================================================== */
.lc-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.lc-view.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lc-body { position: relative; flex: 1; min-height: 0; }

/* =============================================================================
   PRE-CHAT FORM
   ========================================================================== */
.lc-form-intro { padding: 22px 20px 6px; }
.lc-form-intro h3 {
  margin: 0 0 5px;
  font-family: var(--lc-font-disp);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--lc-ink);
}
.lc-form-intro p { margin: 0; font-size: 13.5px; color: var(--lc-muted); }

.lc-form { padding: 16px 20px 20px; overflow-y: auto; flex: 1; }
.lc-field { margin-bottom: 15px; }
.lc-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-text);
  margin-bottom: 6px;
}
.lc-field label .req { color: var(--lc-error); margin-left: 2px; }
.lc-field input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--lc-border-2);
  border-radius: var(--lc-radius-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--lc-text);
  background: var(--lc-surface-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lc-field input::placeholder { color: #B2ADA0; }
.lc-field input:focus {
  outline: none;
  border-color: var(--lc-brass);
  box-shadow: 0 0 0 3px var(--lc-brass-soft);
}
.lc-field.is-invalid input { border-color: var(--lc-error); }
.lc-field.is-invalid input:focus { box-shadow: 0 0 0 3px rgba(176,50,43,0.14); }
.lc-field__error { display: none; font-size: 12px; color: var(--lc-error); margin-top: 5px; }
.lc-field.is-invalid .lc-field__error { display: block; }

.lc-submit {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--lc-brass);
  border-radius: var(--lc-radius-sm);
  background: var(--lc-brass);
  color: var(--lc-on-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--lc-font);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.lc-submit:hover { background: var(--lc-brass-2); border-color: var(--lc-brass-2); }
.lc-submit:disabled { opacity: 0.6; cursor: progress; }
.lc-submit:focus-visible { outline: 3px solid var(--lc-brass-soft); outline-offset: 2px; }

.lc-form__legal {
  margin: 12px 2px 0;
  font-size: 11.5px;
  color: var(--lc-muted);
  text-align: center;
}

/* =============================================================================
   CHAT VIEW
   ========================================================================== */
.lc-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--lc-canvas);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lc-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 14.5px;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: lc-msg-in 0.22s ease;
}
@keyframes lc-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-msg--visitor {
  align-self: flex-end;
  background: var(--lc-ink-2);
  color: var(--lc-surface);
  border-bottom-right-radius: 2px;
}
.lc-msg--agent {
  align-self: flex-start;
  background: var(--lc-surface-2);
  color: var(--lc-text);
  border: 1px solid var(--lc-border);
  border-bottom-left-radius: 2px;
}
.lc-msg--system {
  align-self: center;
  background: transparent;
  color: var(--lc-muted);
  font-size: 12.5px;
  padding: 4px 8px;
  text-align: center;
}

/* typing indicator */
.lc-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.lc-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #C3BBA6; animation: lc-bounce 1.2s infinite ease-in-out;
}
.lc-typing span:nth-child(2) { animation-delay: 0.15s; }
.lc-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes lc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* =============================================================================
   QUICK-REPLY CHIPS  (sit between thread and composer)
   ========================================================================== */
.lc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 12px 0;
  background: var(--lc-surface);
  flex-shrink: 0;
}
.lc-chips:empty { display: none; }
.lc-chip {
  border: 1px solid var(--lc-brass);
  background: transparent;
  color: var(--lc-brass-2);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}
.lc-chip:hover { background: var(--lc-brass); color: var(--lc-on-accent); }
.lc-chip:focus-visible { outline: 2px solid var(--lc-brass-soft); outline-offset: 2px; }

/* =============================================================================
   COMPOSER
   ========================================================================== */
.lc-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--lc-border);
  background: var(--lc-surface);
  flex-shrink: 0;
}
.lc-composer textarea {
  flex: 1;
  resize: none;
  max-height: 110px;
  min-height: 44px;
  padding: 12px 13px;
  border: 1.5px solid var(--lc-border-2);
  border-radius: var(--lc-radius-sm);
  font-size: 14.5px;
  font-family: inherit;
  color: var(--lc-text);
  background: var(--lc-surface-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lc-composer textarea:focus {
  outline: none;
  border-color: var(--lc-brass);
  box-shadow: 0 0 0 3px var(--lc-brass-soft);
}
.lc-send {
  width: 44px; height: 44px;
  border: 1px solid var(--lc-brass);
  border-radius: var(--lc-radius-sm);
  background: var(--lc-brass); color: var(--lc-on-accent);
  cursor: pointer; display: grid; place-items: center;
  flex-shrink: 0; transition: background 0.15s ease, border-color 0.15s ease;
}
.lc-send:hover { background: var(--lc-brass-2); border-color: var(--lc-brass-2); }
.lc-send:disabled { opacity: 0.5; cursor: not-allowed; }
.lc-send svg { width: 20px; height: 20px; }

/* =============================================================================
   INLINE NOTICES + HONEYPOT
   ========================================================================== */
.lc-note {
  margin: 8px 16px;
  padding: 9px 12px;
  border-radius: var(--lc-radius-sm);
  background: var(--lc-brass-soft);
  color: var(--lc-ink);
  font-size: 13px;
  line-height: 1.45;
}
.lc-note--error { background: #FAE7E5; color: #8A1C12; }
.lc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .lc-root { bottom: 18px; right: 18px; }
  .lc-panel { --lc-panel-w: 360px; }
}
@media (max-width: 480px) {
  .lc-root { bottom: 16px; right: 16px; }
  .lc-root.is-open .lc-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }
  .lc-header { padding: 16px 18px; padding-top: max(16px, env(safe-area-inset-top)); }
  .lc-composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-root *,
  .lc-root *::before,
  .lc-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}