/* ==========================================================================
   The agent app, as a mountable component.

   Every rule is scoped under .chama-agent, the element ChamaAgent.mount()
   is given, so nothing here can reach the page around it. The only rules
   that touch html/body are the two under .chama-agent-page, a class the
   page-mode mount adds to both; the embed never sets it, so the homepage
   keeps its own ground, fonts and scrolling.

   Sizing is container relative, not viewport relative: the root is a size
   container, and every clamp that used vw/vh uses cqw/cqh instead, so the
   app lays itself out against the box it was given.
   ========================================================================== */

/* ---------- page mode only: the dark full screen ground ---------- */

html.chama-agent-page {
  background: #0e0c0a;
  color: #ece7dc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100%;
}

body.chama-agent-page {
  margin: 0;
  min-height: 100%;
  background: #0e0c0a;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---------- the root ---------- */

.chama-agent {
  --paper: #f3f0e8;
  --ink: #141412;
  --quiet: #66635c;
  --ember: #f4581f;

  --ground: #0e0c0a;
  --ground-deep: #080706;
  --text: #ece7dc;
  --text-dim: #9a938a;
  --text-faint: #6d665e;
  /* driven from the state machine each frame: the firelight in the room */
  --flamelight: 0.35;
  --line: color-mix(in srgb, rgba(243, 240, 232, 0.14), var(--ember) calc(var(--flamelight) * 16%));
  --line-strong: color-mix(in srgb, rgba(243, 240, 232, 0.28), var(--ember) calc(var(--flamelight) * 12%));
  --ember-soft: rgba(244, 88, 31, 0.55);

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(1rem, 3.2cqw, 2.75rem);
  --col: 44rem;

  container-type: size;
  container-name: chama-agent;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.chama-agent-mode-page {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.chama-agent-mode-embed {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ---- the room while a phone keyboard is up ----------------------------
   A soft keyboard does not shrink the layout viewport on iOS: the browser
   keeps the page its full height and scrolls it so the focused field is
   visible, which walks the top bar and most of the transcript off the top
   of the screen. So the moment the composer takes focus on a touch device
   the room stops being a piece of the page and becomes a sheet pinned to
   the visual viewport: agent.js writes --vv-height and --vv-top from
   window.visualViewport, and the room is exactly the visible area, never
   larger, never offset. Nothing scrolls it, so nothing can move it.

   Embedded, the host box keeps its own height in the flow, so the page
   behind the sheet does not reflow and comes back untouched on blur. */

.chama-agent.kb-pin {
  top: var(--vv-top, 0px);
  height: var(--vv-height, 100%);
}
.chama-agent-mode-embed.kb-pin {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 60;
}

/* pinned, the transcript is the only scroller that matters: it is open
   whatever the seat says, since the room is the whole screen and there is
   nothing else a finger could mean, and an overscroll at either end must
   not reach the page sitting behind the sheet */
.chama-agent-mode-page .stage,
.chama-agent.kb-pin .stage {
  overscroll-behavior-y: contain;
}
.chama-agent.kb-pin.seat-pending .stage {
  overflow-y: auto;
}

/* and the room spends what the keyboard left on the conversation: the fine
   print steps out (it was read before the tap) and every band of padding
   comes in, so the transcript keeps the space instead of the chrome */
.chama-agent.kb-open .fineprint { display: none; }
.chama-agent.kb-open .topbar {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.chama-agent.kb-open .composer {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}
.chama-agent.kb-open .column {
  padding-top: 1rem;
  padding-bottom: 1.2rem;
}
.chama-agent.kb-open .suggest { margin-bottom: 0.4rem; }

.chama-agent * { box-sizing: border-box; }

.chama-agent ::selection {
  background: var(--ember);
  color: #fff;
}

.chama-agent a { color: inherit; }

.chama-agent :focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.chama-agent .skip-link {
  position: absolute;
  z-index: 40;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.6rem 0.8rem;
  transform: translateY(-220%);
  background: var(--ember);
  color: #fff;
  font-size: 0.78rem;
  text-decoration: none;
}
.chama-agent .skip-link:focus { transform: translateY(0); }

/* ---------- the flame ---------- */

.chama-agent .flame-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* a calm ground for the conversation: transparent where the flame lives,
   deepening across the column so text stays readable at full blaze */
.chama-agent .scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--scrim-left, 45%);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 12, 10, 0) 0%, rgba(14, 12, 10, 0.34) 38%, rgba(14, 12, 10, 0.55) 72%, rgba(14, 12, 10, 0.55) 100%);
  opacity: 0;
  transition: opacity 700ms ease;
}
.chama-agent .scrim.on { opacity: 1; }

.chama-agent .vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 105%, rgba(14, 12, 10, 0) 30%, rgba(8, 7, 6, 0.55) 100%);
}

