/* =============================================
       🎭 Galgame 对话框系统 —— 纯小白也能看懂的注释
       所有样式都限定在 <game> 内部，绝不影响网站其他部分
       支持：CG 默认显示 / 立绘互斥 / 多动画 / 纯CSS全局CG开关
       ============================================= */

    /* ---------- 1. 游戏主容器 <game> ---------- */
    game {
      /* 定义可一键修改的 CSS 变量 */
      --g-face: 100px;                /* 头像宽高，改这里所有头像都会变 */
      --g-bg: rgba(30, 28, 36, 0.92);     /* 对话框背景色（半透明深灰） */
      --g-border: rgba(255,255,255,0.12); /* 对话框边框色 */
      --g-name: #f0c060;             /* 角色名字颜色（金色） */
      --g-text: #e8e0d8;             /* 对话文字颜色（暖白） */

      /* 让所有子元素垂直排列，间距 8px */
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      font-family: 'Segoe UI', 'Noto Sans', system-ui, sans-serif;
      color: #fff;
      position: relative;           /* 为内部固定定位按钮提供定位上下文（实际用 fixed） */
    }

    /* 
       重置盒子模型，防止外部样式污染。
       选择器中的 * 表示所有元素，::before 和 ::after 是伪元素（自动插入的小盒子）
    */
    game, game *, game *::before, game *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* 
       隐藏页面中所有的 radio（单选）和 checkbox（多选）。
       我们只用它们的“选中”状态来驱动显示/隐藏，不需要让用户直接看到它们。
    */
    input[type="radio"],
    input[type="checkbox"] {
      position: absolute;   /* 脱离正常文档流 */
      width: 0;             /* 零尺寸 */
      height: 0;
      opacity: 0;           /* 完全透明 */
      pointer-events: none; /* 鼠标事件穿过，防止意外点击 */
      margin: 0;
      overflow: hidden;
    }

    /*
       每个可交互的对话（例如含有立绘）都用 <label> 包裹。
       点击 <label> 内的任何地方都等于点击它内部的 <input>，从而改变选中状态。
    */
    label {
      display: block;
      cursor: pointer;       /* 鼠标变成手型，提示可点击 */
      position: relative;
    }

    /* ---------- 2. 对话框 <tb> ---------- */
   tb {
      display: grid;
      grid-template-columns: var(--g-face) 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "face name"
        "face text";
      gap: 2px 14px;
      align-items: start;

      background: var(--g-bg);
      border: 1px solid var(--g-border);
      border-radius: 14px;
      padding: 14px 18px 14px 14px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.45);
      backdrop-filter: blur(6px);
      transition: 0.25s;
      cursor: pointer;
    }

    tb:hover {
      background: rgba(38,35,45,0.94);
      border-color: rgba(255,255,255,0.25);
    }

    input:checked ~ tb {
      border-color: rgba(255,255,255,0.55) !important;
      box-shadow: 0 0 14px rgba(240,192,96,0.35) !important;
      background: rgba(45,42,55,0.96) !important;
    }

    /* ---------- 头像（tx 预设表情） ---------- */
    tb[tx]::before {
      content: "";
      grid-area: face;
      width: var(--g-face) !important;
      height: var(--g-face) !important;
      min-width: var(--g-face) !important;
      max-width: var(--g-face) !important;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      border: 2px solid rgba(255,255,255,0.35);
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      flex-shrink: 0;
      align-self: center;
    }

    /* 🆕 tb 内的 img —— 外部图片头像，占据 grid-area: face */
    tb img {
      grid-area: face;
      width: var(--g-face);
      height: var(--g-face);
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255,255,255,0.35);
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      display: block;
      align-self: center;
    }

    /* 🆕 当 tb 里有 img 时，隐藏伪元素头像（tx） */
    tb:has(img)[tx]::before {
      display: none !important;
    }

    /* 没有头像（无 tx 也无 img）时，去掉头像列 */
    tb:not([tx]):not(:has(img)) {
      grid-template-columns: 1fr;
      grid-template-areas: "name" "text";
    }
    tb:not([tx]):not(:has(img))::before { display: none; }

    /* ---------- 名字 ---------- */
    tb[name]::after {
      content: attr(name);
      grid-area: name;
      font-size: 0.82em;
      font-weight: 700;
      color: var(--g-name);
      letter-spacing: 0.04em;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

    tb:not([name]) {
      grid-template-areas: "face text";
    }
    tb:not([name])::after { display: none; }
    tb:not([name]):not([tx]):not([src]) {
      grid-template-columns: 1fr;
      grid-template-areas: "text";
    }
    tb:not([name]) t {
      font-style: italic;
      color: #d0c8bc;
      opacity: 0.9;
    }

    /* ---------- 2.3 对话文本 <t> ---------- */
    t {
      grid-area: text;               /* 放入 text 区域 */
      font-size: 0.95em;
      line-height: 1.6;             /* 行高，内容多时高度自动增加 */
      color: var(--g-text);
      word-break: break-word;       /* 长单词或链接自动换行，防止溢出 */
    }

    /* ---------- 3. 场景图 <sc> ---------- */
    sc {
      display: block;               /* 默认直接显示，无需任何勾选 */
      width: 100%;
      height: 600px;                /* 场景图高度，你可以改成自己喜欢的数值 */
      border-radius: 12px;
      background-size: cover;       /* 图片覆盖整个区域，裁剪多余部分 */
      background-position: center;  /* 图片居中 */
      margin-bottom: 10px;          /* 与下方对话框保持 10px 间距 */
      position: relative;
      cursor: pointer;              /* 鼠标变手型，提示可点击 */
    }


    /* ---------- 7. CG 全局控制按钮 <cg-ctrl> ---------- */
    cg-ctrl {
      position: fixed !important;
      right: 120px !important;       /* 与立绘水平对齐 */
      top: 20px !important;    /* 立绘上方 20px（140+300+10） */
      z-index: 220;                /* 比立绘还高，确保可点击 */
      cursor: pointer;
      font-size: 16px;
      color: #8B5F6B !important;                /* 玫瑰棕文字，柔和可读 */
      background: rgba(255,192,203,0.15);
      border: 1px solid rgba(255,255,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;          /* 圆形按钮 */
      transition: 0.25s;
    }
    cg-ctrl:hover {
      color: white;
      background: rgba(50,46,58,0.95);
      border-color: rgba(255,255,255,0.35);
    }

    /* 
       CG 按钮内的 <label> 样式，保证其内部内容水平排列，手型光标。
       这样 HTML 中就不需要任何 style 属性了。
    */
    cg-ctrl label {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }

    /* 
       核心规则：当 CG 开关的 checkbox 被勾选时，整个 <game> 内的所有 <sc> 都被隐藏。
       :has(.cg-toggle:checked) 表示“包含被选中 checkbox 的那个 game”。
       注意：这个选择器需要较新的浏览器（Chrome 105+, Edge 105+, Safari 15.4+）。
       风月AI 界面通常使用较新的浏览器内核，可以放心使用。
    */
    game:has(input.cg-toggle:checked) sc {
      display: none !important;
    }

    /* =============================================
       9. 📌 图片资源映射区（占位色块，换成真实图片 URL 即可）
       ============================================= */
    /* 场景图：根据 cg 属性显示不同的背景 */


    /* 如果要添加新场景，复制上面一行，改 cg 值和背景图就好 */

    /* 立绘：根据 lh 属性显示不同角色立绘 */



    /* 头像：根据 tx 属性显示不同表情头像 */


    /* 
       下面这些是给占位色块添加文字标识，方便开发时知道哪张图。
       正式上线时请把下面这两个块的 CSS 全部删除！
    */
    /* 
    sc[cg]::before {
      content: attr(cg);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: rgba(255,255,255,0.9);
      font-size: 1.4em;
      font-weight: bold;
      pointer-events: none;
    }

    */
    /* ---------- 10. 手机端适配 ---------- */
    @media (max-width: 640px) {
      game {
        --g-face: 80px;             /* 小屏幕头像缩小 */
      }
      tb {
        padding: 10px 12px 10px 10px;
        gap: 1px 10px;
        border-radius: 10px;
      }
      tb[name]::after { font-size: 0.75em; }
      t { font-size: 0.85em; }
      ill {
        width: 130px;
        height: 240px;
        right: -10px !important;
        bottom: 110px !important;
      }
      .ill-close {
      font-size: 0.75em;
      right: 0px !important;       /* 与立绘水平对齐 */
      top: 70px !important;    /* 立绘上方 20px（140+300+10） */
      width: 60px;
      height: 20px;
      }
      cg-ctrl {
      font-size: 0.75em;
      right: 0px !important;       /* 与立绘水平对齐 */
      top: 50px !important;    /* 立绘上方 20px（140+300+10） */
      width: 60px;
      height: 20px;
      }

    }










/* === 淡粉色主题 · 侧边栏折叠框美化 === */

/* --- 1. 基础定位与折叠状态 (Collapsed) --- */
#ai-chat-answer:last-of-type .relative details {
    position: fixed !important;
    right: 15px !important;
    width: 45px !important;
    height: auto !important;
    min-height: 44px !important;
    background: #FFF5F7 !important;            /* 淡粉底色 */
    border: 1px solid #F2D5D7 !important;     /* 柔粉边框 */
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(220, 140, 150, 0.12) !important; /* 粉调阴影 */
    z-index: 100 !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    top: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 6px 4px !important;
}

/* 各折叠栏垂直定位 (保持不变) */
#ai-chat-answer:nth-last-child(1) details:nth-of-type(1) { top: 60px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(2) { top: 130px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(3) { top: 220px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(4) { top: 320px !important; }

/* --- 2. 折叠状态 · 竖排标题 --- */
#ai-chat-answer:last-of-type .relative details > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #8B5F6B !important;                /* 玫瑰棕文字，柔和可读 */
    letter-spacing: 2px !important;
    line-height: 1.6 !important;
    list-style: none !important;
    cursor: pointer !important;
    user-select: none !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 4px 2px !important;
    box-sizing: border-box !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 6px !important;
    background: transparent !important;
}

