/* =====================================================================
   Chat reel — shared. iMessage on a cinematic plate, Sierra-grade polish.
   Used by /sage, /sage-se, /practice, and index.html (inline overrides
   match this file 1:1 so a future DRY pass is trivial).

   Design contract.
   1. Bubbles read as real iMessage (SF sans, pill shape, proper tail
      notch on trailing edge). Not text-on-video, a real chat surface.
   2. Transparency is disciplined. Low tint + heavy blur + 1px inset.
      The plate reads through. The bubble never paints as a slab.
   3. A targeted radial vignette lives behind the bubble column so the
      plate darkens just where the text lands. No global scrim.
   4. Motion is spring. Scale-up + settle, no blur-to-focus kitsch.
      Older rows fade to 0 opacity and collapse off the top. No gray
      ghosts.
   5. Typography. Bubble text is system-ui SF, 15.5/1.44, weight 500.
      Contact label is mono, quiet, only on first row per speaker.
   ===================================================================== */

.chat-reel {
  position: relative;
  justify-self: end;
  align-self: end;
  width: 100%;
  max-width: 460px;
  height: 640px;
  margin-bottom: 4px;
  overflow: hidden;
  /* Crisp top mask. Above 180px of bottom anchor, bubbles read fully.
     Below, they quietly dissolve into the plate. No half-ghost zone. */
  mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent 56px,
    rgba(0, 0, 0, 0.32) 130px,
    rgba(0, 0, 0, 0.9) 200px,
    #000 240px,
    #000 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    transparent 56px,
    rgba(0, 0, 0, 0.32) 130px,
    rgba(0, 0, 0, 0.9) 200px,
    #000 240px,
    #000 100%);
}

/* No container vignette. Each bubble carries its own glass (heavy blur +
   low-tint fill + triple text-shadow) so the plate paints through and the
   reel reads as individual messages floating on the film, not a stacked
   column inside a dark box. Evan 2026-04-20 push-back, ADR-051. */

.chat-card { position: relative; z-index: 1; }

@media (max-width: 1120px) {
  .chat-reel {
    justify-self: stretch;
    max-width: 540px;
    height: 560px;
    margin: 0 auto;
  }
}
@media (max-width: 820px) {
  .chat-reel { height: 480px; }
}
@media (max-width: 520px) {
  .chat-reel { height: 440px; max-width: 100%; }
}

/* Passthrough wrapper. Bubbles paint directly on the plate, no card. */
.chat-card,
.chat-card-body {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  overflow: visible;
  display: block;
  mask-image: none;
  -webkit-mask-image: none;
}
.chat-card-head { display: none !important; }

.chat-feed {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 8px 6px;
  will-change: transform;
}

.chat-row {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
.chat-row[data-side="out"] { align-items: flex-end; }
.chat-row[data-side="in"]  { align-items: flex-start; }

/* Contact label. Monospace, quiet, small. Hidden when a speaker
   continues (consecutive rows from the same side). */
.chat-agent {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 238, 225, 0.46);
  margin: 0 0 5px 14px;
  text-decoration: none;
  padding: 1px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.22s ease, border-color 0.22s ease;
}
.chat-row[data-continue] .chat-agent { display: none; }
a.chat-agent:hover {
  color: rgba(245, 238, 225, 0.86);
  border-bottom-color: rgba(245, 238, 225, 0.28);
}

/* Bubble. Real iMessage fidelity. SF sans, crisp pill, tail on the
   trailing edge. Sierra-grade glass v9 (ADR-069, 2026-04-21 round N+4).
   Fix from v8: bubbles were TOO invisible. Fill and rim were both at
   near-zero, so on a cinematic plate the text read as naked text with
   no container. v9 lifts the rim and inset highlight so the bubble
   shape registers as real glass on any plate luminance, while the fill
   stays minimal so the film paints through. This is what "transparent
   but professional" means. Sierra does the same thing. Their cards
   have clear edges, not invisible ones.

   128px blur + saturate 2.1 for the warm plate read. Rim lifted to 0.14
   Sierra-grade glass v10 (2026-04-21 round N+5, ADR-072). v9 read as
   ghost text on the plate because the rim at 0.14/0.24 + fill at
   0.022-0.062 + blur at 128px was all pulling the bubble back into
   invisibility at the same time. v10 commits to frosted glass: blur
   44px so the film paints through as texture (not a smeared haze),
   rim at 0.22 (reader) / 0.36 (Sage) so the shape registers on any
   plate, fill in the 0.08-0.14 range so the bubble has presence
   without swallowing the background, two inset highlights for
   liquid-glass depth, deeper drop shadow so bubbles float. */
.chat-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 86%;
  padding: 13px 18px;
  border-radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Tight", system-ui, sans-serif;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.44;
  letter-spacing: -0.008em;
  word-wrap: break-word;
  will-change: transform, opacity, filter;
  backdrop-filter: blur(44px) saturate(1.7);
  -webkit-backdrop-filter: blur(44px) saturate(1.7);
  border: 1px solid rgba(245, 238, 225, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.16),
    inset 0 -1px 0 rgba(2, 1, 1, 0.10),
    0 30px 64px -28px rgba(2, 1, 1, 0.62),
    0 8px 20px -12px rgba(2, 1, 1, 0.32);
  text-shadow:
    0 1px 2px rgba(2, 1, 1, 0.34),
    0 1px 14px rgba(2, 1, 1, 0.24);
  transition: border-color 0.25s ease, box-shadow 0.35s ease;
}
.chat-bubble::before { content: none; }

