/*
 * ===================================================================
 *  Starlet's Vanity UI - Showbiz Themed Stylesheet (Typography Ultimate)
 *  Version: 4.0 (Editorial Fonts & Layout Polish)
 *  Author: System Core AI
 *  Description: 适配《娱乐圈/名利场》世界观的界面样式库。
 *               - [CORE] 深度优化生成内容的字体（杂志级排版）
 *               - [CORE] 选项卡片点击自动全选复制
 *               - [CORE] 可移动区域左侧标签化布局
 * ===================================================================
 */

/* =============================================
 *  0. 全局字体与排版定义 (Editorial Typography)
 * ============================================= */

:root {
    /* 标题/装饰：奢华衬线体 (Didot风格) */
    --font-serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    /* 正文/界面：现代无衬线体 (几何感/人文感) */
    --font-sans: 'Montserrat', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 覆盖平台默认字体 */
body, .MuiTypography-root, .MuiButtonBase-root {
    font-family: var(--font-sans) !important;
    -webkit-font-smoothing: antialiased;
}

/* --- 核心：AI生成内容排版优化 --- */
.markdown-body {
    font-family: var(--font-sans) !important;
    font-size: 15px !important;
    line-height: 1.8 !important; /* 增加行高，提升杂志感 */
    letter-spacing: 0.03em !important; /* 增加字间距，显得更精致 */
    color: #2d3436 !important;
}

/* 标题使用衬线体，突出时尚感 */
.markdown-body h1, .markdown-body h2, .markdown-body h3, 
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    font-family: var(--font-serif) !important;
    font-weight: 700 !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.8em !important;
    color: #b76e79 !important; /* 玫瑰金标题 */
}

/* 正文段落 */
.markdown-body p {
    margin-bottom: 1.2em !important;
    text-align: justify !important; /* 两端对齐，更像印刷品 */
}

/* 强调文字 */
.markdown-body strong, .markdown-body b {
    color: #d4af37 !important; /* 香槟金强调色 */
    font-weight: 700 !important;
}

/* =============================================
 *  1. 动画定义 (Keyframes)
 * ============================================= */

@keyframes spotlight-breathe {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 5px rgba(183, 110, 121, 0.3)); transform: scale(1); }
    50% { filter: brightness(1.1) drop-shadow(0 0 15px rgba(183, 110, 121, 0.6)); transform: scale(1.01); }
}

@keyframes header-flow-line {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

@keyframes panel-light-sweep {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.9; }
}

@keyframes ink-wash-flow {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

@keyframes glow-text {
    0%, 100% { opacity: 0.6; text-shadow: 0 0 8px rgba(212, 175, 55, 0.5); }
    50% { opacity: 1; text-shadow: 0 0 16px rgba(212, 175, 55, 1); }
}

@keyframes rotate-icon {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================
 *  2. 顶部导航栏 - 星光红毯版
 * ============================================= */

.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(255, 245, 247, 0.96) 40%,
        rgba(255, 240, 245, 0.94) 100%) !important;
    border-bottom: 1px solid rgba(183, 110, 121, 0.25) !important;
    box-shadow: 
        0 2px 20px rgba(183, 110, 121, 0.12),
        0 0 40px rgba(255, 182, 193, 0.2),
        inset 0 -1px 0 rgba(212, 175, 55, 0.15) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 19 !important;
    position: relative !important;
    overflow: visible !important;
    height: calc(3.5rem + max(0px, env(safe-area-inset-top))) !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
}

/* 动态粒子层 */
.sticky.w-full.top-0.flex.items-center::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 600 50'%3E%3Cdefs%3E%3CradialGradient id='gp1'%3E%3Cstop offset='0%25' stop-color='%23b76e79' stop-opacity='0.9'/%3E%3Cstop offset='100%25' stop-color='%23b76e79' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gp2'%3E%3Cstop offset='0%25' stop-color='%23d4af37' stop-opacity='0.85'/%3E%3Cstop offset='100%25' stop-color='%23ff1493' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gp3'%3E%3Cstop offset='0%25' stop-color='%23ffb7b2' stop-opacity='0.7'/%3E%3Cstop offset='100%25' stop-color='%23ffdac1' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle fill='url(%23gp1)' r='3'%3E%3Canimate attributeName='cx' values='80;520;80' dur='18s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='35;12;35' dur='7s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='2;4;2' dur='4s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.3;0.8;0.3' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle fill='url(%23gp2)' r='2.5'%3E%3Canimate attributeName='cx' values='450;150;450' dur='15s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='10;38;10' dur='9s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='1.5;3.5;1.5' dur='5s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.4;0.9;0.4' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle r='1.5'%3E%3Canimate attributeName='cx' values='200;400;200' dur='12s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='25;8;25' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill' values='%23b76e79;%23d4af37;%23b76e79' dur='6s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.5;1;0.5' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle r='1'%3E%3Canimate attributeName='cx' values='550;100;550' dur='20s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='40;18;40' dur='11s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill' values='%23ff1493;%23ffb7b2;%23ff1493' dur='7s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.4;0.85;0.4' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle fill='url(%23gp3)' r='5'%3E%3Canimate attributeName='cx' values='100;500;100' dur='30s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='25;25;25' dur='30s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='4;7;4' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
    z-index: 1 !important;
}

