/* ============================================================
   CowAgent Console — 性能精简层 (Perf-Lite) v1.0
   ============================================================
   日期：2026-09-14
   动因：生产站点 https://cowfubao.duckdns.org/chat 体感「巨卡」。
        实测基线（Chromium headless，登录页）：
          FCP 4728ms / load 6146ms / 传输 2.28MB（未 gzip）
        代码侧根因（渲染开销）：
          · console-premium-overlay.css 有 25 处 backdrop-filter（毛玻璃）
          · 消息气泡 .msg-content 每条都带 blur(16px) → 滚动时逐帧重采样
          · 底部输入条 blur(24px) 固定悬浮 → 滚动背景持续变化
          · body::before 全屏 mesh 渐变叠层
          · view/气泡入场动画、图标 drop-shadow 光晕、渐变文字
   策略：本文件最后加载，只做「减法」——
         关掉毛玻璃/光晕/装饰动画，把原来的半透明玻璃面改成不透明实色，
         布局、间距、配色、对比度（含 Sprint 2 的 WCAG AA 修复）一律不动。

   回滚：删除 chat.html 里对本文件的 <link> 即可恢复原「炫酷特效」。
   ============================================================ */

/* ------------------------------------------------------------
   1. 全局关闭毛玻璃 —— 滚动掉帧的头号元凶
   backdrop-filter 会强制合成层在每帧重新采样并模糊背景；
   侧栏/顶栏/输入条固定悬浮，滚动时背景持续变化 → 全帧重模糊。
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ------------------------------------------------------------
   2. 原本「玻璃」的面 → 不透明实色
   去掉模糊后仍保留半透明会露出下层内容，故按原色系给实色。
   ------------------------------------------------------------ */

/* 深色主题 */
html.dark body::before { display: none !important; }   /* 全屏 mesh 渐变叠层 */

html.dark #sidebar {
    background: #0e0e15 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html.dark .session-panel { background: #0f0f18 !important; }

html.dark header {
    background: #0a0a0f !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html.dark header::after { display: none !important; }  /* 顶栏霓虹扫线 */

html.dark #login-overlay .max-w-sm {
    background: #12121c !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark #login-password { background: rgba(255, 255, 255, 0.06) !important; }

/* 底部输入条：原来 blur(24px) 悬浮毛玻璃，滚动开销最大的一处 */
html.dark .border-t.bg-white {
    background: #0a0a0f !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html.dark #chat-input { background: rgba(255, 255, 255, 0.06) !important; }

html.dark #scroll-to-bottom-btn {
    background: #15151f !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* 消息气泡：每条都带 blur(16px)，聊天记录一长就是逐条重模糊 */
html.dark .bot-message-group .msg-content {
    background: #16161f !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

html.dark #welcome-screen .example-card { background: #131320 !important; }

html.dark .premium-card,
html.dark .glow-card,
html.dark .top-bar {
    background: #14141f !important;
    border: 1px solid var(--bg-glass-border);
}

/* 浅色主题（v1.7 苹果化玻璃） */
html:not(.dark) #sidebar { background: #ffffff !important; }

html:not(.dark) header { background: #ffffff !important; }

html:not(.dark) .top-bar { background: #ffffff !important; }

/* ------------------------------------------------------------
   3. 关掉装饰性动画
   入场动画在 SSE 流式输出时会随 DOM 变化反复触发；
   无限循环动画则让合成器一直空转。
   ------------------------------------------------------------ */
html.dark .view.active,
html.dark .bot-message-group:not(:first-of-type),
.animate-fade-in-up,
.glow-card::before,
#dash-channel-list .bg-emerald-500,
.drag-overlay-content {
    animation: none !important;
}

.animate-fade-in-up { opacity: 1 !important; transform: none !important; }
.animation-delay-100, .animation-delay-200,
.animation-delay-300, .animation-delay-400 { animation-delay: 0s !important; }

/* 保留流式输出的光标闪烁（功能性提示，且只在输出时存在） */

/* ------------------------------------------------------------
   4. 关掉光晕 / 渐变描边 / 渐变文字
   drop-shadow 与 background-clip:text 都会引入额外重绘。
   ------------------------------------------------------------ */
html.dark #sidebar .sidebar-item:hover .item-icon,
html.dark #sidebar .sidebar-item.active .item-icon,
.sidebar-item:hover .item-icon,
.sidebar-item.active .item-icon {
    filter: none !important;
}

html.dark #login-overlay img,
html.dark #welcome-screen img,
html.dark .bot-message-group > img {
    box-shadow: none !important;
}

html.dark #login-btn,
html.dark #send-btn,
html.dark #scroll-to-bottom-btn:hover {
    box-shadow: none !important;
}

html.dark #scroll-to-bottom-btn:hover,
html.dark #send-btn:hover:not(:disabled),
html.dark #login-btn:hover,
html.dark #welcome-screen .example-card:hover,
.premium-card:hover {
    transform: none !important;
}

html.dark #welcome-screen .example-card:hover { box-shadow: none !important; }

/* 示例卡渐变描边（mask-composite 双层遮罩） */
html.dark #welcome-screen .example-card::before,
.glow-card::before { display: none !important; }

/* 渐变文字 → 实色（保留可读性与原有色调） */
html.dark #login-overlay h1,
html.dark #welcome-title {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: #f1f5f9 !important;
}

.neon-text {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: #22d3ee !important;
}

/* 霓虹滚动条 → 朴素滚动条 */
html.dark ::-webkit-scrollbar-thumb {
    background: #475569 !important;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}

/* ------------------------------------------------------------
   5. 收窄 transition 作用面
   原「transition: all」会把非视觉属性（如 width/height）也纳入
   过渡，布局变动时产生额外帧。收窄为纯绘制属性。
   ------------------------------------------------------------ */
html.dark #chat-input,
html.dark #send-btn,
html.dark #login-password,
html.dark #login-btn,
.premium-card {
    transition-property: background-color, border-color, color, box-shadow !important;
}

/* A74 UIUX-PASS-20261029 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) {
    outline: none;
}

@media (max-width: 480px) {
    .btn,
    button,
    .sidebar-item,
    input,
    select,
    textarea {
        min-height: 40px;
    }

    .icon-btn,
    button[aria-label],
    .btn-icon {
        min-width: 40px;
    }
}

html.dark [class*="muted"] {
    color: #a8b3c7;
}

button,
a,
.card,
.sidebar-item,
input,
select {
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
/* END A74 UIUX-PASS-20261029 */