/*
 * 云督伴学 · Liquid Glass 试点 token（2026-09-25）
 *
 * 这份文件只负责“门面”样式：登录卡片、家长/学生首页卡片、云嘟悬浮信息窗
 * 以及已有弹窗。工资条、课时表、报表、长列表等数据密集页面不接入这里的
 * backdrop-filter，避免滚动时让低端安卓机反复重绘整层背景。
 *
 * 重要约束：所有本次新增的玻璃效果只能消费下面的 --glass-* token，页面里
 * 不再写自己的 blur / rgba / shadow 数值。最大模糊半径是 16px（低于 20px 红线）。
 */

:root {
    --glass-blur: 16px;
    --glass-blur-compact: 12px;
    --glass-saturation: 135%;
    --glass-saturation-compact: 130%;
    --glass-bg-light: rgba(255, 255, 255, 0.72);
    --glass-bg-dark: rgba(24, 24, 30, 0.78);
    --glass-bg: var(--glass-bg-light);
    --glass-border-light: rgba(255, 255, 255, 0.86);
    --glass-border-dark: rgba(255, 255, 255, 0.18);
    --glass-border: var(--glass-border-light);
    --glass-radius: 20px;
    --glass-radius-compact: 16px;
    --glass-shadow: 0 14px 36px rgba(30, 32, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --glass-shadow-compact: 0 8px 22px rgba(30, 32, 40, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    --glass-fallback-bg-light: rgba(255, 255, 255, 0.94);
    --glass-fallback-bg-dark: rgba(28, 28, 34, 0.96);
    --glass-fallback-bg: var(--glass-fallback-bg-light);
    --glass-text: #1d1d1f;
    --glass-muted: #4a4a52;
    --glass-focus: #a71923;
}

@media (prefers-color-scheme: dark) {
    :root {
        --glass-bg: var(--glass-bg-dark);
        --glass-border: var(--glass-border-dark);
        --glass-fallback-bg: var(--glass-fallback-bg-dark);
        --glass-text: #f5f5f7;
        --glass-muted: #c8c8d0;
    }
}

/* 试点页面统一把旧 DS 的浅灰三级文字收口到可读的 muted token。 */
body.glass-pilot-login {
    --ydb-text-2: var(--glass-muted);
    --ydb-text-3: var(--glass-muted);
}

body.glass-pilot-parent {
    --pp-text-2: var(--glass-muted);
    --pp-text-3: var(--glass-muted);
}

body.glass-pilot-student {
    --pp-text-2: var(--glass-muted);
    --pp-text-3: var(--glass-muted);
    --sp-text-2: var(--glass-muted);
    --sp-text-3: var(--glass-muted);
}

/*
 * JS 会在 html 上写入 glass-device-fallback：CSS 无法读取 navigator.deviceMemory，
 * 因此设备内存/安卓低端机检测必须由 glass_tokens.js 完成。这里只做纯表现层回退，
 * 不发请求、不改业务状态。reduced-motion 同样主动关闭模糊，优先保证稳定和可读性。
 */
html.glass-device-fallback,
html.glass-reduced-motion {
    --glass-bg: var(--glass-fallback-bg);
    --glass-border: var(--glass-border-light);
    --glass-blur: 0px;
    --glass-blur-compact: 0px;
}

/* Android fallback is deliberately light even when the device is in dark
   mode: the YDB pilot is a white workspace and dark-mode auto-inversion was
   the source of the black/grey glass surfaces reported on Android. */
html.glass-android-fallback {
    color-scheme: light !important;
    --glass-bg: rgba(255,255,255,.96) !important;
    --glass-fallback-bg: rgba(255,255,255,.96) !important;
    --glass-border: rgba(30,32,40,.10) !important;
    --glass-text: #1d1d1f !important;
    --glass-muted: #555760 !important;
}

/* 共享外观：门面组件使用；数据列表不添加这个 class。 */
.glass-surface {
    color: var(--glass-text);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not(.glass-device-fallback):not(.glass-reduced-motion) .glass-surface {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    }
}

html.glass-device-fallback .glass-surface,
html.glass-reduced-motion .glass-surface {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--glass-fallback-bg);
}

/* ------------------------- 三个试点入口 ------------------------- */

/* 试点 1：登录门面。登录表单是短卡片，不是滚动数据列表。 */
body.glass-pilot-login .login-card,
body.glass-pilot-login .role-card {
    color: var(--glass-text);
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}

/* 试点 2：家长/学生首页的卡片区；明确排除学生“更多”长列表。 */
body.glass-pilot-parent .pp-card,
body.glass-pilot-student .sp-section .pp-card:not(.sp-list):not(.sp-weak-table-wrap),
body.glass-pilot-student .pp-card.sp-hero-card {
    color: var(--glass-text);
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow-compact);
}

