.absolute.top-0.MuiBox-root {
    background:transparent;
}
.chat-answer-container .bg-gray-100\/90 {
    background-color: transparent !important;
}
guide,logicthink,.mb-2 > div.shrink-0.w-10.h-10.relative.bg-white.rounded-full.block.md\:block,
.mb-2 > div.shrink-0.relative.w-10.h-10.bg-gray-100\/90.rounded-full.block.md\:block{
  display: none !important;
}
.chat-answer-container.mr-2 {
    margin-right: 0rem;
}
.group .px-4 {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
}

/* 输出聊天框 - 温暖回忆主题 */
.chatbox {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe4cc 50%, #ffd9b3 100%) !important;
    border-radius: 16px !important;
    border: 2px solid #d4a574 !important;
    box-shadow: 0 8px 24px rgba(212, 165, 116, 0.25), 
                0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 20px !important;
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}

/* 输出框时光粒子背景动效 */
.chatbox::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 16px !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 200, 120, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 220, 150, 0.12) 0%, transparent 50%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 0%, 100% 100% !important;
    animation: timeParticles 8s ease-in-out infinite !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

@keyframes timeParticles {
    0%, 100% { background-position: 0% 0%, 100% 100%; opacity: 0.6; }
    50% { background-position: 100% 100%, 0% 0%; opacity: 0.9; }
}

/* 输出框时钟SVG装饰 - 右上角 */
.chatbox::after {
    content: '' !important;
    position: absolute !important;
    top: -12px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23fff9f0" stroke="%23d4a574" stroke-width="3"/><circle cx="50" cy="50" r="40" fill="none" stroke="%23e6c89f" stroke-width="1" stroke-dasharray="2,4"/><line x1="50" y1="50" x2="50" y2="25" stroke="%23b8956a" stroke-width="3" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="60s" repeatCount="indefinite"/></line><line x1="50" y1="50" x2="50" y2="18" stroke="%23d4a574" stroke-width="2" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3600s" repeatCount="indefinite"/></line><circle cx="50" cy="50" r="4" fill="%23b8956a"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 2 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

/* 输入聊天框 - 清新未来主题 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f2 50%, #c0dfe8 100%) !important;
    border-radius: 16px !important;
    border: 2px solid #7eb8d4 !important;
    box-shadow: 0 8px 24px rgba(126, 184, 212, 0.25), 
                0 2px 8px rgba(0, 0, 0, 0.08) !important;
    padding: 20px !important;
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}

/* 输入框波纹背景动效 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 16px !important;
    background-image: 
        radial-gradient(circle at 30% 40%, rgba(120, 180, 210, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(150, 200, 220, 0.08) 0%, transparent 50%) !important;
    background-size: 150% 150% !important;
    background-position: 0% 0%, 100% 100% !important;
    animation: futureWave 6s ease-in-out infinite !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

@keyframes futureWave {
    0%, 100% { background-position: 0% 0%, 100% 100%; opacity: 0.5; }
    50% { background-position: 100% 100%, 0% 0%; opacity: 0.8; }
}

/* 输入框书页SVG装饰 - 左上角 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    left: 16px !important;
    width: 44px !important;
    height: 44px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20 15 L80 15 L80 85 L50 75 L20 85 Z" fill="%23f0f8fc" stroke="%237eb8d4" stroke-width="2.5"/><line x1="30" y1="30" x2="70" y2="30" stroke="%239ec9dc" stroke-width="1.5"/><line x1="30" y1="42" x2="70" y2="42" stroke="%239ec9dc" stroke-width="1.5"/><line x1="30" y1="54" x2="60" y2="54" stroke="%239ec9dc" stroke-width="1.5"/><path d="M50 75 L50 85" stroke="%237eb8d4" stroke-width="2" stroke-linecap="round"/><animateTransform attributeName="transform" type="rotate" values="0 50 50; -3 50 50; 3 50 50; 0 50 50" dur="4s" repeatCount="indefinite"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 2 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

/* 聊天框内文本内容 - 确保高对比度可读性 */
.markdown-body {
    color: #2c2416 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 底部附加元素 - 统一样式 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #5a4a3a !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #d4a574 !important;
    transform: translateY(-1px) !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block::after,
    .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after {
        width: 36px !important;
        height: 36px !important;
        top: -8px !important;
    }
}

/* 低动效模式 */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block::before,
    .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before {
        animation-duration: 20s !important;
    }
}
/* ===== 隐藏默认加载动画 ===== */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* ===== 加载动画容器 ===== */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 260px !important;
    height: 200px !important;
    min-height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 16px auto !important;
    overflow: visible !important;
}

/* ===== 主体SVG动画 ===== */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 240px !important;
    height: 180px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 180">\
  <defs>\
    <linearGradient id="fg" x1="0" y1="0" x2="1" y2="1">\
      <stop offset="0%25" stop-color="%23d4a574"/>\
      <stop offset="50%25" stop-color="%23ecd5a8"/>\
      <stop offset="100%25" stop-color="%23d4a574"/>\
    </linearGradient>\
    <linearGradient id="pg" x1="0" y1="0" x2="0" y2="1">\
      <stop offset="0%25" stop-color="%23fffef8"/>\
      <stop offset="100%25" stop-color="%23f5ead0"/>\
    </linearGradient>\
    <linearGradient id="gl" x1="0" y1="0" x2="0" y2="1">\
      <stop offset="0%25" stop-color="%23ffd699" stop-opacity="0.5"/>\
      <stop offset="100%25" stop-color="%23ffbe66" stop-opacity="0"/>\
    </linearGradient>\
    <radialGradient id="rg" cx="50%25" cy="50%25" r="50%25">\
      <stop offset="0%25" stop-color="%23fff0d0" stop-opacity="0.3"/>\
      <stop offset="100%25" stop-color="%23ffd699" stop-opacity="0"/>\
    </radialGradient>\
    <filter id="sf" x="-20%25" y="-20%25" width="140%25" height="140%25">\
      <feGaussianBlur stdDeviation="1.5" result="b"/>\
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>\
    </filter>\
  </defs>\
  \
  <rect x="4" y="4" width="232" height="172" rx="14" ry="14" fill="%23fffaf2" stroke="url(%23fg)" stroke-width="2.5"/>\
  <rect x="10" y="10" width="220" height="160" rx="10" ry="10" fill="none" stroke="%23e8c89f" stroke-width="0.7" stroke-dasharray="4,3" opacity="0.6"/>\
  \
  <path d="M22 22 C22 17,26 14,31 14" fill="none" stroke="%23d4a574" stroke-width="1.3" stroke-linecap="round"/>\
  <path d="M22 22 C17 22,14 18,14 14" fill="none" stroke="%23d4a574" stroke-width="1.3" stroke-linecap="round"/>\
  <path d="M218 22 C218 17,214 14,209 14" fill="none" stroke="%23d4a574" stroke-width="1.3" stroke-linecap="round"/>\
  <path d="M218 22 C223 22,226 18,226 14" fill="none" stroke="%23d4a574" stroke-width="1.3" stroke-linecap="round"/>\
  <path d="M22 158 C22 163,26 166,31 166" fill="none" stroke="%23d4a574" stroke-width="1.3" stroke-linecap="round"/>\
  <path d="M22 158 C17 158,14 162,14 166" fill="none" stroke="%23d4a574" stroke-width="1.3" stroke-linecap="round"/>\
  <path d="M218 158 C218 163,214 166,209 166" fill="none" stroke="%23d4a574" stroke-width="1.3" stroke-linecap="round"/>\
  <path d="M218 158 C223 158,226 162,226 166" fill="none" stroke="%23d4a574" stroke-width="1.3" stroke-linecap="round"/>\
  \
  <circle cx="120" cy="78" r="52" fill="none" stroke="%23d4a574" stroke-width="0.6" stroke-dasharray="2,6" opacity="0.35">\
    <animateTransform attributeName="transform" type="rotate" from="0 120 78" to="360 120 78" dur="25s" repeatCount="indefinite"/>\
  </circle>\
  <circle cx="120" cy="78" r="58" fill="none" stroke="%23e8c89f" stroke-width="0.4" stroke-dasharray="1,9" opacity="0.25">\
    <animateTransform attributeName="transform" type="rotate" from="360 120 78" to="0 120 78" dur="18s" repeatCount="indefinite"/>\
  </circle>\
  <circle cx="120" cy="78" r="46" fill="none" stroke="%23c9a87c" stroke-width="0.5" stroke-dasharray="1.5,7" opacity="0.2">\
    <animateTransform attributeName="transform" type="rotate" from="180 120 78" to="540 120 78" dur="22s" repeatCount="indefinite"/>\
  </circle>\
  \
  <ellipse cx="120" cy="78" rx="42" ry="32" fill="url(%23rg)">\
    <animate attributeName="rx" values="38;48;38" dur="4s" repeatCount="indefinite"/>\
    <animate attributeName="ry" values="28;36;28" dur="4s" repeatCount="indefinite"/>\
    <animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/>\
  </ellipse>\
  \
  <g filter="url(%23sf)">\
    <path d="M120 55 L82 50 L82 102 L120 97 Z" fill="url(%23pg)" stroke="%23c9a87c" stroke-width="1.2" stroke-linejoin="round"/>\
    <path d="M120 55 L158 50 L158 102 L120 97 Z" fill="url(%23pg)" stroke="%23c9a87c" stroke-width="1.2" stroke-linejoin="round"/>\
    <line x1="120" y1="53" x2="120" y2="99" stroke="%23b8956a" stroke-width="1.8" stroke-linecap="round"/>\
    <path d="M82 48 L82 50 L120 55 L158 50 L158 48 L140 45 L120 52 L100 45 Z" fill="%23e6d5b8" stroke="%23c9a87c" stroke-width="0.5" opacity="0.5"/>\
  </g>\
  \
  <line x1="90" y1="65" x2="114" y2="62" stroke="%23c9a87c" stroke-width="0.6" opacity="0.35"/>\
  <line x1="90" y1="72" x2="114" y2="69" stroke="%23c9a87c" stroke-width="0.6" opacity="0.35"/>\
  <line x1="90" y1="79" x2="110" y2="76.5" stroke="%23c9a87c" stroke-width="0.6" opacity="0.35"/>\
  <line x1="90" y1="86" x2="112" y2="83.5" stroke="%23c9a87c" stroke-width="0.6" opacity="0.3"/>\
  <line x1="126" y1="62" x2="150" y2="65" stroke="%23c9a87c" stroke-width="0.6" opacity="0.35"/>\
  <line x1="126" y1="69" x2="150" y2="72" stroke="%23c9a87c" stroke-width="0.6" opacity="0.35"/>\
  <line x1="126" y1="76.5" x2="148" y2="79" stroke="%23c9a87c" stroke-width="0.6" opacity="0.35"/>\
  <line x1="126" y1="83.5" x2="146" y2="86" stroke="%23c9a87c" stroke-width="0.6" opacity="0.3"/>\
  \
  <path d="M120 55 Q102 53,84 50 L84 100 Q102 97,120 95" fill="%23fffdf5" stroke="%23d4b88c" stroke-width="0.4" opacity="0.7">\
    <animate attributeName="d" dur="3s" repeatCount="indefinite" values="\
      M120 55 Q102 53,84 50 L84 100 Q102 97,120 95;\
      M120 55 Q112 48,100 52 L100 100 Q112 102,120 95;\
      M120 55 Q108 46,96 51 L96 101 Q108 104,120 95;\
      M120 55 Q102 53,84 50 L84 100 Q102 97,120 95\
    "/>\
  </path>\
  <path d="M120 55 Q138 53,156 50 L156 100 Q138 97,120 95" fill="%23fffdf5" stroke="%23d4b88c" stroke-width="0.4" opacity="0.6">\
    <animate attributeName="d" dur="3.8s" repeatCount="indefinite" values="\
      M120 55 Q138 53,156 50 L156 100 Q138 97,120 95;\
      M120 55 Q128 48,140 52 L140 100 Q128 102,120 95;\
      M120 55 Q132 46,144 51 L144 101 Q132 104,120 95;\
      M120 55 Q138 53,156 50 L156 100 Q138 97,120 95\
    "/>\
  </path>\
  \
  <g>\
    <animateTransform attributeName="transform" type="translate" values="0,0;4,-2;-2,1;3,-1;0,0" dur="2.5s" repeatCount="indefinite"/>\
    <path d="M160 38 L146 60 L144 63 L145 59 L148 56 Z" fill="%23c9a87c" stroke="%238a6840" stroke-width="0.6"/>\
    <path d="M160 38 L168 25 Q170 21,172 27 L162 40 Z" fill="%23f5f0e0" stroke="%23c9a87c" stroke-width="0.6"/>\
    <path d="M168 25 L170 22 L172 24 L170 21" fill="none" stroke="%23d4a574" stroke-width="0.3" opacity="0.6"/>\
    <circle cx="144" cy="64" r="1.2" fill="%23705030" opacity="0">\
      <animate attributeName="opacity" values="0;0.5;0.7;0" dur="2.5s" repeatCount="indefinite"/>\
      <animate attributeName="r" values="0.5;1.2;1.5;0.8" dur="2.5s" repeatCount="indefinite"/>\
    </circle>\
    <circle cx="142" cy="66" r="0.8" fill="%23705030" opacity="0">\
      <animate attributeName="opacity" values="0;0;0.4;0" dur="2.5s" repeatCount="indefinite"/>\
    </circle>\
  </g>\
  \
  <g>\
    <circle cx="120" cy="35" r="2.5" fill="%23ffc040">\
      <animateTransform attributeName="transform" type="rotate" from="0 120 78" to="360 120 78" dur="7s" repeatCount="indefinite"/>\
      <animate attributeName="opacity" values="0.3;0.9;0.3" dur="3.5s" repeatCount="indefinite"/>\
    </circle>\
    <circle cx="162" cy="78" r="2" fill="%23ffb030">\
      <animateTransform attributeName="transform" type="rotate" from="120 120 78" to="480 120 78" dur="9s" repeatCount="indefinite"/>\
      <animate attributeName="opacity" values="0.25;0.7;0.25" dur="4.5s" repeatCount="indefinite"/>\
    </circle>\
    <circle cx="78" cy="78" r="1.8" fill="%23ffd060">\
      <animateTransform attributeName="transform" type="rotate" from="240 120 78" to="600 120 78" dur="6s" repeatCount="indefinite"/>\
      <animate attributeName="opacity" values="0.4;0.85;0.4" dur="3s" repeatCount="indefinite"/>\
    </circle>\
    <circle cx="120" cy="121" r="2.2" fill="%23ffa830">\
      <animateTransform attributeName="transform" type="rotate" from="60 120 78" to="420 120 78" dur="8s" repeatCount="indefinite"/>\
      <animate attributeName="opacity" values="0.2;0.6;0.2" dur="4s" repeatCount="indefinite"/>\
    </circle>\
    <circle cx="100" cy="42" r="1.5" fill="%23ffe070">\
      <animateTransform attributeName="transform" type="rotate" from="300 120 78" to="660 120 78" dur="10s" repeatCount="indefinite"/>\
      <animate attributeName="opacity" values="0.3;0.75;0.3" dur="5s" repeatCount="indefinite"/>\
    </circle>\
    <circle cx="140" cy="114" r="1.8" fill="%23ffcc50">\
      <animateTransform attributeName="transform" type="rotate" from="180 120 78" to="540 120 78" dur="11s" repeatCount="indefinite"/>\
      <animate attributeName="opacity" values="0.2;0.65;0.2" dur="5.5s" repeatCount="indefinite"/>\
    </circle>\
  </g>\
  \
  <g>\
    <path d="M48 32 L50 38 L56 38 L51 42 L53 48 L48 44 L43 48 L45 42 L40 38 L46 38 Z" fill="%23ffc040">\
      <animate attributeName="opacity" values="0.15;0.75;0.15" dur="2.2s" repeatCount="indefinite"/>\
    </path>\
    <path d="M192 40 L193.5 44.5 L198 44.5 L194.5 47.5 L195.5 52 L192 49 L188.5 52 L189.5 47.5 L186 44.5 L190.5 44.5 Z" fill="%23ffd060">\
      <animate attributeName="opacity" values="0.2;0.7;0.2" dur="3s" repeatCount="indefinite"/>\
    </path>\
    <path d="M40 112 L41.5 116.5 L46 116.5 L42.5 119 L43.5 123.5 L40 121 L36.5 123.5 L37.5 119 L34 116.5 L38.5 116.5 Z" fill="%23ffb840">\
      <animate attributeName="opacity" values="0.15;0.6;0.15" dur="3.5s" repeatCount="indefinite"/>\
    </path>\
    <path d="M198 112 L199 115 L202 115 L199.5 117 L200.5 120 L198 118 L195.5 120 L196.5 117 L194 115 L197 115 Z" fill="%23ffc850">\
      <animate attributeName="opacity" values="0.2;0.8;0.2" dur="2.6s" repeatCount="indefinite"/>\
    </path>\
    <path d="M30 72 L31 75 L34 75 L31.5 77 L32.5 80 L30 78 L27.5 80 L28.5 77 L26 75 L29 75 Z" fill="%23ffe080">\
      <animate attributeName="opacity" values="0.1;0.55;0.1" dur="4s" repeatCount="indefinite"/>\
    </path>\
    <path d="M210 82 L211 85 L214 85 L211.5 87 L212.5 90 L210 88 L207.5 90 L208.5 87 L206 85 L209 85 Z" fill="%23ffd070">\
      <animate attributeName="opacity" values="0.15;0.65;0.15" dur="3.2s" repeatCount="indefinite"/>\
    </path>\
  </g>\
  \
  <g opacity="0.4">\
    <line x1="60" y1="28" x2="56" y2="20" stroke="%23e8c89f" stroke-width="0.4" stroke-linecap="round">\
      <animate attributeName="opacity" values="0;0.5;0" dur="4s" begin="0s" repeatCount="indefinite"/>\
    </line>\
    <line x1="180" y1="30" x2="184" y2="22" stroke="%23e8c89f" stroke-width="0.4" stroke-linecap="round">\
      <animate attributeName="opacity" values="0;0.5;0" dur="4s" begin="1.3s" repeatCount="indefinite"/>\
    </line>\
    <line x1="55" y1="140" x2="50" y2="148" stroke="%23e8c89f" stroke-width="0.4" stroke-linecap="round">\
      <animate attributeName="opacity" values="0;0.4;0" dur="4s" begin="2.6s" repeatCount="indefinite"/>\
    </line>\
    <line x1="185" y1="140" x2="190" y2="148" stroke="%23e8c89f" stroke-width="0.4" stroke-linecap="round">\
      <animate attributeName="opacity" values="0;0.4;0" dur="4s" begin="0.7s" repeatCount="indefinite"/>\
    </line>\
  </g>\
  \
  <text x="108" y="148" text-anchor="middle" fill="%23b8956a" font-size="12.5" font-family="PingFang SC,Microsoft YaHei,sans-serif" letter-spacing="3">\
    <animate attributeName="opacity" values="0.45;1;0.45" dur="2.5s" repeatCount="indefinite"/>\
    故事撰写中\
  </text>\
  <circle cx="163" cy="146" r="1.2" fill="%23b8956a">\
    <animate attributeName="opacity" values="0;1;1;0" dur="1.8s" repeatCount="indefinite"/>\
  </circle>\
  <circle cx="170" cy="146" r="1.2" fill="%23b8956a">\
    <animate attributeName="opacity" values="0;0;1;0" dur="1.8s" repeatCount="indefinite"/>\
  </circle>\
  <circle cx="177" cy="146" r="1.2" fill="%23b8956a">\
    <animate attributeName="opacity" values="0;0;0;1" dur="1.8s" repeatCount="indefinite"/>\
  </circle>\
</svg>') !important;
}

