/* =====================================================================
   护眼主题 (Eye-Care Theme) — 暖米卡其 / 低蓝光配色
   =====================================================================
   适用项目：CowAgent-1 (9006 端口)

   设计依据：暖米卡其属于低色温暖色调（色相集中在 35~45°），
             蓝光占比远低于冷白/纯白底色，配合低饱和处理可显著
             减轻长时间阅读的视觉疲劳，且比绿调更接近纸张观感。

   实现方式：三态主题（dark / light / eye）
   - eye 主题在 <html> 上加 class="eye"，同时移除 .dark
   - 通过 CSS 变量覆写 + 选择器覆盖，无需改动原有 Tailwind 类

   色调分层（层级 → 色值）：
     页面底      #EDE8DC
     侧边栏      #E4DDCC
     顶栏        #E9E3D5
     卡片/白     #F5F1E7     ← 最亮，作为内容承载面
     正文文字    #3D3A33
     次要文字    #5C564A
     边框        #D3CAB5

   ⚠️ 重要（踩过的坑）：
   本项目 body 挂的是 Tailwind 类；Tailwind 用 CDN 版时，样式表在运行时
   注入 DOM，位置排在静态 CSS 之后，同优先级下后者胜出，导致覆写被静默
   盖掉。因此所有覆写均使用 `element[class]` 形式把特异性抬高，
   确保稳定生效。切勿简化回去。

   ⚠️ 另一坑（2026-09-16 换色板时发现）：
   绿色版把「侧边栏」和「卡片」共用 --c-bg-surface（绿调下二者同色无碍）。
   新色板中卡片 #F5F1E7 明显比侧边栏 #E4DDCC 亮，若沿用旧映射，所有卡片
   会变成深卡其、视觉层次塌陷。故新增 --c-bg-card / --c-bg-header 拆开映射。
   ===================================================================== */

/* ---------- 变量定义 ---------- */
html.eye {
    /* ---------- 背景层（按层级色板拆分） ---------- */
    --c-bg-app:        #EDE8DC;   /* 页面底 */
    --c-bg-surface:    #E4DDCC;   /* 侧边栏 */
    --c-bg-header:     #E9E3D5;   /* 顶栏 */
    --c-bg-card:       #F5F1E7;   /* 卡片 / 白 */
    --c-bg-elevated:   #F5F1E7;   /* 弹窗/浮层，同卡片（最亮面） */
    --c-bg-hover:      #DFD7C3;   /* 悬停态，比侧边栏深一档 */
    --c-bg-active:     #D5CBB4;   /* 选中态，再深一档 */

    /* ---------- 边框层 ---------- */
    --c-border:        #D3CAB5;
    --c-border-strong: #BFB49B;

    /* ---------- 文字层 ---------- */
    --c-text-main:     #3D3A33;   /* 正文文字 */
    --c-text-sub:      #5C564A;   /* 次要文字 */
    --c-text-muted:    #8A8272;   /* 更弱的提示文字 */

    /* ---------- 强调色：暖褐，与卡其底色同色系 ---------- */
    --c-accent:        #7A6A4F;
    --c-accent-hover:  #655740;
    --c-accent-soft:   rgba(122, 106, 79, 0.14);

    /* ---------- 消息气泡 ---------- */
    --c-bubble-user:   #EADFC8;   /* 用户气泡：卡其偏暖 */
    --c-bubble-ai:     #F5F1E7;   /* AI 气泡：卡片色 */
}

/* ---------- 应用底色与主文字 ---------- */
/* 注意：body 上同时挂着 Tailwind 类 bg-[#F7F8FA]（CDN 样式表在 DOM 中位于本文件之后，
   同优先级后者胜出），因此这里用 [class] 属性选择器把特异性提到 (0,2,1)，确保覆写生效 */
html.eye body,
html.eye body[class] {
    background-color: var(--c-bg-app) !important;
    color: var(--c-text-main) !important;
}

/* ---------- 侧边栏 / 会话面板 ---------- */
html.eye #sidebar,
html.eye .session-panel {
    background-color: var(--c-bg-surface) !important;
    border-color: var(--c-border) !important;
    color: var(--c-text-sub) !important;
}
html.eye .session-panel-title { color: var(--c-text-sub) !important; }
html.eye .session-group-label { color: var(--c-text-muted) !important; }
html.eye .session-item { color: var(--c-text-sub) !important; }
html.eye .session-item:hover { background-color: var(--c-bg-hover) !important; }
html.eye .session-item.active { color: var(--c-accent) !important; }
html.eye .session-item.active .session-icon { color: var(--c-accent) !important; }
html.eye .session-icon { color: var(--c-text-muted) !important; }

/* 侧边栏选中项 */
html.eye .sidebar-item.active {
    background: var(--c-accent-soft) !important;
    color: var(--c-accent) !important;
}
html.eye .sidebar-item.active .item-icon { color: var(--c-accent) !important; }
html.eye .sidebar-item:hover { background-color: var(--c-bg-hover) !important; }

