/*
 * ===================================================================
 *  Resonance UI - Sci-Fi Themed Stylesheet
 *  Version: 5.2 (Sidebar Height Adjustment)
 *  Author: System Core
 *  Description: 科技感、鸣潮风格的界面样式库。
 *               核心更新：根据用户反馈，缩短了展开后侧边栏的最大高度，
 *               以优化在不同视口下的视觉体验。
 * ===================================================================
 */

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

/* 悬浮呼吸效果 */
@keyframes mount-breathe {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-2px) scale(1.02);
    }
}

/* 背景滚动 */
@keyframes bg-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200px 200px;
    }
}

/* NPC 指示灯脉冲 */
@keyframes pulse-npc {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
        box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
        box-shadow: 0 0 16px rgba(0, 212, 255, 1);
    }
}

/* 用户指示灯脉冲 */
@keyframes pulse-user {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
        box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
        box-shadow: 0 0 16px rgba(124, 58, 237, 1);
    }
}

/* 发光文字 */
@keyframes glow-text {
    0%, 100% {
        opacity: 0.6;
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 16px rgba(0, 212, 255, 1), 0 0 24px rgba(0, 212, 255, 0.5);
    }
}

/* 图标旋转 */
@keyframes rotate-icon {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 墨水屏/UI 动画 */
@keyframes classUI-ink-pulse {
    0%, 100% {
        opacity: 0.15;
    }
    50% {
        opacity: 0.25;
    }
}

@keyframes classUI-scroll-unfold {
    0% {
        opacity: 0.85;
    }
    100% {
        opacity: 1;
    }
}

/* 文本渐显 */
@keyframes ink-text-fade {
    0% {
        opacity: 0.6;
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
    }
    50% {
        opacity: 0.85;
        text-shadow: 0 0 12px rgba(0, 212, 255, 0.6);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 16px rgba(0, 212, 255, 0.8);
    }
}

/* 顶部装饰线 - 渐变流光 */
@keyframes top-info-gradient-flow {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* 初始加载动画淡出 */
@keyframes cot-fade-out {
    0% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        aspect-ratio: auto;
        pointer-events: none;
    }
}

/* 侧边栏滑入 */
@keyframes sidebar-slide-in {
    0% {
        right: -420px;
        opacity: 0;
    }
    100% {
        right: 0;
        opacity: 1;
    }
}


/* =============================================
 *  核心布局与模块
 * ============================================= */

/* --- 初始加载容器 (`cot`) --- */
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;
}

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: contain;
    animation: mount-breathe 3.5s ease-in-out infinite;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cdefs%3E%3ClinearGradient id='skyGrad' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eaf6ff'/%3E%3Cstop offset='1' stop-color='%23ffffff'/%3E%3C/linearGradient%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 20 0 L 0 0 0 20' fill='none' stroke='%23d0e8f8' stroke-width='0.5' opacity='0.7'/%3E%3C/pattern%3E%3Cfilter id='resonanceGlow'%3E%3CfeGaussianBlur stdDeviation='2.5' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3CradialGradient id='corePulse' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%2300d4ff' stop-opacity='0.8' /%3E%3Cstop offset='70%25' stop-color='%2300d4ff' stop-opacity='0.2' /%3E%3Cstop offset='100%25' stop-color='transparent' stop-opacity='0' /%3E%3C/defs%3E%3Crect width='600' height='200' fill='url(%23skyGrad)'/%3E%3Crect width='600' height='200' fill='url(%23grid)'/%3E%3Cg transform='translate(300 100)' filter='url(%23resonanceGlow)'%3E%3Cpolygon points='0,-20 17.3,-10 17.3,10 0,20 -17.3,10 -17.3,-10' fill='none' stroke='%2300d4ff' stroke-width='1.5'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='360' dur='10s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='0,-20 17.3,-10 17.3,10 0,20 -17.3,10 -17.3,-10' fill='url(%23corePulse)' opacity='0.6'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='360' dur='10s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.6;1;0.6' dur='3s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C/g%3E%3Cg fill='none' stroke-opacity='0.7'%3E%3Cpath d='M 0 120 Q 150 90, 300 120 T 600 100' stroke='%237c3aed' stroke-width='1'%3E%3Canimate attributeName='d' values='M 0 120 Q 150 90, 300 120 T 600 100; M 0 100 Q 150 130, 300 100 T 600 120; M 0 120 Q 150 90, 300 120 T 600 100' dur='6s' repeatCount='indefinite' /%3E%3C/path%3E%3Cpath d='M 0 150 Q 150 180, 300 150 T 600 160' stroke='%2300d4ff' stroke-width='1.5'%3E%3Canimate attributeName='d' values='M 0 150 Q 150 180, 300 150 T 600 160; M 0 170 Q 150 140, 300 170 T 600 150; M 0 150 Q 150 180, 300 150 T 600 160' dur='5s' repeatCount='indefinite' /%3E%3C/path%3E%3C/g%3E%3Ctext x='50%25' y='55%25' text-anchor='middle' font-size='22' font-family='Orbitron, Rajdhani, sans-serif' fill='%2300aeff' opacity='0.9' letter-spacing='3' style='text-shadow: 0 0 5px rgba(0,174,255,0.5);'%3EPROCESSING RESONANCE DATA%3C/text%3E%3Ctext x='50%25' y='72%25' text-anchor='middle' font-size='12' font-family='Rajdhani, sans-serif' fill='%237c3aed' opacity='0.75' letter-spacing='2'%3EAnalyzing Frequency Patterns...%3C/text%3E%3C/svg%3E");
}

cot:has(postition[stop]),
cot:has(+ postition[stop]),
cot:has(~ postition[stop]) {
    animation: cot-fade-out 600ms ease forwards;
}

cot:has(postition[stop])::before,
cot:has(+ postition[stop])::before,
cot:has(~ postition[stop])::before {
    animation-play-state: paused !important;
    opacity: 0;
    transition: opacity .4s ease;
    content: none !important;
    background: none !important;
}

think {
    display: none !important;
}

/* --- 聊天容器 (`.chat`) --- */
.chat {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 60%, #eaf6ff 100%);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-left: 5px solid #00d4ff;
    border-radius: 4px;
    margin: 24px 0;
    position: relative;
    font-family: 'Rajdhani', 'Orbitron', 'Roboto', sans-serif;
    box-shadow: 0 8px 32px rgba(0, 120, 180, 0.1), 0 4px 16px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(0, 212, 255, 0.15);
    overflow: hidden;
}

