/* AI 场景专用：白色品牌标识、顶部操作提示及文字下方的点击引导。
   --smart-ui-unit 使用 vh 兜底，再采用 svh；安全区声明之前保留不含 env 的版本。 */
html.viewer_page .smart_scene_ui {
    --smart-ui-unit: 1vh;
    --smart-ui-fade: 550ms;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 60;
    pointer-events: none;
    overflow: hidden;
    color: #EAF5FF;
}
html.viewer_page .smart_scene_ui, html.viewer_page .smart_scene_ui * { pointer-events: none; box-sizing: border-box; }
@supports (height: 1svh) {
    html.viewer_page .smart_scene_ui { --smart-ui-unit: 1vh; --smart-ui-unit: 1svh; }
}
html.viewer_page .smart_scene_brand {
    position: absolute;
    top: calc(var(--smart-ui-unit) * 3.2);
    left: calc(var(--smart-ui-unit) * 3.4);
    top: calc(var(--smart-ui-unit) * 3.2 + env(safe-area-inset-top, 0em));
    left: calc(var(--smart-ui-unit) * 3.4 + env(safe-area-inset-left, 0em));
    color: #EAF5FF;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--smart-ui-unit) * -.65));
    transition: opacity var(--smart-ui-fade) ease, transform var(--smart-ui-fade) ease, visibility 0s linear var(--smart-ui-fade);
}
html.viewer_page .smart_scene_brand .iconfont { display: block; font-size: calc(var(--smart-ui-unit) * 7.4);  line-height: 1; color: inherit; }
@supports (width: clamp(1vh, 2vh, 3vh)) {
    html.viewer_page .smart_scene_brand .iconfont { font-size: clamp(2.8rem, calc(var(--smart-ui-unit) * 7.4), 4.8rem); }
}

html.viewer_page.smart-mode:not(.smart-closing) .smart_scene_brand {
    opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
}
html.viewer_page .smart_scene_guide {
    position: absolute;
    top: calc(var(--smart-ui-unit) * 3.7);
    top: calc(var(--smart-ui-unit) * 3.7 + env(safe-area-inset-top, 0em));
    left: 50%;
    width: max-content;
    max-width: 88%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--smart-ui-unit) * 1.2);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(var(--smart-ui-unit) * -.45));
    transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 400ms;
}
html.viewer_page .smart_scene_prompt {
    margin: 0;
    color: #D5E7F5;
    font-size: calc(var(--smart-ui-unit) * 1.65); 
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .12em;
    white-space: nowrap;
    text-align: center;
}
@supports (width: clamp(1vh, 2vh, 3vh)) {
    html.viewer_page .smart_scene_prompt { font-size: clamp(.75rem, calc(var(--smart-ui-unit) * 1.65), 1rem); }
}