/* 隐藏默认箭头 */
#ai-chat-answer:last-of-type .relative details > summary::-webkit-details-marker { display: none !important; }
#ai-chat-answer:last-of-type .relative details > summary { list-style: none !important; }

/* 折叠 Hover */
#ai-chat-answer:last-of-type .relative details:not([open]):hover {
    background: #FFEBEE !important;           /* 更亮的粉 */
    border-color: #F0C4CA !important;
    box-shadow: 0 4px 14px rgba(215, 130, 140, 0.18) !important;
    transform: translateX(-2px) !important;
}
#ai-chat-answer:last-of-type .relative details:not([open]):hover > summary {
    color: #6B3D4A !important;                /* 深粉色文字 */
}


/* ========================================
   3. 展开状态 · 统一面板
   ======================================== */

/* 展开后移动到最高标签下方10px */
#ai-chat-answer:last-of-type .relative details[open] {
    top: 60px !important;
    width: 420px !important;
    max-width: calc(100vw - 50px) !important;
    height: auto !important;
    max-height: calc(100vh - 90px) !important;
    min-height: 120px !important;
    background: #FFFFFF !important;           /* 面板保持白色背景 */
    border: 1px solid #F5D3D6 !important;    /* 浅粉边框 */
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(210, 140, 150, 0.18), 0 2px 8px rgba(150, 80, 90, 0.08) !important;
    z-index: 200 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
    padding: 0 !important;
    cursor: default !important;
    scrollbar-width: thin !important;
    scrollbar-color: #F2C7CD transparent !important; /* 粉色滚动条 */
}

