其它Cherry Studio主题 通用用户消息居右布局CSS模块 v5.0

Cherry Studio 主题消息都是居左显示，测试了很多都没有用户消息居右显示的，看着很不方便。于是就利用gemini-2.5-pro制作个通用模块理论上所有主题都可以适用。分享出来给有需要的朋友。推荐直接使用v5版本。

模板：Cherry Studio 通用用户消息居右布局模块 v1.0

模块功能：
强制将任何 Cherry Studio 主题中的用户消息布局修改为：整体靠右，且头像/信息在上，气泡在下的垂直堆叠模式。

使用方法：

1. 打开您想修改的任意 Cherry Studio 主题的 .css 文件。
2. 在文件中搜索关键词 message-user，找到原作者写的关于用户消息布局的样式代码块。
3. 用下面的整个模板代码，完整替换掉您找到的旧代码块。
4. 如果找不到，或者不确定，最简单的方法是：直接将下面的模板代码完整复制并粘贴到您的 .css 文件的最末尾。 CSS的优先级规则会确保新样式覆盖旧样式。

通用用户消息美化与布局模块 v5.0 (最终定制版)

仿微信气泡样式，支持亮色与深色模式主题自动切换。

/**
 * ========================================================================
 * == UNIVERSAL CHERRY STUDIO USER MESSAGE LAYOUT & STYLE MODULE v5.0    ==
 * ========================================================================
 *
 * PURPOSE:
 * The final, fully customized version of the all-in-one module. It fixes
 * message layout and applies user-defined themes for both Light and Dark modes,
 * switching between them automatically. This is the complete solution.
 *
 * HOW TO USE:
 * 1. Replace any older version with this entire block at the VERY END of your CSS.
 * 2. No further edits are needed. The module is perfectly tuned to your specs.
 *
 * AUTHOR: AI Assistant & You
 * VERSION: 5.0 (Final Themed Edition)
 * STATUS: Complete & Perfected
 *
 */

/* === 模块第一部分: 核心样式变量 (您的自定义亮色模式) === */
:root {
  /* -- 用户消息气泡背景色 (亮色) -- */
  --module-user-bubble-bg: #95EC69;

  /* -- 用户消息气泡内的文字颜色 (亮色) -- */
  --module-user-bubble-text: #0F170A;

  /* -- 用户头像的背景色 (亮色) -- */
  --module-user-avatar-bg: #419434;

  /* -- 气泡的圆角大小 (通用) -- */
  --module-bubble-radius: 18px;
}


/* === 模块第二部分: 布局引擎 (通用) === */
div[class*="MessageContainer-"][class*="message-user"] {
  grid-column: 1 / 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  max-width: 100% !important;
}
div[class*="MessageContainer-"][class*="message-user"] div[class*="MessageContentContainer-"],
div[class*="MessageContainer-"][class*="message-user"] div[class*="message-header"] {
    max-width: 85%;
    width: -moz-fit-content;
    width: fit-content;
}
div[class*="MessageContainer-"][class*="message-user"] div[class*="message-header"] {
  justify-content: flex-end !important;
}


/* === 模块第三部分: 视觉美化引擎 (通用) === */
div[class*="message-user"] div[class*="MessageContentContainer-"] {
  background-color: var(--module-user-bubble-bg) !important;
  color: var(--module-user-bubble-text) !important;
  border-radius: var(--module-bubble-radius) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important; /* 调整了阴影以匹配更亮的背景 */
  padding: 14px 20px !important;
  margin-top: 8px !important;
}
div[class*="message-user"] div[class*="MessageContentContainer-"] * {
    color: var(--module-user-bubble-text) !important;
}
div[class*="message-user"] div[class*="MessageContentContainer-"] strong {
    color: #000 !important;
    font-weight: 600 !important;
}
div[class*="MessageContainer-"][class*="message-user"] .ant-avatar {
  background-color: var(--module-user-avatar-bg) !important;
  color: #fff !important;
}