.chat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='hexPattern' x='0' y='0' width='50' height='43.3' patternUnits='userSpaceOnUse'%3E%3Cpolygon points='25,2 45,14 45,36 25,48 5,36 5,14' fill='none' stroke='%2300d4ff' stroke-width='0.5' opacity='0.15'/%3E%3Ccircle cx='25' cy='25' r='1' fill='%2300d4ff' opacity='0.3'/%3E%3C/pattern%3E%3Cpattern id='circuitPattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cline x1='0' y1='20' x2='80' y2='20' stroke='%237c3aed' stroke-width='0.5' opacity='0.12'/%3E%3Cline x1='0' y1='60' x2='80' y2='60' stroke='%233b82f6' stroke-width='0.5' opacity='0.12'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%2300d4ff' opacity='0.25'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%237c3aed' opacity='0.25'/%3E%3C/pattern%3E%3Cpattern id='scanPattern' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cline x1='0' y1='0' x2='100' y2='0' stroke='%2300d4ff' stroke-width='0.3' opacity='0.1'%3E%3Canimate attributeName='y1' from='0' to='100' dur='3s' repeatCount='indefinite'/%3E%3Canimate attributeName='y2' from='0' to='100' dur='3s' repeatCount='indefinite'/%3E%3C/line%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23hexPattern)'/%3E%3Crect width='200' height='200' fill='url(%23circuitPattern)'/%3E%3Crect width='200' height='200' fill='url(%23scanPattern)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-position: 0 0;
    animation: bg-scroll 50s linear infinite;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
    will-change: background-position;
}

.chat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 212, 255, 0.02) 2px, rgba(0, 212, 255, 0.02) 3px), radial-gradient(circle at 15% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 40%), radial-gradient(circle at 85% 80%, rgba(124, 58, 237, 0.06) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.chat > * {
    position: relative;
    z-index: 1;
}

/* --- 对话气泡 (`.bubble`) --- */
.bubble {
    max-width: 72%;
    padding: 16px 20px;
    position: relative;
    line-height: 1.8;
    word-wrap: break-word;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    box-shadow: 0 4px 16px rgba(0, 100, 150, 0.08), 0 2px 8px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(0, 212, 255, 0.1);
    transition: box-shadow 0.2s ease;
    overflow: hidden;
}

.bubble:hover {
    box-shadow: 0 6px 20px rgba(0, 100, 150, 0.12), 0 3px 10px rgba(0, 212, 255, 0.25), inset 0 1px 0 rgba(0, 212, 255, 0.15);
}

.bubble.npc {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(230, 245, 255, 0.8) 0%, rgba(240, 250, 255, 0.9) 50%, rgba(235, 248, 255, 0.85) 100%);
    border: 2px solid rgba(0, 212, 255, 0.5);
    border-left: 5px solid #00d4ff;
    color: #333;
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.2), 0 2px 8px rgba(0, 180, 220, 0.15), inset 0 1px 0 rgba(0, 212, 255, 0.2), 0 0 20px rgba(0, 212, 255, 0.1);
}

.bubble.npc::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #00d4ff 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-npc 2s ease-in-out infinite;
    z-index: 2;
}

.bubble.user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(235, 240, 255, 0.8) 0%, rgba(240, 245, 255, 0.9) 50%, rgba(238, 242, 255, 0.85) 100%);
    border: 2px solid rgba(124, 58, 237, 0.5);
    border-right: 5px solid #7c3aed;
    color: #333;
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.2), 0 2px 8px rgba(109, 40, 217, 0.15), inset 0 1px 0 rgba(124, 58, 237, 0.2), 0 0 20px rgba(124, 58, 237, 0.1);
}

.bubble.user::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-user 2s ease-in-out infinite;
    z-index: 2;
}

.bubble .name {
    display: block;
    position: relative;
    font-size: 0.75em;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding-left: 14px;
    z-index: 1;
}

.bubble .name::before {
    content: '◆';
    position: absolute;
    left: 0;
    font-size: 1.3em;
}

.bubble.npc .name {
    color: #00d4ff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.8), 0 0 16px rgba(0, 212, 255, 0.4);
}

.bubble.npc .name::before {
    color: #00b8e6;
    text-shadow: 0 0 12px rgba(0, 184, 230, 1);
}

.bubble.user .name {
    color: #7c3aed;
    text-shadow: 0 0 8px rgba(124, 58, 237, 0.8), 0 0 16px rgba(124, 58, 237, 0.4);
}

.bubble.user .name::before {
    color: #6d28d9;
    text-shadow: 0 0 12px rgba(109, 40, 217, 1);
}

.bubble .msg {
    margin: 0;
    position: relative;
    font-size: 0.95em;
    font-weight: 400;
    text-shadow: none;
    z-index: 1;
}

.bubble.npc .msg {
    color: #2c3e50;
}

.bubble.user .msg {
    color: #34495e;
}

/* --- 文档/数据块 (`.doc`) --- */
.doc {
    background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-left: 6px solid #00d4ff;
    border-radius: 4px;
    padding: 32px 36px;
    margin: 28px 0;
    position: relative;
    font-family: 'Rajdhani', 'Roboto', sans-serif;
    box-shadow: 0 8px 24px rgba(0, 100, 150, 0.1), 0 4px 12px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(0, 212, 255, 0.1);
    overflow: hidden;
}

.doc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 212, 255, 0.03) 2px, rgba(0, 212, 255, 0.03) 3px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.doc::after {
    content: '【 DATA 】';
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 0.65em;
    color: rgba(0, 212, 255, 0.7);
    letter-spacing: 6px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 10px rgba(0, 212, 255, 1), 0 0 20px rgba(0, 212, 255, 0.5);
    animation: glow-text 3s ease-in-out infinite;
    z-index: 2;
}

.doc > * {
    position: relative;
    z-index: 1;
}

.doc .title {
    color: #00d4ff;
    font-size: 1.4em;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    margin: 0 0 26px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(0, 212, 255, 0.5);
    letter-spacing: 3px;
    position: relative;
    text-shadow: 0 0 14px rgba(0, 212, 255, 0.8), 0 0 28px rgba(0, 212, 255, 0.4);
}

.doc .title::before {
    content: '◆';
    margin-right: 14px;
    color: #00b8e6;
    display: inline-block;
    animation: rotate-icon 4s linear infinite;
}

.doc .content {
    color: #333;
    font-size: 0.95em;
    line-height: 2;
    position: relative;
    z-index: 1;
}

.doc .content p {
    margin: 0 0 1.2em 0;
    text-align: justify;
}

.doc .content p:last-child {
    margin-bottom: 0;
}