/* ===== 底部光晕增强 ===== */
.flex.items-center.justify-center.w-6.h-5::after {
    content: '' !important;
    position: absolute !important;
    bottom: -6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 180px !important;
    height: 20px !important;
    background: radial-gradient(ellipse at center, rgba(212, 165, 116, 0.18) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
    .flex.items-center.justify-center.w-6.h-5 {
        width: 220px !important;
        height: 172px !important;
        min-height: 172px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 200px !important;
        height: 150px !important;
    }
}

/* ===== 低动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::before {
        animation-duration: 30s !important;
    }
}
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(135deg, #fdf6ed 0%, #f5e6d0 40%, #ecdbc4 100%) !important;
    border-bottom: 2px solid rgba(212, 165, 116, 0.6) !important;
    box-shadow: 
        0 4px 20px rgba(212, 165, 116, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 -1px 0 rgba(255, 245, 230, 0.5) !important;
    position: relative !important;
    overflow: visible !important;
    transition: box-shadow 0.4s ease !important;
}

.sticky.w-full.top-0.flex.items-center:hover {
    box-shadow: 
        0 6px 28px rgba(212, 165, 116, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 -1px 0 rgba(255, 245, 230, 0.6) !important;
}

/* 顶部栏左侧流光装饰 */
.sticky.w-full.top-0.flex.items-center::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 215, 140, 0.12) 20%,
        rgba(255, 230, 170, 0.08) 50%,
        transparent 80%
    ) !important;
    background-size: 200% 100% !important;
    animation: topBarShimmer 6s ease-in-out infinite !important;
    pointer-events: none !important;
}

@keyframes topBarShimmer {
    0%, 100% { background-position: -200% 0; }
    50% { background-position: 200% 0; }
}

/* 顶部栏沙漏SVG装饰 - 右侧 */
.sticky.w-full.top-0.flex.items-center::after {
    content: '' !important;
    position: absolute !important;
    right: 52px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 36px !important;
    opacity: 0.35 !important;
    pointer-events: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 80"><rect x="12" y="2" width="36" height="4" rx="2" fill="%23b8956a"/><rect x="12" y="74" width="36" height="4" rx="2" fill="%23b8956a"/><path d="M16 6 L44 6 L44 14 C44 22 36 32 30 38 C24 32 16 22 16 14 Z" fill="none" stroke="%23c9a87a" stroke-width="2"/><path d="M16 74 L44 74 L44 66 C44 58 36 48 30 42 C24 48 16 58 16 66 Z" fill="none" stroke="%23c9a87a" stroke-width="2"/><path d="M20 10 L40 10 L40 14 C40 20 34 28 30 34 C26 28 20 20 20 14 Z" fill="%23e6c89f" opacity="0.5"><animate attributeName="opacity" values="0.5;0.15;0.5" dur="4s" repeatCount="indefinite"/></path><path d="M24 68 L36 68 L36 64 C36 58 32 52 30 48 C28 52 24 58 24 64 Z" fill="%23e6c89f" opacity="0.2"><animate attributeName="opacity" values="0.2;0.55;0.2" dur="4s" repeatCount="indefinite"/></path><line x1="30" y1="34" x2="30" y2="48" stroke="%23d4a574" stroke-width="1.2" stroke-linecap="round"><animate attributeName="opacity" values="0.9;0.3;0.9" dur="2s" repeatCount="indefinite"/></line><circle cx="30" cy="41" r="1" fill="%23d4a574"><animate attributeName="cy" values="36;46;36" dur="2s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0.4;1" dur="2s" repeatCount="indefinite"/></circle></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: opacity 0.4s ease !important;
}

.sticky.w-full.top-0.flex.items-center:hover::after {
    opacity: 0.55 !important;
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center {
    background: linear-gradient(135deg, rgba(255, 250, 240, 0.9), rgba(236, 219, 196, 0.7)) !important;
    border: 1.5px solid rgba(212, 165, 116, 0.4) !important;
    border-radius: 10px !important;
    padding: 4px 10px !important;
    box-shadow: 0 2px 8px rgba(184, 149, 106, 0.12) !important;
    transition: all 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
    border-color: rgba(212, 165, 116, 0.7) !important;
    box-shadow: 0 3px 12px rgba(184, 149, 106, 0.2) !important;
    background: linear-gradient(135deg, rgba(255, 252, 245, 0.95), rgba(240, 225, 205, 0.8)) !important;
}

/* 模型名称文字 */
#ai-model-selector .truncate.text-\[13px\] {
    color: #6b4f36 !important;
    font-weight: 600 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    letter-spacing: 0.3px !important;
}

/* 下拉箭头 */
#ai-model-selector .shrink-0.flex.items-center svg {
    color: #b8956a !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover svg {
    color: #8b6f4e !important;
    transform: translateY(1px) !important;
}

/* 设置按钮 */
#header-setting-button {
    color: #8b6f4e !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

#header-setting-button:hover {
    color: #6b4f36 !important;
    background: rgba(212, 165, 116, 0.15) !important;
    transform: rotate(30deg) !important;
}


/* ===== 底部栏 - 书写新篇 ===== */

/* 底部栏外层渐变背景 */
.bg-gradient-to-t {
    background: linear-gradient(
        to top, 
        #e3eff5 0%, 
        rgba(227, 239, 245, 0.95) 40%, 
        rgba(240, 248, 252, 0.6) 70%,
        transparent 100%
    ) !important;
}

/* 输入框容器 */
#ai-chat-bottom-input {
    background: linear-gradient(135deg, rgba(232, 244, 248, 0.95), rgba(200, 228, 240, 0.85)) !important;
    border: 2px solid rgba(126, 184, 212, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 -4px 20px rgba(126, 184, 212, 0.15),
        0 4px 16px rgba(126, 184, 212, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    transition: all 0.35s ease !important;
    position: relative !important;
    overflow: visible !important;
}

#ai-chat-bottom-input:focus-within {
    border-color: rgba(126, 184, 212, 0.8) !important;
    box-shadow: 
        0 -4px 24px rgba(126, 184, 212, 0.2),
        0 6px 24px rgba(126, 184, 212, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 0 4px rgba(126, 184, 212, 0.08) !important;
}

/* 输入框容器 - 羽毛笔SVG装饰 */
#ai-chat-bottom-input::before {
    content: '' !important;
    position: absolute !important;
    left: -18px !important;
    bottom: -8px !important;
    width: 40px !important;
    height: 52px !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100"><path d="M62 8 C58 5 66 2 64 9 C62 16 55 28 46 42 C37 56 28 68 22 78 L20 82 L24 80 C30 76 38 65 46 52 C54 39 60 24 62 14 C63 10 63 9 62 8 Z" fill="none" stroke="%237eb8d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M62 8 C60 6 64 3 64 9 C63 14 61 20 58 27" fill="%23a8d4e6" opacity="0.3"/><path d="M22 78 L20 82 L24 80 L22 78 Z" fill="%237eb8d4" opacity="0.7"/><path d="M46 42 C42 40 40 44 38 46" stroke="%239ec9dc" stroke-width="0.8" fill="none" opacity="0.5"/><path d="M38 56 C34 54 32 58 30 60" stroke="%239ec9dc" stroke-width="0.8" fill="none" opacity="0.5"/><circle cx="20" cy="84" r="2" fill="%237eb8d4" opacity="0"><animate attributeName="opacity" values="0;0.7;0" dur="3s" repeatCount="indefinite"/><animate attributeName="r" values="1;4;1" dur="3s" repeatCount="indefinite"/></circle><circle cx="18" cy="88" r="1" fill="%239ec9dc" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="3s" begin="0.8s" repeatCount="indefinite"/><animate attributeName="r" values="0.5;3;0.5" dur="3s" begin="0.8s" repeatCount="indefinite"/></circle><animateTransform attributeName="transform" type="rotate" values="0 40 50;-1 40 50;1 40 50;0 40 50" dur="5s" repeatCount="indefinite"/></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: opacity 0.4s ease !important;
}

#ai-chat-bottom-input:focus-within::before {
    opacity: 0.65 !important;
}

/* 输入框容器 - 右侧时光涟漪装饰 */
#ai-chat-bottom-input::after {
    content: '' !important;
    position: absolute !important;
    right: -14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="30" cy="30" r="8" fill="none" stroke="%237eb8d4" stroke-width="1.5"><animate attributeName="r" values="8;20;8" dur="4s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.8;0.1;0.8" dur="4s" repeatCount="indefinite"/></circle><circle cx="30" cy="30" r="8" fill="none" stroke="%239ec9dc" stroke-width="1"><animate attributeName="r" values="5;15;5" dur="4s" begin="1s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;0.1;0.6" dur="4s" begin="1s" repeatCount="indefinite"/></circle><circle cx="30" cy="30" r="3" fill="%237eb8d4" opacity="0.5"><animate attributeName="opacity" values="0.5;0.8;0.5" dur="2s" repeatCount="indefinite"/></circle></svg>') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: opacity 0.4s ease !important;
}

