/* Bulk-mail preset, with the approved bouncer on the delivery path. */
#hook-demo{outline:none;border-radius:20px;background:var(--lesson-panel);box-shadow:0 0 0 1px var(--line),var(--shadow);padding:28px 24px 20px;animation:bulk-enter .35s ease both}
.hook-demo-stage{position:relative;min-height:550px;height:calc(100dvh - 195px);max-height:650px;isolation:isolate;display:flex;align-items:center}
.hook-workspace{width:100%;display:grid;grid-template-columns:minmax(100px,.85fr) minmax(180px,1.45fr) minmax(180px,1.55fr);gap:24px;align-items:center;position:relative;z-index:2}
.hook-worker,.hook-guard{margin:0;text-align:center;min-width:0}
.hook-agent-pose{position:relative;width:100%;max-width:170px;aspect-ratio:200/355;margin:auto}.hook-agent-pose img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}.hook-agent-pose .looking-up,.hook-agent-pose .frustrated{opacity:0}
#hook-demo[data-looking-up] .hook-agent-pose .looking-up{opacity:1}#hook-demo[data-looking-up] .hook-agent-pose .listening{opacity:0}
.hook-worker figcaption,.hook-guard figcaption{font:12px/1.4 var(--sans);color:var(--muted);margin-top:8px}
.hook-letter{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transform-origin:center;transition:transform .6s ease,opacity .45s}
.hook-letter-to{min-height:182px;padding:14px 13px 12px;border-bottom:1px solid var(--line);font:12px/1.5 var(--sans);color:var(--muted);transition:background .4s,box-shadow .4s}
.hook-addresses{display:flex;flex-direction:column;gap:5px;margin-top:8px;align-items:flex-start}.hook-addresses span{display:block;font:12px/1.3 var(--sans);padding:2px 5px;background:var(--bg);border:1px solid var(--line);border-radius:5px;color:var(--ink);animation:prompt-pop .35s ease both}
.hook-letter-subject{font:12px/1.5 var(--sans);padding:14px 13px}.hook-letter-subject strong{font-weight:600}.hook-letter-body{padding:0 13px 14px}.hook-letter-body i{display:block;height:3px;background:var(--line);margin-bottom:9px;width:100%;border-radius:2px}.hook-letter-body i:nth-child(2){width:90%}.hook-letter-body i:last-child{width:60%}
#hook-demo[data-packed] .hook-letter{transform:translateY(14px) scale(.32,.1);opacity:0}
#hook-demo[data-phase="returned"] .hook-letter-to,#hook-demo[data-frustrated] .hook-letter-to{background:color-mix(in srgb,var(--clay) 9%,var(--surface));box-shadow:inset 3px 0 var(--clay)}
.hook-guard{position:relative;align-self:center}.hook-guard-pose{position:relative;width:100%;aspect-ratio:330/325}.hook-guard-pose img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.hook-guard-pose .guard-stop{opacity:0}
#hook-demo[data-blocking] .guard-wait{opacity:0}#hook-demo[data-blocking] .guard-stop{opacity:1}
.hook-guard-speech{position:absolute;bottom:calc(100% + 15px);left:50%;transform:translateX(-50%);width:max-content;max-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px;box-shadow:var(--shadow);font:20px/1.3 var(--serif);text-align:center;opacity:0;visibility:hidden;transition:opacity .3s;z-index:5}
.hook-guard-speech::after{content:'';position:absolute;left:calc(50% - 7px);bottom:-8px;width:14px;height:14px;transform:rotate(45deg);background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 3px}
#hook-demo[data-speech] .hook-guard-speech{opacity:1;visibility:visible}
.hook-envelope{position:absolute;z-index:4;width:92px;height:65px;color:var(--muted);filter:drop-shadow(0 8px 8px #2a20151a);pointer-events:none;opacity:0}.hook-envelope svg{width:100%;height:100%;overflow:visible}.hook-envelope.visible{opacity:1}.hook-envelope.visible .skill-flap{animation:close-envelope .55s ease both}
.hook-result{visibility:hidden;min-height:28px;text-align:center;margin:0;color:var(--clay);font:21px/1.3 var(--serif);opacity:0;transition:opacity .4s}#hook-demo[data-phase="done"] .hook-result{opacity:1;visibility:visible}
#hook-demo .controls{display:grid;grid-template-columns:1fr auto 1fr;margin-top:20px}#hook-demo .source{font:13px/1.4 var(--sans);color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding:8px 0}#hook-demo .next{background:var(--clay);color:#fff;min-width:140px}#hook-demo-next{justify-self:end}
@media(max-width:600px){#hook-demo{padding:24px 16px 20px}.hook-demo-stage{height:auto;min-height:640px;align-items:center}.hook-workspace{grid-template-columns:1fr 1.35fr;grid-template-areas:'letter letter' 'worker guard';gap:90px 18px;padding:18px 0 24px}.hook-worker{grid-area:worker}.hook-letter{grid-area:letter;width:220px;max-width:100%;justify-self:center}.hook-guard{grid-area:guard}.hook-agent-pose{max-width:96px}.hook-guard-speech{font-size:16px;max-width:180px;bottom:calc(100% + 12px);padding:10px 13px}.hook-result{font-size:19px}#hook-demo .controls{grid-template-columns:1fr auto}#hook-demo .controls .next{grid-column:1/-1;grid-row:2;justify-self:center}#hook-demo .controls .source{grid-row:1}}
@media(prefers-reduced-motion:reduce){#hook-demo,#hook-demo *{animation:none!important;transition:none!important}}

/* A small defeated sigh, then the agent mutters his reply. */
.hook-agent-speech{position:absolute;z-index:6;bottom:calc(100% + 20px);left:0;width:max-content;max-width:180px;padding:14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);font:22px/1.3 var(--serif);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s,transform .3s}
.hook-agent-speech::after{content:'';position:absolute;bottom:-8px;left:40%;width:14px;height:14px;transform:rotate(45deg);background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 3px}
#hook-demo[data-agent-speaking] .hook-agent-speech{opacity:1;visibility:visible;transform:none}
#hook-demo[data-frustrated] .hook-agent-pose .listening,#hook-demo[data-frustrated] .hook-agent-pose .looking-up{opacity:0}
#hook-demo[data-frustrated] .hook-agent-pose .frustrated{opacity:1}
.hook-sigh{position:absolute;z-index:3;left:65%;top:32%;width:48px;height:28px;fill:color-mix(in srgb,var(--muted) 20%,var(--surface));stroke:color-mix(in srgb,var(--muted) 40%,var(--surface));stroke-width:1.3;opacity:0;pointer-events:none;transform-origin:left center}
#hook-demo[data-frustrated] .hook-sigh{animation:hook-sigh 1.1s ease-out both}
@keyframes hook-sigh{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:.75}100%{opacity:0;transform:translate(22px,9px) scale(1.1)}}
#hook-demo[data-paused="true"] .hook-sigh{animation-play-state:paused}
@media(max-width:600px){.hook-agent-speech{font-size:19px;padding:12px 16px;bottom:calc(100% + 18px)}}
@media(prefers-reduced-motion:reduce){#hook-demo .hook-sigh{animation:none!important}}