/* --- 顶部信息栏 (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: 'Rajdhani', 'Orbitron', 'Roboto', sans-serif !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(235, 248, 255, 0.95) 50%, rgba(245, 250, 255, 0.98) 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 24px rgba(0, 100, 150, 0.08), 0 0 40px rgba(0, 212, 255, 0.06), 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: 2px !important;
    background: linear-gradient(90deg, transparent 0%, #00d4ff 15%, #7c3aed 35%, #3b82f6 50%, #7c3aed 65%, #00d4ff 85%, transparent 100%) !important;
    background-size: 200% 100% !important;
    animation: top-info-gradient-flow 3s linear infinite !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.top-info:hover {
    box-shadow: 0 8px 32px rgba(0, 100, 150, 0.12), 0 0 50px rgba(0, 212, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 212, 255, 0.4) !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: 13px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.3px !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

.top-info > time,
.top-info > position {
    border-right: 1px solid rgba(0, 212, 255, 0.15) !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(0, 212, 255, 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: 9px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    padding: 5px 10px !important;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
}

.top-info > time::before {
    content: 'TIME' !important;
    background: linear-gradient(135deg, #00d4ff 0%, #00a8cc 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.top-info > position::before {
    content: 'AREA' !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.top-info > env::before {
    content: 'ENV' !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.top-info > quest {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 14px 0 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.7 !important;
    letter-spacing: 0.3px !important;
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.03), rgba(124, 58, 237, 0.02)) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.15) !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;
}

.top-info > quest::before {
    content: 'QUEST' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    padding: 5px 10px !important;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%) !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

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

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

.top-info > quest > q {
    display: block !important;
    padding: 10px 14px !important;
    margin: 6px 0 !important;
    font-size: 12px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.3px !important;
    quotes: none !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border-radius: 8px !important;
    border-left: 3px solid transparent !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    transition: all 0.25s ease !important;
}

.top-info > quest > q:first-of-type {
    margin-top: 8px !important;
}

.top-info > quest > q:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 15px rgba(0, 100, 150, 0.1) !important;
}

.top-info > quest > q.main {
    border-left-color: #f59e0b !important;
}

.top-info > quest > q.main::before {
    content: '◆' !important;
    color: #f59e0b !important;
    margin-right: 8px !important;
    font-size: 10px !important;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.6) !important;
}

.top-info > quest > q.side {
    border-left-color: #3b82f6 !important;
}

.top-info > quest > q.side::before {
    content: '◇' !important;
    color: #3b82f6 !important;
    margin-right: 8px !important;
    font-size: 10px !important;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.6) !important;
}

.top-info > quest > q > s {
    text-decoration: none !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-left: 10px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 184, 230, 0.1)) !important;
    color: #0891b2 !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 1px 4px rgba(0, 212, 255, 0.15) !important;
}

/* --- `prose` 容器与内容组件 --- */
.styled-prose-container {
    font-family: 'Rajdhani', 'Roboto', 'Segoe UI', sans-serif;
    position: relative;
    z-index: 1;
}

.styled-prose-container br {
    line-height: 1.2;
}

/* =============================================
 *  **侧边栏系统 - 可回收版本 (合并模块)**
 * ============================================= */

/* --- 1. **通用 Details 样式 (所有旧消息/非最新消息)** --- */
.styled-prose-container details {
    /* **核心：默认所有 details 都在文档流内** */
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0;
    padding: 0 22px 18px 22px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(240, 248, 255, 0.75));
    box-shadow: 0 4px 15px rgba(0, 100, 150, 0.05), inset 0 1px 1px rgba(0, 212, 255, 0.05), inset 0 -1px 0 rgba(0, 180, 220, 0.1), 0 0 20px rgba(0, 212, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    line-height: 1.9;
    color: #333;
    overflow: visible !important;
    z-index: 1;
    /* **重置位置属性，确保在文档流内** */
    top: auto !important;
    right: auto !important;
}

.styled-prose-container details:hover {
    box-shadow: 0 8px 25px rgba(0, 100, 150, 0.1), inset 0 1px 1px rgba(0, 212, 255, 0.1), inset 0 -1px 0 rgba(0, 180, 220, 0.15), 0 0 30px rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.5);
}

/* 旧消息的标题样式 (横向排列) */
.styled-prose-container details > summary {
    background: transparent;
    padding: 16px 50px 16px 22px;
    margin: 0 -22px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    color: #00d4ff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
    letter-spacing: 1.2px;
    position: relative;
    list-style: none;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
    font-family: 'Orbitron', sans-serif;
    /* **核心：横向排列** */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed;
}

.styled-prose-container details > summary::-webkit-details-marker {
    display: none;
}

.styled-prose-container details > summary::before {
    content: '';
    position: absolute;
    right: 22px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(0, 212, 255, 0.7);
    border-bottom: 2px solid rgba(0, 212, 255, 0.7);
    transform: translateY(-60%) rotate(45deg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.styled-prose-container details > summary:hover::before {
    border-color: #00e5ff;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
}

.styled-prose-container details[open] > summary {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.05), transparent);
    border-bottom-color: rgba(0, 212, 255, 0.5);
    color: #3dd5ff;
    padding-top: 18px;
    margin-bottom: 18px;
    animation: classUI-scroll-unfold 0.4s ease-out;
}

.styled-prose-container details[open] > summary::before {
    transform: translateY(-40%) rotate(225deg);
}

.styled-prose-container details > *:not(summary) {
    padding: 0;
    line-height: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
}


/* =============================================
 *  **核心魔法：只选中最新消息的 details 变身侧边栏 (已修正)**
 *  选择器逻辑：
 *  #ai-chat-answer:last-of-type 
 *  → 选中聊天容器内的外层div，再选中其最后一个子元素（即最新消息）
 *  → 里面的 details.p / details.n / details.m 才会应用侧边栏样式
 * ============================================= */

/* --- 2. **最新消息的侧边栏样式 (p, n, m)** --- */
#ai-chat-answer:last-of-type details.p,
#ai-chat-answer:last-of-type details.n,
#ai-chat-answer:last-of-type details.m {
    /* **核心：只有最新消息才固定定位** */
    position: fixed !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 36px !important;
    background: linear-gradient(145deg, #ffffff 0%, #f0f8ff 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.35) !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: -4px 0 20px rgba(0, 100, 150, 0.12), -2px 0 10px rgba(0, 212, 255, 0.15), inset 1px 0 0 rgba(0, 212, 255, 0.1) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    animation: sidebar-slide-in 0.4s ease-out;
    /* 核心修复：确保自身不创建新包含块 */
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !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 {
    padding: 14px 8px !important;
    color: #00d4ff !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0f8ff 100%) !important;
    /* **核心：竖排文字** */
    writing-mode: vertical-rl !important;
    text-orientation: mixed;
    letter-spacing: 3px !important;
    border: none !important;
    border-radius: 8px 0 0 8px !important;
    list-style: none;
    cursor: pointer;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    transition: all 0.3s ease;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    margin: 0 !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: '◆';
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    font-size: 10px;
    color: #00d4ff;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.8);
    animation: glow-text 2s ease-in-out infinite;
}

#ai-chat-answer:last-of-type details.p > summary::-webkit-details-marker,
#ai-chat-answer:last-of-type details.n > summary::-webkit-details-marker,
#ai-chat-answer:last-of-type details.m > summary::-webkit-details-marker {
    display: none;
}

