/* ===========================================================================
   live-chat.css — the customer chat widget (CR-9, slice 2)
   ===========================================================================
   SELF-CONTAINED, for the same reason site-footer.css is. The widget renders on
   the landing page (main.css), on the service and content pages
   (service-page.css) and inside the Account Center (account-center.css). Those
   three do not share a token set, so this file declares its own `--lc-*` and
   reads nothing from any of them. Drop the <link> on any page and the widget
   looks the same there.

   IT ALSO RENDERS IN TWO PLACES AT ONCE, CONCEPTUALLY: floating over a page,
   and docked inside Support Center. That is one component with a modifier
   (`.lc-docked`), never two implementations — the brief asks for the same chat
   in both, and two copies would drift within a release.

   Dark mode follows the site's existing `data-theme` attribute plus the OS
   preference, using the same guarded pattern service-page.css uses, so the
   widget matches whichever page it is sitting on.
   =========================================================================== */

.lc-root {
  --lc-navy:      #0A2540;
  --lc-accent:    var(--coral, #E9B949);
  --lc-accent-dk: var(--coral-dark, #D9A32C);
  --lc-gold:      var(--gold, #E9B949);
  --lc-surface:   #FFFFFF;
  --lc-surface-2: #F1F5F9;
  --lc-ink:       #0A2540;
  --lc-muted:     #5B6B82;
  --lc-line:      rgba(10,37,64,.12);
  --lc-bubble-in: #F1F5F9;
  --lc-shadow:    0 24px 60px -20px rgba(10,37,64,.45);
  --lc-radius:    18px;
  --lc-ff: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  font-family: var(--lc-ff);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lc-root {
    --lc-surface:   #131C2E;
    --lc-surface-2: #1A2439;
    --lc-ink:       #E8EEF7;
    --lc-muted:     #93A3BA;
    --lc-line:      rgba(232,238,247,.16);
    --lc-bubble-in: #1A2439;
  }
}
:root[data-theme="dark"] .lc-root {
  --lc-surface:   #131C2E;
  --lc-surface-2: #1A2439;
  --lc-ink:       #E8EEF7;
  --lc-muted:     #93A3BA;
  --lc-line:      rgba(232,238,247,.16);
  --lc-bubble-in: #1A2439;
}

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

/* DEFENSIVE RESET, AND IT IS NOT PARANOIA — IT IS A BUG THIS ALREADY HAD.
   The panel is a <section> and the composer is a <form>, and this widget renders
   on pages whose stylesheets it does not control. main.css carries
   `section { padding: 110px 0 }` for the landing page's layout bands, which
   silently applied to the panel: 110px of empty space above the header, in the
   floating widget and the docked one alike.

   So every bare element this component uses is neutralised here. Being
   self-contained means declaring what you are, not assuming nobody else has an
   opinion about `section`. */
.lc-root section,
.lc-root form,
.lc-root p,
.lc-root h2, .lc-root h3 { margin: 0; padding: 0; }

/* ---------------------------------------------------------------------------
   The launcher
   --------------------------------------------------------------------------- */
.lc-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lc-accent); color: #fff;
  border: none; cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(233,185,73,.6);
  transition: transform .2s ease, background .2s ease;
}
.lc-launcher:hover { background: var(--lc-accent-dk); transform: translateY(-2px); }
.lc-launcher:focus-visible { outline: 3px solid var(--lc-gold); outline-offset: 3px; }
.lc-launcher svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Hidden while the panel is open: the panel has its own close control, and two
   ways to dismiss one thing in the same corner is one too many. */
.lc-root.lc-open .lc-launcher { display: none; }

.lc-badge {
  position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 11px;
  background: var(--lc-gold); color: var(--lc-navy);
  font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
  border: 2px solid var(--lc-surface);
}

/* ---------------------------------------------------------------------------
   The panel
   --------------------------------------------------------------------------- */
.lc-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 901;
  width: 388px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--lc-surface); color: var(--lc-ink);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-radius);
  box-shadow: var(--lc-shadow);
}
.lc-panel[hidden] { display: none; }

/* Docked in Support Center: the same panel, unpinned from the corner and
   sized by its container. Every rule below this line is shared. */
