/* Team demo: the lab's Team chat beside Mei's chat with Kelvin (Kelvin's dark theme).
   Tokens and shapes are Kelvin's own (src/labharness/web/static/app.css: the Team chat's .tm messages, .avatar,
   .approval and .approval-lessons). Sizes are in em on a frame whose font follows the container, so the demo scales
   like a screenshot; under 600px the Team chat becomes a strip of its three messages above the chat. */

.kd-team {
  --k-bg: #0f151c; --k-panel: #141c25; --k-raised: #19232e; --k-page: #0b1016;
  --k-text: #e6edf4; --k-text-2: #c2ccd6; --k-muted: #8d9aa8;
  --k-line: #24303c; --k-line-strong: #3b4a5a;
  --k-accent: #5aa2e6; --k-accent-ink: #08111a; --k-accent-soft: rgba(90, 162, 230, 0.16);
  --k-user: #1c2836; --k-code: #0b1016; --k-surface: #17212b;
  --k-ok: #3fb950; --k-warn: #e3b341; --k-warn-bg: #2b2412; --k-warn-line: #8f6f1c;
  --k-card: #17212b; --k-card-line: #2e3b49; --k-navy: #1b3a5c;
  --k-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --k-display: Georgia, Cambria, "Times New Roman", serif;
  --k-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  position: relative;
  container-type: inline-size;
  color: var(--k-text);
  text-align: left;
}
.kd-team [hidden] { display: none !important; }
.kd-team svg { flex: none; }
.kd-team-ico { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the frame: Team chat | Mei's chat ---------- */

.kd-team-frame {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  height: 41em;
  font: 400 clamp(12.5px, 2.02cqw, 14.5px) / 1.45 var(--k-sans);
  background: var(--k-bg);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 2em 5.5em rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.6);
  -webkit-font-smoothing: antialiased;
}
.kd-team-tp, .kd-team-cp { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.kd-team-tp { background: var(--k-page); border-right: 1px solid var(--k-line); }
.kd-team-cp { background: var(--k-bg); }

/* each pane's head: Kelvin's .lab-head */
.kd-team-head {
  flex: none; display: flex; align-items: center; gap: 0.55em; min-width: 0;
  height: 3.4em; padding: 0 0.85em 0 1.05em; border-bottom: 1px solid var(--k-line);
}
.kd-team-h { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-team-today { display: none; margin-left: auto; color: var(--k-muted); font-size: 0.88em; }
.kd-team-me {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.35em; min-width: 0;
  padding: 0.3em 0.5em; border-radius: 0.55em; color: var(--k-text-2); font-size: 0.88em;
}
.kd-team-me .kd-team-ico { width: 1.1em; height: 1.1em; }

/* people: initials on a muted ground (Kelvin's .avatar) */
.kd-team-av {
  flex: none; display: grid; place-items: center; width: 2.25em; height: 2.25em; border-radius: 50%;
  font-size: 0.88em; font-weight: 650; line-height: 1; color: #f2f6fa; background: var(--av, var(--k-navy));
}
.kd-team-av.ana { --av: #2f5d50; }
.kd-team-av.ben { --av: #5b4a78; }
.kd-team-av.mei { --av: var(--k-navy); }

/* ---------- Team chat (the lab's people, to each other) ---------- */

.kd-team-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0.2em 0.85em 0.9em; }
.kd-team-day { align-self: center; margin: 0.85em 0 0; font-size: 0.88em; color: var(--k-muted); }
.kd-team-tm { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 0.85em; }
.kd-team-tmb { min-width: 0; display: grid; justify-items: start; gap: 0.15em; }
.kd-team-tmh { display: flex; align-items: baseline; gap: 0.5em; margin: 0.1em 0.3em 0; font-size: 0.88em; color: var(--k-muted); }
.kd-team-tmh b { color: var(--k-text); font-weight: 600; }
.kd-team-tmh time { font-variant-numeric: tabular-nums; }
.kd-team-tmt {
  position: relative; max-width: 100%;
  padding: 0.4em 0.75em; border-radius: 0.95em;
  background: var(--k-surface); border: 1px solid var(--k-card-line);
  line-height: 1.45; overflow-wrap: anywhere;
}
/* Kelvin reading them: each message lit in turn, nothing added to the chat */
.kd-team-tmt::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  border: 1px solid rgba(90, 162, 230, 0.8); background: rgba(90, 162, 230, 0.11);
}
.kd-team-tm.read .kd-team-tmt::after { animation: kd-team-read 1.2s ease-out both; }
@keyframes kd-team-read { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* the message box at its foot (Kelvin's .team-form): for people */
.kd-team-form {
  flex: none; display: flex; align-items: center; gap: 0.5em;
  padding: 0.6em 0.75em 0.75em; border-top: 1px solid var(--k-line); background: var(--k-panel);
}
.kd-team-field {
  flex: 1; min-width: 0; padding: 0.42em 0.85em; border: 1px solid var(--k-line-strong); border-radius: 1em;
  background: var(--k-raised); color: var(--k-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kd-team-send {
  flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%;
  background: var(--k-accent); color: var(--k-accent-ink); border: 1px solid var(--k-accent);
  transition: transform 0.15s, background-color 0.25s, color 0.25s, border-color 0.25s;
}
.kd-team-send .kd-team-ico { width: 1.15em; height: 1.15em; stroke-width: 2.2; }
.kd-team-send.idle, .kd-team-input.empty + .kd-team-send { background: var(--k-raised); color: var(--k-muted); border-color: var(--k-line-strong); }
.kd-team-send.pressed { transform: scale(0.88); }

/* ---------- Mei's chat with Kelvin ---------- */

.kd-team-mark { width: 1.6em; height: 1.6em; border-radius: 0.42em; }
.kd-team-title { transition: opacity 0.45s; }
.kd-team-title.out { opacity: 0; }
.kd-team-acct { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45em; flex: none; color: var(--k-text-2); font-size: 0.92em; }
.kd-team-acct .kd-team-av { font-size: 0.96em; width: 2.1em; height: 2.1em; }

/* the thread's top edge fades, inside its padding: nothing is faded at rest, a line scrolled up fades out */
.kd-team-scroll {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.8em);
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.8em);
}
.kd-team-thread { display: flex; flex-direction: column; gap: 0.95em; padding: 1em 1.1em 0.6em; transition: opacity 0.45s; }
.kd-team-thread.out { opacity: 0; }

.kd-team-empty {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.8em;
  padding: 0 1em 1.4em; text-align: center; animation: kd-team-in 0.5s ease both;
}
.kd-team-empty img { width: 2.9em; height: 2.9em; border-radius: 0.8em; }
.kd-team-empty p { margin: 0; font: 400 1.45em/1.25 var(--k-display); color: var(--k-text); }

.kd-team-user { align-self: flex-end; max-width: 86%; display: grid; justify-items: end; gap: 0.2em; animation: kd-team-in 0.3s ease both; }
.kd-team-user time { margin-right: 0.45em; font-size: 0.88em; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.kd-team-bubble { background: var(--k-user); border-radius: 1.2em; padding: 0.55em 0.95em; overflow-wrap: anywhere; }

.kd-team-ai { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 0.65em; animation: kd-team-in 0.35s ease both; }
.kd-team-ai > img { width: 1.6em; height: 1.6em; border-radius: 0.42em; }
.kd-team-ai-body { display: grid; gap: 0.5em; min-width: 0; align-content: start; }
.kd-team-step { display: flex; align-items: center; gap: 0.45em; min-height: 1.6em; color: var(--k-muted); font-size: 0.92em; animation: kd-team-in 0.3s ease both; }
.kd-team-state { flex: none; display: grid; place-items: center; width: 1.15em; height: 1.15em; }
.kd-team-state.ok { color: var(--k-ok); }
.kd-team-state .kd-team-ico { width: 1.15em; height: 1.15em; stroke-width: 2.2; }
.kd-team-spin {
  width: 0.9em; height: 0.9em; border-radius: 50%;
  border: 2px solid var(--k-line-strong); border-top-color: var(--k-accent); animation: kd-team-spin 0.8s linear infinite;
}
@keyframes kd-team-spin { to { transform: rotate(360deg); } }
.kd-team-answer { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.kd-team-answer.live::after {
  content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.15em; vertical-align: -0.15em;
  border-radius: 2px; background: var(--k-text); animation: kd-team-blink 1s steps(2) infinite;
}
@keyframes kd-team-blink { 50% { opacity: 0; } }
.kd-team code { font-family: var(--k-mono); font-size: 0.9em; padding: 0.02em 0.35em; border-radius: 0.35em; background: var(--k-code); border: 1px solid var(--k-line); color: var(--k-text-2); }

/* approval card: Kelvin's .approval, amber, with the lab's lessons (.approval-lessons) */
.kd-team-appr {
  display: grid; gap: 0.5em; padding: 0.75em 0.9em;
  background: var(--k-warn-bg); border: 1px solid var(--k-warn-line); border-radius: 0.85em;
  animation: kd-team-in 0.4s var(--ease, ease) both;
  transition: background-color 0.3s, border-color 0.3s;
}
.kd-team-appr-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3em 0.5em; min-width: 0; font-weight: 600; }
.kd-team-appr-title > .kd-team-ico { color: var(--k-warn); }
.kd-team-where { margin-left: auto; padding: 0.1em 0.6em; border-radius: 999px; font-size: 0.88em; font-weight: 650; white-space: nowrap; background: #b3261e; color: #fff; }
.kd-team-appr ul { margin: 0; padding-left: 1.3em; display: grid; gap: 0.15em; font-variant-numeric: tabular-nums; }
.kd-team-lesson { display: flex; align-items: flex-start; gap: 0.5em; font-size: 0.92em; }
.kd-team-lesson .kd-team-ico { width: 1.15em; height: 1.15em; margin-top: 0.15em; color: var(--k-accent); }
.kd-team-lesson p { margin: 0; }
.kd-team-lesson b { font-weight: 600; }
.kd-team-act { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45em 0.5em; }
.kd-team-btn {
  font: 500 0.92em/1 var(--k-sans); padding: 0.55em 1em; border-radius: 0.6em;
  border: 1px solid var(--k-line-strong); background: var(--k-raised); color: var(--k-text);
  transition: transform 0.12s, opacity 0.25s;
}
.kd-team-btn.primary { background: var(--k-accent); border-color: var(--k-accent); color: var(--k-accent-ink); font-weight: 600; }
.kd-team-btn.pressed { transform: scale(0.95); filter: brightness(1.15); }
.kd-team-appr.busy .kd-team-btn { opacity: 0.55; }
.kd-team-count { color: var(--k-muted); font-size: 0.88em; }
.kd-team-appr > * { transition: opacity 0.18s; }
.kd-team-appr.folding > * { opacity: 0; }
/* answered: one line and the verdict under it */
.kd-team-appr.done { gap: 0.2em; padding: 0.55em 0.85em 0.6em; background: var(--k-card); border-color: var(--k-card-line); }
.kd-team-appr.done > * { animation: kd-team-in 0.35s ease both; }
.kd-team-appr.done .kd-team-appr-title { flex-wrap: nowrap; font-weight: 550; }
.kd-team-appr.done .kd-team-appr-title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-team-appr.done .kd-team-appr-title > .kd-team-ico:first-child { color: var(--k-ok); }
.kd-team-appr.done .kd-team-chev { width: 1em; height: 1em; margin-left: auto; color: var(--k-muted); }
.kd-team-verdict { padding-left: 1.8em; font-size: 0.95em; font-weight: 600; color: var(--k-ok); }

/* the composer */
.kd-team-composer {
  flex: none; display: flex; align-items: center; gap: 0.5em;
  margin: 0.35em 1.1em 1em; padding: 0.4em 0.4em 0.4em 0.95em;
  border: 1px solid var(--k-line-strong); border-radius: 1.1em; background: var(--k-panel);
}
.kd-team-input { position: relative; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--k-text); }
.kd-team-input.empty::before { content: "Ask Kelvin…"; color: var(--k-muted); }
.kd-team-input.over { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.4em); mask-image: linear-gradient(90deg, transparent 0, #000 1.4em); }
.kd-team-line { display: inline-block; white-space: pre; vertical-align: top; }
.kd-team-input.empty .kd-team-line { position: absolute; left: 0; top: 0; }
.kd-team-caret { display: none; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: var(--k-accent); animation: kd-team-caret 1s steps(1) infinite; }
.kd-team-input.typing .kd-team-caret { display: inline-block; }
@keyframes kd-team-caret { 50% { opacity: 0; } }

@keyframes kd-team-in { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }

/* ---------- Mei's pointer ---------- */

.kd-team-cursor {
  position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; pointer-events: none;
  opacity: 0; transform: translate(var(--cx, 60%), var(--cy, 60%));
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.kd-team-cursor.still { transition: none; }
.kd-team-cursor.on { opacity: 1; }
.kd-team-cursor svg { width: 100%; height: 100%; transition: transform 0.12s; }
.kd-team-cursor.down svg { transform: scale(0.82); }

/* ---------- wide: less height, as lines get longer ---------- */

@container (min-width: 760px) {
  .kd-team-frame { height: 38em; }
}

/* ---------- narrow: the Team chat as a strip of its messages, the chat below ---------- */

@container (max-width: 599px) {
  .kd-team-frame {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    height: 43.8em; font-size: clamp(12.5px, 3.68cqw, 13.5px);
  }
  .kd-team-tp { border-right: 0; border-bottom: 1px solid var(--k-line); }
  .kd-team-tp .kd-team-head { height: 2.25em; border-bottom: 0; }
  .kd-team-today { display: inline; }
  .kd-team-me, .kd-team-form, .kd-team-day { display: none; }
  .kd-team-list { flex: none; gap: 0.6em; padding: 0.35em 0.85em 0.85em; }
  .kd-team-tm { margin-top: 0; gap: 0.55em; }
  .kd-team-tm .kd-team-av { width: 2em; height: 2em; }
  .kd-team-tmb { display: block; font-size: 0.94em; line-height: 1.4; }
  .kd-team-tmh { display: inline; margin: 0 0.45em 0 0; font-size: 0.94em; }
  .kd-team-tmh b { margin-right: 0.4em; }
  .kd-team-tmt { display: inline; padding: 0; border: 0; border-radius: 0; background: none; }
  .kd-team-tmt::after { display: none; }
  .kd-team-tm::after {
    content: ""; position: absolute; inset: -0.3em -0.45em; border-radius: 0.6em; pointer-events: none; opacity: 0;
    border: 1px solid rgba(90, 162, 230, 0.8); background: rgba(90, 162, 230, 0.11);
  }
  .kd-team-tm.read::after { animation: kd-team-read 1.2s ease-out both; }
  .kd-team-cp .kd-team-head { height: 2.8em; }
  .kd-team-thread { gap: 0.85em; padding: 0.85em 0.85em 0.5em; }
  .kd-team-composer { margin: 0.3em 0.85em 0.85em; }
  .kd-team-empty p { font-size: 1.3em; }
}
@container (max-width: 519px) {
  .kd-team-frame { height: 46em; }
}
/* phones: the card keeps what is asked and the lesson; its smaller print, and the second step, step aside */
@container (max-width: 459px) {
  .kd-team-frame { height: 46.6em; }
  .kd-team-step.lab, .kd-team-where, .kd-team-pts, .kd-team-lim, .kd-team-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kd-team *, .kd-team *::before, .kd-team *::after { animation: none !important; transition: none !important; }
}

/* the record's line under a folded approval, and a step shown by its tool name */
.kd-team-record { padding-left: 2.05em; font-size: 0.86em; color: var(--k-muted); }
.kd-team-step.raw span:last-child { font-family: var(--k-mono); font-size: 0.95em; }