/* ============================================================
   Unified Design Tokens — 统一设计令牌
   所有 CSS 文件和 AdminPanel 共享此令牌体系。
   通过 [data-theme] 属性切换亮/暗主题。
   ============================================================ */

/* ====== Light Theme (Default) ====== */
:root,
[data-theme="light"] {
    /* ---- 基础背景 ---- */
    --dt-bg:              #fafafa;
    --dt-surface:         #ffffff;
    --dt-surface-hover:   #f5f5f5;
    --dt-surface-elevated:#ffffff;

    /* ---- 边框 ---- */
    --dt-border:          #e0e0e0;
    --dt-border-light:    #eeeeee;

    /* ---- 文字 ---- */
    --dt-text-primary:    #212121;
    --dt-text-secondary:  #616161;
    --dt-text-tertiary:   #9e9e9e;
    --dt-text-inverse:    #ffffff;

    /* ---- 品牌/强调色 ---- */
    --dt-primary:         #1976d2;
    --dt-primary-hover:   #1565c0;
    --dt-primary-light:   #e3f2fd;
    --dt-primary-text:    #ffffff;

    /* ---- 语义色 ---- */
    --dt-success:         #2e7d32;
    --dt-success-light:   #e8f5e9;
    --dt-warning:         #ed6c02;
    --dt-warning-light:   #fff3e0;
    --dt-danger:          #d32f2f;
    --dt-danger-light:    #ffebee;
    --dt-info:            #0288d1;
    --dt-info-light:      #e1f5fe;

    /* ---- 阴影 ---- */
    --dt-shadow-sm:       0 1px 3px rgba(0,0,0,0.08);
    --dt-shadow-md:       0 4px 12px rgba(0,0,0,0.1);
    --dt-shadow-lg:       0 8px 24px rgba(0,0,0,0.12);

    /* ---- 圆角 ---- */
    --dt-radius-sm:       6px;
    --dt-radius-md:       8px;
    --dt-radius-lg:       12px;
    --dt-radius-xl:       16px;

    /* ---- 间距（4px 基准） ---- */
    --dt-space-xs:        4px;
    --dt-space-sm:        8px;
    --dt-space-md:        12px;
    --dt-space-lg:        16px;
    --dt-space-xl:        20px;
    --dt-space-2xl:       24px;
    --dt-space-3xl:       32px;

    /* ---- 字体 ---- */
    --dt-font-xs:         11px;
    --dt-font-sm:         12px;
    --dt-font-md:         13px;
    --dt-font-lg:         14px;
    --dt-font-xl:         16px;
    --dt-font-2xl:        18px;

    /* ---- 过渡 ---- */
    --dt-transition-fast: 0.15s ease;
    --dt-transition-md:   0.2s ease;
    --dt-transition-slow: 0.3s ease;

    /* ---- 控件 ---- */
    --dt-input-bg:        #ffffff;
    --dt-input-border:    #e0e0e0;
    --dt-input-focus:     #1976d2;
    --dt-input-placeholder: #9e9e9e;

    /* ---- 视频/媒体 ---- */
    --dt-video-bg:        #1a1a1a;

    /* ---- 特殊用途 ---- */
    --dt-overlay-bg:      rgba(0,0,0,0.5);
    --dt-disabled-opacity: 0.45;
}

