/* ========== ZIRVOX AI - Light Theme ========== */
/* Tema claro elegante - Preto e Branco */

html.light {
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --accent-color: #1a1a1a;
    --accent-light: rgba(0, 0, 0, 0.08);
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
}

/* ========== SELECTION ========== */
html.light ::selection {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #111827 !important;
}

html.light ::-moz-selection {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #111827 !important;
}

/* ========== BASE ========== */
html.light body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%) !important;
    color: #111827 !important;
}

/* ========== TYPOGRAPHY ========== */
html.light .text-white { color: #111827 !important; }
html.light .text-white\/90 { color: #1f2937 !important; }
html.light .text-white\/80 { color: #374151 !important; }
html.light .text-white\/70 { color: #4b5563 !important; }
html.light .text-white\/60 { color: #6b7280 !important; }
html.light .text-white\/50 { color: #6b7280 !important; }
html.light .text-white\/40 { color: #9ca3af !important; }
html.light .text-white\/30 { color: #9ca3af !important; }
html.light .text-white\/20 { color: #d1d5db !important; }

/* ========== SIDEBAR ========== */
html.light .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.03) !important;
}

html.light .conversation-sidebar-item {
    color: #6b7280 !important;
}

html.light .conversation-sidebar-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #374151 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .conversation-sidebar-item.active {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #111827 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.light .conversation-sidebar-item.active::before {
    background: #1a1a1a !important;
}

/* ========== CARDS ========== */
html.light .card-3d {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

html.light .card-3d::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) !important;
}

html.light .card-3d::after {
    background: none !important;
}

html.light .card-3d:hover {
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

html.light .card-light {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

html.light .card-light:hover {
    background: #fafbfc !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px) !important;
}

/* ========== BUTTONS ========== */
html.light .btn-primary {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

html.light .btn-primary::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
}

html.light .btn-primary:hover {
    background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

html.light .btn-secondary {
    background: #f3f4f6 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #374151 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

html.light .btn-secondary:hover {
    background: #e5e7eb !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #111827 !important;
}

html.light .btn-icon-sm {
    color: #9ca3af !important;
}

html.light .btn-icon-sm:hover {
    color: #374151 !important;
}

html.light .btn-icon-sm::before {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ========== INPUT FIELDS ========== */
html.light .input-field {
    background: #f9fafb !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #111827 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    border-radius: 16px !important;
}

html.light .input-field::placeholder {
    color: #9ca3af !important;
}

html.light .input-field:focus {
    background: #ffffff !important;
    border-color: #1a1a1a !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

html.light .input-field.text-sm {
    border-radius: 14px !important;
}

html.light .input-field-sm {
    background: #f9fafb !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #111827 !important;
}

html.light .input-field-sm::placeholder {
    color: #9ca3af !important;
}

html.light .input-field-sm:focus {
    background: #ffffff !important;
    border-color: #1a1a1a !important;
}

html.light [type='text'],
html.light [type='email'],
html.light [type='password'],
html.light [type='tel'],
html.light [type='number'],
html.light textarea,
html.light select {
    background-color: #f9fafb !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #111827 !important;
}

html.light [type='text']:focus,
html.light [type='email']:focus,
html.light [type='password']:focus,
html.light textarea:focus,
html.light select:focus {
    background-color: #ffffff !important;
    border-color: #1a1a1a !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

/* ========== CUSTOM SELECT ========== */
html.light .custom-select-trigger {
    background: #f9fafb !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #111827 !important;
}

html.light .custom-select-trigger:hover {
    background: #f3f4f6 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html.light .custom-select.open .custom-select-trigger {
    background: #ffffff !important;
    border-color: #1a1a1a !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

html.light .custom-select-trigger .arrow {
    color: #6b7280 !important;
}

html.light .custom-select-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

html.light .custom-select-option {
    color: #4b5563 !important;
}

html.light .custom-select-option:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #111827 !important;
}

html.light .custom-select-option.selected {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #111827 !important;
}

html.light .custom-select-option .check {
    color: #1a1a1a !important;
}

html.light .custom-select-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* ========== PROGRESS BAR ========== */
html.light .progress-bar {
    background: #e5e7eb !important;
}

html.light .progress-bar-fill {
    background: linear-gradient(90deg, #4b5563 0%, #1a1a1a 50%, #4b5563 100%) !important;
}

/* ========== MOBILE NAVIGATION ========== */
html.light .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(20px) !important;
}

html.light .mobile-nav-item {
    color: #9ca3af !important;
}

html.light .mobile-nav-item:hover {
    color: #6b7280 !important;
}

html.light .mobile-nav-item.active {
    color: #1a1a1a !important;
}

/* ========== CHAT COMPONENTS ========== */
html.light .chat-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light .chat-message.user {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light .chat-message-avatar {
    background: #f3f4f6 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light .chat-message-avatar.user {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html.light .chat-message-avatar .avatar-fallback {
    color: #6b7280 !important;
}

html.light .chat-message-avatar.user .avatar-fallback {
    color: #374151 !important;
}

html.light .chat-message-content p {
    color: #111827 !important;
}

html.light .chat-message-content pre {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light .chat-message-content code {
    color: #1a1a1a !important;
}

html.light .chat-message-content .inline-code {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #1a1a1a !important;
}

html.light .chat-input-container {
    background: linear-gradient(180deg, rgba(245, 247, 250, 0) 0%, rgba(245, 247, 250, 0.98) 30%, #f5f7fa 100%) !important;
}

html.light .chat-input-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
}

html.light .chat-input-box:focus-within {
    border-color: #1a1a1a !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

html.light .chat-textarea {
    color: #111827 !important;
}

html.light .chat-textarea::placeholder {
    color: #9ca3af !important;
}

html.light .chat-tool-btn {
    color: #9ca3af !important;
}

html.light .chat-tool-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #374151 !important;
}

html.light .chat-send-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

html.light .chat-send-btn:hover {
    background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.light .action-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #9ca3af !important;
}

html.light .action-btn:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #374151 !important;
}

/* ========== QUICK PROMPTS ========== */
html.light .quick-prompt-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html.light .quick-prompt-card:hover {
    background: #fafbfc !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

html.light .quick-prompt-card .material-symbols-outlined {
    color: #9ca3af !important;
}

html.light .quick-prompt-card:hover .material-symbols-outlined {
    color: #1a1a1a !important;
}

/* ========== MODALS ========== */
html.light #photoModal > div {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15) !important;
}

html.light #photoModal .border-b {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light #uploadArea {
    border-color: rgba(0, 0, 0, 0.2) !important;
    background: rgba(0, 0, 0, 0.02) !important;
}

html.light #uploadArea:hover {
    border-color: #1a1a1a !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

html.light #uploadArea .material-symbols-outlined {
    color: #6b7280 !important;
}

/* ========== TOGGLE SWITCH ========== */
html.light .peer + div {
    background: #e5e7eb !important;
}

html.light .peer:checked + div {
    background: #1a1a1a !important;
}

html.light .peer:checked + div::after {
    background: #ffffff !important;
}

/* ========== DANGER ZONE ========== */
html.light .border-red-500\/20 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.light .bg-red-500\/\[0\.02\] {
    background: rgba(239, 68, 68, 0.05) !important;
}

html.light .text-red-400\/80 {
    color: #dc2626 !important;
}

html.light .bg-red-500\/10 {
    background: rgba(239, 68, 68, 0.1) !important;
}

html.light .hover\:bg-red-500\/20:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* ========== SCROLLBAR ========== */
html.light ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.light ::-webkit-scrollbar-track {
    background: transparent;
}

html.light ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

html.light ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* ========== BORDERS ========== */
html.light .border-white\/\[0\.04\] {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light .border-white\/\[0\.08\] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* ========== BACKGROUNDS ========== */
html.light .bg-white\/\[0\.04\] {
    background: rgba(0, 0, 0, 0.03) !important;
}

html.light .bg-white\/\[0\.06\] {
    background: rgba(0, 0, 0, 0.04) !important;
}

html.light .bg-white\/\[0\.08\] {
    background: rgba(0, 0, 0, 0.05) !important;
}

html.light .bg-white\/10 {
    background: rgba(0, 0, 0, 0.06) !important;
}

html.light .bg-\[\#050505\] {
    background: #f5f7fa !important;
}

html.light .bg-\[\#0a0a0a\] {
    background: #ffffff !important;
}

html.light .bg-black\/80 {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* ========== STAT CARDS ========== */
html.light .stat-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* ========== SKELETON ========== */
html.light .skeleton {
    background: rgba(0, 0, 0, 0.06) !important;
}

html.light .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
}

html.light .skeleton-text {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* ========== LOGO ========== */
html.light .logo-zirvox {
    color: #111827 !important;
}

/* ========== HOVER STATES ========== */
html.light .hover\:bg-white\/\[0\.1\]:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

html.light .hover\:text-white:hover {
    color: #111827 !important;
}

/* ========== SEARCH INPUT ========== */
html.light input[placeholder="Buscar conversas..."] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #111827 !important;
}

html.light input[placeholder="Buscar conversas..."]::placeholder {
    color: #9ca3af !important;
}

html.light input[placeholder="Buscar conversas..."]:focus {
    background: #ffffff !important;
    border-color: #1a1a1a !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
}

html.light .sidebar .relative span.material-symbols-outlined {
    color: #9ca3af !important;
}

/* ========== AI MODEL SELECTOR ========== */
html.light .ai-model-selector {
    background: #f9fafb !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.light .ai-model-selector:hover {
    background: #f3f4f6 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html.light .ai-model-icon {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #374151 !important;
}

html.light .model-dropdown {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12) !important;
}

html.light .model-option:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

html.light .model-option.active {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ========== TYPING INDICATOR ========== */
html.light .typing-indicator {
    background: #f3f4f6 !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light .typing-indicator span {
    background-color: #9ca3af !important;
}

/* ========== CHIP BUTTONS ========== */
html.light .chip-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #6b7280 !important;
}

html.light .chip-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #374151 !important;
}

html.light .chip-btn.active {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1a1a1a !important;
}

/* ========== PLANS PAGE ========== */
html.light .bg-\[\#050505\]\/80 {
    background: rgba(255, 255, 255, 0.9) !important;
}

html.light header.fixed {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}


/* ========== ATTACHMENT PREVIEW ========== */
html.light #attachmentPreview {
    background: rgba(0, 0, 0, 0.02) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

html.light #attachmentPreview .file-name {
    color: #111827 !important;
}

html.light #attachmentPreview .file-size {
    color: #6b7280 !important;
}

html.light #attachmentPreview .remove-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #6b7280 !important;
}

html.light #attachmentPreview .remove-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #dc2626 !important;
}

/* ========== MIC BUTTON RECORDING ========== */
html.light .chat-tool-btn.recording,
html.light #micBtn.recording {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #dc2626 !important;
}

html.light .chat-tool-btn.recording:hover,
html.light #micBtn.recording:hover {
    background: rgba(239, 68, 68, 0.2) !important;
}