/* Live support chat: floating action button + panel, transcript bubbles, typing indicator, email chip.
   asg-chat__* BEM, scoped under .asg-store like cart.css so it inherits the design-system tokens
   (--asg-primary, --asg-surface, --asg-border, --asg-muted, --asg-radius…). Mobile-first: under 576px
   the panel becomes a near-full-screen bottom sheet. */

/* ---------- floating action button ---------- */
.asg-store .asg-chat__fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1050;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--asg-primary, #5bb8e8); color: #fff;
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.asg-store .asg-chat__fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.65); }
.asg-store .asg-chat__fab:focus-visible { outline: none; box-shadow: var(--asg-ring); }

/* Unread badge: staff replies that arrived while the panel was closed. */
.asg-store .asg-chat__badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; line-height: 1; border-radius: 999px;
  background: #ef4444; color: #fff; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--asg-bg, #0b0e14); /* separates the red dot from the primary-colored FAB */
}

/* ---------- panel ---------- */
.asg-store .asg-chat__panel {
  position: fixed; right: 1.1rem; bottom: calc(1.1rem + 56px + 0.8rem); z-index: 1055;
  display: flex; flex-direction: column;
  width: min(360px, calc(100vw - 2.2rem)); height: min(520px, calc(100vh - 7rem));
  background: var(--asg-surface, #131a22); border: 1px solid var(--asg-border-strong);
  border-radius: var(--asg-radius, 14px); overflow: hidden;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.75);
}
.asg-store .asg-chat__panel[hidden] { display: none; }

