/* ========================================
   魔法少女主题样式表
   配色：梦幻粉紫金（粉红/紫罗兰/金色）
   核心元素：魔法星星、变身棒、爱心光效
   ======================================== */

/* === 关键帧动画 === */
@keyframes mount-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.03); }
}

@keyframes bg-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 200px 200px; }
}

@keyframes pulse-npc {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 105, 180, 0.7);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
        box-shadow: 0 0 20px rgba(255, 105, 180, 1);
    }
}

@keyframes pulse-user {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
        box-shadow: 0 0 10px rgba(218, 112, 214, 0.7);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
        box-shadow: 0 0 20px rgba(218, 112, 214, 1);
    }
}

@keyframes glow-text {
    0%, 100% {
        opacity: 0.7;
        text-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 18px rgba(255, 105, 180, 1), 0 0 30px rgba(255, 105, 180, 0.6);
    }
}

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

@keyframes classUI-ink-pulse {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.95);
    }
    50% {
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@keyframes classUI-scroll-unfold {
    0% {
        transform: scaleY(0.92);
        opacity: 0.8;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes ink-text-fade {
    0% {
        opacity: 0.65;
        text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
    50% {
        opacity: 0.9;
        text-shadow: 0 0 15px rgba(255, 105, 180, 0.7);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 105, 180, 0.9);
    }
}

@keyframes data-stream {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes scan-line {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

@keyframes energy-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@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 yinyang-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes star-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes float-up {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    100% { transform: translateY(-20px) rotate(360deg); opacity: 0; }
}

@keyframes border-glow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 105, 180, 0.3),
                    inset 0 0 10px rgba(255, 105, 180, 0.1);
    }
    50% { 
        box-shadow: 0 0 20px rgba(255, 105, 180, 0.6),
                    inset 0 0 20px rgba(255, 105, 180, 0.2);
    }
}

@keyframes spell-card-shine {
    0% { left: -100%; }
    100% { left: 200%; }
}

@keyframes header-star-float {
    0% { 
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% { 
        transform: translateY(-8px) scale(1.2);
        opacity: 0.7;
    }
    100% { 
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
}

@keyframes header-wave-flow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes header-border-pulse {
    0%, 100% { 
        border-color: rgba(255, 105, 180, 0.6);
        box-shadow: 0 6px 28px rgba(255, 182, 193, 0.15),
                    0 2px 12px rgba(255, 105, 180, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    50% { 
        border-color: rgba(218, 112, 214, 0.7);
        box-shadow: 0 8px 35px rgba(221, 160, 221, 0.2),
                    0 3px 15px rgba(218, 112, 214, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
}

@keyframes spell-card-float {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
        opacity: 0.15;
    }
    50% { 
        transform: translateY(-10px) rotate(5deg);
        opacity: 0.3;
    }
}

/* === 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 4s 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='%23ffe8f5'/%3E%3Cstop offset='1' stop-color='%23fff0fa'/%3E%3C/linearGradient%3E%3Cpattern id='starPattern' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpolygon points='15,8 17,13 22,13 18,17 20,22 15,19 10,22 12,17 8,13 13,13' fill='%23FF69B4' opacity='0.5'%3E%3Canimate attributeName='opacity' values='0.5;1;0.5' dur='2s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='55,33 56.5,37 60,37 57,39.5 58.5,43 55,40.5 51.5,43 53,39.5 50,37 53.5,37' fill='%23DA70D6' opacity='0.45'%3E%3Canimate attributeName='opacity' values='0.45;0.9;0.45' dur='2.5s' begin='0.5s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='35,58 37,63 42,63 38,66 40,71 35,68 30,71 32,66 28,63 33,63' fill='%23FFB6C1' opacity='0.5'%3E%3Canimate attributeName='opacity' values='0.5;1;0.5' dur='2.2s' begin='1s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C/pattern%3E%3Cfilter id='moonGlow'%3E%3CfeGaussianBlur stdDeviation='3' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3CradialGradient id='yinyangCore'%3E%3Cstop offset='0' stop-color='%23FF69B4' stop-opacity='0.9'/%3E%3Cstop offset='50' stop-color='%23FFB6C1' stop-opacity='0.6'/%3E%3Cstop offset='100' stop-color='transparent' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='600' height='200' fill='url(%23skyGrad)'/%3E%3Crect width='600' height='200' fill='url(%23starPattern)'/%3E%3Cg transform='translate(300 100)' filter='url(%23moonGlow)'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='360' dur='8s' repeatCount='indefinite'/%3E%3Cpolygon points='0,-35 10,-10 35,-5 15,10 20,35 0,20 -20,35 -15,10 -35,-5 -10,-10' fill='%23FFD700' stroke='%23FF69B4' stroke-width='2.5'/%3E%3Ccircle cx='0' cy='0' r='12' fill='%23ffffff' stroke='%23FF69B4' stroke-width='2'/%3E%3Cpolygon points='0,-8 2,-3 7,-3 3,0 5,5 0,2 -5,5 -3,0 -7,-3 -2,-3' fill='%23FF69B4'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke-opacity='0.6'%3E%3Cpath d='M 0 120 Q 150 95, 300 120 T 600 105' stroke='%23FF69B4' stroke-width='1.5'%3E%3Canimate attributeName='d' values='M 0 120 Q 150 95, 300 120 T 600 105; M 0 105 Q 150 130, 300 105 T 600 120; M 0 120 Q 150 95, 300 120 T 600 105' dur='5s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M 0 150 Q 150 175, 300 150 T 600 160' stroke='%23DA70D6' stroke-width='1.2'%3E%3Canimate attributeName='d' values='M 0 150 Q 150 175, 300 150 T 600 160; M 0 165 Q 150 140, 300 165 T 600 150; M 0 150 Q 150 175, 300 150 T 600 160' dur='6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Ctext x='50%25' y='55%25' text-anchor='middle' font-size='24' font-family='Microsoft YaHei, sans-serif' fill='%23FF69B4' opacity='0.95' letter-spacing='4' style='text-shadow: 0 0 8px rgba(255,105,180,0.6);'%3E魔法变身准备中%3C/text%3E%3Ctext x='50%25' y='72%25' text-anchor='middle' font-size='13' font-family='Microsoft YaHei, sans-serif' fill='%23DA70D6' opacity='0.8' letter-spacing='3'%3E星光闪耀 · 梦想之力展开%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 0.4s ease;
    content: none !important;
    background: none !important;
}

/* === 聊天容器主样式 === */
.chat {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 35px 28px;
    background: linear-gradient(135deg, #ffffff 0%, #fff5fa 60%, #ffe8f5 100%);
    border: 3px solid rgba(255, 105, 180, 0.5);
    border-left: 8px solid #FF69B4;
    border-right: 8px solid #DA70D6;
    border-radius: 12px;
    margin: 28px 0;
    position: relative;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    box-shadow: 
        0 12px 40px rgba(255, 182, 193, 0.18),
        0 6px 20px rgba(255, 105, 180, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 8px rgba(255, 105, 180, 0.1);
    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='fuCard' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 40,25 C 40,20 35,15 30,15 C 25,15 22,18 20,22 C 18,18 15,15 10,15 C 5,15 0,20 0,25 C 0,35 20,45 20,45 C 20,45 40,35 40,25 Z' fill='%23FF69B4' opacity='0.08' transform='translate(20,15) scale(0.4)'/%3E%3Cpolygon points='40,20 42,25 47,25 43,28 45,33 40,30 35,33 37,28 33,25 38,25' fill='%23DA70D6' opacity='0.12'/%3E%3C/pattern%3E%3Cpattern id='starLight' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpolygon points='20,23 22,28 27,28 23,31 25,36 20,33 15,36 17,31 13,28 18,28' fill='%23FF69B4' opacity='0.15'/%3E%3Cpolygon points='70,53 71.5,57 75,57 72,59.5 73.5,63 70,60.5 66.5,63 68,59.5 65,57 68.5,57' fill='%23FFB6C1' opacity='0.12'/%3E%3Cpolygon points='50,73 52,78 57,78 53,81 55,86 50,83 45,86 47,81 43,78 48,78' fill='%23DA70D6' opacity='0.18'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23fuCard)'/%3E%3Crect width='200' height='200' fill='url(%23starLight)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-position: 0 0;
    animation: bg-scroll 60s linear infinite;
    opacity: 0.4;
    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 3px, rgba(255, 105, 180, 0.03) 3px, rgba(255, 105, 180, 0.03) 4px),
        radial-gradient(circle at 18% 25%, rgba(255, 105, 180, 0.1) 0%, transparent 45%),
        radial-gradient(circle at 82% 75%, rgba(218, 112, 214, 0.08) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

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

/* === 对话气泡样式 === */
.bubble {
    max-width: 75%;
    padding: 20px 26px;
    position: relative;
    line-height: 1.9;
    word-wrap: break-word;
    border-radius: 16px;
    box-shadow: 
        0 6px 20px rgba(255, 182, 193, 0.15),
        0 3px 12px rgba(255, 105, 180, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible;
}

.bubble:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 
        0 10px 28px rgba(255, 182, 193, 0.22),
        0 5px 16px rgba(255, 105, 180, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

/* NPC气泡（甜美粉红配色） */
.bubble.npc {
    background: 
        linear-gradient(135deg, rgba(255, 240, 245, 0.95) 0%, rgba(255, 245, 250, 0.98) 50%, rgba(255, 242, 248, 0.96) 100%);
    border: 2px solid rgba(255, 105, 180, 0.6);
    border-left: 5px solid #FF69B4;
    color: #2c3e50;
    align-self: flex-start;
    box-shadow: 
        0 6px 20px rgba(255, 105, 180, 0.28),
        0 3px 12px rgba(255, 182, 193, 0.22),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 105, 180, 0.15),
        0 0 30px rgba(255, 105, 180, 0.18);
    animation: border-glow 4s ease-in-out infinite;
}

/* 魔法光晕 */
.bubble.npc::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(255, 105, 180, 0.3) 50%, 
        transparent 100%);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: spell-card-shine 3s ease-in-out infinite;
}

/* 星星粒子 */
.bubble.npc::after {
    content: '★';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    color: #FF69B4;
    animation: pulse-npc 2.5s ease-in-out infinite;
    z-index: 2;
    filter: drop-shadow(0 0 4px rgba(255, 105, 180, 0.8));
}

.bubble.npc .name {
    color: #FF69B4;
    text-shadow: 
        0 0 12px rgba(255, 105, 180, 0.9), 
        0 0 20px rgba(255, 105, 180, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.bubble.npc .name::before {
    color: #ff1493;
    text-shadow: 0 0 15px rgba(255, 20, 147, 1);
    animation: star-twinkle 2s ease-in-out infinite;
}

.bubble.npc .msg {
    text-shadow: 0 1px 2px rgba(255, 105, 180, 0.05);
    color: #34495e;
}

/* User气泡（梦幻紫罗兰配色） */
.bubble.user {
    background: 
        linear-gradient(135deg, rgba(250, 240, 255, 0.95) 0%, rgba(255, 245, 255, 0.98) 50%, rgba(253, 243, 255, 0.96) 100%);
    border: 2px solid rgba(218, 112, 214, 0.6);
    border-right: 5px solid #DA70D6;
    color: #2c3e50;
    align-self: flex-end;
    box-shadow: 
        0 6px 20px rgba(218, 112, 214, 0.28),
        0 3px 12px rgba(221, 160, 221, 0.22),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(218, 112, 214, 0.15),
        0 0 30px rgba(218, 112, 214, 0.18);
    animation: border-glow 4s ease-in-out infinite 0.5s;
}

/* 魔法光晕 */
.bubble.user::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(218, 112, 214, 0.3) 50%, 
        transparent 100%);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: spell-card-shine 3s ease-in-out infinite 1s;
}

/* 爱心粒子 */
.bubble.user::after {
    content: '♥';
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 16px;
    color: #DA70D6;
    animation: pulse-user 2.5s ease-in-out infinite;
    z-index: 2;
    filter: drop-shadow(0 0 4px rgba(218, 112, 214, 0.8));
}

.bubble.user .name {
    color: #DA70D6;
    text-shadow: 
        0 0 12px rgba(218, 112, 214, 0.9), 
        0 0 20px rgba(218, 112, 214, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.bubble.user .name::before {
    color: #ba55d3;
    text-shadow: 0 0 15px rgba(186, 85, 211, 1);
    animation: star-twinkle 2s ease-in-out infinite 0.3s;
}

.bubble.user .msg {
    text-shadow: 0 1px 2px rgba(218, 112, 214, 0.05);
    color: #34495e;
}

/* 气泡内容样式 */
.bubble .name {
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 14px;
    display: block;
    position: relative;
    padding-left: 18px;
    z-index: 1;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

.bubble .name::before {
    content: '◆';
    position: absolute;
    left: 0;
    font-size: 1.4em;
    display: inline-block;
}

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

/* === 文档卡片样式 === */
.doc {
    background: linear-gradient(180deg, #ffffff 0%, #fff8fc 100%);
    border: 2px solid rgba(255, 105, 180, 0.4);
    border-left: 7px solid #FF69B4;
    border-radius: 8px;
    padding: 35px 40px;
    margin: 30px 0;
    position: relative;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    box-shadow: 
        0 10px 28px rgba(255, 182, 193, 0.15),
        0 5px 15px rgba(255, 105, 180, 0.2),
        inset 0 1px 0 rgba(255, 105, 180, 0.15);
    overflow: hidden;
}

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

.doc::after {
    content: '【 魔法日记 】';
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 0.68em;
    color: rgba(255, 105, 180, 0.8);
    letter-spacing: 7px;
    font-weight: 700;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    text-shadow: 0 0 12px rgba(255, 105, 180, 1), 0 0 24px rgba(255, 105, 180, 0.6);
    animation: glow-text 3.5s ease-in-out infinite;
    z-index: 2;
}

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

.doc .title {
    color: #FF69B4;
    font-size: 1.45em;
    font-weight: 700;
    margin: 0 0 28px 0;
    padding-bottom: 18px;
    border-bottom: 3px solid rgba(255, 105, 180, 0.6);
    letter-spacing: 4px;
    position: relative;
    text-shadow: 0 0 16px rgba(255, 105, 180, 0.9), 0 0 32px rgba(255, 105, 180, 0.5);
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

.doc .title::before {
    content: '★';
    margin-right: 16px;
    color: #ff1493;
    display: inline-block;
    animation: rotate-icon 5s linear infinite;
}

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

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

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

/* === Tooltip提示框样式 === */
T {
    position: relative;
    display: inline-block;
    color: #FF69B4;
    font-weight: 600;
    border-bottom: 2px solid rgba(255, 105, 180, 0.8);
    cursor: help;
    transition: all 0.3s ease;
    z-index: 9998;
}

T:hover {
    color: #ff1493;
    border-bottom-color: #ff69b4;
    text-shadow: 0 0 12px rgba(255, 105, 180, 0.7);
}

Ti {
    display: none;
}

.tooltip-card {
    visibility: hidden;
    opacity: 0;
    width: 340px;
    background: linear-gradient(135deg, #ffffff 0%, #fff5fa 100%);
    color: #2c3e50;
    text-align: left;
    border: 2px solid #FF69B4;
    border-radius: 8px;
    padding: 20px 22px;
    position: fixed;
    z-index: 9999;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -100%) translateY(-25px);
    margin-left: 0;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
    font-weight: 400;
    font-size: 0.88em;
    line-height: 2;
    box-shadow: 
        0 15px 32px rgba(255, 182, 193, 0.2),
        0 8px 18px rgba(255, 105, 180, 0.25),
        inset 0 1px 0 rgba(255, 105, 180, 0.15),
        0 0 35px rgba(255, 105, 180, 0.2);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    pointer-events: none;
}

T:hover .tooltip-card {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -100%) translateY(-12px);
    pointer-events: auto;
}

.tooltip-card::before {
    content: '【 魔法笔记 】';
    display: block;
    font-size: 0.72em;
    color: #FF69B4;
    margin-bottom: 14px;
    letter-spacing: 7px;
    font-weight: 700;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    text-shadow: 0 0 12px rgba(255, 105, 180, 1);
}

.tooltip-card::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -12px;
    border-width: 12px;
    border-style: solid;
    border-color: #FF69B4 transparent transparent transparent;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

/* === 用户界面样式 === */
.group.ml-0 > .flex.items-start.gap-2 {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
    background-color: #ffffff !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    width: 100% !important;
    box-shadow: 0 5px 18px rgba(255, 182, 193, 0.1) !important;
    border: 1px solid rgba(255, 105, 180, 0.25) !important;
    transition: all 0.35s ease-in-out !important;
}

.group.ml-0 > .flex.items-start.gap-2:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.18) !important;
    background-color: #fffafc !important;
    border-color: rgba(255, 105, 180, 0.45) !important;
}

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

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

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

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

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

/* === 分隔线样式 === */
div.style_divider__mW0YX.style_horizontal__UvaHt {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    border-top: 1px solid rgba(255, 105, 180, 0.2) !important;
    background: none !important;
}

/* === 回复气泡样式 === */
div.group.relative > div.relative.inline-block.bg-gray-100\/90 {
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 253, 0.96)),
        radial-gradient(circle at 80% 20%, rgba(255, 105, 180, 0.05), transparent 50%);
    color: #2c3e50;
    border-radius: 20px;
    border: 2px solid rgba(255, 105, 180, 0.5);
    box-shadow: 
        0 18px 65px -15px rgba(255, 182, 193, 0.22),
        inset 0 3px 6px rgba(255, 105, 180, 0.1),
        0 0 40px rgba(255, 105, 180, 0.18),
        0 0 0 1px rgba(255, 105, 180, 0.15);
    backdrop-filter: blur(32px) saturate(140%);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
    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='50' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='25,15 27,20 32,20 28,23 30,28 25,25 20,28 22,23 18,20 23,20' fill='%23FF69B4' opacity='0.12'/%3E%3Cpath d='M 25,30 C 25,27 22,24 19,24 C 16,24 14,26 13,28 C 12,26 10,24 7,24 C 4,24 1,27 1,30 C 1,36 13,42 13,42 C 13,42 25,36 25,30 Z' fill='%23DA70D6' opacity='0.12' transform='translate(10,5) scale(0.5)'/%3E%3C/svg%3E");
    background-size: 50px 50px;
    opacity: 0.5;
    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: 220%;
    height: 220%;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.1) 0%, transparent 55%);
    transform: translate(-50%, -50%);
    animation: classUI-ink-pulse 9s infinite ease-in-out;
    z-index: 0;
    pointer-events: none;
}

/* === Prose容器样式 === */
.styled-prose-container {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    position: relative;
    z-index: 1;
}

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

/* === Details折叠面板样式 === */
.styled-prose-container details {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 250, 253, 0.8));
    border-radius: 12px;
    margin: 16px 0;
    overflow: hidden;
    border: 1px solid rgba(255, 105, 180, 0.4);
    box-shadow: 
        0 5px 18px rgba(255, 182, 193, 0.08),
        inset 0 1px 2px rgba(255, 105, 180, 0.08),
        inset 0 -1px 0 rgba(255, 105, 180, 0.15),
        0 0 25px rgba(255, 105, 180, 0.08);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15.5px;
    line-height: 2;
    padding: 0 24px 20px 24px;
    color: #2c3e50;
}

.styled-prose-container details:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
        0 10px 30px rgba(255, 182, 193, 0.15),
        inset 0 1px 2px rgba(255, 105, 180, 0.15),
        inset 0 -1px 0 rgba(255, 105, 180, 0.2),
        0 0 35px rgba(255, 105, 180, 0.15);
    border-color: rgba(255, 105, 180, 0.6);
}

.styled-prose-container details summary {
    background: transparent;
    padding: 18px 55px 18px 24px;
    margin: 0 -24px;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    color: #FF69B4;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.7);
    letter-spacing: 1.5px;
    position: relative;
    list-style: none;
    border-bottom: 1px solid rgba(255, 105, 180, 0.4);
    transition: all 0.35s ease;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

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

.styled-prose-container details summary::before {
    content: '';
    position: absolute;
    right: 24px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2.5px solid rgba(255, 105, 180, 0.8);
    border-bottom: 2.5px solid rgba(255, 105, 180, 0.8);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
}

.styled-prose-container details summary:hover::before {
    border-color: #ff69b4;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.9);
}

.styled-prose-container details[open] > summary {
    background: linear-gradient(180deg, rgba(255, 105, 180, 0.08), transparent);
    border-bottom-color: rgba(255, 105, 180, 0.6);
    color: #ff1493;
    padding-top: 20px;
    margin-bottom: 20px;
    animation: classUI-scroll-unfold 0.45s ease-out;
}

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

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

/* === 故事卡片样式 === */
.classUI-story {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 250, 253, 0.85));
    border: 1px solid rgba(255, 105, 180, 0.4);
    border-radius: 14px;
    padding: 26px 30px;
    margin: 22px 0;
    color: #2c3e50;
    font-size: 16.5px;
    line-height: 2.1;
    box-shadow: 
        inset 0 2px 10px rgba(255, 105, 180, 0.08),
        0 0 0 1px rgba(255, 105, 180, 0.2),
        0 0 25px rgba(255, 105, 180, 0.08);
    position: relative;
    letter-spacing: 0.6px;
}

.classUI-story::before,
.classUI-story::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: rgba(255, 105, 180, 0.7);
    border-style: solid;
    transition: all 0.45s ease;
}

.classUI-story::before {
    top: 10px;
    left: 10px;
    border-width: 2.5px 0 0 2.5px;
    border-top-left-radius: 4px;
}

.classUI-story::after {
    bottom: 10px;
    right: 10px;
    border-width: 0 2.5px 2.5px 0;
    border-bottom-right-radius: 4px;
}

.classUI-story:hover::before,
.classUI-story:hover::after {
    transform: scale(1.2);
    border-color: #ff69b4;
    box-shadow: 0 0 12px rgba(255, 105, 180, 0.7);
}

/* === 小节标题样式 === */
.classUI-subsection {
    font-weight: 700;
    color: #FF69B4;
    margin: 18px 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 105, 180, 0.4);
    font-size: 14.5px;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

/* === NPC卡片样式 === */
.classUI-npc-card {
    background: rgba(255, 250, 253, 0.75);
    border: 1px solid rgba(255, 105, 180, 0.3);
    border-radius: 10px;
    padding: 18px;
    margin: 12px 0;
    box-shadow: 
        0 3px 10px rgba(255, 182, 193, 0.08),
        0 0 20px rgba(255, 105, 180, 0.08);
    transition: all 0.35s ease;
}

.classUI-npc-card:hover {
    background: rgba(255, 240, 248, 0.92);
    border-color: rgba(255, 105, 180, 0.5);
    box-shadow: 
        0 5px 15px rgba(255, 182, 193, 0.15),
        0 0 30px rgba(255, 105, 180, 0.15);
}

.classUI-npc-name {
    font-size: 17.5px;
    font-weight: 700;
    color: #FF69B4;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(255, 105, 180, 0.4);
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

/* === 记忆卡片样式 === */
.classUI-memory {
    background: rgba(255, 245, 250, 0.8);
    border-color: rgba(255, 105, 180, 0.5);
    padding-bottom: 0;
}

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

/* === 表格样式 === */
.classUI-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 105, 180, 0.4);
    box-shadow: 
        0 5px 15px rgba(255, 182, 193, 0.12),
        0 0 25px rgba(255, 105, 180, 0.08);
}

.classUI-table thead th {
    background: linear-gradient(160deg, rgba(255, 105, 180, 0.15), rgba(255, 182, 193, 0.12));
    color: #FF69B4;
    padding: 16px 12px;
    font-weight: 700;
    font-size: 13.5px;
    text-align: center;
    border-bottom: 2.5px solid rgba(255, 105, 180, 0.6);
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

.classUI-table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 105, 180, 0.3);
    background: rgba(255, 255, 255, 0.65);
    font-size: 13.5px;
    color: #2c3e50;
    vertical-align: middle;
    transition: background-color 0.35s ease;
}

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