/* WebKit 滚动条 */
#ai-chat-answer:last-of-type .relative details[open]::-webkit-scrollbar { width: 6px !important; }
#ai-chat-answer:last-of-type .relative details[open]::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 8px 0 !important;
}
#ai-chat-answer:last-of-type .relative details[open]::-webkit-scrollbar-thumb {
    background: #F2C7CD !important;
    border-radius: 3px !important;
}
#ai-chat-answer:last-of-type .relative details[open]::-webkit-scrollbar-thumb:hover {
    background: #E5A8B0 !important;
}

/* --- 展开标题栏 --- */
#ai-chat-answer:last-of-type .relative details[open] > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #4A2D38 !important;                /* 深玫瑰色 */
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
    background: #FFF0F3 !important;           /* 极浅粉标题栏 */
    border-bottom: 1px solid #F9DADE !important;
    border-radius: 12px 12px 0 0 !important;
    cursor: pointer !important;
    user-select: none !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    box-shadow: inset 3px 0 0 #E8A0B0 !important; /* 粉色装饰条 */
    transition: background 0.2s ease !important;
}

#ai-chat-answer:last-of-type .relative details[open] > summary:hover {
    background: #FFE8ED !important;
    color: #3A1E28 !important;
}

/* --- 展开内容区 --- */
#ai-chat-answer:last-of-type .relative details[open] > *:not(summary) {
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #4A2D38 !important;                /* 正文深粉棕 */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

#ai-chat-answer:last-of-type .relative details[open] > *:not(summary):first-child { margin-top: 0 !important; }
#ai-chat-answer:last-of-type .relative details[open] > *:not(summary):last-child { margin-bottom: 8px !important; }