/* **侧边栏标题 Hover** */
#ai-chat-answer:last-of-type details.p > summary:hover,
#ai-chat-answer:last-of-type details.n > summary:hover,
#ai-chat-answer:last-of-type details.m > summary:hover {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.15), rgba(0, 168, 204, 0.12)) !important;
    box-shadow: -4px 0 15px rgba(0, 212, 255, 0.25), inset 1px 0 0 rgba(0, 212, 255, 0.2);
    color: #3dd5ff !important;
}

/* --- 3. **侧边栏展开状态** --- */
#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] {
    z-index: 10000 !important;
    width: 360px !important;
    max-height: calc(100vh - 350px) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f0f8ff 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.4) !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: -8px 0 32px rgba(0, 100, 150, 0.15), -4px 0 16px rgba(0, 212, 255, 0.2), inset 2px 0 0 rgba(0, 212, 255, 0.15) !important;
}

/* **自定义滚动条** */
#ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar,
#ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar,
#ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar {
    width: 8px;
}

#ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar-track,
#ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar-track,
#ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar-track {
    background: rgba(0, 212, 255, 0.08);
    border-radius: 4px;
}

#ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar-thumb,
#ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar-thumb,
#ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.5), rgba(0, 168, 204, 0.4));
    border-radius: 4px;
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
}

#ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar-thumb:hover,
#ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar-thumb:hover,
#ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.7), rgba(0, 168, 204, 0.6));
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* **侧边栏标题 (展开时) - 固定置顶 + 横排文字** */
#ai-chat-answer:last-of-type details.p[open] > summary,
#ai-chat-answer:last-of-type details.n[open] > summary,
#ai-chat-answer:last-of-type details.m[open] > summary {
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.12), rgba(0, 168, 204, 0.1)) !important;
    /* **核心：展开后改为横排** */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed;
    border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
    border-radius: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1002 !important;
    padding: 12px 45px 12px 18px !important;
    letter-spacing: 1px !important;
    font-size: 14px;
    clip-path: none;
    box-shadow: 0 2px 8px rgba(0, 100, 150, 0.08), inset 0 1px 0 rgba(0, 212, 255, 0.15);
}

#ai-chat-answer:last-of-type details.p[open] > summary::before,
#ai-chat-answer:last-of-type details.n[open] > summary::before,
#ai-chat-answer:last-of-type details.m[open] > summary::before {
    content: '◆';
    position: static;
    transform: none;
    margin-right: 10px;
    display: inline-block;
    animation: none;
}

/* **展开时标题的关闭按钮** */
#ai-chat-answer:last-of-type details.p[open] > summary::after,
#ai-chat-answer:last-of-type details.n[open] > summary::after,
#ai-chat-answer:last-of-type details.m[open] > summary::after {
    content: '✕';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1;
    color: #00d4ff;
    font-weight: 700;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    transition: all 0.2s ease;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

#ai-chat-answer:last-of-type details.p[open] > summary:hover::after,
#ai-chat-answer:last-of-type details.n[open] > summary:hover::after,
#ai-chat-answer:last-of-type details.m[open] > summary:hover::after {
    background: rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

/* --- 4. **侧边栏位置分配 (只针对最新消息)** --- */
#ai-chat-answer:last-of-type details.p { 
    top: 80px !important; 
}
#ai-chat-answer:last-of-type details.n { 
    top: 180px !important; 
}
#ai-chat-answer:last-of-type details.m { 
    top: 280px !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] { 
    top: 80px !important; 
}

/* **展开后的面板内容样式** */
.panel-content {
    padding: 20px;
    font-family: 'Rajdhani', 'Roboto', 'Segoe UI', sans-serif;
    color: #333;
    font-size: 13px;
    line-height: 1.8;
    background: transparent;
}

.panel-content h3 {
    color: #00d4ff !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    font-size: 1.25em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding-bottom: 6px;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    letter-spacing: 0.8px;
}

.panel-content br {
    line-height: 1.5;
}


/* --- 鸣潮/科幻风格：共鸣与声骸模块样式 (侧边栏适配) --- */
.styled-prose-container resonance_list,
.styled-prose-container echo_list,
.styled-prose-container sonata_list,
.styled-prose-container equip_list,
.styled-prose-container item_list {
    display: block;
    margin: 10px 0;
    padding: 0;
    position: relative;
    overflow: visible;
    font-family: 'Rajdhani', 'Microsoft YaHei', sans-serif;
    line-height: 1.7;
}

.styled-prose-container resonance_list > span,
.styled-prose-container echo_list > span,
.styled-prose-container sonata_list > span,
.styled-prose-container equip_list > span,
.styled-prose-container item_list > span,
.styled-prose-container info {
    display: inline-block;
    color: #00d4ff;
    font-weight: 700;
    font-size: 13px;
    margin-right: 6px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
    font-family: 'Orbitron', sans-serif;
}

.styled-prose-container resonance_list info {
    margin-left: 8px;
}

/* **Tooltip 交互样式 (侧边栏内适配)** */
.styled-prose-container T {
    position: relative;
    display: inline-block;
    margin-bottom: 4px;
    margin-right: 6px;
    cursor: help;
    color: #333;
    font-weight: 600;
    text-decoration-line: none;
    border-bottom: 1px dashed #00d4ff;
    padding: 2px 7px;
    background: rgba(0, 212, 255, 0.05);
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: 10;
}

.styled-prose-container T::before {
    content: "";
}

.styled-prose-container T:hover {
    background: rgba(0, 212, 255, 0.15);
    color: #0099cc;
    border-bottom-style: solid;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
    z-index: 100;
}

.styled-prose-container T Ti {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    width: max-content;
    max-width: 280px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 255, 0.95));
    color: #333;
    text-align: left;
    border: 1px solid #00d4ff;
    border-left: 4px solid #00d4ff;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 0.82em;
    font-weight: 400;
    line-height: 1.6;
    font-family: 'Rajdhani', sans-serif;
    box-shadow: 0 8px 30px rgba(0, 100, 150, 0.25), 0 0 20px rgba(0, 212, 255, 0.15);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    position: absolute;
    z-index: 99999;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
}

