/* ==========================================================================
   Live support — the floating bubble, the panel behind it, and the same
   conversation as a full page (/support/chat).

   Built on the storefront's own tokens (shop.css): flat surfaces, 1px borders,
   no gradients, light and dark from the same variables. The panel is a phone
   messenger on purpose — a title with a live dot, bubbles that lean left and
   right, a day separator, a typing indicator and a composer — because that is
   the one chat layout nobody has to learn. Under 560px it stops pretending and
   becomes the whole screen.
   ========================================================================== */

.lc { --lc-w: 390px; --lc-h: 620px; }

/* ── the bubble ─────────────────────────────────────────────────────────── */
.lc-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 88;
  width: 58px; height: 58px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .7), var(--shadow);
  transition: transform .2s var(--ease), background .2s;
}
.lc-fab:hover { background: var(--accent-hover); transform: translateY(-2px) scale(1.03); }
.lc-fab:active { transform: scale(.95); }
.lc-fab .ic { width: 24px; height: 24px; stroke-width: 2; }
.lc-fab-s, .lc-fab-c { display: grid; place-items: center; grid-area: 1 / 1; transition: opacity .18s, transform .22s var(--ease); }
.lc-fab-c { opacity: 0; transform: rotate(-90deg) scale(.7); }
.lc.open .lc-fab-s { opacity: 0; transform: rotate(90deg) scale(.7); }
.lc.open .lc-fab-c { opacity: 1; transform: none; }
.lc-fab .lc-dot { position: absolute; right: 2px; bottom: 2px; }
.lc-fab .lc-pip {
  position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 99px; background: var(--red); color: #fff; border: 2px solid var(--bg);
  font: 800 11px/17px var(--sans); text-align: center;
}
/* A gentle nudge, once, when a reply is waiting and the panel is shut. */
.lc.unseen:not(.open) .lc-fab { animation: lc-nudge 2.4s var(--ease) 1s 3; }
@keyframes lc-nudge {
  0%, 72%, 100% { transform: none; }
  78% { transform: translateY(-5px) rotate(-7deg); }
  86% { transform: translateY(-2px) rotate(5deg); }
  93% { transform: translateY(-1px) rotate(-2deg); }
}

/* the live dot — on / wait / off */
.lc-dot { width: 11px; height: 11px; border-radius: 99px; border: 2px solid var(--surface); background: var(--text-3); flex: none; }
.lc-dot.on { background: var(--green); box-shadow: 0 0 0 0 rgba(var(--green-rgb), .55); animation: lc-ping 2.1s var(--ease) infinite; }
.lc-dot.wait { background: var(--gold); }
.lc-dot.off { background: var(--text-3); }
@keyframes lc-ping {
  0% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), .5); }
  70% { box-shadow: 0 0 0 7px rgba(var(--green-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0); }
}

/* ── the panel ──────────────────────────────────────────────────────────── */
.lc-panel {
  position: fixed; right: 24px; bottom: 94px; z-index: 89;
  width: var(--lc-w); max-width: calc(100vw - 32px);
  height: var(--lc-h); max-height: calc(100vh - 140px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px;
  box-shadow: var(--shadow-lg);
  transform-origin: bottom right;
  animation: lc-in .24s var(--ease) both;
}
/* Nothing inside may push the panel sideways: a full-width button with a
   margin did exactly that and put a horizontal scrollbar under the chat. */
.lc-panel, .lc-pane, .lc-body, .lc-foot, .lc-start, .lc-mid { min-width: 0; max-width: 100%; }
.lc-panel * { max-width: 100%; }
.lc-pane, .lc-start, .lc-body { overflow-x: hidden; }
@keyframes lc-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.lc-panel[hidden] { display: none; }

/* ── the header, on either frame ────────────────────────────────────────── */
.lc-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.lc-av {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 99px;
  display: grid; place-items: center; overflow: visible;
  background: var(--accent); color: var(--on-accent); font: 800 16px var(--sans);
}
.lc-av img { width: 40px; height: 40px; border-radius: 99px; object-fit: cover; }
.lc-av .lc-dot { position: absolute; right: -1px; bottom: -1px; border-color: var(--surface-2); }
.lc-who { flex: 1; min-width: 0; }
.lc-who b { display: block; font: 700 14.5px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-who small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-acts { flex: none; display: flex; align-items: center; gap: 4px; }
.lc-code { font-size: 11.5px; color: var(--text-3); padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 99px; }
.lc-ib {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--text-2); cursor: pointer; transition: background .15s, color .15s;
}
.lc-ib:hover { background: var(--surface-3); color: var(--text); }
.lc-ib .ic { width: 17px; height: 17px; }

/* ── panes ──────────────────────────────────────────────────────────────── */
.lc-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.lc[data-view="signin"] .lc-pane[data-pane="signin"],
.lc[data-view="start"]  .lc-pane[data-pane="start"],
.lc[data-view="chat"]   .lc-pane[data-pane="chat"],
.lc[data-view="rate"]   .lc-pane[data-pane="rate"] { display: flex; }

.lc-mid { padding: 26px 22px; text-align: center; overflow-y: auto; }
.lc-mid.tight { padding: 20px 18px 8px; }
.lc-tile {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px;
  border-radius: 17px; background: rgba(var(--accent-rgb), .12); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .22);
}
.lc-tile.ok { background: rgba(var(--green-rgb), .12); color: var(--green); border-color: rgba(var(--green-rgb), .22); }
.lc-tile .ic { width: 25px; height: 25px; }
.lc-mid h3 { font: 760 18px/1.25 var(--sans); letter-spacing: -.02em; }
.lc-mid p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.lc-mid .btn { margin-top: 14px; }
.lc-alt { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.lc-hours { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--text-3); }

