/* =========================================================================
   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; }

/* Dynamic-criteria cards (identity verification) are inserted at their turn-1
   activation but kept OUT of view until their rows are extracted — and that
   extraction is heard-timed (the tracker reads the heard reveal stream). The
   card is revealed by setCriteriaGroups together with its first heard rows, so
   the whole card appears only once the agent has been HEARD asking. display:none
   keeps it out of layout (no empty gap) while hidden. */
.alert-wrapper.alert-pending-reveal { display: none; }

/* ---- 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 {
  display: flex;
  /* flex-start, not center: a title that wraps to two lines would otherwise
     park the chevron in the line gap, attached to neither line. Same reason
     .alert-criterion-item aligns its marker to the first line. */
  align-items: flex-start;  /* chevron sits inline, left of the title text */
  gap: 4px;
  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;
  /* Hidden at rest — revealed on hover / keyboard focus, and kept visible once
     a vote is cast (panel[data-feedback]) so the agent sees their choice. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease);
}
.alert-panel:hover .alert-feedback,
.alert-panel:focus-within .alert-feedback,
.alert-panel[data-feedback] .alert-feedback {
  opacity: 1;
  pointer-events: auto;
}
.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); }