/* =========================================================================
   Live call — Alert / signal cards (v2 design system)

   Severity maps onto v2 urgency tiers (colour = urgency, never category):
     low    → whisper (cyan)  · informational      · no motion
     medium → tap     (gold)  · actionable          · pulses ONCE on entry
     high   → tug     (red)   · attention now        · the only looping pulse

   All colour/radius/shadow comes from rta-theme.css via var(--rta-*).
   Each card exposes its tier colour as --tier so the shared keyframes and
   the tier dot resolve correctly.
   ========================================================================= */

#alerts-container { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---- Signal card ------------------------------------------------------- */
.alert-panel {
  --tier: var(--rta-whisper);             /* default → low / whisper */
  position: relative;
  overflow: hidden;
  /* extra bottom room for the absolutely-positioned thumbs feedback row */
  padding: 11px 13px 26px;
  /* tier wash fading into the surface, with a tier left-edge */
  background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 12%, transparent), var(--rta-surface));
  border-style: solid;
  border-width: 1px 1px 1px 3px;
  border-color: color-mix(in srgb, var(--tier) 33%, transparent);
  border-left-color: var(--tier);
  border-radius: var(--rta-radius-card);
  box-shadow: var(--rta-card-shadow);
}

/* Tier bindings — colour + motion. */
.alert-panel.low    { --tier: var(--rta-whisper); }                              /* still */
.alert-panel.medium { --tier: var(--rta-tap);     animation: rtaTapPulse 1.4s var(--ease) 1; }
.alert-panel.high   { --tier: var(--rta-tug-red); animation: rtaTugLoop 1.7s ease-in-out infinite; }

/* ---- Dismiss button (persistent alerts only) --------------------------- */
.alert-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--rta-radius-xs);
  color: var(--rta-fg3);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--dur-micro) var(--ease),
              background var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease);
}
.alert-panel:hover .alert-close { opacity: 0.7; }
.alert-close:hover,
.alert-close:focus-visible {
  opacity: 1;
  color: var(--rta-fg);
  background: color-mix(in srgb, var(--rta-fg) 8%, transparent);
  outline: none;
}

/* ---- Content toggle ---------------------------------------------------- */
.alert-content         { display: none; }
.alert-content.visible { display: block; animation: fadeSlide 0.3s var(--ease); }

/* ---- Header row (tier dot + category label) ---------------------------- */
.alert-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
  /* leave space for the dismiss "✕" (top-right) so the label never tucks
     under it */
  padding-right: 1.1rem;
}

/* Tier dot — leads the header, to the LEFT of the title/category. tug pulses;
   tap glows; whisper is still. (Kept off the right edge so it can't collide
   with the dismiss button.) */
.alert-row::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tier);
  flex-shrink: 0;
}
.alert-panel.high   .alert-row::before { animation: rtaDotPulse 1.7s ease-in-out infinite; }
.alert-panel.medium .alert-row::before { box-shadow: 0 0 6px var(--tier); }

/* Category label — colour = tier, like the v2 SignalCard header. */
.alert-badge {
  font: 700 9px/1 var(--rta-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tier);
  background: none;
  border: none;
  padding: 0;
}

/* Optional right-aligned category text (rarely used) */
.alert-category {
  margin-left: auto;
  font-size: 0.62rem;
  color: var(--rta-fg3);
  letter-spacing: 0.04em;
}

/* One-off marker — a tier-coloured "!" instead of the persistent badge. */
.alert-icon-bang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 14%, transparent);
  flex-shrink: 0;
}

/* ---- Body text --------------------------------------------------------- */
/* Summary = the signal title (v2 SignalCard title). */
.alert-summary {
  font: 700 15px/1.35 var(--rta-font-body);
  letter-spacing: -0.01em;
  color: var(--rta-fg);
  margin-bottom: 0.3rem;
}
/* Action / coaching line = the signal body (v2 SignalCard body). */
.alert-action {
  font: 500 14px/1.5 var(--rta-font-body);
  color: var(--rta-fg2);
}

/* ---- Thumbs up/down feedback (v2 CardFeedback) ------------------------- */
.alert-feedback {
  position: absolute;
  bottom: 8px;
  right: 9px;
  display: flex;
  gap: 1px;
  z-index: 3;
}
.rta-fbbtn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  line-height: 0;
  color: color-mix(in srgb, var(--rta-fg) 42%, transparent);
  transition: color 160ms var(--ease), transform 120ms var(--ease);
}
.rta-fbbtn:hover { color: color-mix(in srgb, var(--rta-fg) 80%, transparent); }
.rta-fbbtn:active { transform: scale(0.88); }
.rta-fbbtn.is-up[aria-pressed="true"]   { color: var(--rta-good); }
.rta-fbbtn.is-down[aria-pressed="true"] { color: var(--rta-tug-red); }