/* An illustrated two-person scene, with readable beats and no motion in the signup form. */
.dialogue-theatre{--bubble:#b7e3cb;--portrait-height:410px}
.theatre-screen{position:relative;isolation:isolate;border-radius:8px 8px 0 0;overflow:hidden;border:1px solid #68735b;border-bottom:3px solid #bd8c52;background:linear-gradient(#122d2bed,#13292b12 80%),url('/warpstop/assets/station-illustration-v2.webp') center bottom/100% auto no-repeat}
.dialogue-scene-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 15px 2px;color:#c9d3b6;font-size:12px;line-height:1.3;min-height:35px}
.dialogue-scene-meta>span:first-child{color:#f3c786}
[data-progress]{white-space:nowrap;font-variant-numeric:tabular-nums}
.dialogue-bubbles{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:17px;padding:15px 14px 18px;z-index:3;min-height:174px}
.dialogue-bubble{position:relative;min-height:135px;background:#f8ecd2;color:#20312e;padding:12px 14px;border:2px solid #1b2421;border-radius:8px;box-shadow:3px 4px 0 #06101388;transition:opacity .2s,box-shadow .2s;transform:rotate(-1deg)}
.dialogue-bubble::after{content:'';position:absolute;bottom:-10px;left:40%;height:14px;width:14px;transform:rotate(45deg);background:inherit;border-right:2px solid #1b2421;border-bottom:2px solid #1b2421}
.dialogue-bubble [data-speaker]{display:block;font-size:12px;font-weight:bold;letter-spacing:.6px;line-height:1.25;margin-bottom:9px;color:#476056}
.dialogue-bubble p{font-size:16px;line-height:1.36;font-weight:bold;margin:0;overflow-wrap:break-word}
.guest-bubble{background:var(--bubble);transform:rotate(1deg)}
.guest-bubble::after{left:54%}
[data-partner=customer]{--bubble:#e4c9ea}
.dialogue-bubble:not(.is-speaking){visibility:hidden;pointer-events:none}
.is-enhanced .dialogue-bubble.is-speaking{box-shadow:3px 4px 0 #06101388,0 0 16px #e4f0b229;animation:bubble-answer .3s ease-out}
.theatre-cast{position:relative;height:242px;overflow:hidden}
.theatre-cast::after{content:'';position:absolute;z-index:3;inset:auto 0 0;height:30px;pointer-events:none;background:linear-gradient(transparent,#08191b70)}
.theatre-actor{position:absolute;top:8px;width:0;height:var(--portrait-height);transform-origin:center 45%;animation:station-breath 5.8s ease-in-out infinite}
.theatre-actor img{position:absolute;left:0;top:0;height:var(--portrait-height);width:auto;max-width:none;pointer-events:none;filter:drop-shadow(3px 5px 1px #060f1766)}
.theatre-actor .pose-talk{opacity:0}
.theatre-actor.is-speaking .pose-talk{opacity:1}
.theatre-actor.is-speaking .pose-idle{opacity:0}
.actor-boss{left:25%;animation-delay:-2s}
.actor-boss .pose-idle{transform:translateX(-74%)}
.actor-boss .pose-talk{transform:translateX(-49%)}
.actor-robot{left:76%;--portrait-height:393px}
.actor-robot .pose-idle{transform:translateX(-48%) scaleX(-1)}
.actor-robot .pose-talk{transform:translateX(-73%) scaleX(-1)}
.actor-customer{left:76%;--portrait-height:330px;animation-delay:-1s}
.actor-customer .pose-idle{transform:translateX(-37%) scaleX(-1)}
.actor-customer .pose-talk{transform:translateX(-47%) scaleX(-1)}
.theatre-actor.is-speaking{animation:station-answer .45s ease-out both}
.dialogue-controls{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 0}
.dialogue-controls button{min-height:44px;border:1px solid #66837a;border-radius:5px;padding:9px 12px;background:#183c3c;color:#ceeee1;font-size:14px;line-height:1.3;cursor:pointer}
.dialogue-controls .another-scene{display:flex;justify-content:space-between;align-items:center;gap:13px;flex:1;background:#e8b970;color:#142c2d;border-color:#ffdba1;font-weight:bold}
.another-scene span{font-size:23px;line-height:1}
.dialogue-controls button:hover{filter:brightness(1.12)}
.dialogue-controls button[aria-pressed=true]{border-color:#a9e8d2;background:#34594e}
.dialogue-theatre figcaption{display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:1.5}
.dialogue-theatre figcaption span{padding:0;color:#b1c9ba}
.dialogue-theatre figcaption [data-hint]{color:#e0c49a}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.dialogue-theatre.is-suspended *{animation-play-state:paused!important}
@keyframes station-breath{0%,100%{translate:0 0}50%{translate:0 3px}}
@keyframes station-answer{0%{translate:0 5px;rotate:-1deg}65%{translate:0 -2px;rotate:.5deg}100%{translate:0 0;rotate:0deg}}
@keyframes bubble-answer{0%{translate:0 4px}100%{translate:0 0}}
@media(max-width:1080px){.dialogue-bubbles{gap:12px;padding:13px 11px 16px;min-height:203px}.dialogue-bubble{padding:11px 10px;min-height:174px}.dialogue-bubble p{font-size:15px}.dialogue-bubble [data-speaker]{font-size:12px;letter-spacing:0}.dialogue-theatre{--portrait-height:360px}.actor-robot{--portrait-height:348px}.actor-customer{--portrait-height:284px}.theatre-cast{height:215px}.dialogue-controls{gap:6px}.dialogue-controls button{padding:9px 10px}.dialogue-controls .another-scene{gap:8px;font-size:13px}}
@media(min-width:441px) and (max-width:820px){.dialogue-bubbles{min-height:175px}.dialogue-bubble{min-height:145px}.dialogue-bubble p{font-size:16px}}
@media(max-width:440px){.dialogue-bubbles{min-height:226px;gap:11px;padding:12px 9px 16px}.dialogue-bubble{min-height:194px;padding:10px 9px}.dialogue-bubble p{font-size:15px;line-height:1.4}.dialogue-bubble [data-speaker]{font-size:12px;margin-bottom:8px}.dialogue-scene-meta{font-size:12px;padding:12px 10px 0;gap:8px}.dialogue-theatre{--portrait-height:325px}.actor-robot{--portrait-height:317px}.actor-customer{--portrait-height:259px}.theatre-cast{height:195px}.dialogue-controls .another-scene{flex-basis:100%;font-size:14px}.dialogue-controls>[data-pause],.dialogue-controls>[data-next-line]{flex:1}.dialogue-motto{display:none}}
@media(prefers-reduced-motion:reduce){.dialogue-theatre *{animation:none!important;transition:none!important}}