/* === 模块第四部分: 深色模式自动切换 (您的自定义深色模式) === */
/* 以下规则仅在用户的操作系统或浏览器设置为深色模式时生效 */
@media (prefers-color-scheme: dark) {
  :root {
    /* -- 用户指定的自定义深色模式配色方案 -- */
    --module-user-bubble-bg: #2C2C2C;
    --module-user-bubble-text: #D5D5D5;
    --module-user-avatar-bg: #3A3B3C;
  }

  /* 在深色模式下，将粗体文字的颜色调整为与普通文字一致 */
  div[class*="message-user"] div[class*="MessageContentContainer-"] strong {
      color: var(--module-user-bubble-text) !important;
      font-weight: 600 !important;
  }

  /* 深色模式下，为气泡增加一个微妙的边框，使其在深色背景中依然有界限感 */
  div[class*="message-user"] div[class*="MessageContentContainer-"] {
      box-shadow: none !important; /* 移除阴影 */
      border: 1px solid rgba(255, 255, 255, 0.1) !important; /* 添加一个非常淡的边框 */
  }
}

v5.0 模块它包含了：

• 核心布局修复：解决了最初的右对齐问题。
• 亮色主题：充满活力的 #95EC69 绿色气泡。
• 深色主题：优雅专业的 #2C2C2C 灰色气泡。
• 无缝自动切换：完美适配系统环境。
• 高度模块化：可轻松移植到任何地方。

V5版本效果图

核心原理

这个模板依赖于一个清晰的 “两级Flexbox” 逻辑：

1. 第一级（父级 - 聊天列表）： 我们命令它 flex-direction: column。在这个模式下，align-self: flex-end 就能控制子项实现水平上的右对齐。
2. 第二级（子级 - 用户消息块）： 我们命令它自己也变成一个 flex-direction: column 的容器。在这个模式下，align-items: flex-end 就能控制它内部的子元素（头像行、气泡）实现水平上的右对齐。
   利用的是CSS现代布局的标准行为，而不是依赖于可能会因应用更新而改变的边距（margin）或浮动（float）。

** Cherry Studio通用用户消息右对齐模块 v2.0 (跨栏修复版)**

修复用户消息右边显示时和边框之间有空白间隙的问题。

/**
 * ========================================================================
 * == UNIVERSAL CHERRY STUDIO USER MESSAGE RIGHT-ALIGN MODULE v2.0       ==
 * ========================================================================
 *
 * PURPOSE:
 * This is a plug-and-play CSS module to force user messages to align to the
 * true right edge of the screen, definitively solving the "right margin gap" issue.
 * The core problem is a parent container using a 2-column grid layout. This module
 * makes the user message span BOTH columns, giving it 100% width to align its content.
 *
 * HOW TO USE:
 * 1. Find any existing CSS rules for '.message-user' in your theme file.
 * 2. Delete or comment out that entire block.
 * 3. Paste this entire block at the VERY END of your CSS file.
 *
 * AUTHOR: AI Assistant (based on user's successful layout from v2.4)
 * VERSION: 2.0 (Grid Span Fix)
 *
 */

/* ---  Chat Layout & Bubbles (Universal Right-Align Grid Span Fix) --- */

/* 模块第一部分：核心修复 - 让用户消息“跨栏”占据全部宽度 */
/* 目标：这是解决问题的关键。我们命令用户消息块忽略父容器的双栏限制，从第一列开始，到最后一列结束，横跨整个区域。*/
div[class*="MessageContainer-"][class*="message-user"] {
  /* --- 关键修复命令 --- */
  grid-column: 1 / 3 !important;        /* 让此元素从网格第1条线跨到第3条线（即横跨2列）*/

  /* --- 对内规则：如何排列自己的内容 --- */
  display: flex !important;             /* 自身启用 Flexbox 布局 */
  flex-direction: column !important;    /* 内部内容（头像、气泡）垂直堆叠 */
  align-items: flex-end !important;     /* 将所有内部内容推到容器的最右边 */

  /* --- 基础样式：允许容器伸展到100%宽度 --- */
  max-width: 100% !important;           /* 必须允许容器本身占满它跨越的宽度 */
}

/* 模块第二部分：约束气泡本身的宽度 */
/* 目标：容器虽然是100%宽了，但我们不希望消息气泡也那么宽。所以我们在这里限制气泡和头部的最大宽度。*/
div[class*="MessageContainer-"][class*="message-user"] .bubble,
div[class*="MessageContainer-"][class*="message-user"] [class*="Header-"] {
    max-width: 85%;                     /* 消息内容的最大宽度 */
    width: -moz-fit-content;            /* 宽度自适应内容 */
    width: fit-content;
}