.lc-docked .lc-panel {
  position: static; width: 100%; max-width: none;
  height: min(620px, 70vh); box-shadow: none;
}
.lc-docked .lc-launcher { display: none; }

.lc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; flex: none;
  background: var(--lc-navy); color: #fff;
}
.lc-head-mark {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: var(--lc-gold);
  font-weight: 800; font-size: 15px;
}
.lc-head-text { flex: 1; min-width: 0; }
.lc-head-title { font-size: 15px; font-weight: 800; line-height: 1.3; }
.lc-head-sub { font-size: 12.5px; color: rgba(255,255,255,.72); line-height: 1.4; }
.lc-head-close {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: transparent; border: none; color: #fff; cursor: pointer;
}
.lc-head-close:hover { background: rgba(255,255,255,.14); }
.lc-head-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* ---------------------------------------------------------------------------
   The thread
   --------------------------------------------------------------------------- */
.lc-thread {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  background: var(--lc-surface);
  /* overscroll-behavior: contain — without it, reaching the top of the thread
     starts scrolling the PAGE behind the widget, which on a phone reads as the
     chat having thrown the reader out. */
  overscroll-behavior: contain;
}

.lc-msg { display: flex; flex-direction: column; max-width: 82%; }
.lc-msg-in  { align-self: flex-start; }
.lc-msg-out { align-self: flex-end; align-items: flex-end; }

.lc-bubble {
  padding: 10px 14px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.5;
  /* The one rule that makes a chat bubble a chat bubble: honour the newlines
     the customer typed, and break a pasted booking reference rather than
     letting it push the panel wide. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.lc-msg-in .lc-bubble {
  background: var(--lc-bubble-in); color: var(--lc-ink);
  border-bottom-left-radius: 5px;
}
.lc-msg-out .lc-bubble {
  background: var(--lc-navy); color: #fff;
  border-bottom-right-radius: 5px;
}
.lc-msg-deleted .lc-bubble {
  background: transparent; color: var(--lc-muted);
  border: 1px dashed var(--lc-line); font-style: italic;
}

.lc-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 0 4px;
  font-size: 11.5px; color: var(--lc-muted);
}
.lc-sender { font-weight: 700; }
.lc-receipt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.lc-receipt-read { color: var(--lc-accent); }

/* A system event — assigned, resolved, closed. Centred and quiet: it is
   context, not something anyone said. */
.lc-system {
  align-self: center; max-width: 90%;
  padding: 6px 14px; border-radius: 999px;
  background: var(--lc-surface-2); color: var(--lc-muted);
  font-size: 12px; text-align: center;
}

/* Pending: shown immediately on send, before the server has confirmed. The
   message must appear the instant it is sent — waiting for a round trip makes
   a chat feel broken on a slow connection — so it renders at reduced opacity
   and is reconciled when the id comes back. */
.lc-msg-pending .lc-bubble { opacity: .6; }
.lc-msg-failed .lc-bubble { opacity: 1; border: 1px solid var(--lc-accent); }
.lc-retry {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--lc-accent); font: inherit; font-size: 11.5px; font-weight: 700;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   States
   --------------------------------------------------------------------------- */
.lc-state {
  margin: auto; padding: 28px 20px; text-align: center; color: var(--lc-muted);
  font-size: 14px; line-height: 1.6;
}
.lc-state-title { color: var(--lc-ink); font-weight: 800; font-size: 15.5px; margin-bottom: 6px; }
.lc-state .lc-retry { margin-top: 10px; display: inline-block; }

/* The skeleton is three bubbles, not a spinner: it says "messages are coming"
   rather than "something is happening". */
.lc-skel { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.lc-skel-row { height: 38px; border-radius: 16px; background: var(--lc-surface-2); max-width: 70%; }
.lc-skel-row:nth-child(2) { align-self: flex-end; max-width: 55%; }
.lc-skel-row:nth-child(3) { max-width: 62%; }
@media (prefers-reduced-motion: no-preference) {
  .lc-skel-row { animation: lc-pulse 1.4s ease-in-out infinite; }
  @keyframes lc-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
}

.lc-banner {
  flex: none; padding: 9px 16px; font-size: 12.5px; text-align: center;
  background: var(--lc-gold); color: var(--lc-navy); font-weight: 700;
}

/* ---------------------------------------------------------------------------
   The composer
   --------------------------------------------------------------------------- */
.lc-composer {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px; border-top: 1px solid var(--lc-line);
  background: var(--lc-surface);
}
.lc-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--lc-line); border-radius: 14px;
  padding: 11px 14px; resize: none; max-height: 132px;
  background: var(--lc-surface-2); color: var(--lc-ink);
  font-family: inherit;
  /* 16px MINIMUM, and it is not a style choice: iOS Safari zooms the whole
     page when a focused input is below 16px, and the reader then has to pinch
     back out to see the conversation. tests/verify_responsive.py checks this
     across the site for the same reason. */
  font-size: 16px; line-height: 1.45;
}
.lc-input::placeholder { color: var(--lc-muted); }
.lc-input:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: 1px; }