#ai-chat-bottom-input:focus-within::after {
    opacity: 0.55 !important;
}

/* 主输入框 */
#ai-chat-input {
    background: rgba(255, 255, 255, 0.5) !important;
    color: #2a3a4a !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    border-radius: 12px !important;
    transition: background 0.3s ease !important;
    caret-color: #7eb8d4 !important;
}

#ai-chat-input:focus {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* 占位符文字 */
#ai-chat-input::placeholder {
    color: #8badbf !important;
    font-style: italic !important;
    opacity: 0.7 !important;
    letter-spacing: 0.5px !important;
}

/* 文字选中效果 - 琥珀色呼应回忆主题 */
#ai-chat-input::selection {
    background: rgba(212, 165, 116, 0.3) !important;
    color: #2a3a4a !important;
}


/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
    .sticky.w-full.top-0.flex.items-center::after {
        width: 22px !important;
        height: 28px !important;
        right: 46px !important;
        opacity: 0.25 !important;
    }

    #ai-chat-bottom-input::before {
        width: 30px !important;
        height: 40px !important;
        left: -12px !important;
        bottom: -6px !important;
    }

    #ai-chat-bottom-input::after {
        width: 24px !important;
        height: 24px !important;
        right: -10px !important;
    }

    #ai-chat-bottom-input {
        border-radius: 12px !important;
    }
}

/* ===== 低动效偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    .sticky.w-full.top-0.flex.items-center::before {
        animation-duration: 15s !important;
    }

    #header-setting-button:hover {
        transform: rotate(15deg) !important;
    }
}

#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, rgba(255, 250, 240, 0.8), rgba(245, 230, 208, 0.6)) !important;
    color: #8b6f4e !important;
    border: 1px solid rgba(212, 165, 116, 0.3) !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(184, 149, 106, 0.08) !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    background: linear-gradient(135deg, rgba(255, 252, 248, 0.95), rgba(235, 215, 185, 0.85)) !important;
    color: #6b4f36 !important;
    border-color: rgba(212, 165, 116, 0.6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(212, 165, 116, 0.2) !important;
}

#ai-mod-button2 button.MuiButton-root svg {
    transition: transform 0.4s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
    transform: scale(1.15) rotate(5deg) !important;
    color: #d4a574 !important;
}

/* ===== 评论区主背景 - 回忆信笺 ===== */
/* 严禁修改布局属性，仅注入背景与色彩 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(180deg, #fdf8f2 0%, #f7ecd9 100%) !important;
}

/* 顶部标题与评分文字 */
div.text-lg.font-bold {
    color: #5a4a3a !important;
    text-shadow: 0 1px 2px rgba(212, 165, 116, 0.2) !important;
}
p.MuiTypography-body1.text-grey-600 {
    color: #8b6f4e !important;
}
span.text-orange-500 {
    color: #d4a574 !important;
    font-weight: bold !important;
}

/* ===== 评论区评分 - 自定义时光星芒SVG ===== */
/* 隐藏原生SVG路径，但保留其占位以维持布局 */
span.MuiRating-iconEmpty svg,
span.MuiRating-iconFilled svg {
    opacity: 0 !important; 
}

/* 注入新的空心星芒 (等待填满的时光) */
span.MuiRating-iconEmpty {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 C12 2 13.5 9.5 21 12 C13.5 14.5 12 22 12 22 C12 22 10.5 14.5 3 12 C10.5 9.5 12 2 12 2 Z" fill="none" stroke="%23d4a574" stroke-width="1.5" stroke-linejoin="round"/></svg>') !important;
    background-size: 80% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.2s ease !important;
}

/* 注入新的实心星芒 (闪耀的记忆) */
span.MuiRating-iconFilled {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><linearGradient id="gold" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" stop-color="%23ffebcc"/><stop offset="50%25" stop-color="%23d4a574"/><stop offset="100%25" stop-color="%23b88645"/></linearGradient></defs><path d="M12 1 C12 1 14 9 22 12 C14 15 12 23 12 23 C12 23 10 15 2 12 C10 9 12 1 12 1 Z" fill="url(%23gold)" filter="drop-shadow(0 0 2px rgba(212,165,116,0.5))"/><circle cx="12" cy="12" r="2" fill="%23ffffff" opacity="0.8"/></svg>') !important;
    background-size: 90% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    animation: starSparkle 2.5s infinite alternate !important;
}

@keyframes starSparkle {
    0% { filter: brightness(1); transform: scale(0.95); }
    100% { filter: brightness(1.15); transform: scale(1.05); }
}

/* ===== 评论输入区 ===== */
div.flex.flex-col.border-gray-200 {
    border-color: rgba(212, 165, 116, 0.3) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 12px !important;
}

textarea.rc-textarea {
    color: #3e3326 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif !important;
}
textarea.rc-textarea::placeholder {
    color: #bfa890 !important;
}

div.bg-gray-100.text-gray-500 {
    background: transparent !important;
    color: #a68a6d !important;
}

/* 发送按钮 - 呼应输入框的清新蓝调 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: linear-gradient(135deg, #d4e9f2, #b5d6e6) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(126, 184, 212, 0.3) !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: linear-gradient(135deg, #c0dfe8, #9ec9dc) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(126, 184, 212, 0.5) !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #4a758a !important;
}

/* 分割线 */
div.style_divider__mW0YX {
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.3), transparent) !important;
}

/* ===== 排序按钮 ===== */
button.MuiButton-containedPrimary {
    background: #d4a574 !important;
    color: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.4) !important;
}
button.MuiButton-outlinedPrimary {
    border-color: rgba(212, 165, 116, 0.5) !important;
    color: #b8956a !important;
    border-radius: 20px !important;
}
button.MuiButton-outlinedPrimary:hover {
    background: rgba(212, 165, 116, 0.1) !important;
    border-color: #d4a574 !important;
}

/* ===== 评论列表项 ===== */
/* 头像边框 */
div.group img.rounded-full {
    border: 2px solid #e6c89f !important;
    padding: 2px !important;
    background: #fff !important;
    transition: transform 0.3s ease !important;
}
div.group:hover img.rounded-full {
    transform: rotate(10deg) scale(1.05) !important;
    border-color: #d4a574 !important;
}

/* 用户名与内容 */
div.text-sm.text-grey-600 span.font-bold {
    color: #8b6f4e !important;
    font-size: 15px !important;
}
span.text-\[10px\] {
    background: rgba(212, 165, 116, 0.15) !important;
    color: #a68a6d !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
}
div.break-all {
    color: #3e3326 !important;
    line-height: 1.6 !important;
}
div.text-xs.text-grey-600 {
    color: #a68a6d !important;
}