/* ====== Dark Theme ====== */
[data-theme="dark"] {
    /* ---- 基础背景 ---- */
    --dt-bg:              #121212;
    --dt-surface:         #1e1e1e;
    --dt-surface-hover:   #2a2a2a;
    --dt-surface-elevated:#2d2d2d;

    /* ---- 边框 ---- */
    --dt-border:          #404040;
    --dt-border-light:    #333333;

    /* ---- 文字 ---- */
    --dt-text-primary:    #e5e5e5;
    --dt-text-secondary:  #999999;
    --dt-text-tertiary:   #666666;
    --dt-text-inverse:    #212121;

    /* ---- 品牌/强调色 ---- */
    --dt-primary:         #4cc2ff;
    --dt-primary-hover:   #62cdff;
    --dt-primary-light:   rgba(76,194,255,0.1);
    --dt-primary-text:    #121212;

    /* ---- 语义色 ---- */
    --dt-success:         #6ccb5f;
    --dt-success-light:   rgba(108,203,95,0.12);
    --dt-warning:         #ffb900;
    --dt-warning-light:   rgba(255,185,0,0.12);
    --dt-danger:          #ff6767;
    --dt-danger-light:    rgba(255,103,103,0.12);
    --dt-info:            #4cc2ff;
    --dt-info-light:      rgba(76,194,255,0.12);

    /* ---- 阴影 ---- */
    --dt-shadow-sm:       0 1px 3px rgba(0,0,0,0.3);
    --dt-shadow-md:       0 4px 12px rgba(0,0,0,0.4);
    --dt-shadow-lg:       0 8px 24px rgba(0,0,0,0.5);

    /* ---- 圆角（与亮色一致） ---- */
    --dt-radius-sm:       6px;
    --dt-radius-md:       8px;
    --dt-radius-lg:       12px;
    --dt-radius-xl:       16px;

    /* ---- 间距（与亮色一致） ---- */
    --dt-space-xs:        4px;
    --dt-space-sm:        8px;
    --dt-space-md:        12px;
    --dt-space-lg:        16px;
    --dt-space-xl:        20px;
    --dt-space-2xl:       24px;
    --dt-space-3xl:       32px;

    /* ---- 字体（与亮色一致） ---- */
    --dt-font-xs:         11px;
    --dt-font-sm:         12px;
    --dt-font-md:         13px;
    --dt-font-lg:         14px;
    --dt-font-xl:         16px;
    --dt-font-2xl:        18px;

    /* ---- 过渡（与亮色一致） ---- */
    --dt-transition-fast: 0.15s ease;
    --dt-transition-md:   0.2s ease;
    --dt-transition-slow: 0.3s ease;

    /* ---- 控件 ---- */
    --dt-input-bg:        #2d2d2d;
    --dt-input-border:    #404040;
    --dt-input-focus:     #4cc2ff;
    --dt-input-placeholder: #666666;

    /* ---- 视频/媒体 ---- */
    --dt-video-bg:        #000000;

    /* ---- 特殊用途 ---- */
    --dt-overlay-bg:      rgba(0,0,0,0.7);
    --dt-disabled-opacity: 0.4;
}

/* ============================================================
 * GSAP Fallback Animations — Cross-Browser Compatibility Edition
 *
 * 兼容性目标：
 *   - 现代浏览器（Chrome/Firefox/Safari/Edge 最新±2）：完整动画
 *   - IE 11 / IE 10：基础动画（@keyframes 支持，需 -ms- 前缀）
 *   - IE 9 及以下：静态终态（不支持 @keyframes，通过 @supports 降级）
 *   - 旧 Android（4.3-）/ iOS 8-：-webkit- 前缀
 *
 * 性能优化：
 *   1. 所有动画仅使用 transform + opacity（GPU 合成层，零重排）
 *   2. shimmer 用 transform: translateX() 替代 background-position
 *   3. hover 阴影用伪元素 overlay 替代 box-shadow 动画
 *   4. contain: layout style paint 隔离动画影响范围
 *   5. will-change 提示（仅对无限循环动画）
 *
 * 这些类只在 fallback 激活时由 AnimationEngine 注入到元素上。
 * ============================================================ */

/* ============================================================
 * 一、无限循环动画（shimmer / spin / pulse）
 * 用 @keyframes 实现，避免 JS 定时器堆积。
 * 同时提供 -webkit- 前缀版本（旧 WebKit）和 -ms- 前缀（IE10）。
 * ============================================================ */

/* ===== 骨架屏闪烁 =====
 * 优化：用 transform: translateX() 替代 background-position
 * 原因：background-position 触发重绘，transform 走 GPU 合成层
 * 实现：背景图固定，容器 overflow:hidden，伪元素平移
 */
.gsap-fallback-shimmer {
    position: relative;
    overflow: hidden;
    -webkit-animation: gsap-fallback-shimmer-anim 1.5s linear infinite !important;
    animation: gsap-fallback-shimmer-anim 1.5s linear infinite !important;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gsap-fallback-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    pointer-events: none;
}

@-webkit-keyframes gsap-fallback-shimmer-anim {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}