/* ---------- shell ---------- */

.chama-agent .shell {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* grid items default to min-width auto, which would let the suggestion
     row's intrinsic width push the whole column past the container */
  grid-template-columns: minmax(0, 1fr);
}
.chama-agent .shell > * { min-width: 0; }

.chama-agent .label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- top bar ---------- */

.chama-agent .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--pad);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 7, 6, 0.82), rgba(8, 7, 6, 0.24));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.chama-agent .brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  padding: 0.2rem 0.1rem;
}
.chama-agent .brand:hover .brand-name { color: var(--ember); }
.chama-agent .brand-name {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 160ms ease;
}
.chama-agent .mark {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  filter: drop-shadow(0 0 7px rgba(244, 88, 31, 0.45));
}

.chama-agent .hud {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}
.chama-agent .hud > div {
  display: inline-flex;
  align-items: baseline;
  gap: 0.34rem;
}
.chama-agent .hud .sep { color: var(--line-strong); }
.chama-agent .hud b {
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.chama-agent .hud b.live { color: var(--ember); }

.chama-agent .topbar-right {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6cqw, 1.4rem);
  min-width: 0;
}

/* with no brand link beside it, the right cluster is the whole bar, so the
   HUD keeps the same right-aligned run it has on the full screen page */
.chama-agent-mode-embed .topbar-right { flex: 1 1 auto; }

/* On the home page the paper headline just above the room already says
   "Talk to the intelligent flame", so the opening keeps only its line
   of instruction. Full screen at /agent keeps the greeting. */
.chama-agent-mode-embed .opening h1 { display: none; }

/* Embedded, the room's top edge is already a hard cut from paper into the
   dark, so the bar keeps its glass but drops its rule: one seam, not two.
   The bar also sits a little lower, so the reader crosses into darkness
   before the instruments appear. */
.chama-agent-mode-embed .topbar {
  border-bottom: 0;
  padding-top: clamp(1rem, 2.6cqh, 1.9rem);
  /* the glass still hides the stage scrolling under it, but it is mixed
     from the room's own ground, so the bar leaves no band at the top edge
     where the page's dark lead-in runs straight into the room */
  background: linear-gradient(180deg, var(--ground) 58%, rgba(14, 12, 10, 0));
}

/* and the room does not end on the fine print: it keeps a breath of dark
   below the composer, so the page returns to paper on empty ground */
.chama-agent-mode-embed .composer {
  padding-bottom: clamp(1.8rem, 4.6cqh, 3.6rem);
}

/* the quiet way out of the embed, in the same key as the HUD and Tune */
.chama-agent .fullscreen-link {
  flex: none;
  color: var(--text-dim);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.36rem 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.chama-agent .fullscreen-link:hover,
.chama-agent .fullscreen-link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--ember-soft);
}

/* the way back up, for a thumb: on a phone the seated room owns every
   gesture, so the bar states the exit in words. Shown by the touch media
   block below; a mouse leaves with the wheel and never needs it. */