/* 底部流光线 */
.sticky.w-full.top-0.flex.items-center::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(183, 110, 121, 0.6) 15%,
        rgba(212, 175, 55, 0.8) 30%,
        rgba(255, 105, 180, 0.7) 50%,
        rgba(212, 175, 55, 0.8) 70%,
        rgba(183, 110, 121, 0.6) 85%,
        transparent 100%) !important;
    background-size: 200% 100% !important;
    animation: header-flow-line 4s linear infinite !important;
    z-index: 10 !important;
    box-shadow: 0 0 8px rgba(183, 110, 121, 0.5), 0 0 15px rgba(212, 175, 55, 0.3) !important;
}

.sticky.w-full.top-0.flex.items-center > * {
    position: relative !important;
    z-index: 50 !important;
}

/* 模型选择器 */
#ai-model-selector .group {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(183, 110, 121, 0.2) !important;
    border-left: 2px solid #b76e79 !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    height: 2.0rem !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 1px 6px rgba(183, 110, 121, 0.08) !important;
    margin: 0 8px !important;
}

#ai-model-selector .group:hover {
    border-color: #d4af37 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.2) !important;
}

#ai-model-selector .truncate {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #b76e79 !important;
    font-family: var(--font-serif) !important;
    letter-spacing: 1.2px !important;
    transition: color 0.4s ease !important;
}

#ai-model-selector .group:hover .truncate {
    color: #d4af37 !important;
}

#ai-model-selector svg {
    color: #ffb7b2 !important;
    transition: all 0.4s ease !important;
}

#ai-model-selector .group:hover svg {
    color: #d4af37 !important;
    transform: rotate(180deg) !important;
}

/* 顶部按钮 */
.sticky.w-full.top-0.flex.items-center .inline-flex.items-center {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #b76e79 !important;
    border: 1px solid rgba(183, 110, 121, 0.25) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    border-radius: 0px !important;
    padding: 4px 10px !important;
    box-shadow: 0 1px 4px rgba(183, 110, 121, 0.1) !important;
    transition: all 0.4s ease !important;
    position: relative !important;
    overflow: hidden !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%) !important;
}

.sticky.w-full.top-0.flex.items-center .inline-flex.items-center:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #d4af37 !important;
    color: #d4af37 !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.25) !important;
}

#header-setting-button {
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(183, 110, 121, 0.3) !important;
    transition: all 0.3s ease;
}

#header-setting-button:hover {
    border-color: rgba(212, 175, 55, 0.6) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    background: rgba(255, 245, 247, 0.95) !important;
}

#header-setting-button svg { color: #b76e79 !important; }

/* =============================================
 *  3. 顶部信息栏 (Top Info) - 通告单风格
 * ============================================= */

