Cherry Studio Mac风格磨砂玻璃主题

样式一

/* 0323Mac风格磨砂玻璃主题 */
@font-face {
    font-family: 'LXGWWenKaiGB';
    src: url('file:///D:/Fonts/LXGWWenKaiGB-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+4E00-9FFF;
}

:root {
    --duration-quick: 0.15s;
    --duration-normal: 0.3s;
    --duration-long: 0.5s;
    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --radius-dynamic: 12px;
    --radius-large: 12px;

    --color-brand-primary: oklch(65% 0.05 250);
    --color-brand-hover: color-mix(in oklch, var(--color-brand-primary) 90%, black);

    --theme-lightness: 1;
    --shadow-intensity: 0.1;
    --highlight-intensity: 0.05;
    --file-line-width: 65rem;
    --font-default: 'LXGWWenKaiGB', sans-serif;

    --background-blur: 12px;

    --hover-scale: 1.01;
    --active-scale: 0.98;
    --card-translate-y: 6px;

    --chat-text-user: var(--color-text-1);

    --metal-gradient-light: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.07) 100%);
    --metal-gradient-dark: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 100%);
    --border-glow: 0 0 5px rgba(255, 255, 255, 0.2);
}

/* 深色模式 */
body[theme-mode="dark"] {
    --background-image-url: url('https://cdnb.artstation.com/p/assets/images/images/049/289/173/large/flogging-moll-5yue1ri-6-1.jpg?1652152063');
    --background-overlay-opacity: 0.5;

    --color-background: linear-gradient(145deg, rgba(28, 28, 30, 0.6) 0%, rgba(44, 44, 46, 0.6) 100%);
    --color-background-soft: linear-gradient(145deg, rgba(44, 44, 46, 0.5) 0%, rgba(58, 58, 60, 0.5) 100%);
    --color-background-mute: linear-gradient(145deg, rgba(72, 72, 74, 0.4) 0%, rgba(99, 99, 102, 0.4) 100%);
    --navbar-background: linear-gradient(to right, rgba(28, 28, 30, 0.6) 0%, rgba(44, 44, 46, 0.6) 100%);
    --chat-background: linear-gradient(to bottom, rgba(44, 44, 46, 0.5) 0%, rgba(58, 58, 60, 0.5) 100%);
    --chat-background-user: linear-gradient(to right, rgba(30, 144, 255, 0.4) 0%, rgba(65, 172, 255, 0.4) 100%);
    --user-text-color-dark: rgba(255, 255, 255, 0.95);
    --chat-background-assistant: linear-gradient(to right, rgba(72, 72, 74, 0.4) 0%, rgba(85, 85, 87, 0.4) 100%);
    --ctp-text: rgba(255, 255, 255, 0.85);
    --shadow-color: rgba(0, 0, 0, 0.25);
    --highlight-color: rgba(255, 255, 255, 0.08);
    --deep-thinking-color: rgba(180, 180, 200, 0.9);
    --code-bg-dark: rgba(30, 30, 32, 0.7);
    --footnote-bg-dark: rgba(44, 44, 46, 0.4);
    --theme-lightness: -1;
    --shadow-intensity: 0.25;

    --border-color: rgba(255, 255, 255, 0.05);
    --border-hover-color: rgba(255, 255, 255, 0.1);
    --metal-gradient: var(--metal-gradient-dark);
}

/* 浅色模式 */
body[theme-mode="light"] {
    --background-image-url: url('https://cdna.artstation.com/p/assets/images/images/035/911/176/large/-.jpg?1616230728');
    --background-overlay-opacity: 0.25;

    --color-background: linear-gradient(145deg, rgba(255, 255, 255, 0.3) 0%, rgba(250, 250, 255, 0.3) 100%);
    --color-background-soft: linear-gradient(145deg, rgba(245, 245, 250, 0.25) 0%, rgba(240, 240, 245, 0.25) 100%);
    --color-background-mute: linear-gradient(145deg, rgba(235, 235, 240, 0.2) 0%, rgba(230, 230, 235, 0.2) 100%);
    --navbar-background: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, rgba(250, 250, 255, 0.4) 100%);
    --chat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(250, 250, 255, 0.3) 100%);
    --chat-background-user: linear-gradient(to right, rgba(135, 206, 250, 0.5) 0%, rgba(165, 215, 255, 0.5) 100%);
    --chat-background-assistant: linear-gradient(to right, rgba(240, 240, 245, 0.4) 0%, rgba(235, 235, 240, 0.4) 100%);
    --color-white: rgba(255, 255, 255, 0.9);
    --ctp-text: rgba(30, 30, 30, 0.9);
    --shadow-color: rgba(0, 0, 0, 0.06);
    --highlight-color: rgba(255, 255, 255, 0.3);
    --deep-thinking-color: rgba(80, 80, 100, 0.9);
    --code-bg-light: rgba(240, 240, 245, 0.4);
    --footnote-bg-light: rgba(245, 245, 250, 0.3);
    --theme-lightness: 1;

    --border-color: rgba(255, 255, 255, 0.15);
    --border-hover-color: rgba(255, 255, 255, 0.25);
    --metal-gradient: var(--metal-gradient-light);
}