/* ========================================
   4. 细节优化
   ======================================== */

/* 折叠焦点可见 */
#ai-chat-answer:last-of-type .relative details:not([open]):focus-visible {
    outline: 2px solid #E8A0B0 !important;
    outline-offset: 3px !important;
    border-radius: 8px !important;
}

/* 展开面板焦点 */
#ai-chat-answer:last-of-type .relative details[open]:focus-visible {
    outline: none !important;
    box-shadow: 0 8px 32px rgba(200, 120, 140, 0.22), 0 0 0 3px rgba(232, 160, 176, 0.4) !important;
}

/* 链接/代码适配粉色主题 */
#ai-chat-answer:last-of-type .relative details[open] a {
    color: #C06B7C !important;                /* 粉调链接 */
    word-break: break-all !important;
}
#ai-chat-answer:last-of-type .relative details[open] code {
    font-size: 13px !important;
    background: #FFF4F5 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    word-break: break-all !important;
}
#ai-chat-answer:last-of-type .relative details[open] pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}


/* ========================================
   5. 响应式调整
   ======================================== */
@media (max-width: 600px) {
    #ai-chat-answer:last-of-type .relative details[open] {
        width: calc(100vw - 40px) !important;
        max-width: 100vw !important;
        right: 10px !important;
        top: 55px !important;
        max-height: calc(100vh - 75px) !important;
        border-radius: 10px !important;
    }
    #ai-chat-answer:last-of-type .relative details[open] > summary {
        font-size: 14px !important;
        padding: 8px 14px !important;
        min-height: 38px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    #ai-chat-answer:last-of-type .relative details[open] > *:not(summary) {
        padding: 12px 14px !important;
    }
    #ai-chat-answer:last-of-type .relative details:not([open]) {
        width: 38px !important;
        right: 8px !important;
    }
    #ai-chat-answer:last-of-type .relative details:not([open]) > summary {
        font-size: 11px !important;
        letter-spacing: 1px !important;
    }
}

@media (max-width: 400px) {
    #ai-chat-answer:last-of-type .relative details[open] {
        width: calc(100vw - 24px) !important;
        right: 6px !important;
        top: 50px !important;
        max-height: calc(100vh - 65px) !important;
    }
    #ai-chat-answer:last-of-type .relative details:not([open]) {
        width: 34px !important;
        right: 4px !important;
    }
    #ai-chat-answer:last-of-type .relative details:not([open]) > summary {
        font-size: 10px !important;
    }
/* 各折叠栏垂直定位 (保持不变) */
#ai-chat-answer:nth-last-child(1) details:nth-of-type(1) { top: 90px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(2) { top: 150px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(3) { top: 220px !important; }
#ai-chat-answer:nth-last-child(1) details:nth-of-type(4) { top: 300px !important; }
}

/* === 淡粉色通用折叠框美化 === */
details {
    /* 基础样式 */
    background: #FFF5F7;                /* 淡粉底色 */
    border: 1.5px solid #FAD1D8;        /* 柔粉边框 */
    border-radius: 12px;                /* 圆润边框 */
    box-shadow: 0 2px 12px rgba(255, 182, 193, 0.15); /* 淡粉阴影 */
    margin-bottom: 12px;                /* 框间距 */
    transition: all 0.25s ease;
    overflow: hidden;
}

/* 展开时光影增强 */
details[open] {
    background: #FFF0F3;
    border-color: #F5B7C5;
    box-shadow: 0 4px 20px rgba(255, 160, 176, 0.25);
}

/* 标题栏 summary */
details > summary {
    list-style: none;                   /* 隐藏默认三角 */
    cursor: pointer;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 15px;
    color: #B3445B;                     /* 深粉文字 */
    background: #FFE4E9;                /* 标题栏微粉背景 */
    border-bottom: 1px solid #FAD1D8;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: background 0.2s;
}

/* 标题悬停效果 */
details > summary:hover {
    background: #FFD7DF;
}

/* 内容区域 */
details > *:not(summary):not(ill) {
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #5A3A42;
    display: block; /* 如果里面是纯文本，用这个让排版撑开 */
}

/* 内容区域顶部第一个元素去掉 margin-top */
details > *:not(summary):first-child {
    margin-top: 0;
}