.chama-agent .leave-link {
  display: none;
  flex: none;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.36rem 0;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.chama-agent .leave-link:focus-visible,
.chama-agent .leave-link:active {
  color: var(--paper);
  border-bottom-color: var(--ember-soft);
}

.chama-agent .tune-wrap { position: relative; flex: none; }

.chama-agent .tune-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.36rem 0.7rem;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.chama-agent .tune-btn:hover,
.chama-agent .tune-btn[aria-expanded="true"] {
  color: var(--paper);
  border-color: var(--ember-soft);
  background: rgba(244, 88, 31, 0.10);
}
.chama-agent .tune-btn.touched {
  animation: chama-tunetouch 1500ms cubic-bezier(0.2, 0.7, 0.2, 1) 1;
}
@keyframes chama-tunetouch {
  0% { color: #9a938a; border-color: rgba(243, 240, 232, 0.14); box-shadow: 0 0 0 0 rgba(244, 88, 31, 0); }
  14% { color: #fff; border-color: #f4581f; background: rgba(244, 88, 31, 0.34); box-shadow: 0 0 26px 2px rgba(244, 88, 31, 0.45); }
  100% { color: #9a938a; border-color: rgba(243, 240, 232, 0.14); box-shadow: 0 0 0 0 rgba(244, 88, 31, 0); }
}

.chama-agent .tune-pop {
  position: absolute;
  top: 3.1rem;
  right: max(0.75rem, var(--pad));
  z-index: 30;
  width: min(19rem, calc(100cqw - 2rem));
  padding: 1rem 1.05rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: rgba(16, 14, 12, 0.72);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
.chama-agent .tune-pop[hidden] { display: none; }

.chama-agent .tune-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.chama-agent .tune-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.chama-agent .tune-reset {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.15rem 0.1rem;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.chama-agent .tune-reset:hover { color: var(--ember); border-bottom-color: var(--ember-soft); }

.chama-agent .tune-row { margin-bottom: 0.95rem; }
.chama-agent .tune-row label,
.chama-agent .tune-legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.45rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0;
}
.chama-agent .tune-row label span,
.chama-agent .tune-legend span {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.chama-agent input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1.1rem;
  background: transparent;
  cursor: pointer;
  display: block;
}
.chama-agent input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--ember) 0%, var(--ember) var(--fill, 50%), rgba(243, 240, 232, 0.18) var(--fill, 50%), rgba(243, 240, 232, 0.18) 100%);
}
.chama-agent input[type="range"]::-moz-range-track {
  height: 2px;
  background: rgba(243, 240, 232, 0.18);
}
.chama-agent input[type="range"]::-moz-range-progress {
  height: 2px;
  background: var(--ember);
}
.chama-agent input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.39rem;
  border-radius: 50%;
  background: #ffd7b0;
  border: 0;
  box-shadow: 0 0 12px rgba(244, 88, 31, 0.7);
}
.chama-agent input[type="range"]::-moz-range-thumb {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #ffd7b0;
  border: 0;
  box-shadow: 0 0 12px rgba(244, 88, 31, 0.7);
}

.chama-agent .hue-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chama-agent .hue-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    hsl(0, 92%, 55%), hsl(60, 92%, 55%), hsl(120, 92%, 55%),
    hsl(180, 92%, 55%), hsl(240, 92%, 55%), hsl(300, 92%, 55%), hsl(360, 92%, 55%));
}
.chama-agent .hue-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    hsl(0, 92%, 55%), hsl(60, 92%, 55%), hsl(120, 92%, 55%),
    hsl(180, 92%, 55%), hsl(240, 92%, 55%), hsl(300, 92%, 55%), hsl(360, 92%, 55%));
}
.chama-agent .hue-slider::-moz-range-progress { background: transparent; }
.chama-agent .hue-slider::-webkit-slider-thumb { margin-top: -0.28rem; }
.chama-agent .swatch {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--flamecolor);
  box-shadow: 0 0 12px color-mix(in srgb, var(--flamecolor), transparent 35%);
}

.chama-agent .seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}
.chama-agent .seg button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0.42rem;
  padding: 0.42rem 0.2rem;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.chama-agent .seg button:hover { color: var(--text); }
.chama-agent .seg button[aria-checked="true"] {
  color: #fff;
  background: rgba(244, 88, 31, 0.5);
}

.chama-agent .tune-note {
  margin: 0.5rem 0 0;
  color: var(--text-faint);
  font-size: 0.62rem;
  line-height: 1.45;
}

