/* =============================================
 * 镜像迷情风格聊天界面CSS样式表 (禁忌双生花定制版)
 * 包含：气泡美化、按钮样式、输入框设计、响应式布局
 * =============================================
 */

/* 
 * ---------------------------------
 *   模块一：对话气泡美化 (AI侧) - 粉紫渐变风格
 * ---------------------------------
 */

/* AI对话气泡容器样式 - 代表女友林晚晴的清纯粉 */
.group .bg-gray-100\/90 {
    background: linear-gradient(135deg, #fff5f9 0%, #ffebf3 100%) !important;
    border: 1px solid #ffb3d9 !important;
    border-radius: 18px 18px 18px 4px !important;
    box-shadow: 0 4px 12px rgba(255, 123, 172, 0.15) !important;
    color: #5a3e5c !important;
    padding: 16px 20px !important;
    margin: 12px 0 !important;
    position: relative !important;
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif !important;
    line-height: 1.7 !important;
}

/* 气泡小尾巴装饰 */
.group .bg-gray-100\/90::before {
    content: '' !important;
    position: absolute !important;
    left: -8px !important;
    top: 20px !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff5f9 !important;
    border-left: 1px solid #ffb3d9 !important;
    border-bottom: 1px solid #ffb3d9 !important;
    transform: rotate(45deg) !important;
    z-index: -1 !important;
}

/* 用户侧气泡样式 - 代表岳母苏雅的成熟紫 */
.text-gray-800 {
    background: linear-gradient(135deg, #f8f0ff 0%, #f0e6ff 100%) !important;
    border: 1px solid #d9c2ff !important;
    border-radius: 18px 18px 4px 18px !important;
    box-shadow: 0 4px 12px rgba(106, 90, 205, 0.15) !important;
    color: #4a3b6d !important;
    padding: 16px 20px !important;
    margin: 12px 0 !important;
    position: relative !important;
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif !important;
    line-height: 1.7 !important;
}

/* 用户气泡小尾巴装饰 */
.text-gray-800::after {
    content: '' !important;
    position: absolute !important;
    right: -8px !important;
    top: 20px !important;
    width: 16px !important;
    height: 16px !important;
    background: #f8f0ff !important;
    border-right: 1px solid #d9c2ff !important;
    border-bottom: 1px solid #d9c2ff !important;
    transform: rotate(-45deg) !important;
    z-index: -1 !important;
}

/* 
 * ---------------------------------
 *   模块二：平台按钮美化 - 双生花主题
 * ---------------------------------
 */

/* 操作按钮基础样式 - 清纯粉 */
.flex.items-center.gap-2.pb-2 > button,
button[class*="border"],
button[class*="rounded"] {
    background: linear-gradient(135deg, #ff7bac 0%, #ff4d94 100%) !important;
    color: #ffffff !important;
    border: 1px solid #e64d86 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 8px rgba(255, 123, 172, 0.3) !important;
    font-weight: 600 !important;
    font-family: 'Microsoft YaHei', sans-serif !important;
    text-transform: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    padding: 10px 20px !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 按钮悬停状态样式 */
.flex.items-center.gap-2.pb-2 > button:hover,
button[class*="border"]:hover,
button[class*="rounded"]:hover {
    background: linear-gradient(135deg, #ff4d94 0%, #ff7bac 100%) !important;
    color: #ffffff !important;
    border-color: #d81b60 !important;
    box-shadow: 0 6px 15px rgba(255, 77, 148, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* 按钮点击效果 */
.flex.items-center.gap-2.pb-2 > button:active,
button[class*="border"]:active,
button[class*="rounded"]:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 5px rgba(255, 77, 148, 0.3) !important;
}

/* 特殊按钮 - 代表禁忌的紫色 */
button.bg-purple-500,
button[class*="bg-purple"] {
    background: linear-gradient(135deg, #8a79d8 0%, #6a5acd 100%) !important;
    border-color: #5d4eb1 !important;
    box-shadow: 0 4px 8px rgba(106, 90, 205, 0.3) !important;
}

button.bg-purple-500:hover,
button[class*="bg-purple"]:hover {
    background: linear-gradient(135deg, #6a5acd 0%, #8a79d8 100%) !important;
    box-shadow: 0 6px 15px rgba(106, 90, 205, 0.4) !important;
}

/* 
 * ---------------------------------
 *   模块三：输入栏美化 - 暧昧渐变风格
 * ---------------------------------
 */

/* 聊天输入框基础样式 */
#ai-chat-input,
textarea[class*="border"],
input[class*="border"] {
    background-color: #fffafc !important;
    border: 2px solid #ffd6e7 !important;
    border-radius: 12px !important;
    color: #5a3e5c !important;
    font-family: 'Microsoft YaHei', sans-serif !important;
    font-size: 16px !important;
    padding: 14px 18px !important;
    box-shadow: 0 2px 8px rgba(255, 123, 172, 0.1) !important;
    transition: all 0.3s ease !important;
    resize: vertical !important;
    min-height: 50px !important;
}

/* 输入框底部容器样式 */
#ai-chat-bottom-input {
    background: linear-gradient(to top, rgba(255, 245, 249, 0.95), rgba(255, 245, 249, 0.8)) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid #ffebee !important;
    padding: 20px !important;
}

/* 输入框占位符文字样式 */
#ai-chat-input::placeholder,
textarea[class*="border"]::placeholder,
input[class*="border"]::placeholder {
    color: #c6a8c9 !important;
    font-style: italic !important;
    opacity: 0.8 !important;
}

/* 输入框聚焦状态样式 */
#ai-chat-input:focus,
textarea[class*="border"]:focus,
input[class*="border"]:focus {
    outline: none !important;
    border-color: #ff7bac !important;
    box-shadow: 0 0 0 3px rgba(255, 123, 172, 0.2), 0 4px 12px rgba(255, 123, 172, 0.15) !important;
    background-color: #fff5f9 !important;
}

/* 
 * ---------------------------------
 *   模块四：分离线美化 - 双色渐变
 * ---------------------------------
 */

/* 双生花风格分隔线 */
.separator,
hr[class*="separator"],
hr[class*="border"] {
    height: 2px !important;
    background: linear-gradient(to right, transparent, #ffb3d9, #b19cd9, transparent) !important;
    border: none !important;
    margin: 25px 0 !important;
    opacity: 0.6 !important;
    border-radius: 1px !important;
}

/* 
 * ---------------------------------
 *   模块五：详情框美化
 * ---------------------------------
 */

/* 详情框基础样式 */
details {
    background: linear-gradient(145deg, rgba(255, 245, 249, 0.9), rgba(248, 240, 255, 0.9)) !important;
    padding: 16px !important;
    margin: 20px 0 !important;
    border-left: 4px solid #ff7bac !important;
    border-radius: 12px !important;
    border: 1px solid #ffd6e7 !important;
    box-shadow: 0 4px 12px rgba(255, 123, 172, 0.1) !important;
    transition: all 0.3s ease !important;
    font-family: 'Microsoft YaHei', sans-serif !important;
}

/* 详情框标题样式 */
summary {
    color: #e64d86 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 0 !important;
    transition: color 0.3s ease !important;
    list-style: none !important;
    position: relative !important;
    padding-left: 28px !important;
}

/* 标题前的图标装饰 */
summary::before {
    content: '🌸' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    transition: transform 0.3s ease !important;
}

/* 打开的详情框标题样式 */
details[open] summary {
    margin-bottom: 15px !important;
    border-bottom: 1px solid rgba(255, 179, 217, 0.3) !important;
    padding-bottom: 12px !important;
}

details[open] summary::before {
    content: '🌹' !important;
    transform: translateY(-50%) rotate(180deg) !important;
}

/* 详情框悬停效果 */
details:hover {
    box-shadow: 0 6px 18px rgba(255, 123, 172, 0.2) !important;
    transform: translateY(-2px) !important;
    border-left-color: #6a5acd !important;
}

/* 
 * ---------------------------------
 *   模块六：文字与排版美化
 * ---------------------------------
 */

/* 基础文字样式与变量 */
:root {
    --pink-light: #ffb3d9;
    --pink-medium: #ff7bac;
    --pink-dark: #e64d86;
    --purple-light: #b19cd9;
    --purple-medium: #6a5acd;
    --purple-dark: #5d4eb1;
    --text-primary: #5a3e5c;
    --text-secondary: #8a6d8c;
}

/* 段落样式 */
p {
    font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif !important;
    line-height: 1.8 !important;
    letter-spacing: 0.3px !important;
    color: var(--text-primary) !important;
    margin: 12px 0 !important;
}

/* 强调文字样式 */
strong, b {
    color: var(--pink-dark) !important;
    font-weight: 600 !important;
}

/* 斜体文字样式 */
em, i {
    color: var(--purple-medium) !important;
    font-style: italic !important;
}

/* 链接样式 */
a {
    color: var(--purple-medium) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--purple-light) !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: var(--pink-dark) !important;
    border-bottom-style: solid !important;
}

/* 
 * ---------------------------------
 *   模块七：加载动画美化 - 双生花主题
 * ---------------------------------
 */

/* 隐藏原始加载元素 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 加载容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 100px !important;
    height: 100px !important;
    margin: 40px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
}

/* 双色光晕背景 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    width: 80px !important;
    height: 80px !important;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 123, 172, 0.4) 0%, transparent 70%),
        radial-gradient(circle at 70% 70%, rgba(106, 90, 205, 0.4) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
    animation: dualPulse 3s infinite alternate ease-in-out !important;
}

/* 双生花旋转核心 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><linearGradient id="dualGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23ff7bac;stop-opacity:1"/><stop offset="100%" style="stop-color:%236a5acd;stop-opacity:1"/></linearGradient></defs><g><path d="M30,50 Q50,20 70,50 Q50,80 30,50 Z" fill="url(%23dualGradient)"><animate attributeName="d" values="M30,50 Q50,20 70,50 Q50,80 30,50 Z;M35,50 Q50,25 65,50 Q50,75 35,50 Z;M30,50 Q50,20 70,50 Q50,80 30,50 Z" dur="2s" repeatCount="indefinite"/></path><path d="M50,30 Q80,50 50,70 Q20,50 50,30 Z" fill="url(%23dualGradient)" opacity="0.7"><animate attributeName="d" values="M50,30 Q80,50 50,70 Q20,50 50,30 Z;M50,35 Q75,50 50,65 Q25,50 50,35 Z;M50,30 Q80,50 50,70 Q20,50 50,30 Z" dur="2s" repeatCount="indefinite"/></path></g><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="4s" repeatCount="indefinite"/></svg>') !important;
    position: absolute !important;
    width: 60px !important;
    height: 60px !important;
    z-index: 2 !important;
    filter: drop-shadow(0 0 12px rgba(255, 123, 172, 0.6)) !important;
    animation: gentleFloat 3s infinite ease-in-out !important;
}

/* 动画关键帧 */
@keyframes dualPulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

/* 
 * ---------------------------------
 *   模块八：响应式布局适配
 * ---------------------------------
 */

/* 移动端适配 */
@media screen and (max-width: 768px) {
    /* 气泡适配 */
    .group .bg-gray-100\/90 {
        border-radius: 16px 16px 16px 4px !important;
        padding: 14px 16px !important;
        margin: 10px 0 !important;
        font-size: 15px !important;
    }
    
    .text-gray-800 {
        border-radius: 16px 16px 4px 16px !important;
        padding: 14px 16px !important;
        margin: 10px 0 !important;
        font-size: 15px !important;
    }
    
    /* 按钮适配 */
    .flex.items-center.gap-2.pb-2 > button,
    button[class*="border"],
    button[class*="rounded"] {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
    
    /* 输入框适配 */
    #ai-chat-input,
    textarea[class*="border"],
    input[class*="border"] {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }
    
    /* 详情框适配 */
    details {
        padding: 14px !important;
        margin: 16px 0 !important;
    }
    
    summary {
        font-size: 16px !important;
        padding-left: 26px !important;
    }
    
    summary::before {
        font-size: 16px !important;
    }
    
    /* 加载动画适配 */
    .flex.items-center.justify-center.w-6.h-5 {
        width: 80px !important;
        height: 80px !important;
        margin: 30px auto !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 60px !important;
        height: 60px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::after {
        width: 50px !important;
        height: 50px !important;
    }
}

/* 小屏幕手机适配 */
@media screen and (max-width: 480px) {
    .group .bg-gray-100\/90,
    .text-gray-800 {
        border-radius: 14px !important;
        padding: 12px 14px !important;
        margin: 8px 0 !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .flex.items-center.gap-2.pb-2 > button {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    #ai-chat-input {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }
}

/* 平板横屏适配 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .group .bg-gray-100\/90,
    .text-gray-800 {
        max-width: 85% !important;
    }
}

/* 大屏幕优化 */
@media screen and (min-width: 1200px) {
    .group .bg-gray-100\/90,
    .text-gray-800 {
        max-width: 75% !important;
    }
}

/* 减少动效偏好适配 */
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.w-6.h-5::after {
        animation: gentleFloat 6s infinite ease-in-out !important;
    }
    
    details:hover {
        transform: none !important;
    }
    
    button:hover {
        transform: none !important;
    }
}

/* 
 * ---------------------------------
 *   模块九：滚动条美化
 * ---------------------------------
 */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #fff5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #ffb3d9, #b19cd9);
    border-radius: 4px;
    border: 2px solid #fff5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #ff7bac, #6a5acd);
}

/* 
 * ---------------------------------
 *   模块十：特殊效果装饰
 * ---------------------------------
 */

/* 对话中的表情符号美化 */
.emoji, 
span[role="img"] {
    display: inline-block !important;
    animation: gentleBounce 2s infinite ease-in-out !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)) !important;
}

@keyframes gentleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* 代码块样式 */
code, pre {
    background: linear-gradient(145deg, #fff0f8, #f8f0ff) !important;
    border: 1px solid #ffd6e7 !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    font-family: 'Courier New', monospace !important;
    color: #e64d86 !important;
    margin: 4px 2px !important;
}

/* 引用块样式 */
blockquote {
    border-left: 4px solid #6a5acd !important;
    background: rgba(248, 240, 255, 0.3) !important;
    padding: 12px 20px !important;
    margin: 16px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    font-style: italic !important;
    color: #5d4eb1 !important;
}