/* =========================================================================
   BUILD — the chat surface for asking the app to change its own source.

   Layout follows the journals convention (.journal-panel / .jr-scroll): the
   panel itself stops scrolling and one child owns the scroll region, so the
   composer stays anchored at the bottom instead of riding off the end of a
   long conversation. Everything else reuses the eo-* primitives from
   empirium.css — .eo-btn, .eo-input, .eo-field — and the tokens.css palette;
   the bld-* classes only add what those do not already cover.
   ========================================================================= */
.bld-panel{ overflow:hidden; padding-bottom:0; }
.bld-panel .eo-page-head{ flex:0 0 auto; }
/* activate() mounts the cover banner as the panel's first child. Everywhere
   else the panel scrolls, so the banner keeps its natural height; here the
   panel is a fixed-height flex column, where a default flex-shrink:1 would
   squash it as the conversation grows. */
.bld-panel > .pg-banner-wrap{ flex:0 0 auto; }

/* ---------- Pairing ---------- */
.bld-setup{ display:flex; flex-direction:column; gap:12px; max-width:440px; padding:6px 0 20px; }
.bld-setup[hidden]{ display:none; }
.bld-setup .eo-input.bld-invalid{ border-color:var(--danger); }

/* ---------- Message log ---------- */
/* display:flex would out-rank plain [hidden], so the pairing state needs the
   explicit override on both the log and the composer. */
.bld-log{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px;
  padding:4px 0 18px;
}
.bld-log[hidden]{ display:none; }

.bld-msg{ display:flex; flex-direction:column; gap:4px; max-width:min(680px,86%); }
.bld-msg--user{ align-self:flex-end; align-items:flex-end; }
.bld-msg--assistant{ align-self:flex-start; }
.bld-msg-who{
  font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--faint); font-weight:700;
}
.bld-bubble{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:10px 14px; font-size:var(--fs-body); line-height:1.55; color:var(--text);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.bld-msg--user .bld-bubble{
  background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.32);
}
.bld-bubble--thinking{ color:var(--muted); }
.bld-bubble--error{
  background:rgba(var(--danger-rgb),.1); border-color:rgba(var(--danger-rgb),.4); color:var(--danger-soft);
}

/* Waiting-on-the-agent breath. Opacity only; flattened by the global
   reduced-motion / static guards, plus the explicit stops below so the bubble
   never freezes mid-fade. */
.bld-bubble--pulse{ animation:bldPulse 1.6s ease-in-out infinite; }
@keyframes bldPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .bld-bubble--pulse{ animation:none; opacity:.8; } }
html[data-motion="static"] .bld-bubble--pulse{ animation:none; opacity:.8; }

/* ---------- Composer ---------- */
.bld-composer{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:10px;
  padding:12px 0 18px; border-top:1px solid var(--line-soft);
}
.bld-composer[hidden]{ display:none; }
.bld-input{ flex:1; resize:none; max-height:160px; overflow-y:auto; }
.bld-composer .eo-btn{ flex:0 0 auto; }