/* ============================================================
   INTAKE LOADING — EMOTIVE
   The sales deck's f2 frame, recycled as the wait before intake:
   two rolling walls of concepts and consumers flanking the two
   figures, stacked and centred exactly as the deck stacks them.

   Three things this is NOT, each one a correction:
     - not full-screen. It lives in the main panel, with the chat
       still on the left, so the wait reads as part of the page.
     - not on ink. Cutting to black between two light screens was
       too cinematic; it runs on the platform ground.
     - not animated beyond the walls. The figures are typeset at
       their final values and hold still.

   There is no veil either. On ink, washing the centre back toward
   the ground reads as depth; on a pale ground it bleaches the
   photographs and bands into rings. The centre is held by
   composition instead: the walls are fixed-width flanks and the
   figures own the whole column between them.

   PP Telegraf throughout — no Favorit in the product. Everything
   is `em-` prefixed; il2.css and sf.css own `.l2-*` and `.sf-*`.
   ============================================================ */

.em-panel,
.em-chat {
  --em-ground: #f6fafd;        /* the platform's page ground */
  --em-ink: #050301;
  --em-hairline: #e5ebf1;
  --em-green: #3a8518;         /* the single platform accent */
  --em-green-deep: #3d6b24;
  --em-mist: #daebd1;
  --em-muted: #636c79;
  --em-faint: #9aa4af;
  --em-track-caps: .08em;
  --em-ease: cubic-bezier(.2, .7, .2, 1);
  font-family: "PPTelegraf", "PP Telegraf", system-ui, sans-serif;
}

/* ---------------- the main panel ---------------- */
.em-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: var(--em-ground);
  color: var(--em-ink);
}
.em-lightwash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 18% 8%,
    rgba(58, 133, 24, .05), transparent 62%);
}

/* ---------------- the two walls ---------------- */
/* Fixed flanks rather than the deck's absolute x-positions: the panel is
   narrower than a 1920 stage and its width moves with the chat, so each wall
   holds a share of it and the figures keep the middle.

   The two walls are deliberately NOT symmetrical. Products run two columns at
   different speeds, as the deck does — there are 19 distinct images, plenty to
   fill both without repeating. The people wall runs ONE wider column, because
   the photography is seven individuals: two columns show about eight cards at
   once, which cannot be done from seven faces without showing one of them
   twice. One column of bigger portraits is exact instead of nearly right, and
   it reads the diversity better besides. See em-build-assets.py. */
.em-wall {
  position: relative;
  flex: none;
  width: clamp(196px, 25%, 330px);
  overflow: hidden;
  z-index: 1;
  opacity: .72;
  display: flex;
  gap: 14px;
  padding: 0 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%);
}
/* Two columns again, now that there are nine distinct people to fill them —
   one image per person, dealt into disjoint columns, so no face can repeat
   anywhere on the wall. Slightly wider than the product wall because the
   portraits are cropped tall. */
.em-wall.r { width: clamp(196px, 24%, 324px); }
.em-col { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.em-roll {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: em-roll linear infinite;
  animation-play-state: paused;
}
.em-panel.run .em-roll { animation-play-state: running; }
@keyframes em-roll {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}
/* A run is one column tall, so the duration IS the speed, and it has to be
   re-tuned whenever the column lengths change. The deck's 44s worked out at
   about 65px/s, which Misaki read as too fast. These land near 18px/s — a card
   drifts past in roughly eight seconds. `rollSpeeds` in the verification
   script prints the measured px/s, so this is checked rather than guessed.

   s0/s1 are the two product columns; s2 is the single people column, whose
   cards are much taller and whose run is therefore much longer. */
.em-roll.s0 { animation-duration: 88s; }
.em-roll.s1 { animation-duration: 104s; }
.em-roll.s2 { animation-duration: 82s; }
.em-roll.s3 { animation-duration: 70s; }

/* On light ground the cards are platform cards: white, hairline, soft lift */
.em-kcard,
.em-pcard {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--em-hairline);
  box-shadow: 0 3px 12px rgba(5, 3, 1, .05);
  flex: none;
}
.em-kcard img,
.em-pcard img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* the person is the object, the words are the caption */
.em-say { padding: 12px 14px 14px; background: var(--em-mist); }
.em-say p {
  font-style: italic;
  font-size: 13px;
  line-height: 1.38;
  color: var(--em-ink);
  margin: 0;
}
.em-say span {
  display: block;
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--em-green-deep);
  margin-top: 7px;
}

