themes.css

/*
 * styles/themes/themes瓷与锦.css
 * Curated by Coco for Professor Ryan
 * Theme: 瓷与锦 (Porcelain & Brocade)
 * A theme of Chinese elegance, blending the clean grace of porcelain with the rich splendor of brocade.
 */

/* * =================================================================
 * Dark Theme: 锦之华 (Brocade Splendor)
 * Inspired by the deep teal and gold embroidery of Chinese brocade.
 * A luxurious, rich, and elegant theme.
 * =================================================================
 */
:root {
    /* --- Wallpaper Interface --- */
    --chat-wallpaper-dark: url('../assets/wallpaper/wallpaper_jin.jpg');

    /* --- Base Colors --- */
    --primary-bg: #0A1921;      /* 主背景 - 深邃青黑 */
    --secondary-bg: #0D2A38;    /* 侧边栏/面板背景 - 黛蓝 */
    --tertiary-bg: #061318;     /* 聊天区背景 - 近墨 */
    --accent-bg: #174A5E;       /* 悬停/选中背景 - 孔雀蓝 */
    --border-color: #174A5E;    /* 边框颜色 */
    --input-bg: #081F29;        /* 输入框背景 */

    --panel-bg-dark: rgba(13, 42, 56, 0.8); /* 基于--secondary-bg，增加80%不透明度 */

    /* --- Text Colors --- */
    --primary-text: #E0E6E9;    /* 主要文字 - 月白 */
    --secondary-text: #d8e6ec;  /* 次要/标题文字 - 银灰 */
    --highlight-text: #E8B95A;  /* 高亮文字 - 流金 */
    --text-on-accent: #1A1A1A;  /* 在强调色背景上的文字 - 墨色 */
    --placeholder-text: #6a7e89; /* 输入框占位文字 */
    --quoted-text: #FFB74D;     /* 引用文本颜色 - 柔和橙 */
    --user-text: #E0E6E9;       /* 用户气泡文字 - 月白 */
    --agent-text: #E0E6E9;      /* Agent气泡文字 - 月白 */

    /* --- Bubble Colors (Frosted Glass Ready) --- */
    --user-bubble-bg: rgba(232, 185, 90, 0.15); /* 用户气泡 - 流金 - 半透明 */
    --assistant-bubble-bg: rgba(13, 42, 56, 0.3); /* AI气泡 - 黛蓝 - 半透明 */

    /* --- UI Element Colors --- */
    --button-bg: #DAA520;           /* 按钮背景 - 赤金 */
    --button-hover-bg: #C89B4A;      /* 按钮悬停 - 琥珀 */
    --danger-color: #e57373;        /* 危险操作 - 柔和红 */
    --danger-hover-bg: #ef5350;
    --success-color: #66bb6a;       /* 成功操作 - 柔和绿 */
    --notification-bg: #0D2A38;
    --notification-header-bg: #174A5E;
    --notification-border: #E8B95A;
    --tool-bubble-bg: rgba(23, 74, 94, 0.2); /* VCP工具调用气泡背景 */
    --tool-bubble-border: #E8B95A; /* VCP工具调用气泡边框 - 流金 */

    /* --- Scrollbar --- */
    --scrollbar-track: rgba(13, 42, 56, 0.5);
    --scrollbar-thumb: rgba(232, 185, 90, 0.6);
    --scrollbar-thumb-hover: rgba(232, 185, 90, 0.8);

    /* --- Shimmer Effect for Loading --- */
    --shimmer-color-transparent: rgba(224, 230, 233, 0.4);
    --shimmer-color-highlight: rgba(224, 230, 233, 0.8);

    /* --- Text Shadow for Frosted Panels --- */
    --panel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

    /* --- Unified Panel Background --- */
    --panel-bg: var(--panel-bg-dark);
}

