/* =========================================
   🌸 1. 消息气泡区 (Message Bubbles)
   ========================================= */

/* 用户消息气泡：唯美粉橘渐变（象征五姐妹的温暖） */
#customized-question-content {
    background: linear-gradient(135deg, #ffafbd 0%, #ffc3a0 100%) !important;
    border-radius: 24px 24px 4px 24px !important;
    box-shadow: 0 4px 15px rgba(255, 175, 189, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 用户消息文本 */
#customized-question-content .markdown-body,
#customized-question-content .text-gray-900 {
    color: #2C2C2C !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

/* AI消息气泡：透亮樱花白粉色 */
#customized-answer-content {
    background: rgba(255, 250, 252, 0.95) !important;
    border-radius: 24px 24px 24px 4px !important;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2) !important;
    border: 1px solid #ffb6c1 !important;
}

/* AI消息文本 */
#customized-answer-content .markdown-body,
#customized-answer-content .text-gray-900 {
    color: #2C2C2C !important;
}

/* 顶部装饰条美化 */
#customized-question-content .bg-\[\#c9e1e9\] {
    background: #ff69b4 !important; /* 热恋粉 */
    border-radius: 10px !important;
}
#customized-answer-content .bg-\[\#F1CBCB\] {
    background: #ffb6c1 !important; /* 樱花粉 */
    border-radius: 10px !important;
}

/* 头像加上唯美光环 */
#customized-question-avatar, #customized-answer-avatar {
    border: 2px solid #ffb6c1 !important;
    box-shadow: 0 0 10px rgba(255, 182, 193, 0.5) !important;
    border-radius: 50% !important;
}

/* 消息操作按钮（复制/编辑/刷新等）- 悬浮变粉，绝不隐藏 */
#customized-copy-button:hover use,
#customized-edit-button:hover use,
#customized-reload-button:hover use,
#customized-delete-button:hover use {
    color: #ff69b4 !important;
    transition: color 0.3s ease !important;
}


/* =========================================
   🌸 2. 加载动画 (五等分的樱花旋转)
   ========================================= */

/* 1. 让原版的三个点变透明并停止动画，但保留位置不塌陷 */
#customized-answer-content [class*="dot-flashing"] {
    background-color: transparent !important;
    color: transparent !important;
    animation: none !important; 
}
#customized-answer-content [class*="dot-flashing"]::before,
#customized-answer-content [class*="dot-flashing"]::after {
    display: none !important; /* 隐藏左右两个多余的点 */
}

/* 2. 直接在加载节点上渲染五瓣樱花旋转 SVG */
#customized-answer-content [class*="dot-flashing"] {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    /* 注入五瓣粉色樱花 SVG 动画 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ff69b4'%3E%3Cpath d='M50,15 C40,35 25,40 50,55 C75,40 60,35 50,15 Z' transform='rotate(0 50 55)'/%3E%3Cpath d='M50,15 C40,35 25,40 50,55 C75,40 60,35 50,15 Z' transform='rotate(72 50 55)'/%3E%3Cpath d='M50,15 C40,35 25,40 50,55 C75,40 60,35 50,15 Z' transform='rotate(144 50 55)'/%3E%3Cpath d='M50,15 C40,35 25,40 50,55 C75,40 60,35 50,15 Z' transform='rotate(216 50 55)'/%3E%3Cpath d='M50,15 C40,35 25,40 50,55 C75,40 60,35 50,15 Z' transform='rotate(288 50 55)'/%3E%3Ccircle cx='50' cy='55' r='6' fill='%23ffb6c1'/%3E%3C/g%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 50 55;360 50 55' dur='3s' repeatCount='indefinite'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-left: 10px !important;
    transform: translateY(5px) !important; /* 微调位置居中 */
}


/* =========================================
   🌸 3. 界面控制区 (UI Controls)
   ========================================= */

/* 顶部控制栏：粉色玻璃拟态 */
.sticky.top-0 {
    background: rgba(255, 240, 245, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 2px solid rgba(255, 182, 193, 0.5) !important;
    box-shadow: 0 4px 15px rgba(255, 182, 193, 0.1) !important;
}

/* 底部输入框容器 */
.bg-white.border-\[1\.5px\] {
    border-color: #ffb6c1 !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 20px rgba(255, 182, 193, 0.15) !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

/* 输入框聚焦时的唯美发光 */
.bg-white.border-\[1\.5px\]:focus-within {
    border-color: #ff69b4 !important;
    box-shadow: 0 0 15px rgba(255, 105, 180, 0.3) !important;
}

/* 发送按钮：热恋粉色渐变 */
#ai-send-button {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(255, 154, 158, 0.4) !important;
}
#ai-send-button .icon-icon-send {
    color: #d81b60 !important; /* 深粉色确保图标清晰 */
}

/* 快捷按钮组 */
#ai-mod-button2 .MuiButton-outlinedPrimary {
    border-color: #ffb6c1 !important;
    color: #d81b60 !important;
    border-radius: 20px !important;
    background: rgba(255, 240, 245, 0.5) !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
    background: #ffb6c1 !important;
    color: #fff !important;
    border-color: #ff69b4 !important;
}


/* =========================================
   🌸 4. 评论区 (Comment Section)
   ========================================= */

/* 评论面板主容器：唯美粉白渐变 */
.absolute.bottom-0.z-20.inset-x-0.bg-white {
    background: linear-gradient(to bottom, #fff5f7 0%, #ffffff 100%) !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    box-shadow: 0 -5px 25px rgba(255, 182, 193, 0.25) !important;
    border-top: 2px solid #ffb6c1 !important;
}

/* 评论区标题 */
.text-lg.font-bold.pl-3 {
    color: #d81b60 !important;
    text-shadow: 0 1px 2px rgba(255, 182, 193, 0.3) !important;
}

/* 评分星星：闪耀的热恋粉 */
.MuiRating-iconFilled {
    color: #ff69b4 !important;
    filter: drop-shadow(0 0 4px rgba(255, 105, 180, 0.5)) !important;
}
.text-orange-500.w-14 {
    color: #d81b60 !important; /* 评分数字改粉色 */
}

/* 评论输入框 */
textarea[placeholder="发表评论"] {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid #ffb6c1 !important;
    border-radius: 16px !important;
    padding: 10px !important;
}
textarea[placeholder="发表评论"]:focus {
    outline: none !important;
    border-color: #ff69b4 !important;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.2) !important;
}

/* 评论发送按钮图标 */
svg[data-icon="Send03"] {
    color: #ff69b4 !important;
}

/* 评论列表用户名称 */
.group.ml-0 .text-sm.text-grey-600 span.font-bold {
    color: #d81b60 !important;
}

/* 评论列表头像框 */
.group.ml-0 img.rounded-full {
    border: 2px solid #ffb6c1 !important;
}