/* 模块第三部分：微调用户消息头部的对齐 */
/* 目标：这是一个双重保险，确保包含头像、用户名的头部信息也严格靠右。*/
div[class*="MessageContainer-"][class*="message-user"] div[class*="Header-"] {
  justify-content: flex-end !important; /* 让 header 内部的 flex item 靠右 */
}

/*
 * 注意：本模块不包含气泡颜色、字体颜色等美化样式。
 * 它只专注于解决“布局”问题。
 * 您可以继续在下方添加您自己的颜色或字体样式规则。
 * 例如：
 * div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container {
 *   background-color: #0A84FF !important;
 *   color: #fff !important;
 * }
 */

谷歌的风格用户消息居右显示主题代码

/**
 * Cherry Studio - Apple Design Overhaul v2.2 (Final Vertical Layout Fix)
 * Original theme by user, refined by Swift Expert
 *
 * This version incorporates the final fix for chat message alignment,
 * achieving a right-aligned, vertical stack for user messages as requested.
 *
 * - STRATEGY:
 *   - The chat list container is a vertical flexbox.
 *   - The user message block (`MessageContainer`) uses `align-self: flex-end` to shift right.
 *   - The user message block itself becomes a vertical flexbox (`flex-direction: column`).
 *   - Its children (header, bubble) are aligned to the right via `align-items: flex-end`.
 */

:root {
  /* ---  Apple Font System --- */
  --font-apple-system: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Arial", sans-serif;
  --font-apple-mono: "SF Mono", "Menlo", "Monaco", "JetBrains Mono", "Consolas", monospace;

  /* ---  Core Sizing & Animation --- */
  --radius-l: 18px;
  --radius-m: 12px;
  --radius-s: 8px;

  --transition-fast: background-color 0.2s cubic-bezier(0.5, 0, 0.25, 1),
                     color 0.2s cubic-bezier(0.5, 0, 0.25, 1),
                     transform 0.2s cubic-bezier(0.5, 0, 0.25, 1),
                     box-shadow 0.2s cubic-bezier(0.5, 0, 0.25, 1),
                     border-color 0.2s cubic-bezier(0.5, 0, 0.25, 1);
  --transition-normal: background-color 0.35s cubic-bezier(0.5, 0, 0.25, 1),
                       color 0.35s cubic-bezier(0.5, 0, 0.25, 1),
                       transform 0.35s cubic-bezier(0.5, 0, 0.25, 1),
                       box-shadow 0.35s cubic-bezier(0.5, 0, 0.25, 1),
                       border-color 0.35s cubic-bezier(0.5, 0, 0.25, 1);


  /* ---  Dark Mode Palette (Source of Truth) --- */
  --bg-page-dark: #1D1D1F;
  --color-accent-dark: #0A84FF;
  --bg-material-dark: rgba(50, 50, 52, 0.75);
  --border-material-dark: rgba(255, 255, 255, 0.18);
  --shadow-material-dark: 0 16px 32px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.2);
  --text-primary-dark: rgba(255, 255, 255, 0.95);
  --text-secondary-dark: rgba(235, 235, 245, 0.7);
  --bg-hover-dark: rgba(255, 255, 255, 0.1);
  --bg-button-dark: rgba(255, 255, 255, 0.12);
  --bg-button-hover-dark: rgba(255, 255, 255, 0.2);
  --bg-code-header-dark: rgba(0, 0, 0, 0.25);
  --scrollbar-thumb-dark: rgba(136, 136, 136, 0.6);
  --scrollbar-thumb-hover-dark: rgba(153, 153, 153, 0.8);

  /* --- Semantic Variables (Dark Mode Default) --- */
  --bg-page: var(--bg-page-dark);
  --color-accent: var(--color-accent-dark);
  --bg-material: var(--bg-material-dark);
  --border-material: var(--border-material-dark);
  --shadow-material: var(--shadow-material-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --bg-hover: var(--bg-hover-dark);
  --bg-button: var(--bg-button-dark);
  --bg-button-hover: var(--bg-button-hover-dark);
  --bg-code-header: var(--bg-code-header-dark);
  --scrollbar-thumb: var(--scrollbar-thumb-dark);
  --scrollbar-thumb-hover: var(--scrollbar-thumb-hover-dark);
}