.lc-send {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lc-accent); color: #fff; border: none; cursor: pointer;
  transition: background .18s ease;
}
.lc-send:hover:not(:disabled) { background: var(--lc-accent-dk); }
.lc-send:disabled { opacity: .45; cursor: default; }
.lc-send:focus-visible { outline: 3px solid var(--lc-gold); outline-offset: 2px; }
.lc-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }

/* The two composer tools. Deliberately not styled like the send button: send is
   the one action with a colour, and giving attach and emoji the same weight
   would make the composer read as three equal choices. */
.lc-tool {
  flex: none; width: 36px; height: 36px; margin-bottom: 4px;
  border: none; border-radius: 50%; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--lc-muted);
  transition: background .16s ease, color .16s ease;
}
.lc-tool:hover { background: var(--lc-surface-2); color: var(--lc-ink); }
.lc-tool:focus-visible { outline: 3px solid var(--lc-gold); outline-offset: 2px; }
.lc-tool svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   The emoji tray
   ---------------------------------------------------------------------------
   Sits above the composer inside the panel rather than floating over the
   thread: a popover anchored to a button inside a fixed-position panel has to
   be repositioned on every resize, and on a phone it lands off-screen. A strip
   that pushes nothing and scrolls itself has none of those problems. */
.lc-emoji-tray {
  flex: none;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-height: 132px; overflow-y: auto;
  padding: 8px 10px;
  border-top: 1px solid var(--lc-line);
  background: var(--lc-surface-2);
}
.lc-emoji {
  border: none; background: none; cursor: pointer;
  padding: 4px 0; border-radius: 8px;
  font-size: 20px; line-height: 1.25;
}
.lc-emoji:hover { background: var(--lc-line); }
.lc-emoji:focus-visible { outline: 2px solid var(--lc-gold); outline-offset: -2px; }

/* ---------------------------------------------------------------------------
   Attachments
   --------------------------------------------------------------------------- */
/* A bubble holding a file loses the text padding: a photo must reach the
   bubble's edges, and a caption under it supplies its own. */
.lc-bubble-file { padding: 4px; }
.lc-bubble-file .lc-text { padding: 4px 10px 6px; }

.lc-photo {
  display: block; overflow: hidden; border-radius: 13px; cursor: pointer;
  background: var(--lc-line);
  /* A minimum height so the bubble does not collapse to nothing while the
     blob is still being fetched and then jump when the image lands. */
  min-height: 90px;
}
.lc-photo img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.lc-photo-failed {
  min-height: 0; padding: 10px 12px;
  font-size: 12.5px; color: var(--lc-muted);
}
.lc-photo-failed img { display: none; }

