/**
 * Text Visibility Fix
 * Fixes white text on white background issues
 * Ensures WCAG 4.5:1 contrast ratio for normal text
 *
 * @author iShowPlay Team
 * @version 1.0.0
 * @date 2025-09-24
 */

/* ==================== Global Text Color Fixes ==================== */

/* Ensure all text has proper contrast in light mode */
:root {
    --text-primary-fixed: #1a1d23;
    --text-secondary-fixed: #5c6370;
    --text-tertiary-fixed: #8b92a4;
}

/* Override any white text on white background */
body {
    color: var(--text-primary-fixed) !important;
}

/* ==================== Traditional Mode Fixes ==================== */

/* Prompt container text fixes */
.prompt-container,
.prompt-wrapper {
    color: var(--text-primary-fixed) !important;
}

.prompt-title {
    color: var(--text-primary-fixed) !important;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prompt-subtitle {
    color: var(--text-secondary-fixed) !important;
}

.prompt-input {
    color: var(--text-primary-fixed) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #e9ecef !important;
}

.prompt-input::placeholder {
    color: #adb5bd !important;
}

/* Quick prompt chips */
.quick-prompt-chip {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--text-primary-fixed) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.quick-prompt-chip span {
    color: var(--text-primary-fixed) !important;
}

.quick-prompt-chip:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Connector menu items */
.connector-item {
    color: var(--text-primary-fixed) !important;
}

.connector-label {
    color: var(--text-primary-fixed) !important;
}

.connector-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-primary-fixed) !important;
}

/* ==================== NLP Mode Fixes ==================== */

/* NLP interface text */
.nlp-interface {
    color: var(--text-primary-fixed) !important;
}

.nlp-chat-history {
    color: var(--text-primary-fixed) !important;
}

/* Message content fixes */
.message.assistant .message-content {
    background: #f1f3f5 !important;
    color: #333333 !important;
}

.message-text {
    color: inherit !important;
}

/* Input area fixes */
.nlp-input-area {
    background: white !important;
    color: var(--text-primary-fixed) !important;
}

.nlp-input {
    color: var(--text-primary-fixed) !important;
    background: white !important;
}

/* ==================== AI Results Section ==================== */

.ai-results-section {
    color: var(--text-primary-fixed) !important;
}

.content-section h4 {
    color: var(--text-primary-fixed) !important;
}

.content-preview {
    color: var(--text-secondary-fixed) !important;
    background: rgba(248, 249, 250, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.status-text {
    color: var(--text-secondary-fixed) !important;
}

/* ==================== Interface Tabs ==================== */

.interface-tabs {
    background: rgba(255, 255, 255, 0.95) !important;
}

.tab-btn {
    color: var(--text-primary-fixed) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.tab-btn.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 171, 0, 0.05) 100%) !important;
    border-color: rgba(255, 107, 0, 0.2) !important;
    color: var(--text-primary-fixed) !important;
}

/* ==================== Dark Mode Overrides ==================== */

[data-theme="dark"] body {
    color: #ffffff !important;
}

[data-theme="dark"] .prompt-container,
[data-theme="dark"] .prompt-wrapper {
    color: #ffffff !important;
}

[data-theme="dark"] .prompt-subtitle {
    color: #a8b3cf !important;
}

[data-theme="dark"] .prompt-input {
    color: #ffffff !important;
    background: rgba(42, 42, 42, 0.95) !important;
    border-color: #444 !important;
}

[data-theme="dark"] .quick-prompt-chip {
    background: linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(50, 50, 50, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .quick-prompt-chip span {
    color: #ffffff !important;
}

[data-theme="dark"] .connector-menu {
    background: rgba(30, 30, 30, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .connector-item,
[data-theme="dark"] .connector-label {
    color: #ffffff !important;
}

[data-theme="dark"] .nlp-interface,
[data-theme="dark"] .nlp-chat-history {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .message.assistant .message-content {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .nlp-input-area {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .nlp-input {
    color: #e0e0e0 !important;
    background: #2a2a2a !important;
    border-color: #444 !important;
}

[data-theme="dark"] .ai-results-section {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .content-section h4 {
    color: #ffffff !important;
}

[data-theme="dark"] .content-preview {
    color: #b0b0b0 !important;
    background: rgba(42, 42, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .status-text {
    color: #a8b3cf !important;
}

[data-theme="dark"] .interface-tabs {
    background: rgba(26, 26, 26, 0.95) !important;
}

[data-theme="dark"] .tab-btn {
    color: #e0e0e0 !important;
    background: rgba(42, 42, 42, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .tab-btn.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 171, 0, 0.08) 100%) !important;
    border-color: rgba(255, 107, 0, 0.3) !important;
    color: #ffffff !important;
}

/* ==================== Sidebar Chat History (Dark Mode) ==================== */

/* 側邊欄歷史對話文字顏色修正 - 確保 Dark Mode 下永遠是白色 */
[data-theme="dark"] .history-item,
[data-theme="dark"] .history-text,
[data-theme="dark"] .history-time {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .history-item.active {
    color: #ffffff !important;
}

[data-theme="dark"] .history-item.active .history-time {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* ==================== Additional Visibility Enhancements ==================== */

/* Ensure buttons have proper text visibility */
.action-btn {
    color: var(--text-primary-fixed) !important;
}

.send-btn {
    color: white !important; /* Keep white text on gradient background */
}

/* Product cards */
.product-cards {
    color: var(--text-primary-fixed) !important;
}

/* Selected platforms */
.selected-platforms {
    color: var(--text-primary-fixed) !important;
}

/* Welcome section */
.welcome-title {
    /* Gradient text is already handled */
}

.welcome-subtitle {
    color: var(--text-secondary-fixed) !important;
}

.action-title {
    color: var(--text-primary-fixed) !important;
    font-weight: 600 !important;
}

.action-desc {
    color: var(--text-secondary-fixed) !important;
}

/* Quick action cards */
.quick-action-card {
    color: var(--text-primary-fixed) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .quick-action-card {
    color: #ffffff !important;
    background: rgba(42, 42, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .action-title {
    color: #ffffff !important;
}

[data-theme="dark"] .action-desc {
    color: #a8b3cf !important;
}

/* Ensure sufficient contrast for all interactive elements */
a, button {
    min-height: 44px; /* Touch target size */
}

/* Focus styles for accessibility */
*:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body {
        color: #000000 !important;
    }

    [data-theme="dark"] body {
        color: #ffffff !important;
    }

    .prompt-input,
    .nlp-input {
        border-width: 3px !important;
    }
}

/* Print styles */
@media print {
    body {
        color: #000000 !important;
        background: white !important;
    }
}