* {
    font-family: var(--font-default);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

body {
    position: relative;
    background-image: var(--background-image-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background);
    opacity: var(--background-overlay-opacity);
    backdrop-filter: blur(var(--background-blur));
    -webkit-backdrop-filter: blur(var(--background-blur));
    z-index: -1;
}

.message-content-container {
    will-change: transform;
    contain: layout paint style;

    background: color-mix(in srgb, var(--color-background-soft), transparent 10%) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    border: none;
    border-radius: var(--radius-dynamic);
    position: relative;
    z-index: 1;

    outline: none;

    transition:
        background-color var(--duration-normal) var(--easing-standard),
        box-shadow var(--duration-normal) var(--easing-standard);

    margin-block: 8px;
    padding-inline: 12px;
    padding-block: 10px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.message-content-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-dynamic);
    background: var(--metal-gradient);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid var(--border-color);
    transition: opacity var(--duration-normal) var(--easing-standard);
}

.message-content-container:hover::before {
    opacity: 0.7;
    border-color: var(--border-hover-color);
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(var(--card-translate-y));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-item {
    animation: cardAppear var(--duration-normal) var(--easing-decelerate) forwards;
}

#inputbar {
    background: color-mix(in srgb, var(--color-background), transparent 20%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    position: relative;
    border-radius: var(--radius-large);
    margin: -15px 20px 15px 20px;
    transition: box-shadow var(--duration-normal) var(--easing-standard);
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#inputbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-large);
    background: var(--metal-gradient);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid var(--border-color);
}

#inputbar:focus-within::before {
    opacity: 0.8;
    border-color: var(--color-brand-primary);
    box-shadow: var(--border-glow);
}

.navbar {
    background: color-mix(in srgb, var(--navbar-background), transparent 20%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    position: relative;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    animation: navbarAppear var(--duration-long) var(--easing-standard) forwards;
}

.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.3px;
    background: var(--metal-gradient);
    opacity: 0.5;
}

@keyframes navbarAppear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-container {
    background: transparent !important;
}

.chat-item.user .message-content-container {
    background: color-mix(in srgb, rgba(135, 206, 250, 0.4), transparent 20%) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 3px solid rgba(30, 144, 255, 0.6);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.chat-item.assistant .message-content-container {
    background: color-mix(in srgb, rgba(255, 182, 193, 0.4), transparent 20%) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 3px solid rgba(255, 182, 193, 0.6);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

@media (prefers-contrast: more) {
    .message-content-container::before {
        opacity: 0.8;
        border-width: 1px;
    }

    #inputbar::before {
        opacity: 0.8;
        border-width: 1px;
    }
}

body[theme-mode="dark"] .chat-item.user .nickname,
body[theme-mode="dark"] .chat-item.user .message {
    color: var(--user-text-color-dark);
}

.chat-item .nickname,
.chat-item .message {
    color: var(--ctp-text);
}

.ant-collapse-content-box .markdown {
    color: var(--deep-thinking-color);
    background: color-mix(in srgb, var(--color-background-soft), transparent 30%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 8px;
    border-left: 2px solid rgba(180, 180, 200, 0.3);
}

body[theme-mode="dark"] .ant-collapse-content-box .markdown {
    background: color-mix(in srgb, var(--color-background-soft), transparent 50%) !important;
    border-left: 2px solid rgba(180, 180, 200, 0.2);
}

/* 浅色模式代码背景 - Mac OS风格 */
.shiki.one-light {
    background-color: var(--code-bg-light) !important;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--easing-standard);
}

.shiki.one-light::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: var(--metal-gradient);
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid rgba(0, 0, 0, 0.05);
}