@keyframes gsap-fallback-shimmer-anim {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* ===== 旋转加载 =====
 * transform-origin 显式声明，兼容 Safari 旧版默认 0 0
 */
.gsap-fallback-spin {
    -webkit-animation: gsap-fallback-spin-anim 0.8s linear infinite !important;
    animation: gsap-fallback-spin-anim 0.8s linear infinite !important;
    -webkit-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    transform-origin: center center !important;
    will-change: transform;
}

@-webkit-keyframes gsap-fallback-spin-anim {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}

@keyframes gsap-fallback-spin-anim {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* ===== 脉冲（状态指示器）===== */
.gsap-fallback-pulse {
    -webkit-animation: gsap-fallback-pulse-anim 0.6s ease-in-out infinite alternate !important;
    animation: gsap-fallback-pulse-anim 0.6s ease-in-out infinite alternate !important;
    -webkit-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    transform-origin: center center !important;
    will-change: transform;
}

@-webkit-keyframes gsap-fallback-pulse-anim {
    from { -webkit-transform: scale(1); }
    to   { -webkit-transform: scale(var(--gsap-fallback-pulse-scale, 1.05)); }
}

@keyframes gsap-fallback-pulse-anim {
    from { -webkit-transform: scale(1); transform: scale(1); }
    to   { -webkit-transform: scale(var(--gsap-fallback-pulse-scale, 1.05)); transform: scale(var(--gsap-fallback-pulse-scale, 1.05)); }
}

/* ============================================================
 * 二、卡片 hover 微动效
 * 优化：box-shadow 动画会触发重绘，改用伪元素 overlay
 * 原理：阴影层独立合成，hover 时仅 opacity 变化
 * ============================================================ */
.gsap-fallback-hover {
    position: relative;
    -webkit-transition: -webkit-transform 0.2s ease !important;
    transition: transform 0.2s ease !important;
    will-change: transform;
}

.gsap-fallback-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    z-index: -1;
}

.gsap-fallback-hover:hover {
    -webkit-transform: translateY(-2px) scale(1.01);
    -ms-transform: translateY(-2px) scale(1.01);
    transform: translateY(-2px) scale(1.01);
}

.gsap-fallback-hover:hover::before {
    opacity: 1;
}

/* ============================================================
 * 三、触屏波纹反馈（一次性）
 * ============================================================ */
.gsap-fallback-ripple {
    -webkit-animation: gsap-fallback-ripple-anim 0.5s ease-out forwards !important;
    animation: gsap-fallback-ripple-anim 0.5s ease-out forwards !important;
    -webkit-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    transform-origin: center center !important;
    will-change: transform, opacity;
}

@-webkit-keyframes gsap-fallback-ripple-anim {
    from { -webkit-transform: scale(0); opacity: 1; }
    to   { -webkit-transform: scale(1); opacity: 0; }
}

@keyframes gsap-fallback-ripple-anim {
    from { -webkit-transform: scale(0); transform: scale(0); opacity: 1; }
    to   { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
}

/* ============================================================
 * 四、按钮按压反馈
 * 用 :active 伪类 + transition 实现，零 JS 开销
 * ============================================================ */
.gsap-fallback-press {
    -webkit-transition: -webkit-transform 0.08s ease !important;
    transition: transform 0.08s ease !important;
    -webkit-transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    transform-origin: center center !important;
}

.gsap-fallback-press:active {
    -webkit-transform: scale(0.94);
    -ms-transform: scale(0.94);
    transform: scale(0.94);
}

/* ============================================================
 * 五、降级通知横幅
 * backdrop-filter 不支持时降级为不透明背景
 * ============================================================ */
.gsap-fallback-notice {
    position: fixed;
    left: 50%;
    bottom: 24px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 99998;
    max-width: 560px;
    padding: 12px 18px;
    border-radius: 10px;
    /* backdrop-filter 不支持时此背景已足够不透明 */
    background: rgba(31, 41, 55, 0.96);
    color: #fbbf24;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    /* 双重声明：-webkit- 在前，标准在后，确保旧 Safari 也能用 */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    -webkit-animation: gsap-fallback-notice-in 0.3s ease-out;
    animation: gsap-fallback-notice-in 0.3s ease-out;
    /* 隔离动画影响范围，避免引发兄弟元素重排 */
    contain: layout style;
}

.gsap-fallback-notice-dismiss {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    -webkit-transition: background 0.15s ease;
    transition: background 0.15s ease;
}

.gsap-fallback-notice-dismiss:hover {
    background: rgba(251, 191, 36, 0.15);
}

@-webkit-keyframes gsap-fallback-notice-in {
    from { opacity: 0; -webkit-transform: translate(-50%, 20px); }
    to   { opacity: 1; -webkit-transform: translate(-50%, 0); }
}

@keyframes gsap-fallback-notice-in {
    from { opacity: 0; -webkit-transform: translate(-50%, 20px); transform: translate(-50%, 20px); }
    to   { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
}

/* ============================================================
 * 六、@supports 条件降级
 *
 * 1. 不支持 @keyframes / animation 的浏览器（IE9-）：
 *    - shimmer 静态显示（无闪烁，背景渐变可见即可）
 *    - spin 静态旋转 0deg（不旋转，但元素可见）
 *    - pulse 静态 scale(1)（无脉冲，但元素可见）
 *    - notice 直接显示无入场动画
 *
 * 2. 不支持 backdrop-filter 的浏览器（IE 全系、旧 Edge）：
 *    - 通知背景已设为 0.96 不透明，无需额外处理
 *
 * 3. 不支持 transform 的浏览器（IE8-）：
 *    - hover/press 无效果，但元素仍可交互（渐进增强）
 * ============================================================ */

/* IE9- 不支持 @keyframes，提供静态终态 */
@supports not (animation-name: none) {
    .gsap-fallback-shimmer,
    .gsap-fallback-spin,
    .gsap-fallback-pulse,
    .gsap-fallback-ripple {
        -webkit-animation: none !important;
        animation: none !important;
        /* 静态终态：元素可见，无动效 */
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important;
    }

    .gsap-fallback-notice {
        -webkit-animation: none !important;
        animation: none !important;
        opacity: 1 !important;
    }
}

/* 不支持 backdrop-filter 的浏览器：背景已足够不透明，无需额外规则 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .gsap-fallback-notice {
        /* 提高 alpha 到完全不透明，避免模糊缺失导致文字难读 */
        background: rgba(31, 41, 55, 1);
    }
}

/* ============================================================
 * 七、prefers-reduced-motion 无障碍降级
 * 用户开启减少动效时，所有动画瞬间完成
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .gsap-fallback-shimmer,
    .gsap-fallback-spin,
    .gsap-fallback-pulse {
        -webkit-animation-duration: 0.001s !important;
        animation-duration: 0.001s !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
    }

    .gsap-fallback-ripple,
    .gsap-fallback-notice {
        -webkit-animation: none !important;
        animation: none !important;
    }

    .gsap-fallback-hover,
    .gsap-fallback-hover:hover,
    .gsap-fallback-press,
    .gsap-fallback-press:active {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* ============================================================
 * 八、性能隔离容器
 * 对动画密集的容器应用 contain，避免重排扩散
 * 用法：在列表/卡片容器上添加 class="gsap-fallback-container"
 * ============================================================ */
.gsap-fallback-container {
    contain: layout style paint;
    -webkit-contain: layout style paint;
    /* IE11 不支持 contain，但也不会报错（属性被忽略） */
}

/* ====== Backward-compatible aliases for legacy variables ====== */
:root,
[data-theme="light"] {
    --main-bg-color: var(--dt-bg);
    --stream-bg-color: hsl(0, 0%, 85%);
    --shell-bg-color: hsl(0, 0%, 0%);
    --text-shadow-color: hsl(218, 67%, 95%);
    --header-bg-color: var(--dt-surface);
    --controls-bg-color: hsla(0, 0%, 95%, 0.8);
    --control-buttons-bg-color: var(--dt-surface);
    --text-color: var(--dt-text-primary);
    --text-color-light: var(--dt-text-secondary);
    --link-color: var(--dt-primary);
    --link-color-light: hsl(218, 85%, 73%);
    --link-color_visited: hsl(271, 68%, 32%);
    --link-color_visited-light: hsl(271, 68%, 72%);
    --svg-checkbox-bg-color: hsl(172, 100%, 37%);
    --svg-button-fill: hsl(199, 17%, 46%);
    --kill-button-hover-color: var(--dt-danger);
    --url-color: var(--dt-text-tertiary);
    --button-text-color: var(--dt-primary);
    --button-border-color: var(--dt-border);
    --progress-background-color: hsla(225, 100%, 50%, 0.2);
    --progress-background-error-color: hsla(0, 100%, 50%, 0.2);
    --font-size: var(--dt-font-lg);
}

@media (prefers-color-scheme: dark) {
    :root {
        --main-bg-color: hsl(0, 0%, 14%);
        --stream-bg-color: hsl(0, 0%, 20%);
        --shell-bg-color: hsl(0, 0%, 0%);
        --text-shadow-color: hsl(218, 17%, 18%);
        --header-bg-color: hsl(0, 0%, 20%);
        --controls-bg-color: hsla(201, 18%, 19%, 0.8);
        --control-buttons-bg-color: hsl(201, 18%, 19%);
        --text-color: hsl(0, 0%, 90%);
        --text-color-light: hsl(0, 0%, 60%);
        --link-color: hsl(218, 63%, 70%);
        --link-color-light: hsl(218, 63%, 50%);
        --link-color_visited: hsl(267, 31%, 47%);
        --link-color_visited-light: hsl(267, 31%, 27%);
        --svg-checkbox-bg-color: hsl(172, 100%, 27%);
        --svg-button-fill: hsl(0, 0%, 100%);
        --kill-button-hover-color: hsl(342, 100%, 27%);
        --url-color: hsl(0, 0%, 60%);
        --device-list-stripe-color: hsl(0, 0%, 16%);
        --device-list-default-color: hsl(0, 0%, 14%);
        --button-text-color: hsl(214, 82%, 76%);
        --button-border-color: hsl(213, 5%, 39%);
        --progress-background-color: hsla(225, 100%, 50%, 0.2);
        --progress-background-error-color: hsla(0, 100%, 50%, 0.2);
    }
}

html {
    font-size: var(--font-size);
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-color_visited);
}