/* 轮播图、底部导航、侧栏滚动层不是本试点的玻璃门面，保留纯色以避免大面积重绘。 */
body.glass-pilot-parent .pp-bottom-nav,
body.glass-pilot-student .pp-bottom-nav,
body.glass-pilot-parent .pp-portal-sidebar-overlay,
body.glass-pilot-student .pp-portal-sidebar-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* 试点 3：云嘟状态窗。只改悬浮信息窗，不把历史记录/消息滚动区做成玻璃。 */
body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-cloudu-meta-glass,
body.glass-pilot-supervisor[data-academic-ai-page="supervisor-home"] .aai-cloudu-landing-hero,
body.glass-pilot-supervisor[data-academic-ai-page="supervisor-home"] .aai-mode-card,
body.glass-pilot-supervisor[data-academic-ai-page="supervisor-home"] .aai-role-note {
    color: var(--glass-text);
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* 顶部会话栏属于云嘟门面，使用 compact token；历史/工作区继续禁用模糊。 */
body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-conversation-head {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow-compact) !important;
}

body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-cloudu-meta-glass .aai-cloudu-state,
body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-cloudu-meta-glass .aai-cloudu-operation-context {
    color: var(--glass-muted) !important;
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    border-radius: var(--glass-radius-compact) !important;
    box-shadow: var(--glass-shadow-compact) !important;
}

body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-history,
body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-workspace,
body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-compose-dock,
body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-composer,
body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-attachment-sheet {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-login .login-card,
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-login .role-card,
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-parent .pp-card,
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-student .sp-section .pp-card:not(.sp-list):not(.sp-weak-table-wrap),
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-student .pp-card.sp-hero-card,
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-cloudu-meta-glass,
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-supervisor[data-academic-ai-page="supervisor-home"] .aai-cloudu-landing-hero,
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-supervisor[data-academic-ai-page="supervisor-home"] .aai-mode-card,
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-supervisor[data-academic-ai-page="supervisor-home"] .aai-role-note {
        /* v4 历史层把这些声明成 !important；这里用同等优先级把 18/22px 收口到 token。 */
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
    }

    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-conversation-head {
        -webkit-backdrop-filter: blur(var(--glass-blur-compact)) saturate(var(--glass-saturation-compact)) !important;
        backdrop-filter: blur(var(--glass-blur-compact)) saturate(var(--glass-saturation-compact)) !important;
    }

    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-cloudu-meta-glass .aai-cloudu-state,
    html:not(.glass-device-fallback):not(.glass-reduced-motion) body.glass-pilot-supervisor[data-academic-ai-page="supervisor"] .aai-cloudu-meta-glass .aai-cloudu-operation-context {
        -webkit-backdrop-filter: blur(var(--glass-blur-compact)) saturate(var(--glass-saturation-compact)) !important;
        backdrop-filter: blur(var(--glass-blur-compact)) saturate(var(--glass-saturation-compact)) !important;
    }
}

/* fallback 必须覆盖旧层的高 blur（例如 academic_ai.css 中的 22/26/28px）。 */
html.glass-device-fallback body.glass-pilot-login .login-card,
html.glass-device-fallback body.glass-pilot-login .role-card,
html.glass-device-fallback body.glass-pilot-parent .pp-card,
html.glass-device-fallback body.glass-pilot-student .sp-section .pp-card:not(.sp-list):not(.sp-weak-table-wrap),
html.glass-device-fallback body.glass-pilot-student .pp-card.sp-hero-card,
html.glass-device-fallback body.glass-pilot-supervisor .aai-cloudu-meta-glass,
html.glass-device-fallback body.glass-pilot-supervisor .aai-conversation-head,
html.glass-device-fallback body.glass-pilot-supervisor .aai-composer,
html.glass-device-fallback body.glass-pilot-supervisor .aai-cloudu-landing-hero,
html.glass-device-fallback body.glass-pilot-supervisor .aai-mode-card,
html.glass-device-fallback body.glass-pilot-supervisor .aai-role-note,
html.glass-reduced-motion body.glass-pilot-login .login-card,
html.glass-reduced-motion body.glass-pilot-login .role-card,
html.glass-reduced-motion body.glass-pilot-parent .pp-card,
html.glass-reduced-motion body.glass-pilot-student .sp-section .pp-card:not(.sp-list):not(.sp-weak-table-wrap),
html.glass-reduced-motion body.glass-pilot-student .pp-card.sp-hero-card,
html.glass-reduced-motion body.glass-pilot-supervisor .aai-cloudu-meta-glass,
html.glass-reduced-motion body.glass-pilot-supervisor .aai-conversation-head,
html.glass-reduced-motion body.glass-pilot-supervisor .aai-composer,
html.glass-device-fallback body.glass-pilot-supervisor .aai-cloudu-meta-glass .aai-cloudu-state,
html.glass-device-fallback body.glass-pilot-supervisor .aai-cloudu-meta-glass .aai-cloudu-operation-context,
html.glass-reduced-motion body.glass-pilot-supervisor .aai-cloudu-landing-hero,
html.glass-reduced-motion body.glass-pilot-supervisor .aai-mode-card,
html.glass-reduced-motion body.glass-pilot-supervisor .aai-role-note,
html.glass-reduced-motion body.glass-pilot-supervisor .aai-cloudu-meta-glass .aai-cloudu-state,
html.glass-reduced-motion body.glass-pilot-supervisor .aai-cloudu-meta-glass .aai-cloudu-operation-context {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--glass-fallback-bg) !important;
}