/* Reader side (right). Warm cream-to-espresso fill, cream rim. Reads
   as the leader's own iMessage glass. */
.chat-row[data-side="out"] .chat-bubble {
  background: linear-gradient(180deg,
    rgba(245, 238, 225, 0.08) 0%,
    rgba(14, 10, 6, 0.14) 100%);
  color: #fbf3e4;
  border-color: rgba(245, 238, 225, 0.22);
  border-bottom-right-radius: 9px;
}

/* Sage side (left). Olive-sage identity. 2-layer fill: diagonal sage
   tint on top of a subtle cream-over-ink base. The glass catches the
   warm plate & Sage's identity registers unmistakably. */
.chat-row[data-side="in"] .chat-bubble {
  background:
    linear-gradient(135deg,
      rgba(155, 191, 107, 0.14) 0%,
      rgba(60, 92, 62, 0.04) 100%),
    linear-gradient(180deg,
      rgba(245, 238, 225, 0.05) 0%,
      rgba(8, 6, 4, 0.12) 100%);
  color: #fbf3e4;
  border-color: rgba(155, 191, 107, 0.36);
  border-bottom-left-radius: 9px;
}

/* Draft-line emphasis. When Sage quotes the drafted email's opening line,
   the text sits in standard iMessage glass — same bubble, no font change.
   The single quote marks do the framing work. A subtle amber underline
   on the quote text signals "this is the draft" without UI chrome. */
.chat-bubble em.draft {
  font-style: normal;
  color: #fbf3e4;
  background: linear-gradient(180deg,
    transparent 0 78%,
    rgba(232, 160, 79, 0.28) 78% 96%,
    transparent 96%);
  padding: 0 1px;
}

/* Proof card. Lives under Sage's bubble on proof beats as a compact
   editorial preview of the account Sage just surfaced. Replaces the
   old one-line chip. This is the single element that sells "real
   product, real account, real work done." ADR-167. */
.chat-artifact {
  position: relative;
  display: block;
  width: min(340px, 84%);
  margin-top: 10px;
  margin-left: 6px;
  padding: 14px 16px 14px 16px;
  border-radius: 14px;
  font-family: var(--mono);
  color: rgba(245, 238, 225, 0.92);
  background:
    linear-gradient(180deg,
      rgba(16, 11, 7, 0.18) 0%,
      rgba(8, 6, 4, 0.28) 100%);
  backdrop-filter: blur(64px) saturate(1.65);
  -webkit-backdrop-filter: blur(64px) saturate(1.65);
  border: 1px solid rgba(245, 238, 225, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 60px -30px rgba(2, 1, 1, 0.52),
    0 8px 18px -10px rgba(2, 1, 1, 0.24);
  opacity: 0;
  transform: translateY(6px) scale(0.986);
  will-change: opacity, transform;
}
.chat-artifact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(245, 238, 225, 0.06);
}
.chat-artifact-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 238, 225, 0.68);
}
.chat-artifact-kicker b { color: var(--cream, #F5EEE1); font-weight: 600; }
.chat-artifact-mark {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(155, 191, 107, 0.28), rgba(155, 191, 107, 0.10));
  border: 1px solid rgba(155, 191, 107, 0.30);
  color: #c8e0a0;
  flex: none;
}
.chat-artifact-mark svg { width: 9px; height: 9px; }
.chat-artifact-count {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 238, 225, 0.5);
}
.chat-artifact-count b { color: rgba(245, 238, 225, 0.92); font-weight: 600; }
.chat-artifact-title {
  font-family: 'Space Grotesk', 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--cream, #F5EEE1);
  margin-bottom: 4px;
}
.chat-artifact-role {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 238, 225, 0.56);
  margin-bottom: 10px;
}
.chat-artifact-role b { color: rgba(245, 238, 225, 0.88); font-weight: 600; }
.chat-artifact-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-artifact-signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: rgba(245, 238, 225, 0.92);
  background: linear-gradient(135deg,
    rgba(155, 191, 107, 0.10) 0%,
    rgba(60, 92, 62, 0.04) 100%);
  border: 1px solid rgba(155, 191, 107, 0.22);
}
.chat-artifact-signal-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #9bbf6b;
  box-shadow: 0 0 6px rgba(155, 191, 107, 0.7);
}

/* Typing indicator. Three dots, gentle bounce, iOS-accurate. */
.chat-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 1px;
}
.chat-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(245, 238, 225, 0.55);
  animation: chat-dot 1.25s ease-in-out infinite;
}
.chat-dots i:nth-child(2) { animation-delay: 0.2s; }
.chat-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 0.85; transform: translateY(-1.5px); }
}
.chat-dots[data-hidden] { display: none; }

.chat-text { display: inline; }
.chat-text[data-hidden] { display: none; }

@media (max-width: 820px) {
  .chat-bubble { font-size: 14px; padding: 10px 15px; max-width: 88%; border-radius: 19px; }
  .chat-feed   { padding: 18px 16px 6px; gap: 9px; }
  .chat-agent  { font-size: 8.5px; margin-left: 12px; }
}
@media (max-width: 520px) {
  .chat-bubble { font-size: 13.5px; padding: 9px 14px; }
}