/* 深色模式代码背景 - Mac OS风格 */
.shiki.material-theme-darker {
    background-color: var(--code-bg-dark) !important;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--duration-normal) var(--easing-standard);
}

.shiki.material-theme-darker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: var(--metal-gradient);
    opacity: 0.2;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid rgba(255, 255, 255, 0.05);
}

/* 代码块悬停效果 - 光泽变化 */
pre:hover .shiki::before {
    opacity: 0.5;
}

/* 引用来源背景透明 - Mac OS风格 */
.footnotes {
    background-color: var(--footnote-bg-light);
    border-radius: 8px;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow var(--duration-normal) var(--easing-standard);
}

.footnotes::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: var(--metal-gradient);
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    border: 0.3px solid rgba(0, 0, 0, 0.05);
}

body[theme-mode="dark"] .footnotes {
    background-color: var(--footnote-bg-dark);
}

body[theme-mode="dark"] .footnotes::before {
    border-color: rgba(255, 255, 255, 0.05);
    opacity: 0.2;
}

/* 保留原有样式 - 输入框高度 */
#inputbar textarea.ant-input {
    height: 120px !important;
    padding: 10px;
}

/* 按钮 - Mac OS风格（移除动效） */
button,
.ant-btn {
    border-radius: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color var(--duration-quick) var(--easing-standard);
    position: relative;
    overflow: hidden;
}

/* 按钮金属质感 */
button::before,
.ant-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--metal-gradient);
    opacity: 0.2;
    pointer-events: none;
    z-index: -1;
}

button:hover::before,
.ant-btn:hover::before {
    opacity: 0.4;
}

/* 滚动条 - Mac OS风格 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: background var(--duration-quick) var(--easing-standard);
    background-image: var(--metal-gradient-light);
    background-size: 100px 100%;
}

body[theme-mode="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    background-image: var(--metal-gradient-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

body[theme-mode="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 加载时的页面过渡效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    animation: fadeIn 0.8s var(--easing-decelerate) forwards;
}

/* 卡片的内容渐入动画 */
.message-content-container .markdown {
    opacity: 0;
    animation: fadeIn 0.4s var(--easing-decelerate) 0.1s forwards;
}

/* 链接颜色 - Mac OS风格 */
a {
    color: var(--color-brand-primary);
    transition: color var(--duration-quick) var(--easing-standard);
}

a:hover {
    color: var(--color-brand-hover);
}

/* 选中文本背景色 - Mac OS风格 */
::selection {
    background-color: color-mix(in srgb, var(--color-brand-primary), transparent 70%);
}

/* 夜间/日间模式切换按钮（移除动效） */
.theme-toggle-button {
    transition: opacity var(--duration-normal) var(--easing-emphasized);
}

.theme-toggle-button:hover {
    opacity: 0.8;
}

/* 深色模式下的气泡颜色 */
body[theme-mode="dark"] .chat-item.user .message-content-container {
    background: color-mix(in srgb, rgba(30, 144, 255, 0.3), transparent 20%) !important;
    border-left: 3px solid rgba(30, 144, 255, 0.4);
}

body[theme-mode="dark"] .chat-item.assistant .message-content-container {
    background: color-mix(in srgb, rgba(255, 182, 193, 0.3), transparent 20%) !important;
    border-left: 3px solid rgba(255, 182, 193, 0.4);
}

/* 修复注释悬停弹出窗口样式 */
/* 适用于VS Code和类似编辑器的注释悬停提示 */
.hover-contents,
.monaco-hover,
.monaco-hover-content,
.hover-row,
.markdown-hover,
.hover-tooltip,
.tooltip-content,
[role="tooltip"],
div[class*="hover"],
div[class*="tooltip"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: rgba(0, 0, 0, 0.9) !important;
    border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15) !important;
}

/* 确保深色模式下的悬停提示内容可读 */
body[theme-mode="dark"] .hover-contents,
body[theme-mode="dark"] .monaco-hover,
body[theme-mode="dark"] .monaco-hover-content,
body[theme-mode="dark"] .hover-row,
body[theme-mode="dark"] .markdown-hover,
body[theme-mode="dark"] .hover-tooltip,
body[theme-mode="dark"] .tooltip-content,
body[theme-mode="dark"] [role="tooltip"],
body[theme-mode="dark"] div[class*="hover"],
body[theme-mode="dark"] div[class*="tooltip"] {
    background-color: rgba(50, 50, 55, 0.95) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
}