.classUI-table tbody tr:hover td {
    background: rgba(255, 105, 180, 0.08);
}

/* === 行动卡片样式 === */
.classUI-actions {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 245, 250, 0.7));
    border: 1px solid rgba(255, 105, 180, 0.5);
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 20px;
    color: #2c3e50;
    font-weight: 600;
    font-size: 15.5px;
    line-height: 2;
    box-shadow: 
        0 5px 18px rgba(255, 182, 193, 0.12),
        0 0 25px rgba(255, 105, 180, 0.12);
    letter-spacing: 0.4px;
}

/* === 顶部导航栏样式 === */
.sticky.w-full.top-0.flex.items-center {
    background: 
        linear-gradient(135deg, 
            rgba(255, 230, 242, 0.98) 0%, 
            rgba(255, 240, 248, 0.95) 30%,
            rgba(255, 245, 250, 0.96) 70%, 
            rgba(255, 235, 245, 0.98) 100%) !important;
    border-bottom: 3px solid rgba(255, 105, 180, 0.6) !important;
    backdrop-filter: blur(40px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
    color: #2c3e50;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
    font-weight: 600 !important;
    z-index: 10 !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    height: calc(3.8rem + max(0px, env(safe-area-inset-top))) !important;
    box-shadow: 
        0 8px 32px rgba(255, 182, 193, 0.18),
        0 4px 16px rgba(255, 105, 180, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(255, 105, 180, 0.3);
    position: relative;
    overflow: hidden;
    animation: header-border-pulse 8s ease-in-out infinite;
}

.sticky.w-full.top-0.flex.items-center::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='headerCard' x='0' y='0' width='120' height='60' patternUnits='userSpaceOnUse'%3E%3Cpolygon points='20,15 22,20 27,20 23,23 25,28 20,25 15,28 17,23 13,20 18,20' fill='%23FF69B4' opacity='0.15'/%3E%3Cpath d='M 60,20 C 60,17 57,14 54,14 C 51,14 49,16 48,18 C 47,16 45,14 42,14 C 39,14 36,17 36,20 C 36,26 48,32 48,32 C 48,32 60,26 60,20 Z' fill='%23DA70D6' opacity='0.2' transform='scale(0.7)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='120' height='60' fill='url(%23headerCard)'/%3E%3C/svg%3E");
    background-size: 120px 60px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
    animation: spell-card-float 15s ease-in-out infinite;
}

.sticky.w-full.top-0.flex.items-center::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,8 31.5,12 35,12 32,14.5 33.5,18 30,15.5 26.5,18 28,14.5 25,12 28.5,12' fill='%23FF69B4' opacity='0.4'/%3E%3Cpolygon points='80,18 81.5,22 85,22 82,24.5 83.5,28 80,25.5 76.5,28 78,24.5 75,22 78.5,22' fill='%23DA70D6' opacity='0.35'/%3E%3Cpolygon points='140,33 141.5,37 145,37 142,39.5 143.5,43 140,40.5 136.5,43 138,39.5 135,37 138.5,37' fill='%23FFB6C1' opacity='0.45'/%3E%3Cpolygon points='170,13 171.5,17 175,17 172,19.5 173.5,23 170,20.5 166.5,23 168,19.5 165,17 168.5,17' fill='%23FF69B4' opacity='0.38'/%3E%3C/svg%3E");
    background-size: 200px 60px;
    background-repeat: repeat-x;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    animation: header-wave-flow 30s linear infinite;
}

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