/* ---------------- the centre: the deck's stack ---------------- */
.em-mid {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 32px 24px;
  text-align: center;
  /* the figures size off THIS column, not the viewport: the panel width moves
     with the chat and with the artboard's zoom, and a vw-based clamp would
     happily let 176,000,000 run past the edge */
  container-type: inline-size;
}
.em-eyebrow {
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--em-track-caps);
  text-transform: uppercase;
  color: var(--em-green);
}
.em-fig { display: flex; flex-direction: column; align-items: center; }
.em-num {
  font-weight: 700;
  font-size: clamp(26px, 12.5cqi, 62px);
  letter-spacing: -.03em;
  line-height: .98;
  color: var(--em-green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.em-cap {
  margin-top: 13px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: var(--em-track-caps);
  text-transform: uppercase;
  color: var(--em-muted);
  text-wrap: balance;
}

/* ---------------- the chat, open ---------------- */
/* Misaki: "I also want to maintain the current chat interaction on the left so
   the people can actually see the progress on the left side." So the thread is
   open for the whole wait, not shut to a rail.

   Almost nothing is needed here. `.i3-chat` already carries the width, ground,
   border and column layout, and `.i3-log` / `.i3-comp` carry the thread and
   the composer — em.css loads AFTER ei3/ei4.css so this can override, but the
   point is that it mostly shouldn't. Reusing the intake chat's own rules is
   what keeps the panel from moving when the two screens hand over.

   The width the chat takes back comes out of the walls, which is safe: they
   are `clamp(196px, 25%, 330px)`, so they narrow rather than overflow or push
   the centre column off-axis. */
.em-chat {
  /* The thread is read-only during the wait; nothing in it should look
     clickable except what actually is. */
  cursor: default;
}
.em-chat .i3-comp input { cursor: default; }
.em-chat .i3-comp button { opacity: .38; pointer-events: none; }

/* ---------------- the thinking rows ---------------- */
/* Loads on top of ei3.css's `.i3-chat`; this only adds the thinking rows,
   which is where the agent's train of thought belongs — in the chat, not
   floating over the photographs. There is no progress bar: the rows arriving
   are the progress. */
.em-chatline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--em-faint);
  animation: em-fade .45s var(--em-ease) both;
}
.em-chatline.live { color: var(--em-ink); font-weight: 600; }
.em-chatline > i.ti { font-size: 13px; color: var(--em-green); flex: none; }
@keyframes em-fade {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.em-dots { display: inline-flex; gap: 3px; align-items: center; flex: none; padding-top: 5px; }
.em-dots.v { flex-direction: column; padding-top: 0; gap: 4px; }
.em-dots i {
  width: 4px;
  height: 4px;
  border-radius: 900px;
  background: var(--em-green);
  display: block;
  animation: em-blink 1.1s infinite;
}
.em-dots i:nth-child(2) { animation-delay: .15s; }
.em-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes em-blink { 0%, 60%, 100% { opacity: .26 } 30% { opacity: 1 } }

/* ---------------- standalone artboard chrome ---------------- */
.em-artstage { position: fixed; inset: 0; background: #e5ebf1; display: flex; flex-direction: column; overflow: hidden; }
.em-artbar { height: 48px; flex: none; background: #050301; color: #fff; display: flex; align-items: center; gap: 16px; padding: 0 20px; font-size: 13px; }
.em-artbar__t { font-weight: 700; font-size: 14px; }
.em-artbar__n { color: rgba(255, 255, 255, .5); font-size: 12px; }
.em-artbar__sp { flex: 1; }
.em-artbar button { background: rgba(255, 255, 255, .12); border: none; color: #fff; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 900px; cursor: pointer; }
.em-artbody { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 22px; }
.em-artfit { transform-origin: top center; flex: none; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px rgba(5, 3, 1, .16); }

/* Reduced motion: the walls hold still. The composition, not the movement,
   is what carries the frame. */
@media (prefers-reduced-motion: reduce) {
  .em-panel.run .em-roll { animation-play-state: paused; }
  .em-chatline, .em-dots i { animation: none; }
}