.styled-prose-container T Ti::before {
    content: '【 SYSTEM LOG 】';
    display: block;
    font-size: 0.7em;
    color: #00d4ff;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    letter-spacing: 2px;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
}

.styled-prose-container T:hover Ti {
    visibility: visible;
    opacity: 1;
}

.styled-prose-container T Ti > span {
    display: inline-block;
    color: #0099cc;
    font-weight: 700;
    margin-right: 6px;
}

/* 财富/货币样式 */
.styled-prose-container wealth_info {
    display: block;
    margin: 10px 0;
    padding: 8px 12px;
    background: rgba(0, 212, 255, 0.03);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 6px;
    font-family: 'Rajdhani', monospace;
}

.styled-prose-container wealth_info > span {
    color: #00d4ff;
    font-weight: 700;
    margin-right: 8px;
    font-family: 'Orbitron', sans-serif;
}


/* --- 自定义 UI 组件 (`classUI-*`) --- */
.classUI-story {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(245, 250, 255, 0.8));
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 12px;
    padding: 24px 28px;
    margin: 20px 0;
    color: #333;
    font-size: 16px;
    line-height: 2;
    box-shadow: inset 0 2px 8px rgba(0, 212, 255, 0.05), 0 0 0 1px rgba(0, 180, 220, 0.15), 0 0 20px rgba(0, 212, 255, 0.05);
    position: relative;
    letter-spacing: 0.5px;
}

.classUI-story::before,
.classUI-story::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(0, 212, 255, 0.6);
    border-style: solid;
    transition: all 0.4s ease;
}

.classUI-story::before {
    top: 8px;
    left: 8px;
    border-width: 2px 0 0 2px;
    border-top-left-radius: 3px;
}

.classUI-story::after {
    bottom: 8px;
    right: 8px;
    border-width: 0 2px 2px 0;
    border-bottom-right-radius: 3px;
}

.classUI-story:hover::before,
.classUI-story:hover::after {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

.classUI-subsection {
    font-weight: 700;
    color: #00d4ff;
    margin: 14px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    font-size: 13px;
    letter-spacing: 0.8px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    font-family: 'Orbitron', sans-serif;
}

.classUI-npc-card {
    background: rgba(245, 250, 255, 0.7);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 8px;
    padding: 14px;
    margin: 8px 0;
    box-shadow: 0 2px 8px rgba(0, 100, 150, 0.05), 0 0 15px rgba(0, 212, 255, 0.05);
    transition: all 0.3s ease;
}

.classUI-npc-card:hover {
    background: rgba(235, 245, 255, 0.9);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 100, 150, 0.1), 0 0 25px rgba(0, 212, 255, 0.1);
}

.classUI-npc-name {
    font-size: 16px;
    font-weight: 700;
    color: #00d4ff;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 212, 255, 0.35);
    letter-spacing: 0.8px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    font-family: 'Orbitron', sans-serif;
}

.classUI-memory {
    background: rgba(240, 248, 255, 0.75);
    border-color: rgba(0, 212, 255, 0.45);
    padding-bottom: 0;
}

.classUI-memory-section {
    margin: 0 0 16px 0;
    padding: 0;
    background: transparent;
    border: none;
}

.classUI-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 100, 150, 0.1), 0 0 20px rgba(0, 212, 255, 0.05);
}

.classUI-table thead th {
    background: linear-gradient(160deg, rgba(0, 212, 255, 0.1), rgba(0, 180, 220, 0.08));
    color: #00d4ff;
    padding: 12px 8px;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    border-bottom: 2px solid rgba(0, 212, 255, 0.5);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    font-family: 'Orbitron', sans-serif;
}

.classUI-table tbody td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(0, 180, 220, 0.25);
    background: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    color: #333;
    vertical-align: middle;
    transition: background-color 0.3s ease;
}

.classUI-table tbody tr:last-child td {
    border-bottom: none;
}

.classUI-table tbody tr:hover td {
    background: rgba(0, 212, 255, 0.05);
}

.classUI-actions {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(240, 248, 255, 0.65));
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 16px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.8;
    box-shadow: 0 4px 15px rgba(0, 100, 150, 0.08), 0 0 20px rgba(0, 212, 255, 0.1);
    letter-spacing: 0.3px;
}

.classUI-audio-player {
    width: 100%;
    height: 35px;
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.85));
    border-radius: 18px;
    border: 1px solid rgba(0, 212, 255, 0.35);
    box-shadow: 0 4px 15px rgba(0, 100, 150, 0.05), inset 0 1px 2px rgba(0, 212, 255, 0.05), 0 0 0 1px rgba(0, 180, 220, 0.1), 0 0 20px rgba(0, 212, 255, 0.05);
    accent-color: #00d4ff;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.classUI-audio-player:hover {
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 6px 20px rgba(0, 100, 150, 0.1), inset 0 1px 2px rgba(0, 212, 255, 0.1), 0 0 0 1px rgba(0, 180, 220, 0.2), 0 0 30px rgba(0, 212, 255, 0.1);
}

.classUI-audio-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='15' x2='30' y2='15' stroke='%2300d4ff' stroke-width='0.3' opacity='0.1'/%3E%3Ccircle cx='15' cy='15' r='1' fill='%2300d4ff' opacity='0.15'/%3E%3C/svg%3E");
    background-size: 30px 30px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.classUI-audio-player::-webkit-media-controls-panel {
    background: transparent;
}

.classUI-audio-player::-webkit-media-controls-play-button,
.classUI-audio-player::-webkit-media-controls-mute-button {
    background-color: rgba(0, 212, 255, 0.12);
    border-radius: 50%;
    transition: all 0.3s ease;
    filter: brightness(0) saturate(100%) invert(71%) sepia(87%) saturate(4277%) hue-rotate(164deg) brightness(103%) contrast(101%);
    margin: 0 4px;
}

.classUI-audio-player::-webkit-media-controls-play-button:hover,
.classUI-audio-player::-webkit-media-controls-mute-button:hover {
    background-color: rgba(0, 212, 255, 0.25);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}

.classUI-audio-player::-webkit-media-controls-current-time-display,
.classUI-audio-player::-webkit-media-controls-time-remaining-display {
    color: #333;
    font-weight: 600;
    font-size: 11px;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
    font-family: 'Rajdhani', 'Roboto', 'Segoe UI', sans-serif;
}

.classUI-audio-player::-webkit-media-controls-timeline {
    background-color: rgba(0, 212, 255, 0.12);
    border-radius: 8px;
    height: 6px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 212, 255, 0.1);
    transition: all 0.3s ease;
}