/* ── the start form ─────────────────────────────────────────────────────── */
/* Spacing lives on the form, never as a margin on a full-width child: that is
   what used to add 36px of width the panel could not hold. */
.lc-start { display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  padding: 0 18px 18px; gap: 12px; }
.lc-start > .lc-mid { padding-left: 0; padding-right: 0; }
.lc-ordernote {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .08);
  font-size: 12.5px; color: var(--text-2);
}
.lc-ordernote[hidden] { display: none; }
.lc-ordernote .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }
.lc-ordernote b { color: var(--text); font-family: var(--mono); font-size: 12px; }
.lc-subs { display: flex; flex-wrap: wrap; gap: 7px; }
.lc-sub { position: relative; cursor: pointer; }
.lc-sub input { position: absolute; opacity: 0; width: 0; height: 0; }
.lc-sub span {
  display: inline-block; padding: 7px 13px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  font: 600 12.5px var(--sans); color: var(--text-2); transition: all .15s;
}
.lc-sub:hover span { border-color: var(--line-3); color: var(--text); }
.lc-sub input:checked + span { background: rgba(var(--accent-rgb), .14); border-color: rgba(var(--accent-rgb), .45); color: var(--accent); }
.lc-sub input:focus-visible + span { box-shadow: var(--ring); }
.lc-pickorder { display: block; font-size: 12.5px; color: var(--text-3); }
.lc-pickorder select {
  margin-top: 6px; width: 100%; height: 42px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  font: 400 14px var(--sans);
}
.lc-ta {
  padding: 12px 14px; width: 100%; resize: vertical;
  min-height: 86px; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text); font: 400 14px/1.6 var(--sans);
}
.lc-ta:focus { outline: none; border-color: rgba(var(--accent-rgb), .55); box-shadow: var(--ring); }
.lc-start .lc-alt { margin: 0; text-align: center; }

/* ── the conversation ───────────────────────────────────────────────────── */
.lc-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 3px;
  scrollbar-width: thin;
}
.lc-body::-webkit-scrollbar { width: 8px; }
.lc-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.lc-stream { display: flex; flex-direction: column; gap: 3px; }

.lc-day { margin: 14px 0 8px; text-align: center; }
.lc-day span {
  display: inline-block; padding: 3px 11px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line);
  font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}

.lc-m { display: flex; align-items: flex-end; gap: 6px; margin-top: 4px; animation: lc-pop .22s var(--ease) both; }
@keyframes lc-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lc-m.me { justify-content: flex-end; }
.lc-m.me + .lc-m.me, .lc-m.them + .lc-m.them { margin-top: 1px; }
.lc-b {
  max-width: 82%; padding: 9px 13px; border-radius: 17px;
  font-size: 14.2px; line-height: 1.55; word-break: break-word;
  border: 1px solid var(--line-2); background: var(--surface-2);
}
.lc-m.them .lc-b { border-bottom-left-radius: 6px; }
.lc-m.me .lc-b {
  background: var(--accent); color: var(--on-accent);
  border-color: transparent; border-bottom-right-radius: 6px;
}
.lc-b p { margin: 0; white-space: pre-wrap; }
/* A link inside a message has to read as one WITHOUT being hovered — it is
   often the whole point of the reply. Underlined always, and on the operator's
   own blue bubble it takes the bubble's own ink rather than the accent, which
   would vanish into the background. */
.lc-b .msg-link { color: var(--accent); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1.5px;
  overflow-wrap: anywhere; }