.sticky.w-full.top-0.flex.items-center .inline-flex.items-center {
    background: 
        linear-gradient(135deg, 
            rgba(255, 105, 180, 0.18) 0%, 
            rgba(218, 112, 214, 0.15) 100%) !important;
    color: #FF69B4 !important;
    border: 2px solid rgba(255, 105, 180, 0.5) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    border-radius: 10px;
    box-shadow: 
        inset 0 1px 4px rgba(255, 105, 180, 0.3),
        0 3px 10px rgba(255, 105, 180, 0.2),
        0 0 18px rgba(255, 105, 180, 0.12);
    text-shadow: 0 0 12px rgba(255, 105, 180, 0.7);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.sticky.w-full.top-0.flex.items-center .inline-flex.items-center::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 70%);
    animation: spell-card-shine 3s ease-in-out infinite;
}

.sticky.w-full.top-0.flex.items-center .inline-flex.items-center:hover {
    background: 
        linear-gradient(135deg, 
            rgba(255, 105, 180, 0.3) 0%, 
            rgba(218, 112, 214, 0.25) 100%) !important;
    border-color: rgba(255, 105, 180, 0.8) !important;
    box-shadow: 
        inset 0 1px 6px rgba(255, 105, 180, 0.4),
        0 5px 15px rgba(255, 105, 180, 0.3),
        0 0 25px rgba(255, 105, 180, 0.2);
    transform: translateY(-2px);
}

