/* Dialogue overlay — Soviet constructivist. Owned by the dialogueUI agent. */
#dialogue-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* PHASE 42.4 — WAS A FIXED `height: 40%`, AND THAT BROKE THE MOMENT SKILL
     CHECKS EXISTED. A failed check is an option the node used to DELETE, so
     every gated node is now one to two rows longer, and at 1600x900 Guard
     Captain Roza's hub went to seven rows of which THREE were visible — the new
     locked row was below the fold, behind a scrollbar, in the one node the
     feature was written for. The photograph caught it; the probe, which reads
     the DOM, could not.
     The note on .dlg-text below already recorded that the choices are "the one
     part of this box a player must be able to see all of", so the box now grows
     with its content instead of clipping it: 40% is the FLOOR (short nodes do
     not shrink and jump), 56% the ceiling (a conversation must never take the
     whole screen). */
  min-height: 40%;
  max-height: 56%;
  display: flex;
  align-items: stretch;
  padding: 18px 28px 20px;
  background: linear-gradient(180deg, rgba(8, 6, 5, 0.88), rgba(12, 10, 8, 0.96));
  border-top: 4px solid var(--red);
  box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.5);
  z-index: 30;
  animation: dlg-in 0.16s steps(3) both;
}
@keyframes dlg-in { from { transform: translateY(24px); } to { transform: none; } }

/* Phase 12.6 — THE PORTRAIT IS GONE. The 148px canvas head and its painter were
   removed because the 3-D rig no longer matches a painted face, and two faces for
   one person read as a bug. What is left has to be rebalanced, not just widened:
   a 20px line of text run across a 2560px panel is far past a readable measure,
   so the block caps its width and centres, and a gold rule stands in for the
   frame the portrait used to give this panel its constructivist edge. */
.dlg-main {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 20px;
  border-left: 4px solid var(--gold);
}
.dlg-speaker {
  color: var(--gold);
  font-size: var(--fs-xl); font-weight: bold;
  letter-spacing: 0.22em;
}
.dlg-speaker::before { content: "★ "; }
.dlg-text {
  color: var(--paper);
  font-size: clamp(16px, 1.35vw, 21px); line-height: 1.35;
  margin: 6px 0 10px;
  /* Was 3.6em. The overlay is a fixed 40% of the viewport, so at 720p that
     reserve plus three choices overflowed and put a scrollbar on the options —
     the one part of this box a player must be able to see all of. 2.4em still
     stops one-line and three-line nodes from making the choices jump. */
  min-height: 2.4em;
  cursor: pointer;
  white-space: pre-wrap;
}
.dlg-choices {
  /* gap was 6px. Every row saved is a row of a gated node that stays above the
     fold, and 5px is still a visible separation between two bordered buttons. */
  display: flex; flex-direction: column; gap: 5px;
  /* ⚠️  `flex: 0 1 auto`, NOT `flex: 1 1 auto`. The overlay is absolutely
     positioned with bottom:0 and no `top`, so its height is shrink-to-fit
     around this content — which means the list has to ASK for its full content
     height for the box to grow. `flex: 1 1 auto` with min-height:0 says the
     opposite (it may shrink to nothing), and the box stayed at its 40% floor
     while the list scrolled: measured 213 px of viewport for 282 px of rows.
     `0 1 auto` sizes to content, and only shrinks once max-height caps the box
     — at which point overflow-y takes over, which is the intended fallback for
     a genuinely enormous node. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}
.dlg-choice {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--red);
  /* was 7px 14px — see the gap note above; a locked skill check makes every
     gated node one row longer, so the row budget matters now in a way it did
     not before Phase 42.4. */
  padding: 6px 14px;
  font-family: var(--font);
  font-size: clamp(13px, 1.05vw, 17px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.dlg-choice:hover { background: var(--red); color: #fff; }
.dlg-choice .dlg-num { color: var(--gold); font-weight: bold; margin-right: 10px; }

/* Phase 2 — tone tag chips on dialogue options (stern/compassionate/patriotic/cynical) */
.dlg-choice .dlg-tag {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 8px;
  border: 1px solid var(--paper);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.35);
  color: var(--paper);
  font-size: var(--fs-xs);
  font-weight: bold;
  letter-spacing: 0.14em;
}
.dlg-choice .dlg-tag-stern { border-color: var(--red); color: #e05858; }
.dlg-choice .dlg-tag-compassionate { border-color: var(--gold); color: var(--gold); }
.dlg-choice .dlg-tag-patriotic { border-color: var(--red); color: var(--red); }
.dlg-choice .dlg-tag-patriotic::before { content: "★ "; color: var(--gold); }
.dlg-choice .dlg-tag-cynical { border-color: var(--grey); color: var(--grey); }
.dlg-choice:hover .dlg-tag { background: rgba(0, 0, 0, 0.25); }

/* ---------- PHASE 42.4: skill checks ----------
   A check chip is the FIRST thing on the row, ahead of the tone tag, because
   that is the order the player reads it in: what it costs, then what you say.
   Gold with a tick when it is met; grey with a cross when it is not.

   ⚠️  .dlg-locked IS NOT :disabled. js/player/gamepad.js:77 selects D-pad
       candidates with a bare '#ui .dlg-choice' — no :not(:disabled), unlike the
       rest of that selector — so a disabled row would still take controller
       focus while its click did nothing. The row stays enabled and
       js/ui/dialogueUI.js answers the press with a dry-fire click instead.
   ⚠️  THE :hover RULE ABOVE PAINTS THE WHOLE BUTTON RED. Without the override
       here a locked row lights up exactly like a takeable one under the mouse,
       which is the one thing this feature must never do. */
.dlg-choice .dlg-check { border-color: var(--gold); color: var(--gold); }
.dlg-choice .dlg-check.failed { border-color: var(--grey); color: var(--grey); }
.dlg-choice.dlg-locked {
  border-color: var(--grey);
  color: var(--grey);
  opacity: 0.62;
  cursor: not-allowed;
}
.dlg-choice.dlg-locked:hover { background: var(--ink); color: var(--grey); }
.dlg-choice.dlg-locked .dlg-num { color: var(--grey); }
.dlg-choice.dlg-locked:hover .dlg-tag { background: rgba(0, 0, 0, 0.35); }
.dlg-hint {
  margin-top: auto;
  padding-top: 8px;
  color: var(--grey);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
}