/* ---  Light Mode --- */
body[theme-mode="light"] {
  /* --- Light Mode Palette (Source of Truth) --- */
  --bg-page-light: #F5F5F7;
  --color-accent-light: #007AFF;
  --bg-material-light: rgba(252, 252, 252, 0.82);
  --border-material-light: rgba(0, 0, 0, 0.12);
  --shadow-material-light: 0 16px 32px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.06);
  --text-primary-light: rgba(0, 0, 0, 0.88);
  --text-secondary-light: rgba(60, 60, 67, 0.68);
  --bg-hover-light: rgba(0, 0, 0, 0.08);
  --bg-button-light: rgba(0, 0, 0, 0.08);
  --bg-button-hover-light: rgba(0, 0, 0, 0.12);
  --bg-code-header-light: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-light: rgba(60, 60, 67, 0.4);
  --scrollbar-thumb-hover-light: rgba(60, 60, 67, 0.6);

  /* --- Re-assign Semantic Variables for Light Mode --- */
  --bg-page: var(--bg-page-light);
  --color-accent: var(--color-accent-light);
  --bg-material: var(--bg-material-light);
  --border-material: var(--border-material-light);
  --shadow-material: var(--shadow-material-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --bg-hover: var(--bg-hover-light);
  --bg-button: var(--bg-button-light);
  --bg-button-hover: var(--bg-button-hover-light);
  --bg-code-header: var(--bg-code-header-light);
  --scrollbar-thumb: var(--scrollbar-thumb-light);
  --scrollbar-thumb-hover: var(--scrollbar-thumb-hover-light);
}

/* ---  Base & Typography with Ambient BG --- */
body {
  font-family: var(--font-apple-system) !important;
  font-weight: 400;
  letter-spacing: normal !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition-normal);
}
body[theme-mode="dark"] { background: radial-gradient(circle at 50% 0%, hsl(240, 3%, 15%), var(--bg-page-dark) 70%); }
body[theme-mode="light"] { background: radial-gradient(circle at 50% 0%, hsl(240, 5%, 98%), var(--bg-page-light) 80%); }

/* --- THE KEY FIX for Glassmorphism --- */
.ant-layout, .ant-layout-has-sider, #root > .ant-layout {
  background: transparent !important;
}

/* --- Universal Typography --- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-apple-system) !important; font-weight: 600 !important; color: var(--text-primary); }
.markdown p, .markdown li, .markdown blockquote, .markdown table { font-family: var(--font-apple-system) !important; font-weight: 400; color: var(--text-secondary); }
code, pre, .cherry-code-content, .cherry-code-content * { font-family: var(--font-apple-mono) !important; font-size: 0.95em !important; line-height: 1.6 !important; }
strong, b { color: var(--color-accent) !important; }

/* ---  macOS Scrollbar --- */
::-webkit-scrollbar { width: 14px !important; height: 14px !important; }
::-webkit-scrollbar-thumb {
  background-clip: padding-box !important;
  border: 4px solid transparent !important;
  border-radius: 8px !important;
  background-color: var(--scrollbar-thumb) !important;
  min-height: 40px !important;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover) !important; }
::-webkit-scrollbar-corner { background: transparent !important; }

/* ---  Universal Material Style for Components --- */
.inputbar-container,
.ant-popover-inner,
.ant-notification-notice,
.ant-message-notice-content,
.ant-drawer-content,
.ant-modal-content,
.cherry-code-wrapper,
.bubble .message-content-container,
div[class*="MessageContainer-"][class*="message-assistant"] .bubble .message-content-container,
.ant-dropdown-menu,
.ant-tooltip-inner,
.ant-select-dropdown {
  background-color: var(--bg-material) !important;
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border-radius: var(--radius-l) !important;
  border: 1px solid var(--border-material) !important;
  box-shadow: var(--shadow-material) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-normal);
  overflow: hidden;
}