/* 悬停提示内部链接样式 */
.hover-contents a,
.monaco-hover a,
.hover-tooltip a,
.tooltip-content a,
[role="tooltip"] a,
div[class*="hover"] a,
div[class*="tooltip"] a {
    color: var(--color-brand-primary) !important;
}

/* 悬停提示内部代码块样式 */
.hover-contents code,
.monaco-hover code,
.hover-tooltip code,
.tooltip-content code,
[role="tooltip"] code,
div[class*="hover"] code,
div[class*="tooltip"] code {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: inherit !important;
    padding: 0.1em 0.3em !important;
    border-radius: 3px !important;
}

body[theme-mode="dark"] .hover-contents code,
body[theme-mode="dark"] .monaco-hover code,
body[theme-mode="dark"] .hover-tooltip code,
body[theme-mode="dark"] .tooltip-content code,
body[theme-mode="dark"] [role="tooltip"] code,
body[theme-mode="dark"] div[class*="hover"] code,
body[theme-mode="dark"] div[class*="tooltip"] code {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

样式2

/* 草莓甜心MacOS (含动态特效)*/
:root {
    --duration-quick: 0.15s;
    --duration-normal: 0.3s;
    --duration-long: 0.5s;
    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动效 */
    --radius-dynamic: 12px;
    --radius-large: 12px;

    /* Mac OS色调 */
    --color-brand-primary: oklch(65% 0.05 250);
    --color-brand-hover: color-mix(in oklch, var(--color-brand-primary) 90%, black);

    /* 动态主题参数 */
    --theme-lightness: 1;
    --shadow-intensity: 0.1;
    --highlight-intensity: 0.05;
    --file-line-width: 65rem;
    --font-default: "SF Pro Text", "Helvetica Neue", "Source Han Sans CN", sans-serif;

    /* 背景图片设置 - 共享参数 */
    --background-blur: 12px;

    /* 动效参数 */
    --hover-scale: 1.01;
    --active-scale: 0.98;
    --card-translate-y: 6px;
    
    /* 修复对话气泡 */
    --chat-text-user: var(--color-text-1);    
}

/* 深色模式 - Mac OS风格 */
body[theme-mode="dark"] {
    /* 深色模式专用背景图 */
    --background-image-url: url('https://i.pinimg.com/1200x/77/9e/e6/779ee6457911761ef8aaa40cf04b2f8a.jpg');
    --background-overlay-opacity: 0.5;

    /* 护眼配色 - 深色模式更温和的色调 */
    --color-background: linear-gradient(145deg, rgba(28, 28, 30, 0.6) 0%, rgba(44, 44, 46, 0.6) 100%);
    --color-background-soft: linear-gradient(145deg, rgba(44, 44, 46, 0.5) 0%, rgba(58, 58, 60, 0.5) 100%);
    --color-background-mute: linear-gradient(145deg, rgba(72, 72, 74, 0.4) 0%, rgba(99, 99, 102, 0.4) 100%);
    --navbar-background: linear-gradient(to right, rgba(28, 28, 30, 0.6) 0%, rgba(44, 44, 46, 0.6) 100%);
    --chat-background: linear-gradient(to bottom, rgba(44, 44, 46, 0.5) 0%, rgba(58, 58, 60, 0.5) 100%);
    --chat-background-user: linear-gradient(to right, rgba(0, 88, 208, 0.15) 0%, rgba(10, 132, 255, 0.15) 100%);
    --user-text-color-dark: rgba(255, 255, 255, 0.9);
    --chat-background-assistant: linear-gradient(to right, rgba(44, 44, 46, 0.4) 0%, rgba(58, 58, 60, 0.4) 100%);
    --ctp-text: rgba(255, 255, 255, 0.85);
    --shadow-color: rgba(0, 0, 0, 0.25);
    --highlight-color: rgba(255, 255, 255, 0.08);
    --deep-thinking-color: rgba(10, 132, 255, 0.9);
    --code-bg-dark: rgba(30, 30, 32, 0.7);
    --footnote-bg-dark: rgba(44, 44, 46, 0.4);
    /* 动态主题参数 */
    --theme-lightness: -1;
    --shadow-intensity: 0.25;
}

/* 浅色模式 - Mac OS风格 (优化版) */
body[theme-mode="light"] {
    /* 浅色模式专用背景图 */
    --background-image-url: url('https://www.sanrio.com.tw/wp-content/uploads/2019/04/MIX-Desktop-01.jpg');
    --background-overlay-opacity: 0.25;

    /* 更清晰的浅色调 - 去除护眼蒙版效果 */
    --color-background: linear-gradient(145deg, rgba(255, 255, 255, 0.3) 0%, rgba(250, 250, 255, 0.3) 100%);
    --color-background-soft: linear-gradient(145deg, rgba(245, 245, 250, 0.25) 0%, rgba(240, 240, 245, 0.25) 100%);
    --color-background-mute: linear-gradient(145deg, rgba(235, 235, 240, 0.2) 0%, rgba(230, 230, 235, 0.2) 100%);
    --navbar-background: linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, rgba(250, 250, 255, 0.4) 100%);
    --chat-background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(250, 250, 255, 0.3) 100%);
    --chat-background-user: linear-gradient(to right, rgba(210, 230, 255, 0.4) 0%, rgba(220, 235, 255, 0.4) 100%);
    --chat-background-assistant: linear-gradient(to right, rgba(250, 250, 255, 0.3) 0%, rgba(245, 245, 250, 0.3) 100%);
    --color-white: rgba(255, 255, 255, 0.9);
    --ctp-text: rgba(30, 30, 30, 0.9);
    --shadow-color: rgba(0, 0, 0, 0.06);
    --highlight-color: rgba(255, 255, 255, 0.3);
    --deep-thinking-color: rgba(0, 88, 208, 0.85);
    --code-bg-light: rgba(240, 240, 245, 0.4);
    --footnote-bg-light: rgba(245, 245, 250, 0.3);
    /* 动态主题参数 */
    --theme-lightness: 1;
}

