/* Receva AI — sample call console. Consumes root tokens (tokens.css). No new colour values.

   The transcript is presented as a live call in progress: the AI's turns and the caller's
   turns alternate as chat bubbles, a typing indicator runs between them, and the H.O.M.E.
   gates resolve as the conversation actually satisfies them.

   Degradation, in order:
     no JS          -> the thread stays empty (as before this change) and the surrounding
                       copy, gates heading and outcome frame still read
     reduced motion -> every turn and gate renders at once, no typing, no timer
     off-screen     -> playback suspends (see site.js)

   Only opacity/transform animate. Nothing here loops forever: the call plays once and
   stops on a real end state, with an explicit Replay. */

/* ---------- console shell ---------- */
.cc{background:var(--color-bg-container);border:var(--border-hairline);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-sm)}

.cc__bar{display:flex;align-items:center;gap:var(--space-3);min-height:46px;
  padding:var(--space-2) var(--space-4);background:var(--surface-dark);color:var(--on-dark-text)}
.cc__live{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  font:600 11px/1 var(--font-sans);letter-spacing:.09em;text-transform:uppercase}
.cc__dot{width:7px;height:7px;border-radius:50%;background:var(--on-dark-accent);flex-shrink:0}
.cc.is-playing .cc__dot{animation:ccPulse 1.9s var(--ease-in-out) infinite}
@keyframes ccPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--on-dark-accent) 55%,transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--on-dark-accent) 0%,transparent)}
}
.cc__from{font-size:13px;color:var(--on-dark-muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cc__timer{margin-left:auto;flex-shrink:0;font:600 13px/1 var(--font-sans);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

.cc__progress{height:2px;background:var(--on-dark-border)}
.cc__progressFill{height:100%;width:0;background:var(--color-accent);
  transition:width 420ms var(--ease-out)}

/* ---------- thread ---------- */
.cc__thread{display:flex;flex-direction:column;gap:var(--space-3);
  height:clamp(340px,44vh,440px);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--space-4) var(--space-4) var(--space-6);scroll-behavior:smooth}

.cc__row{display:flex;gap:10px;align-items:flex-end;max-width:88%}
.cc__row--caller{margin-left:auto;flex-direction:row-reverse}
.cc__row.is-pending{display:none}
.cc__row.is-in{animation:ccIn 320ms var(--ease-out) both}
@keyframes ccIn{from{opacity:0;transform:translateY(10px) scale(.985)}}

.cc__avatar{width:28px;height:28px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font:700 11px/1 var(--font-sans);letter-spacing:.02em;
  background:var(--color-primary);color:var(--color-text-on-dark)}
.cc__row--caller .cc__avatar{background:var(--color-bg-contrast);color:var(--color-text-muted);
  border:1px solid var(--color-border)}
.cc__row--office .cc__avatar{background:var(--color-accent-strong);color:var(--color-text-on-dark)}
.cc__row.is-tail .cc__avatar{visibility:hidden}

.cc__group{display:flex;flex-direction:column;gap:5px;min-width:0}
.cc__who{font:600 10px/1 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-text-muted);padding:0 2px}
.cc__row--caller .cc__who{text-align:right}
.cc__row--office .cc__who{color:var(--color-accent-strong)}

.cc__bubble{padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;
  background:var(--color-primary);color:var(--color-text-on-dark);
  border-bottom-left-radius:var(--radius-sm);text-wrap:pretty}
.cc__row--caller .cc__bubble{background:var(--color-bg-contrast);color:var(--color-text);
  border-bottom-left-radius:16px;border-bottom-right-radius:var(--radius-sm)}
.cc__row--office .cc__bubble{background:color-mix(in srgb,var(--color-accent) 14%,transparent);
  color:var(--color-text);border:1px solid color-mix(in srgb,var(--color-accent) 40%,transparent)}

/* typing indicator — same side and colour as the turn it precedes */
.cc__typing{display:flex;gap:4px;align-items:center;padding:14px 16px;border-radius:16px;
  background:var(--color-primary);border-bottom-left-radius:var(--radius-sm)}
.cc__row--caller .cc__typing{background:var(--color-bg-contrast);
  border-bottom-left-radius:16px;border-bottom-right-radius:var(--radius-sm)}
.cc__typing i{width:6px;height:6px;border-radius:50%;background:var(--color-text-on-dark);
  opacity:.45;animation:ccBlink 1.25s var(--ease-in-out) infinite}
.cc__row--caller .cc__typing i{background:var(--color-text-muted)}
.cc__typing i:nth-child(2){animation-delay:.16s}
.cc__typing i:nth-child(3){animation-delay:.32s}
@keyframes ccBlink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* end-of-call marker */
.cc__end{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2);
  font:600 11px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-muted)}
.cc__end::before,.cc__end::after{content:"";height:1px;flex:1;background:var(--color-border)}

/* Before mount, a server-rendered transcript sits in the thread and reads as it always did;
   the clock and progress bar are meaningless until playback owns the turns. */
.cc:not(.cc--ready) .cc__timer,.cc:not(.cc--ready) .cc__progress{visibility:hidden}
.cc__thread .turn{margin:0 0 var(--space-3)}

/* ---------- footer ---------- */
.cc__foot{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-3) var(--space-4);border-top:var(--border-hairline);
  background:var(--color-bg)}
.cc__foot .cap{margin:0}
.cc__controls{margin-left:auto;display:flex;gap:var(--space-2)}
.cc__btn{display:none;align-items:center;gap:7px;height:30px;padding:0 13px;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-full);
  background:transparent;color:var(--color-text-muted);cursor:pointer;
  font:600 11px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
.cc--ready .cc__btn{display:inline-flex}
.cc__btn:hover{color:var(--color-primary);border-color:var(--color-primary)}
.cc__glyph{width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor}

/* ---------- gates: pending until the call satisfies them ---------- */
.gate.is-pending>span:first-child{color:var(--color-text-muted);opacity:.6}
.gate.is-pending .tag{background:transparent;color:var(--color-text-muted);opacity:.5;
  border:1px dashed var(--color-border-strong)}
.gate.is-resolved .tag{animation:ccPop 380ms var(--ease-out) both}
@keyframes ccPop{from{opacity:0;transform:translateY(-3px) scale(.9)}}

.outcome.is-pending{opacity:.62}
.outcome{transition:opacity 460ms var(--ease-out)}
.outcome.is-resolved{animation:ccIn 460ms var(--ease-out) both}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .cc__thread{height:clamp(300px,58vh,400px);padding:var(--space-3) var(--space-3) var(--space-4);
    gap:10px}
  .cc__row{max-width:94%}
  .cc__bubble{font-size:14px;padding:10px 13px}
  .cc__avatar{width:24px;height:24px;font-size:10px}
  .cc__bar{gap:var(--space-2)}
  .cc__from{font-size:12px}
  .cc__foot{padding:var(--space-3)}
  .cc__controls{margin-left:0;width:100%}
  .cc__btn{flex:1 1 0;height:40px;justify-content:center}
}

/* ---------- reduced motion: the whole call, at once, still ---------- */
@media (prefers-reduced-motion:reduce){
  .cc__thread{scroll-behavior:auto}
  .cc.is-playing .cc__dot{animation:none}
  .cc__row.is-in,.gate.is-resolved .tag,.outcome.is-resolved{animation:none}
  .cc__typing i{animation:none}
  .cc__progressFill{transition:none}
}