/* ---  Sidebar --- */
div[class*="AgentsGroupList-"] {
  background-color: var(--bg-material) !important;
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border-right: 1px solid var(--border-material) !important;
  padding: 8px !important;
  min-width: 160px !important; height: 100vh !important; display: flex !important; flex-direction: column !important; gap: 4px !important; overflow-y: auto !important;
}
div[class*="AgentsGroupList-"]::-webkit-scrollbar { display: none !important; }


/* ---  Chat Layout & Bubbles (v5.0 - Vertical Layout Fix) --- */

/* 1. Set the main chat log as a vertical flex container */
div[class*="ScrollbarContainer-"] > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important; /* Ensures the container has space for alignment */
}

/* 2. Target the user message block for the NEW vertical layout */
div[class*="MessageContainer-"][class*="message-user"] {
  /* Aligns the entire message block to the far right of the chat window */
  align-self: flex-end !important;
  max-width: 85% !important;

  /* --- KEY CHANGE FOR VERTICAL LAYOUT --- */
  /* This turns the block itself into a flex container that stacks its children vertically */
  display: flex !important;
  flex-direction: column !important;
  /* This aligns the children (the header and the bubble) to the right edge of this block */
  align-items: flex-end !important;
}

/* 3. Ensure the header content (name, time, avatar) is also aligned to the right */
div[class*="MessageContainer-"][class*="message-user"] div[class*="Header-"] {
  justify-content: flex-end !important;
}

/* 4. Style the user bubble with accent color (This part remains the same) */
.bubble .message-content-container { padding: 14px 20px !important; }
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container {
  background-color: var(--color-accent) !important;
  color: #fff !important;
}

/* 5. Ensure all text inside the user bubble is white and readable (This part remains the same) */
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container code,
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container pre,
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container .markdown p,
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container .markdown li {
    color: #fff !important;
}
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container strong {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* --- Input Bar --- */
.inputbar-container { padding: 8px !important; }
.inputbar-container:focus-within {
  border-color: rgba(10, 132, 255, 0.7) !important;
  box-shadow: var(--shadow-material), 0 0 0 4px rgba(10, 132, 255, 0.3) !important;
  transform: translateY(-2px);
}
body[theme-mode="light"] .inputbar-container:focus-within {
  border-color: rgba(0, 122, 255, 0.7) !important;
  box-shadow: var(--shadow-material), 0 0 0 4px rgba(0, 122, 255, 0.2) !important;
}
.inputbar-container textarea { color: var(--text-primary) !important; }

/* ---  Code Blocks --- */
.cherry-code-wrapper { margin: 1.5em 0; }
.markdown pre [class^="CodeHeader-"] {
  position: relative; display: block; text-align: center;
  line-height: 42px; height: 42px; padding: 0 80px !important;
  background-color: var(--bg-code-header) !important;
  border-bottom: 1px solid var(--border-material) !important;
  color: var(--text-secondary);
}
/* macOS Window Controls for Code Header */
.markdown pre [class^="CodeHeader-"]::before {
  content: ' '; position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%); width: 12px; height: 12px;
  border-radius: 50%; background: #FF5F56;
  box-shadow: 20px 0 #FFBD2E, 40px 0 #27C93F;
}
.markdown pre [class^="CodeContent-"] { padding: 16px !important; margin: 0 !important; }

/* ---  Lists & Menu Items --- */
.cherry-menu-item, .cherry-list-item {
  border-radius: var(--radius-m) !important;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  border: none !important;
  background: transparent !important;
  margin: 2px 4px !important;
  padding: 8px 12px !important;
}
.cherry-menu-item:hover, .cherry-list-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
.cherry-menu-item.active, .cherry-list-item.active {
  background: var(--color-accent) !important;
  color: #fff !important;
  font-weight: 500;
}

/* ---  Buttons & Controls --- */
.ant-btn {
  border-radius: var(--radius-m) !important;
  border: none !important;
  background-color: var(--bg-button) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-fast);
}
.ant-btn:hover {
  background-color: var(--bg-button-hover) !important;
  transform: scale(1.03);
}

/* --- Selection Color --- */
::selection {
  background-color: rgba(10, 132, 255, 0.4);
  color: var(--text-primary);
}