/* ---------- 顶栏与主内容 ---------- */
html.eye header,
html.eye #main-content > header,
html.eye header[class] {
    background-color: var(--c-bg-header) !important;
    border-color: var(--c-border) !important;
}
html.eye .view { background-color: transparent !important; }

/* ---------- 输入区 ---------- */
html.eye #input-area,
html.eye .input-container,
html.eye textarea {
    background-color: var(--c-bg-card) !important;
    color: var(--c-text-main) !important;
    border-color: var(--c-border) !important;
}
html.eye textarea::placeholder { color: var(--c-text-muted) !important; }

/* ---------- 通用白底/深底元素覆写 ---------- */
html.eye .bg-white,
html.eye .bg-\[\#FFFFFF\],
html.eye .bg-\[\#F7F8FA\] {
    background-color: var(--c-bg-card) !important;
}
html.eye .bg-slate-50,
html.eye .bg-slate-100,
html.eye .bg-gray-50,
html.eye .bg-gray-100,
html.eye .bg-neutral-50,
html.eye .bg-neutral-100 {
    background-color: var(--c-bg-hover) !important;
}

/* ---------- 文字色覆写（把 slate/gray 系拉回暖绿） ---------- */
html.eye .text-slate-800,
html.eye .text-slate-900,
html.eye .text-gray-800,
html.eye .text-gray-900,
html.eye .text-neutral-800,
html.eye .text-neutral-900 {
    color: var(--c-text-main) !important;
}
html.eye .text-slate-500,
html.eye .text-slate-600,
html.eye .text-slate-700,
html.eye .text-gray-500,
html.eye .text-gray-600,
html.eye .text-gray-700,
html.eye .text-neutral-500,
html.eye .text-neutral-600,
html.eye .text-neutral-700 {
    color: var(--c-text-sub) !important;
}
html.eye .text-slate-400,
html.eye .text-gray-400,
html.eye .text-neutral-400 {
    color: var(--c-text-muted) !important;
}

/* ---------- 边框覆写 ---------- */
html.eye .border-slate-200,
html.eye .border-slate-300,
html.eye .border-gray-200,
html.eye .border-gray-300,
html.eye .border-black\/5 {
    border-color: var(--c-border) !important;
}

/* ---------- 消息气泡 ---------- */
html.eye .msg-content { color: var(--c-text-main) !important; }
html.eye .msg-content code {
    background-color: var(--c-bg-hover) !important;
    color: #5C4A2E !important;
}
html.eye .msg-content pre {
    background-color: var(--c-bg-card) !important;
    border: 1px solid var(--c-border) !important;
}

/* ---------- 弹窗 / 浮层 ---------- */
html.eye .modal,
html.eye .modal-content,
html.eye .confirm-dialog,
html.eye [class*="modal"] > div,
html.eye [class*="dialog"] {
    background-color: var(--c-bg-elevated) !important;
    border-color: var(--c-border) !important;
    color: var(--c-text-main) !important;
}
html.eye .confirm-title { color: var(--c-text-main) !important; }
html.eye .confirm-message { color: var(--c-text-sub) !important; }

/* ---------- 输入控件 / 下拉 ---------- */
html.eye input,
html.eye select,
html.eye option {
    background-color: var(--c-bg-elevated) !important;
    color: var(--c-text-main) !important;
    border-color: var(--c-border) !important;
}

/* ---------- 表格 ---------- */
html.eye table { background-color: var(--c-bg-card) !important; }
html.eye th {
    background-color: var(--c-bg-hover) !important;
    color: var(--c-text-main) !important;
    border-color: var(--c-border) !important;
}
html.eye td {
    color: var(--c-text-sub) !important;
    border-color: var(--c-border) !important;
}
html.eye tr:hover td { background-color: var(--c-bg-hover) !important; }

/* ---------- 强调色按钮 ---------- */
html.eye .bg-primary-500,
html.eye .bg-primary-600 {
    background-color: var(--c-accent) !important;
}
html.eye .bg-primary-500:hover,
html.eye .bg-primary-600:hover {
    background-color: var(--c-accent-hover) !important;
}
html.eye .text-primary-500,
html.eye .text-primary-600 { color: var(--c-accent) !important; }
html.eye .bg-primary-50 { background-color: var(--c-accent-soft) !important; }

/* ---------- 滚动条（护眼绿系） ---------- */
html.eye * {
    scrollbar-color: var(--c-border-strong) transparent;
}
html.eye ::-webkit-scrollbar-thumb { background: var(--c-border-strong) !important; }
html.eye ::-webkit-scrollbar-thumb:hover { background: var(--c-accent) !important; }

/* ---------- Tooltip ---------- */
html.eye [data-tooltip]::after {
    background: var(--c-accent-hover) !important;
    color: #F5F1E7 !important;
}

/* ---------- 代码高亮：护眼主题用 github 浅色版 ---------- */
/* （由 JS 控制 hljs-light / hljs-dark 的 disabled 状态） */

/* ---------- 过渡动画：切主题时柔和淡入，避免闪白 ---------- */
html.eye body,
html.eye #sidebar,
html.eye header {
    transition: background-color 0.25s ease, color 0.25s ease;
}