/* Nflix Chat Light Theme - overrides for chat.php when body.light-theme */

/* =============================================
   CSS VARIABLE OVERRIDES (chat-specific)
   ============================================= */

body.light-theme {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --accent-primary: #e50914;
    --accent-hover: #c5070f;
    --user-bubble: #c75065;
    --ai-bubble: #f0f0f0;
    --border-color: rgba(0, 0, 0, 0.1);
}

/* =============================================
   HEADER
   ============================================= */

body.light-theme .chat-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* =============================================
   RELATIONSHIP BAR
   ============================================= */

body.light-theme .relationship-bar {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* =============================================
   ACTION BAR
   ============================================= */

body.light-theme .action-bar {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .action-bar-btn:hover {
    color: white;
}

/* =============================================
   MESSAGES
   ============================================= */

/* AI messages */
body.light-theme .message-ai {
    background: var(--ai-bubble);
    color: #1a1a1a;
}

/* User messages stay red */
body.light-theme .message-user {
    color: white;
}

/* =============================================
   TYPING INDICATOR
   ============================================= */

body.light-theme .typing-dot {
    background: #999;
}

/* =============================================
   INPUT AREA
   ============================================= */

body.light-theme .input-container {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-theme .message-input {
    color: #1a1a1a;
}

body.light-theme .message-input::placeholder {
    color: #999;
}

body.light-theme .send-btn:disabled {
    background: #e0e0e0;
}

/* Cost badges */
body.light-theme .video-cost-badge,
body.light-theme .send-cost-badge,
body.light-theme .photo-cost-badge {
    color: #1a1a1a;
}

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */

body.light-theme .toast {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* =============================================
   MODALS
   ============================================= */

body.light-theme .modal {
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light-theme .modal-header {
    border-bottom: 1px solid #e0e0e0;
}

body.light-theme .modal-footer {
    border-top: 1px solid #e0e0e0;
}

body.light-theme .modal-close:hover {
    background: var(--accent-primary);
    color: white;
}

body.light-theme .modal-btn-secondary {
    background: #f0f0f0;
    color: #1a1a1a;
}

body.light-theme .modal-btn-secondary:hover {
    background: #e0e0e0;
}

body.light-theme .modal-btn-primary:disabled {
    background: #e0e0e0;
    color: #999;
}

/* =============================================
   GIFTS
   ============================================= */

body.light-theme .gift-item {
    background: #f5f5f5;
}

body.light-theme .gift-item.selected {
    background: rgba(229, 9, 20, 0.08);
}

/* =============================================
   DIARY
   ============================================= */

body.light-theme .diary-entry {
    background: #f5f5f5;
}

/* =============================================
   PROPOSAL
   ============================================= */

body.light-theme .proposal-progress {
    background: #f5f5f5;
}

body.light-theme .progress-bar-container {
    background: #e0e0e0;
}

/* =============================================
   PHOTO OFFER
   ============================================= */

body.light-theme .photo-offer {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.2);
}

body.light-theme .photo-offer-btn.decline {
    background: #f0f0f0;
    color: #666;
}

/* =============================================
   LOADING
   ============================================= */

body.light-theme .loading-spinner {
    border-color: #e0e0e0;
    border-top-color: var(--accent-primary);
}