/* 基础架构 */
* {
    font-family: var(--font-default);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* 背景图片设置 - 分主题设置 */
body {
    position: relative;
    background-image: var(--background-image-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* 背景叠加层 */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background);
    opacity: var(--background-overlay-opacity);
    backdrop-filter: blur(var(--background-blur));
    -webkit-backdrop-filter: blur(var(--background-blur));
    z-index: -1;
}

/* 消息容器 - Mac OS磨砂玻璃风格（增强动效） */
.message-content-container {
    /* 物理渲染层 */
    transform: translateZ(0);
    will-change: transform, box-shadow, opacity;
    contain: layout paint style;

    /* 动态样式 - Mac OS磨砂玻璃效果 */
    background: color-mix(in srgb, var(--color-background-soft), transparent 50%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-dynamic);

    /* 简化边缘 */
    outline: none;

    /* 增强动效过渡 */
    transition:
        transform var(--duration-normal) var(--easing-emphasized),
        box-shadow var(--duration-normal) var(--easing-decelerate),
        background-color var(--duration-normal) var(--easing-standard),
        border-color var(--duration-quick) var(--easing-standard);

    /* 逻辑属性 */
    margin-block: 8px;
    padding-inline: 12px;
    padding-block: 10px;

    /* Mac OS风格阴影 - 更加柔和 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    &:hover {
        transform: scale(var(--hover-scale)) translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        border-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: none; /* 移除悬停时的模糊 */
        -webkit-backdrop-filter: none; /* 移除悬停时的模糊 */
    }

    &:active {
        transform: scale(var(--active-scale));
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition-duration: 0.1s;
    }
}

/* 消息出现动画 */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(var(--card-translate-y));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-item {
    animation: cardAppear var(--duration-normal) var(--easing-decelerate) forwards;
}

