/* Composer dock: cue, conversation log, text box, mic, send — part of the SIM skin; see style.css for the file order. */
/* ---- THE COMPOSER DOCK ---------------------------------------------------
 * Cue line, conversation, and one row of text box + mic + send. It moved out of the rail
 * because on a cold 390x844 load the box was 0x0 and at y=2095 once the drawer opened
 * (docs/architecture/backlog/mobile-first-visit.md). The dock claims only its own
 * footprint; #hud is pointer-events:none so the rest stays orbit-draggable.
 * ------------------------------------------------------------------------ */
/* The whole `chat` grid area at every viewport: beside an open rail, beside the collapsed
 * handle, or full-bleed on a phone — no width arithmetic. Line length is bounded on the
 * reading column (#transcript rows) instead. */
#chat-dock {
  grid-area: chat;
  min-width: 0;
  justify-self: stretch;
  width: 100%;
  /* `env(safe-area-inset-bottom)` keeps the row off an iPhone's home indicator. */
  padding: 0 10px max(10px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* The rail-closed column collapse lives in the `min-width: 900px` block (style.css), NOT
 * here: `#hud.rail-closed` outranks the phone media query's `#hud` and would give phones a
 * phantom second column. */

/* The one line that tells a stranger what this page is for. It steps aside once there is
   a conversation to read — `:has()` only; a browser without it drops the rule and keeps
   the line, which is the right way for this to fail. */
#chat-cue {
  margin: 0 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);   /* legible over the 3-D, whatever is behind */
}
#chat-cue .cue-more { color: var(--muted); }
#chat-cue strong {
  color: var(--text);
  font-weight: 650;
}
#chat-cue strong::before {
  content: "✦";
  margin-right: 6px;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--glow-50);
}
@media (min-width: 900px) { #chat-cue .cue-break { display: none; } }
#chat-dock:has(#transcript .turn) #chat-cue { display: none; }

/* the conversation, above the box you type into */
#chat-dock #transcript {
  max-height: min(34vh, 260px);
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(9, 12, 19, 0.42);            /* GLASS — Moxie shows through */
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
}
/* 11px mono was an instrumentation size in a panel a developer opened on purpose. This
   is the conversation a stranger came for, so it gets a readable one. */
#chat-dock #transcript .turn { font-size: 12.5px; }

/* HER SELF-TALK BEFORE ANYONE HAS SPOKEN: ONE ROW, ONE HEIGHT. Until the first `.turn`,
   ambient.js re-words a single `.mutter` row in place instead of appending one per quip
   (appending grew the dock 211 -> 431 px in 90 s on desktop and over her torso on a phone,
   because moxie/stage.js frames her once and never re-frames on dock growth). This holds
   that row at two lines whatever the quip says, so a new quip never moves the dock either.
   Two lines hold every line in ambient.json (the longest is 85 characters) from a 360 px
   phone up, because a phone gives the row the log's whole width and slimmer sides (below): at
   92% the two longest needed a third line at 360 and 375 px, and the clamp cut them off; the
   worst-wrapping one needs 46 characters a line, 304 px of this 11 px mono, and the full width
   alone left 302. test_liveliness 2b says every line in the file at 360x640. `:has()` only,
   like #chat-cue: without it the row just takes its own height. */
#chat-dock #transcript:not(:has(.turn)) .mutter {
  width: min(92%, 78ch);           /* the row's own bound, fixed: a new quip moves nothing */
}
#chat-dock #transcript:not(:has(.turn)) .mutter .msg {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 3em;                 /* two lines at the row's line-height of 1.5 */
}
@media (max-width: 640px) {
  #chat-dock #transcript:not(:has(.turn)) .mutter {
    width: 100%;
    max-width: 100%;
    padding-left: 6px;
    padding-right: 6px;
  }
}
/* …except where the log is a column BESIDE her (a landscape phone, style.css's short-viewport
   block): its height moves nothing there, and two lines of a 180-240 px column cut off 22 to
   55 of her 56 quips. There the row takes its own height, as every row after the first turn
   does. */
@media (max-width: 899px) and (max-height: 520px) {
  #chat-dock #transcript:not(:has(.turn)) .mutter { width: auto; }
  #chat-dock #transcript:not(:has(.turn)) .mutter .msg {
    display: inline;
    -webkit-line-clamp: none;
    overflow: visible;
    min-height: 0;
  }
}

/* `.sub` stays (cloud-transport.js finds #chat-status via `closest("section.sub")`) but
   reads as a glass card down here. */
#composer {
  border-top: none;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(9, 12, 19, 0.55);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.42);
}
#composer .row { gap: 6px; }
#composer input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;                 /* a real touch target at every width, not just phones */
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-ui);
  /* 16px is not a taste call: iOS Safari zooms the whole page when a focused field's text
     is smaller than 16px, and a zoomed page scrolls horizontally on a phone. */
  font-size: 16px;
  letter-spacing: 0;
}
#composer button {
  flex: none;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
}
#composer #mic-btn { display: inline-flex; align-items: center; gap: 6px; }
#composer .btn-ico { width: 15px; height: 15px; flex: none; }
/* Send is the primary action, so it looks like one. */
#composer #speech-btn {
  border-color: var(--cyan-dim);
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.09);
}
#composer #speech-btn:hover { background: rgba(0, 240, 255, 0.16); }
/* #mic-status and the injected #chat-status land here. Height-bounded so two status
   paragraphs can never push the box off a small screen. */
#composer p.hint {
  margin: 6px 2px 0;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.35;
  max-height: 2.8em;
  overflow: hidden;
}
#composer p.hint:empty { display: none; }