/* =============================================
 * 夏日蝉鸣与背德 专属聊天界面CSS样式表
 * 包含：毛玻璃气泡、橙色系按钮、暗热氛围输入框、响应式布局
 * =============================================
 */

/* 
 * ---------------------------------
 *   模块一：对话气泡美化 (AI侧 & 用户侧) - 桑拿天毛玻璃风格
 * ---------------------------------
 */

/* AI对话气泡容器样式 - 代表潮湿闷热的暗热橙 */
.group .bg-gray-100\/90 {
    background: linear-gradient(135deg, rgba(255, 249, 242, 0.85) 0%, rgba(255, 232, 214, 0.85) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 215, 181, 0.8) !important;
    border-radius: 18px 18px 18px 4px !important;
    box-shadow: 0 6px 16px rgba(255, 107, 0, 0.08), inset 0 2px 5px rgba(255, 255, 255, 0.5) !important;
    color: #333333 !important;
    padding: 16px 20px !important;
    margin: 12px 0 !important;
    position: relative !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    line-height: 1.7 !important;
    transition: all 0.3s ease !important;
}

/* AI气泡悬停微光效果 */
.group .bg-gray-100\/90:hover {
    box-shadow: 0 8px 20px rgba(255, 107, 0, 0.12), inset 0 2px 5px rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 165, 0, 0.6) !important;
}

/* 气泡小尾巴装饰 */
.group .bg-gray-100\/90::before {
    content: '' !important;
    position: absolute !important;
    left: -7px !important;
    top: 20px !important;
    width: 14px !important;
    height: 14px !important;
    background: rgba(255, 249, 242, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    border-left: 1px solid rgba(255, 215, 181, 0.8) !important;
    border-bottom: 1px solid rgba(255, 215, 181, 0.8) !important;
    transform: rotate(45deg) !important;
    z-index: -1 !important;
}

/* 用户侧气泡样式 - 代表暗中窥视的暖灰白 */
.text-gray-800 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 245, 238, 0.9) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 165, 0, 0.3) !important;
    border-radius: 18px 18px 4px 18px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04), inset 0 2px 5px rgba(255, 255, 255, 0.8) !important;
    color: #444444 !important;
    padding: 16px 20px !important;
    margin: 12px 0 !important;
    position: relative !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    line-height: 1.7 !important;
}

/* 用户气泡小尾巴装饰 */
.text-gray-800::after {
    content: '' !important;
    position: absolute !important;
    right: -7px !important;
    top: 20px !important;
    width: 14px !important;
    height: 14px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-right: 1px solid rgba(255, 165, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 165, 0, 0.3) !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, rgba(255, 140, 0, 0.9) 0%, rgba(255, 107, 0, 0.9) 100%) !important;
    backdrop-filter: blur(5px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.2) !important;
    font-weight: bold !important;
    font-family: 'Segoe UI', sans-serif !important;
    text-transform: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !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, rgba(255, 150, 20, 1) 0%, rgba(230, 92, 0, 1) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 6px 15px rgba(255, 107, 0, 0.35) !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, 107, 0, 0.3) !important;
}

/* 特殊按钮 - 代表危险与背德的深沉色 */
button.bg-purple-500,
button[class*="bg-purple"] {
    background: linear-gradient(135deg, rgba(211, 84, 0, 0.9) 0%, rgba(180, 50, 0, 0.9) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 10px rgba(211, 84, 0, 0.3) !important;
}

button.bg-purple-500:hover,
button[class*="bg-purple"]:hover {
    background: linear-gradient(135deg, rgba(230, 100, 20, 1) 0%, rgba(200, 60, 0, 1) 100%) !important;
    box-shadow: 0 6px 15px rgba(211, 84, 0, 0.4) !important;
}

/* 
 * ---------------------------------
 *   模块三：输入栏美化 - 柔和毛玻璃聚焦
 * ---------------------------------
 */

/* 聊天输入框基础样式 */
#ai-chat-input,
textarea[class*="border"],
input[class*="border"] {
    background-color: rgba(255, 252, 248, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 215, 181, 0.8) !important;
    border-radius: 12px !important;
    color: #444444 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 16px !important;
    padding: 14px 18px !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    resize: vertical !important;
    min-height: 50px !important;
}

/* 输入框悬停状态 */
#ai-chat-input:hover,
textarea[class*="border"]:hover,
input[class*="border"]:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 165, 0, 0.6) !important;
}

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

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