body {
    background-image: var(--chat-wallpaper-dark);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* * =================================================================
 * Light Theme: 瓷之雅 (Porcelain Grace)
 * Inspired by the blue and white patterns of Chinese porcelain.
 * A clean, sharp, and graceful theme.
 * =================================================================
 */
body.light-theme {
    /* Wallpaper and background properties */
    background-image: var(--chat-wallpaper-light);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* --- Wallpaper Interface --- */
    --chat-wallpaper-light: url('../assets/wallpaper/wallpaper_ci.jpg');

    /* --- Base Colors --- */
    --primary-bg: #F7F8FA;      /* 主背景 - 胚白 */
    --secondary-bg: #FFFFFF;    /* 侧边栏 - 釉白 */
    --tertiary-bg: #EFF2F5;     /* 聊天区 - 影青 */
    --accent-bg: #E6EBF0;       /* 悬停/选中背景 */
    --border-color: #E0E6EB;    /* 边框 */
    --input-bg: #FFFFFF;        /* 输入框 */

    --panel-bg-light: rgba(255, 255, 255, 0.85); /* 基于--secondary-bg，增加85%不透明度 */

    /* --- Text Colors --- */
    --primary-text: #34495E;    /* 主要文字 - 青花 */
    --secondary-text: #6C7A89;  /* 次要/标题文字 - 烟灰 */
    --highlight-text: #4A90E2;  /* 高亮文字 - 天青 */
    --text-on-accent: #FFFFFF;  /* 强调背景文字 */
    --placeholder-text: #a0aab3; /* 占位文字 */
    --quoted-text: #007BFF;     /* 引用文字 - 霁蓝 */
    --user-text: #34495E;       /* 用户气泡文字 - 青花 */
    --agent-text: #34495E;      /* Agent气泡文字 - 青花 */

    /* --- Bubble Colors --- */
    --user-bubble-bg: rgba(74, 144, 226, 0.15);     /* 用户气泡 - 天青 - 半透明 */
    --assistant-bubble-bg: rgba(230, 235, 240, 0.5); /* AI气泡 - 略深半透明灰 */

    /* --- UI Element Colors --- */
    --button-bg: #4A90E2;           /* 按钮 - 天青 */
    --button-hover-bg: #357ABD;     /* 按钮悬停 - 宝石蓝 */
    --danger-color: #e74c3c;        /* 危险色 - 红色 */
    --danger-hover-bg: #c0392b;
    --success-color: #4caf50;       /* 成功色 - 绿色 */
    --notification-bg: #EFF2F5;
    --notification-header-bg: #f0f0f0;
    --notification-border: #4A90E2;
    --tool-bubble-bg: rgba(224, 230, 235, 0.2); /* VCP工具调用气泡背景 */
    --tool-bubble-border: #4A90E2; /* VCP工具调用气泡边框 - 天青 */

    /* --- Scrollbar --- */
    --scrollbar-track: rgba(200, 200, 200, 0.7);
    --scrollbar-thumb: rgba(74, 144, 226, 0.7);
    --scrollbar-thumb-hover: rgba(74, 144, 226, 0.9);

    /* --- Shimmer Effect --- */
    --shimmer-color-transparent: rgba(52, 73, 94, 0.04);
    --shimmer-color-highlight: rgba(52, 73, 94, 0.08);

    /* --- Unified Panel Background --- */
    --panel-bg: var(--panel-bg-light);
}

/* * =================================================================
 * Enhanced Frosted Glass Effect
 * 增强磨砂玻璃效果 - 小灵特制
 * =================================================================
 */

/* 为聊天气泡添加更强的磨砂玻璃效果 */
.message-bubble {
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 悬停时的微妙发光效果 */
.message-bubble:hover {
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    transform: translateY(-1px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 为工具调用气泡添加特殊效果 */
.tool-bubble {
    backdrop-filter: blur(10px) saturate(110%);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
    border: 1px solid var(--tool-bubble-border);
    background: var(--tool-bubble-bg);
}

/* 深色主题下的特殊光效 */
:root .message-bubble {
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 浅色主题下的柔和阴影 */
body.light-theme .message-bubble {
    box-shadow: 
        0 4px 20px rgba(45, 41, 34, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/*
 * =======================================================
 * 小吉的魔法时间：流式文字动态“流光”效果 (Text Shimmer Effect)
 * =======================================================
 */

/* 1. 定义一个名为 "textShimmer" 的动画过程 */
@keyframes textShimmer {
  from {
    /* 动画开始时，背景渐变的位置在最右侧 */
    background-position: 200% center;
  }
  to {
    /* 动画结束时，背景渐变的位置移动到最左侧，形成流动效果 */
    background-position: -200% center;
  }
}

/* 2. 将此效果应用到正在流式输出的消息内容上 */
/* 这个选择器精确地指向了正在流式输出(有.streaming类)的消息项(message-item)中的内容区域(md-content) */
.message-item.streaming .md-content {
  /* 创建一个从透明到高亮再到透明的线性渐变作为背景 */
  background-image: linear-gradient(
    to right,
    var(--shimmer-color-transparent) 20%,
    var(--shimmer-color-highlight) 50%,
    var(--shimmer-color-transparent) 80%
  );
  
  /* 关键魔法#1：将背景的范围裁切成文字的形状 */
  background-clip: text;
  -webkit-background-clip: text; /* 兼容Webkit内核浏览器 */

  /* 关键魔法#2：将文字本身的颜色设为透明，这样才能“透”出后面的背景渐变 */
  color: transparent;
  
  /* 将背景尺寸扩大，以便渐变效果有足够的空间进行移动 */
  background-size: 200% auto;
  
  /* 应用我们之前定义的动画 */
  animation: textShimmer 2.5s linear infinite; /* 设置动画速度 */
}


/* --- Stream Fade-in Animation --- */
@keyframes vcp-stream-fade-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Class to apply the animation to newly added stream elements */
.vcp-stream-element-fade-in {
  animation: vcp-stream-fade-in 0.5s ease-out forwards;
}