/* === AI模型选择器样式 === */
#ai-model-selector .group {
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%, 
            rgba(255, 250, 253, 0.9) 100%) !important;
    border: 2px solid rgba(255, 105, 180, 0.5) !important;
    border-radius: 11px !important;
    padding: 0 14px !important;
    height: 2.2rem !important;
    transition: all 0.35s ease;
    box-shadow: 
        0 3px 10px rgba(255, 105, 180, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
}

#ai-model-selector .group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 105, 180, 0.08) 50%, 
        transparent 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

#ai-model-selector .group:hover::before {
    opacity: 1;
}

#ai-model-selector .group:hover {
    border-color: rgba(255, 105, 180, 0.85) !important;
    box-shadow: 
        0 5px 18px rgba(255, 105, 180, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.7);
    background: 
        linear-gradient(135deg, 
            rgba(255, 250, 253, 1) 0%, 
            rgba(255, 245, 250, 1) 100%) !important;
    transform: translateY(-2px);
}

#ai-model-selector .truncate {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
    transition: color 0.35s ease;
}

#ai-model-selector .group:hover .truncate {
    color: #FF69B4 !important;
    text-shadow: 0 0 12px rgba(255, 105, 180, 0.7);
}

#ai-model-selector svg {
    color: #2c3e50 !important;
    transition: color 0.35s ease, filter 0.35s ease;
}