.asg-store .asg-chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.75rem 1rem; background: var(--asg-primary, #5bb8e8); color: #fff;
}
.asg-store .asg-chat__title { margin: 0; font-size: 1rem; font-weight: 700; color: inherit; }
.asg-store .asg-chat__head-actions { display: flex; align-items: center; gap: 0.4rem; }
.asg-store .asg-chat__iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  color: inherit; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease;
}
.asg-store .asg-chat__iconbtn:hover { background: rgba(255, 255, 255, 0.24); }
.asg-store .asg-chat__iconbtn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.asg-store .asg-chat__iconbtn--danger { background: #ef4444; color: #fff; }
.asg-store .asg-chat__iconbtn--danger:hover { background: #dc2626; }

/* ---------- end-chat confirmation ---------- */
.asg-store .asg-chat__confirm {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.8rem 1rem; border-top: 1px solid var(--asg-border);
}
.asg-store .asg-chat__confirm[hidden] { display: none; }
.asg-store .asg-chat__confirm-title { margin: 0; font-weight: 700; color: var(--asg-text, #fff); }
.asg-store .asg-chat__confirm-note { margin: 0; font-size: 0.85rem; color: var(--asg-muted); }
.asg-store .asg-chat__confirm-actions { display: flex; gap: 0.5rem; }
.asg-store .asg-chat__confirm-actions button {
  flex: 1 1 0; padding: 0.5rem 0.6rem; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  border: none; border-radius: 10px; color: #fff;
}
.asg-store .asg-chat__confirm-email { background: var(--asg-primary, #5bb8e8); }
.asg-store .asg-chat__confirm-end { background: #ef4444; }
.asg-store .asg-chat__confirm-end:hover { background: #dc2626; }
.asg-store .asg-chat__confirm-cancel {
  align-self: center; background: none; border: none; cursor: pointer;
  font-size: 0.82rem; color: var(--asg-muted); text-decoration: underline; padding: 0.1rem 0.3rem;
}

/* ---------- body / home state ---------- */
.asg-store .asg-chat__body { flex: 1 1 auto; overflow-y: auto; padding: 0.9rem 1rem; }
.asg-store .asg-chat__greeting { margin: 0 0 0.8rem; color: var(--asg-text, #fff); line-height: 1.45; }
.asg-store .asg-chat__topics { display: flex; flex-direction: column; gap: 0.5rem; }
.asg-store .asg-chat__topic {
  text-align: left; padding: 0.55rem 0.8rem; cursor: pointer; font-weight: 600; font-size: 0.92rem;
  color: var(--asg-text, #fff); background: var(--asg-surface-2, #182028);
  border: 1px solid var(--asg-border-strong); border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.asg-store .asg-chat__topic:hover {
  border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 60%, transparent);
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 12%, transparent);
}
.asg-store .asg-chat__topic--other { color: var(--asg-muted); font-weight: 500; }
/* The thread fills the body so the compose hint can sit at the BOTTOM, next to the input the visitor
   is about to type into — at the top of the panel it reads as a blank screen once a phone keyboard
   opens. display:flex needs the explicit [hidden] guard (author rules beat the UA hidden rule). */
.asg-store .asg-chat__thread { display: flex; flex-direction: column; min-height: 100%; }
.asg-store .asg-chat__thread[hidden] { display: none; }
.asg-store .asg-chat__hint { margin: auto 0 0.6rem; font-size: 0.85rem; color: var(--asg-muted); }

/* ---------- transcript bubbles ---------- */
.asg-store .asg-chat__messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.asg-store .asg-chat__msg { display: flex; flex-direction: column; max-width: 85%; }
.asg-store .asg-chat__msg--visitor { align-self: flex-end; align-items: flex-end; }
.asg-store .asg-chat__msg--staff { align-self: flex-start; align-items: flex-start; }
.asg-store .asg-chat__msg--system { align-self: center; align-items: center; max-width: 95%; }
.asg-store .asg-chat__msg-author { font-size: 0.72rem; color: var(--asg-muted); margin-bottom: 0.15rem; }
.asg-store .asg-chat__bubble {
  padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.92rem; line-height: 1.4;
  color: var(--asg-text, #fff); white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}
.asg-store .asg-chat__msg--visitor .asg-chat__bubble {
  background: color-mix(in srgb, var(--asg-primary, #5bb8e8) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--asg-primary, #5bb8e8) 40%, transparent);
  border-bottom-right-radius: 4px;
}
.asg-store .asg-chat__msg--staff .asg-chat__bubble {
  background: var(--asg-surface-2, #182028); border: 1px solid var(--asg-border);
  border-bottom-left-radius: 4px;
}
.asg-store .asg-chat__msg--system .asg-chat__bubble {
  background: transparent; border: none; padding: 0.15rem 0.4rem;
  text-align: center; font-style: italic; font-size: 0.82rem; color: var(--asg-muted);
}
.asg-store .asg-chat__msg-time { font-size: 0.68rem; color: var(--asg-muted); margin-top: 0.15rem; }
/* System lines: the note is the point, not the clock — full stamp stays in the title tooltip. */
.asg-store .asg-chat__msg--system .asg-chat__msg-time { display: none; }

/* ---------- typing indicator (three-dot pulse) ---------- */
.asg-store .asg-chat__typing { display: flex; align-items: center; gap: 4px; padding: 0.6rem 0.2rem 0.1rem; }
.asg-store .asg-chat__typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--asg-muted);
  animation: asg-chat-pulse 1.2s infinite ease-in-out;
}
.asg-store .asg-chat__typing-dot:nth-child(2) { animation-delay: 0.15s; }
.asg-store .asg-chat__typing-dot:nth-child(3) { animation-delay: 0.3s; }
.asg-store .asg-chat__typing-label { margin-left: 0.4rem; font-size: 0.78rem; font-style: italic; color: var(--asg-muted); }
@keyframes asg-chat-pulse {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- email fallback chip + inline form ---------- */
.asg-store .asg-chat__email { padding: 0.5rem 1rem; border-top: 1px solid var(--asg-border); }
.asg-store .asg-chat__email-chip {
  width: 100%; text-align: left; cursor: pointer; padding: 0.4rem 0.65rem;
  font-size: 0.8rem; color: var(--asg-muted);
  background: transparent; border: 1px dashed var(--asg-border-strong); border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.asg-store .asg-chat__email-chip:hover { color: var(--asg-primary, #5bb8e8); border-color: color-mix(in srgb, var(--asg-primary, #5bb8e8) 60%, transparent); }
.asg-store .asg-chat__email-form { display: flex; gap: 0.45rem; }
.asg-store .asg-chat__email-input {
  flex: 1 1 auto; min-width: 0; padding: 0.4rem 0.65rem; font-size: 0.88rem;
  color: var(--asg-text, #fff); background: var(--asg-surface-2, #182028);
  border: 1px solid var(--asg-border-strong); border-radius: 8px;
}
.asg-store .asg-chat__email-input:focus-visible { outline: none; box-shadow: var(--asg-ring); }
.asg-store .asg-chat__email-save {
  flex: 0 0 auto; padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--asg-primary, #5bb8e8); border: none; border-radius: 8px;
}
.asg-store .asg-chat__email-note { padding: 0; margin: 0; font-size: 0.8rem; color: var(--asg-muted); }

/* ---------- ended state ---------- */
.asg-store .asg-chat__ended {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1rem; border-top: 1px solid var(--asg-border);
}
.asg-store .asg-chat__ended-note { margin: 0; font-size: 0.85rem; font-style: italic; color: var(--asg-muted); }
.asg-store .asg-chat__restart {
  padding: 0.5rem 1rem; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  color: #fff; background: var(--asg-primary, #5bb8e8); border: none; border-radius: 10px;
  transition: filter 0.15s ease;
}
.asg-store .asg-chat__restart:hover { filter: brightness(1.08); }

/* ---------- input row (pinned bottom) ---------- */
.asg-store .asg-chat__foot {
  display: flex; align-items: flex-end; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-top: 1px solid var(--asg-border);
}
.asg-store .asg-chat__input {
  flex: 1 1 auto; min-width: 0; max-height: 6.5rem; resize: none;
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.92rem; line-height: 1.35;
  color: var(--asg-text, #fff); background: var(--asg-surface-2, #182028);
  border: 1px solid var(--asg-border-strong); border-radius: 10px;
}
.asg-store .asg-chat__input:focus-visible { outline: none; box-shadow: var(--asg-ring); }
.asg-store .asg-chat__send {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; cursor: pointer;
  color: #fff; background: var(--asg-primary, #5bb8e8); border: none; border-radius: 10px;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.asg-store .asg-chat__send:hover { filter: brightness(1.08); }
.asg-store .asg-chat__send:disabled { opacity: 0.55; cursor: progress; }
.asg-store .asg-chat__send:focus-visible { outline: none; box-shadow: var(--asg-ring); }

/* ---------- mobile: near-full-screen bottom sheet ---------- */
@media (max-width: 575.98px) {
  /* Phones get a bottom sheet (~70% of the dynamic viewport, transcript scrolls inside); chat.js pins
     it to the VISUAL viewport while the keyboard is up, because iOS overlays the keyboard on the
     layout viewport and would bury the input. 16px inputs: anything smaller makes iOS zoom the page
     on focus. */
  .asg-store .asg-chat__panel {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%;
    height: 70vh; height: 70dvh; max-height: 100dvh;
    border: none; border-bottom: none; border-radius: 14px 14px 0 0;
  }
  .asg-store .asg-chat__input,
  .asg-store .asg-chat__email-input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .asg-store .asg-chat__fab, .asg-store .asg-chat__typing-dot { transition: none; animation: none; }
}