.top-info {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans) !important;
    background: linear-gradient(160deg, rgba(255, 250, 250, 0.98) 0%, rgba(255, 245, 247, 0.95) 50%, rgba(255, 240, 245, 0.98) 100%) !important;
    border: 1px solid rgba(183, 110, 121, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(183, 110, 121, 0.08), 0 0 40px rgba(212, 175, 55, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.top-info::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent 0%, #b76e79 20%, #d4af37 40%, #ff1493 50%, #d4af37 60%, #b76e79 80%, transparent 100%) !important;
    background-size: 200% 100% !important;
    animation: header-flow-line 4s linear infinite !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.top-info:hover {
    box-shadow: 0 8px 32px rgba(183, 110, 121, 0.12), 0 0 50px rgba(212, 175, 55, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
}

.top-info > time,
.top-info > position,
.top-info > env {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 180px !important;
    padding: 12px 14px 12px 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #4a3728 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.5px !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    z-index: 1 !important;
}

.top-info > time,
.top-info > position { border-right: 1px solid rgba(183, 110, 121, 0.2) !important; }
.top-info > env { border-right: none !important; }

.top-info > time:hover,
.top-info > position:hover,
.top-info > env:hover {
    background: linear-gradient(135deg, rgba(183, 110, 121, 0.04), transparent) !important;
}

.top-info > time::before,
.top-info > position::before,
.top-info > env::before {
    content: '' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    font-family: var(--font-serif) !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

.top-info > time::before { content: 'TIME'; background: linear-gradient(135deg, #b76e79 0%, #d4af37 100%) !important; }
.top-info > position::before { content: 'LOC'; background: linear-gradient(135deg, #800020 0%, #b76e79 100%) !important; }
.top-info > env::before { content: 'ATMOS'; background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%) !important; }

/* --- [修正] 可移动区域 Area Map (左侧标签固定) --- */
.top-info > area-map {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 14px 14px 14px 130px !important; /* 左侧留白给伪元素 */
    min-height: 50px !important;
    background: linear-gradient(180deg, rgba(183, 110, 121, 0.03), rgba(255, 255, 255, 0.02)) !important;
    border-top: 1px solid rgba(183, 110, 121, 0.2) !important;
    z-index: 1 !important;
}

.top-info > area-map::before {
    content: 'LOCATION' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    padding: 6px 0 !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, #a52a2a 0%, #800000 100%) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
    font-family: var(--font-serif) !important;
}

/* 任务 Quest */
.top-info > quest {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 14px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, padding 0.35s ease !important;
    background: linear-gradient(180deg, rgba(183, 110, 121, 0.03), rgba(255, 255, 255, 0.02)) !important;
    border-top: 1px solid rgba(183, 110, 121, 0.2) !important;
}

.top-info > quest::before {
    content: 'SCENE / SCRIPT' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    width: 100px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #fff !important;
    padding: 6px 0 !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    font-family: var(--font-serif) !important;
}

.top-info:hover > quest {
    max-height: 300px !important;
    opacity: 1 !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
    padding-left: 130px !important;
}

.top-info:hover > quest::before { opacity: 1 !important; }

.top-info > area-map > region,
.top-info > quest > q {
    display: inline-block !important;
    padding: 6px 12px !important;
    margin: 4px 6px 4px 0 !important;
    font-size: 14px !important;
    color: #4a3728 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(183, 110, 121, 0.2) !important;
    border-left: 3px solid #b76e79 !important;
    box-shadow: 0 2px 4px rgba(183, 110, 121, 0.05) !important;
    transition: all 0.2s ease !important;
    font-family: var(--font-sans) !important;
}

.top-info > area-map > region:hover,
.top-info > quest > q:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(183, 110, 121, 0.15) !important;
    background: #fff !important;
}

/* =============================================
 *  4. 选项代码块美化 (Options & Code Blocks)
 *  特性：点击全选复制 + 按钮化交互 + 字体优化
 * ============================================= */

/* 容器美化 */
pre {
    margin: 10px 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 选项卡片本体 */
pre div[node="[object Object]"] {
    position: relative !important;
    display: block !important;
    background: linear-gradient(145deg, #fffaf0 0%, #fff0f5 100%) !important;
    border: 1px solid rgba(183, 110, 121, 0.3) !important;
    border-left: 4px solid #b76e79 !important;
    border-radius: 8px !important;
    color: #333 !important;
    font-family: var(--font-sans) !important; /* 选项使用无衬线体，清晰 */
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 14px 20px 14px 50px !important;
    box-shadow: 0 4px 15px rgba(183, 110, 121, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important; /* 鼠标变手型 */
    user-select: all !important; /* 关键：点击文本自动全选 */
    -webkit-user-select: all !important;
    clip-path: none !important;
}

/* 序号装饰 */
pre div[node="[object Object]"]::before {
    content: counter(option-counter);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #b76e79 0%, #d4af37 100%) !important;
    color: #fff;
    font-family: var(--font-serif) !important;
    font-weight: bold;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(183, 110, 121, 0.4) !important;
    pointer-events: none;
}

/* Hover 悬浮效果 */
pre:hover div[node="[object Object]"] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(183, 110, 121, 0.15) !important;
    border-color: #d4af37 !important;
    background: #fff !important;
}

/* Active 按压效果 */
pre:active div[node="[object Object]"] {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(183, 110, 121, 0.1) !important;
    background: #fceef5 !important;
    border-color: #b76e79 !important;
}

/* 代码文本样式 */
pre div[node="[object Object]"] code {
    font-family: inherit !important;
    color: inherit !important;
    background: transparent !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

/* 隐藏干扰元素 */
pre div[class*="border-b"],
pre div[data-tooltip-id] {
    display: none !important;
}

/* =============================================
 *  5. 输入框与底部按钮 (Input & Bottom Buttons)
 * ============================================= */

.p-\[5\.5px\].max-h-\[150px\] {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(183, 110, 121, 0.25) !important;
    border-radius: 4px !important;
    box-shadow: 0 -4px 15px rgba(183, 110, 121, 0.1);
    padding: 8px !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

#ai-chat-input {
    background: #fffaf0 !important;
    border-radius: 2px !important;
    border: 1px solid rgba(183, 110, 121, 0.3) !important;
    font-family: var(--font-serif) !important; /* 输入框使用衬线体，更有仪式感 */
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #4a3728 !important;
    caret-color: #d4af37 !important;
    padding: 10px 50px 10px 12px !important;
    height: auto !important;
    max-height: 120px !important;
    resize: none !important;
    outline: none !important;
    transition: all 0.4s ease;
    field-sizing: content !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-text-size-adjust: 100% !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    box-shadow: inset 0 2px 8px rgba(183, 110, 121, 0.05);
}

#ai-chat-input::placeholder { color: #d4c5a3 !important; opacity: 0.8; }

#ai-chat-input:focus {
    border-color: #d4af37 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.25), inset 0 2px 8px rgba(183, 110, 121, 0.05) !important;
    background: #FFFFFF !important;
}

.p-\[5\.5px\].max-h-\[150px\] .flex.items-center.px-1 {
    background: rgba(212, 175, 55, 0.1) !important;
    color: #d4af37 !important;
    border-radius: 2px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow: none;
}

.p-\[5\.5px\].max-h-\[150px\] .mx-1 { background: rgba(212, 175, 55, 0.2) !important; }

#ai-send-button {
    border-radius: 2px !important;
    background: #fffaf0 !important;
    border: 1px solid rgba(183, 110, 121, 0.3) !important;
    transition: all 0.4s ease;
    box-shadow: 0 2px 6px rgba(183, 110, 121, 0.08);
}

#ai-send-button:hover {
    background: #d4af37 !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 12px #d4af37;
    transform: translateY(-2px);
}

#ai-send-button svg { color: #d4af37 !important; transition: color 0.4s ease; }
#ai-send-button:hover svg { color: #fffaf0 !important; }

div[class*="absolute"][class*="bottom-0"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 245, 247, 0.98) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(183, 110, 121, 0.25);
    box-shadow: 0 -4px 15px rgba(183, 110, 121, 0.1);
    color: #8b4513;
}

div[class*="absolute"][class*="bottom-0"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(183, 110, 121, 0.5), transparent);
    animation: panel-light-sweep 7s ease-in-out infinite;
    animation-delay: 1.5s;
    opacity: 0.7;
}

div[class*="absolute"][class*="bottom-0"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='cloudGrid' width='25' height='25' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 25 0 L 0 0 0 25' fill='none' stroke='%23b76e79' stroke-width='0.4' opacity='0.08'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23cloudGrid)'/%3E%3C/svg%3E");
    animation: ink-wash-flow 100s linear infinite;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]) {
    background: #fffaf0;
    border: 1px solid rgba(183, 110, 121, 0.3);
    border-radius: 2px;
    color: #8b4513;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 14px;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(183, 110, 121, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: none;
}

div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"])::before {
    content: '';
    position: absolute;
    top: -15%;
    left: -170%;
    width: 50%;
    height: 130%;
    background: linear-gradient(90deg, transparent, rgba(183, 110, 121, 0.25), transparent);
    transform: skewX(-30deg);
    transition: left 0.8s ease-in-out;
}

div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):hover {
    transform: translateY(-2px);
    color: #b76e79;
    background: #FFFFFF;
    border-color: #b76e79;
    box-shadow: 0 4px 12px rgba(183, 110, 121, 0.15), 0 0 8px rgba(183, 110, 121, 0.3);
}

div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):hover::before {
    left: 170%;
}