/* 点赞与回复 */
button.text-gray-400 {
    color: #bfa890 !important;
    transition: all 0.2s ease !important;
}
button.text-gray-400:hover {
    color: #d4a574 !important;
    transform: scale(1.1) !important;
}
span.cursor-pointer {
    color: #8b6f4e !important;
    transition: color 0.2s ease !important;
}
span.cursor-pointer:hover {
    color: #d4a574 !important;
    text-decoration: underline !important;
}
div.ml-8.border-l {
    border-left-color: rgba(212, 165, 116, 0.3) !important;
}
/* ====== 基础隐藏 ====== */
.chatbox input[v]{position:fixed;top:-100px;left:-100px;opacity:0;pointer-events:none;width:0;height:0}
/* ====== 顶栏 ====== */
.chatbox nav[r="t"]{display:flex;align-items:center;column-gap:14px;flex-wrap:wrap;padding:0 60px 11px 4px;border-bottom:1.5px solid rgba(212,165,116,.35);margin-bottom:14px;position:relative;z-index:1}
.chatbox nav[r="t"] b{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:#7a5c3a;font-size:13px;letter-spacing:.3px;white-space:nowrap}
.chatbox nav[r="t"] b::before{content:'';display:inline-block;width:20px;height:20px;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}
.chatbox nav[r="t"] b[t="1"]{padding-right:13px;border-right:1px solid rgba(212,165,116,.25)}
.chatbox nav[r="t"] b[w]{margin-left:auto;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500;border:1px solid rgba(212,165,116,.2);background:rgba(255,249,240,.7)}
.chatbox nav[r="t"] b[t="1"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='%23b8956a' stroke-width='1.8'/><line x1='12' y1='12' x2='12' y2='7' stroke='%23b8956a' stroke-width='2' stroke-linecap='round'/><line x1='12' y1='12' x2='16' y2='14' stroke='%23d4a574' stroke-width='1.5' stroke-linecap='round'/><circle cx='12' cy='12' r='1.2' fill='%23b8956a'/></svg>")}
.chatbox nav[r="t"] b[t="2"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z' fill='%237ab8d4' opacity='.8'/><circle cx='12' cy='9' r='2.5' fill='%23f0f8ff'/></svg>")}
.chatbox nav[r="t"] b[w="sun"]{background:rgba(240,192,96,.12);border-color:rgba(240,192,96,.3)}
.chatbox nav[r="t"] b[w="sun"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4.5' fill='%23f0c060'/><g stroke='%23f0c060' stroke-width='1.8' stroke-linecap='round'><line x1='12' y1='2' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='22'/><line x1='2' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='22' y2='12'/><line x1='4.93' y1='4.93' x2='6.76' y2='6.76'/><line x1='17.24' y1='17.24' x2='19.07' y2='19.07'/><line x1='4.93' y1='19.07' x2='6.76' y2='17.24'/><line x1='17.24' y1='6.76' x2='19.07' y2='4.93'/></g></svg>");animation:cbSun 20s linear infinite}
@keyframes cbSun{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.chatbox nav[r="t"] b[w="cloud"]{background:rgba(176,200,216,.15);border-color:rgba(176,200,216,.3)}
.chatbox nav[r="t"] b[w="cloud"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='16' cy='7' r='4' fill='%23f0c060' opacity='.5'/><circle cx='9' cy='13' r='4' fill='%23b0c8d8'/><circle cx='14.5' cy='12' r='3.5' fill='%23b0c8d8'/><circle cx='6' cy='14.5' r='2.5' fill='%23b0c8d8'/><rect x='5' y='13' width='12' height='3.5' rx='1.5' fill='%23b0c8d8'/></svg>")}
.chatbox nav[r="t"] b[w="rain"]{background:rgba(122,184,212,.12);border-color:rgba(122,184,212,.3)}
.chatbox nav[r="t"] b[w="rain"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='7.5' r='3.5' fill='%23a0b8c8'/><circle cx='14' cy='6.5' r='4' fill='%23a0b8c8'/><rect x='5' y='8' width='13' height='3' rx='1.5' fill='%23a0b8c8'/><line x1='8' y1='14' x2='6.5' y2='19' stroke='%237ab8d4' stroke-width='1.5' stroke-linecap='round'/><line x1='12' y1='14' x2='10.5' y2='20' stroke='%237ab8d4' stroke-width='1.5' stroke-linecap='round'/><line x1='16' y1='14' x2='14.5' y2='18' stroke='%237ab8d4' stroke-width='1.5' stroke-linecap='round'/></svg>");animation:cbRain 1.5s ease-in-out infinite}
@keyframes cbRain{0%,100%{opacity:.75}50%{opacity:1;transform:translateY(1px)}}
.chatbox nav[r="t"] b[w="snow"]{background:rgba(192,210,228,.15);border-color:rgba(192,210,228,.3)}
.chatbox nav[r="t"] b[w="snow"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='7' r='3.5' fill='%23c0d0e0'/><circle cx='14' cy='6' r='4' fill='%23c0d0e0'/><rect x='5' y='7' width='13' height='3' rx='1.5' fill='%23c0d0e0'/><circle cx='7' cy='15' r='1.3' fill='%237ab8d4' opacity='.6'/><circle cx='12' cy='17.5' r='1.3' fill='%237ab8d4' opacity='.6'/><circle cx='17' cy='14.5' r='1.3' fill='%237ab8d4' opacity='.6'/><circle cx='9.5' cy='20.5' r='1' fill='%237ab8d4' opacity='.4'/><circle cx='15' cy='21' r='1' fill='%237ab8d4' opacity='.4'/></svg>");animation:cbSnow 2.5s ease-in-out infinite}
@keyframes cbSnow{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
.chatbox nav[r="t"] b[w="thunder"]{background:rgba(138,154,170,.15);border-color:rgba(138,154,170,.3)}
.chatbox nav[r="t"] b[w="thunder"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='9' cy='7' r='3.5' fill='%238a9aaa'/><circle cx='14' cy='6' r='4' fill='%238a9aaa'/><rect x='5' y='7' width='13' height='3' rx='1.5' fill='%238a9aaa'/><path d='M13 11l-2 5h3l-2.5 6' fill='none' stroke='%23f0c060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");animation:cbFlash 3s ease-in-out infinite}
@keyframes cbFlash{0%,84%,100%{opacity:1}87%{opacity:.35}90%{opacity:1}93%{opacity:.45}}
.chatbox nav[r="t"] b[w="fog"]{background:rgba(176,184,192,.15);border-color:rgba(176,184,192,.3)}
.chatbox nav[r="t"] b[w="fog"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><line x1='3' y1='7' x2='21' y2='7' stroke='%23b0b8c0' stroke-width='2' stroke-linecap='round' opacity='.4'/><line x1='5' y1='11' x2='19' y2='11' stroke='%23b0b8c0' stroke-width='2' stroke-linecap='round' opacity='.65'/><line x1='3' y1='15' x2='21' y2='15' stroke='%23b0b8c0' stroke-width='2' stroke-linecap='round' opacity='.5'/><line x1='7' y1='19' x2='17' y2='19' stroke='%23b0b8c0' stroke-width='1.5' stroke-linecap='round' opacity='.3'/></svg>");animation:cbFog 4s ease-in-out infinite}
@keyframes cbFog{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(3px);opacity:1}}
/* ====== 正文 ====== */
.chatbox section[r="m"]{position:relative;z-index:1;color:#5a4a3a;font-size:14.5px;line-height:1.85;padding:2px 2px 6px;min-height:60px}
.chatbox section[r="m"]>p{margin:8px 0 0}
/* ====== 底栏 ====== */
.chatbox nav[r="b"]{display:flex;justify-content:space-around;align-items:flex-start;padding:10px 0 4px;border-top:1.5px solid rgba(212,165,116,.3);margin-top:10px;position:relative;z-index:1;background:linear-gradient(90deg,rgba(212,165,116,.04),rgba(224,138,106,.04),rgba(192,160,64,.04),rgba(106,168,200,.04),rgba(160,128,184,.04));border-radius:0 0 12px 12px}
.chatbox nav[r="b"] label[n]{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:6px 5px 4px;border-radius:8px;transition:background .25s,transform .2s;gap:3px;user-select:none;-webkit-tap-highlight-color:transparent}
.chatbox nav[r="b"] label[n]:hover{background:rgba(180,160,140,.1);transform:translateY(-1px)}
.chatbox nav[r="b"] label[n]:active{transform:scale(.93)}
.chatbox nav[r="b"] label[n]::before{content:'';display:block;width:26px;height:26px;background-size:contain;background-repeat:no-repeat;background-position:center;transition:filter .25s,transform .25s}
.chatbox nav[r="b"] label[n]::after{font-size:10px;transition:color .2s,font-weight .2s;white-space:nowrap;letter-spacing:.2px}
.chatbox nav[r="b"] label[n="1"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4' fill='none' stroke='%23b8956a' stroke-width='1.8'/><path d='M5 21c0-3.9 3.1-7 7-7s7 3.1 7 7' fill='none' stroke='%23b8956a' stroke-width='1.8' stroke-linecap='round'/></svg>")}
.chatbox nav[r="b"] label[n="1"]::after{content:'主角信息';color:#b8956a}
/* [已更新] 人际交互图标 — 双人连弧 */
.chatbox nav[r="b"] label[n="2"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='8' cy='8' r='2.8' fill='none' stroke='%23e08a6a' stroke-width='1.6'/><path d='M3 19.5c0-3 2.2-5.5 5-5.5' fill='none' stroke='%23e08a6a' stroke-width='1.6' stroke-linecap='round'/><circle cx='16' cy='8' r='2.8' fill='none' stroke='%23e08a6a' stroke-width='1.6'/><path d='M21 19.5c0-3-2.2-5.5-5-5.5' fill='none' stroke='%23e08a6a' stroke-width='1.6' stroke-linecap='round'/><path d='M8 14q4-3 8 0' fill='none' stroke='%23e8967a' stroke-width='1.3' stroke-linecap='round'/><circle cx='12' cy='12.2' r='1' fill='%23e8967a' opacity='.5'/></svg>")}
.chatbox nav[r="b"] label[n="2"]::after{content:'人际交互';color:#e08a6a}
.chatbox nav[r="b"] label[n="3"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='9' width='18' height='11' rx='2' fill='none' stroke='%23c0a040' stroke-width='1.8'/><path d='M8 9V7a4 4 0 018 0v2' fill='none' stroke='%23c0a040' stroke-width='1.8'/><line x1='3' y1='14' x2='21' y2='14' stroke='%23d4b060' stroke-width='1.2'/><circle cx='12' cy='14' r='1.5' fill='%23d4b060'/></svg>")}
.chatbox nav[r="b"] label[n="3"]::after{content:'商业网络';color:#c0a040}
.chatbox nav[r="b"] label[n="4"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='13' cy='13' r='8' fill='none' stroke='%236aa8c8' stroke-width='1.5'/><path d='M13 9v4l3 2' fill='none' stroke='%236aa8c8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/><path d='M5 6L3 4v4h4' fill='none' stroke='%237ab8d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.chatbox nav[r="b"] label[n="4"]::after{content:'过往记忆';color:#6aa8c8}
.chatbox nav[r="b"] label[n="5"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22v-10' stroke='%23a080b8' stroke-width='1.8' stroke-linecap='round'/><path d='M12 12l-6-8' stroke='%23a080b8' stroke-width='1.8' stroke-linecap='round'/><path d='M12 12l6-8' stroke='%23a080b8' stroke-width='1.8' stroke-linecap='round'/><circle cx='6' cy='4' r='2' fill='%23d4a574' opacity='.5'/><circle cx='18' cy='4' r='2' fill='%237ab8d4' opacity='.5'/></svg>")}
.chatbox nav[r="b"] label[n="5"]::after{content:'当前抉择';color:#a080b8}
/* ====== 选中态 ====== */
.chatbox input[v="1"]:checked~nav[r="b"] label[n="1"]{background:rgba(212,165,116,.22);transform:translateY(-2px)}
.chatbox input[v="2"]:checked~nav[r="b"] label[n="2"]{background:rgba(224,138,106,.22);transform:translateY(-2px)}
.chatbox input[v="3"]:checked~nav[r="b"] label[n="3"]{background:rgba(192,160,64,.18);transform:translateY(-2px)}
.chatbox input[v="4"]:checked~nav[r="b"] label[n="4"]{background:rgba(106,168,200,.22);transform:translateY(-2px)}
.chatbox input[v="5"]:checked~nav[r="b"] label[n="5"]{background:rgba(160,128,184,.22);transform:translateY(-2px)}
.chatbox input[v="1"]:checked~nav[r="b"] label[n="1"]::before{filter:drop-shadow(0 0 4px rgba(184,149,106,.6));transform:scale(1.1)}
.chatbox input[v="2"]:checked~nav[r="b"] label[n="2"]::before{filter:drop-shadow(0 0 4px rgba(224,138,106,.5));transform:scale(1.1)}
.chatbox input[v="3"]:checked~nav[r="b"] label[n="3"]::before{filter:drop-shadow(0 0 4px rgba(192,160,64,.5));transform:scale(1.1)}
.chatbox input[v="4"]:checked~nav[r="b"] label[n="4"]::before{filter:drop-shadow(0 0 4px rgba(106,168,200,.5));transform:scale(1.1)}
.chatbox input[v="5"]:checked~nav[r="b"] label[n="5"]::before{filter:drop-shadow(0 0 4px rgba(160,128,184,.5));transform:scale(1.1)}
.chatbox input[v="1"]:checked~nav[r="b"] label[n="1"]::after,
.chatbox input[v="2"]:checked~nav[r="b"] label[n="2"]::after,
.chatbox input[v="3"]:checked~nav[r="b"] label[n="3"]::after,
.chatbox input[v="4"]:checked~nav[r="b"] label[n="4"]::after,
.chatbox input[v="5"]:checked~nav[r="b"] label[n="5"]::after{font-weight:700}
/* ====== 关闭按钮 ====== */
.chatbox nav[r="b"]+label{display:none;text-align:right;padding:6px 8px 2px;cursor:pointer}
.chatbox nav[r="b"]+label::after{content:'✕ 收起';font-size:11px;color:#b8956a;letter-spacing:.3px;transition:color .2s}
.chatbox nav[r="b"]+label:hover::after{color:#7a5c3a;text-decoration:underline}
.chatbox input[v]:not([v="0"]):checked~nav[r="b"]+label{display:block;animation:cbpShow .25s ease-out}
/* ====== 面板通用 ====== */
.chatbox t[p]{display:none;border-radius:10px;padding:12px 16px;margin:4px 0 2px;position:relative;z-index:2;border-left:3px solid}
.chatbox t[p="1"]{background:linear-gradient(145deg,#fff9f0,#fff3e0);border-left-color:#d4a574;box-shadow:0 2px 10px rgba(212,165,116,.1)}
.chatbox t[p="2"]{background:linear-gradient(145deg,#fff5f0,#ffe8e0);border-left-color:#e08a6a;box-shadow:0 2px 10px rgba(224,138,106,.1)}
.chatbox t[p="3"]{background:linear-gradient(145deg,#fffbf0,#f8f0d8);border-left-color:#c0a040;box-shadow:0 2px 10px rgba(192,160,64,.1)}
.chatbox t[p="4"]{background:linear-gradient(145deg,#f0f7ff,#e4f0fa);border-left-color:#6aa8c8;box-shadow:0 2px 10px rgba(106,168,200,.1)}
.chatbox t[p="5"]{background:linear-gradient(145deg,#f6f0ff,#ede0f8);border-left-color:#a080b8;box-shadow:0 2px 10px rgba(160,128,184,.1)}
.chatbox t[p] b{display:block;font-size:14px;font-weight:700;border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:6px;margin-bottom:8px;letter-spacing:.5px}
.chatbox t[p="1"] b{color:#8a6a4a}
.chatbox t[p="2"] b{color:#b06848}
.chatbox t[p="3"] b{color:#8a7830}
.chatbox t[p="4"] b{color:#4a8aa8}
.chatbox t[p="5"] b{color:#7a5898}
.chatbox t[p] b::before{content:'';display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
.chatbox t[p="1"] b::before{background:#d4a574}
.chatbox t[p="2"] b::before{background:#e08a6a}
.chatbox t[p="3"] b::before{background:#c0a040}
.chatbox t[p="4"] b::before{background:#6aa8c8}
.chatbox t[p="5"] b::before{background:#a080b8}
.chatbox t[p] p{color:#6a5a4a;font-size:12.5px;line-height:1.7;margin:0}
.chatbox input[v="1"]:checked~t[p="1"],
.chatbox input[v="2"]:checked~t[p="2"],
.chatbox input[v="3"]:checked~t[p="3"],
.chatbox input[v="4"]:checked~t[p="4"],
.chatbox input[v="5"]:checked~t[p="5"]{display:block;animation:cbpShow .3s cubic-bezier(.22,.61,.36,1)}
@keyframes cbpShow{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.chatbox t[p]::-webkit-scrollbar{width:4px}
.chatbox t[p]::-webkit-scrollbar-track{background:transparent}
.chatbox t[p]::-webkit-scrollbar-thumb{background:rgba(180,160,140,.4);border-radius:2px}
/* ====== 选项列表(面板5) ====== */
.chatbox t[p="5"] ol{list-style:none;padding:0;margin:6px 0 0;counter-reset:cbChoice}
.chatbox t[p="5"] ol li{counter-increment:cbChoice;position:relative;padding:9px 38px 9px 42px;margin:5px 0;border-radius:8px;background:rgba(160,128,184,.06);border:1px solid rgba(160,128,184,.15);color:#5a4a5a;font-size:13px;line-height:1.6;cursor:default;transition:background .25s ease,border-color .25s ease,transform .25s ease,opacity .25s ease}
.chatbox t[p="5"] ol li:first-child{margin-top:0}
.chatbox t[p="5"] ol li:last-child{margin-bottom:0}
.chatbox t[p="5"] ol li::before{content:counter(cbChoice);position:absolute;left:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:rgba(160,128,184,.1);border:1.5px solid rgba(160,128,184,.3);text-align:center;line-height:22px;font-size:11px;font-weight:700;color:#a080b8;transition:background .25s,color .25s,border-color .25s,transform .25s}
.chatbox t[p="5"] ol li::after{content:'';position:absolute;right:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1L7.5 4.5 11 6 7.5 7.5 6 11 4.5 7.5 1 6 4.5 4.5z' fill='%23a080b8' opacity='.45'/></svg>") center/contain no-repeat;opacity:.4;transition:transform .3s ease,opacity .3s ease}
/* 选项入场动画 */
.chatbox input[v="5"]:checked~t[p="5"] ol li{animation:cbChoiceIn .35s cubic-bezier(.22,.61,.36,1) backwards}
.chatbox input[v="5"]:checked~t[p="5"] ol li:nth-child(2){animation-delay:.06s}
.chatbox input[v="5"]:checked~t[p="5"] ol li:nth-child(3){animation-delay:.12s}
.chatbox input[v="5"]:checked~t[p="5"] ol li:nth-child(4){animation-delay:.18s}
.chatbox input[v="5"]:checked~t[p="5"] ol li:nth-child(5){animation-delay:.24s}
@keyframes cbChoiceIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
/* 星标持续旋转 */
.chatbox input[v="5"]:checked~t[p="5"] ol li::after{animation:cbChoiceStar 3s ease-in-out infinite}
.chatbox input[v="5"]:checked~t[p="5"] ol li:nth-child(2)::after{animation-delay:.4s}
.chatbox input[v="5"]:checked~t[p="5"] ol li:nth-child(3)::after{animation-delay:.8s}
.chatbox input[v="5"]:checked~t[p="5"] ol li:nth-child(4)::after{animation-delay:1.2s}
.chatbox input[v="5"]:checked~t[p="5"] ol li:nth-child(5)::after{animation-delay:1.6s}
@keyframes cbChoiceStar{0%,100%{transform:translateY(-50%) rotate(0deg);opacity:.4}50%{transform:translateY(-50%) rotate(180deg);opacity:.85}}
/* 悬停高亮 */
.chatbox t[p="5"] ol:hover li:not(:hover){opacity:.5;transform:scale(.97)}
.chatbox t[p="5"] ol li:hover{background:rgba(160,128,184,.18);border-color:rgba(160,128,184,.4);transform:translateX(4px)}
.chatbox t[p="5"] ol li:hover::before{background:#a080b8;color:#fff;border-color:#a080b8;transform:translateY(-50%) scale(1.1)}
.chatbox t[p="5"] ol li:hover::after{opacity:1;transform:translateY(-50%) scale(1.4) rotate(72deg)}
/* 悬停时覆盖星标动画 */
.chatbox input[v="5"]:checked~t[p="5"] ol li:hover::after{animation:none;opacity:1;transform:translateY(-50%) scale(1.4) rotate(72deg)}
/* 底部提示语 */
.chatbox t[p="5"] ol::after{content:'✦ 你也可以选择自由行动或者跳过一段时间';display:block;margin-top:10px;padding-top:8px;border-top:1px dashed rgba(160,128,184,.2);font-size:11px;color:#9a8aaa;font-style:italic;text-align:center;letter-spacing:.2px;line-height:1.6}
/* ====== 响应式 ====== */
@media(max-width:380px){
.chatbox nav[r="b"] label[n]::after{font-size:9px}
.chatbox nav[r="b"] label[n]::before{width:22px;height:22px}
.chatbox nav[r="t"]{gap:8px;padding-right:50px}
.chatbox nav[r="t"] b{font-size:12px}
.chatbox nav[r="t"] b::before{width:17px;height:17px}
.chatbox t[p]{padding:10px 12px}
.chatbox t[p="5"] ol li{padding:8px 32px 8px 36px;font-size:12px}
.chatbox t[p="5"] ol li::before{width:20px;height:20px;line-height:20px;font-size:10px;left:8px}
.chatbox t[p="5"] ol li::after{width:12px;height:12px;right:8px}
.chatbox t[p="5"] ol::after{font-size:10px}
}
/* ====== 蝴蝶效应系统 ====== */
/* 蝴蝶图标 — 文档流内，排在天气后面 */
.chatbox nav[r="t"]:has(bf e)::before{content:'';width:18px;height:18px;flex-shrink:0;order:10;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><line x1='12' y1='6' x2='12' y2='19' stroke='%239080a8' stroke-width='1.3' stroke-linecap='round'/><path d='M12 10C9 6 4 7 4 10s6 5 8 2z' fill='%23a080b8' opacity='.45'/><path d='M12 10c3-4 8-3 8 0s-6 5-8 2z' fill='%237a9abf' opacity='.45'/><path d='M12 13c-2-1-5 0-4 2s4 1 4 0z' fill='%23a080b8' opacity='.3'/><path d='M12 13c2-1 5 0 4 2s-4 1-4 0z' fill='%237a9abf' opacity='.3'/><path d='M10.5 5q1.5-2 3 0' fill='none' stroke='%239080a8' stroke-width='.8' stroke-linecap='round'/></svg>") center/contain no-repeat;opacity:.3;transition:opacity .3s ease,transform .3s ease}
.chatbox nav[r="t"]:has(bf e):hover::before{opacity:.75;animation:bfWing 1.8s ease-in-out .2s infinite}
@keyframes bfWing{0%,100%{transform:scale(1) rotate(0deg)}30%{transform:scale(1.12) rotate(5deg)}60%{transform:scale(.95) rotate(-3deg)}}
/* bf 容器 */
.chatbox nav[r="t"] bf{flex-basis:100%;order:99;position:relative;display:flex;flex-direction:column;counter-reset:bfEvt;max-height:0;opacity:0;overflow:hidden;background:linear-gradient(165deg,rgba(246,240,255,.96),rgba(230,224,245,.93));border-radius:8px;box-shadow:0 2px 12px rgba(120,90,160,.08);border:1px solid rgba(160,128,184,.12);margin:0 -56px 0 0;padding:0 12px;transition:max-height .3s .2s ease,opacity .25s .2s ease,padding .25s .2s ease,margin .25s .2s ease}
.chatbox nav[r="t"]:hover bf{max-height:300px;opacity:1;padding:10px 12px 12px;margin:10px -56px 0 0;overflow-y:auto;transition:max-height .4s .06s cubic-bezier(.22,.61,.36,1),opacity .28s .06s ease,padding .28s .06s ease,margin .28s .06s ease}
.chatbox nav[r="t"] bf:not(:has(e)){display:none}
/* bf 标题 */
.chatbox nav[r="t"] bf::before{content:'✦ 蝴蝶效应';display:block;font-size:11.5px;font-weight:700;color:#7a5a8a;letter-spacing:.8px;padding-bottom:6px;margin-bottom:6px;border-bottom:1px dashed rgba(160,128,184,.18)}
/* bf 装饰水印 */
.chatbox nav[r="t"] bf::after{content:'';position:absolute;right:6px;bottom:6px;width:36px;height:36px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 10C9 6 4 7 4 10s6 5 8 2z' fill='%23a080b8'/><path d='M12 10c3-4 8-3 8 0s-6 5-8 2z' fill='%237a9abf'/><path d='M12 13c-2-1-5 0-4 2s4 1 4 0z' fill='%23a080b8'/><path d='M12 13c2-1 5 0 4 2s-4 1-4 0z' fill='%237a9abf'/></svg>") center/contain no-repeat;opacity:.04;pointer-events:none}
/* 事件卡片 */
.chatbox nav[r="t"] bf e{display:block;position:relative;counter-increment:bfEvt;padding:7px 10px 7px 28px;margin:0 0 6px 8px;border-left:1.5px solid rgba(160,128,184,.2);font-size:12px;line-height:1.65;color:#5a4a6a;border-radius:0 6px 6px 0;background:rgba(255,255,255,.45);transition:background .25s ease,transform .25s ease}
.chatbox nav[r="t"] bf e:last-of-type{border-left-color:transparent;margin-bottom:0}
/* 事件节点编号 */
.chatbox nav[r="t"] bf e::before{content:counter(bfEvt);position:absolute;left:-9px;top:8px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#a080b8,#7a9abf);color:#fff;font-size:9px;font-weight:700;text-align:center;line-height:16px;box-shadow:0 1px 4px rgba(120,90,160,.2);z-index:1;transition:box-shadow .25s,transform .25s}
/* 时间地点标签 */
.chatbox nav[r="t"] bf e::after{content:attr(t);display:block;font-size:10px;color:#9a8aaa;margin-top:3px;font-style:italic;letter-spacing:.2px}
/* 事件入场动画 */
.chatbox nav[r="t"]:hover bf e{animation:bfIn .3s cubic-bezier(.22,.61,.36,1) backwards}
.chatbox nav[r="t"]:hover bf e:nth-of-type(2){animation-delay:.07s}
.chatbox nav[r="t"]:hover bf e:nth-of-type(3){animation-delay:.14s}
.chatbox nav[r="t"]:hover bf e:nth-of-type(4){animation-delay:.21s}
.chatbox nav[r="t"]:hover bf e:nth-of-type(5){animation-delay:.28s}
@keyframes bfIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
/* 事件卡片悬停 */
.chatbox nav[r="t"] bf e:hover{background:rgba(255,255,255,.75);transform:translateX(3px)}
.chatbox nav[r="t"] bf e:hover::before{box-shadow:0 1px 6px rgba(120,90,160,.35);transform:scale(1.15)}
/* 滚动条 */
.chatbox nav[r="t"] bf::-webkit-scrollbar{width:3px}
.chatbox nav[r="t"] bf::-webkit-scrollbar-track{background:transparent}
.chatbox nav[r="t"] bf::-webkit-scrollbar-thumb{background:rgba(160,128,184,.3);border-radius:2px}
/* 蝴蝶效应 响应式 */
@media(max-width:380px){
.chatbox nav[r="t"]:has(bf e)::before{width:15px;height:15px}
.chatbox nav[r="t"]:hover bf{max-height:200px;padding:8px 10px 10px}
.chatbox nav[r="t"] bf::before{font-size:10.5px}
.chatbox nav[r="t"] bf e{font-size:11px;padding:6px 8px 6px 24px}
.chatbox nav[r="t"] bf e::before{width:14px;height:14px;font-size:8px;line-height:14px;left:-8px;top:7px}
.chatbox nav[r="t"] bf e::after{font-size:9px}
.chatbox nav[r="t"] bf::after{width:28px;height:28px}
}
/* ====== 面板1·角色档案 ====== */
/* -- 标题装饰花纹 -- */
.chatbox t[p="1"] b{position:relative;padding-bottom:10px;margin-bottom:12px}
.chatbox t[p="1"] b::after{content:'';display:block;margin-top:8px;height:12px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'><path d='M20 6Q30 2 40 6T60 6T80 6T100 6T120 6T140 6T160 6T180 6' fill='none' stroke='%23d4a574' stroke-width='.8' opacity='.5'/><circle cx='100' cy='6' r='2.5' fill='none' stroke='%23d4a574' stroke-width='.8' opacity='.6'/><circle cx='100' cy='6' r='.8' fill='%23d4a574' opacity='.5'/><path d='M90 6l4-3.5 6 0 4 3.5-4 3.5-6 0z' fill='none' stroke='%23d4a574' stroke-width='.6' opacity='.35'/><line x1='0' y1='6' x2='85' y2='6' stroke='%23d4a574' stroke-width='.4' opacity='.25'/><line x1='115' y1='6' x2='200' y2='6' stroke='%23d4a574' stroke-width='.4' opacity='.25'/></svg>") center/contain no-repeat}
/* -- 头部区域 -- */
.chatbox t[p="1"] nav[k="h"]{display:flex;align-items:center;gap:0;margin:0 0 14px;position:relative;padding:16px 14px 14px 68px;border-radius:40px 16px 16px 40px;background:linear-gradient(135deg,rgba(212,165,116,.1),rgba(212,165,116,.03))}
.chatbox t[p="1"] nav[k="h"]::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><circle cx='25' cy='25' r='22' fill='none' stroke='%23d4a574' stroke-width='.6' stroke-dasharray='3 4' opacity='.45'><animateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='25s' repeatCount='indefinite'/></circle><circle cx='25' cy='25' r='16' fill='none' stroke='%23d4a574' stroke-width='.4' stroke-dasharray='1.5 5' opacity='.3'><animateTransform attributeName='transform' type='rotate' from='360 25 25' to='0 25 25' dur='18s' repeatCount='indefinite'/></circle><circle cx='25' cy='20' r='5.5' fill='%23d4a574' opacity='.18'/><path d='M14 38c0-6 5-10.5 11-10.5s11 4.5 11 10.5' fill='%23d4a574' opacity='.12'/><path d='M18 3l1.2 2.5-1.2 2.5' fill='none' stroke='%23d4a574' stroke-width='.5' opacity='.25'/><path d='M32 3l-1.2 2.5 1.2 2.5' fill='none' stroke='%23d4a574' stroke-width='.5' opacity='.25'/><circle cx='8' cy='14' r='.7' fill='%23d4a574' opacity='.2'/><circle cx='42' cy='14' r='.7' fill='%23d4a574' opacity='.2'/><circle cx='6' cy='30' r='.5' fill='%23d4a574' opacity='.15'/><circle cx='44' cy='30' r='.5' fill='%23d4a574' opacity='.15'/></svg>") center/contain no-repeat}
.chatbox t[p="1"] nav[k="h"] i{font-style:normal;display:inline-flex;align-items:center}
.chatbox t[p="1"] nav[k="h"] i[k="n"]{font-size:17px;font-weight:800;color:#7a5c3a;letter-spacing:1.2px;margin-right:10px;text-shadow:0 1px 2px rgba(212,165,116,.12)}
.chatbox t[p="1"] nav[k="h"] i[k="g"]{font-size:11.5px;color:#a08060;padding:2px 10px;border-radius:20px;background:rgba(212,165,116,.1);border:1px solid rgba(212,165,116,.18);margin-right:10px}
.chatbox t[p="1"] nav[k="h"] i[k="bd"]{font-size:11px;color:#a89878;letter-spacing:.3px}
.chatbox t[p="1"] nav[k="h"] i[k="bd"]::before{content:'';display:inline-block;width:12px;height:12px;margin-right:3px;vertical-align:-1px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='4' width='12' height='10' rx='1.8' fill='none' stroke='%23b8a080' stroke-width='1.2'/><line x1='5' y1='2' x2='5' y2='5' stroke='%23b8a080' stroke-width='1.2' stroke-linecap='round'/><line x1='11' y1='2' x2='11' y2='5' stroke='%23b8a080' stroke-width='1.2' stroke-linecap='round'/><line x1='2' y1='7.5' x2='14' y2='7.5' stroke='%23b8a080' stroke-width='.6' opacity='.45'/></svg>") center/contain no-repeat}
/* -- 描述区(外貌 / 服装) -- */
.chatbox t[p="1"] p[k="ap"],
.chatbox t[p="1"] p[k="cl"]{position:relative;padding:10px 14px 10px 38px;margin:6px 0;font-size:12.5px;line-height:1.8;color:#6a5a4a;border-radius:16px 8px 8px 16px;transition:background .3s,transform .25s}
.chatbox t[p="1"] p[k="ap"]{background:rgba(212,165,116,.05);border:1px solid rgba(212,165,116,.12)}
.chatbox t[p="1"] p[k="cl"]{background:rgba(180,140,100,.04);border:1px solid rgba(180,140,100,.1)}
.chatbox t[p="1"] p[k="ap"]:hover,
.chatbox t[p="1"] p[k="cl"]:hover{transform:translateX(3px);background:rgba(212,165,116,.11)}
.chatbox t[p="1"] p[k="ap"]::before,
.chatbox t[p="1"] p[k="cl"]::before{position:absolute;left:10px;top:10px;font-size:10px;font-weight:700;writing-mode:vertical-rl;letter-spacing:2px;opacity:.5}
.chatbox t[p="1"] p[k="ap"]::before{content:'外貌';color:#c09060}
.chatbox t[p="1"] p[k="cl"]::before{content:'服装';color:#a08868}
.chatbox t[p="1"] p[k="ap"]::after,
.chatbox t[p="1"] p[k="cl"]::after{content:'';position:absolute;left:30px;top:8px;bottom:8px;width:1px;background:rgba(212,165,116,.2)}
/* -- 外貌/服装之间菱形分隔 -- */
.chatbox t[p="1"] p[k="ap"]+p[k="cl"]{margin-top:14px}
.chatbox t[p="1"] p[k="ap"]+p[k="cl"]::after{content:'';position:absolute;left:30px;top:8px;bottom:8px;width:1px;background:rgba(212,165,116,.2)}
.chatbox t[p="1"] p[k="ap"]+p[k="cl"]~nav[k="dm"]{display:none}
/* 菱形装饰用外貌的底部margin模拟 */
.chatbox t[p="1"] p[k="ap"]{margin-bottom:0}
.chatbox t[p="1"] p[k="ap"]+p[k="cl"]{margin-top:16px;position:relative}
.chatbox t[p="1"] p[k="ap"]+p[k="cl"] i[k="dm"]{display:none}
/* -- 中间装饰用t[p=1]的子选择做 -- */
.chatbox t[p="1"] nav[k="sep"]{text-align:center;height:10px;margin:2px 0;line-height:10px;position:relative}
.chatbox t[p="1"] nav[k="sep"]::before{content:'';display:inline-block;width:100px;height:10px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'><line x1='0' y1='5' x2='38' y2='5' stroke='%23d4a574' stroke-width='.4' opacity='.3'/><line x1='62' y1='5' x2='100' y2='5' stroke='%23d4a574' stroke-width='.4' opacity='.3'/><path d='M45 5l5-4 5 4-5 4z' fill='none' stroke='%23d4a574' stroke-width='.7' opacity='.4'/><circle cx='50' cy='5' r='1' fill='%23d4a574' opacity='.35'/></svg>") center/contain no-repeat}
/* -- 性格(段落式) -- */
.chatbox t[p="1"] p[k="ch"]{position:relative;padding:9px 14px 9px 14px;margin:8px 0;font-size:12.5px;line-height:1.8;color:#6a5a4a;border-left:2px solid rgba(212,165,116,.25);border-radius:0 10px 10px 0;background:rgba(212,165,116,.04);transition:border-color .3s}
.chatbox t[p="1"] p[k="ch"]::before{content:'性格';font-size:10px;font-weight:700;color:#b89870;letter-spacing:1px;display:block;margin-bottom:3px}
.chatbox t[p="1"] p[k="ch"]::after{content:'';position:absolute;right:10px;top:8px;width:22px;height:22px;opacity:.15;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='%23d4a574'/></svg>") center/contain no-repeat}
.chatbox t[p="1"] p[k="ch"]:hover{border-color:rgba(212,165,116,.5)}
/* -- 持有物品 -- */
.chatbox t[p="1"] nav[k="it"]{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px;padding:0 2px;position:relative}
.chatbox t[p="1"] nav[k="it"]::before{content:'持有物品';font-size:10px;font-weight:700;color:#8a7a5a;letter-spacing:1px;width:100%;display:block;margin-bottom:3px;padding-left:2px}
.chatbox t[p="1"] nav[k="it"] i{font-style:normal;font-size:11.5px;color:#6a6050;padding:4px 12px 4px 20px;border-radius:4px 16px 16px 4px;background:rgba(192,175,140,.07);border:1px solid rgba(192,175,140,.18);position:relative;cursor:default;transition:all .3s cubic-bezier(.22,.61,.36,1)}
.chatbox t[p="1"] nav[k="it"] i::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:rgba(192,168,100,.35);border:1px solid rgba(192,168,100,.3);transition:background .3s,transform .3s}
.chatbox t[p="1"] nav[k="it"] i:hover{background:rgba(192,175,140,.2);border-color:rgba(192,175,140,.4);transform:translateY(-2px);box-shadow:0 4px 10px rgba(180,160,120,.12)}
.chatbox t[p="1"] nav[k="it"] i:hover::before{background:rgba(192,168,100,.7);transform:translateY(-50%) scale(1.3)}
/* -- 物品Tooltip -- */
.chatbox t[p="1"] nav[k="it"] i::after{content:attr(c) '  ·  ' attr(d);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:rgba(52,42,32,.92);color:#f0e8d8;padding:7px 12px;border-radius:8px;font-size:11px;line-height:1.6;white-space:normal;width:max-content;max-width:190px;pointer-events:none;opacity:0;transition:opacity .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1);z-index:20;box-shadow:0 4px 16px rgba(0,0,0,.2);letter-spacing:.2px;text-align:center}
.chatbox t[p="1"] nav[k="it"] i:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* tooltip箭头 */
.chatbox t[p="1"] nav[k="it"] i{overflow:visible}
/* -- 资产条 -- */
.chatbox t[p="1"] p[k="as"]{margin:6px 0 2px;padding:10px 14px;border-radius:8px 24px 24px 8px;background:linear-gradient(90deg,rgba(192,168,80,.06),rgba(212,185,100,.13),rgba(192,168,80,.05));border:1px solid rgba(192,168,80,.18);font-size:12.5px;color:#7a6830;line-height:1.7;position:relative;overflow:hidden;transition:border-color .3s}
.chatbox t[p="1"] p[k="as"]::before{content:'持有资产';font-size:10px;font-weight:700;color:#b09840;letter-spacing:1px;display:block;margin-bottom:3px}
.chatbox t[p="1"] p[k="as"]::after{content:'';position:absolute;right:-12px;top:-12px;width:56px;height:56px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'><circle cx='28' cy='28' r='20' fill='none' stroke='%23c8a840' stroke-width='.8' opacity='.12'><animateTransform attributeName='transform' type='rotate' from='0 28 28' to='360 28 28' dur='30s' repeatCount='indefinite'/></circle><circle cx='28' cy='28' r='12' fill='none' stroke='%23c8a840' stroke-width='.5' stroke-dasharray='2 3' opacity='.1'><animateTransform attributeName='transform' type='rotate' from='360 28 28' to='0 28 28' dur='20s' repeatCount='indefinite'/></circle><text x='28' y='32' text-anchor='middle' font-size='14' fill='%23c8a840' opacity='.1' font-weight='700'>¥</text></svg>") center/contain no-repeat}
.chatbox t[p="1"] p[k="as"]:hover{border-color:rgba(192,168,80,.4)}
/* -- 面板底部收尾花纹 -- */
.chatbox t[p="1"]::after{content:'';display:block;margin-top:10px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14'><line x1='10' y1='7' x2='85' y2='7' stroke='%23d4a574' stroke-width='.4' opacity='.2'/><line x1='135' y1='7' x2='210' y2='7' stroke='%23d4a574' stroke-width='.4' opacity='.2'/><path d='M92 7q4-5 9 0' fill='none' stroke='%23d4a574' stroke-width='.6' opacity='.3'/><path d='M101 7q4-4 8 0' fill='none' stroke='%23d4a574' stroke-width='.6' opacity='.3'/><path d='M109 7q4-5 9 0' fill='none' stroke='%23d4a574' stroke-width='.6' opacity='.3'/><path d='M100 7q5 5 10 0' fill='none' stroke='%23d4a574' stroke-width='.5' opacity='.2'/><circle cx='89' cy='7' r='1.2' fill='none' stroke='%23d4a574' stroke-width='.6' opacity='.3'/><circle cx='121' cy='7' r='1.2' fill='none' stroke='%23d4a574' stroke-width='.6' opacity='.3'/><circle cx='110' cy='7' r='.6' fill='%23d4a574' opacity='.2'/></svg>") center/contain no-repeat}
/* -- 入场动画 -- */
.chatbox input[v="1"]:checked~t[p="1"] nav[k="h"]{animation:cbpShow .35s cubic-bezier(.22,.61,.36,1) backwards}
.chatbox input[v="1"]:checked~t[p="1"] p[k="ap"]{animation:cbp1Slide .35s cubic-bezier(.22,.61,.36,1) .05s backwards}
.chatbox input[v="1"]:checked~t[p="1"] nav[k="sep"]{animation:cbp1Slide .3s cubic-bezier(.22,.61,.36,1) .08s backwards}
.chatbox input[v="1"]:checked~t[p="1"] p[k="cl"]{animation:cbp1Slide .35s cubic-bezier(.22,.61,.36,1) .1s backwards}
.chatbox input[v="1"]:checked~t[p="1"] p[k="ch"]{animation:cbp1Slide .35s cubic-bezier(.22,.61,.36,1) .14s backwards}
.chatbox input[v="1"]:checked~t[p="1"] nav[k="it"]{animation:cbp1Slide .35s cubic-bezier(.22,.61,.36,1) .18s backwards}
.chatbox input[v="1"]:checked~t[p="1"] p[k="as"]{animation:cbp1Slide .35s cubic-bezier(.22,.61,.36,1) .22s backwards}
@keyframes cbp1Slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* -- 响应式 -- */
@media(max-width:380px){
.chatbox t[p="1"] nav[k="h"]{padding:12px 8px 10px 56px;border-radius:30px 12px 12px 30px}
.chatbox t[p="1"] nav[k="h"]::before{width:40px;height:40px;left:6px}
.chatbox t[p="1"] nav[k="h"] i[k="n"]{font-size:14px;margin-right:6px}
.chatbox t[p="1"] nav[k="h"] i[k="g"]{font-size:10.5px;padding:2px 7px}
.chatbox t[p="1"] nav[k="h"] i[k="bd"]{font-size:10px}
.chatbox t[p="1"] p[k="ap"],
.chatbox t[p="1"] p[k="cl"]{padding:8px 10px 8px 32px;font-size:11.5px}
.chatbox t[p="1"] p[k="ch"]{padding:8px 10px;font-size:11.5px}
.chatbox t[p="1"] nav[k="it"] i{font-size:10.5px;padding:3px 9px 3px 17px}
.chatbox t[p="1"] nav[k="it"] i::after{max-width:150px;font-size:10px}
.chatbox t[p="1"] p[k="as"]{padding:8px 10px;font-size:11.5px}
}
/* ====== 面板2 人际关系 ====== */
.chatbox t[p="2"] npc{display:block;border-radius:10px;margin:8px 0;background:rgba(224,138,106,.04);border:1px solid rgba(224,138,106,.12);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.chatbox t[p="2"] npc:first-of-type{margin-top:4px}
.chatbox t[p="2"] npc:last-of-type{margin-bottom:0}
.chatbox t[p="2"] npc:hover{border-color:rgba(224,138,106,.3);box-shadow:0 2px 12px rgba(224,138,106,.1)}
/* ---- summary 行 ---- */
.chatbox t[p="2"] npc summary{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;list-style:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .25s}
.chatbox t[p="2"] npc summary::-webkit-details-marker{display:none}
.chatbox t[p="2"] npc summary::marker{content:''}
.chatbox t[p="2"] npc summary:hover{background:rgba(224,138,106,.06)}
/* 姓名 — 重置面板通用b样式 */
.chatbox t[p="2"] npc summary b{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;color:#8a5a40;letter-spacing:.3px;line-height:1;flex-shrink:0;border-bottom:none;padding-bottom:0;margin-bottom:0}
/* 性别图标 — 重置面板通用b::before */
.chatbox t[p="2"] npc summary b::before{content:'';display:block;width:18px;height:18px;flex-shrink:0;background:none;border-radius:0;margin-right:0;vertical-align:unset;background-size:contain;background-repeat:no-repeat;background-position:center}
.chatbox t[p="2"] npc[g="m"] summary b::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='10' cy='14' r='6' fill='none' stroke='%23b08860' stroke-width='1.8'/><line x1='14.5' y1='9.5' x2='20' y2='4' stroke='%23b08860' stroke-width='1.8' stroke-linecap='round'/><polyline points='15,4 20,4 20,9' fill='none' stroke='%23b08860' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.chatbox t[p="2"] npc[g="f"] summary b::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='9' r='6' fill='none' stroke='%23c87868' stroke-width='1.8'/><line x1='12' y1='15' x2='12' y2='22' stroke='%23c87868' stroke-width='1.8' stroke-linecap='round'/><line x1='9' y1='19' x2='15' y2='19' stroke='%23c87868' stroke-width='1.8' stroke-linecap='round'/></svg>")}
/* 展开箭头 */
.chatbox t[p="2"] npc summary::after{content:'';display:block;width:14px;height:14px;margin-left:auto;flex-shrink:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='%23c09070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;transition:transform .3s cubic-bezier(.22,.61,.36,1);opacity:.5}
.chatbox t[p="2"] npc details[open] summary::after{transform:rotate(180deg);opacity:.8}
/* 关系标签 */
.chatbox t[p="2"] npc summary i[k="rl"]{font-style:normal;font-size:11px;padding:2px 9px;border-radius:10px;background:rgba(224,138,106,.1);color:#c07050;border:1px solid rgba(224,138,106,.2);letter-spacing:.3px;white-space:nowrap;line-height:1;align-self:center}
/* ---- 展开内容区 ---- */
.chatbox t[p="2"] npc details>nav[k="dt"]{display:none;padding:0 14px 12px}
.chatbox t[p="2"] npc details[open]>nav[k="dt"]{display:block;animation:cbNpcIn .35s cubic-bezier(.22,.61,.36,1)}
@keyframes cbNpcIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* 信息行 */
.chatbox t[p="2"] nav[k="dt"]>p{margin:0;font-size:12px;line-height:1.75;color:#6a5a4a;padding:2px 0}
.chatbox t[p="2"] nav[k="dt"] p[k="oc"]{font-size:11.5px;color:#a08a70;padding-bottom:6px;margin-bottom:6px;border-bottom:1px dashed rgba(224,138,106,.15)}
.chatbox t[p="2"] nav[k="dt"] p[k="oc"]::before{content:'';display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:4px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='3' width='12' height='10' rx='1.5' fill='none' stroke='%23b09070' stroke-width='1.2'/><line x1='2' y1='7' x2='14' y2='7' stroke='%23b09070' stroke-width='1'/><line x1='6' y1='7' x2='6' y2='13' stroke='%23b09070' stroke-width='1'/></svg>") center/contain no-repeat}
.chatbox t[p="2"] nav[k="dt"] p[k="ap"]::before{content:'◈ 外貌 ';font-weight:600;color:#c08a60;font-size:11px}
.chatbox t[p="2"] nav[k="dt"] p[k="bg"]::before{content:'◈ 身材 ';font-weight:600;color:#c08a60;font-size:11px}
.chatbox t[p="2"] nav[k="dt"] p[k="ps"]::before{content:'◈ 性格 ';font-weight:600;color:#c08a60;font-size:11px}
.chatbox t[p="2"] nav[k="dt"] p[k="ps"]{padding-bottom:8px;margin-bottom:4px}
/* ---- 四维进度条 ---- */
.chatbox t[p="2"] nav[k="bars"]{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;padding:8px 0 2px;border-top:1px solid rgba(224,138,106,.1)}
.chatbox t[p="2"] nav[k="bars"] p{margin:0;display:flex;align-items:center;gap:6px;font-size:0;line-height:1;height:16px}
.chatbox t[p="2"] nav[k="bars"] p::before{flex-shrink:0;font-size:11px;font-weight:600;width:28px;text-align:right;letter-spacing:.2px}
.chatbox t[p="2"] nav[k="bars"] p[k="fv"]::before{content:'好感';color:#d4707e}
.chatbox t[p="2"] nav[k="bars"] p[k="tr"]::before{content:'信任';color:#5a9ab8}
.chatbox t[p="2"] nav[k="bars"] p[k="gd"]::before{content:'防备';color:#c8a040}
.chatbox t[p="2"] nav[k="bars"] p[k="dk"]::before{content:'黑化';color:#7a5090}
/* 轨道 */
.chatbox t[p="2"] nav[k="bars"] p em{display:block;flex:1;height:10px;border-radius:5px;background:rgba(0,0,0,.06);position:relative;overflow:hidden;font-style:normal}
/* 填充 */
.chatbox t[p="2"] nav[k="bars"] p i{display:block;position:absolute;left:0;top:0;height:100%;border-radius:5px;font-style:normal;transition:width .6s cubic-bezier(.22,.61,.36,1)}
.chatbox t[p="2"] nav[k="bars"] p[k="fv"] i{background:linear-gradient(90deg,#f0a0aa,#e06878)}
.chatbox t[p="2"] nav[k="bars"] p[k="tr"] i{background:linear-gradient(90deg,#90c8e0,#5a9ab8)}
.chatbox t[p="2"] nav[k="bars"] p[k="gd"] i{background:linear-gradient(90deg,#e8c868,#c8a040)}
.chatbox t[p="2"] nav[k="bars"] p[k="dk"] i{background:linear-gradient(90deg,#b088c8,#7a5090)}
/* 填充条末端高光 */
.chatbox t[p="2"] nav[k="bars"] p i::after{content:'';position:absolute;right:0;top:0;width:6px;height:100%;border-radius:0 5px 5px 0;background:rgba(255,255,255,.4)}
/* ---- 卡片入场动画 ---- */
.chatbox input[v="2"]:checked~t[p="2"] npc{animation:cbNpcCard .4s cubic-bezier(.22,.61,.36,1) backwards}
.chatbox input[v="2"]:checked~t[p="2"] npc:nth-of-type(2){animation-delay:.07s}
.chatbox input[v="2"]:checked~t[p="2"] npc:nth-of-type(3){animation-delay:.14s}
.chatbox input[v="2"]:checked~t[p="2"] npc:nth-of-type(4){animation-delay:.21s}
.chatbox input[v="2"]:checked~t[p="2"] npc:nth-of-type(5){animation-delay:.28s}
.chatbox input[v="2"]:checked~t[p="2"] npc:nth-of-type(6){animation-delay:.35s}
@keyframes cbNpcCard{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* 展开高亮 */
.chatbox t[p="2"] npc:has(details[open]){border-color:rgba(224,138,106,.28);box-shadow:0 2px 14px rgba(224,138,106,.12)}
.chatbox t[p="2"] npc details[open] summary{background:rgba(224,138,106,.05);border-bottom:1px solid rgba(224,138,106,.1)}
/* ---- 响应式 ---- */
@media(max-width:380px){
.chatbox t[p="2"]{padding:10px 10px}
.chatbox t[p="2"] npc summary{padding:8px 10px;gap:6px}
.chatbox t[p="2"] npc summary b{font-size:13px}
.chatbox t[p="2"] npc summary b::before{width:15px;height:15px}
.chatbox t[p="2"] npc summary i[k="rl"]{font-size:10px;padding:1px 7px}
.chatbox t[p="2"] nav[k="dt"]{padding:0 10px 10px}
.chatbox t[p="2"] nav[k="bars"]{grid-template-columns:1fr;gap:5px}
.chatbox t[p="2"] nav[k="bars"] p::before{width:24px;font-size:10px}
}
/* ====== 记忆碎片表格 (面板4专属) ====== */
.chatbox t[p="4"] table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0;border-radius:8px;overflow:hidden;box-shadow:0 1px 6px rgba(106,168,200,.12);background:#fff}
.chatbox t[p="4"] table:first-of-type{margin-top:8px}
.chatbox t[p="4"] table:last-of-type{margin-bottom:0}
/* 表格标题 */
.chatbox t[p="4"] caption{display:block;caption-side:top;text-align:left;padding:8px 12px;font-size:12px;font-weight:700;color:#4a8aa8;background:linear-gradient(135deg,rgba(106,168,200,.15),rgba(122,184,212,.08));border-bottom:1.5px solid rgba(106,168,200,.2);position:relative;letter-spacing:.4px;writing-mode:horizontal-tb;white-space:nowrap}
.chatbox t[p="4"] caption::before{content:'';display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-2px;background-size:contain;background-repeat:no-repeat;background-position:center}
/* 长期记忆图标 - 书本 */
.chatbox t[p="4"] table:nth-of-type(1) caption::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2z' fill='none' stroke='%236aa8c8' stroke-width='1.8'/><line x1='9' y1='7' x2='15' y2='7' stroke='%236aa8c8' stroke-width='1.3' stroke-linecap='round'/><line x1='9' y1='11' x2='15' y2='11' stroke='%236aa8c8' stroke-width='1.3' stroke-linecap='round'/><line x1='9' y1='15' x2='13' y2='15' stroke='%236aa8c8' stroke-width='1.3' stroke-linecap='round'/></svg>")}
/* 短期记忆图标 - 闪电 */
.chatbox t[p="4"] table:nth-of-type(2) caption::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L3 14h8l-2 8 10-12h-8z' fill='%237ab8d4' opacity='.8'/></svg>")}
/* 核心记忆图标 - 星星 */
.chatbox t[p="4"] table:nth-of-type(3) caption{background:linear-gradient(135deg,rgba(106,168,200,.22),rgba(122,184,212,.12));border-bottom-color:rgba(106,168,200,.35)}
.chatbox t[p="4"] table:nth-of-type(3) caption::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%236aa8c8'/></svg>");animation:memoryCoreStar 3s ease-in-out infinite}
@keyframes memoryCoreStar{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.15) rotate(10deg)}}
/* 表头 */
.chatbox t[p="4"] thead{background:linear-gradient(180deg,rgba(106,168,200,.08),rgba(106,168,200,.04))}
.chatbox t[p="4"] th{padding:7px 8px;font-size:11px;font-weight:600;color:#5a8aa8;text-align:left;border-bottom:1px solid rgba(106,168,200,.15);white-space:nowrap;letter-spacing:.2px}
.chatbox t[p="4"] th:first-child{width:8%;text-align:center}
.chatbox t[p="4"] th:nth-child(2){width:28%}
.chatbox t[p="4"] th:nth-child(3){width:18%}
.chatbox t[p="4"] th:nth-child(4){width:46%}
/* 表体 */
.chatbox t[p="4"] tbody{display:block;max-height:180px;overflow-y:auto}
.chatbox t[p="4"] tbody::-webkit-scrollbar{width:4px}
.chatbox t[p="4"] tbody::-webkit-scrollbar-track{background:rgba(106,168,200,.05)}
.chatbox t[p="4"] tbody::-webkit-scrollbar-thumb{background:rgba(106,168,200,.3);border-radius:2px}
.chatbox t[p="4"] tbody::-webkit-scrollbar-thumb:hover{background:rgba(106,168,200,.5)}
.chatbox t[p="4"] thead,.chatbox t[p="4"] tbody tr{display:table;width:100%;table-layout:fixed}
.chatbox t[p="4"] td{padding:8px 8px;font-size:11.5px;color:#5a6a7a;line-height:1.5;border-bottom:1px solid rgba(106,168,200,.08);vertical-align:top;word-wrap:break-word}
.chatbox t[p="4"] td:first-child{text-align:center;font-weight:600;color:#6aa8c8;font-size:10.5px}
.chatbox t[p="4"] tbody tr:nth-child(odd){background:rgba(106,168,200,.02)}
.chatbox t[p="4"] tbody tr:nth-child(even){background:#fff}
.chatbox t[p="4"] tbody tr:hover{background:rgba(106,168,200,.18);box-shadow:inset 3px 0 0 rgba(106,168,200,.5);transition:background .2s ease,box-shadow .2s ease}
.chatbox t[p="4"] tbody tr:last-child td{border-bottom:none}
/* 空状态提示 */
.chatbox t[p="4"] tbody:empty::after{content:'— 暂无记忆 —';display:block;padding:16px;text-align:center;color:#9abacc;font-size:11px;font-style:italic;letter-spacing:.3px}
/* 时间列特殊样式 */
.chatbox t[p="4"] td:nth-child(2){font-family:Consolas,'Courier New',monospace;font-size:10.5px;color:#6a8a9a}
/* 场景列图标装饰 */
.chatbox t[p="4"] td:nth-child(3){position:relative;padding-left:20px}
.chatbox t[p="4"] td:nth-child(3)::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4' fill='none' stroke='%237ab8d4' stroke-width='1.2'/><circle cx='6' cy='6' r='1.5' fill='%237ab8d4'/></svg>") center/contain no-repeat;opacity:.5}
/* 核心记忆表格特殊高亮 */
.chatbox t[p="4"] table:nth-of-type(3) tbody tr{background:linear-gradient(90deg,rgba(106,168,200,.04),transparent)}
.chatbox t[p="4"] table:nth-of-type(3) tbody tr:hover{background:linear-gradient(90deg,rgba(106,168,200,.22),rgba(106,168,200,.1));box-shadow:inset 3px 0 0 rgba(106,168,200,.6)}
.chatbox t[p="4"] table:nth-of-type(3) td:first-child{color:#4a8aa8;font-weight:700}
/* 响应式调整 */
@media(max-width:380px){
.chatbox t[p="4"] th,.chatbox t[p="4"] td{padding:6px 5px;font-size:10px}
.chatbox t[p="4"] caption{font-size:11px;padding:6px 10px}
.chatbox t[p="4"] caption::before{width:14px;height:14px;margin-right:4px}
.chatbox t[p="4"] th:first-child{width:10%}
.chatbox t[p="4"] th:nth-child(2){width:26%}
.chatbox t[p="4"] th:nth-child(3){width:16%}
.chatbox t[p="4"] th:nth-child(4){width:48%}
.chatbox t[p="4"] tbody{max-height:140px}
.chatbox t[p="4"] td:nth-child(3)::before{width:8px;height:8px;left:4px}
.chatbox t[p="4"] td:nth-child(3){padding-left:16px}
}
/* ====== 商业版图 (2003重生经营主题) ====== */
/* 顶部看板：资金与估值 */
.chatbox t[p="3"] nav[bz="top"]{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#c0a040,#a68832);border-radius:8px;padding:12px 16px;margin-bottom:12px;box-shadow:0 4px 12px rgba(192,160,64,.25),inset 0 1px 1px rgba(255,255,255,.3);position:relative;overflow:hidden}
.chatbox t[p="3"] nav[bz="top"]::after{content:'';position:absolute;top:-50%;right:-10%;width:60px;height:200%;background:rgba(255,255,255,.15);transform:rotate(30deg);animation:bzSweep 6s infinite}
@keyframes bzSweep{0%{transform:rotate(30deg) translateX(-200px)}20%,100%{transform:rotate(30deg) translateX(300px)}}
.chatbox t[p="3"] nav[bz="top"] i{display:flex;flex-direction:column;font-style:normal;position:relative;z-index:1}
.chatbox t[p="3"] nav[bz="top"] i[bz="m"]{color:#fff;font-size:20px;font-weight:800;letter-spacing:.5px;text-shadow:0 2px 4px rgba(0,0,0,.2)}
.chatbox t[p="3"] nav[bz="top"] i[bz="m"]::before{content:'当前可用资金';font-size:10px;font-weight:500;color:rgba(255,255,255,.8);margin-bottom:2px;letter-spacing:1px}
.chatbox t[p="3"] nav[bz="top"] i[bz="v"]{color:#fff0c8;font-size:13px;font-weight:600;text-align:right;background:rgba(0,0,0,.15);padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.1)}

/* 产业列表框架 */
.chatbox t[p="3"] ul[bz="list"]{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}

/* 单个产业卡片 */
.chatbox t[p="3"] ul[bz="list"] li{background:rgba(255,255,255,.7);border:1px solid rgba(192,160,64,.3);border-radius:8px;padding:10px 12px 10px 48px;position:relative;transition:all .3s cubic-bezier(.25,.8,.25,1);cursor:default;overflow:hidden}
.chatbox t[p="3"] ul[bz="list"] li:hover{background:#fff;border-color:#c0a040;box-shadow:0 4px 15px rgba(192,160,64,.15);transform:translateY(-2px)}

/* 产业类型图标 (利用 SVG 实现) */
.chatbox t[p="3"] ul[bz="list"] li::before{content:'';position:absolute;left:10px;top:12px;width:28px;height:28px;background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:6px;background-color:rgba(192,160,64,.15);transition:transform .3s,background-color .3s}
.chatbox t[p="3"] ul[bz="list"] li:hover::before{transform:scale(1.1);background-color:rgba(192,160,64,.3)}

/* 产业类型 1: 物流/跑腿 - 箱子/推车图标 */
.chatbox t[p="3"] ul[bz="list"] li[i="1"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='8' width='18' height='13' rx='1' fill='none' stroke='%23c0a040' stroke-width='1.5'/><path d='M3 13h18M8 8V5a2 2 0 012-2h4a2 2 0 012 2v3' fill='none' stroke='%23c0a040' stroke-width='1.5' stroke-linejoin='round'/><path d='M10 16h4' stroke='%23d4b060' stroke-width='1.5' stroke-linecap='round'/></svg>")}

/* 产业类型 2: 实体/餐饮 - 店铺图标 */
.chatbox t[p="3"] ul[bz="list"] li[i="2"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 21v-8M20 21v-8M4 13l-2-3 2-2h16l2 2-2 3' fill='none' stroke='%23c0a040' stroke-width='1.5' stroke-linejoin='round'/><path d='M8 13v8M16 13v8M2 10l20 0' fill='none' stroke='%23c0a040' stroke-width='1.5'/><path d='M10 5a2 2 0 014 0' fill='none' stroke='%23d4b060' stroke-width='1.5' stroke-linecap='round'/></svg>")}

/* 产业类型 3: 互联网/科技 - 早期电脑/网络图标 */
.chatbox t[p="3"] ul[bz="list"] li[i="3"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='5' width='16' height='11' rx='1' fill='none' stroke='%23c0a040' stroke-width='1.5'/><path d='M8 20h8M12 16v4' stroke='%23c0a040' stroke-width='1.5' stroke-linecap='round'/><circle cx='12' cy='10.5' r='2' fill='%23d4b060' opacity='.6'/></svg>")}

/* 产业类型 4: 投资/其他 - 增长曲线图标 */
.chatbox t[p="3"] ul[bz="list"] li[i="4"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 21h18' stroke='%23c0a040' stroke-width='1.5' stroke-linecap='round'/><path d='M4 16l5-5 4 4 7-8' fill='none' stroke='%23c0a040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><circle cx='20' cy='7' r='1.5' fill='%23d4b060'/></svg>")}

/* 产业卡片排版 */
.chatbox t[p="3"] ul[bz="list"] li b{display:block;font-size:14px;font-weight:700;color:#7a622a;margin-bottom:2px;letter-spacing:.3px;border-bottom:none;padding-bottom:0}
.chatbox t[p="3"] ul[bz="list"] li b::before{display:none} 
.chatbox t[p="3"] ul[bz="list"] li s{display:inline-block;text-decoration:none;font-size:11px;color:#9a8a60;background:rgba(192,160,64,.12);padding:2px 6px;border-radius:4px;margin-right:6px}
.chatbox t[p="3"] ul[bz="list"] li i{font-style:normal;font-size:12px;font-weight:600;color:#b08630}

/* 隐藏详情框，Hover 时平滑展开 (CSS Grid Hack) */
.chatbox t[p="3"] ul[bz="list"] li u{display:grid;grid-template-rows:0fr;text-decoration:none;opacity:0;transition:grid-template-rows .3s ease-out,opacity .2s ease-out,margin-top .3s ease-out;color:#7a6b5a;font-size:11.5px;line-height:1.6}
.chatbox t[p="3"] ul[bz="list"] li:hover u{grid-template-rows:1fr;opacity:1;margin-top:8px}
.chatbox t[p="3"] ul[bz="list"] li u::before{content:attr(d);display:block;overflow:hidden;border-top:1px dashed rgba(192,160,64,.3);padding-top:6px}

/* 底部大环境/BUFF区 */
.chatbox t[p="3"] nav[bz="buff"]{margin-top:12px;padding:10px 14px;background:rgba(212,176,96,.1);border:1px dashed rgba(192,160,64,.4);border-radius:6px;display:flex;align-items:center;gap:10px;animation:bzPulse 3s infinite alternate}
@keyframes bzPulse{0%{background:rgba(212,176,96,.05)}100%{background:rgba(212,176,96,.15)}}
.chatbox t[p="3"] nav[bz="buff"] t{display:inline-block;padding:3px 8px;background:#c0a040;color:#fff;font-size:11px;font-weight:700;border-radius:4px;letter-spacing:1px;white-space:nowrap}
.chatbox t[p="3"] nav[bz="buff"] span{font-size:12px;color:#8a7830;font-weight:500;line-height:1.4}

.chatbox t[p="2"] nav[k="dt"] p[k="sx"]{
    padding-left:22px;
    position:relative;
    margin-top:2px;
    padding-bottom:4px;
}
.chatbox t[p="2"] nav[k="dt"] p[k="sx"]::before{
    content:'性器官 ';
    font-weight:600;
    color:#c08a80;
    font-size:11px
}
.chatbox t[p="2"] nav[k="dt"] p[k="hs"]::before{
    content:'心声 ';
    font-weight:600;
    color:#a06888;
    font-size:11px;
    letter-spacing:.3px
}
.chatbox t[p="2"] nav[k="dt"] p[k="hs"]::after{
    content:'👁 悬停窥探';
    font-size:9px;
    color:#b898a8;
    float:right;
    opacity:.65;
    transition:opacity .3s;
    margin-top:2px
}
.chatbox t[p="2"] nav[k="dt"] p[k="hs"]:hover::after{
    content:'💭';
    opacity:.4
}
/* 心声内容 — 模糊隐藏 */
.chatbox t[p="2"] nav[k="dt"] p[k="hs"] s{
    text-decoration:none;
    filter:blur(5px);
    transition:filter .45s cubic-bezier(.22,.61,.36,1);
    user-select:none;
    color:#7a5a6a;
    font-size:12px;
    font-style:normal;
    line-height:1.6
}
.chatbox t[p="2"] nav[k="dt"] p[k="hs"]:hover s,
.chatbox t[p="2"] nav[k="dt"] p[k="hs"]:active s{
    filter:blur(0)
}
.chatbox t[p="2"] nav[k="dt"] p[k="hs"]:hover{
    background-color:rgba(160,104,136,.09);
    border-color:rgba(160,104,136,.3);
    box-shadow:0 2px 10px rgba(160,104,136,.08)
}
/* ====== 进度条数值 ====== */
.chatbox t[p="2"] nav[k="bars"] p s{
    text-decoration:none;
    font-size:10px;
    font-weight:700;
    min-width:20px;
    text-align:right;
    flex-shrink:0;
    letter-spacing:.2px;
    line-height:1
}
.chatbox t[p="2"] nav[k="bars"] p[k="fv"] s{color:#d4707e}
.chatbox t[p="2"] nav[k="bars"] p[k="tr"] s{color:#5a9ab8}
.chatbox t[p="2"] nav[k="bars"] p[k="gd"] s{color:#c8a040}
.chatbox t[p="2"] nav[k="bars"] p[k="dk"] s{color:#7a5090}
/* ====== 响应式补丁 ====== */
@media(max-width:380px){
.chatbox t[p="2"] nav[k="dt"] p[k="sx"]{padding-left:18px;background-position:0 3px;background-size:12px 12px}
.chatbox t[p="2"] nav[k="dt"] p[k="hs"]{padding:6px 8px 6px 22px;margin:4px 0 6px;background-position:4px 7px;background-size:12px 12px}
.chatbox t[p="2"] nav[k="bars"] p s{font-size:9px;min-width:16px}
}
/* ====== 论坛区块 ====== */
.chatbox t[p="3"] nav[bz="forum"]{margin-top:10px;padding-top:8px;border-top:1px dashed rgba(192,160,64,.25)}
.chatbox t[p="3"] nav[bz="forum"]::before{content:'';display:block;width:20px;height:20px;margin:0 auto 4px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='3' width='18' height='18' rx='2' fill='none' stroke='%238a7830' stroke-width='1.5'/><path d='M3 8h18M8 8v13' fill='none' stroke='%238a7830' stroke-width='1.2'/><circle cx='5.5' cy='5.5' r='1' fill='%23c0a040'/><line x1='11' y1='12' x2='18' y2='12' stroke='%23b0a060' stroke-width='1'/><line x1='11' y1='15' x2='17' y2='15' stroke='%23b0a060' stroke-width='1'/><line x1='11' y1='18' x2='15' y2='18' stroke='%23b0a060' stroke-width='1'/></svg>") center/contain no-repeat;opacity:.7}
/* ====== 未注册状态 ====== */
.chatbox t[p="3"] nav[bz="forum"][status="未注册"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='11' width='14' height='10' rx='2' fill='none' stroke='%23a09080' stroke-width='1.5'/><path d='M8 11V8a4 4 0 018 0v3' fill='none' stroke='%23a09080' stroke-width='1.5'/><circle cx='12' cy='16' r='1.5' fill='%23a09080'/><line x1='12' y1='17.5' x2='12' y2='19' stroke='%23a09080' stroke-width='1.3'/></svg>");opacity:.5}
.chatbox t[p="3"] nav[bz="forum"][status="未注册"]::after{content:'论坛未开放，可在学校中注册。';display:block;text-align:center;font-size:12px;color:#a09080;font-style:italic;padding:12px 8px;letter-spacing:.3px;line-height:1.6}
/* 校内/校外分区标题 */
.chatbox t[p="3"] b[f="in"],.chatbox t[p="3"] b[f="out"]{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;margin:6px 0 4px;padding:3px 8px;border-radius:5px;letter-spacing:.3px}
.chatbox t[p="3"] b[f="in"]{color:#7a6030;background:rgba(192,160,64,.1)}
.chatbox t[p="3"] b[f="out"]{color:#4a7a8a;background:rgba(80,150,170,.1)}
.chatbox t[p="3"] b[f="in"]::before,.chatbox t[p="3"] b[f="out"]::before{content:'';display:inline-block;width:16px;height:16px;background-size:contain;background-repeat:no-repeat;flex-shrink:0}
.chatbox t[p="3"] b[f="in"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2L2 8v10h6v-5h4v5h6V8z' fill='none' stroke='%237a6030' stroke-width='1.5' stroke-linejoin='round'/><rect x='8' y='9' width='4' height='3' rx='.5' fill='%23c0a040' opacity='.5'/></svg>")}
.chatbox t[p="3"] b[f="out"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='7.5' fill='none' stroke='%234a7a8a' stroke-width='1.5'/><path d='M3.5 8h13M3.5 12h13M10 2.5c-2 2-2 5.5 0 7.5s2 5.5 0 7.5' fill='none' stroke='%234a7a8a' stroke-width='1' opacity='.6'/></svg>")}
/* 帖子列表 */
.chatbox t[p="3"] ul[f]{list-style:none;padding:0;margin:0 0 4px}
.chatbox t[p="3"] ul[f] li{display:flex;align-items:flex-start;gap:6px;padding:6px 6px 6px 4px;margin:2px 0;border-radius:6px;font-size:12px;line-height:1.55;color:#5a5040;transition:background .2s,transform .15s;cursor:default}
.chatbox t[p="3"] ul[f] li:nth-child(odd){background:rgba(0,0,0,.02)}
.chatbox t[p="3"] ul[f] li:nth-child(even){background:rgba(0,0,0,.01)}
.chatbox t[p="3"] ul[f] li:hover{transform:translateX(2px)}
/* 类别SVG图标 via ::before — flex子项 */
.chatbox t[p="3"] ul[f] li::before{content:'';display:block;width:16px;height:16px;min-width:16px;margin-top:1px;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}
/* c=1 八卦: 对话气泡 */
.chatbox t[p="3"] ul[f] li[c="1"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><ellipse cx='10' cy='9' rx='8' ry='6.5' fill='%23f8d0d8' stroke='%23d4789a' stroke-width='1.2'/><path d='M6 14.5Q4 18 2 17q3-1 4.5-2.5' fill='%23f8d0d8' stroke='%23d4789a' stroke-width='1'/><circle cx='7' cy='9' r='1' fill='%23d4789a'/><circle cx='10' cy='9' r='1' fill='%23d4789a'/><circle cx='13' cy='9' r='1' fill='%23d4789a'/></svg>")}
.chatbox t[p="3"] ul[f] li[c="1"]{border-left:2px solid rgba(212,120,154,.4)}
.chatbox t[p="3"] ul[f] li[c="1"]:hover{background:rgba(212,120,154,.08)}
/* c=2 剧情: 文档 */
.chatbox t[p="3"] ul[f] li[c="2"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect x='4' y='2' width='12' height='16' rx='1.5' fill='%23d8e8f4' stroke='%235a8aaa' stroke-width='1.2'/><line x1='7' y1='6' x2='13' y2='6' stroke='%235a8aaa' stroke-width='1'/><line x1='7' y1='9' x2='13' y2='9' stroke='%235a8aaa' stroke-width='1'/><line x1='7' y1='12' x2='11' y2='12' stroke='%235a8aaa' stroke-width='1'/><path d='M13 14l2 2-2 2' fill='none' stroke='%235a8aaa' stroke-width='1' stroke-linecap='round' opacity='.6'/></svg>")}
.chatbox t[p="3"] ul[f] li[c="2"]{border-left:2px solid rgba(90,138,170,.4)}
.chatbox t[p="3"] ul[f] li[c="2"]:hover{background:rgba(90,138,170,.08)}
/* c=3 商业线索: 钱币 */
.chatbox t[p="3"] ul[f] li[c="3"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='8' r='6' fill='%23f8f0d0' stroke='%23b89830' stroke-width='1.2'/><text x='10' y='11' text-anchor='middle' font-size='8' font-weight='bold' fill='%23b89830'>¥</text><line x1='8' y1='15' x2='12' y2='15' stroke='%23b89830' stroke-width='1.2' stroke-linecap='round'/><line x1='8.5' y1='17' x2='11.5' y2='17' stroke='%23b89830' stroke-width='1' stroke-linecap='round'/></svg>")}
.chatbox t[p="3"] ul[f] li[c="3"]{border-left:2px solid rgba(184,152,48,.4)}
.chatbox t[p="3"] ul[f] li[c="3"]:hover{background:rgba(184,152,48,.08)}
/* c=4 情色: 火焰 */
.chatbox t[p="3"] ul[f] li[c="4"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2C8 6 4 8 4 12a6 6 0 0012 0c0-4-4-6-6-10z' fill='%23f4d0d8' stroke='%23c85a70' stroke-width='1'/><path d='M10 9c-1 2-3 3-3 5a3 3 0 006 0c0-2-2-3-3-5z' fill='%23e8a0b0' opacity='.7'/></svg>")}
.chatbox t[p="3"] ul[f] li[c="4"]{border-left:2px solid rgba(200,90,112,.4)}
.chatbox t[p="3"] ul[f] li[c="4"]:hover{background:rgba(200,90,112,.08)}
/* 热度标记 via ::after — flex子项靠右 */
.chatbox t[p="3"] ul[f] li::after{content:'🔥' attr(h);display:block;flex-shrink:0;margin-left:auto;font-size:10px;color:#b0a080;opacity:.55;white-space:nowrap;align-self:center;padding-left:4px}
.chatbox t[p="3"] ul[f] li:hover::after{opacity:.9}
/* 论坛入场动画 */
.chatbox input[v="3"]:checked~t[p="3"] ul[f] li{animation:forumIn .3s cubic-bezier(.22,.61,.36,1) backwards}
.chatbox input[v="3"]:checked~t[p="3"] ul[f] li:nth-child(2){animation-delay:.05s}
.chatbox input[v="3"]:checked~t[p="3"] ul[f] li:nth-child(3){animation-delay:.1s}
.chatbox input[v="3"]:checked~t[p="3"] ul[f] li:nth-child(4){animation-delay:.15s}
@keyframes forumIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
/* 响应式 */
@media(max-width:380px){
.chatbox t[p="3"] ul[f] li{font-size:11px;gap:4px;padding:5px 4px 5px 3px}
.chatbox t[p="3"] ul[f] li::before{width:14px;height:14px;min-width:14px}
.chatbox t[p="3"] ul[f] li::after{font-size:9px}
.chatbox t[p="3"] b[f="in"],.chatbox t[p="3"] b[f="out"]{font-size:10.5px}
}