/* --- Cleanup & Reset --- */
.cherry-3d-enhanced::before, .cherry-3d-enhanced::after,
[class*="ListItemContent-"]::before, [class*="ListItemContent-"]::after,
[class*="TitleText-"]::before, [class*="TitleText-"]::after,
.markdown pre [class^="CodeHeader-"] .iconfont.icon-copy.copy {
  display: none !important;
}

效果图

谷歌风格 v2.4 (跨栏修复版)

修复用户消息右边显示时和边框之间有空白间隙的问题。

/**
 * Cherry Studio - Apple Design Overhaul v2.4 (Grid Span Fix)
 * Original theme by user, refined by Swift Expert
 *
 * This version uses a new, more robust strategy to solve the alignment issue.
 * Instead of changing the parent's grid layout, we instruct the user message
 * item to span across all available columns.
 *
 * - STRATEGY:
 *   - The parent container remains a 2-column grid.
 *   - [NEW] The user message block (`MessageContainer`) is forced to span both columns using `grid-column: 1 / 3;`.
 *   - This gives the message block 100% width to work with.
 *   - The existing flexbox rules then align the bubble to the far right within this full-width container.
 */

:root {
  /* ---  Apple Font System --- */
  --font-apple-system: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Arial", sans-serif;
  --font-apple-mono: "SF Mono", "Menlo", "Monaco", "JetBrains Mono", "Consolas", monospace;

  /* ---  Core Sizing & Animation --- */
  --radius-l: 18px;
  --radius-m: 12px;
  --radius-s: 8px;

  --transition-fast: background-color 0.2s cubic-bezier(0.5, 0, 0.25, 1),
                     color 0.2s cubic-bezier(0.5, 0, 0.25, 1),
                     transform 0.2s cubic-bezier(0.5, 0, 0.25, 1),
                     box-shadow 0.2s cubic-bezier(0.5, 0, 0.25, 1),
                     border-color 0.2s cubic-bezier(0.5, 0, 0.25, 1);
  --transition-normal: background-color 0.35s cubic-bezier(0.5, 0, 0.25, 1),
                       color 0.35s cubic-bezier(0.5, 0, 0.25, 1),
                       transform 0.35s cubic-bezier(0.5, 0, 0.25, 1),
                       box-shadow 0.35s cubic-bezier(0.5, 0, 0.25, 1),
                       border-color 0.35s cubic-bezier(0.5, 0, 0.25, 1);


  /* ---  Dark Mode Palette (Source of Truth) --- */
  --bg-page-dark: #1D1D1F;
  --color-accent-dark: #0A84FF;
  --bg-material-dark: rgba(50, 50, 52, 0.75);
  --border-material-dark: rgba(255, 255, 255, 0.18);
  --shadow-material-dark: 0 16px 32px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.2);
  --text-primary-dark: rgba(255, 255, 255, 0.95);
  --text-secondary-dark: rgba(235, 235, 245, 0.7);
  --bg-hover-dark: rgba(255, 255, 255, 0.1);
  --bg-button-dark: rgba(255, 255, 255, 0.12);
  --bg-button-hover-dark: rgba(255, 255, 255, 0.2);
  --bg-code-header-dark: rgba(0, 0, 0, 0.25);
  --scrollbar-thumb-dark: rgba(136, 136, 136, 0.6);
  --scrollbar-thumb-hover-dark: rgba(153, 153, 153, 0.8);

  /* --- Semantic Variables (Dark Mode Default) --- */
  --bg-page: var(--bg-page-dark);
  --color-accent: var(--color-accent-dark);
  --bg-material: var(--bg-material-dark);
  --border-material: var(--border-material-dark);
  --shadow-material: var(--shadow-material-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --bg-hover: var(--bg-hover-dark);
  --bg-button: var(--bg-button-dark);
  --bg-button-hover: var(--bg-button-hover-dark);
  --bg-code-header: var(--bg-code-header-dark);
  --scrollbar-thumb: var(--scrollbar-thumb-dark);
  --scrollbar-thumb-hover: var(--scrollbar-thumb-hover-dark);
}