/* 输入框聚焦状态样式 - 高端内阴影与光晕 */
#ai-chat-input:focus,
textarea[class*="border"]:focus,
input[class*="border"]:focus {
    outline: none !important;
    background-color: #ffffff !important;
    border-color: #ff6b00 !important;
    transform: translateY(-2px) scale(1.005) !important;
    box-shadow: 0 8px 20px rgba(255, 107, 0, 0.12), 
                0 0 0 4px rgba(255, 107, 0, 0.15), 
                inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* 
 * ---------------------------------
 *   模块四：分离线美化 - 热浪渐变
 * ---------------------------------
 */

/* 分隔线 */
.separator,
hr[class*="separator"],
hr[class*="border"] {
    height: 2px !important;
    background: linear-gradient(to right, transparent, rgba(255, 165, 0, 0.6), rgba(255, 107, 0, 0.8), rgba(255, 165, 0, 0.6), transparent) !important;
    border: none !important;
    margin: 25px 0 !important;
    opacity: 0.7 !important;
    border-radius: 1px !important;
}

/* 
 * ---------------------------------
 *   模块五：详情框美化 - 毛玻璃卡片
 * ---------------------------------
 */

/* 详情框基础样式 */
details {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 248, 240, 0.7)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 18px !important;
    margin: 20px 0 !important;
    border-left: 4px solid #ff6b00 !important;
    border-radius: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 215, 181, 0.6) !important;
    box-shadow: 0 6px 15px rgba(255, 107, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    font-family: 'Segoe UI', sans-serif !important;
}

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

/* 标题前的图标装饰 */
summary::before {
    content: '🔸' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s !important;
    color: #ff8c00 !important;
}

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

details[open] summary::before {
    content: '🔥' !important;
    transform: translateY(-50%) scale(1.2) !important;
}

/* 详情框悬停效果 */
details:hover {
    box-shadow: 0 10px 25px rgba(255, 107, 0, 0.12) !important;
    transform: translateY(-3px) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 248, 240, 0.85)) !important;
}

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

/* 基础文字样式与变量 */
:root {
    --text-primary: #333333;
    --text-secondary: #666666;
    --accent-orange: #ff6b00;
    --accent-dark: #d35400;
}

/* 段落样式 */
p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 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(--accent-dark) !important;
    font-weight: 600 !important;
    background: rgba(255, 165, 0, 0.1) !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
}

/* 斜体文字样式 */
em, i {
    color: #8c5a2b !important;
    font-style: italic !important;
}

/* 链接样式 */
a {
    color: var(--accent-orange) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(255, 107, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: var(--accent-dark) !important;
    border-bottom-style: solid !important;
    background: rgba(255, 107, 0, 0.05) !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: 70px !important;
    height: 70px !important;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.2) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    z-index: 1 !important;
    animation: heatPulse 2s 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><radialGradient id="heatGradient" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23ff6b00" stop-opacity="0.9"/><stop offset="100%" stop-color="%23ff8c00" stop-opacity="0"/></radialGradient></defs><circle cx="50" cy="50" r="15" fill="%23ff6b00"><animate attributeName="r" values="15;22;15" dur="1.5s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0.7;1" dur="1.5s" repeatCount="indefinite"/></circle><circle cx="50" cy="50" r="35" fill="url(%23heatGradient)"><animate attributeName="r" values="25;45;25" dur="1.5s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.8;0.1;0.8" dur="1.5s" repeatCount="indefinite"/></circle></svg>') !important;
    position: absolute !important;
    width: 60px !important;
    height: 60px !important;
    z-index: 2 !important;
    filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.4)) !important;
}

/* 动画关键帧 */
@keyframes heatPulse {
    0% { transform: scale(0.8); opacity: 0.4; }
    100% { transform: scale(1.5); opacity: 0.8; }
}

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

/* 移动端适配 */
@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;
    }
    
    .flex.items-center.justify-center.w-6.h-5 {
        width: 80px !important;
        height: 80px !important;
        margin: 30px auto !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;
    }
}

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

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

::-webkit-scrollbar-track {
    background: rgba(255, 249, 242, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(255, 165, 0, 0.4), rgba(255, 107, 0, 0.6));
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(255, 165, 0, 0.7), rgba(255, 107, 0, 0.9));
    border: 2px solid transparent;
    background-clip: padding-box;
}

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

/* 代码块样式 */
code, pre {
    background: rgba(255, 245, 235, 0.7) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 215, 181, 0.8) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    font-family: 'Courier New', monospace !important;
    color: #d35400 !important;
    margin: 4px 2px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.03) !important;
}

/* 引用块样式 */
blockquote {
    border-left: 4px solid #ff6b00 !important;
    background: linear-gradient(to right, rgba(255, 165, 0, 0.1), transparent) !important;
    padding: 12px 20px !important;
    margin: 16px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    font-style: italic !important;
    color: #8c5a2b !important;
}