/* ==========================================================================
   AIO Vend – Live Chat widget (scoped .lc-*)
   Mobile-first, full-screen on phones, accessible, GPU-friendly animations.
   Pre-chat → Live chat + Help tab. Full safe-area + dvh/svh + JS fvh support.
   Zero layout-jank: stable scrollbars, fixed overlay, content-visibility.
   2.4.0: Grid-based chat area, scroll-padding sync, input height var, spacing polish.
   ========================================================================== */

/* ---------------------- Global layout stability ---------------------- */
html {
  /* Reserve scrollbar gutter in modern browsers to prevent horizontal shift */
  scrollbar-gutter: stable both-edges;
}

/* Scope box-sizing so widget can never overflow horizontally from padding */
.lc-mount, .lc-mount * { box-sizing: border-box; }

/* ---------------------- Tokens / Theme ---------------------- */
:root {
  --lc-surface: var(--clr-surface, #ffffff);
  --lc-text: var(--clr-text, #0f172a);
  --lc-border: var(--clr-border, #e5e7eb);
  --lc-accent: #2563eb;
  --lc-accent-contrast: #ffffff;
  --lc-muted: #6b7280;
  --lc-success: #059669;
  --lc-danger: #dc2626;

  --lc-shadow: 0 14px 44px rgba(0,0,0,.18);
  --lc-radius: 14px;
  --lc-z: 11000;

  --lc-launcher-bottom: max(18px, env(safe-area-inset-bottom));
  --lc-open-shift: 42px;

  /* Viewport units; JS sets --lc-fvh for stable mobile height */
  --lc-vh: 1vh;
  --lc-fvh: 1vh;

  /* Runtime-computed input bar height (JS keeps this fresh) */
  --lc-input-h: 64px;
}

@supports (height: 100dvh) {
  :root { --lc-vh: 1dvh; }
}
@supports (height: 100svh) {
  :root { --lc-vh: 1svh; } /* stable viewport unit on modern mobile */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lc-surface: #0f141b;
    --lc-border: #374151;
    --lc-text: #e5e7eb;
    --lc-muted: #9ca3af;
  }
}

/* System fonts + tap friendliness (scoped) */
.lc-mount, .lc-panel, .lc-launcher, .lc-toast, .lc-scrim {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Disable scroll behind the panel, with JS padding compensation (no layout shift) */
body.lc-open {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* ---------------------- Mount ---------------------- */
.lc-mount {}

/* ---------------------- Launcher button ---------------------- */
.lc-launcher {
  position: fixed;
  right: 18px;
  bottom: var(--lc-launcher-bottom);
  z-index: var(--lc-z);
  will-change: transform, opacity;
}

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--lc-accent);
  color: var(--lc-accent-contrast);
  border: 0;
  box-shadow: var(--lc-shadow);
  font-size: 21px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.lc-btn:hover { transform: translateY(-2px); }
.lc-btn:active { transform: translateY(0); box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.lc-btn:focus-visible { outline: 3px solid rgba(37,99,235,.45); outline-offset: 2px; }
.lc-btn svg { width: 24px; height: 24px; display: block; }
.lc-attn { animation: lcPulse 1.2s ease-in-out 3; }
@keyframes lcPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ---------------------- Scrim / Backdrop ---------------------- */
.lc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility 0s linear .18s;
  z-index: calc(var(--lc-z) - 1);
  will-change: opacity;
  contain: content;
}
.lc-scrim.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, visibility 0s;
}

/* ---------------------- Panel (dialog) ---------------------- */
.lc-panel {
  position: fixed;
  right: 18px;
  bottom: var(--lc-launcher-bottom);

  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: min(calc(var(--lc-vh) * 78), 680px);
  background: var(--lc-surface);
  color: var(--lc-text);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  box-shadow: var(--lc-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--lc-z);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--lc-open-shift)) translateZ(0);
  transition: opacity .18s ease, transform .22s ease, visibility 0s linear .18s;
  will-change: transform, opacity;
  contain: layout style paint;
  overscroll-behavior: contain;
  backface-visibility: hidden;
}

/* Open state */
.lc-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) translateZ(0);
  transition: opacity .18s ease, transform .22s ease, visibility 0s;
}