.lc-file {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 13px;
  background: rgba(255,255,255,.14); color: inherit; text-decoration: none;
}
.lc-msg-in .lc-file { background: rgba(10,37,64,.06); }
.lc-file:hover { filter: brightness(1.08); }
.lc-file:focus-visible { outline: 2px solid var(--lc-gold); outline-offset: 2px; }
.lc-file-icon {
  flex: none; width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.lc-file-meta { display: flex; flex-direction: column; min-width: 0; }
.lc-file-name {
  font-size: 13.5px; font-weight: 700;
  /* One line, clipped. A 200-character filename is the customer's, not ours,
     and letting it wrap turns a bubble into a paragraph. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.lc-file-size { font-size: 11.5px; opacity: .75; }

/* An indeterminate bar, because a fetch() upload reports no progress. Saying
   "62%" without knowing would be a lie; a moving bar only claims that
   something is happening, which is true. */
.lc-progress {
  height: 3px; margin: 6px 6px 3px;
  border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden;
}
.lc-msg-in .lc-progress { background: var(--lc-line); }
.lc-progress i { display: block; height: 100%; width: 40%; background: var(--lc-gold); }
@media (prefers-reduced-motion: no-preference) {
  .lc-progress i { animation: lc-slide 1.1s ease-in-out infinite; }
  @keyframes lc-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
  }
}

/* Drag-and-drop. The whole panel is the target, not a zone inside the thread:
   a drop that misses a small target lands on the page and navigates the tab
   away from the conversation. */
.lc-dropping { outline: 2px dashed var(--lc-accent); outline-offset: -6px; }

.lc-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Phone
   ---------------------------------------------------------------------------
   A 388px panel pinned to a corner is a desktop idea. Below 640px it becomes a
   full-screen sheet, which is what every messaging app does and what a thumb
   expects. `100dvh` rather than `100vh` so the browser's collapsing address bar
   does not leave the composer under the viewport edge.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .lc-panel {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; max-width: none;
    height: 100dvh; max-height: 100dvh;
    border: none; border-radius: 0;
  }
  .lc-launcher { right: 16px; bottom: 16px; }
  .lc-docked .lc-panel { height: min(620px, 70vh); border-radius: var(--lc-radius); }
}

/* ---------------------------------------------------------------------------
   Typing indicator (slice 3)
   ---------------------------------------------------------------------------
   Three dots in an incoming bubble, so it occupies the space the reply will
   occupy and the thread does not jump when the real message replaces it.
   --------------------------------------------------------------------------- */
.lc-dots { display: inline-flex; align-items: center; gap: 4px; padding: 13px 16px; }
.lc-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lc-muted); display: block; opacity: .45;
}
@media (prefers-reduced-motion: no-preference) {
  .lc-dots i { animation: lc-typing 1.3s ease-in-out infinite; }
  .lc-dots i:nth-child(2) { animation-delay: .18s; }
  .lc-dots i:nth-child(3) { animation-delay: .36s; }
  @keyframes lc-typing {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
  }
}

/* ---------------------------------------------------------------------------
   Voice calling (CR-10)
   ---------------------------------------------------------------------------
   The call surface is a BANNER under the header, not a screen that replaces the
   thread. A call happens *about* a conversation: covering the messages means
   the customer cannot read the booking reference the agent just asked them for.
   Under the header rather than over the composer so it cannot be confused with
   something to type into, and so it matches where the agent console puts the
   same card. */
.lc-head-call {
  flex: none; width: 34px; height: 34px; margin-right: 2px;
  display: grid; place-items: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  transition: background .16s ease, transform .16s ease;
}
.lc-head-call:hover { background: rgba(255,255,255,.26); }
.lc-head-call:focus-visible { outline: 3px solid var(--lc-gold); outline-offset: 2px; }
.lc-head-call svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.lc-call {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 16px 16px;
  border-top: 1px solid var(--lc-line);
  background: var(--lc-navy); color: #fff;
}
.lc-call-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lc-gold); color: var(--lc-navy);
  font-weight: 800; font-size: 17px; letter-spacing: .04em;
}
.lc-call-title { font-weight: 800; font-size: 15px; }
.lc-call-status { font-size: 12.5px; opacity: .82; }
.lc-call-timer {
  /* Tabular figures so the seconds column does not jitter as digits change —
     a timer that shifts sideways every second reads as a glitch. */
  font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 700; letter-spacing: .02em;
}
.lc-call-note {
  max-width: 260px; text-align: center;
  font-size: 12px; line-height: 1.45; color: var(--lc-gold);
}