.classUI-audio-player::-webkit-media-controls-timeline:hover {
    background-color: rgba(0, 212, 255, 0.18);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 212, 255, 0.2);
}

.classUI-audio-player::-webkit-media-controls-volume-slider {
    background-color: rgba(0, 212, 255, 0.12);
    border-radius: 8px;
    height: 6px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.classUI-audio-player::-webkit-media-controls-volume-slider:hover {
    background-color: rgba(0, 212, 255, 0.18);
    border-color: rgba(0, 212, 255, 0.5);
}

.classUI-audio-player::-webkit-media-controls-seek-back-button,
.classUI-audio-player::-webkit-media-controls-seek-forward-button {
    filter: brightness(0) saturate(100%) invert(71%) sepia(87%) saturate(4277%) hue-rotate(164deg) brightness(103%) contrast(101%);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.classUI-audio-player::-webkit-media-controls-seek-back-button:hover,
.classUI-audio-player::-webkit-media-controls-seek-forward-button:hover {
    opacity: 1;
}

/* =============================================
 *  平台原生 UI 覆写与美化
 * ============================================= */

/* --- 选项按钮模块 (pre) --- */
.markdown-body {
    counter-reset: option-counter;
}

pre {
    position: relative !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 50px;
}

pre div[class*="border-b"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2;
    pointer-events: none;
}

pre div[class*="border-b"] > div:first-child {
    display: none !important;
}

pre div[data-tooltip-id] {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    pointer-events: auto;
    z-index: 3;
}

pre div[data-tooltip-id] .style_copyIcon__GJL9e {
    display: none !important;
}

pre div[node="[object Object]"] {
    position: relative;
    z-index: 1;
    display: block !important;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(245, 250, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-left: 4px solid #00d4ff !important;
    box-shadow: 0 4px 16px rgba(0, 100, 150, 0.06), 0 0 20px rgba(0, 212, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #2c3e50 !important;
    font-family: 'Rajdhani', 'Roboto', sans-serif !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    padding: 14px 20px 14px 58px !important;
    margin: 0 !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%) !important;
    min-height: 50px;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    counter-increment: option-counter;
}

pre div[node="[object Object]"]::before {
    content: counter(option-counter);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #00d4ff 0%, #00a8cc 100%) !important;
    color: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    font-size: 0.95em;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease !important;
}

pre div[node="[object Object]"] code {
    display: block;
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

pre div[data-tooltip-id]::before {
    content: 'SELECT';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) scale(0.9);
    background: linear-gradient(135deg, #00d4ff 0%, #00a8cc 100%);
    color: #fff;
    font-size: 0.75em;
    font-weight: 800;
    font-family: 'Orbitron', sans-serif;
    padding: 6px 12px;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%) !important;
    letter-spacing: 2px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

pre:hover div[data-tooltip-id]::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

pre:hover div[node="[object Object]"] {
    box-shadow: 0 8px 28px rgba(0, 100, 150, 0.1), 0 0 35px rgba(0, 212, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    background: linear-gradient(145deg, rgba(235, 250, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%) !important;
    border-color: rgba(0, 212, 255, 0.5) !important;
}

pre:hover div[node="[object Object]"]::before {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

pre:active div[node="[object Object]"] {
    box-shadow: 0 2px 10px rgba(0, 100, 150, 0.08), 0 0 15px rgba(0, 212, 255, 0.08), inset 0 2px 6px rgba(0, 212, 255, 0.08) !important;
    background: linear-gradient(145deg, rgba(220, 245, 255, 0.95) 0%, rgba(245, 250, 255, 0.92) 100%) !important;
}

pre:active div[data-tooltip-id]::before {
    content: 'CONFIRMED';
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.5) !important;
}

pre div[data-tooltip-id]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.88), rgba(0, 168, 204, 0.92));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    z-index: 4;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

pre div[data-tooltip-id]:active::after {
    content: '✓ RESONANCE CONFIRMED';
    opacity: 1;
}

/* --- 通用/其他平台 UI 覆写 --- */
.group.ml-0 > .flex.items-start.gap-2 {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 15px 20px !important;
    width: 100% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e0e0e0 !important;
    transition: all 0.3s ease-in-out !important;
}

.group.ml-0 > .flex.items-start.gap-2:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    background-color: #fcfcfc !important;
    border-color: #d0d0d0 !important;
}

.group.ml-0 .break-all {
    white-space: pre-wrap !important;
    line-height: 1.6 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    color: #333333 !important;
}

.group.ml-0 > .flex.items-start.gap-2 .text-grey-600 {
    color: #555 !important;
}

.group.ml-0 > .flex.items-start.gap-2 .text-gray-500 {
    color: #777 !important;
}

.group.ml-0 > .flex.items-start.gap-2 .text-gray-400 {
    color: #999 !important;
}

.group.ml-0 > .flex.items-start.gap-2 .font-bold {
    color: #111111 !important;
}

div.style_divider__mW0YX.style_horizontal__UvaHt {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-top: 1px solid #eeeeee !important;
    background: none !important;
}

div.group.relative > div.relative.inline-block.bg-gray-100\/90 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.92));
    color: #333;
    border-radius: 18px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 16px 60px -12px rgba(0, 100, 150, 0.15), inset 0 2px 4px rgba(0, 212, 255, 0.05), 0 0 30px rgba(0, 212, 255, 0.1), 0 0 0 2px rgba(0, 180, 220, 0.1);
    position: relative;
    overflow: hidden;
}

div.group.relative > div.relative.inline-block.bg-gray-100\/90::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='20,2 38,12 38,28 20,38 2,28 2,12' fill='none' stroke='%2300d4ff' stroke-width='0.3' opacity='0.1'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%2300d4ff' opacity='0.15'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

div.group.relative > div.relative.inline-block.bg-gray-100\/90::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
    animation: classUI-ink-pulse 8s infinite ease-in-out;
    z-index: 0;
    pointer-events: none;
}

/* 顶部固定栏 */
.sticky.w-full.top-0.flex.items-center {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.4) !important;
    height: 3.1rem !important;
    color: #333;
    font-family: 'Rajdhani', 'Roboto', 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    z-index: 10 !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    height: calc(3.5rem + max(0px, env(safe-area-inset-top))) !important;
    box-shadow: 0 4px 20px rgba(0, 100, 150, 0.1), 0 0 30px rgba(0, 212, 255, 0.1);
}

.sticky.w-full.top-0.flex.items-center .inline-flex.items-center {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    border-radius: 6px;
    box-shadow: inset 0 0 4px rgba(0, 212, 255, 0.15), 0 0 10px rgba(0, 212, 255, 0.1);
    text-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
}