/* ---  Light Mode --- */
body[theme-mode="light"] {
  /* --- Light Mode Palette (Source of Truth) --- */
  --bg-page-light: #F5F5F7;
  --color-accent-light: #007AFF;
  --bg-material-light: rgba(252, 252, 252, 0.82);
  --border-material-light: rgba(0, 0, 0, 0.12);
  --shadow-material-light: 0 16px 32px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.06);
  --text-primary-light: rgba(0, 0, 0, 0.88);
  --text-secondary-light: rgba(60, 60, 67, 0.68);
  --bg-hover-light: rgba(0, 0, 0, 0.08);
  --bg-button-light: rgba(0, 0, 0, 0.08);
  --bg-button-hover-light: rgba(0, 0, 0, 0.12);
  --bg-code-header-light: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-light: rgba(60, 60, 67, 0.4);
  --scrollbar-thumb-hover-light: rgba(60, 60, 67, 0.6);

  /* --- Re-assign Semantic Variables for Light Mode --- */
  --bg-page: var(--bg-page-light);
  --color-accent: var(--color-accent-light);
  --bg-material: var(--bg-material-light);
  --border-material: var(--border-material-light);
  --shadow-material: var(--shadow-material-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --bg-hover: var(--bg-hover-light);
  --bg-button: var(--bg-button-light);
  --bg-button-hover: var(--bg-button-hover-light);
  --bg-code-header: var(--bg-code-header-light);
  --scrollbar-thumb: var(--scrollbar-thumb-light);
  --scrollbar-thumb-hover: var(--scrollbar-thumb-hover-light);
}

/* ---  Base & Typography with Ambient BG --- */
body {
  font-family: var(--font-apple-system) !important;
  font-weight: 400;
  letter-spacing: normal !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition-normal);
}
body[theme-mode="dark"] { background: radial-gradient(circle at 50% 0%, hsl(240, 3%, 15%), var(--bg-page-dark) 70%); }
body[theme-mode="light"] { background: radial-gradient(circle at 50% 0%, hsl(240, 5%, 98%), var(--bg-page-light) 80%); }

/* --- THE KEY FIX for Glassmorphism --- */
.ant-layout, .ant-layout-has-sider, #root > .ant-layout {
  background: transparent !important;
}

/* --- Universal Typography --- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-apple-system) !important; font-weight: 600 !important; color: var(--text-primary); }
.markdown p, .markdown li, .markdown blockquote, .markdown table { font-family: var(--font-apple-system) !important; font-weight: 400; color: var(--text-secondary); }
code, pre, .cherry-code-content, .cherry-code-content * { font-family: var(--font-apple-mono) !important; font-size: 0.95em !important; line-height: 1.6 !important; }
strong, b { color: var(--color-accent) !important; }

/* ---  macOS Scrollbar --- */
::-webkit-scrollbar { width: 14px !important; height: 14px !important; }
::-webkit-scrollbar-thumb {
  background-clip: padding-box !important;
  border: 4px solid transparent !important;
  border-radius: 8px !important;
  background-color: var(--scrollbar-thumb) !important;
  min-height: 40px !important;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover) !important; }
::-webkit-scrollbar-corner { background: transparent !important; }

/* ---  Universal Material Style for Components --- */
.inputbar-container,
.ant-popover-inner,
.ant-notification-notice,
.ant-message-notice-content,
.ant-drawer-content,
.ant-modal-content,
.cherry-code-wrapper,
.bubble .message-content-container,
div[class*="MessageContainer-"][class*="message-assistant"] .bubble .message-content-container,
.ant-dropdown-menu,
.ant-tooltip-inner,
.ant-select-dropdown {
  background-color: var(--bg-material) !important;
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border-radius: var(--radius-l) !important;
  border: 1px solid var(--border-material) !important;
  box-shadow: var(--shadow-material) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-normal);
  overflow: hidden;
}

/* ---  Sidebar --- */
div[class*="AgentsGroupList-"] {
  background-color: var(--bg-material) !important;
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border-right: 1px solid var(--border-material) !important;
  padding: 8px !important;
  min-width: 160px !important; height: 100vh !important; display: flex !important; flex-direction: column !important; gap: 4px !important; overflow-y: auto !important;
}
div[class*="AgentsGroupList-"]::-webkit-scrollbar { display: none !important; }


/* ---  Chat Layout & Bubbles --- */