/* 文字颜色保持在浅色玻璃上，避免仅为了透明度牺牲 WCAG AA 可读性。 */
body.glass-pilot-login .login-card,
body.glass-pilot-login .role-card,
body.glass-pilot-parent .pp-card,
body.glass-pilot-student .sp-section .pp-card:not(.sp-list):not(.sp-weak-table-wrap),
body.glass-pilot-student .pp-card.sp-hero-card,
body.glass-pilot-supervisor .aai-cloudu-meta-glass,
body.glass-pilot-supervisor .aai-cloudu-landing-hero,
body.glass-pilot-supervisor .aai-mode-card,
body.glass-pilot-supervisor .aai-role-note {
    color: var(--glass-text);
}

body.glass-pilot-login :is(a, button, input, select, textarea):focus-visible,
body.glass-pilot-parent :is(a, button, input, select, textarea):focus-visible,
body.glass-pilot-student :is(a, button, input, select, textarea):focus-visible,
body.glass-pilot-supervisor :is(a, button, input, select, textarea):focus-visible {
    /* 先给不支持 color-mix 的旧安卓一个可见回退，再用现代浏览器的混色。 */
    outline: 3px solid rgba(167, 25, 35, 0.45);
    outline: 3px solid color-mix(in srgb, var(--glass-focus) 45%, transparent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --glass-blur: 0px;
        --glass-blur-compact: 0px;
    }

    /* 即使 JS 尚未执行，系统级 reduced-motion 也必须立刻关掉模糊。 */
    body.glass-pilot-login .login-card,
    body.glass-pilot-login .role-card,
    body.glass-pilot-parent .pp-card,
    body.glass-pilot-student .sp-section .pp-card:not(.sp-list):not(.sp-weak-table-wrap),
    body.glass-pilot-student .pp-card.sp-hero-card,
    body.glass-pilot-supervisor .aai-cloudu-meta-glass,
    body.glass-pilot-supervisor .aai-conversation-head,
    body.glass-pilot-supervisor .aai-composer,
    body.glass-pilot-supervisor .aai-cloudu-meta-glass .aai-cloudu-state,
    body.glass-pilot-supervisor .aai-cloudu-meta-glass .aai-cloudu-operation-context,
    body.glass-pilot-supervisor .aai-cloudu-landing-hero,
    body.glass-pilot-supervisor .aai-mode-card,
    body.glass-pilot-supervisor .aai-role-note {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--glass-fallback-bg) !important;
    }

    body.glass-pilot-login *,
    body.glass-pilot-parent *,
    body.glass-pilot-student *,
    body.glass-pilot-supervisor * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 560px) {
    body.glass-pilot-login .login-card,
    body.glass-pilot-login .role-card,
    body.glass-pilot-parent .pp-card,
    body.glass-pilot-student .sp-section .pp-card:not(.sp-list):not(.sp-weak-table-wrap),
    body.glass-pilot-student .pp-card.sp-hero-card,
    body.glass-pilot-supervisor .aai-cloudu-meta-glass,
    body.glass-pilot-supervisor .aai-cloudu-landing-hero,
    body.glass-pilot-supervisor .aai-mode-card,
    body.glass-pilot-supervisor .aai-role-note {
        border-radius: var(--glass-radius-compact);
    }
}