#ai-model-selector .group {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.35) !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    height: 2rem !important;
    transition: all 0.3s ease;
}

#ai-model-selector .group:hover {
    border-color: rgba(0, 212, 255, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    background: rgba(245, 250, 255, 0.95) !important;
}

#ai-model-selector .truncate {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-family: 'Rajdhani', 'Roboto', 'Segoe UI', sans-serif !important;
    transition: color 0.3s ease;
}

#ai-model-selector .group:hover .truncate {
    color: #00d4ff !important;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

#ai-model-selector svg {
    color: #333 !important;
    transition: color 0.3s ease;
}

#ai-model-selector .group:hover svg {
    color: #00d4ff !important;
    filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6));
}

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

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

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

/* 输入框区域 */
.p-\[5\.5px\].max-h-\[150px\] {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1.5px solid rgba(0, 212, 255, 0.4) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0, 100, 150, 0.1), 0 0 25px rgba(0, 212, 255, 0.1) !important;
    padding: 6px !important;
    width: auto !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#ai-chat-input {
    background: rgba(245, 250, 255, 0.9) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 212, 255, 0.4) !important;
    font-family: 'Rajdhani', 'Roboto', sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #333 !important;
    caret-color: #00d4ff !important;
    padding: 10px 44px 10px 10px !important;
    height: auto !important;
    max-height: 120px !important;
    resize: none !important;
    outline: none !important;
    transition: all 0.3s 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;
}

#ai-chat-input::placeholder {
    color: rgba(80, 80, 80, 0.4) !important;
}

#ai-chat-input:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4), inset 0 0 10px rgba(0, 212, 255, 0.08) !important;
    background: rgba(250, 253, 255, 0.95) !important;
}

.p-\[5\.5px\].max-h-\[150px\] .flex.items-center.px-1 {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
}

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

#ai-send-button {
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.35) !important;
    transition: all 0.3s ease;
}

#ai-send-button:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.6) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

#ai-send-button svg {
    color: #333 !important;
    transition: color 0.3s ease;
}

#ai-send-button:hover svg {
    color: #00d4ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.7));
}

/* 加载动画覆写 */
.style_dot-flashing__8L91Q {
    display: none !important;
}

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq) {
    width: 100% !important;
    height: auto !important;
    min-height: 80px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 255, 0.96)) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 100, 150, 0.1), inset 0 1px 0 rgba(0, 212, 255, 0.1), 0 0 35px rgba(0, 212, 255, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
}

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60px !important;
    height: 60px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='energyGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2300d4ff'%3E%3Canimate attributeName='stop-color' values='%2300d4ff;%237c3aed;%233b82f6;%2300d4ff' dur='3s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='50%25' stop-color='%237c3aed'%3E%3Canimate attributeName='stop-color' values='%237c3aed;%233b82f6;%2300d4ff;%237c3aed' dur='3s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%233b82f6'%3E%3Canimate attributeName='stop-color' values='%233b82f6;%2300d4ff;%237c3aed;%233b82f6' dur='3s' repeatCount='indefinite'/%3E%3C/stop%3E%3C/linearGradient%3E%3CradialGradient id='coreEnergy'%3E%3Cstop offset='0%25' stop-color='%2300d4ff' stop-opacity='0.9'/%3E%3Cstop offset='70%25' stop-color='%23ffffff' stop-opacity='0.5'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0.25'/%3E%3C/filter%3E%3Cfilter id='energyGlow'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(60,60)'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;360' dur='4s' repeatCount='indefinite'/%3E%3Ccircle cx='0' cy='-35' r='3' fill='%2300d4ff' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.8;0.3;0.8' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='25' cy='-25' r='2.5' fill='%237c3aed' opacity='0.7'/%3E%3Ccircle cx='35' cy='0' r='3' fill='%233b82f6' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.3;0.8;0.3' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='25' cy='25' r='2.5' fill='%2300d4ff' opacity='0.7'/%3E%3Ccircle cx='0' cy='35' r='3' fill='%237c3aed' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.8;0.3;0.8' dur='2s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='-25' cy='25' r='2.5' fill='%233b82f6' opacity='0.7'/%3E%3Ccircle cx='-35' cy='0' r='3' fill='%2300d4ff' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.3;0.8;0.3' dur='2s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='-25' cy='-25' r='2.5' fill='%237c3aed' opacity='0.7'/%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='360;0' dur='6s' repeatCount='indefinite'/%3E%3Cpolygon points='0,-25 22,-13 22,13 0,25 -22,13 -22,-13' fill='none' stroke='%2300d4ff' stroke-width='1' opacity='0.4'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='10' fill='url(%23coreEnergy)' opacity='0.9'%3E%3Canimate attributeName='r' values='8;12;8' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg filter='url(%23energyGlow)'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;-360' dur='8s' repeatCount='indefinite'/%3E%3Cpath d='M 0,-25 Q 15,-20 20,-10 T 25,0 Q 20,15 10,20 T 0,25 Q -15,20 -20,10 T -25,0 Q -20,-15 -10,-20 T 0,-25' fill='none' stroke='url(%23energyGrad)' stroke-width='1.5' opacity='0.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.5)) !important;
}

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::after {
    content: 'Resonance Processing...' !important;
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #00d4ff !important;
    letter-spacing: 0.2em !important;
    animation: ink-text-fade 2.5s ease-in-out infinite alternate !important;
    text-shadow: 0 0 12px rgba(0, 212, 255, 0.8) !important;
}

/* Token 消耗显示 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(0, 100, 150, 0.05), 0 0 15px rgba(0, 212, 255, 0.05) !important;
    margin-top: 4px !important;
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2 {
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Rajdhani', 'Roboto', 'Segoe UI', sans-serif !important;
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2::after {
    content: '显示消耗' !important;
    background: rgba(0, 212, 255, 0.12) !important;
    color: #00d4ff !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    margin-left: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: 'Rajdhani', 'Roboto', 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover::after {
    background: rgba(0, 212, 255, 0.8) !important;
    border-color: rgba(0, 212, 255, 0.5) !important;
    color: #0a0e1a !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
    text-shadow: none !important;
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-1x48u03 {
    color: #00d4ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    background: rgba(0, 212, 255, 0.12) !important;
    border-radius: 4px !important;
    opacity: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: opacity 0.3s ease, max-width 0.4s ease, padding 0.4s ease !important;
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover ~ p.MuiTypography-root.css-1x48u03 {
    opacity: 1 !important;
    max-width: 200px !important;
}

.mb-2 .shrink-0 {
    display: none;
}


/* =============================================
 *  响应式设计与媒体查询
 * ============================================= */