html.viewer_page.smart-mode:not(.smart-closing) .smart_scene_ui.is-ready .smart_scene_guide {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
html.viewer_page .smart_scene_tap {
    display: block;
    width: calc(var(--smart-ui-unit) * 5.4); 
    height: auto;
    color: #8ACFFF;
    overflow: visible;
    opacity: 1;
    flex: none;
}
@supports (width: clamp(1vh, 2vh, 3vh)) {
    html.viewer_page .smart_scene_tap { width: clamp(2.3rem, calc(var(--smart-ui-unit) * 5.4), 3.2rem); }
}

/* 分段信号轴 + 双层向下箭头；没有模糊滤镜和大面积光晕，不遮挡芯片。 */
html.viewer_page .smart_scene_tap path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
html.viewer_page .smart_scene_arrow_frame { stroke-width: 1.2; opacity: .45; }
html.viewer_page .smart_scene_arrow_stem { stroke-width: 1.2; stroke-dasharray: 2 5; opacity: .35; }
html.viewer_page .smart_scene_arrow_signal { stroke: #DDF4FF !important; stroke-width: 1.5; stroke-dasharray: 7 45; stroke-dashoffset: 10; opacity: 0; animation: smart-scene-arrow-signal 2.4s linear infinite; }
html.viewer_page .smart_scene_down_arrow { transform-box: fill-box; transform-origin: center; animation: smart-scene-arrow-down 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
html.viewer_page .smart_scene_arrow_echo { stroke-width: 1.5; opacity: .5; }
html.viewer_page .smart_scene_arrow_tip { stroke: url(#smart-arrow-gradient) !important; stroke-width: 2.4; }
html.viewer_page .smart_scene_down_arrow,
html.viewer_page .smart_scene_arrow_signal { animation-play-state: paused; }
html.viewer_page.smart-mode:not(.smart-closing) .smart_scene_ui.is-ready .smart_scene_down_arrow,
html.viewer_page.smart-mode:not(.smart-closing) .smart_scene_ui.is-ready .smart_scene_arrow_signal { animation-play-state: running; }
@keyframes smart-scene-arrow-down {
    0%, 100% { transform: translateY(0); opacity: .8; }
    50% { transform: translateY(.18rem); opacity: 1; }
}
@keyframes smart-scene-arrow-signal {
    0% { stroke-dashoffset: 10; opacity: 0; }
    18%, 58% { opacity: .9; }
    80%, 100% { stroke-dashoffset: -32; opacity: 0; }
}
@media (max-width: 62.25em) {
    html.viewer_page .smart_scene_brand { top: calc(var(--smart-ui-unit) * 3); left: calc(var(--smart-ui-unit) * 2.8); top: calc(var(--smart-ui-unit) * 3 + env(safe-area-inset-top, 0em)); left: calc(var(--smart-ui-unit) * 2.8 + env(safe-area-inset-left, 0em)); }
    html.viewer_page .smart_scene_brand .iconfont { font-size: calc(var(--smart-ui-unit) * 3.2);  }
@supports (width: clamp(1vh, 2vh, 3vh)) {
    html.viewer_page .smart_scene_brand .iconfont { font-size: clamp(1.25rem, calc(var(--smart-ui-unit) * 3.2), 2.1rem); }
}

    html.viewer_page .smart_scene_guide { top: calc(var(--smart-ui-unit) * 10); top: calc(var(--smart-ui-unit) * 10 + env(safe-area-inset-top, 0em)); max-width: 94%; }
    html.viewer_page .smart_scene_prompt { font-size: calc(var(--smart-ui-unit) * 1.6);  letter-spacing: .06em; }
@supports (width: clamp(1vh, 2vh, 3vh)) {
    html.viewer_page .smart_scene_prompt { font-size: clamp(.72rem, calc(var(--smart-ui-unit) * 1.6), 3.45vw); }
}

    html.viewer_page .smart_scene_tap { width: calc(var(--smart-ui-unit) * 4.6);  height: auto; }
@supports (width: clamp(1vh, 2vh, 3vh)) {
    html.viewer_page .smart_scene_tap { width: clamp(2.15rem, calc(var(--smart-ui-unit) * 4.6), 2.7rem); }
}

}
@media (prefers-reduced-motion: reduce) {
    html.viewer_page .smart_scene_brand, html.viewer_page .smart_scene_guide { transition-duration: 1ms; }
    html.viewer_page .smart_scene_down_arrow { animation: none; opacity: .85; }
    html.viewer_page .smart_scene_arrow_signal { animation: none; opacity: 0; }
}

/* 产品列表“当前所在产品”：沿用 picker 自己的蓝 / 红主题，独立于 Swiper 居中卡片和 hover。
   仅增加卡片内的覆盖层，不改变卡片尺寸，不使用 focus outline。 */
html.viewer_page .product_picker {
    --picker-current-unit: 1vh;
}
@supports (height: 1svh) {
    html.viewer_page .product_picker { --picker-current-unit: 1vh; --picker-current-unit: 1svh; }
}
html.viewer_page .product_picker .product_card.is-current { position: relative; }
html.viewer_page .product_picker .product_card_current_frame,
html.viewer_page .product_picker .product_card_current { position: absolute; pointer-events: none; box-sizing: border-box; }
html.viewer_page .product_picker .product_card_current_frame {
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 2;
    border: .09rem solid rgba(var(--theme-accent-rgb, 34, 115, 215), .8);
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(var(--theme-accent-rgb, 34, 115, 215), .09), transparent 58%);
}
html.viewer_page .product_picker .product_card_current {
    top: calc(var(--picker-current-unit) * 1.5);
    left: calc(var(--picker-current-unit) * 1.5);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .6em .85em;
    border-radius: 999em;
    background: var(--theme-accent, #2273D7);
    color: #FFFFFF;
    font-size: calc(var(--picker-current-unit) * 1.45); 
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
@supports (width: clamp(1vh, 2vh, 3vh)) {
    html.viewer_page .product_picker .product_card_current { font-size: clamp(.68rem, calc(var(--picker-current-unit) * 1.45), .85rem); }
}

html.viewer_page .product_picker .product_card_current svg { width: 1.05em; height: 1.05em; flex: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html.viewer_page .product_picker [data-product-current][hidden] { display: none; }