* ----------------------------------------------
 *   狼人杀·暗夜魅惑风格 (适配移动端/PC端)
 *   主题：神秘、性感、暗黑哥特，搭配金色雕纹
 *   特色：半透明磨砂质感，边框采用浮雕花纹，
 *         角落添加狼爪/玫瑰/血月等装饰符号
 * ----------------------------------------------
 */
/* ---------------------------------
 *   模块一：对话气泡美化 (AI侧)
 * ---------------------------------
 */
.group .bg-gray-100\/90 {
    /* 半透明深色背景，带有磨砂质感 */
    background: rgba(20, 10, 15, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    /* 浮雕式花纹边框 (ridge/groove 模拟古老雕纹) */
    border: 3px ridge #b8860b !important;          /* 暗金主色 */
    border-radius: 12px !important;                /* 稍大圆角更柔和 */
    /* 外阴影：暗红 glow 增加诱惑氛围 */
    box-shadow: 0 0 0 2px rgba(180, 30, 30, 0.3),
                0 8px 20px rgba(0, 0, 0, 0.6) !important;
    /* 内边距保持不变，原样保留，只微调 */
    padding: 12px !important;
    /* 不强制设定文字颜色，避免覆盖 <p> 等标签内颜色 */
    /* 原 color: #000000 !important; 已移除，符合要求 */
    /* 为边角装饰符号提供相对定位上下文 */
    position: relative !important;
    overflow: hidden !important;   /* 防止装饰溢出，但保留圆角裁切 */
}
/* 边角狼人杀图案 —— 左上角狼爪 + 右下角玫瑰/血月 */
.group .bg-gray-100\/90::before,
.group .bg-gray-100\/90::after {
    content: '' !important;
    position: absolute !important;
    font-size: 2.2rem !important;        /* 足够大，但透明不抢眼 */
    line-height: 1 !important;
    opacity: 0.2 !important;              /* 半透明水印效果 */
    pointer-events: none !important;       /* 确保不干扰点击 */
    z-index: 0 !important;                 /* 位于背景层，文字之上？需在文字下方 */
    /* 但文字默认有层级，可让伪元素背景低，但它是内容，会覆盖文字？如果使用绝对定位，会叠加在文字上方。需要让文字在之上。 */
    /* 解决方案：给伪元素设置 z-index: -1 或 0，并让父元素背景独立。但文字会出现在伪元素上方，因为伪元素是后代。 */
    /* 为了保证文字可见，伪元素使用较低的不透明度并置于底层，文字自动在上（层叠顺序由DOM决定）。 */
    /* 这里为了保险，将伪元素设为普通块，并用混合模式？简单起见保持低透明度。 */
}
/* 左上角：狼爪 + 新月 */
.group .bg-gray-100\/90::before {
    content: '🐺🌙' !important;
    top: -6px !important;
    left: -4px !important;
    transform: rotate(-10deg) scale(1.2) !important;
    color: #d4af37 !important;            /* 金色爪印 */
    text-shadow: 0 0 4px #8b0000 !important;
}
/* 右下角：玫瑰 / 血滴 / 性感红唇（暗喻淫乱色情） */
.group .bg-gray-100\/90::after {
    content: '🌹💋' !important;
    bottom: -10px !important;
    right: -8px !important;
    transform: rotate(10deg) scale(1.3) !important;
    color: #b0306e !important;            /* 玫瑰红 */
    text-shadow: 0 0 6px #ff69b4 !important;
    opacity: 0.25 !important;
}
/* 确保段落文字不受装饰影响，保持可读性 */
.group .bg-gray-100\/90 p,
.group .bg-gray-100\/90 div:not(.absolute) {
    position: relative !important;   /* 提升到装饰上方（默认即如此） */
    z-index: 2 !important;
}
/* ---------------------------------
 *   模块二：平台按钮美化
 *   ("mod、流式、评论、回到底部"等)
 * ---------------------------------
 */
.flex.items-center.gap-2.pb-2 > button {
    background: rgba(30, 15, 20, 0.7) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    color: #f5e6d3 !important;               /* 羊皮纸色文字 */
    border: 2px ridge #b8860b !important;    /* 与气泡一致的浮雕金边 */
    border-radius: 30px !important;           /* 圆形胶囊按钮，更性感柔和 */
    box-shadow: 0 4px 0 #4a2c1a,              /* 立体下沉效果 */
                0 6px 12px rgba(0, 0, 0, 0.5) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;     /* 大写增强力量感 */
    letter-spacing: 0.5px !important;
    transition: all 0.15s ease-in-out !important;
    padding: 6px 20px !important;             /* 保持原有大小，仅微调 */
}
/* 悬停效果 —— 按下沉入暗影，同时 glow 变色 */
.flex.items-center.gap-2.pb-2 > button:hover {
    background: rgba(60, 25, 35, 0.8) !important;
    color: #ffdab9 !important;
    transform: translateY(3px) !important;    /* 向下移动，模拟按下 */
    box-shadow: 0 2px 0 #3a1f12,               /* 阴影减小，更有按下的感觉 */
                0 0 15px #b0306e !important;   /* 暧昧红光 */
    border-color: #d4af37 !important;
}
/* ---------------------------------
 *   模块三：多余元素隐藏 (原样保留)
 *   此处保持注释状态，不强制隐藏
 * ---------------------------------
 */
.MuiButtonBase-root.MuiButton-root.MuiButton-default.css-w13mdt,
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:nth-child(5),
.css-nkqe49 {
    /* display: none !important; */ /* 保持注释，不隐藏 */
}
/* ---------------------------------
 *   模块四：输入栏美化
 *   (仅修改颜色边框，不改变大小)
 * ---------------------------------
 */
#ai-chat-input {
    background: rgba(25, 15, 20, 0.6) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border: 2px ridge #b8860b !important;      /* 金色浮雕边框 */
    border-radius: 24px !important;             /* 圆润边缘 */
    color: #f0e0d0 !important;                  /* 暖白文字 */
    /* 内阴影加深层次，外阴影营造氛围 */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(180, 30, 30, 0.3),
                0 8px 18px rgba(0, 0, 0, 0.6) !important;
    /* 占位符颜色变浅 */
    &::placeholder {
        color: #b89e8c !important;
        opacity: 0.7 !important;
    }
}
/* 输入框父容器保持透明，不遮挡背景 */
#ai-chat-bottom-input {
    background: transparent !important;
    backdrop-filter: none !important;
}
/* 可选的滚动条美化（如果存在） */
::-webkit-scrollbar {
    width: 8px;
    background: #1a0c0c;
}
::-webkit-scrollbar-thumb {
    background: #b8860b;
    border-radius: 20px;
    border: 1px solid #4a2c1a;
}