/* ==========================================================================
   SPRINKLERDUDE UI KIT — STEP 3: DIALOGUE BOX AND TOASTS
   Paste after the step 2 HUD block.
   Covers ARCHITECTURE.md section 4: #4 Dialogue box and #5 Toast.

   Toasts live in the HUD's top area as its last row, so they always land
   directly under whatever the HUD is showing and can never sit on top of it.
   ========================================================================== */

/* 5.0 Tokens --------------------------------------------------------------- */
:root {
  --sd-violet-tint: #efe6fa;          /* Mr. Fernsby's portrait backing */
  --sd-dialogue-max: 760px;
  --sd-dialogue-max-h: 62%;           /* of the screen, then the text scrolls */
  --sd-portrait-size: 72px;
  --sd-portrait-size-sm: 56px;
  --sd-toast-max: 560px;
  --sd-toast-mark: 24px;
  --sd-dur-slow: 200ms;
  --sd-z-dialogue: 20;
}

/* 5.1 Toasts --------------------------------------------------------------- */
/* Markup: <div class="sd-hud__toasts"><div id="toast" class="sd-toast"></div></div>
   as the last child of .sd-hud__top. Add .is-showing to show it. */
.sd-hud__toasts {
  order: 9;
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sd-hud-gap);
  min-width: 0;
  pointer-events: none;
}
.sd-toast {
  --sd-toast-color: var(--sd-blue-text);
  display: flex;
  align-items: center;
  gap: var(--sd-sp-2);
  max-width: min(var(--sd-toast-max), 100%);
  min-height: 40px;
  padding: var(--sd-sp-1) var(--sd-sp-4) var(--sd-sp-1) var(--sd-sp-2);
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-size: var(--sd-fs-md);
  font-weight: 700;
  line-height: 1.25;
  box-shadow: var(--sd-shadow-btn);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--sd-dur-slow) ease-out,
              transform var(--sd-dur-slow) ease-out,
              visibility 0s linear var(--sd-dur-slow);
}
.sd-toast.is-showing {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.sd-toast::before {                   /* the kind is a mark, backed up by color */
  content: "i";
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sd-toast-mark);
  height: var(--sd-toast-mark);
  border-radius: var(--sd-r-sm);
  background: var(--sd-toast-color);
  color: var(--sd-paper);
  font-size: var(--sd-fs-sm);
  font-weight: 900;
  line-height: 1;
}
.sd-toast--good { --sd-toast-color: var(--sd-green-text); background: var(--sd-lime-tint); }
.sd-toast--good::before { content: "✔"; }
.sd-toast--bad { --sd-toast-color: var(--sd-red-text); background: var(--sd-red-tint); }
.sd-toast--bad::before { content: "!"; }

/* From 600px wide the top area becomes a grid so the toast row can span
   both columns. This replaces the flex row from step 2 at the same sizes. */
@container sd-viewport (min-width: 600px) {
  .sd-hud__top {
    display: grid;
    grid-template-columns: minmax(0, var(--sd-hud-objective-max)) auto;
    justify-content: space-between;
    align-items: start;
    gap: var(--sd-hud-gap) var(--sd-sp-3);
  }
  .sd-hud__toasts { grid-column: 1 / -1; }
}

/* 5.2 Dialogue box --------------------------------------------------------- */
/* The speaker sets two colors through data-who. Unknown speakers get ink. */
.sd-dialogue {
  --sd-speaker: var(--sd-ink);
  --sd-speaker-tint: var(--sd-paper-2);
  --sd-portrait: var(--sd-portrait-size-sm);
  position: absolute;
  left: 50%;
  bottom: calc(var(--sd-hud-inset) + var(--sd-safe-b));
  z-index: var(--sd-z-dialogue);
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: var(--sd-sp-3);
  width: calc(100% - 2 * var(--sd-hud-inset) - var(--sd-safe-l) - var(--sd-safe-r));
  max-width: var(--sd-dialogue-max);
  max-height: var(--sd-dialogue-max-h);
  padding: var(--sd-sp-4) var(--sd-sp-3) var(--sd-sp-3);
  border: var(--sd-bw-heavy) solid var(--sd-ink);
  border-radius: var(--sd-r-lg);
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  box-shadow: var(--sd-shadow-panel);
  cursor: pointer;
  animation: sd-rise var(--sd-dur-slow) ease-out;
}
.sd-dialogue[data-who="gus"] {
  --sd-speaker: var(--sd-blue-text);
  --sd-speaker-tint: var(--sd-blue-tint);
}
.sd-dialogue[data-who="fernsby"] {
  --sd-speaker: var(--sd-violet);
  --sd-speaker-tint: var(--sd-violet-tint);
}
@keyframes sd-rise {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Speaker name: a label stuck on the top edge of the box */
.sd-dialogue__name {
  position: absolute;
  top: 0;
  left: var(--sd-sp-3);
  transform: translateY(-62%);
  max-width: calc(100% - 2 * var(--sd-sp-3));
  padding: 3px var(--sd-sp-3) 4px;
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-sm);
  background: var(--sd-speaker);
  color: var(--sd-paper);
  font-family: var(--sd-font-display);
  font-stretch: condensed;
  font-size: var(--sd-fs-md);
  font-style: italic;
  font-weight: 800;
  line-height: var(--sd-lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-dialogue__name:empty { display: none; }

.sd-dialogue__portrait {
  flex: none;
  width: var(--sd-portrait);
  height: var(--sd-portrait);
  overflow: hidden;
  border: var(--sd-bw) solid var(--sd-ink);
  border-radius: var(--sd-r-md);
  background: var(--sd-speaker-tint);
}
.sd-dialogue__portrait > * { display: block; width: 100%; height: 100%; }

.sd-dialogue__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
}
.sd-dialogue__text {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 var(--sd-sp-2);
  overflow-y: auto;
  font-size: var(--sd-fs-md);
  line-height: var(--sd-lh);
  -webkit-user-select: text;
  user-select: text;
}
/* "Next ▸": add .sd-dialogue__next to a kit .sd-btn.sd-btn--sm.sd-btn--primary */
.sd-dialogue__next {
  flex: none;
  align-self: flex-end;
  margin-bottom: 3px;                 /* room for the button's hard shadow */
}

@container sd-viewport (min-width: 600px) and (min-height: 521px) {
  .sd-dialogue {
    --sd-portrait: var(--sd-portrait-size);
    gap: var(--sd-sp-4);
    padding: var(--sd-sp-5) var(--sd-sp-4) var(--sd-sp-3);
  }
  .sd-dialogue__name { left: var(--sd-sp-4); font-size: var(--sd-fs-lg); }
  .sd-dialogue__text { font-size: var(--sd-fs-lg); }
}

/* 5.3 Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-dialogue { animation: none; }
  .sd-toast,
  .sd-toast.is-showing { transform: none; transition: none; }
}