/* Live chat: floating button bottom-right and its panel. Values from tokens.css only.
   Layering: above the page and footer, below the header (50), cookie banner (60)
   and the menu overlay (100). */
.srv-chat { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 45; }

.srv-chat__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  padding: 0 var(--space-6) 0 var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: var(--elev-1);
  color: var(--on-accent);
  font: 500 var(--text-label) var(--font-display);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-reveal);
}
.srv-chat__pill:hover { color: var(--on-accent); transform: translateY(calc(var(--space-1) * -0.5)); }
.srv-chat__pill:active { transform: scale(var(--press-scale)); }
.srv-chat__pill-icon svg { display: block; width: var(--space-6); height: var(--space-6); }
.srv-chat__badge {
  display: inline-grid;
  place-items: center;
  min-width: var(--space-6);
  height: var(--space-6);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink);
  font: 600 var(--text-caption) var(--font-sans);
}
.srv-chat__badge[hidden] { display: none; }

/* Panel: a popover card above the button. */
.srv-chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-3));
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  max-height: min(560px, calc(100dvh - var(--header-height) - var(--btn-height) - var(--space-12)));
  border: 1px solid var(--line);
  border-radius: var(--radius-card-inner);
  background: var(--surface);
  box-shadow: var(--elev-1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(var(--space-4)) scale(0.98);
  transform-origin: 100% 100%;
  transition: opacity var(--dur-base) var(--ease-reveal), transform var(--dur-base) var(--ease-reveal);
}
.srv-chat__panel[hidden] { display: none; }
.srv-chat__panel.is-open { opacity: 1; transform: none; }

.srv-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--line);
}
.srv-chat__title { margin: 0; font: 500 var(--text-h4) var(--font-display); }
.srv-chat__sub { margin: 0; color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.srv-chat__close {
  display: inline-grid;
  place-items: center;
  width: var(--btn-height);
  height: var(--btn-height);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.srv-chat__close:hover { border-color: var(--line); color: var(--ink); }
.srv-chat__close svg { width: var(--space-6); height: var(--space-6); }

.srv-chat__note { padding: var(--space-6); color: var(--ink-soft); font: 400 var(--text-body) var(--font-sans); }
.srv-chat__note p { margin: 0; }
.srv-chat__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* Conversation */
.srv-chat__log {
  flex: 1 1 auto;
  min-height: calc(var(--space-32) + var(--space-12));
  margin: 0;
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.srv-chat__msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.srv-chat__msg + .srv-chat__msg { margin-top: var(--space-3); }
.srv-chat__msg--me { align-items: flex-end; margin-left: auto; }
.srv-chat__bubble {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  font: 400 var(--text-body-sm) var(--font-sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.srv-chat__msg--me .srv-chat__bubble { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.srv-chat__meta { margin-top: var(--space-1); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }
.srv-chat__msg.is-new { animation: srv-chat-in var(--dur-base) var(--ease-reveal); }
@keyframes srv-chat-in { from { opacity: 0; transform: translateY(var(--space-2)); } }

.srv-chat__empty { position: absolute; left: var(--space-6); right: var(--space-6); top: 45%; margin: 0; color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); text-align: center; pointer-events: none; }
.srv-chat__empty[hidden] { display: none; }
.srv-chat__status { margin: 0; padding: 0 var(--space-4); color: var(--warning); font: 400 var(--text-caption) var(--font-sans); }
.srv-chat__status:empty { display: none; }

.srv-chat__form { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); border-top: 1px solid var(--line); }
.srv-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font: 400 var(--text-body-sm) var(--font-sans);
  resize: none;
}
.srv-chat__input::placeholder { color: var(--ink-muted); }
.srv-chat__send {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--btn-height);
  height: var(--btn-height);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-reveal);
}
.srv-chat__send:active { transform: scale(var(--press-scale)); }
.srv-chat__send[disabled] { opacity: 0.6; cursor: wait; }
.srv-chat__send svg { width: var(--space-6); height: var(--space-6); }
.srv-chat__hint { margin: 0; padding: 0 var(--space-4) var(--space-3); color: var(--ink-muted); font: 400 var(--text-caption) var(--font-sans); }

@media (max-width: 767px) {
  .srv-chat__pill { padding: 0 var(--space-4); }
  /* Phones: the panel spans the screen width above the button. */
  .srv-chat__panel { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + var(--btn-height) + var(--space-3)); width: auto; max-height: calc(100dvh - var(--header-height) - var(--btn-height) - var(--space-12)); }
}

@media (prefers-reduced-motion: reduce) {
  .srv-chat__pill, .srv-chat__panel, .srv-chat__send { transition: none; }
  .srv-chat__pill:hover { transform: none; }
  .srv-chat__msg.is-new { animation: none; }
}