/* Extracted from src/scenarios/twin.njk style block 1 */
/* ============ twin.njk · page-scoped ============ */

/* §01 真机体验 — 扫码区 */
.tw-demo-top{
    display:grid; grid-template-columns:200px minmax(0,1fr);
    gap:38px; align-items:center;
    background:linear-gradient(135deg,#fff 0%,var(--scn-paper) 100%);
    border:1px solid var(--scn-line);
    border-radius:18px; padding:32px 36px;
    margin-bottom:30px;
    box-shadow:var(--scn-shadow-sm);
}
.tw-qr{
    flex-shrink:0; text-align:center;
    background:#fff; padding:14px;
    border-radius:14px; border:1px solid var(--scn-line);
    box-shadow:0 12px 28px rgba(45,38,28,.08);
}
.tw-qr img{ display:block; width:158px; height:158px; margin-bottom:10px; border-radius:6px; }
.tw-qr small{
    display:block;
    font-family:var(--font-mono);
    font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--text-muted);
}
.tw-demo-tx .tw-tag{
    display:inline-flex; align-items:center; gap:7px;
    margin-bottom:11px;
    font-family:var(--font-mono);
    font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent);
}
.tw-demo-tx .tw-tag::before{ content:""; width:18px; height:1px; background:currentColor; opacity:.5; }
.tw-demo-tx h3{
    margin:0 0 11px;
    font-size:clamp(21px,2.1vw,26px); font-weight:850;
    letter-spacing:-.012em; line-height:1.26; color:var(--text-primary);
}
.tw-demo-tx h3 .accent-text{ color:var(--accent); }
.tw-demo-tx p{ margin:0; font-size:14.5px; line-height:1.78; color:var(--text-secondary); }
.tw-url-pill{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:15px;
    font-family:var(--font-mono);
    font-size:12px; font-weight:600; letter-spacing:.04em;
    background:#fff; border:1px solid var(--scn-line);
    padding:8px 14px; border-radius:999px;
    color:var(--text-primary);
}
.tw-url-pill i{ color:var(--accent); font-size:13px; }

/* §01 三种视频模式卡片 */
.tw-mode{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.tw-mode-head{ padding:24px 26px 4px; }
.tw-mode-num{
    display:inline-flex; align-items:center; gap:7px;
    margin-bottom:9px;
    font-family:var(--font-mono);
    font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent);
}
.tw-mode-num::before{ content:""; width:16px; height:1px; background:currentColor; opacity:.6; }
.tw-mode-head h4{ margin:0 0 9px; }
.tw-mode-head p{ margin:0 0 20px; }
.tw-mode-video{
    position:relative;
    aspect-ratio:9/16;
    margin:0 26px 26px;
    border-radius:14px; overflow:hidden;
    background:#1a1510;
    box-shadow:0 8px 20px rgba(45,38,28,.16);
}
.tw-mode-video > img.poster{
    width:100%; height:100%;
    object-fit:cover; object-position:top center;
    display:block;
    filter:brightness(.66);
    transition:filter .3s var(--ease-out);
}
.tw-mode:hover .tw-mode-video > img.poster{ filter:brightness(.54); }
.tw-mode-play{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:60px; height:60px;
    border:none; border-radius:50%;
    background:#fff; color:var(--accent);
    font-size:19px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px rgba(45,38,28,.34);
    transition:transform .25s var(--ease-out);
}
.tw-mode-play i{ margin-left:4px; }
.tw-mode:hover .tw-mode-play{ transform:translate(-50%,-50%) scale(1.1); }
.tw-mode-vtag{
    position:absolute; bottom:12px; left:12px;
    font-family:var(--font-mono);
    font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:#fff;
    background:rgba(31,24,20,.55);
    padding:5px 10px; border-radius:999px;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.tw-mode-vtag.is-live{ background:rgba(6,174,86,.85); }
.tw-mode-vtag.is-live::before{
    content:"●"; margin-right:5px; color:#a4f3c5;
    animation:twLivePulse 1.6s infinite;
}
@keyframes twLivePulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} }

/* §01 卡片内嵌动效演示 — 卡片不再是"等视频上线"的破窗，
   即便没有视频也能讲故事：知识库聊天气泡 / 商品卡片 / 训练流程 */