/* ---------------------- Header ---------------------- */
.lc-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--lc-border);
  background: linear-gradient(180deg, rgba(0,0,0,.03), transparent);
  backdrop-filter: saturate(1.1) blur(2px);
}
.lc-title {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1rem;
}
.lc-sub {
  font-weight: 500;
  color: var(--lc-muted);
  font-size: .82rem;
}
.lc-badges { display: inline-flex; gap: .4rem; margin-left: .25rem; }
.lc-badge {
  font-size: .72rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
[data-theme="dark"] .lc-badge {
  background: #1f2937;
  color: #93c5fd;
  border-color: #334155;
}

.lc-actions { display: inline-flex; gap: .25rem; }
.lc-iconbtn {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 18px;
  touch-action: manipulation;
}
.lc-iconbtn:hover { background: rgba(0,0,0,.06); }
[data-theme="dark"] .lc-iconbtn:hover { background: rgba(255,255,255,.06); }
.lc-iconbtn:focus-visible { outline: 2px solid rgba(37,99,235,.35); outline-offset: 2px; }

/* Tabs (Chat / Help) */
.lc-tabs {
  grid-column: 1 / -1;
  display: inline-flex;
  gap: .25rem;
  background: transparent;
  border: 1px solid var(--lc-border);
  border-radius: 999px;
  padding: .25rem;
  justify-self: start;
}
.lc-tab {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  border: 0;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--lc-muted);
  cursor: pointer;
}
.lc-tab[aria-selected="true"] {
  background: var(--lc-accent);
  color: var(--lc-accent-contrast);
}

/* ---------------------- Connectivity banner ---------------------- */
.lc-banner {
  background: #fef3c7;
  color: #92400e;
  border-top: 1px solid #fcd34d;
  font-size: .82rem;
  padding: .35rem .75rem;
  text-align: center;
}
[data-theme="dark"] .lc-banner {
  background: #312e1f;
  color: #fcd34d;
  border-color: #a16207;
}

/* ---------------------- PRE-CHAT ---------------------- */
.lc-prechat {
  display: grid;
  gap: .7rem;
  padding: .9rem;
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
.lc-pretitle {
  margin: .2rem 0 .1rem;
  font-size: .98rem;
  font-weight: 700;
}
.lc-field { display: grid; gap: .35rem; }
.lc-field label {
  font-size: .85rem;
  color: var(--lc-muted);
}
.lc-field input,
.lc-field textarea {
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--lc-border);
  background: var(--lc-surface);
  color: inherit;
  border-radius: 12px;
  padding: .65rem .75rem;
  font-size: .95rem;
  min-width: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.lc-field input:focus,
.lc-field textarea:focus {
  outline: 2px solid rgba(37,99,235,.35);
  outline-offset: 2px;
}
.lc-field textarea {
  resize: vertical;
  min-height: 72px;
  max-height: 240px;
}
.lc-pre-actions {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: .15rem;
}

/* Hint + Toast */
.lc-hint {
  padding: .1rem 0 .2rem;
  font-size: .8rem;
  color: var(--lc-muted);
}
.lc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: #111827;
  color: #fff;
  border-radius: 999px;
  padding: .55rem .9rem;
  box-shadow: var(--lc-shadow);
  font-size: .85rem;
  display: none;
  z-index: var(--lc-z);
  contain: content;
  pointer-events: none;
}
.lc-toast.show { display: inline-block; }

/* ---------------------- LIVE CHAT ---------------------- */
.lc-chat {
  /* NEW: grid gives perfect containment of messages vs input */
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;              /* important inside flex parent to allow scroll */
  height: 100%;
  flex: 1 1 auto;
  content-visibility: auto;
  contain-intrinsic-size: 1200px;
}

/* Messages list */
.lc-messages {
  overflow-y: auto;
  padding: .75rem .75rem .25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  contain: layout style paint;

  /* Ensure the last message is never obscured by the input bar or keyboard */
  scroll-padding-bottom: calc(var(--lc-input-h, 64px) + var(--lc-kb, 0px) + env(safe-area-inset-bottom));
}

/* Message bubble */
.lc-msg {
  max-width: 86%;
  padding: .62rem .78rem;
  border-radius: 14px;
  border: 1px solid var(--lc-border);
  background: var(--lc-surface);
  line-height: 1.38;
  font-size: .95rem;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  will-change: transform;
}
.lc-msg time {
  display: block;
  opacity: .65;
  font-size: .72rem;
  margin-top: .25rem;
}