.lc-call-actions { display: flex; gap: 10px; margin-top: 8px; }
.lc-call-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px; border: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.16); color: #fff;
  transition: background .16s ease;
}
.lc-call-btn:hover { background: rgba(255,255,255,.26); }
.lc-call-btn:focus-visible { outline: 3px solid var(--lc-gold); outline-offset: 2px; }
.lc-call-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* End and Decline are the same colour because they are the same act from the
   customer's side: stop this call. Accept is the only green thing on screen,
   so it cannot be pressed by accident when Decline was meant. */
.lc-call-end, .lc-call-reject { background: var(--lc-accent); }
.lc-call-end:hover, .lc-call-reject:hover { background: var(--lc-accent-dk); }
.lc-call-accept { background: #12a150; }
.lc-call-accept:hover { background: #0e8543; }
.lc-call-mute.is-on { background: var(--lc-gold); color: var(--lc-navy); }

/* Once connected the panel shrinks: the call is running, and the thread
   matters more than a large status card the customer has already read. */
.lc-in-call .lc-call { padding: 12px 16px; }
.lc-in-call .lc-call-avatar { display: none; }
.lc-in-call .lc-call-title { font-size: 13.5px; }

@media (prefers-reduced-motion: no-preference) {
  .lc-call-avatar { animation: lc-pulse-ring 1.8s ease-in-out infinite; }
  .lc-in-call .lc-call-avatar { animation: none; }
  @keyframes lc-pulse-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,176,32,.55); }
    50%      { box-shadow: 0 0 0 12px rgba(255,176,32,0); }
  }
}

/* --------------------------------------------------------- recent calls --- */
.lc-calls {
  flex: none; max-height: 148px; overflow-y: auto;
  padding: 6px 10px 8px;
  border-top: 1px solid var(--lc-line);
  background: var(--lc-surface-2);
}
.lc-call-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; font-size: 12.5px; color: var(--lc-ink);
}
.lc-call-row + .lc-call-row { border-top: 1px solid var(--lc-line); }
.lc-call-row-icon {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--lc-muted);
}
/* A missed call is the one row in this list somebody needs to notice. */
.lc-call-missed .lc-call-row-icon,
.lc-call-failed .lc-call-row-icon { color: var(--lc-accent); }
.lc-call-row-meta { display: flex; flex-direction: column; min-width: 0; }
.lc-call-row-top { font-weight: 700; }
.lc-call-row-when { font-size: 11.5px; color: var(--lc-muted); }

/* [hidden] LOSES TO display:flex, AND THAT IS NOT A THEORETICAL PROBLEM.
   `.lc-call` and `.lc-call-actions` both set a display, which beats the
   browser's default `[hidden] { display: none }` — so the panel showed while
   hidden, and during a real call the "Accept / Decline" row and the
   "Mute / End" row appeared at the same time. Stated explicitly rather than
   fixed by swapping the JS to a class, because `hidden` is the correct
   attribute for this and every other toggle in the file already relies on it. */
.lc-call[hidden],
.lc-call-actions[hidden],
.lc-call-btn[hidden],
.lc-calls[hidden],
.lc-call-note[hidden],
.lc-call-timer[hidden],
/* THE LAUNCHER TOO — `display: grid` above, so [hidden] alone loses. This is
   the third element in this file to be caught by the same rule, which is two
   more than it should have taken: every one of them declares a display, so
   every one of them needs naming here. Anything given a display in this file
   and toggled with `hidden` belongs in this list. */
.lc-launcher[hidden] { display: none; }

/* The retry offered when the microphone was refused. Styled as the panel's
   existing retry affordance rather than a new kind of button — the brief asks
   for behaviour fixed, not a redesign. */
.lc-call-retry {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.lc-call-retry:hover { background: rgba(255,255,255,.12); }
.lc-call-retry:focus-visible { outline: 2px solid var(--lc-gold); outline-offset: 2px; }

/* The call button is hidden on the floating widget and shown once the panel is
   docked into Support Center. `.lc-head-call` sets a display, which beats the
   browser's default [hidden] rule — the same trap this file has hit twice. */
.lc-head-call[hidden] { display: none; }