#ai-model-selector .group:hover svg {
    color: #FF69B4 !important;
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.8));
}

/* === 设置按钮样式 === */
#header-setting-button {
    border-radius: 11px !important;
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%, 
            rgba(255, 250, 253, 0.9) 100%) !important;
    border: 2px solid rgba(255, 105, 180, 0.5) !important;
    transition: all 0.35s ease;
    box-shadow: 
        0 3px 10px rgba(255, 105, 180, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
}

#header-setting-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, 
        rgba(255, 105, 180, 0.15) 0%, 
        transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

#header-setting-button:hover::before {
    opacity: 1;
}

#header-setting-button:hover {
    border-color: rgba(255, 105, 180, 0.85) !important;
    box-shadow: 
        0 5px 18px rgba(255, 105, 180, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.7);
    background: 
        linear-gradient(135deg, 
            rgba(255, 250, 253, 1) 0%, 
            rgba(255, 245, 250, 1) 100%) !important;
    transform: translateY(-2px);
}

#header-setting-button svg {
    color: #2c3e50 !important;
    transition: color 0.35s ease, filter 0.35s ease;
}

#header-setting-button:hover svg {
    color: #FF69B4 !important;
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.8));
}

/* === 输入框容器样式 === */
.p-\[5\.5px\].max-h-\[150px\] {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid rgba(255, 105, 180, 0.6) !important;
    border-radius: 18px !important;
    box-shadow: 
        0 6px 20px rgba(255, 182, 193, 0.15),
        0 2px 10px rgba(255, 105, 180, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.6) !important;
    padding: 8px !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    width: auto !important;
    max-width: 96% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === 输入框样式 === */
#ai-chat-input {
    background: rgba(255, 250, 253, 0.95) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 105, 180, 0.5) !important;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1 !important;
    color: #2c3e50 !important;
    caret-color: #FF69B4 !important;
    padding: 12px 50px 12px 12px !important;
    height: auto !important;
    max-height: 130px !important;
    resize: none !important;
    outline: none !important;
    transition: all 0.35s 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 1px 3px rgba(255, 105, 180, 0.1);
}

#ai-chat-input::placeholder {
    color: rgba(200, 120, 140, 0.5) !important;
}

#ai-chat-input:focus {
    border-color: #FF69B4 !important;
    box-shadow: 
        0 0 20px rgba(255, 105, 180, 0.5),
        inset 0 2px 5px rgba(255, 105, 180, 0.15) !important;
    background: rgba(255, 255, 255, 1) !important;
}

.p-\[5\.5px\].max-h-\[150px\] .flex.items-center.px-1 {
    background: rgba(255, 105, 180, 0.15) !important;
    color: #FF69B4 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 105, 180, 0.35) !important;
    box-shadow: inset 0 0 4px rgba(255, 105, 180, 0.2);
}

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

/* === 发送按钮样式 === */
#ai-send-button {
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 105, 180, 0.5) !important;
    transition: all 0.35s ease;
    box-shadow: 
        0 2px 8px rgba(255, 105, 180, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#ai-send-button:hover {
    background: rgba(255, 105, 180, 0.2) !important;
    border-color: rgba(255, 105, 180, 0.8) !important;
    box-shadow: 
        0 4px 15px rgba(255, 105, 180, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

#ai-send-button svg {
    color: #2c3e50 !important;
    transition: color 0.35s ease, filter 0.35s ease;
}

#ai-send-button:hover svg {
    color: #FF69B4 !important;
    filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.9));
}