@container chama-agent (max-width: 46rem) {
  .chama-agent .hud .opt { display: none; }
}
@container chama-agent (max-width: 30rem) {
  .chama-agent .hud .hud-latency { display: none; }
  .chama-agent .hud .hud-model { display: none; }
  .chama-agent .hud .sep:first-of-type { display: none; }
}

/* ---------- conversation ---------- */

.chama-agent .stage {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 88, 31, 0.4) transparent;
  -webkit-overflow-scrolling: touch;
}
/* embedded, the transcript is only a scroll target once the room is seated:
   its bottom edge resting on the bottom of the viewport. Until then a wheel or
   a finger over the room belongs to the page. */
.chama-agent.seat-pending .stage {
  overflow-y: hidden;
}
.chama-agent .stage::-webkit-scrollbar { width: 9px; }
.chama-agent .stage::-webkit-scrollbar-track { background: transparent; }
.chama-agent .stage::-webkit-scrollbar-thumb {
  background: rgba(244, 88, 31, 0.32);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.chama-agent .stage::-webkit-scrollbar-thumb:hover { background: rgba(244, 88, 31, 0.6); background-clip: padding-box; }

.chama-agent .column {
  width: min(100%, var(--col));
  margin-inline: auto;
  padding: clamp(1.5rem, 5cqh, 3.5rem) var(--pad) 2.4rem;
}

@container chama-agent (min-width: 64rem) {
  .chama-agent .column {
    margin-left: max(0px, min(calc(50% - 2rem), calc(100% - var(--col))));
    margin-right: 0;
  }
}

/* empty state */

.chama-agent .opening h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.5rem, 7.2cqw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.062em;
  line-height: 0.9;
  text-wrap: balance;
}
.chama-agent .opening h1 em {
  font-style: normal;
  color: var(--ember);
  text-shadow: 0 0 34px rgba(244, 88, 31, 0.4);
}
.chama-agent .opening p {
  margin: 0 0 1.9rem;
  max-width: 34rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}
