/* NACHHALL – Dialogfenster mit Portraits */
#dialogue { position: absolute; left: 0; right: 0; bottom: 0; z-index: 45; pointer-events: none; }
#dialogue.show { pointer-events: auto; }
#dialogue.paused .dlg-box { opacity: 0.25; }
.dlg-box {
  position: relative; margin: 0 auto calc(2.2vh + var(--safe-b)); width: min(920px, calc(100% - 24px - var(--safe-l) - var(--safe-r)));
  min-height: 120px; padding: 18px 26px 18px; background: linear-gradient(180deg, rgba(8,10,14,0.88), rgba(6,7,10,0.95));
  border: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(127,216,230,0.35); border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6); transition: opacity 0.3s; cursor: pointer; z-index: 2;
}
#dlg-name { font-size: 12px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; min-height: 14px; }
#dlg-text { font-family: var(--font-story); font-size: clamp(15px, 1.65vw, 19px); line-height: 1.55; color: #eeeae2; min-height: 2.2em; }
#dlg-text em { color: #fff; font-style: italic; }
.dlg-box.thought #dlg-text { font-style: italic; color: #cfd8dc; }
.dlg-box.thought #dlg-name::after { content: ' · Gedanken'; color: var(--text-faint); letter-spacing: 0.2em; }
html[lang=en] .dlg-box.thought #dlg-name::after { content: ' · thoughts'; }
.dlg-box.narrator { text-align: center; }
.dlg-box.narrator #dlg-text { font-style: italic; color: #bdb7aa; }
.dlg-box.phone #dlg-text { color: #a9dbe8; font-style: italic; text-shadow: 1px 0 0 rgba(255,80,80,0.3), -1px 0 0 rgba(80,200,255,0.3); }
#dlg-next { position: absolute; right: 16px; bottom: 8px; color: var(--accent); animation: bob 1s ease-in-out infinite; font-size: 16px; }
@keyframes bob { 50% { transform: translateY(3px); } }
#dlg-important { position: absolute; left: 26px; top: -30px; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent-2); text-shadow: 0 0 12px rgba(240,179,100,0.8); animation: pulse 1.4s infinite; }

#dlg-choices { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
@media (orientation: landscape) and (max-height: 520px) { #dlg-choices { grid-template-columns: 1fr 1fr; } }
.dlg-choice {
  display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px; padding: 9px 12px; color: #d8d4ca; font-family: var(--font-story); font-size: clamp(14px, 1.5vw, 17px); min-height: 42px;
  transition: all 0.15s; animation: toastIn 0.3s ease backwards;
}
.dlg-choice:nth-child(2) { animation-delay: 0.05s; } .dlg-choice:nth-child(3) { animation-delay: 0.1s; } .dlg-choice:nth-child(4) { animation-delay: 0.15s; }
.dlg-choice .num { font-family: var(--font-ui); font-size: 11px; color: var(--text-faint); width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 2px; }
.dlg-choice .tag { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); flex-shrink: 0; }
.dlg-choice.sel, .dlg-choice:hover { border-color: rgba(127,216,230,0.55); background: rgba(127,216,230,0.08); color: #fff; }
.dlg-choice.sel .num { border-color: var(--accent); color: var(--accent); }
.dlg-choice.imp .txt::after { content: ' ◆'; color: var(--accent-2); font-size: 10px; }
body.has-touch .dlg-choice .num { display: none; }
#dlg-timer { height: 3px; background: rgba(255,255,255,0.08); margin-top: 10px; overflow: hidden; }
#dlg-timer-bar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--danger), var(--accent-2)); transition: width 0.1s linear; }

/* Portraits */
.dlg-portrait { position: absolute; bottom: calc(2.2vh + var(--safe-b) + 40px); width: clamp(120px, 16vw, 210px); aspect-ratio: 220 / 260; opacity: 0; transition: opacity 0.35s, transform 0.35s, filter 0.35s; z-index: 1; pointer-events: none; }
.dlg-portrait canvas { width: 100%; height: 100%; display: block; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 40px rgba(0,0,0,0.7); }
.dlg-portrait.left { left: max(calc(50% - 460px - 10px), calc(8px + var(--safe-l))); transform: translateX(-12px); }
.dlg-portrait.right { right: max(calc(50% - 460px - 10px), calc(8px + var(--safe-r))); transform: translateX(12px); }
.dlg-portrait.on { opacity: 1; transform: none; }
.dlg-portrait.dim { opacity: 0.45; filter: grayscale(0.6) brightness(0.7); }
/* Portraits oberhalb der Box */
.dlg-portrait { bottom: calc(2.2vh + var(--safe-b) + 128px); }
@media (max-height: 520px) {
  .dlg-box { min-height: 90px; padding: 10px 16px 12px; margin-bottom: calc(6px + var(--safe-b)); }
  #dlg-text { font-size: 14px; line-height: 1.45; }
  .dlg-portrait { width: clamp(80px, 13vw, 130px); bottom: calc(6px + var(--safe-b) + 98px); }
  .dlg-choice { padding: 6px 10px; min-height: 36px; font-size: 13px; }
}
@media (orientation: portrait) {
  .dlg-portrait { width: 26vw; }
}