/*!
 * aiceo.hk P0 视觉无障碍&可读性覆盖样式
 * 写入: 2026-05-02
 * 目标:
 *   1. 修复底部聊天输入区"黑底黑字"导致看不见的问题 (姚主席截图反馈)
 *   2. 全站强制满足 WCAG AA 对比度 (>=4.5:1)
 *   3. 不破坏既有视觉风格, 仅在文本不可读处兜底
 */

/* ---------- 1. 输入框 / Textarea / Composer 区域统一可读 ---------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input:not([type]),
textarea,
[contenteditable="true"],
[role="textbox"],
.chat-input,
.composer-input,
.message-input,
[data-testid*="input" i],
[class*="ChatInput" i],
[class*="composer" i] textarea,
[class*="composer" i] input {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    caret-color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

input::placeholder,
textarea::placeholder,
[contenteditable="true"][data-placeholder]::before {
    color: #6b7280 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #6b7280 !important;
}

input:focus,
textarea:focus,
[contenteditable="true"]:focus {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    outline: 2px solid #2563eb !important;
    outline-offset: 1px !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

/* ---------- 2. 修复底部 fixed/sticky composer 容器 ---------- */
[class*="composer" i],
[class*="footer-input" i],
[class*="bottom-bar" i],
[class*="ChatInput" i] {
    background-color: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    color: #1a1a1a !important;
}

/* 兼容深色 sticky 输入容器: 检测黑底背景, 改为白底+黑字 */
div[style*="background:#000"],
div[style*="background: #000"],
div[style*="background-color:#000"],
div[style*="background-color: #000"],
div[style*="background:rgb(0"],
div[style*="background-color:rgb(0"] {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* ---------- 3. 通用文本可读性兜底 ---------- */
/* 任何被显式设成纯白文字的元素, 当其父容器/自身不是深色时, 改为 #1a1a1a (除非父级是深色, 否则白字会瞎) */
/* 这里只针对常见的"白底白字"这种致命情况 */
*[style*="color:#fff"],
*[style*="color: #fff"],
*[style*="color:#ffffff"],
*[style*="color: #ffffff"],
*[style*="color:white"],
*[style*="color: white"] {
    /* 不直接覆盖, 因为可能在深色背景上是合理的; 不做强制 */
}

/* 对话气泡: 用户气泡浅绿+黑字, AI气泡白色+深色字 (规则保留) */
.user-message-bubble,
[class*="user-bubble" i],
[data-role="user-message"] {
    background-color: #dcf8c6 !important;
    color: #1a1a1a !important;
}

.assistant-message-bubble,
[class*="assistant-bubble" i],
[data-role="assistant-message"] {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

/* ---------- 4. P0 Composer 强制最高优先级修复 ---------- */
/* 兜住 react 注入的内联样式: 底部输入容器若 background 为黑/极深色, 强制白底 */
.aiceo-p0-composer-fix {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04) !important;
}

.aiceo-p0-composer-fix input,
.aiceo-p0-composer-fix textarea {
    background-color: #f9fafb !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

.aiceo-p0-composer-fix input::placeholder,
.aiceo-p0-composer-fix textarea::placeholder {
    color: #6b7280 !important;
}

/* ---------- 5. 语言切换浮层样式 ---------- */
#aiceo-lang-switcher {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 99998;
    display: flex;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(255,255,255,0.95);
    border: 1px solid #d1d5db;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-size: 12px;
    line-height: 1;
    backdrop-filter: blur(6px);
}

#aiceo-lang-switcher button {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #374151;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}

#aiceo-lang-switcher button:hover {
    background: #f3f4f6;
}

#aiceo-lang-switcher button.active {
    background: #2563eb;
    color: #ffffff !important;
    border-color: #1d4ed8;
}

@media (max-width: 480px) {
    #aiceo-lang-switcher {
        top: 4px;
        right: 4px;
        font-size: 11px;
    }
    #aiceo-lang-switcher button {
        padding: 3px 8px;
    }
}

/* ---------- 6. 三语自动问候浮层 ---------- */
#aiceo-greeting-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99997;
    max-width: min(420px, 92vw);
    padding: 18px 22px;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    border: 1px solid #e5e7eb;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#aiceo-greeting-banner.show {
    opacity: 1;
    pointer-events: auto;
}

#aiceo-greeting-banner .greeting-line {
    margin: 4px 0;
}

#aiceo-greeting-banner .greeting-line.primary {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
}

#aiceo-greeting-banner .close-btn {
    position: absolute;
    top: 6px;
    right: 10px;
    background: transparent;
    border: 0;
    color: #6b7280;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

/* ---------- 7. 加载动画"AI思考中" ---------- */
.aiceo-thinking-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.aiceo-thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6b7280;
    animation: aiceoBlink 1.4s infinite both;
}
.aiceo-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.aiceo-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiceoBlink {
    0%, 80%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}