/* ═════ not an assistant, a character: one live chat log (kit/chatlog.js) ═════
   The run is as long as the log has beats (--units, set by the script, 16svh
   each); its stage stays on the screen while the scroll plays the log, which
   is the lab's own chat screen (home3.css .uq-chat, kit.css .lchat). */
.clog-run { position: relative; height: calc(var(--units, 20) * 16svh + 100svh); margin-top: clamp(8px, 2vw, 24px); }
.clog-stage { --phw: clamp(330px, 28vw, 420px); --gap: clamp(28px, 4vw, 72px); position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.clog-phone { --k: 1.04; position: relative; width: var(--phw); height: min(78svh, 760px); overflow: hidden; border-radius: 30px; box-shadow: 0 0 0 1px rgb(23 23 23 / 0.06), 0 30px 70px rgb(23 21 15 / 0.12); }
/* the log sits on the input and grows up from it; what no longer fits goes
   up under the pill at the top, fading as it goes */
.clog-phone > .clog-log { min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px); mask-image: linear-gradient(to bottom, transparent 0, #000 44px); }
.clog-log .lrow.is-future { display: none; }
/* the rows glide as one (chatlog.js glide), each message comes in softly,
   and the words fade in where the dots were (John, 17 Oct: "very smooth") */
.clog-rows { display: flex; flex-direction: column; }
.clog-log .lrow.is-in { animation: clog-in 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes clog-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.clog-log .lrow.just-said .lb-t, .clog-log .lrow.just-said .lpic { animation: clog-said 360ms ease both; }
@keyframes clog-said { from { opacity: 0; } }
/* the chat comes up into the section as it arrives */
.clog-stage > .clog-phone { opacity: 0; translate: 0 32px; transition: opacity 800ms ease, translate 1000ms var(--expo); }
.clog-run.in .clog-phone { opacity: 1; translate: 0 0; }
/* the room's own line: who joined */
.clog-log .lrow--sys { justify-content: center; padding: 0; margin: calc(18px * var(--k)) 0 calc(6px * var(--k)); }
.lsys { margin: 0; font-size: calc(12.5px * var(--k)); line-height: 1.3; color: hsl(240 2% 46%); text-align: center; }
/* a picture is typed like words first, then lands */
.clog-log .lrow--pic .lb { display: none; }
.clog-log .lrow--pic.is-typing .lb { display: block; }
.clog-log .lrow--pic.is-typing .lpic { display: none; }
/* one to one with Pip, then the group's pill and input once they join */
.clog-phone .clog-group { display: none; }
.clog-phone.is-group .clog-one { display: none; }
.clog-phone.is-group .lc-pill.clog-group { display: inline-flex; }
.clog-phone.is-group .lc-comp.clog-group { display: block; }
.clog-phone .lc-pill, .clog-phone .lc-comp { animation: clog-swap 420ms var(--expo) both; }
@keyframes clog-swap { from { opacity: 0; scale: 0.96; } }

/* the three, said on the sides as their part lands: left, right, left */
.clog-note { position: absolute; width: min(19em, calc(50% - var(--phw) / 2 - var(--gap) * 1.5)); opacity: var(--a, 0); translate: 0 calc((1 - var(--a, 0)) * 26px - var(--up, 0px)); transition: opacity 320ms ease; pointer-events: none; }
.clog-note--l { right: calc(50% + var(--phw) / 2 + var(--gap)); text-align: right; }
.clog-note--r { left: calc(50% + var(--phw) / 2 + var(--gap)); text-align: left; }
.clog-note[data-part="0"] { top: 24%; }
.clog-note[data-part="1"] { top: 40%; }
.clog-note[data-part="2"] { top: 58%; }
.clog-note h3 { margin: 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.clog-note p { margin: 10px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; color: var(--quiet); text-wrap: pretty; }

/* a phone held upright: the chat fills the screen under the one being said */
@media (max-width: 899px) {
  .clog-stage { --phw: min(100vw - 2 * var(--gutter), 420px); place-items: end center; padding-bottom: max(16px, 3svh); }
  .clog-phone { height: min(66svh, 600px); }
  /* the note being said stands just over the chat, clear of the bar at the top */
  .clog-note[data-part] { top: auto; bottom: calc(max(16px, 3svh) + min(66svh, 600px) + 22px); left: 0; right: 0; width: auto; max-width: 22em; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
  .clog-note h3 { font-size: 24px; }
  .clog-note p { margin-top: 6px; font-size: 15px; }
}

/* under reduced motion the whole log stands, with the three beside it */
.clog-run.is-still { height: auto; }
.clog-run.is-still .clog-stage { position: static; height: auto; padding: clamp(24px, 4vw, 48px) 0; }
.clog-run.is-still .clog-phone { height: auto; opacity: 1; translate: none; transition: none; }
.clog-run.is-still .clog-log { -webkit-mask-image: none; mask-image: none; }
.clog-run.is-still .clog-phone .lc-pill, .clog-run.is-still .clog-phone .lc-comp { animation: none; }
@media (max-width: 899px) {
  .clog-run.is-still .clog-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .clog-run.is-still .clog-note[data-part] { position: static; padding: 0; translate: none; }
}