/* ==========================================================================
   AIO Vend – Live Chat widget (scoped .lc-*)
   Mobile-first, full-screen on phones, accessible, GPU-friendly animations.
   Pre-chat → Live chat + Help tab. Safe-area + dvh/svh + JS fvh support.
   Zero layout-jank: stable scrollbars, fixed overlay, content-visibility.
   2.5.0 (mobile polish): Bulletproof header-at-top, overflow containment,
   grid rows lock, safe-area padding, maintenance “Tip:” non-overlap.
   ========================================================================== */

/* ---------------------- Global layout stability ---------------------- */
html { scrollbar-gutter: stable both-edges; }
html.lc-open { overflow-x: hidden; } /* prevent page-level horizontal scroll on iOS */

.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 may set --lc-fvh for stable mobile height */
  --lc-vh: 1vh;
  --lc-fvh: 1vh;

  /* Runtime-computed input bar height (kept fresh by JS) */
  --lc-input-h: 64px;

  /* Keyboard inset (set by JS via --lc-kb) */
  --lc-kb: 0px;
}
@supports (height: 100dvh){ :root{ --lc-vh: 1dvh; } }
@supports (height: 100svh){ :root{ --lc-vh: 1svh; } }

@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; JS adds body padding to avoid layout shift */
body.lc-open{
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

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

.lc-btn{
  position: relative; /* for maintenance badge */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10b981 0%, #2563eb 100%);
  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); } }

/* Launcher maintenance badge */
.lc-badge.lc-badge--maint{
  position: absolute;
  top: -8px; right: -6px;
  font-size: 10px; line-height: 1;
  padding: .25rem .4rem;
  border-radius: 999px;
  background: #f59e0b; color: #111827;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* ---------------------- 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);

  /* Bulletproof: grid rows prevent header being pushed to bottom */
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: stretch;
  justify-content: stretch;

  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;
}
.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;
}

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

/* ---------------------- Header ---------------------- */
.lc-header{
  grid-row: 1;
   top: 0; z-index: 10;
  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);
  inset-block-end: auto; /* guard against bottom:0 overrides */
}
.lc-title{
  display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1rem;
  min-height: 36px;
}
.lc-title span{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.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; align-items: center; justify-self: end; }
.lc-iconbtn{
  appearance: none; background: transparent; border: 0; color: inherit;
  cursor: pointer; width: 36px; height: 36px; border-radius: 10px; font-size: 18px;
  touch-action: manipulation; display:inline-flex; align-items:center; justify-content:center;
}
.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; }

/* Mobile back button default hidden on desktop; we’ll show via media query */
.lc-back{ display: none; margin-right: .25rem; }
.lc-back svg{ width: 22px; height: 22px; }

/* 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{
  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{
  grid-row: 2;
  display: grid; gap: .7rem; padding: .9rem;
  content-visibility: auto; contain-intrinsic-size: 800px;
  overflow: hidden auto;
}
.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{
  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{
  grid-row: 2;
  display: grid; grid-template-rows: 1fr auto;
  min-height: 0; height: 100%; flex: 1 1 auto;
  content-visibility: auto; contain-intrinsic-size: 1200px;
  overflow: hidden;
}

/* 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;
  transform: translateZ(0);
  /* Ensure last message isn't obscured by input 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; }

/* 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;
}
.lc-msg[data-pending="true"]{ opacity:.7; }

/* Input bar */
.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; align-items: center;
  background: var(--lc-surface); backdrop-filter: blur(2px) saturate(1.1);
  transform: translateY(calc(-1 * var(--lc-kb, 0px))) translateZ(0);
  will-change: transform; backface-visibility: hidden;
}
.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{
  grid-row: 2;
  display: grid; gap:.75rem; padding:.9rem;
  content-visibility: auto; contain-intrinsic-size: 800px;
  overflow: hidden auto;
}
.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;
    width: 100%; inline-size: 100%; max-width: 100%; max-inline-size: 100%;
    height: calc(var(--lc-fvh) * 100); max-height: calc(var(--lc-fvh) * 100);
    border-radius: 0; border: 0; box-shadow: none;

    /* guard against fractional vw spill & rogue horizontal scroll */
    overflow-x: clip;
    overflow-y: hidden; /* content sections scroll internally */
  }

  .lc-header{
    top: 0; z-index: 15;
    padding: calc(env(safe-area-inset-top) + .6rem) .9rem .7rem;
    inset-block-end: auto; /* ensure header cannot pin to bottom */
  }

  .lc-title{
    position: relative; display: flex; align-items: center; gap: .6rem;
    padding-left: 48px; /* room for 40px back button */
  }
  .lc-back{
    display: inline-flex;
    position: absolute;
    left: max(.25rem, env(safe-area-inset-left));
    top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 12px;
    align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--lc-surface), #000 6%);
    border: 1px solid color-mix(in oklab, var(--lc-border), #000 8%);
    box-shadow: 0 6px 22px rgba(0,0,0,.12);
    backdrop-filter: saturate(1.2) blur(4px);
    z-index: 16; /* above title text */
  }
  .lc-back svg{ width: 20px; height: 20px; }
  .lc-back:hover{ filter: brightness(.98); }
  .lc-back:focus-visible{ outline: 2px solid rgba(37,99,235,.35); outline-offset: 2px; }
  [data-theme="dark"] .lc-back{
    background: color-mix(in oklab, var(--lc-surface), #fff 6%);
    border-color: color-mix(in oklab, var(--lc-border), #fff 10%);
  }

  .lc-actions{ display: none; }             /* hide desktop actions */
  .lc-send{ min-width: 92px; }
  .lc-messages{ padding:.65rem .6rem .2rem; }
  .lc-scrim.show{ background: rgba(0,0,0,0); } /* redundant when full-screen */

  /* Ensure non-chat sections scroll safely below sticky header */
  .lc-prechat,
  .lc-help{
    padding-bottom: max(.9rem, env(safe-area-inset-bottom));
  }
}

/* ---------------------- Reduced motion / High contrast ---------------------- */
@media (prefers-reduced-motion: reduce){
  .lc-btn, .lc-attn, .lc-panel, .lc-scrim{ animation: none !important; transition: none !important; }
}
@media (prefers-contrast: more){
  .lc-send,
  .lc-textarea:focus-visible,
  .lc-iconbtn:focus-visible{ outline-width: 3px; }
}

/* ---------------------- Nice scrollbars (opt-in) ---------------------- */
.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); }

