/* 3rd-i · Texts with a Safety Agent (AgentTexts.astro)
   ----------------------------------------------------
   Two of the client's renders (Messages thread + PIP stream, SOS-for-a-friend
   group chat) on a tinted stage, with the same thread rebuilt as coded
   bubbles that reveal in order, and three point cards under it. Token-only,
   both themes free. Prefix: agt- */

.agt-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 44px) clamp(20px, 3.4vw, 48px);
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  isolation: isolate;
}
.agt-bloom {
  position: absolute;
  inset: -30% -20% auto auto;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--magenta) 16%, transparent), color-mix(in srgb, var(--royal) 10%, transparent) 45%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Two phones, the second tucked behind and to the right, both with a caption
   chip under them. */
.agt-phones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  align-items: end;
}
.agt-phone { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.agt-phone img {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  filter: drop-shadow(0 26px 40px rgba(20, 30, 70, 0.22));
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.agt-phone--a img { transform: rotate(-3deg) translateY(4px); }
.agt-phone--b img { transform: rotate(3deg) translateY(-6px); }
.agt-stage:hover .agt-phone--a img { transform: rotate(-4deg) translateY(-2px); }
.agt-stage:hover .agt-phone--b img { transform: rotate(4deg) translateY(-12px); }
.agt-phone figcaption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--pill);
  border: 1px solid var(--line-hi);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.agt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 22%, transparent);
}
.agt-dot--alarm {
  background: var(--alarm);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--alarm) 22%, transparent);
}

/* The thread. Same exchange as the render, rebuilt so it reads at every width. */
.agt-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--line-hi);
  background: var(--panel-2);
}
.agt-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.agt-thread-app img { display: block; width: 36px; height: 36px; border-radius: 9px; }
.agt-thread-head b { display: block; font-size: 14px; letter-spacing: -0.01em; }
.agt-thread-head small { display: block; color: var(--dim); font-size: 12px; }

.agt-bubble {
  margin: 0;
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.42;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(8px);
}
.agt-bubble--in {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.agt-bubble--out {
  align-self: flex-end;
  background: linear-gradient(180deg, #4cd964, #2db24a);
  color: #fff;
  border-bottom-right-radius: 6px;
}
/* Reveal in order once the stage is on screen (.rv.in is app.js's reveal). */
.agt-stage.in .agt-bubble { animation: agtBubble 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.agt-stage.in .agt-bubble:nth-child(2) { animation-delay: 160ms; }
.agt-stage.in .agt-bubble:nth-child(3) { animation-delay: 560ms; }
.agt-stage.in .agt-bubble:nth-child(4) { animation-delay: 960ms; }
.agt-stage.in .agt-bubble:nth-child(5) { animation-delay: 1360ms; }
.agt-stage.in .agt-bubble:nth-child(6) { animation-delay: 1760ms; }
.agt-stage.in .agt-bubble:nth-child(7) { animation-delay: 2200ms; }
@keyframes agtBubble {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Three points, each its own card with an icon chip. */
.agt-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(22px, 3vw, 32px);
}
.agt-point {
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  box-shadow: var(--soft-shadow);
}
.agt-point-ic {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--acc-magenta) 12%, var(--panel-2));
  color: var(--acc-magenta);
  margin-bottom: 14px;
}
.agt-point-ic svg { width: 21px; height: 21px; }
.agt-point:nth-child(2) .agt-point-ic { background: color-mix(in srgb, var(--acc-sky) 14%, var(--panel-2)); color: var(--acc-sky); }
.agt-point:nth-child(3) .agt-point-ic { background: color-mix(in srgb, var(--acc-royal) 14%, var(--panel-2)); color: var(--acc-royal); }
.agt-point h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.015em; }
.agt-point p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.58; }

/* Compact: used where the section sits inside a longer page (/safety). */
.agt-sec--compact .ret-head { margin-bottom: clamp(30px, 4vw, 48px); }

@media (max-width: 980px) {
  .agt-stage { grid-template-columns: 1fr; }
  .agt-phones { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .agt-points { grid-template-columns: 1fr; }
  .agt-phone figcaption { font-size: 11.5px; padding: 6px 10px; white-space: normal; text-align: center; }
  .agt-thread { padding: 14px; }
  .agt-bubble { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .agt-bubble { opacity: 1; transform: none; }
  .agt-stage.in .agt-bubble { animation: none; }
  .agt-phone img, .agt-stage:hover .agt-phone img { transition: none; }
}