.tw-demo-mini{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:14px; gap:7px;
    background:linear-gradient(180deg, rgba(20,15,12,.42) 0%, rgba(20,15,12,.86) 78%);
    z-index:1; pointer-events:none;
}
.tw-demo-mini .tw-mini-bubble{
    display:inline-flex; gap:6px; align-items:flex-start;
    max-width:88%;
    padding:8px 11px; border-radius:11px;
    font-size:11.5px; line-height:1.5;
    background:rgba(255,255,255,.94); color:#241f1b;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.tw-demo-mini .tw-mini-bubble.is-user{
    align-self:flex-end;
    background:var(--accent); color:#fff;
}
.tw-demo-mini .tw-mini-prod{
    align-self:flex-start;
    display:flex; gap:8px; align-items:center;
    padding:7px 10px; border-radius:11px;
    background:rgba(255,255,255,.96);
    box-shadow:0 4px 12px rgba(0,0,0,.18);
    max-width:200px;
}
.tw-demo-mini .tw-mini-prod-th{ width:32px; height:32px; border-radius:7px; background:linear-gradient(135deg,#e8c39a,#c9a070); flex-shrink:0; }
.tw-demo-mini .tw-mini-prod-tx strong{ display:block; font-size:11px; color:#241f1b; font-weight:700; }
.tw-demo-mini .tw-mini-prod-tx span{ font-size:10px; color:var(--accent); font-weight:700; }
.tw-demo-mini .tw-mini-prod-tx span::before{ content:"¥"; }
.tw-demo-mini .tw-mini-step{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 11px; border-radius:999px;
    background:rgba(255,255,255,.92); color:#241f1b;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
    font-weight:700;
}
.tw-demo-mini .tw-mini-step i{ color:var(--accent); }

/* video lightbox（点击播放训练视频） */
.tw-video-lightbox{
    position:fixed; inset:0; z-index:10010;
    display:none; align-items:center; justify-content:center;
    background:rgba(8,5,16,.85);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    padding:24px;
}
.tw-video-lightbox.open{ display:flex; }
.tw-video-lightbox > .vl-panel{
    position:relative;
    width:100%; max-width:880px;
    background:#000; border-radius:14px; overflow:hidden;
    box-shadow:0 32px 80px rgba(0,0,0,.5);
}
.tw-video-lightbox > .vl-panel video{ width:100%; height:auto; display:block; }
.tw-video-lightbox .vl-close{
    position:absolute; top:-44px; right:-2px;
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
    color:#fff; cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center;
}

/* §02 聊天对话演示（面板内） */
.tw-chat{ display:flex; flex-direction:column; gap:13px; }
.tw-chat-row{ display:flex; gap:11px; align-items:flex-start; }
.tw-chat-row.is-user{ flex-direction:row-reverse; }
.tw-chat-av{
    width:34px; height:34px; border-radius:50%;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
}
.tw-chat-av.is-ai{
    background:linear-gradient(135deg,var(--accent),var(--accent-light));
    color:#fff;
}
.tw-chat-av.is-user{ background:var(--scn-paper); border:1px solid var(--scn-line); color:var(--text-muted); }
.tw-bubble{
    padding:11px 15px;
    border-radius:14px;
    max-width:80%;
    font-size:13.2px; line-height:1.66;
}
.tw-bubble.is-ai{
    background:var(--accent-glow);
    border:1px solid rgba(116,68,253,.18);
    color:var(--text-primary);
    border-top-left-radius:5px;
}
.tw-bubble.is-ai small{
    display:block; margin-bottom:5px;
    font-family:var(--font-mono);
    font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent);
}
.tw-bubble.is-user{
    background:var(--scn-paper);
    border:1px solid var(--scn-line);
    color:var(--text-secondary);
    border-top-right-radius:5px;
}
.tw-wave{ display:inline-flex; gap:3px; align-items:flex-end; height:13px; margin-left:6px; }
.tw-wave span{
    display:inline-block; width:3px; border-radius:3px;
    background:var(--accent);
    animation:twWave 1.2s infinite ease-in-out;
}
.tw-wave span:nth-child(1){ height:5px;  animation-delay:0s; }
.tw-wave span:nth-child(2){ height:12px; animation-delay:.15s; }
.tw-wave span:nth-child(3){ height:8px;  animation-delay:.3s; }
.tw-wave span:nth-child(4){ height:13px; animation-delay:.45s; }
.tw-wave span:nth-child(5){ height:7px;  animation-delay:.6s; }
@keyframes twWave{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }

/* §04 制作流程 — step 卡片 */
.tw-step-card{ display:flex; flex-direction:column; }
.tw-step-num{
    font-family:var(--font-mono);
    font-size:12px; font-weight:600; letter-spacing:.14em;
    color:var(--text-muted); margin-bottom:14px;
}
.tw-step-card .scn-card-icon{ margin-bottom:16px; }
.tw-step-card h4{ margin-bottom:8px; }
.tw-step-card p{ margin:0; }

@media (max-width:1024px){
    .tw-demo-top{ grid-template-columns:1fr; gap:26px; text-align:center; padding:28px; }
    .tw-qr{ margin:0 auto; }
    .tw-demo-tx .tw-tag{ justify-content:center; }
}
@media (max-width:768px){
    .tw-bubble{ max-width:86%; }
}