@media (max-width: 768px) {
    /* 侧边栏响应式 */
    #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;
        max-height: calc(100vh - 310px) !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 {
        padding: 12px 7px !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    #ai-chat-answer:last-of-type details.p[open] > summary,
    #ai-chat-answer:last-of-type details.n[open] > summary,
    #ai-chat-answer:last-of-type details.m[open] > summary {
        padding: 10px 40px 10px 14px !important;
        font-size: 13px !important;
    }

    .panel-content { 
        padding: 14px;
        font-size: 12px;
    }

    .panel-content h3 {
        font-size: 1.15em;
    }

    /* 其他组件响应式 */
    .chat {
        padding: 24px 16px;
        gap: 14px;
    }
    .chat::before {
        animation-duration: 70s;
    }
    .bubble {
        max-width: 85%;
        padding: 12px 16px;
    }
    .bubble .name {
        font-size: 0.7em;
        letter-spacing: 1.5px;
    }
    .bubble .msg {
        font-size: 0.9em;
    }
    
    .doc {
        padding: 24px 20px;
    }
    .doc .title::before {
        animation: none;
    }
    
    .styled-prose-container T Ti {
        max-width: 240px;
        padding: 10px 12px;
        font-size: 0.8em;
        left: 0;
    }
    .styled-prose-container resonance_list info {
        margin-left: 0;
        display: block;
        margin-top: 4px;
    }
    
    .classUI-table tbody td,
    .classUI-table thead th {
        font-size: 11px;
        padding: 9px 7px;
    }
    .classUI-story {
        font-size: 15px;
        padding: 20px 22px;
    }
    .classUI-npc-card {
        padding: 12px;
    }
    .classUI-actions {
        font-size: 13px;
        padding: 14px 16px;
    }
    .classUI-audio-player {
        height: 32px;
    }
    .classUI-audio-player::-webkit-media-controls-current-time-display,
    .classUI-audio-player::-webkit-media-controls-time-remaining-display {
        font-size: 10px;
    }
    
    .top-info {
        margin: 14px 0 !important;
        border-radius: 8px !important;
        flex-direction: column !important;
        box-shadow: none !important;
        background: #f8fbff !important;
    }
    .top-info::before {
        height: 2px !important;
        animation: none !important;
        background: linear-gradient(90deg, transparent, #00d4ff, #7c3aed, #3b82f6, transparent) !important;
    }
    .top-info > time,
    .top-info > position,
    .top-info > env {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
        box-shadow: none !important;
    }
    .top-info > env {
        border-bottom: none !important;
    }
    .top-info > time::before,
    .top-info > position::before,
    .top-info > env::before {
        font-size: 8px !important;
        padding: 4px 8px !important;
        margin-right: 8px !important;
        letter-spacing: 0.5px !important;
        box-shadow: none !important;
    }
    .top-info:hover > quest,
    .top-info > quest {
        padding-left: 12px !important;
    }
    .top-info > quest::before {
        display: none !important;
    }
    .top-info > quest > q {
        font-size: 11px !important;
        padding: 8px 12px !important;
        box-shadow: none !important;
    }
    .top-info > quest > q > s {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    pre {
        margin: 8px 0 !important;
    }
    pre div[node="[object Object]"] {
        padding: 12px 14px 12px 50px !important;
        font-size: 0.95em !important;
        min-height: 46px;
        clip-path: none !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        background: #fafcff !important;
    }
    pre div[node="[object Object]"]::before {
        width: 26px;
        height: 26px;
        font-size: 0.85em;
        left: 12px;
        box-shadow: none !important;
    }
    pre div[data-tooltip-id]::before {
        display: none !important;
    }
    pre div[data-tooltip-id]::after {
        clip-path: none !important;
        border-radius: 8px !important;
    }
}

/* 减弱动画模式 */
@media (prefers-reduced-motion: reduce) {
    cot::before,
    .chat::before,
    .doc .title::before,
    .doc::after,
    .bubble.npc::after,
    .bubble.user::after,
    .top-info::before,
    #ai-chat-answer:last-of-type details.p,
    #ai-chat-answer:last-of-type details.n,
    #ai-chat-answer:last-of-type details.m {
        animation: none !important;
    }
    .styled-prose-container T:hover Ti {
        transition: none;
    }
}
/* * ===================================================================
 * [PATCH v5.2.1] iPhone/Mobile Sidebar Fix
 * 描述：修复苹果手机侧边栏按钮被遮挡、劈开或显示不全的问题。
 * 原理：引入 env(safe-area-inset-right) 适配 iOS 安全区域，
 * 并调整了移动端的宽度和点击热区。
 * ===================================================================
 */

@media screen and (max-width: 768px) {
    /* 针对未展开的按钮：增加安全距离 */
    #ai-chat-answer:last-of-type details.p,
    #ai-chat-answer:last-of-type details.n,
    #ai-chat-answer:last-of-type details.m {
        /* 核心修复：将按钮从边缘向内推，避开物理圆角 */
        right: 0 !important; 
        /* 适配 iOS 底部/侧边安全区 */
        padding-right: env(safe-area-inset-right, 2px) !important; 
        /* 稍微加宽一点，防止竖排文字因为宽度不够被切割 */
        width: 42px !important; 
        /* 确保层级最高，防止被网页边缘的滚动条遮盖 */
        z-index: 2147483647 !important; 
        /* 移除右边框，视觉上让它“长”在屏幕边缘，减少被切断的感觉 */
        border-right: 0 !important;
        box-shadow: -2px 0 10px rgba(0, 212, 255, 0.2) !important;
    }

    /* 针对按钮内的 Summary (文字容器) */
    #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 {
        /* 确保文字居中，不靠右 */
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !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] {
        /* 展开时同样避开安全区 */
        padding-right: env(safe-area-inset-right, 0px) !important;
        /* 限制最大宽度，防止撑破屏幕导致无法关闭 */
        width: calc(100vw - 40px) !important;
        right: 0 !important;
    }

    /* 展开后的标题栏修复 */
    #ai-chat-answer:last-of-type details.p[open] > summary,
    #ai-chat-answer:last-of-type details.n[open] > summary,
    #ai-chat-answer:last-of-type details.m[open] > summary {
        /* 恢复横排并增加左侧内边距，防止被刘海遮挡 */
        padding-left: 15px !important;
        justify-content: flex-start !important;
    }
}
/* --- 功能状态栏 (Function Bar) — 鸣潮版 --- */
.styled-prose-container fbar {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #00d4ff !important;
  letter-spacing: 1.5px !important;
  padding: 8px 14px !important;
  margin: 8px 0 0 0 !important;
  border-top: 1px dashed rgba(0,212,255,0.25) !important;
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  line-height: 1.8 !important;
}