/* ---------------------- iOS Safari input zoom prevention ---------------------- */
@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;
  }
}

/* ---------------------- Horizontal spill guards ---------------------- */
.lc-mount, .lc-panel, .lc-chat{ max-inline-size: 100%; overflow-x: hidden; }

/* =======================================================================
   Maintenance View (mobile-safe, non-overlapping tip)
   ======================================================================= */

/* Hide chat/prechat during maintenance */
.lc-panel.is-maintenance .lc-tabs [aria-controls="lcChat"]{ pointer-events: none; opacity:.5; }
.lc-panel.is-maintenance .lc-prechat,
.lc-panel.is-maintenance .lc-chat{ display: none !important; }

/* Base maintenance UI */
.lc-maintenance{ 
  grid-row: 2;
  display: grid; gap:.85rem; padding:.95rem; 
  overflow: hidden auto;
  /* Reserve space so the “Tip:” cannot be overlapped by header/keyboard */
  padding-bottom: calc(.95rem + env(safe-area-inset-bottom) + var(--lc-kb, 0px));
}
.lc-maint-head{
  display: grid; grid-template-columns: auto 1fr; gap:.7rem; align-items: center;
}
.lc-maint-icon{
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background:#fff7ed; border: 1px solid #fed7aa; font-size: 20px;
}
[data-theme="dark"] .lc-maint-icon{ background:#1f2937; border-color:#374151; }
.lc-maint-sub{ margin: 0; color: var(--lc-muted); font-size:.92rem; }
.lc-maint-points{ margin:.25rem 0 0; padding-left: 1rem; color: var(--lc-text); }

.lc-maint-card{
  border: 1px solid var(--lc-border); border-radius: 14px;
  padding:.8rem .9rem; background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
  display: grid; gap:.55rem;
}
.lc-maint-row{
  display: grid; grid-template-columns: 120px 1fr; gap:.6rem; align-items: center; font-size:.95rem;
}
.lc-maint-link{ text-decoration: none; font-weight: 700; color: var(--lc-text); }
.lc-maint-link:hover{ text-decoration: underline; }

.lc-maint-actions{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.5rem; align-items: stretch;
}
.lc-cta{
  display: inline-flex; align-items: center; justify-content: center;
  padding:.6rem .8rem; border-radius: 12px; border: 1px solid var(--lc-border);
  background: var(--lc-accent); color: var(--lc-accent-contrast);
  font-weight: 700; text-decoration: none;
}
.lc-cta:hover{ filter: brightness(.98); }
.lc-cta--ghost{ background: var(--lc-surface); color: inherit; }
.lc-maint-footnote{ color: var(--lc-muted); font-size:.86rem; }

/* Make maintenance section flex and scroll cleanly in panel */
.lc-panel.is-maintenance{ display: grid; grid-template-rows: auto 1fr; }
.lc-panel.is-maintenance .lc-maintenance{
  min-height: 0;
  overscroll-behavior: contain;
}

/* Responsive refinements + truncation guards */
.lc-panel.is-maintenance .lc-maintenance{
  grid-template-rows: auto auto auto auto auto; /* head, points, card, actions, note */
  gap:.8rem; padding:.85rem .9rem;
}
.lc-panel.is-maintenance .lc-maint-head h2{ font-size: clamp(.98rem, 2.5vw, 1.05rem); margin: 0; }
.lc-panel.is-maintenance .lc-maint-sub{ font-size: clamp(.84rem, 2.2vw, .92rem); }
.lc-panel.is-maintenance .lc-maint-points{ font-size: clamp(.85rem, 2.4vw, .95rem); }

.lc-panel.is-maintenance .lc-maint-card{ padding:.75rem .8rem; gap:.55rem; border-radius: 12px; }
.lc-panel.is-maintenance .lc-maint-row{ grid-template-columns: 108px 1fr; gap:.55rem; align-items: center; }

.lc-panel.is-maintenance .lc-maint-actions .lc-cta{
  width: 100%; min-height: 44px; height: 100%;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1; font-size: clamp(.9rem, 2.4vw, .95rem);
}
.lc-panel.is-maintenance .lc-maint-link{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Narrow layouts */
@media (max-width: 480px){
  .lc-panel.is-maintenance .lc-maint-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .lc-panel.is-maintenance .lc-maint-row{ grid-template-columns: 1fr; gap:.35rem; }
  .lc-panel.is-maintenance .lc-maint-card{ padding:.65rem .7rem; }
}
@media (max-width: 360px){
  .lc-panel.is-maintenance .lc-maint-actions{ grid-template-columns: 1fr; }
}
@media (max-width: 330px){
  .lc-panel.is-maintenance .lc-maint-actions{ grid-template-columns: 1fr; }
}

/* Use full available height on mobile maintenance */
@media (max-width: 768px){
  .lc-panel.is-maintenance{
    height: calc(var(--lc-fvh) * 100); max-height: calc(var(--lc-fvh) * 100); overflow: clip;
  }
}

/* Disabled tab style */
.lc-tab[disabled], .lc-tab[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

/* ==========================================================================
   Live Chat — Bottom actions fit & polish (scoped to widget root)
   ========================================================================== */

/* Global containment guards (no horizontal overflow) */
#liveChatWidget .lc-chat,
#liveChatWidget .lc-inputbar{ overflow: clip !important; }
#liveChatWidget .lc-inputbar > *{ min-width: 0; } /* allow Send + textarea to share space */

/* Back button: always visible on mobile */
#liveChatWidget .lc-back{
  display: inline-flex !important;
  z-index: 16;
}
@media (min-width: 769px){
  /* add left inset so title doesn't collide with the back button on desktop */
  #liveChatWidget .lc-title{ padding-left: 48px !important; }
}

/* Input bar (bottom) alignment & sizing */
#liveChatWidget .lc-inputbar{
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: .5rem !important;
}

/* Send button polish */
#liveChatWidget .lc-send{
  min-width: auto !important;
  inline-size: auto !important;
  max-inline-size: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-self: end;
  line-height: 1 !important;
  height: 40px !important;
  padding: 0 .9rem !important;
  border-radius: 12px !important;
}

