/* =========================================
   主题系统 - 日夜模式
   -----------------------------------------
   设计原则（重构说明）：
   1. 本文件是主题变量的【唯一数据源】。app.js 的 initTheme() 会把
      data-theme 写到 <html> 上，所有配色都必须挂在这两个选择器下。
   2. 之前 responsive.css 里残留了一段 @media (prefers-color-scheme: dark)，
      它会覆盖 :root 变量。由于 responsive.css 在 theme.css 之后加载，
      同优先级下后加载者胜 —— 结果：系统处于深色模式时，日间模式被强制
      改成了深色，而且只覆盖了 6 个变量，于是出现
      "侧边栏深色 + 列表白色 + 气泡浅色" 的错乱状态。该段已删除。
   3. 深色不是"把浅色反相"，而是独立的完整配色，两个模式必须是镜像结构。
   ========================================= */

/* =========================================
   日间模式（默认）
   ========================================= */
:root,
[data-theme="light"] {
    /* 基础背景 —— 微信经典浅灰体系 */
    --bg-primary: #ededed;        /* 应用底色 / 聊天区外围 */
    --bg-secondary: #ffffff;      /* 卡片、面板、列表、输入区 */
    --bg-tertiary: #f7f7f7;       /* 次级填充：搜索框、标签、输入底 */
    --bg-chat: #f5f5f5;           /* 聊天消息区背景 */
    --bg-sidebar: #2e2e2e;        /* 左侧功能栏：微信本身即为深色 */
    --bg-hover: #f2f2f2;

    /* 文字颜色 */
    --text-primary: #191919;      /* 正文、标题 */
    /* 文字层级 —— 数值按 WCAG 对比度实测选定，不是凭感觉调的：
       --text-secondary  #767676 → 白底 4.54:1 ✓（原 #7a7a7a 仅 4.29，差一点点不达标）
       --text-tertiary   #8c8c8c → 搜索框底 3.14:1
         占位符文本按 WCAG 属豁免项，故不强行拉到 4.5（那会让占位文字
         与正文几乎同色、失去层级）；但原值 2.22:1 已接近"隐形"，必须提。 */
    --text-secondary: #767676;
    --text-tertiary: #8c8c8c;
    --text-inverse: #ffffff;      /* 深色底上的文字 */
    --text-on-sidebar: #d8d8d8;   /* 侧边栏图标文字 */
    --text-on-sidebar-active: #07c160;

    /* 边框 */
    --border-color: #e3e3e3;
    --border-light: #f0f0f0;

    /* 阴影 —— 日间用淡阴影，避免灰调发脏 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.10);

    /* 消息气泡 */
    --bubble-received: #ffffff;
    --bubble-sent: #95ec69;
    --bubble-text-received: #191919;
    --bubble-text-sent: #191919;

    /* 列表项交互态 */
    --list-item-hover: #f2f2f2;
    --list-item-active: #e9e9e9;

    /* 状态色 */
    --red-badge: #fa5151;
    --success-color: #07c160;

    /* 遮罩与毛玻璃 */
    --overlay-bg: rgba(0, 0, 0, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-bg-light: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(230, 236, 241, 0.5);

    /* emoji-mart 选择器配色（组件用 RGB 三元组变量，非完整色值） */
    --emoji-picker-bg: 255, 255, 255;
    --emoji-picker-fg: 25, 25, 25;
    --emoji-picker-input: 247, 247, 247;
}

/* =========================================
   夜间模式
   ========================================= */
[data-theme="dark"] {
    /* 基础背景 */
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2c2c2c;
    --bg-chat: #1c1c1c;
    --bg-sidebar: #171717;
    --bg-hover: #2f2f2f;

    /* 文字颜色 */
    --text-primary: #e6e6e6;
    --text-secondary: #a0a0a0;   /* 深色卡片上 5.94:1 ✓ */
    --text-tertiary: #9a9a9a;    /* 占位符：原 #787878 在深色底上仅 3.16:1，提到 4.96:1 */
    --text-inverse: #191919;
    --text-on-sidebar: #b0b0b0;
    --text-on-sidebar-active: #07c160;

    /* 边框 */
    --border-color: #363636;
    --border-light: #2c2c2c;

    /* 阴影 —— 深色下加重才有层次 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.55);

    /* 消息气泡 —— 深色下用"略亮于背景"的灰，而非高饱和绿 */
    --bubble-received: #2c2c2c;
    --bubble-sent: #3eb575;
    --bubble-text-received: #e6e6e6;
    /* ⚠️ 这里必须是深色文字，不能用白色。
       实测：白字压 #3eb575 = 2.60:1，远低于正文要求的 4.5:1；
       深色字 = 6.76:1 通过。原因很直观 —— 亮绿气泡本身已经够亮，
       上面再放浅色文字就变成"浅底浅字"，与日间模式保持同一逻辑
       （日间也是深字压亮绿 #95ec69，12.12:1）。
       参考 ui-ux-pro-max 交付清单："Checked dark mode contrast independently
       (never assume light-mode values carry over)" —— 这行原本正是踩了这个坑。 */
    --bubble-text-sent: #191919;

    /* 列表项交互态 */
    --list-item-hover: #2f2f2f;
    --list-item-active: #383838;

    /* 状态色 */
    --red-badge: #e5544f;
    --success-color: #3eb575;

    /* 遮罩与毛玻璃 */
    --overlay-bg: rgba(0, 0, 0, 0.65);
    --glass-bg: rgba(36, 36, 36, 0.95);
    --glass-bg-light: rgba(36, 36, 36, 0.98);
    --glass-border: rgba(70, 70, 70, 0.6);

    /* emoji-mart 选择器配色（夜间） */
    --emoji-picker-bg: 36, 36, 36;
    --emoji-picker-fg: 230, 230, 230;
    --emoji-picker-input: 44, 44, 44;
}

/* =========================================
   兼容别名：老代码里混用了两套变量名，
   这里统一映射，避免出现"某个元素没跟随主题"。
   ========================================= */
:root {
    --background-color: var(--bg-primary);
    --white: var(--bg-secondary);
    --hover-bg: var(--list-item-hover);
    --chat-bg: var(--bg-chat);

    --text-primary-color: var(--text-primary);
    --text-secondary-color: var(--text-secondary);
    --text-tertiary-color: var(--text-tertiary);

    --message-bubble-received: var(--bubble-received);
    --message-bubble-sent: var(--bubble-sent);
    --message-text-received: var(--bubble-text-received);
    --message-text-sent: var(--bubble-text-sent);
}

/* =========================================
   过渡动画
   -----------------------------------------
   注意：不要写成全局 `* { transition: ... }`。
   那会让页面上每个元素（含列表项、消息、图标）在主题切换、
   悬停、数据刷新时都参与过渡，既卡顿又会互相干扰；
   flat-design-updates.css 为了压掉它，不得不写一堆 !important。
   这里只让真正需要平滑过渡的容器参与。
   ========================================= */
body,
.app-container,
.sidebar-menu,
.list-container,
.chat-window,
.detail-panel,
.main-content,
.modal-content,
.emoji-panel,
.context-menu {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 尊重系统的"减少动态效果"偏好 */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================
   主题切换按钮
   ========================================= */
.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    outline: none;
    flex-shrink: 0;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .theme-toggle {
    background: var(--success-color);
}

[data-theme="dark"] .theme-toggle::before {
    transform: translateX(24px);
    background: #f0f0f0;
}

.theme-toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.theme-toggle-icon.sun {
    left: 7px;
    color: #ffa500;
}

[data-theme="dark"] .theme-toggle-icon.sun {
    opacity: 0;
}

.theme-toggle-icon.moon {
    right: 7px;
    color: #ffffff;
    opacity: 0;
}

[data-theme="dark"] .theme-toggle-icon.moon {
    opacity: 1;
}

/* 移动端切换按钮 */
@media (max-width: 768px) {
    .theme-toggle {
        width: 56px;
        height: 30px;
        background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
        box-shadow: 0 2px 8px rgba(253, 203, 110, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .theme-toggle::before {
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .theme-toggle {
        background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
        box-shadow: 0 2px 8px rgba(45, 52, 54, 0.5);
        border-color: rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .theme-toggle::before {
        transform: translateX(26px);
        background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%);
    }

    .theme-toggle-icon.sun {
        left: 8px;
        color: #f39c12;
    }

    [data-theme="dark"] .theme-toggle-icon.sun {
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }

    .theme-toggle-icon.moon {
        right: 8px;
        color: #ffeaa7;
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }

    [data-theme="dark"] .theme-toggle-icon.moon {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    .theme-toggle:active {
        transform: scale(0.95);
    }
}