/* Prototype-only mobile viewport; production stylesheet stays byte-identical. */

#mobile-use-case{height:450px;min-height:0;margin:26px 0 24px;border:1px solid #dedfd7;border-radius:14px;overflow:hidden;isolation:isolate}
#mobile-use-case .workflow-pin{position:relative;height:100%;min-height:0;background:#f5f3ee}
#mobile-use-case .workflow-copy{top:21px;left:18px;width:calc(100% - 36px);text-align:left;pointer-events:none}
#mobile-use-case .workflow-kicker{display:block;font-size:11px;letter-spacing:.04em;margin:0 0 9px;color:#76806c}
#mobile-use-case .workflow-copy h2{display:none}
#mobile-use-case .workflow-copy p{display:block;font-size:14px;line-height:1.6;margin:0;color:#303c31}
#mobile-use-case .workflow-space{clip-path:inset(95px 0 65px);position:absolute;inset:0;overflow:hidden}
#mobile-use-case .workflow-picture{display:block;top:105px;left:50%;width:100%;border-radius:0;transform-origin:37% 65%}
#mobile-use-case .workflow-control-toolbar{display:flex;top:330px;gap:10px;padding:7px 8px 7px 13px;border-radius:9px;font-size:11px;max-width:95%}
#mobile-use-case .workflow-control-copybutton{padding:11px 16px;font-size:12px;min-width:110px}
#mobile-use-case .workflow-control-copyfeedback{display:none}
#mobile-use-case .workflow-control-cursor{display:block;width:24px;height:30px}
#mobile-use-case .workflow-control-click{display:block}
#mobile-use-case .workflow-chat{display:block;top:100px;left:12px;width:calc(100% - 24px);padding:0;border-radius:10px}
#mobile-use-case .workflow-chat header{padding:10px 12px;min-height:0;gap:6px;font-size:11px}
#mobile-use-case .workflow-chat header small{font-size:9px}
#mobile-use-case .workflow-control-thread{padding:11px;min-height:0}
#mobile-use-case .workflow-control-context{font-size:10px}
#mobile-use-case .workflow-control-message{margin-top:8px;padding:10px;position:relative}
#mobile-use-case .workflow-control-payload{font-size:10px;line-height:1.6;max-height:74px;overflow:hidden;mask-image:linear-gradient(#000 75%,transparent)}
#mobile-use-case .workflow-control-placeholder{font-size:11px}
#mobile-use-case .workflow-control-messagefoot{margin-top:6px;font-size:10px}
#mobile-use-case .workflow-control-sendbutton{padding:7px 13px;font-size:11px}
#mobile-use-case .workflow-control-response{margin-top:10px;min-height:0}
#mobile-use-case .workflow-result-reply{font-size:11px;margin:6px 0}
#mobile-use-case .workflow-result-output img{width:36px;height:27px}
#mobile-use-case .workflow-result-output span{font-size:10px}
#mobile-use-case .workflow-compare{left:16px;top:99px;width:calc(100% - 32px);height:275px;border-radius:9px}
#mobile-use-case .workflow-bottom{left:13px;right:13px;bottom:9px;display:flex;flex-wrap:wrap;gap:3px 7px;font-size:10px;padding:0;justify-content:flex-end}
#mobile-use-case .workflow-bottom small{width:100%;text-align:left;font-size:10px;padding:0;margin-bottom:2px}
#mobile-use-case .workflow-bottom button,#mobile-use-case .workflow-bottom a{min-height:32px;font-size:11px;padding:6px}
#mobile-use-case .workflow-scroll{display:none}
@media(prefers-reduced-motion:reduce){#mobile-use-case .workflow-picture{display:none}#mobile-use-case .workflow-control-cursor{display:none}}
/* Full-bleed presentation: remove the enclosing card and share the page surface. */
#mobile-use-case{margin:28px -22px 24px;width:calc(100% + 44px);height:510px;border:0;border-radius:0;overflow:hidden}
#mobile-use-case .workflow-pin{background:transparent}
#mobile-use-case .workflow-copy{top:12px;left:22px;width:calc(100% - 44px)}
#mobile-use-case .workflow-space{clip-path:inset(83px 0 65px);overflow:hidden}
#mobile-use-case .workflow-picture{top:89px;width:100%;border-radius:0}
#mobile-use-case .workflow-control-toolbar{top:390px}
#mobile-use-case .workflow-chat{top:96px;left:18px;width:calc(100% - 36px)}
#mobile-use-case .workflow-compare{left:0;top:84px;width:100%;height:357px;border-radius:0;box-shadow:none}
#mobile-use-case .workflow-bottom{left:22px;right:22px;bottom:6px;background:transparent}
#mobile-use-case{background:transparent}
/* Overlay-only chrome: the animation owns the entire stage. */
#mobile-use-case{height:440px}
#mobile-use-case .workflow-space{clip-path:inset(0);overflow:hidden}
#mobile-use-case .workflow-copy{top:16px;left:18px;width:calc(100% - 36px);z-index:20}
#mobile-use-case .workflow-kicker{display:inline-block;margin:0;padding:5px 9px;border-radius:4px;background:rgba(250,249,245,.88);color:#475244;font-size:10px;line-height:1.4;backdrop-filter:blur(10px)}
#mobile-use-case .workflow-copy p{display:none}
#mobile-use-case .workflow-picture{top:0;width:100%}
#mobile-use-case .workflow-control-toolbar{top:340px}
#mobile-use-case .workflow-chat{top:62px;left:16px;width:calc(100% - 32px)}
#mobile-use-case .workflow-compare{top:0;left:0;width:100%;height:100%;border-radius:0}
#mobile-use-case .workflow-compare > div > span{top:58px}
#mobile-use-case .workflow-bottom{z-index:21;left:14px;right:14px;bottom:12px;display:flex;flex-wrap:nowrap;align-items:center;gap:4px;margin:0;padding:0;background:transparent}
#mobile-use-case .workflow-bottom small{width:auto;margin:0 auto 0 0;padding:4px 6px;border-radius:3px;background:rgba(250,249,245,.82);color:#667060;font-size:9px;line-height:1.4;backdrop-filter:blur(8px)}
#mobile-use-case .workflow-bottom button{min-height:32px;margin:0;padding:6px 9px;border-radius:4px;background:rgba(250,249,245,.88);color:#475244;font-size:10px;backdrop-filter:blur(8px)}
#mobile-use-case .workflow-bottom a{display:none}
/* One control system across the animation. */
#mobile-use-case{--demo-ui-bg:rgba(250,249,245,.94);--demo-ui-ink:#465143;--demo-ui-radius:5px;--demo-ui-height:30px}
#mobile-use-case .workflow-kicker,
#mobile-use-case .workflow-compare > div:not(.workflow-control-divider) > span,
#mobile-use-case .workflow-bottom small,
#mobile-use-case .workflow-bottom button{
 box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
 height:var(--demo-ui-height);min-height:var(--demo-ui-height);max-height:var(--demo-ui-height);
 padding:0 10px;margin:0;border:0;border-radius:var(--demo-ui-radius);
 background:var(--demo-ui-bg);color:var(--demo-ui-ink);
 font:500 11px/1 system-ui,-apple-system,'PingFang SC',sans-serif;
 letter-spacing:0;white-space:nowrap;box-shadow:none;backdrop-filter:blur(8px)
}
#mobile-use-case .workflow-bottom small{margin-right:auto;width:auto}
#mobile-use-case .workflow-bottom{left:16px;right:16px;bottom:16px;gap:8px}
#mobile-use-case .workflow-copy{left:16px;top:16px;width:calc(100% - 32px)}
#mobile-use-case .workflow-compare > div:not(.workflow-control-divider) > span{top:56px;left:16px}
#mobile-use-case .workflow-compare > div:nth-child(2) > span{left:auto;right:16px}
#mobile-use-case .workflow-compare > .workflow-control-divider{top:0;bottom:0;height:100%;width:1px;background:var(--demo-ui-bg)}
#mobile-use-case .workflow-compare > .workflow-control-divider > span{
 position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
 display:flex;align-items:center;justify-content:center;box-sizing:border-box;
 width:32px;height:32px;min-height:32px;padding:0;margin:0;border:0;border-radius:50%;
 background:var(--demo-ui-bg);color:var(--demo-ui-ink);box-shadow:none;
 font:500 16px/1 system-ui;letter-spacing:0;white-space:nowrap
}
#mobile-use-case .workflow-bottom button[hidden]{display:none}