body {
    color: var(--text-color);
    background-color: var(--main-bg-color);
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}


body.shell {
    background-color: var(--shell-bg-color);
}

body.stream {
    background-color: var(--stream-bg-color);
}

.terminal-container {
    width: 100%;
    height: 100%;
    padding: 5px;
}

:focus {
    outline: none;
}

.flex-center {
    display: flex;
    align-items: center;
}

.wait {
    cursor: wait;
}

.device-view {
    z-index: 1;
    float: right;
    display: inline-block;
    position: relative;
    /* 移动端适配 */
    max-width: 100vw;
    max-height: 100vh;
    /* 确保不影响子元素交互 */
    pointer-events: none;
}

.device-view > * {
    pointer-events: auto; /* 恢复子元素的点击事件 */
}

.video-layer {
    position: absolute;
    z-index: 0;
    /* 画质优化 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    transform: translateZ(0);  /* 启用GPU加速 */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    /* 高质量缩放 */
    -webkit-transform: scale3d(1,1,1); /* 启用硬件加速 */
    transform-style: preserve-3d;
}

.touch-layer {
    position: absolute;
    z-index: 1;
}

.video {
    float: right;
    max-height: 100%;
    max-width: 100%;
    background-color: #000000;
    position: relative;
}

.floating-fullscreen-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.floating-fullscreen-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.floating-fullscreen-btn svg {
    width: 100%;
    height: 100%;
}

