/* 
 * --------------------------------------------
 *   模块一：对话气泡美化（AI侧）- 夏日卡通风
 * --------------------------------------------
 */
.group .bg-gray-100\/90 {
    /* 半透明背景：浅黄色，如夏日阳光透过纱帘 */
    background: rgba(255, 249, 219, 0.85) !important;
    /* 花边边框：橙色虚线，模拟夏日编织纹理 */
    border: 2px dashed #f9a826 !important;
    /* 柔和圆角，更显卡片亲和力 */
    border-radius: 16px !important;
    /* 轻微外阴影，增加立体感 */
    box-shadow: 0 6px 12px rgba(249, 168, 38, 0.2) !important;
    color: #000000 !important;
    padding: 12px !important;
    /* 相对定位，用于放置角落装饰 */
    position: relative !important;
    /* 添加四个角落的小圆点装饰（模拟夏日浆果/花瓣） */
    background-image: 
        radial-gradient(circle at 0% 0%, #ffb347 6px, transparent 6px),
        radial-gradient(circle at 100% 0%, #ffb347 6px, transparent 6px),
        radial-gradient(circle at 0% 100%, #ffb347 6px, transparent 6px),
        radial-gradient(circle at 100% 100%, #ffb347 6px, transparent 6px) !important;
    /* 确保背景图案在背景色之上但不覆盖文字 */
    background-repeat: no-repeat !important;
    background-size: 30px 30px !important; /* 控制装饰区域大小 */
}
/* 
 * --------------------------------------------
 *   模块二：平台按钮美化 - 夏日卡片风格
 * --------------------------------------------
 */
/* "mod、流式、评论、回到底部" 等按钮 */
.flex.items-center.gap-2.pb-2 > button {
    background: rgba(255, 241, 188, 0.8) !important;  /* 半透明奶油黄 */
    color: #3e2a1f !important;                         /* 深棕色文字，保持可读 */
    border: 2px dashed #ff8c42 !important;             /* 橙色虚线边框 */
    border-radius: 30px !important;                    /* 胶囊圆角，更现代 */
    box-shadow: 0 4px 0 #c57c1f !important;            /* 底部实影，模拟卡片抬升 */
    font-weight: 600 !important;
    text-transform: none !important;
    transition: all 0.15s ease-in-out !important;
    padding: 6px 20px !important;                      /* 保持原有大小比例 */
    /* 添加微小的斜纹背景，增加质感 */
    background-image: repeating-linear-gradient(45deg, rgba(255,255,200,0.3) 0px, rgba(255,255,200,0.3) 4px, transparent 4px, transparent 8px) !important;
    background-blend-mode: overlay !important;
}
/* 按钮悬停效果 - 模拟按下动作，同时背景加深 */
.flex.items-center.gap-2.pb-2 > button:hover {
    background: rgba(255, 231, 158, 0.9) !important;
    color: #2b1b12 !important;
    transform: translateY(4px) !important;              /* 向下移动，配合阴影 */
    box-shadow: 0 1px 0 #c57c1f !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-color: rgba(255, 255, 230, 0.7) !important;  /* 半透明浅米色 */
    border: 2px dashed #ffaa5e !important;                  /* 橙色虚线边框，与按钮呼应 */
    border-radius: 24px !important;                         /* 大圆角，柔和 */
    color: #2c1e12 !important;                              /* 深色文字，保持对比 */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05), 0 2px 4px rgba(249, 168, 38, 0.2) !important;
    padding: 10px 16px !important;                          /* 保持原有内边距 */
    font-size: 1rem !important;                             /* 确保字体大小不变 */
    line-height: 1.5 !important;
    /* 添加极淡的波浪背景，暗示夏日水面 */
    background-image: linear-gradient(180deg, transparent 0%, rgba(255,215,140,0.1) 100%) !important;
}
/* 输入框容器透明化，突出输入框本身（保持原有逻辑） */
#ai-chat-bottom-input { 
    background: transparent !important; 
    backdrop-filter: none !important; 
}
/* 
 * 可选：为整个聊天区域添加淡淡的背景纹理（不影响气泡透明性）
 * 若需要更浓夏日感，可取消下一段注释
 */
/*
body, .chat-container {
    background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="3" fill="%23f9a826" opacity="0.1"/><circle cx="50" cy="30" r="4" fill="%23ffb347" opacity="0.1"/></svg>') !important;
    background-repeat: repeat !important;
}
*/