.lc-b .msg-link:hover { text-decoration-thickness: 2.5px; }
.lc-m.me .lc-b .msg-link { color: inherit; text-decoration-color: currentColor; }
.lc-b time { display: block; margin-top: 3px; font-size: 10.5px; opacity: .62; text-align: right; }
.lc-b .lc-img { display: block; margin: -2px -5px 6px; border-radius: 12px; overflow: hidden; }
.lc-b .lc-img img { width: 100%; max-height: 240px; object-fit: cover; }
/* the quoted message a reply carries */
.lc-q {
  display: block; margin: -1px -4px 6px; padding: 6px 10px; border-radius: 9px;
  border-left: 3px solid currentColor; background: rgba(127, 127, 127, .14);
  font-size: 12.5px; line-height: 1.45; opacity: .9;
}
.lc-q b { display: block; font-weight: 700; font-size: 11.5px; }
.lc-q span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the reply gesture — a quiet arrow that appears on hover or focus */
.lc-rb {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0;
  border-radius: 99px; background: transparent; color: var(--text-3); cursor: pointer;
  opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s, color .15s;
}
.lc-m.me .lc-rb { order: -1; }
.lc-m:hover .lc-rb, .lc-rb:focus-visible { opacity: 1; transform: none; }
.lc-rb:hover { color: var(--accent); }
.lc-rb .ic { width: 14px; height: 14px; }

.lc-m.sys { justify-content: center; margin: 10px 0; }
.lc-m.sys span {
  max-width: 88%; padding: 7px 14px; border-radius: 12px; text-align: center;
  background: var(--surface-2); border: 1px dashed var(--line-2);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap;
}

/* "support will arrive shortly" */
.lc-wait {
  display: grid; justify-items: center; gap: 4px; padding: 18px 16px; margin-bottom: 6px;
  border-radius: 16px; border: 1px solid rgba(var(--gold-rgb), .3);
  background: rgba(var(--gold-rgb), .08); text-align: center;
}
.lc-wait[hidden] { display: none; }
.lc-wait b { font: 740 14.5px var(--sans); }
.lc-wait span { font-size: 12.5px; color: var(--text-2); }
.lc-pulse { display: flex; gap: 5px; margin-bottom: 6px; }
.lc-pulse i { width: 7px; height: 7px; border-radius: 99px; background: var(--gold); animation: lc-bounce 1.3s var(--ease) infinite; }
.lc-pulse i:nth-child(2) { animation-delay: .16s; }
.lc-pulse i:nth-child(3) { animation-delay: .32s; }
@keyframes lc-bounce { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }

/* "typing…" */
.lc-typing { display: flex; gap: 4px; align-items: center; padding: 9px 14px; margin: 4px 0 2px;
  width: fit-content; border-radius: 17px; border-bottom-left-radius: 6px;
  border: 1px solid var(--line-2); background: var(--surface-2); }
.lc-typing[hidden] { display: none; }
.lc-typing span { width: 6px; height: 6px; border-radius: 99px; background: var(--text-3); animation: lc-bounce 1.2s var(--ease) infinite; }
.lc-typing span:nth-child(2) { animation-delay: .15s; }
.lc-typing span:nth-child(3) { animation-delay: .3s; }