.chama-agent .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.chama-agent .chip {
  appearance: none;
  background: rgba(243, 240, 232, 0.03);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.79rem;
  letter-spacing: -0.005em;
  padding: 0.5rem 0.8rem;
  border-radius: 99px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.chama-agent .chip:hover {
  color: var(--paper);
  border-color: var(--ember-soft);
  background: rgba(244, 88, 31, 0.09);
  transform: translateY(-1px);
}

.chama-agent .opening.dissolving {
  animation: chama-dissolve 480ms ease forwards;
}
@keyframes chama-dissolve {
  to { opacity: 0; transform: translateY(-10px); filter: blur(6px); }
}

/* transcript */

.chama-agent .turn { margin: 0 0 2.1rem; }

.chama-agent .turn-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chama-agent .turn-you {
  margin-left: auto;
  max-width: 32rem;
  padding-right: 0.95rem;
  border-right: 1px solid var(--ember-soft);
  text-align: right;
}
.chama-agent .turn-you .turn-label {
  color: color-mix(in srgb, #c9683c, var(--ember) calc(30% + var(--flamelight) * 70%));
}
.chama-agent .turn-you .turn-body {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

.chama-agent .turn-flame {
  padding-left: 0.95rem;
  border-left: 1px solid var(--line-strong);
}
.chama-agent .turn-flame .turn-label {
  color: color-mix(in srgb, var(--text-faint), var(--ember) calc(var(--flamelight) * 22%));
}
.chama-agent .turn-flame .turn-body {
  color: #f6f2ea;
  font-size: 1.06rem;
  line-height: 1.6;
  letter-spacing: -0.014em;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.chama-agent .turn-body { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }

.chama-agent .turn-flame .turn-body a {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid var(--ember-soft);
  overflow-wrap: anywhere;
}
.chama-agent .turn-flame .turn-body a:hover {
  color: #ff7a44;
  border-bottom-color: #ff7a44;
}

.chama-agent .turn-system {
  padding-left: 0.95rem;
  border-left: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 2.1rem;
}
.chama-agent .turn-system.ok { color: var(--ember); }

/* ---------- the wisp ----------
   Not an icon of a flame: a small canvas holding a live piece of the fire,
   burning whatever colour the fire is burning. It is used twice, and only
   ever once at a time: as the indicator that holds the place of a reply that
   has not started, and as the cursor at the end of the text while it streams.
   The particles, the colour and the loop are all in agent.js; the CSS only
   places the box. No image, no font, no request. */

.chama-agent .wisp {
  display: block;
  width: 26px;
  height: 30px;
}

/* the place the reply will appear, held from the moment you send */
.chama-agent .turn-thinking .turn-body { min-height: 1.7em; }
.chama-agent .wisp-wrap {
  display: inline-block;
  width: 26px;
  height: 30px;
  margin: -0.5em 0 -0.55em;
  vertical-align: -0.55em;
}

.chama-agent .caret {
  display: inline-block;
  width: 26px;
  height: 30px;
  margin: -0.5em 0 -0.55em 0.05em;
  vertical-align: -0.55em;
}

.chama-agent .frag {
  animation: chama-fragin 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.chama-agent .word {
  display: inline;
  animation: chama-wordin 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes chama-wordin {
  from { opacity: 0; transform: translateY(0.5em); }
  to { opacity: 1; transform: none; }
}
@keyframes chama-fragin {
  from { opacity: 0; transform: translateY(0.32em); }
  to { opacity: 1; transform: none; }
}

/* ---------- composer ---------- */

.chama-agent .composer {
  padding: 0 var(--pad) max(0.85rem, env(safe-area-inset-bottom));
}
.chama-agent .composer-inner {
  width: min(100%, var(--col));
  margin-inline: auto;
}
@container chama-agent (min-width: 64rem) {
  .chama-agent .composer-inner {
    margin-left: max(0px, min(calc(50% - 2rem), calc(100% - var(--col))));
    margin-right: 0;
  }
}

/* the starters stay reachable for the whole conversation: one quiet line
   of glass pills riding just above the composer */
.chama-agent .suggest {
  position: relative;
  margin: 0 0.15rem 0.5rem;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
.chama-agent .suggest[hidden] { display: none; }
.chama-agent .suggest.in { animation: chama-suggestin 460ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes chama-suggestin {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.chama-agent .suggest-track {
  display: flex;
  max-width: 100%;
  gap: 0.4rem;
  padding: 0.2rem 0.1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.chama-agent .suggest-track::-webkit-scrollbar { display: none; }

.chama-agent .pill {
  flex: none;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.36rem 0.72rem;
  background: rgba(16, 14, 12, 0.55);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.chama-agent .pill:hover {
  color: var(--paper);
  border-color: var(--ember-soft);
  background: rgba(244, 88, 31, 0.12);
  transform: translateY(-1px);
}

.chama-agent .bar {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.6rem 0.6rem 0.6rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 1.05rem;
  background: rgba(16, 14, 12, 0.62);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: border-color 220ms ease, box-shadow 260ms ease;
}
.chama-agent .bar.focused {
  border-color: var(--ember-soft);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(244, 88, 31, 0.16), 0 0 42px rgba(244, 88, 31, 0.2);
}

.chama-agent textarea {
  flex: 1;
  display: block;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
  padding: 0.45rem 0;
  max-height: 8.4rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 88, 31, 0.4) transparent;
}
.chama-agent textarea::placeholder { color: var(--text-faint); }
.chama-agent textarea:focus-visible { outline: 0; }

/* the send button keeps to itself: nothing it does leaves its own circle,
   so it can never crowd or cross the bar's edge, at any width, and the bar
   growing to several lines only moves it down with the last line */
.chama-agent .send {
  appearance: none;
  /* the UA default button padding (1px 6px) skews the containing block
     Chromium gives absolutely positioned children, dragging the busy orb
     off centre. Zero it; the arrow is grid-centred and needs no padding. */
  padding: 0;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(243, 240, 232, 0.05);
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.chama-agent .send > * { grid-area: 1 / 1; }
.chama-agent .send:hover:not(:disabled) {
  color: #fff;
  border-color: var(--ember);
  background: var(--ember);
}
.chama-agent .send:active:not(:disabled) {
  background: #d8480f;
  border-color: #d8480f;
}
.chama-agent .send:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}
.chama-agent .send-arrow { width: 1.05rem; height: 1.05rem; display: block; }

/* ---------- the ember orb ----------
   While a reply is on its way the disc's interior is molten: white gold at
   the core cooling to ember, breathing slowly. It is painted as a true
   circle, and the gradient reaches full transparency well inside the disc's
   radius, so the dimmest frame of the breath can never leave a square behind.
   The disc clips it as well, and nothing here casts a shadow. */

.chama-agent .send-orb {
  display: none;
  /* a button is a quirky containing block: auto-sized abspos children
     shrink and drift, and oversized grid children start-align. Explicit
     size anchored at the middle is the only centring that holds. */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.4rem;
  height: 2.4rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle 1.25rem at 50% 50%,
    rgba(255, 249, 234, 0.98) 0%,
    rgba(255, 214, 143, 0.86) 12%,
    rgba(252, 146, 54, 0.62) 26%,
    rgba(226, 80, 22, 0.34) 40%,
    rgba(150, 40, 8, 0.10) 52%,
    rgba(90, 22, 4, 0) 62%);
  opacity: 1;
  pointer-events: none;
}
.chama-agent .send:disabled { cursor: default; }
.chama-agent .send.busy {
  position: relative;
  overflow: hidden;
  border-color: rgba(244, 88, 31, 0.5);
  background: rgba(244, 88, 31, 0.14);
}
.chama-agent .send.busy .send-arrow { display: none; }
.chama-agent .send.busy .send-orb {
  display: block;
  animation: chama-orb 1.2s ease-in-out infinite alternate;
}
@keyframes chama-orb {
  from { opacity: 0.46; transform: translate(-50%, -50%) scale(0.84); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

.chama-agent .fineprint {
  margin: 0.7rem 0.35rem 0;
  color: var(--text-faint);
  font-size: 0.665rem;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.chama-agent .fineprint a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--line); }
.chama-agent .fineprint a:hover { color: var(--ember); border-color: var(--ember-soft); }

.chama-agent .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .chama-agent *,
  .chama-agent *::before,
  .chama-agent *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* the orb stops breathing and simply sits there, still and lit; the wisp
     is drawn once by agent.js and never animates */
  .chama-agent .send-orb {
    animation: none !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1;
  }
  .chama-agent .caret { opacity: 0.9; }
}

/* ---------- what a phone pays for ----------
   The glass panels are stacked over a canvas that repaints every frame, so
   on a phone each blurred layer is a full screen read back and re-blurred
   sixty times a second, which is most of the cost of the room. The fire is
   a soft, low frequency field: a dark panel at high opacity over it is very
   nearly the same picture as a blurred one, for none of the work. Touch
   pointers only, so laptops and desktops keep the glass. */

@media (hover: none) and (pointer: coarse) {
  /* the exit exists where the trap exists: touch, embedded */
  .chama-agent-mode-embed .leave-link { display: inline-block; }

  .chama-agent .topbar,
  .chama-agent .bar,
  .chama-agent .pill,
  .chama-agent .tune-pop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .chama-agent .topbar {
    background: linear-gradient(180deg, rgba(8, 7, 6, 0.96), rgba(8, 7, 6, 0.72));
  }
  .chama-agent-mode-embed .topbar {
    background: linear-gradient(180deg, var(--ground) 58%, rgba(14, 12, 10, 0));
  }
  .chama-agent .bar { background: rgba(16, 14, 12, 0.88); }
  .chama-agent .pill { background: rgba(16, 14, 12, 0.8); }
  .chama-agent .tune-pop { background: rgba(16, 14, 12, 0.96); }

  /* A held finger belongs to the fire, not to the text. Long pressing the
     room used to start selection and raise the callout loupe, which ended
     the play mid gesture; on touch the chrome and the flame give up
     selection entirely, and only the conversation keeps it, because a
     visitor may well want to copy what the flame said. pan-y and
     pinch-zoom stay allowed, so the page, the transcript and the zoom all
     behave exactly as before; only the long press changes hands. */
  .chama-agent {
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  .chama-agent .turn-body,
  .chama-agent textarea,
  .chama-agent input {
    -webkit-user-select: text;
    user-select: text;
  }
}