/* 输入栏优化 - Mac OS磨砂玻璃风格（增强动效） */
#inputbar {
    background: color-mix(in srgb, var(--color-background), transparent 40%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-large);
    margin: -15px 20px 15px 20px;
    transition: all var(--duration-normal) var(--easing-standard);

    /* 简化边缘 */
    outline: none;

    /* Mac OS风格阴影 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &:focus-within {
        transform: translateY(-2px) scale(1.005);
        border-color: var(--color-brand-primary);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }
}

/* 导航栏半透明效果 - Mac OS风格 */
.navbar {
    background: color-mix(in srgb, var(--navbar-background), transparent 40%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    animation: navbarAppear var(--duration-long) var(--easing-standard) forwards;
}

@keyframes navbarAppear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 聊天容器半透明效果 */
.chat-container {
    background: transparent !important;
}

/* 用户消息半透明效果 - Mac OS风格（增强动效） */
.chat-item.user .message-content-container {
    background: color-mix(in srgb, var(--chat-background-user), transparent 50%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    transition: all var(--duration-normal) var(--easing-standard);
}

/* 助手消息半透明效果 - Mac OS风格（增强动效） */
.chat-item.assistant .message-content-container {
    background: color-mix(in srgb, var(--chat-background-assistant), transparent 50%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    transition: all var(--duration-normal) var(--easing-standard);
}

/* 深色模式适配 - Mac OS风格 */
body[theme-mode='dark'] {
    .message-content-container {
        border-color: rgba(255, 255, 255, 0.1);

        &:hover {
            border-color: rgba(255, 255, 255, 0.2);
        }
    }

    #inputbar {
        border-color: rgba(255, 255, 255, 0.1);

        &:focus-within {
            border-color: color-mix(in oklch, var(--color-brand-primary), transparent 30%);
        }
    }

    .navbar {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}

/* 高对比度模式 */
@media (prefers-contrast: more) {
    .message-content-container {
        border-width: 1.5px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* 深色模式下用户名和消息的字体颜色 */
/* 使用更具体的选择器，提高优先级 */
body[theme-mode="dark"] .chat-item.user .nickname,
body[theme-mode="dark"] .chat-item.user .message {
    color: var(--user-text-color-dark);
}

/* 其他用户名和消息的字体颜色保持不变 */
.chat-item .nickname,
.chat-item .message {
    color: var(--ctp-text);
}

/* 深度思考展开字体颜色 - Mac OS风格 */
.ant-collapse-content-box .markdown {
    color: var(--deep-thinking-color);
}

/* 浅色模式代码背景 - Mac OS风格 */
.shiki.one-light {
    background-color: var(--code-bg-light) !important;
    border-radius: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    transition: all var(--duration-normal) var(--easing-standard);
}

/* 深色模式代码背景 - Mac OS风格 */
.shiki.material-theme-darker {
    background-color: var(--code-bg-dark) !important;
    border-radius: 8px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    transition: all var(--duration-normal) var(--easing-standard);
}

/* 代码块悬停效果 */
pre:hover .shiki {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 引用来源背景透明 - Mac OS风格 */
.footnotes {
    background-color: var(--footnote-bg-light);
    border-radius: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--duration-normal) var(--easing-standard);
}

body[theme-mode="dark"] .footnotes {
    background-color: var(--footnote-bg-dark);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* 保留原有样式 - 输入框高度 */
#inputbar textarea.ant-input {
    height: 120px !important;
    padding: 10px;
}

/* 按钮 - Mac OS风格（增强动效） */
button,
.ant-btn {
    border-radius: 6px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all var(--duration-quick) var(--easing-standard);

    &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &:active {
        transform: scale(0.97);
        transition-duration: 0.1s;
    }
}

/* 滚动条 - Mac OS风格 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: background var(--duration-quick) var(--easing-standard);
}

body[theme-mode="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

body[theme-mode="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 加载时的页面过渡效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body {
    animation: fadeIn 0.8s var(--easing-decelerate) forwards;
}

/* 卡片的内容渐入动画 */
.message-content-container .markdown {
    opacity: 0;
    animation: fadeIn 0.4s var(--easing-decelerate) 0.1s forwards;
}

/* 链接颜色 - Mac OS风格 */
a {
    color: var(--color-brand-primary);
    transition: color var(--duration-quick) var(--easing-standard);
}

a:hover {
    color: var(--color-brand-hover);
}

/* 选中文本背景色 - Mac OS风格 */
::selection {
    background-color: color-mix(in srgb, var(--color-brand-primary), transparent 70%);
}

/* 夜间/日间模式切换按钮动效 */
.theme-toggle-button {
    transition: all var(--duration-normal) var(--easing-emphasized);
}

.theme-toggle-button:hover {
    transform: rotate(30deg) scale(1.1);
}

来源：https://linux.do/t/topic/501913/14