/* 只保留一个播放入口，辅助文字退出画面焦点。 */
#mobile-use-case .workflow-copy,
#mobile-use-case .workflow-playback-replay { display:none !important; }
#mobile-use-case .workflow-bottom { left:12px;right:12px;bottom:8px; }
#mobile-use-case .workflow-bottom small {
 height:auto;min-height:0;max-height:none;padding:0 4px;border-radius:0;
 background:none;backdrop-filter:none;font-size:10px;font-weight:400;
 color:#465143;text-shadow:0 1px 3px rgba(255,255,255,.8);
}
#mobile-use-case .workflow-bottom .workflow-playback-pause {
 width:44px;height:44px;min-height:44px;max-height:44px;padding:0;
 border-radius:0;background:none;backdrop-filter:none;color:#465143;
 font-size:23px;font-weight:400;text-shadow:0 1px 3px rgba(255,255,255,.8);
}
#mobile-use-case[data-phase="paste"] .workflow-bottom small,
#mobile-use-case[data-phase="send"] .workflow-bottom small,
#mobile-use-case[data-phase="paste"] .workflow-playback-pause,
#mobile-use-case[data-phase="send"] .workflow-playback-pause {
 color:#465143;text-shadow:none;
}
#mobile-use-case .workflow-compare > .workflow-control-divider > span {
 width:28px;height:28px;min-height:28px;font-size:14px;
}

