/* 인트로 타임라인 (intro-player.js): 대화창 맨 위 영상 카드 → 대사 말풍선 → 첫 장면 메시지가 차례로 */
.intro-timeline{margin:0 0 8px}
.intro-card{position:relative;max-width:600px;margin:0 auto 18px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#000;box-shadow:0 14px 40px #0006}
.intro-video{display:block;width:100%;max-height:min(56dvh,520px);object-fit:contain;background:#000}
.thread.intro-running .intro-card{position:sticky;top:8px;z-index:2}
.intro-card.on-stage{max-width:none;box-shadow:none}
.intro-card.on-stage .intro-bar::before{content:"▶";color:var(--accent);font-size:11px}
.intro-card.stage-done .intro-bar::before{content:"✓";color:var(--fg-2)}
.intro-stage-video{position:absolute;inset:0;z-index:3;width:100%;height:100%;max-height:none;object-fit:contain;background:#000}
.intro-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);font-size:13px}
.intro-bar>div{margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intro-bar small{color:var(--fg-2);margin-left:4px}
.intro-sound,.intro-skip,.intro-replay{flex:none;border:1px solid var(--line);background:transparent;color:var(--fg);border-radius:var(--radius-pill,999px);padding:6px 13px;font:600 12px var(--font-sans,inherit);cursor:pointer}
.intro-sound{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)}
.intro-sound:hover,.intro-skip:hover,.intro-replay:hover{background:#ffffff14}
.intro-lines>*{animation:intro-in .45s ease both}
.intro-narration{margin:18px auto;max-width:94%;color:var(--fg-2);font-size:14px;font-style:italic;line-height:1.7;text-align:center;white-space:pre-wrap}

/* 영상이 도는 동안 첫 장면 메시지는 숨겨 두었다가, 끝나면 하나씩 흘러나오게 한다. */
.app .chat .thread.intro-running #messages{display:none}
.thread.intro-reveal #messages>*{animation:intro-in .5s ease both}
.thread.intro-reveal #messages>:nth-child(2){animation-delay:.8s}
.thread.intro-reveal #messages>:nth-child(3){animation-delay:1.6s}
.thread.intro-reveal #messages>:nth-child(4){animation-delay:2.4s}
.thread.intro-reveal #messages>:nth-child(n+5){animation-delay:3.2s}
/* 첫 메시지 안에서도 지문 → 대사 순서로 */
.thread.intro-reveal #messages>:first-child .message-body>*{animation:intro-in .5s ease both}
.thread.intro-reveal #messages>:first-child .message-body>:nth-child(n+3){animation-delay:.9s}
.composer [inert]{opacity:.45;transition:opacity .3s}
/* 입력창 바로 위 인트로 조작 줄: 왼쪽 상태, 오른쪽 소리 켜기 · 건너뛰기 */
.intro-controls{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0 8px}
.intro-controls[hidden]{display:none}
.intro-now{margin-right:auto;display:inline-flex;align-items:center;gap:6px;color:var(--fg-2);font-size:12px;font-weight:600}
.intro-now::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:intro-dot 1.2s ease-in-out infinite}
.intro-controls .intro-skip{border-color:transparent;background:#fff;color:#111;padding:8px 18px;font-size:13px;box-shadow:0 6px 18px #0006}
.intro-controls .intro-skip:hover{background:#e9e9ee}
@keyframes intro-dot{50%{opacity:.3}}
@keyframes intro-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro-now::before{animation:none}.intro-lines>*,.thread.intro-reveal #messages>*,.thread.intro-reveal #messages .message-body>*{animation:none}}
@media(max-width:600px){.intro-card{border-radius:12px;margin-bottom:14px}.intro-bar{padding:8px 10px}.intro-sound,.intro-skip,.intro-replay{padding:6px 10px}}