/* User/Agent/System variants */
.lc--user {
  margin-left: auto;
  background: #e8f0ff;
  border-color: #c7d2fe;
}
[data-theme="dark"] .lc--user {
  background: #122033;
  border-color: #334155;
}
.lc--agent {
  margin-right: auto;
  background: #f9fafb;
}
[data-theme="dark"] .lc--agent { background: #0b1220; }
.lc--sys {
  margin: 0 auto;
  font-size: .82rem;
  opacity: .9;
  background: transparent;
  border: 0;
}

/* Optional pending state */
.lc-msg[data-pending="true"] { opacity: .7; }

.lc-inputbar {
  border-top: 1px solid var(--lc-border);
  padding: .6rem .6rem calc(.6rem + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  background: var(--lc-surface);
  backdrop-filter: blur(2px) saturate(1.1);

  /* Keyboard lift (VisualViewport-driven) */
  transform: translateY(calc(-1 * var(--lc-kb, 0px)));
  will-change: transform;

  /* NEW: center children vertically */
  align-items: center; /* <-- add this */
}

.lc-textarea {
  border: 1px solid var(--lc-border);
  background: var(--lc-surface);
  color: inherit;
  border-radius: 12px;
  padding: .68rem .78rem;
  min-height: 44px;
  max-height: 160px;
  resize: none;
  font-size: .95rem;
}
.lc-textarea:focus-visible { outline: 2px solid rgba(37,99,235,.35); outline-offset: 2px; }

.lc-send {
  border: 0;
  border-radius: 12px;
  padding: 0 1rem;
  background: var(--lc-accent);
  color: var(--lc-accent-contrast);
  font-weight: 700;
  cursor: pointer;
  min-width: 108px;
  height: 44px;
  touch-action: manipulation;
}
.lc-send:hover { filter: brightness(0.985); }
.lc-send:active { transform: translateY(1px); }
.lc-send:disabled { opacity: .6; cursor: not-allowed; }

/* ---------------------- HELP VIEW ---------------------- */
.lc-help {
  display: grid;
  gap: .75rem;
  padding: .9rem;
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
.lc-help .lc-card {
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  padding: .75rem .85rem;
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}
.lc-help .lc-cta {
  display: grid;
  gap: .5rem;
}
.lc-help .lc-cta a,
.lc-help .lc-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--lc-border);
  background: var(--lc-surface);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.lc-help details {
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  padding: .5rem .75rem;
  background: var(--lc-surface);
}
.lc-help summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--lc-text);
}
.lc-help summary::-webkit-details-marker { display: none; }
.lc-help details > div {
  padding-top: .5rem;
  color: var(--lc-muted);
  font-size: .95rem;
}

/* ---------------------- Mobile: full-screen overlay ---------------------- */
@media (max-width: 768px) {
  .lc-panel {
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: calc(var(--lc-fvh) * 100); /* stable JS-updated height */
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .lc-header { padding: calc(env(safe-area-inset-top) + .6rem) .9rem .7rem; }
  .lc-send { min-width: 92px; }
  .lc-messages { padding: .65rem .6rem .2rem; }
  /* When full-screen, the scrim is redundant */
  .lc-scrim.show { background: rgba(0,0,0,0); }
}

/* ---------------------- Reduced motion ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .lc-btn,
  .lc-attn,
  .lc-panel,
  .lc-scrim {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------- High contrast support ---------------------- */
@media (prefers-contrast: more) {
  .lc-send,
  .lc-textarea:focus-visible,
  .lc-iconbtn:focus-visible {
    outline-width: 3px;
  }
}

/* ---------------------- Nice scrollbars (opt-in browsers) ---------------------- */
.lc-messages::-webkit-scrollbar { width: 10px; }
.lc-messages::-webkit-scrollbar-track { background: transparent; }
.lc-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; }
[data-theme="dark"] .lc-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); }

/* Mobile back/close button */
.lc-back { display: none; margin-right: .25rem; }
.lc-back svg { width: 22px; height: 22px; }

/* On mobile: full-screen header shows a back/close; hide desktop actions */
@media (max-width: 768px) {
  .lc-back { display: inline-flex; }
  .lc-actions { display: none; }
}
/* ===== 2.4.2 — Mobile full-screen width overflow hard fix ===== */

/* Prevent page-level horizontal scroll while the chat is open (iOS Safari) */
html.lc-open { overflow-x: hidden; }

/* On some mobiles, 100vw > viewport width. Use 100% with inset edges. */
@media (max-width: 768px) {
  .lc-panel {
    /* override earlier width: 100vw; */
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    left: 0; right: 0; /* belt & suspenders against subpixel rounding */
    overflow-x: clip;  /* clip any fractional overflow from children */
  }
}

/* Keep the whole widget from ever creating a horizontal scroll track */
.lc-mount,
.lc-panel,
.lc-chat { max-inline-size: 100%; overflow-x: hidden; }
/* ===== 2.4.3 — iOS Safari input zoom prevention (mobile) ===== */
/* Ensure interactive controls are >= 16px so iOS won't auto-zoom on focus */
@media (max-width: 768px), (pointer: coarse) {
  .lc-field input,
  .lc-field textarea,
  .lc-textarea {
    font-size: 16px !important; /* >=16px prevents focus-zoom */
    line-height: 1.25;          /* keeps height pleasant at 16px */
  }
}
.lc-btn {
  background: linear-gradient(135deg, #10b981 0%, #2563eb 100%);
  }

  /* === LIVE-CHAT.CSS — ADD: keyboard-open transition guard & compositor hints === */

/* Prevent janky animations while the keyboard animates */
.lc-panel.lc-kb-open,
.lc-panel.lc-kb-open * {
  transition: none !important;
}

/* Promote input bar & messages to their own layers (smoother while kb opens) */
.lc-inputbar {
  transform: translateY(calc(-1 * var(--lc-kb, 0px))) translateZ(0);
  backface-visibility: hidden;
}
.lc-messages {
  transform: translateZ(0);
  contain: content;
}