/* === 加载动画样式（魔法变身版） === */
.style_dot-flashing__8L91Q {
    display: none !important;
}

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq) {
    width: 100% !important;
    height: auto !important;
    min-height: 110px !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.99) 0%, 
            rgba(255, 245, 250, 0.97) 50%,
            rgba(255, 250, 253, 0.98) 100%) !important;
    border: 2px solid rgba(255, 105, 180, 0.5) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(32px) !important;
    box-shadow: 
        0 18px 50px rgba(255, 182, 193, 0.15),
        inset 0 2px 0 rgba(255, 105, 180, 0.2),
        inset 0 -2px 8px rgba(255, 105, 180, 0.08),
        0 0 45px rgba(255, 105, 180, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 魔法变身SVG */
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: 85px !important;
    height: 85px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cdefs%3E%3ClinearGradient id='moonGrad' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FF69B4'%3E%3Canimate attributeName='stop-color' values='%23FF69B4;%23DA70D6;%23FFB6C1;%23FF69B4' dur='4s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='0.5' stop-color='%23DA70D6'%3E%3Canimate attributeName='stop-color' values='%23DA70D6;%23FFB6C1;%23FF69B4;%23DA70D6' dur='4s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='1' stop-color='%23FFB6C1'%3E%3Canimate attributeName='stop-color' values='%23FFB6C1;%23FF69B4;%23DA70D6;%23FFB6C1' dur='4s' repeatCount='indefinite'/%3E%3C/stop%3E%3C/linearGradient%3E%3Cfilter id='moonGlowFilter'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3CradialGradient id='starGlow'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='1'/%3E%3Cstop offset='0.5' stop-color='%23FF69B4' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='transparent' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(80,80)'%3E%3Cg filter='url(%23moonGlowFilter)' opacity='0.3'%3E%3Ccircle cx='0' cy='0' r='70' fill='url(%23starGlow)'%3E%3Canimate attributeName='r' values='65;75;65' dur='3s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.2;0.4;0.2' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;360' dur='6s' repeatCount='indefinite'/%3E%3Cpolygon points='0,-55 16,-48 28,-32 48,-16 55,0 48,16 32,28 16,48 0,55 -16,48 -28,32 -48,16 -55,0 -48,-16 -32,-28 -16,-48' fill='none' stroke='%23FF69B4' stroke-width='1' opacity='0.4'/%3E%3Cpolygon points='0,-50 14,-43 25,-29 43,-14 50,0 43,14 29,25 14,43 0,50 -14,43 -25,29 -43,14 -50,0 -43,-14 -29,-25 -14,-43' fill='none' stroke='%23DA70D6' stroke-width='0.8' opacity='0.3'/%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;360' dur='5s' repeatCount='indefinite'/%3E%3Cpolygon points='0,-48 14,-42 25,-28 42,-14 48,0 42,14 28,25 14,42 0,48 -14,42 -25,28 -42,14 -48,0 -42,-14 -28,-25 -14,-42' fill='%23FFD700' stroke='%23FF69B4' stroke-width='3'/%3E%3Ccircle cx='0' cy='0' r='20' fill='%23ffffff' stroke='%23FF69B4' stroke-width='2'/%3E%3Cpolygon points='0,-12 3,-6 9,-6 5,-2 7,4 0,0 -7,4 -5,-2 -9,-6 -3,-6' fill='%23FF69B4'/%3E%3C/g%3E%3Cg filter='url(%23moonGlowFilter)'%3E%3CanimateTransform attributeName='transform' type='rotate' values='360;0' dur='8s' repeatCount='indefinite'/%3E%3Cpolygon points='50,-3 52,2 57,2 53,5 55,10 50,7 45,10 47,5 43,2 48,2' fill='%23FF69B4' opacity='0.9'%3E%3Canimate attributeName='opacity' values='0.9;0.3;0.9' dur='2s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='35,28 37,33 42,33 38,36 40,41 35,38 30,41 32,36 28,33 33,33' fill='%23DA70D6' opacity='0.85'%3E%3Canimate attributeName='opacity' values='0.85;0.35;0.85' dur='2.2s' begin='0.2s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='0,43 2,48 7,48 3,51 5,56 0,53 -5,56 -3,51 -7,48 -2,48' fill='%23FFB6C1' opacity='0.9'%3E%3Canimate attributeName='opacity' values='0.3;0.95;0.3' dur='2s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='-35,28 -33,33 -28,33 -32,36 -30,41 -35,38 -40,41 -38,36 -42,33 -37,33' fill='%23DA70D6' opacity='0.85'%3E%3Canimate attributeName='opacity' values='0.35;0.85;0.35' dur='2.2s' begin='0.4s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='-50,-3 -48,2 -43,2 -47,5 -45,10 -50,7 -55,10 -53,5 -57,2 -52,2' fill='%23FF69B4' opacity='0.9'%3E%3Canimate attributeName='opacity' values='0.95;0.3;0.95' dur='2s' begin='0.5s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='-35,-35 -33,-30 -28,-30 -32,-27 -30,-22 -35,-25 -40,-22 -38,-27 -42,-30 -37,-30' fill='%23FFB6C1' opacity='0.85'%3E%3Canimate attributeName='opacity' values='0.85;0.35;0.85' dur='2.2s' begin='0.6s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='0,-50 2,-45 7,-45 3,-42 5,-37 0,-40 -5,-37 -3,-42 -7,-45 -2,-45' fill='%23DA70D6' opacity='0.9'%3E%3Canimate attributeName='opacity' values='0.3;0.9;0.3' dur='2s' begin='0.7s' repeatCount='indefinite'/%3E%3C/polygon%3E%3Cpolygon points='35,-35 37,-30 42,-30 38,-27 40,-22 35,-25 30,-22 32,-27 28,-30 33,-30' fill='%23FFB6C1' opacity='0.85'%3E%3Canimate attributeName='opacity' values='0.35;0.85;0.35' dur='2.2s' begin='0.8s' repeatCount='indefinite'/%3E%3C/polygon%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;-360' dur='10s' repeatCount='indefinite'/%3E%3Cpath d='M 0,-42 Q 24,-38 34,-20 T 42,0 Q 38,24 20,34 T 0,42 Q -24,38 -34,20 T -42,0 Q -38,-24 -20,-34 T 0,-42' fill='none' stroke='url(%23moonGrad)' stroke-width='2.5' opacity='0.8' filter='url(%23moonGlowFilter)'/%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 22px rgba(255, 105, 180, 0.7)) !important;
}

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::after {
    content: '魔法变身中，请稍候...' !important;
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #FF69B4 !important;
    letter-spacing: 0.3em !important;
    animation: ink-text-fade 3s ease-in-out infinite alternate !important;
    text-shadow: 
        0 0 18px rgba(255, 105, 180, 1),
        0 0 30px rgba(255, 105, 180, 0.6) !important;
}

/* === Token消耗显示样式 === */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 105, 180, 0.4) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 16px !important;
    transition: all 0.35s ease !important;
    box-shadow: 
        0 3px 12px rgba(255, 182, 193, 0.1),
        0 0 20px rgba(255, 105, 180, 0.1) !important;
    margin-top: 6px !important;
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2 {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2::after {
    content: '显示消耗' !important;
    background: rgba(255, 105, 180, 0.18) !important;
    color: #FF69B4 !important;
    border: 1px solid rgba(255, 105, 180, 0.35) !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    font-size: 12.5px !important;
    margin-left: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif !important;
    font-weight: 600 !important;
    white-space: nowrap;
    box-shadow: inset 0 0 4px rgba(255, 105, 180, 0.2);
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover::after {
    background: rgba(255, 105, 180, 0.9) !important;
    border-color: rgba(255, 105, 180, 0.7) !important;
    color: #ffffff !important;
    box-shadow: 
        0 0 20px rgba(255, 105, 180, 0.7),
        inset 0 0 8px rgba(255, 105, 180, 0.4) !important;
    text-shadow: none !important;
}

.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-1x48u03 {
    color: #FF69B4 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    background: rgba(255, 105, 180, 0.15) !important;
    border-radius: 6px !important;
    opacity: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: opacity 0.35s ease, max-width 0.45s ease, padding 0.45s ease !important;
}

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

/* === 音频播放器样式 === */
.classUI-audio-player {
    width: 100%;
    height: 38px;
    margin-top: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 245, 250, 0.88));
    border-radius: 20px;
    border: 1px solid rgba(255, 105, 180, 0.4);
    box-shadow: 
        0 5px 18px rgba(255, 182, 193, 0.08),
        inset 0 1px 3px rgba(255, 105, 180, 0.08),
        0 0 0 1px rgba(255, 105, 180, 0.15),
        0 0 25px rgba(255, 105, 180, 0.08);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    accent-color: #FF69B4;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.classUI-audio-player:hover {
    border-color: rgba(255, 105, 180, 0.6);
    box-shadow: 
        0 7px 24px rgba(255, 182, 193, 0.15),
        inset 0 1px 3px rgba(255, 105, 180, 0.15),
        0 0 0 1px rgba(255, 105, 180, 0.25),
        0 0 35px rgba(255, 105, 180, 0.15);
}

.classUI-audio-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='17.5,10 19,14 23,14 20,17 21.5,21 17.5,18.5 13.5,21 15,17 12,14 16,14' fill='%23FF69B4' opacity='0.12'/%3E%3C/svg%3E");
    background-size: 35px 35px;
    opacity: 0.4;
    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(255, 105, 180, 0.15);
    border-radius: 50%;
    transition: all 0.35s ease;
    filter: brightness(0) saturate(100%) invert(59%) sepia(66%) saturate(5672%) hue-rotate(313deg) brightness(101%) contrast(101%);
    margin: 0 5px;
}

