/* =========================================================
   《圣剑学院的魔剑使》主题 UI - 修正稳定版
   ========================================================= */

/* ---------------------------------------------------------
   1. 圣剑士阵营（用户消息气泡）
   --------------------------------------------------------- */
#customized-question-content {
    background: linear-gradient(135deg, #F0F4F8, #D9E2EC) !important;
    border: 1px solid #8AB4F8 !important;
    box-shadow: 0 4px 15px rgba(138, 180, 248, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.8) !important;
    border-radius: 16px 16px 2px 16px !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
}
#customized-question-content:hover {
    box-shadow: 0 6px 20px rgba(138, 180, 248, 0.4) !important;
}
#customized-question-content .markdown-body {
    color: #1A1A1A !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}
/* 装饰条 */
#customized-question-content .bg-\[\#c9e1e9\] {
    background: #48CAE4 !important;
    box-shadow: 0 0 10px #48CAE4, 0 0 20px #48CAE4 !important;
    border-radius: 4px !important;
}

/* ---------------------------------------------------------
   2. 魔王眷属阵营（AI消息气泡）
   --------------------------------------------------------- */
#customized-answer-content {
    background: linear-gradient(135deg, #2A1134, #120817) !important;
    border: 1px solid #9D4EDD !important;
    box-shadow: 0 4px 20px rgba(157, 78, 221, 0.3), inset 0 0 15px rgba(26, 16, 37, 0.9) !important;
    border-radius: 16px 16px 16px 2px !important;
    transition: all 0.3s ease !important;
}
#customized-answer-content:hover {
    box-shadow: 0 6px 25px rgba(230, 57, 70, 0.3) !important;
    border-color: #E63946 !important;
}
#customized-answer-content .markdown-body {
    color: #F5F5F5 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}
/* 装饰条 */
#customized-answer-content .bg-\[\#F1CBCB\] {
    background: #E63946 !important;
    box-shadow: 0 0 10px #E63946, 0 0 20px #E63946 !important;
    border-radius: 4px !important;
}
/* 模型信息 (若存在) */
#customized-answer-content .text-purple-500 {
    color: #C77DFF !important;
    text-shadow: 0 0 5px rgba(199, 125, 255, 0.5) !important;
}
#customized-answer-content .text-orange-500 {
    color: #FF5400 !important;
    font-weight: 600 !important;
}

/* ---------------------------------------------------------
   3. 输入区（底部）
   --------------------------------------------------------- */
.bg-white.border-\[1\.5px\] {
    background: rgba(18, 24, 38, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid #48CAE4 !important;
    box-shadow: 0 0 20px rgba(72, 202, 228, 0.15) !important;
    border-radius: 16px !important;
}
#ai-chat-input {
    color: #E0FBFC !important;
}
#ai-chat-input::placeholder {
    color: #90E0EF !important;
    opacity: 0.6 !important;
}

/* 发送按钮 - 直接使用 ID 选择器，无需依赖子类 */
#ai-send-button {
    background: linear-gradient(135deg, #9D4EDD, #E63946) !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4) !important;
}
#ai-send-button:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 0 20px rgba(230, 57, 70, 0.7) !important;
}
/* 如果按钮内有 SVG 图标，继承颜色即可，无需专门选择器 */
#ai-send-button svg {
    fill: #FFFFFF !important;
}

/* ---------------------------------------------------------
   4. 加载动画（改进版，使用更通用的选择器）
   --------------------------------------------------------- */
/* 隐藏默认加载点 */
#customized-answer-content [class*="dot-flashing"],
#customized-answer-content .dot-flashing {
    display: none !important;
}

/* 选择加载容器 - 使用更可靠的选择器（假设容器有特定类） */
/* 这里用属性选择器匹配可能存在的类，而非硬编码 .flex.items-center 等 */
#customized-answer-content [class*="flex"][class*="items-center"][class*="justify-center"] {
    position: relative !important;
    width: 28px !important;
    height: 28px !important;
}

/* 如果上面不生效，可回退使用 ID 或更通用选择器，也可直接使用父级下的特定元素 */
#customized-answer-content .loading-indicator {  /* 需根据实际类名调整 */
    /* 若无此类，可省略或使用其他方式 */
}

/* 使用内联 SVG 作为加载动画（保持不变，但简化了选择器） */
#customized-answer-content [class*="flex"][class*="items-center"][class*="justify-center"]::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%239D4EDD' stroke-width='1.5' stroke-dasharray='10 5 4 5'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='6' fill='none' stroke='%23E63946' stroke-width='1.5' stroke-dasharray='6 4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 12 12' to='0 12 12' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='2' fill='%23E63946'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ---------------------------------------------------------
   5. 顶部控制栏（战术都市全息）
   --------------------------------------------------------- */
.sticky.top-0 {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(72, 202, 228, 0.3) !important;
}

#customized-model-selector {
    background: rgba(10, 15, 30, 0.7) !important;
    border: 1px solid #48CAE4 !important;
    color: #E0FBFC !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(72, 202, 228, 0.2) !important;
}

#ai-mod-button2 .MuiButton-outlinedPrimary {
    border-color: #9D4EDD !important;
    color: #C77DFF !important;
    background: rgba(26, 16, 37, 0.6) !important;
}
#ai-mod-button2 .MuiButton-outlinedPrimary:hover {
    background: rgba(157, 78, 221, 0.2) !important;
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.5) !important;
}

/* ---------------------------------------------------------
   战术输入区 - 深青色铭文覆写
   --------------------------------------------------------- */
#ai-chat-input {
    /* 纯正的深青色 (Dark Cyan) */
    color: #008B8B !important; 
    /* 字体加粗以增加在深色背景下的辨识度 */
    font-weight: 600 !important;
    /* 添加微弱的魔能辉光，防止文字完全融入黑暗 */
    text-shadow: 0 0 4px rgba(0, 139, 139, 0.4) !important;
}

/* 顺便把占位符也调成配套的暗青色 */
#ai-chat-input::placeholder {
    color: #005F6A !important;
    opacity: 0.7 !important;
}

/* 选中文本时的反色效果，确保深青色依然酷炫 */
#ai-chat-input::selection {
    background: #008B8B !important;
    color: #FFFFFF !important;
}