.device-view.fullscreen .floating-fullscreen-btn {
    display: none;
}


.control-buttons-list {
    float: right;
    width: 3.715rem;
    background-color: var(--control-buttons-bg-color);
    position: relative;
    z-index: 100; /* 确保控制按钮在视频层之上 */
}

.control-button {
    margin: .357rem .786rem;
    padding: 0;
    width: 2.143rem;
    height: 2.143rem;
    border: none;
    opacity: 0.75;
    background-color: var(--control-buttons-bg-color);
    position: relative;
    z-index: 101; /* 确保按钮可点击 */
    pointer-events: auto; /* 确保接收点击事件 */
}

.control-button:hover {
    opacity: 1;
}

.control-wrapper > input[type=checkbox] {
    display: none;
}

.control-wrapper > label {
    display: inline-block;
}

.control-button > svg {
    fill: var(--svg-button-fill);
}

.control-wrapper > input[type=checkbox].two-images:checked + label > svg.image-on {
    display: block;
}

.control-wrapper > input[type=checkbox].two-images:not(:checked) + label > svg.image-on {
    display: none;
}

.control-wrapper > input[type=checkbox].two-images:checked + label > svg.image-off {
    display: none;
}

.control-wrapper > input[type=checkbox].two-images:not(:checked) + label > svg.image-off {
    display: block;
}

.control-wrapper > input[type=checkbox]:checked + label > svg {
    fill: var(--svg-checkbox-bg-color);
}