/* 1. Target the user message block */
div[class*="MessageContainer-"][class*="message-user"] {
  /* --- THE DEFINITIVE FIX (v2.4) --- */
  /* Force this message to span across all grid columns, from line 1 to 3. */
  grid-column: 1 / 3 !important;

  /* This turns the block itself into a flex container that stacks its children vertically */
  display: flex !important;
  flex-direction: column !important;
  /* This aligns the children (the header and the bubble) to the right edge of this now full-width block */
  align-items: flex-end !important;

  max-width: 100% !important; /* Allow it to span full width before aligning content */
}

/* 2. Set width constraints on the bubble itself, not the container */
div[class*="MessageContainer-"][class*="message-user"] .bubble,
div[class*="MessageContainer-"][class*="message-user"] [class*="Header-"] {
    max-width: 85%;
    width: -moz-fit-content;
    width: fit-content;
}

/* 3. Ensure the header content (name, time, avatar) is still aligned to the right */
div[class*="MessageContainer-"][class*="message-user"] div[class*="Header-"] {
  justify-content: flex-end !important;
}

/* 4. Style the user bubble with accent color */
.bubble .message-content-container { padding: 14px 20px !important; }
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container {
  background-color: var(--color-accent) !important;
  color: #fff !important;
}

/* 5. Ensure all text inside the user bubble is white and readable */
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container code,
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container pre,
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container .markdown p,
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container .markdown li {
    color: #fff !important;
}
div[class*=" MessageContainer-"][class*="message-user"] .bubble .message-content-container strong {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* --- Input Bar --- */
.inputbar-container { padding: 8px !important; }
.inputbar-container:focus-within {
  border-color: rgba(10, 132, 255, 0.7) !important;
  box-shadow: var(--shadow-material), 0 0 0 4px rgba(10, 132, 255, 0.3) !important;
  transform: translateY(-2px);
}
body[theme-mode="light"] .inputbar-container:focus-within {
  border-color: rgba(0, 122, 255, 0.) !important;
  box-shadow: var(--shadow-material), 0 0 0 4px rgba(0, 122, 255, 0.2) !important;
}
.inputbar-container textarea { color: var(--text-primary) !important; }

/* ---  Code Blocks --- */
.cherry-code-wrapper { margin: 1.5em 0; }
.markdown pre [class^="CodeHeader-"] {
  position: relative; display: block; text-align: center;
  line-height: 42px; height: 42px; padding: 0 80px !important;
  background-color: var(--bg-code-header) !important;
  border-bottom: 1px solid var(--border-material) !important;
  color: var(--text-secondary);
}
/* macOS Window Controls for Code Header */
.markdown pre [class^="CodeHeader-"]::before {
  content: ' '; position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%); width: 12px; height: 12px;
  border-radius: 50%; background: #FF5F56;
  box-shadow: 20px 0 #FFBD2E, 40px 0 #27C93F;
}
.markdown pre [class^="CodeContent-"] { padding: 16px !important; margin: 0 !important; }

/* ---  Lists & Menu Items --- */
.cherry-menu-item, .cherry-list-item {
  border-radius: var(--radius-m) !important;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  border: none !important;
  background: transparent !important;
  margin: 2px 4px !important;
  padding: 8px 12px !important;
}
.cherry-menu-item:hover, .cherry-list-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
.cherry-menu-item.active, .cherry-list-item.active {
  background: var(--color-accent) !important;
  color: #fff !important;
  font-weight: 500;
}

/* ---  Buttons & Controls --- */
.ant-btn {
  border-radius: var(--radius-m) !important;
  border: none !important;
  background-color: var(--bg-button) !important;
  color: var(--text-primary) !important;
  transition: var(--transition-fast);
}
.ant-btn:hover {
  background-color: var(--bg-button-hover) !important;
  transform: scale(1.03);
}

/* --- Selection Color --- */
::selection {
  background-color: rgba(10, 132, 255, 0.4);
  color: var(--text-primary);
}

/* --- Cleanup & Reset --- */
.cherry-3d-enhanced::before, .cherry-3d-enhanced::after,
[class*="ListItemContent-"]::before, [class*="ListItemContent-"]::after,
[class*="TitleText-"]::before, [class*="TitleText-"]::after,
.markdown pre [class^="CodeHeader-"] .iconfont.icon-copy.copy {
  display: none !important;
}