.classUI-audio-player::-webkit-media-controls-play-button:hover,
.classUI-audio-player::-webkit-media-controls-mute-button:hover {
    background-color: rgba(255, 105, 180, 0.3);
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
}

.classUI-audio-player::-webkit-media-controls-current-time-display,
.classUI-audio-player::-webkit-media-controls-time-remaining-display {
    color: #2c3e50;
    font-weight: 600;
    font-size: 11.5px;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

.classUI-audio-player::-webkit-media-controls-timeline {
    background-color: rgba(255, 105, 180, 0.15);
    border-radius: 9px;
    height: 7px;
    border: 1px solid rgba(255, 105, 180, 0.4);
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.2),
        0 0 12px rgba(255, 105, 180, 0.12);
    transition: all 0.35s ease;
}

.classUI-audio-player::-webkit-media-controls-timeline:hover {
    background-color: rgba(255, 105, 180, 0.22);
    border-color: rgba(255, 105, 180, 0.6);
    box-shadow: 
        inset 0 1px 4px rgba(0, 0, 0, 0.2),
        0 0 18px rgba(255, 105, 180, 0.25);
}

.classUI-audio-player::-webkit-media-controls-volume-slider {
    background-color: rgba(255, 105, 180, 0.15);
    border-radius: 9px;
    height: 7px;
    border: 1px solid rgba(255, 105, 180, 0.4);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: all 0.35s ease;
}

.classUI-audio-player::-webkit-media-controls-volume-slider:hover {
    background-color: rgba(255, 105, 180, 0.22);
    border-color: rgba(255, 105, 180, 0.6);
}

.classUI-audio-player::-webkit-media-controls-seek-back-button,
.classUI-audio-player::-webkit-media-controls-seek-forward-button {
    filter: brightness(0) saturate(100%) invert(59%) sepia(66%) saturate(5672%) hue-rotate(313deg) brightness(101%) contrast(101%);
    opacity: 0.85;
    transition: opacity 0.35s ease;
}

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

/* === 隐藏头像 === */
.mb-2 .shrink-0 {
    display: none;
}

/* ========================================
   魔法少女特殊元素样式 (统一协调版)
   ======================================== */

/* === 统一列表容器 (资金, 符卡, 物品) === */
.styled-prose-container wealth_info,
.styled-prose-container spell_card_list,
.styled-prose-container item_list {
    display: block;
    margin: 14px 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.05), rgba(255, 230, 240, 0.03));
    border: 1px solid rgba(255, 105, 180, 0.25);
    border-left: 4px solid #FF69B4;
    border-radius: 8px;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    line-height: 1.8;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.styled-prose-container wealth_info:hover,
.styled-prose-container spell_card_list:hover,
.styled-prose-container item_list:hover {
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.08), rgba(218, 112, 214, 0.06));
    border-color: rgba(255, 105, 180, 0.4);
    box-shadow: 0 4px 14px rgba(255, 182, 193, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* === 统一列表内标题 === */
.styled-prose-container wealth_info > span,
.styled-prose-container spell_card_list > span,
.styled-prose-container item_list > span {
    display: block;
    color: #FF69B4;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.5);
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    letter-spacing: 1px;
}

/* === 统一列表内标签 === */
.styled-prose-container spell_card_list info {
    display: inline-block;
    color: #DA70D6;
    font-weight: 600;
    font-size: 13.5px;
    margin-right: 5px;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

/* === 统一Tooltip触发器T === */
.styled-prose-container spell_card_list T,
.styled-prose-container item_list T {
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 6px;
    cursor: help;
    color: #34495e;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed #FF69B4;
    padding: 2px 8px;
    background: rgba(255, 105, 180, 0.08);
    border-radius: 4px;
    transition: all 0.3s ease;
    overflow: visible;
    z-index: 10;
}

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

.styled-prose-container spell_card_list T:hover,
.styled-prose-container item_list T:hover {
    background: rgba(255, 105, 180, 0.2);
    color: #ff1493;
    border-bottom-style: solid;
    box-shadow: 0 0 12px rgba(255, 105, 180, 0.25);
    z-index: 100;
}

/* === 统一Tooltip提示框Ti === */
.styled-prose-container spell_card_list T Ti,
.styled-prose-container item_list T Ti {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    width: auto;
    min-width: 200px;
    max-width: 250px;
    white-space: normal;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(255, 245, 250, 0.97));
    color: #2c3e50;
    text-align: left;
    border: 1px solid #FF69B4;
    border-left: 4px solid #FF69B4;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 0.86em;
    font-weight: 400;
    line-height: 1.7;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    box-shadow: 0 8px 30px rgba(255, 182, 193, 0.25), 0 0 20px rgba(255, 105, 180, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    position: absolute;
    z-index: 99999;
    bottom: 100%;
    left: 0;
    transform: translateY(10px);
    margin-bottom: 10px;
}

/* === 统一Tooltip装饰性标题 === */
.styled-prose-container spell_card_list T Ti::before,
.styled-prose-container item_list T Ti::before {
    content: '【 魔法笔记 】';
    display: block;
    font-size: 0.7em;
    color: #FF69B4;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 105, 180, 0.3);
    letter-spacing: 2px;
    font-weight: 700;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
}

/* === 统一Tooltip悬浮显示 === */
.styled-prose-container spell_card_list T:hover Ti,
.styled-prose-container item_list T:hover Ti {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* === 统一Tooltip内部信息项 === */
.styled-prose-container spell_card_list T Ti > span,
.styled-prose-container item_list T Ti > span {
    display: inline-block;
    color: #ff1493;
    font-weight: 700;
    margin-right: 6px;
}

/* === 移动端适配 === */
@media (max-width: 768px) {
    .chat {
        padding: 26px 18px;
        gap: 16px;
        border-left: 6px solid #FF69B4;
        border-right: 6px solid #DA70D6;
    }
    .chat::before {
        animation-duration: 80s;
    }
    .bubble {
        max-width: 88%;
        padding: 16px 20px;
    }
    .bubble .name {
        font-size: 0.72em;
        letter-spacing: 1.8px;
    }
    .bubble .msg {
        font-size: 0.92em;
    }
    .doc {
        padding: 26px 22px;
    }
    .doc .title::before {
        animation: none;
    }
    .tooltip-card {
        width: 280px;
    }
    .styled-prose-container details {
        font-size: 14.5px;
        line-height: 1.9;
        padding: 0 18px 16px 18px;
    }
    .styled-prose-container details summary {
        padding: 16px 50px 16px 18px;
        margin: 0 -18px;
        font-size: 16px;
    }
    .styled-prose-container details[open] > summary {
        padding-top: 18px;
        margin-bottom: 18px;
    }
    .classUI-table tbody td,
    .classUI-table thead th {
        font-size: 12.5px;
        padding: 12px 10px;
    }
    .classUI-story {
        font-size: 15.5px;
        padding: 22px 24px;
    }
    .classUI-npc-card {
        padding: 16px;
    }
    .classUI-actions {
        font-size: 14.5px;
        padding: 18px 20px;
    }
    .classUI-audio-player {
        height: 35px;
    }
    .classUI-audio-player::-webkit-media-controls-current-time-display,
    .classUI-audio-player::-webkit-media-controls-time-remaining-display {
        font-size: 10.5px;
    }
    .sticky.w-full.top-0.flex.items-center {
        animation: none !important;
    }
    .sticky.w-full.top-0.flex.items-center::before,
    .sticky.w-full.top-0.flex.items-center::after,
    .sticky.w-full.top-0.flex.items-center .inline-flex.items-center::before,
    #ai-model-selector .group::before,
    #header-setting-button::before {
        animation: none !important;
    }
    .styled-prose-container wealth_info,
    .styled-prose-container spell_card_list,
    .styled-prose-container item_list {
        padding: 10px 14px;
        margin: 12px 0;
    }
    .styled-prose-container spell_card_list T Ti,
    .styled-prose-container item_list T Ti {
        max-width: 180px;
        padding: 8px 12px;
        font-size: 0.8em;
        left: 0;
    }
    .styled-prose-container spell_card_list T Ti::before,
    .styled-prose-container item_list T Ti::before {
        font-size: 0.66em;
        letter-spacing: 1.2px;
    }
}

/* === 减弱动画（辅助功能） === */
@media (prefers-reduced-motion: reduce) {
    cot::before,
    .chat::before,
    .doc .title::before,
    .doc::after,
    .bubble.npc::after,
    .bubble.user::after,
    .bubble.npc::before,
    .bubble.user::before,
    .sticky.w-full.top-0.flex.items-center,
    .sticky.w-full.top-0.flex.items-center::before,
    .sticky.w-full.top-0.flex.items-center::after,
    .sticky.w-full.top-0.flex.items-center .inline-flex.items-center::before,
    #ai-model-selector .group::before,
    #header-setting-button::before {
        animation: none !important;
    }
    .styled-prose-container spell_card_list T:hover Ti,
    .styled-prose-container item_list T:hover Ti {
        transform: translateY(0);
        transition: none;
    }
}

/* === 隐藏特定背景元素 === */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none;
}