/* Desktop tweaks for longer locales */
@media (min-width: 769px){
  #liveChatWidget .lc-textarea{ font-size: .92rem !important; line-height: 1.28 !important; }
  #liveChatWidget .lc-send{ font-size: .92rem !important; letter-spacing: .01em; }
  #liveChatWidget .lc-messages{ padding-bottom: .35rem !important; }
  #liveChatWidget .lc-inputbar{ padding-top: .55rem !important; padding-bottom: .55rem !important; }
}

/* Tiny widths */
@media (max-width: 380px){
  #liveChatWidget .lc-send{
    font-size: .9rem !important;
    padding-inline: .75rem !important;
  }
}

/* Crisp launcher icon */
#liveChatWidget .lc-btn svg{ width: 22px; height: 22px; }

/* Unify icon hit-areas */
#liveChatWidget .lc-iconbtn,
#liveChatWidget .lc-back,
#liveChatWidget #lcCloseBtn,
#liveChatWidget #lcMinBtn{
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Header always on top in row 1; neutralize rogue bottom pinning */
#liveChatWidget #lcPanel{
  display: grid !important;
  grid-template-rows: auto 1fr !important; /* header, then scrollable content */
  grid-auto-rows: minmax(0, auto) !important;
  align-content: stretch !important;
  justify-content: stretch !important;
  height: auto;
}
#liveChatWidget #lcPanel > .lc-header{
  grid-row: 1 !important;
  top: 0 !important;
  bottom: auto !important;
  inset-block-start: 0 !important;
  inset-block-end: auto !important;
  z-index: 15 !important;
  width: 100% !important;
  margin: 0 !important;
}
#liveChatWidget #lcPanel > :not(.lc-header){
  grid-row: 2 !important;
  min-height: 0 !important;           /* allows inner scrolling without fighting sticky */
  overflow: hidden auto !important;
}