div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):active {
    transform: translateY(0);
    background: #fff0f5;
    border-color: #b76e79;
    box-shadow: inset 0 0 6px rgba(183, 110, 121, 0.2), 0 2px 6px rgba(183, 110, 121, 0.1);
    transition-duration: 0.15s;
}

/* =============================================
 *  6. 其他组件 (CoT, Sidebar, Bubbles)
 * ============================================= */

cot {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    box-sizing: border-box;
    contain: size layout paint;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

cot * { display: none !important; }

cot::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: spotlight-breathe 4s ease-in-out infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cdefs%3E%3ClinearGradient id='studioGrad' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0f5'/%3E%3Cstop offset='1' stop-color='%23fceef5'/%3E%3C/linearGradient%3E%3Cpattern id='grid' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23b76e79' stroke-width='0.5' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='600' height='200' fill='url(%23studioGrad)'/%3E%3Crect width='600' height='200' fill='url(%23grid)'/%3E%3Cpath d='M0,100 Q150,50 300,100 T600,100' fill='none' stroke='%23d4af37' stroke-width='2' opacity='0.6'%3E%3Canimate attributeName='d' values='M0,100 Q150,50 300,100 T600,100;M0,100 Q150,150 300,100 T600,100;M0,100 Q150,50 300,100 T600,100' dur='5s' repeatCount='indefinite'/%3E%3C/path%3E%3Ctext x='50%25' y='55%25' text-anchor='middle' font-size='24' font-family='Didot, serif' font-weight='bold' fill='%23b76e79' letter-spacing='6' style='text-transform: uppercase;'%3EPR MONITOR%3C/text%3E%3Ctext x='50%25' y='72%25' text-anchor='middle' font-size='12' font-family='Arial, sans-serif' fill='%23a0a0a0' letter-spacing='2'%3E舆情数据演算中...%3C/text%3E%3C/svg%3E");
}