/* ── the composer ───────────────────────────────────────────────────────── */
.lc-foot { flex: none; border-top: 1px solid var(--line); background: var(--surface-2); padding: 9px 10px; }
.lc-replybar, .lc-file {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px; padding: 6px 8px 6px 10px;
  border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
}
.lc-replybar[hidden], .lc-file[hidden] { display: none; }
.lc-replybar .lc-q { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; border-left: 2px solid var(--accent); padding-left: 8px; }
.lc-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-compose { display: flex; align-items: flex-end; gap: 6px; }
.lc-clip { position: relative; cursor: pointer; }
.lc-clip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.lc-compose textarea {
  flex: 1; min-width: 0; max-height: 132px; resize: none; padding: 9px 13px;
  border-radius: 17px; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text); font: 400 14px/1.5 var(--sans);
  /* A one-line box with `overflow:auto` draws Windows' scrollbar arrows inside
     itself; the box grows with the text instead, so there is nothing to scroll
     until it hits its ceiling. */
  overflow-y: hidden; scrollbar-width: none;
}
.lc-compose textarea::-webkit-scrollbar { width: 0; height: 0; }
.lc-compose textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), .55); box-shadow: var(--ring); }
/* waiting to be accepted: the composer is there, but not yet yours */
.lc-lock {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding: 9px 12px;
  border-radius: 12px; border: 1px dashed var(--line-2); background: var(--surface-3);
  font-size: 12.5px; color: var(--text-2);
}
.lc-lock[hidden] { display: none; }
.lc-lock .ic { width: 15px; height: 15px; flex: none; color: var(--gold); }
.lc-foot.locked .lc-compose { opacity: .5; pointer-events: none; }
.lc-foot.locked .lc-quick button[data-lc-end] { display: none; }
.lc-send {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  border-radius: 99px; border: 0; background: var(--accent); color: var(--on-accent);
  transition: background .15s, transform .15s;
}
.lc-send:hover { background: var(--accent-hover); }
.lc-send:active { transform: scale(.92); }
.lc-send:disabled { opacity: .45; cursor: default; transform: none; }
.lc-send .ic { width: 17px; height: 17px; }
.lc-quick { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lc-quick a, .lc-quick button {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; cursor: pointer;
  border-radius: 99px; border: 1px solid var(--line-2); background: transparent;
  font: 600 11.5px var(--sans); color: var(--text-3); transition: all .15s;
}
.lc-quick a:hover, .lc-quick button:hover { color: var(--text); border-color: var(--line-3); }
.lc-quick .ic { width: 13px; height: 13px; }
.lc-quick button.ok { color: var(--green); border-color: rgba(var(--green-rgb), .4);
  background: rgba(var(--green-rgb), .09); }
.lc-quick button.ok:hover { background: rgba(var(--green-rgb), .16); color: var(--green); }

/* the canned replies an operator picks from (panel side uses its own CSS) */
.lc-err {
  flex: none; margin: 0; padding: 9px 16px; font-size: 12.5px;
  background: rgba(var(--red-rgb), .12); color: var(--red); border-top: 1px solid rgba(var(--red-rgb), .3);
}
.lc-err[hidden] { display: none; }

/* ── stars ──────────────────────────────────────────────────────────────── */
.lc-stars { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.lc-star { width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 13px; background: var(--surface-2);
  color: var(--text-3); transition: all .15s; }
.lc-star .ic { width: 20px; height: 20px; }
.lc-star:hover, .lc-star.lit { color: var(--gold); border-color: rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .1); }
.lc-star:hover .ic, .lc-star.lit .ic { fill: currentColor; }

/* ── the door on /support ───────────────────────────────────────────────── */
.lc-cta {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px;
  border-color: rgba(var(--accent-rgb), .3); transition: border-color .2s, transform .2s var(--ease);
}
.lc-cta:hover { border-color: rgba(var(--accent-rgb), .55); transform: translateY(-2px); }
.lc-cta-t { flex: 1; min-width: 0; }
.lc-cta-t b { display: block; font: 720 15.5px var(--sans); letter-spacing: -.01em; }
.lc-cta-t small { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.lc-cta-dot {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface-2);
  font: 700 11.5px var(--sans); color: var(--text-2);
}
.lc-cta > .ic { flex: none; color: var(--text-3); }
@media (max-width: 560px) {
  .lc-cta { flex-wrap: wrap; }
  .lc-cta-dot { margin-left: 56px; }
}

/* ── /support/chat, the full page ───────────────────────────────────────── */
.lc-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.lc-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: min(72vh, 680px); }
.lc-card .lc-head { border-radius: 0; }
.lc-card .lc-pane[data-pane="rate"] { overflow-y: auto; }
.lc-card .lc-body.past { border-top: 1px solid var(--line); opacity: .75; }
.lc-side { display: grid; gap: 16px; position: sticky; top: 96px; }
.lc-facts { list-style: none; display: grid; gap: 9px; }
.lc-facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.lc-facts span { color: var(--text-3); }
.lc-facts b { font-weight: 650; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-past { list-style: none; display: grid; gap: 7px; }
.lc-past a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); transition: border-color .15s; }
.lc-past a:hover { border-color: var(--line-3); }
.lc-past b { font-size: 12.5px; }
.lc-past span { flex: 1; font-size: 12px; color: var(--text-3); }
.lc-rated { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gold); }

@media (max-width: 1000px) {
  .lc-page { grid-template-columns: minmax(0, 1fr); }
  .lc-side { position: static; }
}

/* ── phones: the panel is the screen ───────────────────────────────────── */
@media (max-width: 900px) {
  .lc-fab { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
  .lc-fab .ic { width: 22px; height: 22px; }
}
@media (max-width: 560px) {
  .lc-panel {
    right: 0; left: 0; bottom: 0; top: 0;
    width: 100%; max-width: none; height: 100%; max-height: none;
    border: 0; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: lc-sheet .26s var(--ease) both;
  }
  @keyframes lc-sheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .lc.open .lc-fab { display: none; }
  .lc-head { padding-top: calc(13px + env(safe-area-inset-top, 0px)); }
  .lc-b { max-width: 86%; }
  .lc-card { height: calc(100vh - 230px); min-height: 420px; }
}

/* nothing moves for anyone who asked for that */
@media (prefers-reduced-motion: reduce) {
  .lc-panel, .lc-m { animation: none; }
  .lc-dot.on, .lc-pulse i, .lc-typing span { animation: none; }
  .lc.unseen:not(.open) .lc-fab { animation: none; }
}