/* --- [1] 回复区：世界情况/代码块深度美化 --- */
/* 定位回复内容中的代码块容器 */
div.break-all pre {
    background: linear-gradient(135deg, rgba(255, 245, 247, 0.95) 0%, rgba(255, 238, 242, 0.95) 100%) !important;
    border: 1px solid #ffc1d1 !important;
    border-left: 5px solid #ff85a2 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 10px 0 !important;
    box-shadow: 0 4px 15px rgba(255, 133, 162, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(4px) !important;
}

/* 代码块内部文字样式 */
div.break-all pre code {
    color: #d63384 !important; /* 深粉色确保绝对可读性 */
    font-family: "Cascadia Code", "Consolas", "Monaco", monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* 装饰性：代码块右上角添加“档案”标识感 */
div.break-all pre::after {
    content: "WORLD INFO";
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 10px;
    font-weight: bold;
    color: #ff85a2;
    opacity: 0.5;
    letter-spacing: 1px;
}

/* --- [2] 顶部栏：通透粉色重构 --- */
/* 主容器 */
.sticky.w-full.top-0.flex.items-center {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #ffdae3 !important;
    box-shadow: 0 2px 10px rgba(255, 182, 193, 0.1) !important;
}

/* 模型选择器美化 */
#ai-model-selector .group.flex.items-center {
    background: #fff0f3 !important;
    border: 1px solid #ffc1d1 !important;
    border-radius: 20px !important;
    padding: 2px 12px !important;
    transition: all 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
    background: #ffdee6 !important;
    box-shadow: 0 0 8px rgba(255, 133, 162, 0.3) !important;
}

/* 模型名称颜色 */
#ai-model-selector .truncate.text-\[13px\] {
    color: #d63384 !important;
    font-weight: 600 !important;
}

/* 设置按钮图标 */
#header-setting-button svg {
    color: #ff85a2 !important;
    transition: transform 0.3s ease !important;
}

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

/* --- [3] 底部输入区：悬浮粉色胶囊 --- */
/* 底部背景淡化 */
.bg-gradient-to-t {
    background: linear-gradient(to top, rgba(255, 245, 247, 0.9), transparent) !important;
}

/* 输入框容器 */
#ai-chat-bottom-input {
    border: 2px solid #ffc1d1 !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(255, 133, 162, 0.15) !important;
    transition: all 0.3s ease !important;
}

#ai-chat-bottom-input:focus-within {
    border-color: #ff85a2 !important;
    box-shadow: 0 4px 25px rgba(255, 133, 162, 0.25) !important;
}

/* 输入框文字与占位符 */
#ai-chat-input {
    color: #5d5d5d !important;
}

#ai-chat-input::placeholder {
    color: #ffb3c1 !important;
}

/* 选中文字颜色 */
#ai-chat-input::selection {
    background: #ff85a2 !important;
    color: white !important;
}

/* --- [4] 评论区：樱花主题重构 --- */
/* 主背景容器 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #fff9fa !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    box-shadow: 0 -5px 25px rgba(255, 182, 193, 0.2) !important;
}

/* 评论输入框 */
textarea.rc-textarea {
    background: #ffffff !important;
    border: 1px solid #ffdae3 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    transition: border 0.3s !important;
}

textarea.rc-textarea:focus {
    border-color: #ff85a2 !important;
    outline: none !important;
}

/* 发送评论按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: #ff85a2 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    transition: all 0.3s !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: #d63384 !important;
    transform: scale(1.1) rotate(-10deg) !important;
}

/* 排序按钮美化 */
button.MuiButton-containedPrimary {
    background-color: #ff85a2 !important;
    border-radius: 15px !important;
    text-transform: none !important;
}

button.MuiButton-outlinedPrimary {
    color: #ff85a2 !important;
    border-color: #ff85a2 !important;
    border-radius: 15px !important;
    text-transform: none !important;
}

/* 评分星星颜色 */
span.MuiRating-iconFilled svg {
    color: #ff85a2 !important;
}

/* 评论项交互 */
div.group.ml-0 {
    padding: 12px !important;
    border-radius: 12px !important;
    transition: background 0.2s !important;
}

div.group.ml-0:hover {
    background: rgba(255, 133, 162, 0.05) !important;
}

/* 用户名高亮 */
div.text-sm.text-grey-600 span.font-bold {
    color: #d63384 !important;
}

/* 分页按钮 */
.MuiPaginationItem-root.Mui-selected {
    background-color: #ff85a2 !important;
    color: white !important;
}

.MuiPaginationItem-root:hover {
    background-color: #ffdee6 !important;
}