cot:has(postition[stop]),
cot:has(+ postition[stop]),
cot:has(~ postition[stop]) { display: none !important; }
think { display: none !important; }

/* 侧边栏 */
.styled-prose-container details {
    background: #fff !important;
    border: 1px solid rgba(183, 110, 121, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(183, 110, 121, 0.05) !important;
    margin: 16px 0 !important;
}

.styled-prose-container details > summary {
    background: linear-gradient(to right, #fff, #fff0f5) !important;
    color: #b76e79 !important;
    font-family: var(--font-serif) !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid transparent !important;
}

.styled-prose-container details[open] > summary {
    border-bottom-color: rgba(183, 110, 121, 0.2) !important;
    color: #d4af37 !important;
}

#ai-chat-answer:last-of-type details.p,
#ai-chat-answer:last-of-type details.n,
#ai-chat-answer:last-of-type details.m {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(183, 110, 121, 0.3) !important;
    border-right: none !important;
    border-radius: 12px 0 0 12px !important;
    box-shadow: -5px 0 25px rgba(183, 110, 121, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

#ai-chat-answer:last-of-type details.p > summary,
#ai-chat-answer:last-of-type details.n > summary,
#ai-chat-answer:last-of-type details.m > summary {
    background: #fff !important;
    color: #b76e79 !important;
    font-family: var(--font-serif) !important;
    letter-spacing: 2px !important;
    text-shadow: none !important;
}

#ai-chat-answer:last-of-type details.p > summary::before,
#ai-chat-answer:last-of-type details.n > summary::before,
#ai-chat-answer:last-of-type details.m > summary::before {
    content: '★';
    color: #d4af37;
    animation: glow-text 2s ease-in-out infinite;
}

.styled-prose-container T Ti {
    width: max-content;
    max-width: 200px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #b76e79 !important;
    box-shadow: 0 5px 15px rgba(183, 110, 121, 0.15) !important;
    color: #333 !important;
    font-family: var(--font-sans) !important;
}

/* 聊天气泡 */
.chat-answer-container .bg-gray-100\/90.relative.inline-block {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 0 16px 16px 16px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    color: #2d3436 !important;
    font-family: var(--font-sans) !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%) !important;
    color: #d4af37 !important;
    border-radius: 16px 0 16px 16px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
    border: 1px solid #444 !important;
    font-family: var(--font-sans) !important;
}

/* 隐藏与加载 */
.style_dot-flashing__8L91Q { display: none !important; }

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq) {
    background: #fff !important;
    border: 1px dashed #ccc !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    margin: 10px auto !important;
}

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::before {
    content: '' !important;
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #333 !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: rotate-icon 1s linear infinite !important;
}

[class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none !important; }

/* 移动端适配 */
@media (max-width: 768px) {
    .top-info { margin: 10px 0 !important; }
    .top-info > quest { padding-left: 100px !important; }
    #ai-chat-answer:last-of-type details.p[open],
    #ai-chat-answer:last-of-type details.n[open],
    #ai-chat-answer:last-of-type details.m[open] { width: 280px !important; }
    /* 移动端字体微调 */
    .markdown-body { font-size: 14px !important; line-height: 1.6 !important; }
}