/* 前后状态保留为轻量文字，不使用按钮外观。 */
#mobile-use-case .workflow-compare > div:not(.workflow-control-divider) > span {
 top:16px;height:auto;min-height:0;max-height:none;padding:0;
 border-radius:0;background:none;backdrop-filter:none;
 color:#fff;font-size:11px;font-weight:500;line-height:1.4;
 text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none;
}

/* 产品镜头：以桌面编辑器的真实布局重现操作，镜头移动代替新增浮层。 */
#mobile-use-case .demo-app{position:absolute;left:0;top:0;width:760px;height:500px;background:#0c0f12;border-radius:7px;overflow:hidden;transform-origin:0 0;color:#f3f4f4;font-family:system-ui,sans-serif;will-change:transform,opacity;}
#mobile-use-case .demo-app-header{height:44px;display:flex;align-items:center;gap:20px;padding:0 14px;border-bottom:1px solid #252a2f;font-size:12px;}
#mobile-use-case .demo-app-header strong{display:flex;align-items:center;gap:7px;font-size:17px;}
#mobile-use-case .demo-app-header img{width:23px;height:23px;}
#mobile-use-case .demo-app-header>span{border:1px solid #343a3e;border-radius:5px;padding:5px 9px;}
#mobile-use-case .demo-app-canvas{position:absolute;top:53px;left:10px;width:500px;height:435px;background:#151b1d;overflow:hidden;border-radius:7px;}
#mobile-use-case .demo-app .workflow-picture{position:absolute;left:0;top:34px;width:500px;height:auto;transform:none!important;opacity:1!important;}
#mobile-use-case .demo-app .workflow-picture img{display:block;width:100%;height:auto;}
#mobile-use-case .demo-app-panel{position:absolute;top:53px;right:10px;width:230px;height:435px;border:1px solid #2a3035;border-radius:7px;padding:12px;box-sizing:border-box;background:#14191f;}
#mobile-use-case .demo-panel-title{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;}
#mobile-use-case .demo-region-count{font-size:10px;font-weight:400;color:#a3a9ac;opacity:0;}
#mobile-use-case .demo-app-json{height:202px;margin:12px 0;padding:10px;background:#10151b;border:1px solid #2d3338;border-radius:5px;font:11px/1.35 monospace;color:#d9be8a;opacity:.15;}
#mobile-use-case .demo-app[data-selected="true"] .demo-app-json,#mobile-use-case .demo-app[data-selected="true"] .demo-region-count{opacity:1;}
#mobile-use-case .demo-app-prompt{font-size:12px;margin-bottom:8px;}
#mobile-use-case .demo-prompt-value{padding:9px;border:1px solid #32383d;border-radius:5px;font-size:12px;color:#d0d3d5;min-height:42px;}
#mobile-use-case .demo-app .workflow-control-toolbar{position:static;display:block;transform:none;width:100%;max-width:none;padding:0;margin-top:10px;background:none;box-shadow:none;border:0;}
#mobile-use-case .demo-app .workflow-control-toolbar>span{display:none;}
#mobile-use-case .demo-app .workflow-control-copybutton{box-sizing:border-box;min-width:0;width:100%;padding:11px 0;background:#ffe500;color:#171b1c;border-radius:5px;text-align:center;font-size:13px;opacity:.4;}
#mobile-use-case .demo-app[data-selected="true"] .workflow-control-copybutton{opacity:1;}
#mobile-use-case .demo-app-tools{position:absolute;bottom:23px;left:95px;padding:12px 15px;border:1px solid #3a4045;border-radius:9px;background:#20252a;font-size:12px;}
#mobile-use-case .workflow-chat header>span,#mobile-use-case .workflow-chat header>small{display:none;}
#mobile-use-case .demo-external{font-size:12px;font-weight:500;}