/* ========================================
   魔法少女主题样式表结束
   ======================================== */

/* ========== 魔法少女风格 - 魔法商店界面 (追加模块) ========== */

/* 顶层容器 - 整体风格定义 */
.ep-exchange {
  border: 2px solid #FF69B4;
  background-color: #FFF5FA;
  padding: 15px;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  color: #4A3C45;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* 魔法少女风格装饰性背景纹理 */
.ep-exchange::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 105, 180, 0.02) 50px, rgba(255, 105, 180, 0.02) 51px),
    repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 105, 180, 0.02) 50px, rgba(255, 105, 180, 0.02) 51px);
  pointer-events: none;
  border-radius: 6px;
}

/* ========== 标题区域 ========== */
.ep-exchange .title {
  text-align: center;
  border-bottom: 2px solid #FF69B4;
  padding-bottom: 10px;
  margin-bottom: 15px;
  margin-top: 0;
  color: #FF1493;
  font-weight: bold;
  font-size: 1.3em;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.1);
  position: relative;
  z-index: 1;
}

/* ========== 余额显示 ========== */
.ep-exchange .balance {
  text-align: right;
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 1em;
  position: relative;
  z-index: 1;
}

.ep-exchange .currency-money {
  color: #FFD700;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(255, 215, 0, 0.3);
}

.ep-exchange .currency-special {
  color: #DA70D6;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(218, 112, 214, 0.3);
}

/* ========== 分类区块 ========== */
.ep-exchange .category {
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
}

.ep-exchange .category-title {
  padding: 8px 12px;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1em;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 魔法道具分类 - 粉色系 */
.ep-exchange .category-rare {
  background: linear-gradient(135deg, #FFE4F0 0%, #FFD1E8 100%);
  border-left: 4px solid #FF69B4;
  color: #C71585;
}

/* 变身强化分类 - 紫色系 */
.ep-exchange .category-power {
  background: linear-gradient(135deg, #F3E6FA 0%, #E8D8F6 100%);
  border-left: 4px solid #DA70D6;
  color: #8B008B;
}

/* 魔法零食分类 - 浅粉色系 */
.ep-exchange .category-life {
  background: linear-gradient(135deg, #FFF0F5 0%, #FFE8F0 100%);
  border-left: 4px solid #FFB6C1;
  color: #DB7093;
}

/* 星光情报分类 - 金色系 */
.ep-exchange .category-info {
  background: linear-gradient(135deg, #FFFACD 0%, #FFF4B8 100%);
  border-left: 4px solid #FFD700;
  color: #DAA520;
}

/* ========== 商品列表 ========== */
.ep-exchange .item-list {
  list-style-type: none;
  padding-left: 10px;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

.ep-exchange .item-list li {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  line-height: 1.6;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 3px solid transparent;
}

.ep-exchange .item-list li:hover {
  background-color: rgba(255, 105, 180, 0.12);
  transform: translateX(5px);
  border-left-color: #FF69B4;
  box-shadow: 0 2px 6px rgba(255, 105, 180, 0.15);
}

.ep-exchange .item-note {
  font-size: 0.85em;
  color: #666;
  font-style: italic;
  opacity: 0.9;
}

/* ========== 底部提示语 ========== */
.ep-exchange .prompt {
  text-align: center;
  font-style: italic;
  margin-top: 20px;
  margin-bottom: 8px;
  border-top: 1px dashed #FF69B4;
  padding-top: 10px;
  color: #4A3C45;
  position: relative;
  z-index: 1;
}

.ep-exchange .secondary-prompt {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* ========== 滚动条美化 ========== */
.ep-exchange .item-list::-webkit-scrollbar {
  width: 8px;
}

.ep-exchange .item-list::-webkit-scrollbar-track {
  background: rgba(255, 105, 180, 0.08);
  border-radius: 4px;
}

.ep-exchange .item-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF69B4 0%, #FF1493 100%);
  border-radius: 4px;
  transition: background 0.3s ease;
  border: 1px solid rgba(255, 20, 147, 0.3);
}

.ep-exchange .item-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FF1493 0%, #DA70D6 100%);
}

/* ========== 响应式设计 ========== */
@media (max-width: 768px) {
  .ep-exchange {
    padding: 12px;
    border-width: 1.5px;
  }
  
  .ep-exchange .title {
    font-size: 1.1em;
    letter-spacing: 1px;
    padding-bottom: 8px;
  }
  
  .ep-exchange .balance {
    font-size: 0.95em;
  }
  
  .ep-exchange .category-title {
    font-size: 0.95em;
    padding: 6px 10px;
  }
  
  .ep-exchange .item-list {
    padding-left: 5px;
    max-height: 200px;
  }
  
  .ep-exchange .item-list li {
    font-size: 0.9em;
    padding: 6px 8px;
  }
  
  .ep-exchange .prompt {
    font-size: 0.9em;
  }
  
  .ep-exchange .secondary-prompt {
    font-size: 0.85em;
  }
}

@media (max-width: 480px) {
  .ep-exchange {
    padding: 10px;
  }
  
  .ep-exchange .title {
    font-size: 1em;
    letter-spacing: 0.5px;
  }
  
  .ep-exchange .category-title {
    font-size: 0.9em;
  }
  
  .ep-exchange .item-list li {
    font-size: 0.85em;
  }
}
think {
  display: none !important;
}