/* 
 * ==========================================
 * 第一轮改版：全量落地视觉优化方案
 * 核心：解决自定义语言标签（如“世界情况”）样式失效并深度重构UI
 * ==========================================
 */

/* 1. 容器深度美化：引入软阴影与微光效果 */
.markdown-body pre > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 35px rgba(255, 182, 193, 0.3) !important;
  border-color: #ffb3c1 !important;
}

/* 2. 头部栏：渐变色与动态标签 (修复“世界情况”显示核心) */
.markdown-body pre > div > div.flex.justify-between.h-8 {
  background: linear-gradient(90deg, #ffe4e9 0%, #fff5f7 100%) !important;
  border-bottom: 2px solid #ffc1cc !important;
  height: 40px !important;
  padding: 0 16px !important;
}



/* 3. 复制按钮：R3规则联动与交互动效 */
.markdown-body pre div[data-tooltip-id^="copy-tooltip"] > svg {
  color: #ff4d6d !important;
  transform: scale(1) !important;
  transition: all 0.3s ease !important;
}

.markdown-body pre div[data-tooltip-id^="copy-tooltip"]:hover > svg {
  color: #c9184a !important;
  transform: scale(1.2) rotate(15deg) !important;
}

/* 4. 代码区：解决“世界情况”内容不显示问题 (R4覆盖) */
.markdown-body pre > div > div[node] {
  background: #fffafa !important; /* 极浅粉背景 */
}

/* 5. 文本渲染优化：确保自定义标签内的文字强制显示 */
.markdown-body pre code[class*="language-"], 
.markdown-body pre code {
  color: #8b4367 !important; /* 强制深粉褐色文字 */
  font-family: "Fira Code", "Cascadia Code", "Consolas", monospace !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  display: block !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 即使没有语法高亮span，也确保文本可见 */
.markdown-body pre code[class*="language-"] {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* 6. AI回复区域背景同步美化粉色 */
.markdown-body {
  background-color: #fffbfc !important;
}

/* 7. 细节优化：滚动条与选中文本 */
.markdown-body pre > div > div[node]::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.markdown-body pre > div > div[node]::-webkit-scrollbar-thumb {
  background: #ffc1cc !important;
  border-radius: 10px !important;
  border: 2px solid #fffafa !important;
}

.markdown-body pre > div > div[node]::selection,
.markdown-body pre code::selection,
.markdown-body pre span::selection {
  background: #ffb3c1 !important;
  color: #ffffff !important;
}

.chat-answer-container .relative {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0px !important;    /* 左边间隙大 */
  padding-right: 0px !important;   /* 右边间隙小 */
}



/* 核心标签 ill，不依赖任何父级 flex，极其独立 */
ill {
    display: block;          /* 强制为块级元素，避免文字和它挤在一行 */
    width: 280px;            /* 【重点】直接写死宽度，不再依赖 flex */
    aspect-ratio: 9 / 16;    /* 你的 864x1536 图片比例 */
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background: #f0e0e4;     /* 图片未加载时的浅粉色底色 */
    box-shadow: 0 8px 24px rgba(140, 70, 80, 0.15);
}
ill::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: contain;
    background-position: center;  /* 强制正中间对齐 */
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    z-index: 1;
}
ill:hover::before {
    transform: scale(1.05);
}

/* ========================================================== */
/* 手机端终极修正：强制 864/1536 完美比例，坚决不留白边！      */
/* ========================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. 打破外部黑框框的弹性居中干扰 */
    details {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. 立绘强制定位，直接拿原比例 864/1536 来防压扁 */
    ill {
        /* 宽度占满，但限制最大宽度防太大 */
        width: 100% !important;
        max-width: 280px !important;
        
        /* 【核心！】直接把比例写成 864 / 1536 */
        aspect-ratio: 864 / 1536 !important;
        
        /* 【必加】强制高度自适应，严禁被外部容器压扁 */
        height: auto !important; 
        flex-shrink: 0 !important; 

        /* 【重要】用 cover 强制图片完美铺满整个盒子，彻底消除两边空白 */
        background-size: cover !important; 
        background-position: center !important;

        /* 保持向下位移，拉开与上方文字距离 */
        position: relative !important; 
        top: 10px !important; 
        
        /* 居中 */
        margin: 0 auto !important;
        display: block !important;
    }

    /* 3. 底部文字乖乖靠左排列，不要乱跑 */
    details > *:not(summary) {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 6px !important;
        margin-top: 10px !important; /* 文字稍微往下挤一挤 */
    }
}