/* support.css — owned by WP-B2B-HORECA-SUPPORT. Tokens only (docs/vfx-master-spec.md §1 rule 5).
   Motion here is transform/opacity only; every duration and easing is a token. */

/* ------------------------------------------------------------ SLA RING */
/* A conic sweep around the priority badge. The fill circle is driven by
   support.js (stroke-dashoffset, paint-only); data-band is the colour and
   the signal that survives reduced motion. */
.sla-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
}
.sla-ring--lg { width: 80px; height: 80px; }
.sla-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sla-ring-track { fill: none; stroke: var(--line); stroke-width: 3; }
.sla-ring-fill { fill: none; stroke: var(--fc-success); stroke-width: 3; stroke-linecap: round; }
.sla-ring[data-band="warn"] .sla-ring-fill { stroke: var(--fc-warn); }
.sla-ring[data-band="late"] .sla-ring-fill { stroke: var(--fc-danger); }
.sla-ring-in { position: relative; display: inline-flex; }
.sla-ring .badge { font-size: var(--fc-t-2xs); padding: 2px 6px; }

/* -------------------------------------------------------- CONVERSATION */
.sup-convo { display: flex; flex-direction: column; }
.sup-msg { display: flex; flex-direction: column; }
/* "Did it send?" — the new bubble slides up into the thread and settles at
   identity; the tick beside its timestamp stays. */
.sup-bub-in { animation: sup-bub-in var(--fc-m-quick) var(--fc-ease-out) both; }
@keyframes sup-bub-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.sup-tick { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--fc-s-2); color: var(--fc-success); font-weight: var(--fc-w-semi); }

/* ------------------------------------------------------------- RESOLVE */
.sup-resolved { padding: var(--fc-s-4) 0 var(--fc-s-2); }
.sup-check { display: flex; justify-content: center; align-items: center; min-height: 64px; margin: 0 auto; }
.sup-check .vfx-check { display: block; }
.sup-greeter { margin: 0; }
.sup-greeter[hidden] { display: none; }

/* ------------------------------------------------------------- REFUNDS */
/* A settled row says so and stops taking presses before any of it moves. */
.sup-ref.is-inert { opacity: .72; pointer-events: none; }
.sup-ref { will-change: transform, opacity; }

/* -------------------------------------------------------------- ASSETS */
.sup-art { width: 34px; height: 34px; flex: none; }
.sup-art img, .sup-art canvas { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --------------------------------------------------------- PERFORMANCE */
.sup-perf { display: flex; gap: var(--fc-s-5); align-items: center; flex-wrap: wrap; }
.sup-perf-gauge { flex: none; width: 108px; }

@media (prefers-reduced-motion: reduce) {
  .sup-bub-in { animation: none; }
}