/* Title cluster + actions alignment */
#liveChatWidget .lc-title{
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
}
#liveChatWidget .lc-actions{
  display: inline-flex !important;
  gap: .25rem !important;
  align-items: center !important;
  justify-self: end !important;
}

/* Back button placement: inline on desktop, absolute on mobile */
@media (min-width: 769px){
  #liveChatWidget .lc-back{ position: static !important; transform: none !important; margin-left: -4px; }
  #liveChatWidget .lc-title{ padding-left: 0 !important; }
}
@media (max-width: 768px){
  #liveChatWidget .lc-title{ padding-left: 48px !important; } /* space for back */
  #liveChatWidget .lc-back{
    position: absolute !important;
    left: max(.25rem, env(safe-area-inset-left)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* Visual polish for header buttons */
#liveChatWidget .lc-iconbtn:hover,
#liveChatWidget .lc-back:hover{ background: rgba(0,0,0,.06) !important; }
[data-theme="dark"] #liveChatWidget .lc-iconbtn:hover,
[data-theme="dark"] #liveChatWidget .lc-back:hover{ background: rgba(255,255,255,.06) !important; }
#liveChatWidget .lc-iconbtn:focus-visible,
#liveChatWidget .lc-back:focus-visible{
  outline: 2px solid rgba(37,99,235,.35) !important;
  outline-offset: 2px !important;
}

/* Extra safety: prevent any rogue styles from reordering children */
#liveChatWidget .lc-header ~ *{ order: initial !important; }

/* Final horizontal spill guards */
#liveChatWidget, #liveChatWidget *{
  max-width: 100%;
}

/* Maintenance actions — fix overflow on long labels like “Book a 15-min Intro” */
#liveChatWidget .lc-panel.is-maintenance .lc-maint-actions .lc-cta{
  /* allow wrapping instead of forcing a single line */
  white-space: normal !important;
  text-align: center !important;
  text-wrap: balance;
  word-break: break-word;
  hyphens: auto;

  /* smaller, responsive type + comfy multi-line height */
  font-size: clamp(.74rem, 2vw, .86rem) !important;
  line-height: 1.2 !important;

  /* tighter padding so three buttons fit cleanly */
  padding: .55rem .6rem !important;

  /* let height grow for 2 lines without clipping */
  min-height: 44px !important;
  height: auto !important;

  /* no ellipsis clipping on wrapped text */
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Slightly reduce spacing between buttons to prevent squeeze */
#liveChatWidget .lc-panel.is-maintenance .lc-maint-actions{
  gap: .45rem !important;
}

/* Extra-small widths: shrink type a touch more */
@media (max-width: 380px){
  #liveChatWidget .lc-panel.is-maintenance .lc-maint-actions .lc-cta{
    font-size: clamp(.7rem, 3.2vw, .82rem) !important;
  }
}


/* === LIVE-CHAT.CSS — ADD: Online badge + button elegance === */

/* Launcher online badge */
.lc-badge.lc-badge--online{
  position: absolute;
  top: -8px; right: -6px;
  font-size: 10px; line-height: 1;
  padding: .25rem .45rem;
  border-radius: 999px;
  background: #10b981; /* emerald */
  color: #052e1b;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(16,185,129,.35);
}

/* Optional: give the launcher a soft, elegant “online” glow */
.lc-btn--online{
  box-shadow: 0 14px 44px rgba(16,185,129,.32), var(--lc-shadow);
  animation: lcGlow 2.8s ease-in-out infinite;
}
@keyframes lcGlow{
  0%,100%{ filter: brightness(1); transform: translateY(0); }
  50%{ filter: brightness(1.05); transform: translateY(-1px); }
}

/* (Optional) a slightly warmer maintenance button treatment */
.lc-btn--maint{
  box-shadow: 0 14px 44px rgba(245,158,11,.28), var(--lc-shadow);
}
/* Badges never wrap on the launcher; keep crisp & compact */
.lc-badge { white-space: nowrap; }

/* Keep the launcher badges tidy on ultra-small screens */
.lc-badge.lc-badge--maint abbr { text-decoration: none; } /* no underline on tooltips */
.lc-badge.lc-badge--maint,
.lc-badge.lc-badge--online{
  /* Slightly flexible type that still stays elegant */
  font-size: clamp(9px, 2.3vw, 10px);
  line-height: 1;
}