* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #5865F2;
    --secondary-color: #00D4AA;
    --text-dark: #1F2937;
    --text-light: #6B7280;
    --border-color: #E5E7EB;
    --bg-light: #F9FAFB;
    --bg-white: #FFFFFF;
    --chat-bg: #FFFFFF;
    --message-bg: #F3F4F6;
    --input-bg: #FFFFFF;
    --shadow: rgba(0, 0, 0, 0.1);
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }

.main-wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Internet connection error overlay */
#connection-error-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    color: white !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

#connection-error-overlay.show {
    display: flex !important;
}

.connection-error-content {
    text-align: center;
    padding: 40px;
    max-width: 500px;
    background: rgba(30, 30, 30, 0.95);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.connection-error-content .error-icon {
    font-size: 64px;
    margin-bottom: 20px;
    color: #EF4444;
}

.connection-error-content h2 {
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #EF4444;
}

.connection-error-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #ccc;
    line-height: 1.6;
}

.connection-error-content .retry-info {
    font-size: 14px;
    color: #888;
    margin-top: 20px;
}

/* Left Side - Video/Avatar */
.video-section {
    flex: 1;
    position: relative;
/* background: #000 url('https://rybka.ai/rybka_basic.jpg') center center no-repeat; */
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.status-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.status-overlay.show {
    display: flex;
}

/* Active (listening) state - green with pulse */
.status-overlay.active {
    background: rgba(76, 175, 80, 0.95);
    animation: pulse 2s ease-in-out infinite;
}

/* Thinking state - red, no pulse */
.status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
        transform: scale(1.02);
    }
}

.end-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s;
    display: none;
    pointer-events: auto;
}

.end-button.show {
    display: block;
}

.end-button:hover {
    background: rgba(220, 53, 69, 0.9);
}

/* Mute button */
.mute-button {
    position: absolute;
    top: 20px;
    right: 90px;
    background: rgba(76, 175, 80, 0.95);
    color: white;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.3s;
    border: none;
    gap: 6px;
    pointer-events: auto;
}

.mute-button.show {
    display: flex;
}

.mute-button:hover:not(:disabled) {
    background: rgba(67, 160, 71, 0.95);
    transform: scale(1.05);
}

.mute-button.muted {
    background: rgba(244, 67, 54, 0.95);
}

.mute-button.muted:hover:not(:disabled) {
    background: rgba(229, 57, 53, 0.95);
}

.mute-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Loading spinner */
.loading-spinner {
    position: absolute;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: white;
}

.loading-spinner .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.avatar-start-btn {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.avatar-start-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 35px;
    border-color: transparent transparent transparent white;
    margin-left: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    text-indent: 0;
}

.avatar-start-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
}

/* Right Side - Chat/Cart */
.chat-section {
    width: 360px;
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    border-left: 1px solid var(--border-color);
}

/* When shown by JS with display: block, force it back to flex */
.chat-section[style*="display: block"] {
    display: flex !important;
}

.chat-header {
    flex-shrink: 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.header-top {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.header-info {
    font-size: 11px;
    color: var(--text-light);
}

.cart-total-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.hide-cart-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    color: var(--text-dark);
}

.hide-cart-btn:hover {
    background: var(--bg-light);
    border-color: var(--text-light);
}

/* Language selector styling */
#languageSelector {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--text-dark);
}

#languageSelector:hover {
    border-color: var(--text-light);
}

/* Floating toggle button when chat is hidden */
.floating-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
    z-index: 1000;
    transition: all 0.3s;
    display: none;
    min-width: 160px;
    text-align: center;
}

.floating-toggle:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.5);
}

.floating-toggle.show {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Floating language selector - styled like basket button */
.floating-language {
    position: fixed;
    bottom: 20px;
    right: 190px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-dark);
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    opacity: 0.75;
    min-width: 100px;
    text-align: center;
}

.floating-language:hover:not(:disabled) {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.floating-language:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.floating-language.show {
    display: block;
}

/* Toggle functionality */
.chat-section.hidden {
    display: none;
}

.ai-banner {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    padding: 8px 16px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-banner:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.ai-banner a {
    color: white;
    text-decoration: underline;
    pointer-events: none;
}

.order-summary {
    padding: 18px 16px !important;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.order-summary h6,
.order-summary .checkout-btn {
    display: none !important;
}

.total-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.total-value span:first-child {
    color: var(--text-dark);
    font-weight: 500;
}

.total-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.checkout-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--secondary-color), #00B894);
    border: none;
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.5;
}

.checkout-btn:disabled {
    cursor: not-allowed;
}

.checkout-btn:not(:disabled) {
    opacity: 1;
}

/* Tab styling - active state with green background */
.chat-tabs {
    display: flex;
    padding: 12px 16px;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-white);
}

.chat-tabs .tab-btn {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
    color: #6c757d;
}

.chat-tabs .tab-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
    font-weight: 600;
}

.chat-tabs .btn-check:checked + .tab-btn i {
    color: white !important;
}

.chat-tabs .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

.tab-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dc3545;
    color: white;
    padding: 0 5px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    flex-shrink: 0;
}

.chat-content, .cart-content, .receipt-content, .desk-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.cart-content, .receipt-content, .desk-content {
    display: none;
}

/* Tab wrapper - allow wrapping */
.chat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}

.chat-tabs .tab-btn {
    flex: 0 1 auto;
    min-width: fit-content;
}

/* EXACT MATCH to your design - smaller fonts + animated dots */
.chat-content .chat-message {
    margin-bottom: 8px !important;
    clear: both !important;
    width: 100% !important;
}

.chat-content .message-bubble {
    border-radius: 12px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.chat-content .message-bubble.kuba-message {
    background: #E8E8E8 !important;
    color: #000 !important;
}

.chat-content .message-bubble.user-message {
    background: #5B68F5 !important;
    color: white !important;
}

.chat-content .message-header {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    flex-wrap: nowrap !important;
}

.chat-content .message-bubble.kuba-message .message-header {
    color: #666 !important;
}

.chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.85) !important;
}

.chat-content .message-header i {
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.chat-content .sender-name {
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

.chat-content .message-time {
    font-weight: 400 !important;
    font-size: 11px !important;
    opacity: 0.7 !important;
    flex-shrink: 0 !important;
}

.chat-content .message-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: inherit !important;
    margin: 0 !important;
}

/* Thinking indicator - EXACT same style as Kuba messages */
.chat-content .thinking-indicator {
    display: none !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

.chat-content .thinking-indicator.show {
    display: block !important;
}

.chat-content .thinking-bubble {
    background: #E8E8E8 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #666 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
}

.chat-content .thinking-bubble i {
    font-size: 14px !important;
    color: #666 !important;
    flex-shrink: 0 !important;
}

.chat-content .thinking-bubble > span {
    font-size: 11px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

.chat-content .thinking-dots {
    display: inline-flex !important;
    gap: 3px !important;
    align-items: center !important;
    height: 14px !important;
}

.chat-content .thinking-dots span {
    width: 5px !important;
    height: 5px !important;
    background: #666 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: thinking-bounce 1.4s infinite ease-in-out both !important;
}

.chat-content .thinking-dots span:nth-child(1) {
    animation-delay: -0.32s !important;
}

.chat-content .thinking-dots span:nth-child(2) {
    animation-delay: -0.16s !important;
}

.chat-content .thinking-dots span:nth-child(3) {
    animation-delay: 0s !important;
}

@keyframes thinking-bounce {
    0%, 80%, 100% {
        transform: translateY(0) scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: translateY(-8px) scale(1);
        opacity: 1;
    }
}

/* Remove ALL Bootstrap and old styles */
.chat-content .d-flex,
.chat-content .flex-shrink-0,
.chat-content .flex-grow-1,
.chat-content .ms-2,
.chat-content .mb-3,
.chat-content .bg-light,
.chat-content .bg-primary,
.chat-content .rounded,
.chat-content .p-3 {
    all: unset !important;
}

.message-input-area {
    flex-shrink: 0;
    padding: 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-white);
}

.message-input {
    display: flex;
    gap: 8px;
}

.message-input input[type="text"] {
    flex: 1;
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.message-input input[type="text"]:focus {
    border-color: var(--primary-color);
}

.message-input input[type="text"]:disabled {
    background: var(--bg-light);
    cursor: not-allowed;
    opacity: 0.6;
}

.message-input .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #4c5fd5);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
}

.message-input .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.message-input .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Status overlay with animated dots */
.status-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 4px;
}

.status-dots span {
    width: 5px;
    height: 5px;
    background: var(--bg-white);
    border-radius: 50%;
    display: inline-block;
    animation: status-dot-bounce 1.4s infinite ease-in-out both;
}

.status-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.status-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.status-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes status-dot-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Klono.ai logo in bottom-left corner */
.klono-logo {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 9999 !important;
    opacity: 0.85;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.klono-logo img {
    height: 32px;
    width: auto;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.klono-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Unified empty state styling */
.empty-chat-message,
.empty-cart-message,
.empty-receipt-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-light);
    text-align: center;
    padding: 2rem 1.5rem;
}

.empty-chat-message i,
.empty-cart-message i,
.empty-receipt-message i {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: #9CA3AF;
    opacity: 1;
}

.empty-chat-message h5,
.empty-cart-message h5,
.empty-receipt-message h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.empty-chat-message p,
.empty-cart-message p,
.empty-receipt-message p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #9CA3AF;
    margin: 0;
    max-width: 320px;
}

/* Hide Kasa (checkout) button */
#checkoutBtnHeader,
.checkout-btn {
    display: none !important;
}

/* Receipt styling */
.receipt-box {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.05), rgba(0, 212, 170, 0.05));
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .main-wrapper {
        flex-direction: column;
    }

    .video-section {
        height: 50vh;
    }

    .chat-section {
        width: 100%;
        height: 50vh;
    }
    
    .klono-logo {
        bottom: 15px;
        left: 15px;
        z-index: 1000;
    }
    
    .klono-logo img {
        height: 28px;
    }
    
    .ai-banner {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .order-summary {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .header-top {
        padding: 8px 12px !important;
    }
    
    .header-info {
        font-size: 10px !important;
    }
    
    #languageSelector {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
    
    .chat-tabs {
        padding: 8px 12px !important;
        gap: 6px !important;
    }
    
    .chat-tabs .tab-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    
    .tab-badge {
        padding: 1px 4px !important;
        font-size: 9px !important;
        min-width: 16px !important;
    }
    
    .message-input-area {
        padding: 10px 12px !important;
    }
    
    .message-input input[type="text"] {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    
    .message-input .btn-primary {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
    
    .chat-content, .cart-content, .receipt-content {
        padding: 12px !important;
    }
    
    #background-video {
        transform: translate(-50%, -50%) scale(0.85) !important;
    }
}

@media (max-width: 480px) {
    .header-top {
        padding: 6px 10px !important;
    }
    
    .order-summary {
        padding: 8px 10px !important;
    }
    
    .total-value {
        font-size: 11px !important;
    }
    
    .total-amount {
        font-size: 15px !important;
    }
    
    .chat-tabs {
        padding: 6px 10px !important;
        gap: 4px !important;
    }
    
    .chat-tabs .tab-btn {
        padding: 5px 6px !important;
        font-size: 10px !important;
    }
    
    .message-input-area {
        padding: 8px 10px !important;
    }
    
    .message-input input[type="text"] {
        padding: 7px 9px !important;
        font-size: 11px !important;
    }
    
    .message-input .btn-primary {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
    
    .floating-toggle {
        bottom: 15px !important;
        right: 15px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-width: 120px !important;
    }
    
    .floating-language {
        bottom: 15px !important;
        right: 145px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-width: 80px !important;
    }
    
    .klono-logo {
        bottom: 15px !important;
        left: 15px !important;
    }
    
    .klono-logo img {
        height: 24px !important;
    }
    
    .ai-banner,
    div[onclick*="showKlonoInfo"],
    .chat-header .ai-banner {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    
    #background-video {
        transform: translate(-50%, -50%) scale(0.80) !important;
    }
}

@media (max-width: 375px) {
    .total-value {
        font-size: 10px !important;
    }
    
    .total-amount {
        font-size: 14px !important;
    }
    
    .klono-logo img {
        height: 20px !important;
    }
    
    .floating-toggle {
        padding: 6px 12px !important;
        font-size: 11px !important;
        min-width: 110px !important;
    }
    
    .floating-language {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-width: 70px !important;
        right: 130px !important;
    }
    
    #background-video {
        transform: translate(-50%, -50%) scale(0.75) !important;
    }
}
/* Domain Status Overlay */
#domain-status-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.90);
    z-index: 10004;
    display: flex;
    align-items: center;
    justify-content: center;
}

#domain-status-overlay.show {
    display: flex !important;
}

.status-overlay.speaking {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.95), rgba(234, 88, 12, 0.95)) !important;
    border: 2px solid rgba(251, 146, 60, 0.8) !important;
}

.status-overlay.speaking .status-dots.speaking span {
    background: rgba(255, 255, 255, 0.9);
}

.status-overlay.speaking .status-dots.speaking span:nth-child(1) {
    animation: speaking-pulse 1s ease-in-out infinite;
}

.status-overlay.speaking .status-dots.speaking span:nth-child(2) {
    animation: speaking-pulse 1s ease-in-out 0.2s infinite;
}

.status-overlay.speaking .status-dots.speaking span:nth-child(3) {
    animation: speaking-pulse 1s ease-in-out 0.4s infinite;
}

@keyframes speaking-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}
/* Prevent white flash during video loading */
.video-container {
    background-color: #000; /* Black background instead of white */
}

#background-video,
#background-image {
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

/* Ensure HeyGen video appears smoothly */
.video-container video:not(#background-video) {
    opacity: 0;
    animation: fadeInVideo 0.8s ease-in forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInVideo {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Prevent white flash during video loading */
.video-container {
    background-color: #000; /* Black background instead of white */
}

/* Background video/image - starts visible, fades out when avatar loads */
#background-video,
#background-image {
    opacity: 1;
    transition: opacity 1.2s ease-out;
    z-index: 1;
}

/* HeyGen avatar video - smooth fade in */
.video-container video:not(#background-video) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2; /* Above background */
    opacity: 0;
    animation: fadeInAvatar 1.5s ease-in forwards;
    animation-delay: 0.5s; /* Delay slightly so background fades first */
}

@keyframes fadeInAvatar {
    from { 
        opacity: 0;
        transform: scale(0.98);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* When avatar is speaking/active, ensure it's visible */
.video-container video[data-lk-local-participant],
.video-container video[data-lk-remote-participant] {
    z-index: 2;
}
.avatar-start-btn {
    width: 240px;  /* Doubled from 120px */
    height: 240px;  /* Doubled from 120px */
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: 8px solid rgba(255, 255, 255, 0.9);  /* Doubled from 4px */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0;
    text-indent: -9999px;
    overflow: visible;  /* Changed to visible for pulsing ring */
    animation: pulse-button 2s ease-in-out infinite;
}

/* Pulsing ring effect around the button */
.avatar-start-btn::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 3px solid rgba(40, 167, 69, 0.6);
    animation: pulse-ring 2s ease-in-out infinite;
}

.avatar-start-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 70px;  /* Doubled from 20px 0 20px 35px */
    border-color: transparent transparent transparent white;
    margin-left: 12px;  /* Doubled from 6px */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    text-indent: 0;
}

.avatar-start-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    animation: pulse-button-hover 1.5s ease-in-out infinite;
}

/* Pulsing animation */
@keyframes pulse-button {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5), 
                    0 0 0 0 rgba(40, 167, 69, 0.7);
    }
}

/* Pulsing ring animation - like the status overlay */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Faster pulse on hover */
@keyframes pulse-button-hover {
    0%, 100% {
        transform: scale(1.1);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 16px 64px rgba(40, 167, 69, 0.6),
                    0 0 0 8px rgba(40, 167, 69, 0.3);
    }
}
   /* Info Section Styling - Changed from alert red to info blue */
        .alert-section {
            background: linear-gradient(135deg, #fb923c, #f97316);
            padding: 12px 16px;
            margin: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            animation: slideDown 0.3s ease-out;
            display: none;
        }

        .alert-content {
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
            font-size: 14px;
            font-weight: 500;
        }

        .alert-content i.bi-exclamation-triangle-fill {
            font-size: 20px;
            flex-shrink: 0;
        }

        .alert-content span {
            flex: 1;
            line-height: 1.4;
        }

        .alert-close-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .alert-close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Language Dropdown Button Styling */
        .language-dropdown-button {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 500;
            color: #495057;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: auto;
            justify-content: center;
        }
        
        /* Floating Language Button (white style) */
        #floating-language-button {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            color: #495057;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border-radius: 50px;
            min-width: auto;
        }
        
        #floating-language-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            background: #f8f9fa;
        }

        .language-dropdown-button:hover {
            background: #f8f9fa;
            border-color: #adb5bd;
        }

        .language-dropdown-menu {
            position: absolute;
            top: calc(100% + 5px);
            right: 0;
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            min-width: 120px;
            display: none;
            z-index: 1000;
            padding: 4px 0;
        }

        .language-option {
            width: 100%;
            padding: 10px 15px;
            border: none;
            background: var(--bg-white);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            text-align: left;
            border-radius: 4px;
            transition: background 0.2s;
            color: #495057;
        }

        .language-option:hover {
            background: #f8f9fa;
        }

        .language-option.selected {
            background: #e7f5ff;
            color: #0c63e4;
            font-weight: 600;
        }

        .language-option .check-icon {
            margin-left: auto;
            color: #0c63e4;
            font-size: 16px;
        }
    /* Ensure body covers entire viewport including safe areas */
  @media (min-width: 481px) {
    .klono-logo {
        bottom: 20px !important;
        left: 20px !important;
    }
    
    #floating-keyboard-btn {
        bottom: 20px !important;
        right: 275px !important;
    }
    
    #floating-language-container {
        bottom: 20px !important;
        right: 190px !important;
    }
    
    #floating-toggle {
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* Even smaller phones */
@media (max-width: 375px) {
    .klono-logo {
        bottom: 85px !important;
        left: 12px !important;
    }
    
    .klono-logo img {
        height: 24px !important;
    }
    
    #floating-keyboard-btn {
        bottom: 104px !important;
        right: 12px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    
    #floating-language-container {
        bottom: 58px !important;
        right: 12px !important;
    }
    
    #floating-language-button {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-width: 70px !important;
    }
    
    #floating-toggle {
        bottom: 12px !important;
        right: 12px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
        min-width: 110px !important;
    }
}
/* ========================================
   KEYBOARD ICON BUTTON IN INPUT AREA
   ======================================== */

.message-input-area {
    position: relative;
}

.message-input-area .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Keyboard Icon Button Styling */
.keyboard-icon-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-right: none;
    color: #495057;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px 0 0 4px;
    flex-shrink: 0;
}

.keyboard-icon-btn:hover {
    background: #f8f9fa;
}

.keyboard-icon-btn:active {
    background: #e9ecef;
    transform: scale(0.95);
}

/* Input Field Adjustments */
.message-input-area .message-input {
    border-left: none !important;
    border-radius: 0 !important;
    flex: 1;
}

/* Send Button Adjustments */
.message-input-area .send-btn {
    border-radius: 0 4px 4px 0 !important;
    flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .keyboard-icon-btn {
        padding: 8px 10px;
    }
    
    .keyboard-icon-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Ensure proper alignment on all screen sizes */
.message-input-area .input-group > * {
    margin: 0 !important;
}

/* Focus state for input */
.message-input-area .message-input:focus {
    box-shadow: none;
    border-color: #dee2e6;
}

/* When keyboard button is next to focused input */
.message-input-area .message-input:focus + .keyboard-icon-btn,
.keyboard-icon-btn:focus + .message-input,
.keyboard-icon-btn:active + .message-input {
    border-color: #dee2e6;
}
/* ============================================
   DESK TAB - MINIMAL CSS (Add to style.css)
   ============================================ */

/* Hide desk content by default */
.desk-content {
    display: none;
    flex-direction: column;
    height: calc(100vh - 220px);
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
}

/* Show desk content when desk tab is checked */
#deskOption:checked ~ .desk-content {
    display: flex;
}

/* Hide other content when desk tab is active */
#deskOption:checked ~ .chat-content,
#deskOption:checked ~ .cart-content,
#deskOption:checked ~ .receipt-content {
    display: none;
}

/* Empty desk message styling */
.empty-desk-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #6c757d;
    padding: 40px 20px;
}

.empty-desk-message i {
    font-size: 64px;
    margin-bottom: 20px;
    color: #dee2e6;
}

.empty-desk-message h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.empty-desk-message p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .desk-content {
        height: calc(100vh - 200px);
        padding: 15px;
    }
}
/* ============================================
   DESK TAB STYLING
   ============================================ */

/* Empty Desk Message */
.empty-desk-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #6c757d;
    padding: 40px 20px;
}

.empty-desk-message i {
    font-size: 64px;
    margin-bottom: 20px;
    color: #dee2e6;
}

.empty-desk-message h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.empty-desk-message p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .empty-desk-message {
        padding: 30px 15px;
    }
    
    .empty-desk-message i {
        font-size: 48px;
    }
    
    .empty-desk-message h5 {
        font-size: 16px;
    }
    
    .empty-desk-message p {
        font-size: 13px;
    }
}
/* ============================================
   DESK DOCUMENTS STYLING
   ============================================ */

.desk-documents {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

.desk-document-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-white);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.desk-document-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #cbd5e1;
}

.desk-doc-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
}

.desk-doc-icon i {
    font-size: 28px;
}

.desk-doc-content {
    flex: 1;
    min-width: 0;
}

.desk-doc-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desk-doc-description {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 8px 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.desk-doc-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #9ca3af;
}

.desk-doc-type {
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
}

.desk-doc-size,
.desk-doc-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.desk-doc-action {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 18px;
    transition: all 0.2s;
}

.desk-document-card:hover .desk-doc-action {
    color: #3b82f6;
    transform: scale(1.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .desk-document-card {
        padding: 12px;
        gap: 12px;
    }
    
    .desk-doc-icon {
        width: 40px;
        height: 40px;
    }
    
    .desk-doc-icon i {
        font-size: 24px;
    }
    
    .desk-doc-title {
        font-size: 14px;
    }
    
    .desk-doc-description {
        font-size: 12px;
    }
    
    .desk-doc-meta {
        font-size: 11px;
        gap: 8px;
    }
}

/* Very small mobile */
@media (max-width: 480px) {
    .desk-doc-action {
        display: none;
    }
    
    .desk-doc-meta {
        flex-direction: column;
        gap: 4px;
    }
}
        /* Desk tab functionality */
        #chatOption:checked ~ #chatContent { display: block !important; }
        #chatOption:checked ~ #cartContent,
        #chatOption:checked ~ #receiptContent,
        #chatOption:checked ~ #deskContent { display: none !important; }
        
        #cartOption:checked ~ #cartContent { display: block !important; }
        #cartOption:checked ~ #chatContent,
        #cartOption:checked ~ #receiptContent,
        #cartOption:checked ~ #deskContent { display: none !important; }
        
        #receiptOption:checked ~ #receiptContent { display: block !important; }
        #receiptOption:checked ~ #chatContent,
        #receiptOption:checked ~ #cartContent,
        #receiptOption:checked ~ #deskContent { display: none !important; }
        
        #deskOption:checked ~ #deskContent { display: block !important; }
        #deskOption:checked ~ #chatContent,
        #deskOption:checked ~ #cartContent,
        #deskOption:checked ~ #receiptContent { display: none !important; }


/* ============================================
   INTERRUPT BUTTON STYLES
   Add this to your main CSS file
   ============================================ */

/* Interrupt button styling - appears when avatar is speaking */
/* ============================================
   INTERRUPT BUTTON STYLES
   Add this to your main CSS file
   ============================================ */

/* Interrupt button styling - appears when avatar is speaking */
.status-overlay .interrupt-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-left: 8px;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    position: relative;
    z-index: 10000;
    pointer-events: auto;
    min-width: 60px;
    height: 24px;
}

.status-overlay .interrupt-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.status-overlay .interrupt-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.3);
}

.status-overlay .interrupt-btn svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    pointer-events: none;
}

/* CRITICAL: Ensure status overlay doesn't block button clicks */
.status-overlay {
    pointer-events: none;
    z-index: 9999;
}

.status-overlay * {
    pointer-events: auto;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .status-overlay .interrupt-btn {
        padding: 5px 10px;
        font-size: 10px;
        margin-left: 8px;
        gap: 4px;
    }
    
    .status-overlay .interrupt-btn svg {
        width: 10px;
        height: 10px;
    }
}

/* Small screen - make button more compact */
@media (max-width: 480px) {
    .status-overlay .interrupt-btn {
        padding: 4px 8px;
        font-size: 9px;
        margin-left: 6px;
        border-radius: 6px;
    }
}

/* Enhanced visual feedback for touch devices */
@media (hover: none) and (pointer: coarse) {
    .status-overlay .interrupt-btn:active {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(0.95);
    }
}

/* Animation for button appearance */
@keyframes fadeInInterrupt {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.status-overlay.thinking .interrupt-btn {
    animation: fadeInInterrupt 0.3s ease-out;
}

/* Ensure button doesn't wrap on small screens */
.status-overlay {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.status-overlay span {
    white-space: nowrap;
}

/* Optional: Add a pulsing effect to make it more noticeable */
@keyframes pulseInterrupt {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.status-overlay .interrupt-btn.pulse {
    animation: pulseInterrupt 2s ease-in-out infinite;
}

/* Disabled state (if needed) */
.status-overlay .interrupt-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .status-overlay .interrupt-btn {
        border: 2px solid white;
        background: rgba(255, 255, 255, 0.3);
    }
}
/* ============================================
   RYBKA.AI - MAIN STYLES WITH DARK MODE SUPPORT
   Version: 2.0.0-DARK-MODE
   ============================================ */

/* ============================================
   CSS VARIABLES - LIGHT MODE (DEFAULT)
   ============================================ */
:root {
    /* Primary Colors */
    --primary-color: #10b981;
    --primary-hover: #059669;
    --primary-light: rgba(16, 185, 129, 0.1);
    
    /* Background Colors */
    --bg-white: #ffffff;
    --bg-light: #f9fafb;
    --bg-gray: #f3f4f6;
    --bg-dark: #111827;
    
    /* Text Colors */
    --text-dark: #111827;
    --text-medium: #374151;
    --text-light: #6b7280;
    --text-lighter: #9ca3af;
    
    /* Border Colors */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    --border-dark: #d1d5db;
    
    /* Status Colors */
    --success-color: #10b981;
    --success-bg: #d1fae5;
    --warning-color: #f59e0b;
    --warning-bg: #fef3c7;
    --error-color: #ef4444;
    --error-bg: #fee2e2;
    --info-color: #3b82f6;
    --info-bg: #dbeafe;
    
    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #10b981, #059669);
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-warning: linear-gradient(135deg, #fb923c, #f97316);
    --gradient-info: linear-gradient(135deg, #3b82f6, #2563eb);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */
[data-theme="dark"] {
    /* Primary Colors - slightly adjusted for dark mode */
    --primary-color: #10b981;
    --primary-hover: #34d399;
    --primary-light: rgba(16, 185, 129, 0.15);
    
    /* Background Colors */
    --bg-white: #1f2937;
    --bg-light: #111827;
    --bg-gray: #374151;
    --bg-dark: #f9fafb;
    
    /* Text Colors */
    --text-dark: #f9fafb;
    --text-medium: #e5e7eb;
    --text-light: #d1d5db;
    --text-lighter: #9ca3af;
    
    /* Border Colors */
    --border-color: #374151;
    --border-light: #4b5563;
    --border-dark: #6b7280;
    
    /* Status Colors */
    --success-color: #34d399;
    --success-bg: rgba(16, 185, 129, 0.2);
    --warning-color: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.2);
    --error-color: #f87171;
    --error-bg: rgba(239, 68, 68, 0.2);
    --info-color: #60a5fa;
    --info-bg: rgba(59, 130, 246, 0.2);
    
    /* Shadow - darker for dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    
    /* Gradients remain similar but work well on dark backgrounds */
    --gradient-primary: linear-gradient(135deg, #10b981, #34d399);
    --gradient-success: linear-gradient(135deg, #10b981, #34d399);
    --gradient-warning: linear-gradient(135deg, #fb923c, #fbbf24);
    --gradient-info: linear-gradient(135deg, #3b82f6, #60a5fa);
}

/* ============================================
   DESK TAB - EMPTY STATE
   ============================================ */
.empty-desk-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    background: var(--bg-white);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.empty-desk-message i {
    font-size: 3rem;
    margin-bottom: 16px;
    display: block;
    color: var(--text-light);
}

.empty-desk-message h5 {
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: 600;
}

.empty-desk-message p {
    color: var(--text-light);
    margin: 0;
}

/* ============================================
   DESK BOOKING ITEMS
   ============================================ */
.desk-items-container {
    padding: 16px;
}

.desk-item-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.desk-item-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.desk-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.desk-item-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}

.desk-item-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.desk-item-status.confirmed {
    background: var(--success-color);
    color: white;
}

.desk-item-status.pending {
    background: var(--warning-color);
    color: white;
}

.desk-item-status.cancelled {
    background: var(--error-color);
    color: white;
}

.desk-item-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light);
}

.desk-item-detail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.desk-item-detail i {
    width: 16px;
    text-align: center;
}

/* ============================================
   RECEIPT STYLES
   ============================================ */
.receipt-box {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.receipt-box .fw-bold {
    font-size: 12px;
    color: var(--text-light);
}

.receipt-box .fs-4 {
    font-size: 1.5rem;
}

.receipt-box .fs-5 {
    font-size: 1.25rem;
}

/* Pickup Code Box - Special styling */
.receipt-box.pickup-code {
    background: var(--gradient-success);
    border: none;
}

.receipt-box.pickup-code .code-display {
    font-size: 36px;
    font-weight: 800;
    color: white;
    letter-spacing: 4px;
    font-family: 'Courier New', monospace;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.receipt-box.pickup-code .code-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

.receipt-box.pickup-code .code-instruction {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
}

/* Map Container */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    height: 200px;
    transition: border-color var(--transition-normal);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.map-info {
    margin-top: 8px;
    padding: 8px;
    border-radius: 8px;
    font-size: 11px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.map-info .fw-semibold {
    color: var(--text-dark);
}

.map-info .store-hours {
    font-size: 10px;
    color: var(--text-light);
}

/* Empty Receipt State */
.empty-receipt-message {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--bg-white);
    transition: background-color var(--transition-normal);
}

.empty-receipt-message i {
    font-size: 3rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.empty-receipt-message h5 {
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.empty-receipt-message p {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* ============================================
   CHAT STYLES
   ============================================ */
.empty-chat-message {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-light);
}

.empty-chat-message i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.empty-chat-message h5 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.empty-chat-message p {
    color: var(--text-light);
    margin: 0;
}

/* Chat Messages */
.chat-message {
    margin-bottom: 8px;
    clear: both;
    overflow: auto;
}

.message-bubble {
    border-radius: 12px;
    padding: 12px 16px;
    max-width: 85%;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.message-bubble.kuba-message {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    float: left;
}

.message-bubble.user-message {
    background: var(--primary-color);
    color: white;
    float: right;
    border: 1px solid var(--primary-color);
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.message-bubble.kuba-message .message-header {
    color: var(--text-light);
}

.message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9);
}

.message-header i {
    font-size: 14px;
}

.sender-name {
    font-weight: 600;
}

.message-time {
    margin-left: auto;
    opacity: 0.7;
    font-size: 11px;
}

.message-text {
    font-size: 14px;
    line-height: 1.5;
}

.message-bubble.kuba-message .message-text {
    color: var(--text-dark);
}

.message-bubble.user-message .message-text {
    color: white;
}

/* ============================================
   ALERT SECTIONS
   ============================================ */
.alert-section {
    padding: 12px 16px;
    margin: 0;
    box-shadow: var(--shadow-md);
    display: block;
    border-radius: 0;
}

.alert-section.phone-alert {
    background: var(--gradient-success);
}

.alert-section.email-alert {
    background: var(--gradient-info);
}

.alert-section.info-alert {
    background: var(--gradient-warning);
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.alert-content i {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-content span {
    flex: 1;
    line-height: 1.4;
}

.alert-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.alert-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    font-size: 14px;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   INPUT FIELDS
   ============================================ */
.message-input,
.form-control {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 10px 16px;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.message-input:focus,
.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.message-input:disabled,
.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-gray);
}

.message-input::placeholder,
.form-control::placeholder {
    color: var(--text-lighter);
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
.thinking-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 12px;
    animation: pulse 1.5s ease-in-out infinite;
}

.thinking-indicator i {
    color: var(--primary-color);
}

.thinking-indicator span {
    color: var(--text-light);
    font-size: 13px;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-success {
    color: var(--success-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-error {
    color: var(--error-color) !important;
}

.text-info {
    color: var(--info-color) !important;
}

.fw-bold {
    font-weight: 700;
}

.fw-semibold {
    font-weight: 600;
}

.fw-medium {
    font-weight: 500;
}

.d-none {
    display: none !important;
}

.hidden {
    visibility: hidden;
    opacity: 0;
}

.w-100 {
    width: 100%;
}

.text-center {
    text-align: center;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .message-bubble {
        max-width: 90%;
    }
    
    .desk-items-container {
        padding: 12px;
    }
    
    .desk-item-card {
        padding: 12px;
    }
    
    .receipt-box {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .message-bubble {
        max-width: 95%;
    }
    
    .empty-desk-message,
    .empty-chat-message,
    .empty-receipt-message {
        padding: 2rem 1rem;
    }
    
    .empty-desk-message i,
    .empty-chat-message i,
    .empty-receipt-message i {
        font-size: 2.5rem;
    }
}

/* ============================================
   DARK MODE TOGGLE BUTTON (Optional)
   ============================================ */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.dark-mode-toggle i {
    font-size: 20px;
    color: var(--text-dark);
}

/* ============================================
   SMOOTH TRANSITIONS ON THEME CHANGE
   ============================================ */
* {
    transition: background-color var(--transition-normal), 
                color var(--transition-normal), 
                border-color var(--transition-normal);
}

/* Disable transitions during page load to prevent flash */
.preload * {
    transition: none !important;
}
/* ============================================
   CSS PATCH - Missing Styles After Dark Mode Update
   Add this to your styles.css or use as standalone
   ============================================ */

/* ============================================
   STATUS OVERLAY - Voice Chat Status
   ============================================ */
.status-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    display: none; /* Hidden by default */
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.status-overlay.show {
    display: flex !important; /* Show when .show class is added */
}

/* Active (listening) state - green with pulse */
.status-overlay.active {
    background: rgba(76, 175, 80, 0.95);
    animation: pulse 2s ease-in-out infinite;
}

/* Thinking state - red, no pulse */
.status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
        transform: scale(1.02);
    }
}

/* ============================================
   ALERT SECTION - Orange Info Notifications
   ============================================ */
.alert-section {
    background: linear-gradient(135deg, #fb923c, #f97316); /* Orange gradient */
    padding: 12px 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease-out;
    display: none; /* Hidden by default - JavaScript shows it */
    position: relative;
    z-index: 100;
}

/* Show alert when it has content or .show class */
.alert-section.show,
.alert-section[style*="display: block"] {
    display: block !important;
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.alert-content i.bi-exclamation-triangle-fill,
.alert-content i {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-content span {
    flex: 1;
    line-height: 1.4;
}

.alert-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.alert-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   PHONE & EMAIL ALERT SECTIONS
   ============================================ */
#phoneAlertSection {
    background: linear-gradient(135deg, #10b981, #059669); /* Green */
    padding: 12px 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: block;
    animation: slideDown 0.3s ease-out;
}

#emailAlertSection {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* Blue */
    padding: 12px 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: block;
    animation: slideDown 0.3s ease-out;
}

/* ============================================
   TERMS & PRIVACY OVERLAY
   ============================================ */
#terms-privacy-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
}

/* ============================================
   DARK MODE COMPATIBILITY
   ============================================ */
[data-theme="dark"] .status-overlay {
    /* Status overlay works in dark mode */
}

[data-theme="dark"] .alert-section {
    /* Alert gradients work in both modes */
}

[data-theme="dark"] #phoneAlertSection,
[data-theme="dark"] #emailAlertSection {
    /* Alert sections work in both modes */
}

/* ============================================
   IMPORTANT OVERRIDES
   ============================================ */
/* Ensure these elements show when needed regardless of other CSS */
.status-overlay.show {
    display: flex !important;
}

.alert-section[style*="display: block"],
.alert-section[style*="display:block"] {
    display: block !important;
}

#alertSection[style*="display: block"],
#alertSection[style*="display:block"] {
    display: block !important;
}

/* ============================================
   LOADING STATES
   ============================================ */
/* Ensure status shows during page load if needed */
body.loading .status-overlay.show {
    display: flex !important;
}

/* ============================================
   Z-INDEX HIERARCHY
   ============================================ */
.status-overlay {
    z-index: 9999;
}

.alert-section,
#phoneAlertSection,
#emailAlertSection,
#alertSection {
    z-index: 100;
}

#terms-privacy-overlay {
    z-index: 10000 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .status-overlay {
        top: 10px;
        left: 10px;
        font-size: 12px;
        padding: 8px 14px;
    }
    
    .alert-section {
        padding: 10px 12px;
    }
    
    .alert-content {
        font-size: 13px;
    }
}
/* ============================================
   DARK MODE VARIABLES ONLY
   Add this to your existing styles.css
   ============================================ */

/* Add dark mode variables */
[data-theme="dark"] {
    /* Primary Brand Colors - adjusted for dark mode */
    --primary-color: #7289DA;
    --secondary-color: #1DD1A1;
    
    /* Text Colors - inverted */
    --text-dark: #F9FAFB;
    --text-light: #D1D5DB;
    
    /* Background Colors - dark */
    --bg-white: #1F2937;
    --bg-light: #111827;
    --bg-gray: #374151;
    --chat-bg: #1F2937;
    --message-bg: #374151;
    --input-bg: #374151;
    
    /* Border Colors - dark */
    --border-color: #374151;
    
    /* Shadow - deeper for dark mode */
    --shadow: rgba(0, 0, 0, 0.4);
}

/* Smooth transitions for theme switching */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Prevent transitions during page load */
.preload * {
    transition: none !important;
}
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}

/* ============================================
   THINKING INDICATOR (Kuba is thinking...)
   ============================================ */
.thinking-indicator {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #E8E8E8;
    border-radius: 12px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    animation: thinkingPulse 1.5s ease-in-out infinite;
}

.thinking-indicator i {
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}

.thinking-indicator span {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

@keyframes thinkingPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

[data-theme="dark"] .thinking-indicator {
    background: #374151 !important;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF !important;
}

[data-theme="dark"] .thinking-indicator span {
    color: #9CA3AF !important;
}

.chat-content .thinking-indicator {
    display: flex !important;
}

.thinking-indicator.hidden {
    display: none !important;
}
/* ============================================
   THINKING INDICATOR FIX
   Ensures thinking indicator shows properly and matches Kuba's message style
   ============================================ */

/* Base thinking indicator style - matches Kuba message bubble */
.thinking-indicator {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #E8E8E8;
    border-radius: 12px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    animation: thinkingPulse 1.5s ease-in-out infinite;
}

.thinking-indicator i {
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}

.thinking-indicator span {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

/* Pulsing animation for thinking indicator */
@keyframes thinkingPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Dark mode styles for thinking indicator */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

[data-theme="dark"] .thinking-indicator span {
    color: #9CA3AF;
}

/* Ensure it shows in chat content */
.chat-content .thinking-indicator {
    display: flex !important;
}

/* Hide class if needed */
.thinking-indicator.hidden {
    display: none !important;
}
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}

/* ============================================
   ORDER BUTTON WHITE BACKGROUND FIX
   Fixes white container around "Kliknij aby zamówić"
   ============================================ */

/* Fix button container/wrapper */
[data-theme="dark"] .order-button-container,
[data-theme="dark"] .checkout-container,
[data-theme="dark"] .cart-footer,
[data-theme="dark"] .basket-footer {
    background: #1F2937 !important;
}

/* Info notification area */
[data-theme="dark"] .cart-info-section,
[data-theme="dark"] .basket-info-section {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

/* Remove white backgrounds from any wrapper divs */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background-color:white"],
[data-theme="dark"] div[style*="background:#FFFFFF"],
[data-theme="dark"] div[style*="background: #FFFFFF"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] div[style*="background: #ffffff"],
[data-theme="dark"] div[style*="background:#FFF"],
[data-theme="dark"] div[style*="background: #FFF"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Keep green button green */
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .order-button,
[data-theme="dark"] button[onclick*="checkout"] {
    background: linear-gradient(135deg, #10B981, #059669) !important;
}

/* Parent containers should be dark */
[data-theme="dark"] .right-column > div,
[data-theme="dark"] .cart-container > div,
[data-theme="dark"] .basket-container > div {
    background: transparent !important;
}
/* ============================================
   FIX: Order Button White Background in Dark Mode
   The "Kliknij aby zamówić" button wrapper fix
   ============================================ */

/* Fix for button container/wrapper with white background */
[data-theme="dark"] .order-button-container,
[data-theme="dark"] .checkout-container,
[data-theme="dark"] .cart-footer,
[data-theme="dark"] .basket-footer {
    background: #1F2937 !important;
}

/* Fix the button itself */
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .order-button,
[data-theme="dark"] .place-order-btn,
[data-theme="dark"] button[onclick*="zamówi"],
[data-theme="dark"] button[onclick*="checkout"] {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border: none !important;
    color: white !important;
}

[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

/* Fix any wrapper div around the button */
[data-theme="dark"] .checkout-btn-wrapper,
[data-theme="dark"] .order-btn-wrapper,
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background-color:white"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix the cart section that contains the button */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937 !important;
}

/* Info section above button */
[data-theme="dark"] .cart-info-section,
[data-theme="dark"] .basket-info-section {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

/* Disabled state */
[data-theme="dark"] .checkout-btn:disabled,
[data-theme="dark"] .order-button:disabled {
    background: #4B5563 !important;
    color: #9CA3AF !important;
    opacity: 0.6;
}

/* Remove any white backgrounds from parent containers */
[data-theme="dark"] .right-column > div,
[data-theme="dark"] .cart-container > div,
[data-theme="dark"] .basket-container > div {
    background: transparent !important;
}

/* Specific fix for any div with inline white background in dark mode */
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] {
    background: #1F2937 !important;
}

/* Green button should stay green */
[data-theme="dark"] button[style*="background: linear-gradient"][style*="10B981"],
[data-theme="dark"] button[style*="background:linear-gradient"][style*="10B981"] {
    /* Keep the green gradient */
    background: linear-gradient(135deg, #10B981, #059669) !important;
}
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}

/* ============================================
   PRESERVE ORIGINAL COLORS - VIDEO SECTION
   Video section elements should keep light mode colors
   ============================================ */

/* Language selector on video - ALWAYS WHITE */
[data-theme="dark"] .video-section .language-selector,
[data-theme="dark"] .video-section .language-dropdown-button,
[data-theme="dark"] .video-section select {
    background: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="dark"] .video-section .language-selector:hover {
    background: #f8f9fa !important;
}

/* Status overlay - ALWAYS RED (thinking) or GREEN (active) */
[data-theme="dark"] .status-overlay,
[data-theme="dark"] .status-overlay.thinking,
[data-theme="dark"] #status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95) !important;
    color: white !important;
}

[data-theme="dark"] .status-overlay.active,
[data-theme="dark"] #status-overlay.active {
    background: rgba(76, 175, 80, 0.95) !important;
    color: white !important;
}

/* "Pokaż" button - KEEP BLUE */
[data-theme="dark"] .video-section .show-btn,
[data-theme="dark"] .video-section button[onclick*="pokaz"] {
    background: #5B68F5 !important;
    color: white !important;
}

/* End button - KEEP GRAY */
[data-theme="dark"] .video-section .end-button {
    background: rgba(108, 117, 125, 0.9) !important;
}

[data-theme="dark"] .video-section .end-button:hover {
    background: rgba(220, 53, 69, 0.9) !important;
}

/* Mute button - KEEP GREEN/RED */
[data-theme="dark"] .video-section .mute-button {
    background: rgba(76, 175, 80, 0.95) !important;
}

[data-theme="dark"] .video-section .mute-button.muted {
    background: rgba(244, 67, 54, 0.95) !important;
}

/* Icons on video section - KEEP WHITE */
[data-theme="dark"] .video-section button svg,
[data-theme="dark"] .video-section .settings-icon svg {
    stroke: white !important;
}

/* Video section background - don't change */
[data-theme="dark"] .video-section {
    background: inherit !important;
}
/* ============================================
   PRESERVE ORIGINAL COLORS - VIDEO SECTION
   These elements on the video/left side should ALWAYS keep light mode colors
   ============================================ */

/* ============================================
   LANGUAGE SELECTOR (on video section) - ALWAYS WHITE
   ============================================ */

/* Language selector on video section - keep white/light */
[data-theme="dark"] .video-section .language-selector,
[data-theme="dark"] .video-section .language-dropdown-button,
[data-theme="dark"] .video-section select,
[data-theme="dark"] .video-section .lang-selector {
    background: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="dark"] .video-section .language-selector:hover,
[data-theme="dark"] .video-section .language-dropdown-button:hover {
    background: #f8f9fa !important;
}

/* Language dropdown arrow/icon */
[data-theme="dark"] .video-section .language-selector svg,
[data-theme="dark"] .video-section .language-dropdown-button svg {
    stroke: #495057 !important;
}

/* ============================================
   STATUS OVERLAY (Kuba myśli, three dots) - KEEP RED
   ============================================ */

/* "Kuba myśli" with three dots - ALWAYS RED */
[data-theme="dark"] .status-overlay,
[data-theme="dark"] .status-overlay.thinking,
[data-theme="dark"] #status-overlay,
[data-theme="dark"] #status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95) !important;
    color: white !important;
}

/* Active/Listening state - ALWAYS GREEN */
[data-theme="dark"] .status-overlay.active,
[data-theme="dark"] #status-overlay.active {
    background: rgba(76, 175, 80, 0.95) !important;
    color: white !important;
    animation: pulse 2s ease-in-out infinite !important;
}

/* Text and icon inside status overlay */
[data-theme="dark"] .status-overlay span,
[data-theme="dark"] .status-overlay i,
[data-theme="dark"] #status-overlay span,
[data-theme="dark"] #status-overlay i {
    color: white !important;
}

/* ============================================
   DESKTOP/COMPUTER ICON - KEEP WHITE
   ============================================ */
[data-theme="dark"] .video-section .desktop-icon,
[data-theme="dark"] .video-section button svg,
[data-theme="dark"] .video-section .icon-btn svg {
    stroke: white !important;
}

/* ============================================
   "Pokaż" BUTTON - KEEP BLUE
   ============================================ */
[data-theme="dark"] .video-section .show-btn,
[data-theme="dark"] .video-section button[onclick*="pokaz"],
[data-theme="dark"] .video-section .btn-primary {
    background: #5B68F5 !important;
    color: white !important;
    border: none !important;
}

[data-theme="dark"] .video-section .show-btn:hover,
[data-theme="dark"] .video-section button[onclick*="pokaz"]:hover {
    background: #4F5BD5 !important;
}

/* ============================================
   SETTINGS/GEAR ICON - KEEP VISIBLE
   ============================================ */
[data-theme="dark"] .video-section .settings-icon,
[data-theme="dark"] .video-section .gear-icon,
[data-theme="dark"] .video-section .settings-btn svg {
    stroke: white !important;
    fill: none !important;
}

/* ============================================
   END BUTTON - Keep gray
   ============================================ */
[data-theme="dark"] .video-section .end-button {
    background: rgba(108, 117, 125, 0.9) !important;
    color: white !important;
}

[data-theme="dark"] .video-section .end-button:hover {
    background: rgba(220, 53, 69, 0.9) !important;
}

/* ============================================
   MUTE BUTTON - Keep green/red
   ============================================ */
[data-theme="dark"] .video-section .mute-button {
    background: rgba(76, 175, 80, 0.95) !important;
    color: white !important;
}

[data-theme="dark"] .video-section .mute-button.muted {
    background: rgba(244, 67, 54, 0.95) !important;
}

/* ============================================
   VIDEO SECTION BACKGROUND - DON'T CHANGE
   ============================================ */
[data-theme="dark"] .video-section {
    /* Keep original background - don't make it dark */
    background: inherit !important;
}

/* ============================================
   ALL VIDEO SECTION BUTTONS - KEEP ORIGINAL
   ============================================ */

/* Override any dark mode button styling for video section */
[data-theme="dark"] .video-section button {
    /* Let each button keep its specific styling */
}

/* White buttons should stay white */
[data-theme="dark"] .video-section button[style*="background: white"],
[data-theme="dark"] .video-section button[style*="background:white"],
[data-theme="dark"] .video-section .btn-light {
    background: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

/* ============================================
   IMPORTANT OVERRIDES
   ============================================ */

/* Make sure status overlay is always on top and visible */
[data-theme="dark"] .status-overlay,
[data-theme="dark"] #status-overlay {
    z-index: 9999 !important;
    opacity: 1 !important;
}

/* Language selector should not inherit dark styles */
[data-theme="dark"] .video-section select,
[data-theme="dark"] .video-section .language-selector * {
    background: inherit !important;
    color: inherit !important;
}

/* ============================================
   SUMMARY OF PRESERVED COLORS
   ============================================ */

/*
Video Section Elements (LEFT SIDE) - Keep Original:
✓ Language selector: WHITE background
✓ "Kuba myśli" (thinking): RED background
✓ "Active" (listening): GREEN background  
✓ "Pokaż" button: BLUE background
✓ Settings icon: WHITE
✓ Desktop icon: WHITE
✓ End button: GRAY
✓ Mute button: GREEN/RED
✓ All overlay buttons: Original colors
*/
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}

/* ============================================
   CRITICAL FIX: LANGUAGE SELECTOR MUST STAY WHITE
   Force white background even if it has dark class
   ============================================ */

/* Language selector - FORCE WHITE */
[data-theme="dark"] .video-section .language-selector,
[data-theme="dark"] .video-section .language-dropdown-button,
[data-theme="dark"] .video-section .lang-selector,
[data-theme="dark"] .video-section select[name*="lang"],
[data-theme="dark"] .video-section select[id*="lang"],
[data-theme="dark"] .video-section button[onclick*="language"],
[data-theme="dark"] .video-section .language-btn,
[data-theme="dark"] .video-section button.btn-dark,
[data-theme="dark"] .video-section .dropdown-toggle {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

/* Override any dark button styling */
[data-theme="dark"] .video-section button[style*="background: #2C3E50"],
[data-theme="dark"] .video-section button[style*="background:#2C3E50"],
[data-theme="dark"] .video-section button[style*="background-color: #2C3E50"],
[data-theme="dark"] .video-section button[class*="dark"] {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
}

/* Hover */
[data-theme="dark"] .video-section .language-selector:hover,
[data-theme="dark"] .video-section .language-dropdown-button:hover,
[data-theme="dark"] .video-section button[onclick*="language"]:hover {
    background: #f8f9fa !important;
}

/* Icon/arrow */
[data-theme="dark"] .video-section .language-selector svg,
[data-theme="dark"] .video-section .language-dropdown-button svg {
    stroke: #495057 !important;
}

/* Text */
[data-theme="dark"] .video-section .language-selector span,
[data-theme="dark"] .video-section .language-dropdown-button span {
    color: #495057 !important;
}

/* Select dropdown */
[data-theme="dark"] .video-section select,
[data-theme="dark"] .video-section select option {
    background: white !important;
    color: #495057 !important;
}
/* ============================================
   FORCE LANGUAGE SELECTOR TO STAY WHITE
   Even more specific rules with !important
   ============================================ */

/* Language selector - FORCE WHITE in dark mode */
[data-theme="dark"] .video-section .language-selector,
[data-theme="dark"] .video-section .language-dropdown-button,
[data-theme="dark"] .video-section .lang-selector,
[data-theme="dark"] .video-section select[name*="lang"],
[data-theme="dark"] .video-section select[id*="lang"],
[data-theme="dark"] .video-section button[onclick*="language"],
[data-theme="dark"] .video-section .language-btn {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

/* Any button or select in video section with "PL" text */
[data-theme="dark"] .video-section button:has(span:contains("PL")),
[data-theme="dark"] .video-section select option,
[data-theme="dark"] .video-section .dropdown-toggle {
    background: white !important;
    color: #495057 !important;
}

/* Override all dark button styles for language selector */
[data-theme="dark"] .video-section button.btn-dark,
[data-theme="dark"] .video-section button[style*="background: #2C3E50"],
[data-theme="dark"] .video-section button[style*="background:#2C3E50"] {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

/* Hover state */
[data-theme="dark"] .video-section .language-selector:hover,
[data-theme="dark"] .video-section .language-dropdown-button:hover,
[data-theme="dark"] .video-section button[onclick*="language"]:hover {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    color: #495057 !important;
}

/* Dropdown icon/arrow */
[data-theme="dark"] .video-section .language-selector svg,
[data-theme="dark"] .video-section .language-dropdown-button svg,
[data-theme="dark"] .video-section button[onclick*="language"] svg {
    stroke: #495057 !important;
    fill: none !important;
}

/* Dropdown text */
[data-theme="dark"] .video-section .language-selector span,
[data-theme="dark"] .video-section .language-dropdown-button span {
    color: #495057 !important;
}

/* Select element specific */
[data-theme="dark"] .video-section select {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="dark"] .video-section select option {
    background: white !important;
    color: #495057 !important;
}

/* Any dark styled button in video section that shows language */
[data-theme="dark"] .video-section button[class*="dark"],
[data-theme="dark"] .video-section .btn-dark {
    background: white !important;
    color: #495057 !important;
}
/* ============================================
   DARK MODE DROPDOWN FIX - COMPLETE VERSION
   Makes settings dropdown adapt to dark mode
   ============================================ */

/* Settings dropdown container - dark mode */
body.dark-mode #settings-dropdown,
body.dark-mode .settings-dropdown {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

/* ALL content inside dropdown - dark background */
body.dark-mode #settings-dropdown *,
body.dark-mode .settings-dropdown * {
    background-color: transparent !important;
}

/* Accordion content areas - dark background */
body.dark-mode #tools-content,
body.dark-mode #media-content,
body.dark-mode #legal-content {
    background: #1F2937 !important;
    border: none !important;
}

/* Accordion header buttons - dark mode */
body.dark-mode #settings-dropdown button,
body.dark-mode .settings-dropdown button {
    background: #374151 !important;
    color: #E5E7EB !important;
    border-color: #4B5563 !important;
}

body.dark-mode #settings-dropdown button:hover,
body.dark-mode .settings-dropdown button:hover {
    background: #4B5563 !important;
}

/* ALL buttons inside tools/media content - dark mode */
body.dark-mode #tools-content button,
body.dark-mode #media-content button,
body.dark-mode #legal-content button {
    background: #374151 !important;
    color: #E5E7EB !important;
}

body.dark-mode #tools-content button:hover,
body.dark-mode #media-content button:hover,
body.dark-mode #legal-content button:hover {
    background: #4B5563 !important;
}

/* Dark mode text colors for ALL elements */
body.dark-mode #settings-dropdown,
body.dark-mode #settings-dropdown *,
body.dark-mode .settings-dropdown,
body.dark-mode .settings-dropdown * {
    color: #E5E7EB !important;
}

/* Dark mode icons */
body.dark-mode #settings-dropdown svg,
body.dark-mode .settings-dropdown svg,
body.dark-mode #settings-dropdown i,
body.dark-mode .settings-dropdown i {
    color: #E5E7EB !important;
    fill: #E5E7EB !important;
}

/* ============================================
   REMOVE GAPS BETWEEN ACCORDIONS
   ============================================ */

/* Remove margins/padding from accordion sections */
#settings-dropdown .accordion-section,
.settings-dropdown .accordion-section {
    margin: 0 !important;
    padding: 0 !important;
}

/* Accordion buttons - no gaps */
#settings-dropdown button[onclick*="toggleAccordion"],
.settings-dropdown button[onclick*="toggleAccordion"] {
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #E5E7EB;
}

/* Dark mode accordion button borders */
body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"],
body.dark-mode .settings-dropdown button[onclick*="toggleAccordion"] {
    border-bottom: 1px solid #4B5563 !important;
}

/* First accordion button - top border radius */
#settings-dropdown button[onclick*="toggleAccordion"]:first-of-type,
.settings-dropdown button[onclick*="toggleAccordion"]:first-of-type {
    border-radius: 4px 4px 0 0 !important;
}

/* Last visible element - bottom border radius */
#settings-dropdown > div:last-child,
.settings-dropdown > div:last-child {
    border-radius: 0 0 4px 4px !important;
}

/* Accordion content - no gaps */
#tools-content,
#media-content,
#legal-content {
    margin: 0 !important;
    padding: 10px !important;
    border: none !important;
}

/* Remove any default margins from container */
#settings-dropdown > div,
.settings-dropdown > div {
    margin: 0 !important;
}

/* ============================================
   FORCE DARK BACKGROUNDS IN ALL DROPDOWNS
   ============================================ */

/* Force dark background on dropdown wrapper */
body.dark-mode #settings-dropdown {
    background: #1F2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Force dark background on all divs inside dropdown */
body.dark-mode #settings-dropdown div,
body.dark-mode .settings-dropdown div {
    background-color: #1F2937 !important;
}

/* Force transparent background on buttons to show parent dark bg */
body.dark-mode #settings-dropdown button {
    background: #374151 !important;
}

/* Override any white backgrounds in tools/media sections */
body.dark-mode #tools-content > *,
body.dark-mode #media-content > *,
body.dark-mode #legal-content > * {
    background: transparent !important;
}

/* ============================================
   DARK MODE TOGGLE SWITCHES & INPUTS
   ============================================ */

body.dark-mode .toggle-switch {
    background: #374151 !important;
}

body.dark-mode .toggle-switch.active {
    background: #10B981 !important;
}

body.dark-mode #settings-dropdown input,
body.dark-mode .settings-dropdown input {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #E5E7EB !important;
}

/* ============================================
   SCROLLBAR IN DARK MODE
   ============================================ */

body.dark-mode #tools-content::-webkit-scrollbar-track,
body.dark-mode #media-content::-webkit-scrollbar-track {
    background: #1F2937 !important;
}

body.dark-mode #tools-content::-webkit-scrollbar-thumb,
body.dark-mode #media-content::-webkit-scrollbar-thumb {
    background: #4B5563 !important;
}
/* ============================================
   SETTINGS DROPDOWN - COMPLETE STYLING
   All styling extracted from inline HTML
   Includes both light and dark mode
   ============================================ */

/* ============================================
   DROPDOWN CONTAINER
   ============================================ */

#settings-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    max-width: 220px;
    display: none;
    z-index: 1000;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dark mode dropdown */
body.dark-mode #settings-dropdown {
    background: #1F2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ============================================
   ACCORDION SECTIONS
   ============================================ */

.accordion-section {
    margin: 0;
    padding: 0;
}

/* ============================================
   ACCORDION HEADER BUTTONS
   ============================================ */

#settings-dropdown button[onclick*="toggleAccordion"] {
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid #E5E7EB;
}

#settings-dropdown button[onclick*="toggleAccordion"]:hover {
    background: #f8f9fa;
}

/* Dark mode accordion headers */
body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"] {
    background: #374151;
    color: #E5E7EB;
    border-bottom-color: #4B5563;
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"]:hover {
    background: #4B5563;
}

/* First accordion header - rounded top */
#settings-dropdown .accordion-section:first-child button {
    border-radius: 8px 8px 0 0;
}

/* Last accordion header - no bottom border */
#settings-dropdown .accordion-section:last-child button {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

/* Chevron icons */
#settings-dropdown button[onclick*="toggleAccordion"] svg {
    transition: transform 0.3s;
    transform: rotate(-90deg);
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"] svg {
    stroke: #E5E7EB;
}

/* ============================================
   ACCORDION CONTENT AREAS
   ============================================ */

#tools-content,
#media-content,
#legal-content {
    display: none;
    margin: 0;
    padding: 10px;
    background: white;
    border: none;
}

/* Dark mode content areas */
body.dark-mode #tools-content,
body.dark-mode #media-content,
body.dark-mode #legal-content {
    background: #1F2937;
}

/* ============================================
   BUTTONS INSIDE CONTENT (Tool buttons, etc.)
   ============================================ */

#tools-content button,
#media-content button,
#legal-content button {
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-align: left;
    border-radius: 4px;
    color: #495057;
}

#tools-content button:hover,
#media-content button:hover,
#legal-content button:hover {
    background: #f8f9fa;
}

/* Dark mode tool buttons */
body.dark-mode #tools-content button,
body.dark-mode #media-content button,
body.dark-mode #legal-content button {
    background: #374151;
    color: #E5E7EB;
}

body.dark-mode #tools-content button:hover,
body.dark-mode #media-content button:hover,
body.dark-mode #legal-content button:hover {
    background: #4B5563;
}

/* Icons in buttons */
#tools-content button svg,
#media-content button svg,
#legal-content button svg,
#tools-content button i,
#media-content button i,
#legal-content button i {
    color: #6c757d;
}

body.dark-mode #tools-content button svg,
body.dark-mode #media-content button svg,
body.dark-mode #legal-content button svg,
body.dark-mode #tools-content button i,
body.dark-mode #media-content button i,
body.dark-mode #legal-content button i {
    color: #E5E7EB;
}

/* ============================================
   MODE TOGGLE BUTTONS (Voice Only, Dark Mode)
   ============================================ */

.mode-toggle-btn {
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    border-radius: 4px;
    color: #495057;
    margin-bottom: 4px;
}

.mode-toggle-btn:hover {
    background: #f8f9fa;
}

body.dark-mode .mode-toggle-btn {
    background: #374151;
    color: #E5E7EB;
}

body.dark-mode .mode-toggle-btn:hover {
    background: #4B5563;
}

/* Toggle switches */
.toggle-switch {
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
}

.toggle-switch.active {
    background: #10B981;
}

.toggle-switch-slider {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.toggle-switch.active .toggle-switch-slider {
    transform: translateX(20px);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

#settings-dropdown::-webkit-scrollbar {
    width: 6px;
}

#settings-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#settings-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#settings-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Dark mode scrollbar */
body.dark-mode #settings-dropdown::-webkit-scrollbar-track {
    background: #1F2937;
}

body.dark-mode #settings-dropdown::-webkit-scrollbar-thumb {
    background: #4B5563;
}

body.dark-mode #settings-dropdown::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   REMOVE ALL INLINE STYLES (Override)
   ============================================ */

/* Force remove inline background colors */
#settings-dropdown[style*="background"],
#settings-dropdown button[style*="background"],
#tools-content[style*="background"],
#media-content[style*="background"],
#legal-content[style*="background"] {
    background: white !important;
}

body.dark-mode #settings-dropdown[style*="background"],
body.dark-mode #settings-dropdown button[style*="background"],
body.dark-mode #tools-content[style*="background"],
body.dark-mode #media-content[style*="background"],
body.dark-mode #legal-content[style*="background"] {
    background: #1F2937 !important;
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"][style*="background"] {
    background: #374151 !important;
}

body.dark-mode #tools-content button[style*="background"],
body.dark-mode #media-content button[style*="background"] {
    background: #374151 !important;
}
/* ============================================
   HEADER ICONS - DARK MODE FIX
   Makes icons white/visible in dark mode
   ============================================ */

/* Language dropdown button in dark mode */
body.dark-mode .language-dropdown-button,
body.dark-mode #language-button {
    background: #374151 !important;
    color: #FFFFFF !important;
    border-color: #4B5563 !important;
}

body.dark-mode .language-dropdown-button:hover,
body.dark-mode #language-button:hover {
    background: #4B5563 !important;
}

/* Settings button in dark mode */
body.dark-mode #settings-button {
    background: #374151 !important;
    border-color: #4B5563 !important;
}

body.dark-mode #settings-button:hover {
    background: #4B5563 !important;
}

/* All SVG icons in header buttons - make white */
body.dark-mode .language-dropdown-button svg,
body.dark-mode #language-button svg,
body.dark-mode #settings-button svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Text in language button */
body.dark-mode #current-language {
    color: #FFFFFF !important;
}

/* Toggle button (Pokaz/Show) in dark mode */
body.dark-mode #toggle-button {
    background: #374151 !important;
    color: #FFFFFF !important;
    border-color: #4B5563 !important;
}

body.dark-mode #toggle-button:hover {
    background: #4B5563 !important;
}

/* Toggle button SVG icon */
body.dark-mode #toggle-button svg {
    stroke: #FFFFFF !important;
}

/* All header buttons in dark mode */
body.dark-mode .chat-header button {
    background: #374151 !important;
    color: #FFFFFF !important;
    border-color: #4B5563 !important;
}

body.dark-mode .chat-header button:hover {
    background: #4B5563 !important;
}

/* Header text and icons */
body.dark-mode .chat-header {
    background: #1F2937 !important;
    color: #E5E7EB !important;
    border-bottom-color: #374151 !important;
}

/* Phone icon in header */
body.dark-mode .header-info i,
body.dark-mode .header-info svg {
    color: #60A5FA !important; /* Light blue for visibility */
}

/* Phone number text */
body.dark-mode .header-info .phone-number {
    color: #E5E7EB !important;
}

/* Cart total in header */
body.dark-mode #headerCartTotal {
    color: #10B981 !important; /* Green for price */
}

/* Language dropdown menu in dark mode */
body.dark-mode .language-dropdown-menu {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .language-option {
    color: #E5E7EB !important;
}

body.dark-mode .language-option:hover {
    background: #374151 !important;
}

body.dark-mode .language-option.selected {
    background: #374151 !important;
}

/* Check icons in language dropdown */
body.dark-mode .language-option i,
body.dark-mode .language-option .check-icon {
    color: #10B981 !important;
}

/* ============================================
   ADDITIONAL HEADER ELEMENTS
   ============================================ */

/* Header top section */
body.dark-mode .header-top {
    background: #1F2937 !important;
}

/* All icons and text in header */
body.dark-mode .chat-header * {
    color: #E5E7EB !important;
}

/* Override any specific icon colors */
body.dark-mode .bi,
body.dark-mode [class*="bi-"] {
    color: #E5E7EB !important;
}

/* Gear/settings icon specifically */
body.dark-mode #settings-button path,
body.dark-mode #settings-button circle {
    stroke: #FFFFFF !important;
}

/* Chevron/arrow icons */
body.dark-mode polyline {
    stroke: #FFFFFF !important;
}
/* ============================================
   SETTINGS DROPDOWN - COMPLETE STYLING
   All styling extracted from inline HTML
   Includes both light and dark mode
   ============================================ */

/* ============================================
   DROPDOWN CONTAINER
   ============================================ */

#settings-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    max-width: 220px;
    display: none;
    z-index: 1000;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dark mode dropdown */
body.dark-mode #settings-dropdown {
    background: #1F2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ============================================
   ACCORDION SECTIONS
   ============================================ */

.accordion-section {
    margin: 0;
    padding: 0;
}

/* ============================================
   ACCORDION HEADER BUTTONS
   ============================================ */

#settings-dropdown button[onclick*="toggleAccordion"] {
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid #E5E7EB;
}

#settings-dropdown button[onclick*="toggleAccordion"]:hover {
    background: #f8f9fa;
}

/* Dark mode accordion headers */
body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"] {
    background: #374151;
    color: #E5E7EB;
    border-bottom-color: #4B5563;
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"]:hover {
    background: #4B5563;
}

/* First accordion header - rounded top */
#settings-dropdown .accordion-section:first-child button {
    border-radius: 8px 8px 0 0;
}

/* Last accordion header - no bottom border */
#settings-dropdown .accordion-section:last-child button {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

/* Chevron icons */
#settings-dropdown button[onclick*="toggleAccordion"] svg {
    transition: transform 0.3s;
    transform: rotate(-90deg);
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"] svg {
    stroke: #E5E7EB;
}

/* ============================================
   ACCORDION CONTENT AREAS
   ============================================ */

#tools-content,
#media-content,
#legal-content {
    display: none;
    margin: 0;
    padding: 10px;
    background: white;
    border: none;
}

/* Dark mode content areas */
body.dark-mode #tools-content,
body.dark-mode #media-content,
body.dark-mode #legal-content {
    background: #1F2937;
}

/* ============================================
   BUTTONS INSIDE CONTENT (Tool buttons, etc.)
   ============================================ */

#tools-content button,
#media-content button,
#legal-content button {
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-align: left;
    border-radius: 4px;
    color: #495057;
}

#tools-content button:hover,
#media-content button:hover,
#legal-content button:hover {
    background: #f8f9fa;
}

/* Dark mode tool buttons */
body.dark-mode #tools-content button,
body.dark-mode #media-content button,
body.dark-mode #legal-content button {
    background: #374151;
    color: #E5E7EB;
}

body.dark-mode #tools-content button:hover,
body.dark-mode #media-content button:hover,
body.dark-mode #legal-content button:hover {
    background: #4B5563;
}

/* Icons in buttons */
#tools-content button svg,
#media-content button svg,
#legal-content button svg,
#tools-content button i,
#media-content button i,
#legal-content button i {
    color: #6c757d;
}

body.dark-mode #tools-content button svg,
body.dark-mode #media-content button svg,
body.dark-mode #legal-content button svg,
body.dark-mode #tools-content button i,
body.dark-mode #media-content button i,
body.dark-mode #legal-content button i {
    color: #E5E7EB;
}

/* ============================================
   MODE TOGGLE BUTTONS (Voice Only, Dark Mode)
   ============================================ */

.mode-toggle-btn {
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    border-radius: 4px;
    color: #495057;
    margin-bottom: 4px;
}

.mode-toggle-btn:hover {
    background: #f8f9fa;
}

body.dark-mode .mode-toggle-btn {
    background: #374151;
    color: #E5E7EB;
}

body.dark-mode .mode-toggle-btn:hover {
    background: #4B5563;
}

/* Toggle switches */
.toggle-switch {
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
}

.toggle-switch.active {
    background: #10B981;
}

.toggle-switch-slider {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.toggle-switch.active .toggle-switch-slider {
    transform: translateX(20px);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

#settings-dropdown::-webkit-scrollbar {
    width: 6px;
}

#settings-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#settings-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#settings-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Dark mode scrollbar */
body.dark-mode #settings-dropdown::-webkit-scrollbar-track {
    background: #1F2937;
}

body.dark-mode #settings-dropdown::-webkit-scrollbar-thumb {
    background: #4B5563;
}

body.dark-mode #settings-dropdown::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   REMOVE ALL INLINE STYLES (Override)
   ============================================ */

/* Force remove inline background colors */
#settings-dropdown[style*="background"],
#settings-dropdown button[style*="background"],
#tools-content[style*="background"],
#media-content[style*="background"],
#legal-content[style*="background"] {
    background: white !important;
}

body.dark-mode #settings-dropdown[style*="background"],
body.dark-mode #settings-dropdown button[style*="background"],
body.dark-mode #tools-content[style*="background"],
body.dark-mode #media-content[style*="background"],
body.dark-mode #legal-content[style*="background"] {
    background: #1F2937 !important;
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"][style*="background"] {
    background: #374151 !important;
}

body.dark-mode #tools-content button[style*="background"],
body.dark-mode #media-content button[style*="background"] {
    background: #374151 !important;
}
/* ============================================
   FLOATING BUTTONS FIX - CORRECT LOGIC
   Light mode = light buttons with dark icons/text
   Dark mode = dark buttons with white icons/text
   ============================================ */

/* ============================================
   1. FLOATING KEYBOARD BUTTON
   ============================================ */

/* Light mode - light gray background with dark icon */
#floating-keyboard-btn {
    background: #F3F4F6 !important;
    border: 1px solid #D1D5DB !important;
    color: #1F2937 !important;
}

#floating-keyboard-btn:hover {
    background: #E5E7EB !important;
}

#floating-keyboard-btn svg {
    stroke: #1F2937 !important;
    color: #1F2937 !important;
}

/* Dark mode - dark gray background with WHITE icon */
body.dark-mode #floating-keyboard-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #FFFFFF !important;
}

body.dark-mode #floating-keyboard-btn:hover {
    background: #4B5563 !important;
}

body.dark-mode #floating-keyboard-btn svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* ============================================
   2. FLOATING LANGUAGE BUTTON (PL/EN/ES)
   ============================================ */

/* Light mode - light gray background with DARK text */
#floating-language-button,
#floating-language-container .language-dropdown-button {
    background: #F3F4F6 !important;
    color: #1F2937 !important;
    border: 1px solid #D1D5DB !important;
}

#floating-language-button:hover,
#floating-language-container .language-dropdown-button:hover {
    background: #E5E7EB !important;
}

/* Language text - DARK in light mode */
#floating-current-language {
    color: #1F2937 !important;
}

/* Chevron - DARK in light mode */
#floating-language-button svg,
#floating-language-container .language-dropdown-button svg {
    stroke: #1F2937 !important;
}

/* Dark mode - dark gray background with WHITE text */
body.dark-mode #floating-language-button,
body.dark-mode #floating-language-container .language-dropdown-button {
    background: #374151 !important;
    color: #FFFFFF !important;
    border-color: #4B5563 !important;
}

body.dark-mode #floating-language-button:hover,
body.dark-mode #floating-language-container .language-dropdown-button:hover {
    background: #4B5563 !important;
}

body.dark-mode #floating-current-language {
    color: #FFFFFF !important;
}

body.dark-mode #floating-language-button svg,
body.dark-mode #floating-language-container .language-dropdown-button svg {
    stroke: #FFFFFF !important;
}

/* Language dropdown menu - light mode */
#floating-language-dropdown {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
}

#floating-language-dropdown .language-option {
    color: #1F2937 !important;
    background: transparent !important;
}

#floating-language-dropdown .language-option:hover {
    background: #F3F4F6 !important;
}

#floating-language-dropdown .language-option.selected {
    background: #E5E7EB !important;
}

#floating-language-dropdown .check-icon {
    color: #10B981 !important;
}

/* Language dropdown - dark mode */
body.dark-mode #floating-language-dropdown {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

body.dark-mode #floating-language-dropdown .language-option {
    color: #FFFFFF !important;
}

body.dark-mode #floating-language-dropdown .language-option:hover {
    background: #374151 !important;
}

body.dark-mode #floating-language-dropdown .language-option.selected {
    background: #4B5563 !important;
}

/* ============================================
   3. FLOATING CART/BASKET BUTTON (Pokaż)
   ============================================ */

/* Both modes - always blue with white text */
.floating-toggle,
#floating-toggle {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
    border: none !important;
}

.floating-toggle:hover,
#floating-toggle:hover {
    background: #2563EB !important;
}

.floating-toggle i,
#floating-toggle i {
    color: #FFFFFF !important;
}

.floating-toggle span,
#floating-toggle span {
    color: #FFFFFF !important;
}

/* Dark mode - blue with glow */
body.dark-mode .floating-toggle,
body.dark-mode #floating-toggle {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .floating-toggle:hover,
body.dark-mode #floating-toggle:hover {
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4) !important;
}

/* ============================================
   SUMMARY - CORRECT LOGIC
   ============================================ */

/*
LIGHT MODE (default):
- Keyboard: Light gray (#F3F4F6) with DARK icon (#1F2937)
- Language: Light gray (#F3F4F6) with DARK text "PL" (#1F2937)
- Cart: Blue (#3B82F6) with white text

DARK MODE:
- Keyboard: Dark gray (#374151) with WHITE icon (#FFFFFF)
- Language: Dark gray (#374151) with WHITE text "PL" (#FFFFFF)
- Cart: Blue (#3B82F6) with white text + glow
*/
/* ============================================
   TEXT ONLY MODE
   Expands right column to full width, hides left video
   ============================================ */

/* Hide left video section in text-only mode */
body.text-only-mode .video-section,
body.text-only-mode #left-column {
    display: none !important;
}

/* Expand right column to full width */
body.text-only-mode .chat-section,
body.text-only-mode #right-column {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
}

/* Center chat content and limit max width for readability */
body.text-only-mode .chat-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Center cart content */
body.text-only-mode .cart-content,
body.text-only-mode .receipt-content,
body.text-only-mode .desk-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Hide floating buttons in text-only mode */
body.text-only-mode .floating-toggle,
body.text-only-mode #floating-toggle,
body.text-only-mode .klono-logo,
body.text-only-mode #floating-keyboard-btn,
body.text-only-mode #floating-language-container {
    display: none !important;
}

/* Make sure right column is always visible in text-only mode */
body.text-only-mode .chat-section {
    display: flex !important;
}

/* Adjust main wrapper for full width */
body.text-only-mode .main-wrapper {
    display: block;
}

/* Dark mode compatibility */
body.dark-mode.text-only-mode .chat-section {
    background: #1F2937;
}

body.dark-mode.text-only-mode .chat-content,
body.dark-mode.text-only-mode .cart-content,
body.dark-mode.text-only-mode .receipt-content,
body.dark-mode.text-only-mode .desk-content {
    background: #1F2937;
}

/* Text Only Mode Button - Dark Mode */
body.dark-mode #text-only-toggle-btn {
    background: #374151 !important;
    color: #E5E7EB !important;
}

body.dark-mode #text-only-toggle-btn:hover {
    background: #4B5563 !important;
}

body.dark-mode #text-only-toggle-btn svg {
    stroke: #E5E7EB !important;
}

body.dark-mode #text-only-status {
    background: #4B5563 !important;
    color: #9CA3AF !important;
}

/* When active in dark mode */
body.dark-mode #text-only-toggle-btn.active #text-only-status {
    background: #667eea !important;
    color: white !important;
}
/* Hide floating buttons on mobile phones */
@media (max-width: 768px) {
    /* Hide desktop/computer icon button */
    
    /* Hide language selector button on mobile */
    #floating-language-container,
    .floating-language,
    #floating-language-button {
        display: none !important;
    }
    
    /* Hide keyboard button if present */
    #floating-keyboard-btn {
        display: none !important;
    }
}

/* Extra small phones - be extra sure */
@media (max-width: 480px) {
    /* Hide ALL floating buttons */
    #floating-language-container,
    #floating-language-button,
    #floating-keyboard-btn,
    button[style*="position: fixed"][style*="bottom"] {
        display: none !important;
    }
}
/* Status overlay - reference size */
.status-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 12px 20px; /* Increased padding */
    border-radius: 30px; /* Larger border radius */
    font-size: 14px; /* Slightly larger font */
    font-weight: 600;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    min-height: 44px; /* Ensure consistent height */
}

/* Active (listening) state */
.status-overlay.active {
    background: rgba(76, 175, 80, 0.95);
    animation: pulse 2s ease-in-out infinite;
}

/* Thinking state */
.status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95);
    animation: none;
}

/* Mute button - MATCH status overlay size */
.mute-button {
    position: absolute;
    top: 20px;
    right: 110px; /* Adjusted spacing */
    background: rgba(76, 175, 80, 0.95);
    color: white;
    padding: 12px 20px; /* Match status overlay padding */
    border-radius: 30px; /* Match status overlay border-radius */
    font-size: 14px; /* Match status overlay font-size */
    font-weight: 600;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.3s;
    border: none;
    gap: 8px;
    pointer-events: auto;
    min-height: 44px; /* Match status overlay height */
    min-width: 44px; /* Ensure circular button is large enough */
}

.mute-button.show {
    display: flex;
}

.mute-button:hover:not(:disabled) {
    background: rgba(67, 160, 71, 0.95);
    transform: scale(1.05);
}

.mute-button.muted {
    background: rgba(244, 67, 54, 0.95);
}

.mute-button.muted:hover:not(:disabled) {
    background: rgba(229, 57, 53, 0.95);
}

.mute-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Mute button icon - larger */
.mute-button i {
    font-size: 18px; /* Larger icon */
}

/* End button - MATCH status overlay size */
.end-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    padding: 12px 24px; /* Match status overlay padding */
    border-radius: 30px; /* Match status overlay border-radius */
    font-size: 14px; /* Match status overlay font-size */
    font-weight: 600; /* Match status overlay font-weight */
    border: none;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s;
    display: none;
    pointer-events: auto;
    min-height: 44px; /* Match status overlay height */
}

.end-button.show {
    display: block;
}

.end-button:hover {
    background: rgba(220, 53, 69, 0.9);
    transform: scale(1.05);
}

/* Mobile responsive - keep proportions */
@media (max-width: 768px) {
    .status-overlay,
    .mute-button,
    .end-button {
        top: 15px;
        padding: 10px 16px;
        border-radius: 25px;
        font-size: 13px;
        min-height: 40px;
    }
    
    .mute-button {
        right: 100px;
        min-width: 40px;
    }
    
    .mute-button i {
        font-size: 16px;
    }
    
    .end-button {
        right: 15px;
        padding: 10px 20px;
    }
    
    .status-overlay {
        left: 15px;
    }
}

@media (max-width: 480px) {
    .status-overlay,
    .mute-button,
    .end-button {
        top: 12px;
        padding: 8px 14px;
        border-radius: 22px;
        font-size: 12px;
        min-height: 36px;
    }
    
    .mute-button {
        right: 90px;
        min-width: 36px;
    }
    
    .mute-button i {
        font-size: 14px;
    }
    
    .end-button {
        right: 12px;
        padding: 8px 16px;
    }
    
    .status-overlay {
        left: 12px;
    }
}
/* End button - slightly larger font */
.end-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    padding: 12px 26px; /* Slightly more horizontal padding */
    border-radius: 30px;
    font-size: 15px; /* Increased from 14px */
    font-weight: 600;
    border: none;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s;
    display: none;
    pointer-events: auto;
    min-height: 44px;
    letter-spacing: 0.3px; /* Slightly more spacing for better readability */
}

.end-button.show {
    display: block;
}

.end-button:hover {
    background: rgba(220, 53, 69, 0.9);
    transform: scale(1.05);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .end-button {
        top: 15px;
        padding: 10px 22px;
        font-size: 14px;
        min-height: 40px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .end-button {
        top: 12px;
        padding: 8px 18px;
        font-size: 13px;
        min-height: 36px;
        right: 12px;
    }
}
/* Klono.ai logo in bottom-left corner - moved up 5px */
.klono-logo {
    position: fixed !important;
    bottom: 25px !important; /* Changed from 20px to 25px */
    left: 20px !important;
    z-index: 9999 !important;
    opacity: 0.85;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.klono-logo img {
    height: 32px;
    width: auto;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.klono-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .klono-logo {
        bottom: 20px !important; /* Slightly adjusted for mobile */
        left: 15px !important;
    }
    
    .klono-logo img {
        height: 28px !important;
    }
}

@media (max-width: 480px) {
    .klono-logo {
        bottom: 90px !important; /* Keep existing mobile positioning */
        left: 12px !important;
    }
    
    .klono-logo img {
        height: 24px !important;
    }
}

@media (max-width: 375px) {
    .klono-logo img {
        height: 20px !important;
    }
}

/* Desktop/larger screens - ensure alignment with floating buttons */
@media (min-width: 481px) {
    .klono-logo {
        bottom: 25px !important; /* 5px higher than before */
        left: 20px !important;
    }
}
/* Klono.ai logo in bottom-left corner - aligned with floating buttons on all devices */
.klono-logo {
    position: fixed !important;
    bottom: 25px !important; /* Aligned with floating buttons */
    left: 20px !important;
    z-index: 9999 !important;
    opacity: 0.85;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.klono-logo img {
    height: 32px;
    width: auto;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.klono-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Tablet responsive */
@media (max-width: 768px) {
    .klono-logo {
        bottom: 25px !important; /* Keep aligned */
        left: 15px !important;
    }
    
    .klono-logo img {
        height: 28px !important;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .klono-logo {
        bottom: 25px !important; /* Aligned with floating buttons */
        left: 12px !important;
    }
    
    .klono-logo img {
        height: 24px !important;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .klono-logo {
        bottom: 25px !important; /* Keep consistent alignment */
        left: 12px !important;
    }
    
    .klono-logo img {
        height: 20px !important;
    }
}

/* Desktop/larger screens */
@media (min-width: 769px) {
    .klono-logo {
        bottom: 25px !important;
        left: 20px !important;
    }
    
    .klono-logo img {
        height: 32px;
    }
}
/* Avatar start button - default size */
.avatar-start-btn {
    width: 240px;  /* Desktop size */
    height: 240px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: 8px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0;
    text-indent: -9999px;
    overflow: visible;
    animation: pulse-button 2s ease-in-out infinite;
}

/* Pulsing ring effect around the button */
.avatar-start-btn::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 3px solid rgba(40, 167, 69, 0.6);
    animation: pulse-ring 2s ease-in-out infinite;
}

.avatar-start-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 70px;
    border-color: transparent transparent transparent white;
    margin-left: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    text-indent: 0;
}

.avatar-start-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    animation: pulse-button-hover 1.5s ease-in-out infinite;
}

/* Tablet - 75% size */
@media (max-width: 768px) {
    .avatar-start-btn {
        width: 180px;
        height: 180px;
        border: 6px solid rgba(255, 255, 255, 0.9);
    }
    
    .avatar-start-btn::before {
        border-width: 30px 0 30px 52px;
        margin-left: 9px;
    }
    
    .avatar-start-btn::after {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 2px;
    }
}

/* Mobile phones - 50% size (half of desktop) */
@media (max-width: 480px) {
    .avatar-start-btn {
        width: 120px;  /* Half of 240px */
        height: 120px; /* Half of 240px */
        border: 4px solid rgba(255, 255, 255, 0.9); /* Half of 8px */
    }
    
    .avatar-start-btn::before {
        border-width: 20px 0 20px 35px; /* Half of original */
        margin-left: 6px; /* Half of 12px */
    }
    
    .avatar-start-btn::after {
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-width: 2px; /* Half of original */
    }
}

/* Very small phones - slightly smaller */
@media (max-width: 375px) {
    .avatar-start-btn {
        width: 100px;
        height: 100px;
        border: 3px solid rgba(255, 255, 255, 0.9);
    }
    
    .avatar-start-btn::before {
        border-width: 16px 0 16px 28px;
        margin-left: 5px;
    }
    
    .avatar-start-btn::after {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-width: 2px;
    }
}

/* Pulsing animation */
@keyframes pulse-button {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5), 
                    0 0 0 0 rgba(40, 167, 69, 0.7);
    }
}

/* Pulsing ring animation */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Faster pulse on hover */
@keyframes pulse-button-hover {
    0%, 100% {
        transform: scale(1.1);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 16px 64px rgba(40, 167, 69, 0.6),
                    0 0 0 8px rgba(40, 167, 69, 0.3);
    }
}
/* Klono.ai logo in bottom-left corner - aligned with floating buttons on all devices */
.klono-logo {
    position: fixed !important;
    bottom: 25px !important; /* Aligned with floating buttons */
    left: 20px !important;
    z-index: 100 !important; /* Lower z-index to stay behind modals/overlays */
    opacity: 0.85;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.klono-logo img {
    height: 32px;
    width: auto;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.klono-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Tablet responsive */
@media (max-width: 768px) {
    .klono-logo {
        bottom: 25px !important;
        left: 15px !important;
        z-index: 100 !important; /* Stay behind modals */
    }
    
    .klono-logo img {
        height: 30px !important;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .klono-logo {
        bottom: 25px !important;
        left: 12px !important;
        z-index: 100 !important; /* Stay behind modals and input areas */
    }
    
    .klono-logo img {
        height: 28px !important;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .klono-logo {
        bottom: 25px !important;
        left: 12px !important;
        z-index: 100 !important;
    }
    
    .klono-logo img {
        height: 26px !important;
    }
}

/* Desktop/larger screens */
@media (min-width: 769px) {
    .klono-logo {
        bottom: 25px !important;
        left: 20px !important;
        z-index: 100 !important;
    }
    
    .klono-logo img {
        height: 32px;
    }
}

/* Ensure chat input and overlays are above the logo */
.message-input-area,
.chat-input,
#keyboard-overlay,
#keypad-overlay,
.modal,
.overlay {
    z-index: 1000 !important;
}

/* Ensure the "Brak wiadomości" empty state is above logo */
.empty-chat-message,
.chat-content {
    position: relative;
    z-index: 200;
}
/* Mobile - Horizontal video layout when chat is open */
@media (max-width: 768px) {
    /* Change main wrapper to vertical layout on mobile */
    .main-wrapper {
        flex-direction: column;
    }
    
    /* Video section - horizontal/landscape on mobile */
    .video-section {
        width: 100% !important;
        height: 40vh !important; /* Takes 40% of screen height */
        min-height: 300px;
    }
    
    /* Chat section - takes remaining space */
    .chat-section {
        width: 100% !important;
        height: 60vh !important; /* Takes 60% of screen height */
        border-left: none !important;
        border-top: 1px solid var(--border-color);
    }
    
    /* Video container - adjust for horizontal layout */
    .video-container {
        width: 100%;
        height: 100%;
    }
    
    /* Background video - fit horizontal container */
    #background-video,
    #background-image {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important; /* Remove any scaling transforms */
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* HeyGen avatar video - fit horizontal container */
    .video-container video {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* Loading spinner - center in horizontal video */
    .loading-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 60;
    }
    
    /* Avatar start button - keep centered in horizontal video */
    .avatar-start-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Reposition top controls for horizontal layout */
    .status-overlay {
        top: 15px;
        left: 15px;
    }
    
    .mute-button {
        top: 15px;
        right: 100px;
    }
    
    .end-button {
        top: 15px;
        right: 15px;
    }
    
    /* Klono logo - move to bottom of video section */
    .klono-logo {
        bottom: 15px;
        left: 15px;
        z-index: 100;
    }
}

/* Very small phones - more compact */
@media (max-width: 480px) {
    .video-section {
        height: 35vh !important; /* Smaller video area */
        min-height: 250px;
    }
    
    .chat-section {
        height: 65vh !important; /* More space for chat */
    }
    
    /* Background video - ensure full coverage */
    #background-video,
    #background-image {
        object-fit: cover !important;
    }
    
    /* Even more compact controls */
    .status-overlay,
    .mute-button,
    .end-button {
        top: 10px;
    }
    
    .mute-button {
        right: 85px;
    }
    
    .klono-logo {
        bottom: 10px;
        left: 10px;
    }
    
    /* Loading spinner */
    .loading-spinner {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Landscape mobile orientation - optimize for horizontal view */
@media (max-width: 768px) and (orientation: landscape) {
    .video-section {
        height: 50vh !important;
    }
    
    .chat-section {
        height: 50vh !important;
    }
    
    /* Ensure video fills landscape properly */
    #background-video,
    #background-image,
    .video-container video {
        object-fit: cover !important;
    }
}

/* Extra small phones - ultra compact */
@media (max-width: 375px) {
    .video-section {
        height: 30vh !important;
        min-height: 220px;
    }
    
    .chat-section {
        height: 70vh !important;
    }
    
    /* Smaller loading spinner */
    .loading-spinner {
        transform: translate(-50%, -50%) scale(0.7);
    }
    
    .loading-spinner .spinner {
        width: 40px;
        height: 40px;
    }
}
/* Avatar start button - default size */
.avatar-start-btn {
    width: 240px;  /* Desktop size */
    height: 240px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: 8px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* Changed to absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    font-size: 0;
    text-indent: -9999px;
    overflow: visible;
    animation: pulse-button 2s ease-in-out infinite;
}

/* Pulsing ring effect around the button */
.avatar-start-btn::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 3px solid rgba(40, 167, 69, 0.6);
    animation: pulse-ring 2s ease-in-out infinite;
}

.avatar-start-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 70px;
    border-color: transparent transparent transparent white;
    margin-left: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    text-indent: 0;
}

.avatar-start-btn:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Keep centered on hover */
    box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    animation: pulse-button-hover 1.5s ease-in-out infinite;
}

/* Tablet - 75% size, CENTERED */
@media (max-width: 768px) {
    .avatar-start-btn {
        width: 180px;
        height: 180px;
        border: 6px solid rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .avatar-start-btn:hover {
        transform: translate(-50%, -50%) scale(1.1);
    }
    
    .avatar-start-btn::before {
        border-width: 30px 0 30px 52px;
        margin-left: 9px;
    }
    
    .avatar-start-btn::after {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 2px;
    }
}

/* Mobile phones - 50% size, CENTERED */
@media (max-width: 480px) {
    .avatar-start-btn {
        width: 120px;  /* Half of 240px */
        height: 120px; /* Half of 240px */
        border: 4px solid rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .avatar-start-btn:hover {
        transform: translate(-50%, -50%) scale(1.1);
    }
    
    .avatar-start-btn::before {
        border-width: 20px 0 20px 35px; /* Half of original */
        margin-left: 6px; /* Half of 12px */
    }
    
    .avatar-start-btn::after {
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-width: 2px; /* Half of original */
    }
}

/* Very small phones - CENTERED */
@media (max-width: 375px) {
    .avatar-start-btn {
        width: 100px;
        height: 100px;
        border: 3px solid rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .avatar-start-btn:hover {
        transform: translate(-50%, -50%) scale(1.1);
    }
    
    .avatar-start-btn::before {
        border-width: 16px 0 16px 28px;
        margin-left: 5px;
    }
    
    .avatar-start-btn::after {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-width: 2px;
    }
}

/* Pulsing animation - maintain centering */
@keyframes pulse-button {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5), 
                    0 0 0 0 rgba(40, 167, 69, 0.7);
    }
}

/* Pulsing ring animation */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Faster pulse on hover - maintain centering */
@keyframes pulse-button-hover {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        box-shadow: 0 16px 64px rgba(40, 167, 69, 0.6),
                    0 0 0 8px rgba(40, 167, 69, 0.3);
    }
}
/* End Conversation Modal - highest z-index */
#endConversationModal,
.modal.show {
    z-index: 10001 !important;
}

.modal-backdrop.show {
    z-index: 10000 !important;
}

/* Ensure modal dialog is on top */
#endConversationModal .modal-dialog,
.modal .modal-dialog {
    z-index: 10002 !important;
}

/* Modal content should be visible */
#endConversationModal .modal-content,
.modal .modal-content {
    z-index: 10003 !important;
    position: relative;
}

/* All other elements should be below modal */
.video-section,
.video-container,
#background-video,
.avatar-start-btn,
.status-overlay,
.mute-button,
.end-button {
    z-index: 100 !important;
}

/* Chat section below modal */
.chat-section,
.chat-content,
.message-input-area {
    z-index: 200 !important;
}

/* Floating buttons below modal */
.floating-toggle,
.klono-logo,
#floating-keyboard-btn,
#floating-language-container {
    z-index: 300 !important;
}

/* Overlays and tools below modal but above video */
#keyboard-overlay,
#keypad-overlay,
#yesno-overlay,
#scale10-overlay,
#select-overlay,
#qr-overlay,
.input-overlay {
    z-index: 1000 !important;
}

/* Domain and connection errors - very high but below modal */
#domain-status-overlay,
#connection-error-overlay {
    z-index: 9999 !important;
}

/* Bootstrap modal specific fixes */
.modal.fade.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10001 !important;
}

/* Ensure backdrop doesn't block modal */
.modal-backdrop {
    z-index: 10000 !important;
}

/* Mobile responsive - maintain z-index hierarchy */
@media (max-width: 768px) {
    #endConversationModal,
    .modal.show {
        z-index: 10001 !important;
    }
    
    #endConversationModal .modal-dialog {
        z-index: 10002 !important;
        margin: 1rem;
    }
}
* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #5865F2;
    --secondary-color: #00D4AA;
    --text-dark: #1F2937;
    --text-light: #6B7280;
    --border-color: #E5E7EB;
    --bg-light: #F9FAFB;
    --bg-white: #FFFFFF;
    --chat-bg: #FFFFFF;
    --message-bg: #F3F4F6;
    --input-bg: #FFFFFF;
    --shadow: rgba(0, 0, 0, 0.1);
}

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }

.main-wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Internet connection error overlay */
#connection-error-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    color: white !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

#connection-error-overlay.show {
    display: flex !important;
}

.connection-error-content {
    text-align: center;
    padding: 40px;
    max-width: 500px;
    background: rgba(30, 30, 30, 0.95);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.connection-error-content .error-icon {
    font-size: 64px;
    margin-bottom: 20px;
    color: #EF4444;
}

.connection-error-content h2 {
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #EF4444;
}

.connection-error-content p {
    font-size: 16px;
    margin-bottom: 25px;
    color: #ccc;
    line-height: 1.6;
}

.connection-error-content .retry-info {
    font-size: 14px;
    color: #888;
    margin-top: 20px;
}

/* Left Side - Video/Avatar */
.video-section {
    flex: 1;
    position: relative;
/* background: #000 url('https://rybka.ai/rybka_basic.jpg') center center no-repeat; */
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.status-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.status-overlay.show {
    display: flex;
}

/* Active (listening) state - green with pulse */
.status-overlay.active {
    background: rgba(76, 175, 80, 0.95);
    animation: pulse 2s ease-in-out infinite;
}

/* Thinking state - red, no pulse */
.status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
        transform: scale(1.02);
    }
}

.end-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s;
    display: none;
    pointer-events: auto;
}

.end-button.show {
    display: block;
}

.end-button:hover {
    background: rgba(220, 53, 69, 0.9);
}

/* Mute button */
.mute-button {
    position: absolute;
    top: 20px;
    right: 90px;
    background: rgba(76, 175, 80, 0.95);
    color: white;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.3s;
    border: none;
    gap: 6px;
    pointer-events: auto;
}

.mute-button.show {
    display: flex;
}

.mute-button:hover:not(:disabled) {
    background: rgba(67, 160, 71, 0.95);
    transform: scale(1.05);
}

.mute-button.muted {
    background: rgba(244, 67, 54, 0.95);
}

.mute-button.muted:hover:not(:disabled) {
    background: rgba(229, 57, 53, 0.95);
}

.mute-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Loading spinner */
.loading-spinner {
    position: absolute;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: white;
}

.loading-spinner .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.avatar-start-btn {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.avatar-start-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 35px;
    border-color: transparent transparent transparent white;
    margin-left: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    text-indent: 0;
}

.avatar-start-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
}

/* Right Side - Chat/Cart */
.chat-section {
    width: 360px;
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    border-left: 1px solid var(--border-color);
}

/* When shown by JS with display: block, force it back to flex */
.chat-section[style*="display: block"] {
    display: flex !important;
}

.chat-header {
    flex-shrink: 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.header-top {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.header-info {
    font-size: 11px;
    color: var(--text-light);
}

.cart-total-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.hide-cart-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    color: var(--text-dark);
}

.hide-cart-btn:hover {
    background: var(--bg-light);
    border-color: var(--text-light);
}

/* Language selector styling */
#languageSelector {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    color: var(--text-dark);
}

#languageSelector:hover {
    border-color: var(--text-light);
}

/* Floating toggle button when chat is hidden */
.floating-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
    z-index: 1000;
    transition: all 0.3s;
    display: none;
    min-width: 160px;
    text-align: center;
}

.floating-toggle:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.5);
}

.floating-toggle.show {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Floating language selector - styled like basket button */
.floating-language {
    position: fixed;
    bottom: 20px;
    right: 190px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-dark);
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    opacity: 0.75;
    min-width: 100px;
    text-align: center;
}

.floating-language:hover:not(:disabled) {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.floating-language:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.floating-language.show {
    display: block;
}

/* Toggle functionality */
.chat-section.hidden {
    display: none;
}

.ai-banner {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    padding: 8px 16px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-banner:hover {
    background: linear-gradient(135deg, #059669, #047857);
}

.ai-banner a {
    color: white;
    text-decoration: underline;
    pointer-events: none;
}

.order-summary {
    padding: 18px 16px !important;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.order-summary h6,
.order-summary .checkout-btn {
    display: none !important;
}

.total-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.total-value span:first-child {
    color: var(--text-dark);
    font-weight: 500;
}

.total-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
}

.checkout-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--secondary-color), #00B894);
    border: none;
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.5;
}

.checkout-btn:disabled {
    cursor: not-allowed;
}

.checkout-btn:not(:disabled) {
    opacity: 1;
}

/* Tab styling - active state with green background */
.chat-tabs {
    display: flex;
    padding: 12px 16px;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-white);
}

.chat-tabs .tab-btn {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
    color: #6c757d;
}

.chat-tabs .tab-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
    font-weight: 600;
}

.chat-tabs .btn-check:checked + .tab-btn i {
    color: white !important;
}

.chat-tabs .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

.tab-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dc3545;
    color: white;
    padding: 0 5px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
    flex-shrink: 0;
}

.chat-content, .cart-content, .receipt-content, .desk-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.cart-content, .receipt-content, .desk-content {
    display: none;
}

/* Tab wrapper - allow wrapping */
.chat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}

.chat-tabs .tab-btn {
    flex: 0 1 auto;
    min-width: fit-content;
}

/* EXACT MATCH to your design - smaller fonts + animated dots */
.chat-content .chat-message {
    margin-bottom: 8px !important;
    clear: both !important;
    width: 100% !important;
}

.chat-content .message-bubble {
    border-radius: 12px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.chat-content .message-bubble.kuba-message {
    background: #E8E8E8 !important;
    color: #000 !important;
}

.chat-content .message-bubble.user-message {
    background: #5B68F5 !important;
    color: white !important;
}

.chat-content .message-header {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    flex-wrap: nowrap !important;
}

.chat-content .message-bubble.kuba-message .message-header {
    color: #666 !important;
}

.chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.85) !important;
}

.chat-content .message-header i {
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.chat-content .sender-name {
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

.chat-content .message-time {
    font-weight: 400 !important;
    font-size: 11px !important;
    opacity: 0.7 !important;
    flex-shrink: 0 !important;
}

.chat-content .message-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: inherit !important;
    margin: 0 !important;
}

/* Thinking indicator - EXACT same style as Kuba messages */
.chat-content .thinking-indicator {
    display: none !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

.chat-content .thinking-indicator.show {
    display: block !important;
}

.chat-content .thinking-bubble {
    background: #E8E8E8 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #666 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
}

.chat-content .thinking-bubble i {
    font-size: 14px !important;
    color: #666 !important;
    flex-shrink: 0 !important;
}

.chat-content .thinking-bubble > span {
    font-size: 11px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

.chat-content .thinking-dots {
    display: inline-flex !important;
    gap: 3px !important;
    align-items: center !important;
    height: 14px !important;
}

.chat-content .thinking-dots span {
    width: 5px !important;
    height: 5px !important;
    background: #666 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: thinking-bounce 1.4s infinite ease-in-out both !important;
}

.chat-content .thinking-dots span:nth-child(1) {
    animation-delay: -0.32s !important;
}

.chat-content .thinking-dots span:nth-child(2) {
    animation-delay: -0.16s !important;
}

.chat-content .thinking-dots span:nth-child(3) {
    animation-delay: 0s !important;
}

@keyframes thinking-bounce {
    0%, 80%, 100% {
        transform: translateY(0) scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: translateY(-8px) scale(1);
        opacity: 1;
    }
}

/* Remove ALL Bootstrap and old styles */
.chat-content .d-flex,
.chat-content .flex-shrink-0,
.chat-content .flex-grow-1,
.chat-content .ms-2,
.chat-content .mb-3,
.chat-content .bg-light,
.chat-content .bg-primary,
.chat-content .rounded,
.chat-content .p-3 {
    all: unset !important;
}

.message-input-area {
    flex-shrink: 0;
    padding: 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-white);
}

.message-input {
    display: flex;
    gap: 8px;
}

.message-input input[type="text"] {
    flex: 1;
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.message-input input[type="text"]:focus {
    border-color: var(--primary-color);
}

.message-input input[type="text"]:disabled {
    background: var(--bg-light);
    cursor: not-allowed;
    opacity: 0.6;
}

.message-input .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #4c5fd5);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
}

.message-input .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.message-input .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Status overlay with animated dots */
.status-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    margin-left: 4px;
}

.status-dots span {
    width: 5px;
    height: 5px;
    background: var(--bg-white);
    border-radius: 50%;
    display: inline-block;
    animation: status-dot-bounce 1.4s infinite ease-in-out both;
}

.status-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.status-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.status-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes status-dot-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Klono.ai logo in bottom-left corner */
.klono-logo {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 9999 !important;
    opacity: 0.85;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.klono-logo img {
    height: 32px;
    width: auto;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.klono-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Unified empty state styling */
.empty-chat-message,
.empty-cart-message,
.empty-receipt-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-light);
    text-align: center;
    padding: 2rem 1.5rem;
}

.empty-chat-message i,
.empty-cart-message i,
.empty-receipt-message i {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: #9CA3AF;
    opacity: 1;
}

.empty-chat-message h5,
.empty-cart-message h5,
.empty-receipt-message h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.empty-chat-message p,
.empty-cart-message p,
.empty-receipt-message p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #9CA3AF;
    margin: 0;
    max-width: 320px;
}

/* Hide Kasa (checkout) button */
#checkoutBtnHeader,
.checkout-btn {
    display: none !important;
}

/* Receipt styling */
.receipt-box {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.05), rgba(0, 212, 170, 0.05));
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {
    .main-wrapper {
        flex-direction: column;
    }

    .video-section {
        height: 50vh;
    }

    .chat-section {
        width: 100%;
        height: 50vh;
    }
    
    .klono-logo {
        bottom: 15px;
        left: 15px;
        z-index: 1000;
    }
    
    .klono-logo img {
        height: 28px;
    }
    
    .ai-banner {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .order-summary {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .header-top {
        padding: 8px 12px !important;
    }
    
    .header-info {
        font-size: 10px !important;
    }
    
    #languageSelector {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
    
    .chat-tabs {
        padding: 8px 12px !important;
        gap: 6px !important;
    }
    
    .chat-tabs .tab-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    
    .tab-badge {
        padding: 1px 4px !important;
        font-size: 9px !important;
        min-width: 16px !important;
    }
    
    .message-input-area {
        padding: 10px 12px !important;
    }
    
    .message-input input[type="text"] {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    
    .message-input .btn-primary {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
    
    .chat-content, .cart-content, .receipt-content {
        padding: 12px !important;
    }
    
    #background-video {
        transform: translate(-50%, -50%) scale(0.85) !important;
    }
}

@media (max-width: 480px) {
    .header-top {
        padding: 6px 10px !important;
    }
    
    .order-summary {
        padding: 8px 10px !important;
    }
    
    .total-value {
        font-size: 11px !important;
    }
    
    .total-amount {
        font-size: 15px !important;
    }
    
    .chat-tabs {
        padding: 6px 10px !important;
        gap: 4px !important;
    }
    
    .chat-tabs .tab-btn {
        padding: 5px 6px !important;
        font-size: 10px !important;
    }
    
    .message-input-area {
        padding: 8px 10px !important;
    }
    
    .message-input input[type="text"] {
        padding: 7px 9px !important;
        font-size: 11px !important;
    }
    
    .message-input .btn-primary {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
    
    .floating-toggle {
        bottom: 15px !important;
        right: 15px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-width: 120px !important;
    }
    
    .floating-language {
        bottom: 15px !important;
        right: 145px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-width: 80px !important;
    }
    
    .klono-logo {
        bottom: 15px !important;
        left: 15px !important;
    }
    
    .klono-logo img {
        height: 24px !important;
    }
    
    .ai-banner,
    div[onclick*="showKlonoInfo"],
    .chat-header .ai-banner {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
    
    #background-video {
        transform: translate(-50%, -50%) scale(0.80) !important;
    }
}

@media (max-width: 375px) {
    .total-value {
        font-size: 10px !important;
    }
    
    .total-amount {
        font-size: 14px !important;
    }
    
    .klono-logo img {
        height: 20px !important;
    }
    
    .floating-toggle {
        padding: 6px 12px !important;
        font-size: 11px !important;
        min-width: 110px !important;
    }
    
    .floating-language {
        padding: 6px 10px !important;
        font-size: 11px !important;
        min-width: 70px !important;
        right: 130px !important;
    }
    
    #background-video {
        transform: translate(-50%, -50%) scale(0.75) !important;
    }
}
/* Domain Status Overlay */
#domain-status-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.90);
    z-index: 10004;
    display: flex;
    align-items: center;
    justify-content: center;
}

#domain-status-overlay.show {
    display: flex !important;
}

.status-overlay.speaking {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.95), rgba(234, 88, 12, 0.95)) !important;
    border: 2px solid rgba(251, 146, 60, 0.8) !important;
}

.status-overlay.speaking .status-dots.speaking span {
    background: rgba(255, 255, 255, 0.9);
}

.status-overlay.speaking .status-dots.speaking span:nth-child(1) {
    animation: speaking-pulse 1s ease-in-out infinite;
}

.status-overlay.speaking .status-dots.speaking span:nth-child(2) {
    animation: speaking-pulse 1s ease-in-out 0.2s infinite;
}

.status-overlay.speaking .status-dots.speaking span:nth-child(3) {
    animation: speaking-pulse 1s ease-in-out 0.4s infinite;
}

@keyframes speaking-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}
/* Prevent white flash during video loading */
.video-container {
    background-color: #000; /* Black background instead of white */
}

#background-video,
#background-image {
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

/* Ensure HeyGen video appears smoothly */
.video-container video:not(#background-video) {
    opacity: 0;
    animation: fadeInVideo 0.8s ease-in forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInVideo {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Prevent white flash during video loading */
.video-container {
    background-color: #000; /* Black background instead of white */
}

/* Background video/image - starts visible, fades out when avatar loads */
#background-video,
#background-image {
    opacity: 1;
    transition: opacity 1.2s ease-out;
    z-index: 1;
}

/* HeyGen avatar video - smooth fade in */
.video-container video:not(#background-video) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2; /* Above background */
    opacity: 0;
    animation: fadeInAvatar 1.5s ease-in forwards;
    animation-delay: 0.5s; /* Delay slightly so background fades first */
}

@keyframes fadeInAvatar {
    from { 
        opacity: 0;
        transform: scale(0.98);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* When avatar is speaking/active, ensure it's visible */
.video-container video[data-lk-local-participant],
.video-container video[data-lk-remote-participant] {
    z-index: 2;
}
.avatar-start-btn {
    width: 240px;  /* Doubled from 120px */
    height: 240px;  /* Doubled from 120px */
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: 8px solid rgba(255, 255, 255, 0.9);  /* Doubled from 4px */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0;
    text-indent: -9999px;
    overflow: visible;  /* Changed to visible for pulsing ring */
    animation: pulse-button 2s ease-in-out infinite;
}

/* Pulsing ring effect around the button */
.avatar-start-btn::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 3px solid rgba(40, 167, 69, 0.6);
    animation: pulse-ring 2s ease-in-out infinite;
}

.avatar-start-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 70px;  /* Doubled from 20px 0 20px 35px */
    border-color: transparent transparent transparent white;
    margin-left: 12px;  /* Doubled from 6px */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    text-indent: 0;
}

.avatar-start-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    animation: pulse-button-hover 1.5s ease-in-out infinite;
}

/* Pulsing animation */
@keyframes pulse-button {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5), 
                    0 0 0 0 rgba(40, 167, 69, 0.7);
    }
}

/* Pulsing ring animation - like the status overlay */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Faster pulse on hover */
@keyframes pulse-button-hover {
    0%, 100% {
        transform: scale(1.1);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 16px 64px rgba(40, 167, 69, 0.6),
                    0 0 0 8px rgba(40, 167, 69, 0.3);
    }
}
   /* Info Section Styling - Changed from alert red to info blue */
        .alert-section {
            background: linear-gradient(135deg, #fb923c, #f97316);
            padding: 12px 16px;
            margin: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            animation: slideDown 0.3s ease-out;
            display: none;
        }

        .alert-content {
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
            font-size: 14px;
            font-weight: 500;
        }

        .alert-content i.bi-exclamation-triangle-fill {
            font-size: 20px;
            flex-shrink: 0;
        }

        .alert-content span {
            flex: 1;
            line-height: 1.4;
        }

        .alert-close-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .alert-close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Language Dropdown Button Styling */
        .language-dropdown-button {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 500;
            color: #495057;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: auto;
            justify-content: center;
        }
        
        /* Floating Language Button (white style) */
        #floating-language-button {
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            color: #495057;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border-radius: 50px;
            min-width: auto;
        }
        
        #floating-language-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            background: #f8f9fa;
        }

        .language-dropdown-button:hover {
            background: #f8f9fa;
            border-color: #adb5bd;
        }

        .language-dropdown-menu {
            position: absolute;
            top: calc(100% + 5px);
            right: 0;
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            min-width: 120px;
            display: none;
            z-index: 1000;
            padding: 4px 0;
        }

        .language-option {
            width: 100%;
            padding: 10px 15px;
            border: none;
            background: var(--bg-white);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            text-align: left;
            border-radius: 4px;
            transition: background 0.2s;
            color: #495057;
        }

        .language-option:hover {
            background: #f8f9fa;
        }

        .language-option.selected {
            background: #e7f5ff;
            color: #0c63e4;
            font-weight: 600;
        }

        .language-option .check-icon {
            margin-left: auto;
            color: #0c63e4;
            font-size: 16px;
        }
    /* Ensure body covers entire viewport including safe areas */
  @media (min-width: 481px) {
    .klono-logo {
        bottom: 20px !important;
        left: 20px !important;
    }
    
    #floating-keyboard-btn {
        bottom: 20px !important;
        right: 275px !important;
    }
    
    #floating-language-container {
        bottom: 20px !important;
        right: 190px !important;
    }
    
    #floating-toggle {
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* Even smaller phones */
@media (max-width: 375px) {
    .klono-logo {
        bottom: 85px !important;
        left: 12px !important;
    }
    
    .klono-logo img {
        height: 24px !important;
    }
    
    #floating-keyboard-btn {
        bottom: 104px !important;
        right: 12px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    
    #floating-language-container {
        bottom: 58px !important;
        right: 12px !important;
    }
    
    #floating-language-button {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-width: 70px !important;
    }
    
    #floating-toggle {
        bottom: 12px !important;
        right: 12px !important;
        padding: 10px 16px !important;
        font-size: 12px !important;
        min-width: 110px !important;
    }
}
/* ========================================
   KEYBOARD ICON BUTTON IN INPUT AREA
   ======================================== */

.message-input-area {
    position: relative;
}

.message-input-area .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Keyboard Icon Button Styling */
.keyboard-icon-btn {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-right: none;
    color: #495057;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px 0 0 4px;
    flex-shrink: 0;
}

.keyboard-icon-btn:hover {
    background: #f8f9fa;
}

.keyboard-icon-btn:active {
    background: #e9ecef;
    transform: scale(0.95);
}

/* Input Field Adjustments */
.message-input-area .message-input {
    border-left: none !important;
    border-radius: 0 !important;
    flex: 1;
}

/* Send Button Adjustments */
.message-input-area .send-btn {
    border-radius: 0 4px 4px 0 !important;
    flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .keyboard-icon-btn {
        padding: 8px 10px;
    }
    
    .keyboard-icon-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Ensure proper alignment on all screen sizes */
.message-input-area .input-group > * {
    margin: 0 !important;
}

/* Focus state for input */
.message-input-area .message-input:focus {
    box-shadow: none;
    border-color: #dee2e6;
}

/* When keyboard button is next to focused input */
.message-input-area .message-input:focus + .keyboard-icon-btn,
.keyboard-icon-btn:focus + .message-input,
.keyboard-icon-btn:active + .message-input {
    border-color: #dee2e6;
}
/* ============================================
   DESK TAB - MINIMAL CSS (Add to style.css)
   ============================================ */

/* Hide desk content by default */
.desk-content {
    display: none;
    flex-direction: column;
    height: calc(100vh - 220px);
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
}

/* Show desk content when desk tab is checked */
#deskOption:checked ~ .desk-content {
    display: flex;
}

/* Hide other content when desk tab is active */
#deskOption:checked ~ .chat-content,
#deskOption:checked ~ .cart-content,
#deskOption:checked ~ .receipt-content {
    display: none;
}

/* Empty desk message styling */
.empty-desk-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #6c757d;
    padding: 40px 20px;
}

.empty-desk-message i {
    font-size: 64px;
    margin-bottom: 20px;
    color: #dee2e6;
}

.empty-desk-message h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.empty-desk-message p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .desk-content {
        height: calc(100vh - 200px);
        padding: 15px;
    }
}
/* ============================================
   DESK TAB STYLING
   ============================================ */

/* Empty Desk Message */
.empty-desk-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #6c757d;
    padding: 40px 20px;
}

.empty-desk-message i {
    font-size: 64px;
    margin-bottom: 20px;
    color: #dee2e6;
}

.empty-desk-message h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

.empty-desk-message p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .empty-desk-message {
        padding: 30px 15px;
    }
    
    .empty-desk-message i {
        font-size: 48px;
    }
    
    .empty-desk-message h5 {
        font-size: 16px;
    }
    
    .empty-desk-message p {
        font-size: 13px;
    }
}
/* ============================================
   DESK DOCUMENTS STYLING
   ============================================ */

.desk-documents {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

.desk-document-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-white);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.desk-document-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #cbd5e1;
}

.desk-doc-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
}

.desk-doc-icon i {
    font-size: 28px;
}

.desk-doc-content {
    flex: 1;
    min-width: 0;
}

.desk-doc-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desk-doc-description {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 8px 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.desk-doc-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #9ca3af;
}

.desk-doc-type {
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
}

.desk-doc-size,
.desk-doc-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.desk-doc-action {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 18px;
    transition: all 0.2s;
}

.desk-document-card:hover .desk-doc-action {
    color: #3b82f6;
    transform: scale(1.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .desk-document-card {
        padding: 12px;
        gap: 12px;
    }
    
    .desk-doc-icon {
        width: 40px;
        height: 40px;
    }
    
    .desk-doc-icon i {
        font-size: 24px;
    }
    
    .desk-doc-title {
        font-size: 14px;
    }
    
    .desk-doc-description {
        font-size: 12px;
    }
    
    .desk-doc-meta {
        font-size: 11px;
        gap: 8px;
    }
}

/* Very small mobile */
@media (max-width: 480px) {
    .desk-doc-action {
        display: none;
    }
    
    .desk-doc-meta {
        flex-direction: column;
        gap: 4px;
    }
}
        /* Desk tab functionality */
        #chatOption:checked ~ #chatContent { display: block !important; }
        #chatOption:checked ~ #cartContent,
        #chatOption:checked ~ #receiptContent,
        #chatOption:checked ~ #deskContent { display: none !important; }
        
        #cartOption:checked ~ #cartContent { display: block !important; }
        #cartOption:checked ~ #chatContent,
        #cartOption:checked ~ #receiptContent,
        #cartOption:checked ~ #deskContent { display: none !important; }
        
        #receiptOption:checked ~ #receiptContent { display: block !important; }
        #receiptOption:checked ~ #chatContent,
        #receiptOption:checked ~ #cartContent,
        #receiptOption:checked ~ #deskContent { display: none !important; }
        
        #deskOption:checked ~ #deskContent { display: block !important; }
        #deskOption:checked ~ #chatContent,
        #deskOption:checked ~ #cartContent,
        #deskOption:checked ~ #receiptContent { display: none !important; }


/* ============================================
   INTERRUPT BUTTON STYLES
   Add this to your main CSS file
   ============================================ */

/* Interrupt button styling - appears when avatar is speaking */
/* ============================================
   INTERRUPT BUTTON STYLES
   Add this to your main CSS file
   ============================================ */

/* Interrupt button styling - appears when avatar is speaking */
.status-overlay .interrupt-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-left: 8px;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    position: relative;
    z-index: 10000;
    pointer-events: auto;
    min-width: 60px;
    height: 24px;
}

.status-overlay .interrupt-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.status-overlay .interrupt-btn:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.3);
}

.status-overlay .interrupt-btn svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    pointer-events: none;
}

/* CRITICAL: Ensure status overlay doesn't block button clicks */
.status-overlay {
    pointer-events: none;
    z-index: 9999;
}

.status-overlay * {
    pointer-events: auto;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .status-overlay .interrupt-btn {
        padding: 5px 10px;
        font-size: 10px;
        margin-left: 8px;
        gap: 4px;
    }
    
    .status-overlay .interrupt-btn svg {
        width: 10px;
        height: 10px;
    }
}

/* Small screen - make button more compact */
@media (max-width: 480px) {
    .status-overlay .interrupt-btn {
        padding: 4px 8px;
        font-size: 9px;
        margin-left: 6px;
        border-radius: 6px;
    }
}

/* Enhanced visual feedback for touch devices */
@media (hover: none) and (pointer: coarse) {
    .status-overlay .interrupt-btn:active {
        background: rgba(255, 255, 255, 0.35);
        transform: scale(0.95);
    }
}

/* Animation for button appearance */
@keyframes fadeInInterrupt {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.status-overlay.thinking .interrupt-btn {
    animation: fadeInInterrupt 0.3s ease-out;
}

/* Ensure button doesn't wrap on small screens */
.status-overlay {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.status-overlay span {
    white-space: nowrap;
}

/* Optional: Add a pulsing effect to make it more noticeable */
@keyframes pulseInterrupt {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.status-overlay .interrupt-btn.pulse {
    animation: pulseInterrupt 2s ease-in-out infinite;
}

/* Disabled state (if needed) */
.status-overlay .interrupt-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .status-overlay .interrupt-btn {
        border: 2px solid white;
        background: rgba(255, 255, 255, 0.3);
    }
}
/* ============================================
   RYBKA.AI - MAIN STYLES WITH DARK MODE SUPPORT
   Version: 2.0.0-DARK-MODE
   ============================================ */

/* ============================================
   CSS VARIABLES - LIGHT MODE (DEFAULT)
   ============================================ */
:root {
    /* Primary Colors */
    --primary-color: #10b981;
    --primary-hover: #059669;
    --primary-light: rgba(16, 185, 129, 0.1);
    
    /* Background Colors */
    --bg-white: #ffffff;
    --bg-light: #f9fafb;
    --bg-gray: #f3f4f6;
    --bg-dark: #111827;
    
    /* Text Colors */
    --text-dark: #111827;
    --text-medium: #374151;
    --text-light: #6b7280;
    --text-lighter: #9ca3af;
    
    /* Border Colors */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    --border-dark: #d1d5db;
    
    /* Status Colors */
    --success-color: #10b981;
    --success-bg: #d1fae5;
    --warning-color: #f59e0b;
    --warning-bg: #fef3c7;
    --error-color: #ef4444;
    --error-bg: #fee2e2;
    --info-color: #3b82f6;
    --info-bg: #dbeafe;
    
    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #10b981, #059669);
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-warning: linear-gradient(135deg, #fb923c, #f97316);
    --gradient-info: linear-gradient(135deg, #3b82f6, #2563eb);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   DARK MODE VARIABLES
   ============================================ */
[data-theme="dark"] {
    /* Primary Colors - slightly adjusted for dark mode */
    --primary-color: #10b981;
    --primary-hover: #34d399;
    --primary-light: rgba(16, 185, 129, 0.15);
    
    /* Background Colors */
    --bg-white: #1f2937;
    --bg-light: #111827;
    --bg-gray: #374151;
    --bg-dark: #f9fafb;
    
    /* Text Colors */
    --text-dark: #f9fafb;
    --text-medium: #e5e7eb;
    --text-light: #d1d5db;
    --text-lighter: #9ca3af;
    
    /* Border Colors */
    --border-color: #374151;
    --border-light: #4b5563;
    --border-dark: #6b7280;
    
    /* Status Colors */
    --success-color: #34d399;
    --success-bg: rgba(16, 185, 129, 0.2);
    --warning-color: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.2);
    --error-color: #f87171;
    --error-bg: rgba(239, 68, 68, 0.2);
    --info-color: #60a5fa;
    --info-bg: rgba(59, 130, 246, 0.2);
    
    /* Shadow - darker for dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    
    /* Gradients remain similar but work well on dark backgrounds */
    --gradient-primary: linear-gradient(135deg, #10b981, #34d399);
    --gradient-success: linear-gradient(135deg, #10b981, #34d399);
    --gradient-warning: linear-gradient(135deg, #fb923c, #fbbf24);
    --gradient-info: linear-gradient(135deg, #3b82f6, #60a5fa);
}

/* ============================================
   DESK TAB - EMPTY STATE
   ============================================ */
.empty-desk-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    background: var(--bg-white);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.empty-desk-message i {
    font-size: 3rem;
    margin-bottom: 16px;
    display: block;
    color: var(--text-light);
}

.empty-desk-message h5 {
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: 600;
}

.empty-desk-message p {
    color: var(--text-light);
    margin: 0;
}

/* ============================================
   DESK BOOKING ITEMS
   ============================================ */
.desk-items-container {
    padding: 16px;
}

.desk-item-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.desk-item-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.desk-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.desk-item-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}

.desk-item-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.desk-item-status.confirmed {
    background: var(--success-color);
    color: white;
}

.desk-item-status.pending {
    background: var(--warning-color);
    color: white;
}

.desk-item-status.cancelled {
    background: var(--error-color);
    color: white;
}

.desk-item-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light);
}

.desk-item-detail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.desk-item-detail i {
    width: 16px;
    text-align: center;
}

/* ============================================
   RECEIPT STYLES
   ============================================ */
.receipt-box {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.receipt-box .fw-bold {
    font-size: 12px;
    color: var(--text-light);
}

.receipt-box .fs-4 {
    font-size: 1.5rem;
}

.receipt-box .fs-5 {
    font-size: 1.25rem;
}

/* Pickup Code Box - Special styling */
.receipt-box.pickup-code {
    background: var(--gradient-success);
    border: none;
}

.receipt-box.pickup-code .code-display {
    font-size: 36px;
    font-weight: 800;
    color: white;
    letter-spacing: 4px;
    font-family: 'Courier New', monospace;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.receipt-box.pickup-code .code-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

.receipt-box.pickup-code .code-instruction {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
}

/* Map Container */
.map-container {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    height: 200px;
    transition: border-color var(--transition-normal);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.map-info {
    margin-top: 8px;
    padding: 8px;
    border-radius: 8px;
    font-size: 11px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.map-info .fw-semibold {
    color: var(--text-dark);
}

.map-info .store-hours {
    font-size: 10px;
    color: var(--text-light);
}

/* Empty Receipt State */
.empty-receipt-message {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--bg-white);
    transition: background-color var(--transition-normal);
}

.empty-receipt-message i {
    font-size: 3rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.empty-receipt-message h5 {
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.empty-receipt-message p {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* ============================================
   CHAT STYLES
   ============================================ */
.empty-chat-message {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-light);
}

.empty-chat-message i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.empty-chat-message h5 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.empty-chat-message p {
    color: var(--text-light);
    margin: 0;
}

/* Chat Messages */
.chat-message {
    margin-bottom: 8px;
    clear: both;
    overflow: auto;
}

.message-bubble {
    border-radius: 12px;
    padding: 12px 16px;
    max-width: 85%;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.message-bubble.kuba-message {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    float: left;
}

.message-bubble.user-message {
    background: var(--primary-color);
    color: white;
    float: right;
    border: 1px solid var(--primary-color);
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.message-bubble.kuba-message .message-header {
    color: var(--text-light);
}

.message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9);
}

.message-header i {
    font-size: 14px;
}

.sender-name {
    font-weight: 600;
}

.message-time {
    margin-left: auto;
    opacity: 0.7;
    font-size: 11px;
}

.message-text {
    font-size: 14px;
    line-height: 1.5;
}

.message-bubble.kuba-message .message-text {
    color: var(--text-dark);
}

.message-bubble.user-message .message-text {
    color: white;
}

/* ============================================
   ALERT SECTIONS
   ============================================ */
.alert-section {
    padding: 12px 16px;
    margin: 0;
    box-shadow: var(--shadow-md);
    display: block;
    border-radius: 0;
}

.alert-section.phone-alert {
    background: var(--gradient-success);
}

.alert-section.email-alert {
    background: var(--gradient-info);
}

.alert-section.info-alert {
    background: var(--gradient-warning);
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.alert-content i {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-content span {
    flex: 1;
    line-height: 1.4;
}

.alert-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.alert-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    font-size: 14px;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    color: white;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   INPUT FIELDS
   ============================================ */
.message-input,
.form-control {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 10px 16px;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.message-input:focus,
.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.message-input:disabled,
.form-control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-gray);
}

.message-input::placeholder,
.form-control::placeholder {
    color: var(--text-lighter);
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
.thinking-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 12px;
    animation: pulse 1.5s ease-in-out infinite;
}

.thinking-indicator i {
    color: var(--primary-color);
}

.thinking-indicator span {
    color: var(--text-light);
    font-size: 13px;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-success {
    color: var(--success-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}

.text-error {
    color: var(--error-color) !important;
}

.text-info {
    color: var(--info-color) !important;
}

.fw-bold {
    font-weight: 700;
}

.fw-semibold {
    font-weight: 600;
}

.fw-medium {
    font-weight: 500;
}

.d-none {
    display: none !important;
}

.hidden {
    visibility: hidden;
    opacity: 0;
}

.w-100 {
    width: 100%;
}

.text-center {
    text-align: center;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .message-bubble {
        max-width: 90%;
    }
    
    .desk-items-container {
        padding: 12px;
    }
    
    .desk-item-card {
        padding: 12px;
    }
    
    .receipt-box {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .message-bubble {
        max-width: 95%;
    }
    
    .empty-desk-message,
    .empty-chat-message,
    .empty-receipt-message {
        padding: 2rem 1rem;
    }
    
    .empty-desk-message i,
    .empty-chat-message i,
    .empty-receipt-message i {
        font-size: 2.5rem;
    }
}

/* ============================================
   DARK MODE TOGGLE BUTTON (Optional)
   ============================================ */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.dark-mode-toggle i {
    font-size: 20px;
    color: var(--text-dark);
}

/* ============================================
   SMOOTH TRANSITIONS ON THEME CHANGE
   ============================================ */
* {
    transition: background-color var(--transition-normal), 
                color var(--transition-normal), 
                border-color var(--transition-normal);
}

/* Disable transitions during page load to prevent flash */
.preload * {
    transition: none !important;
}
/* ============================================
   CSS PATCH - Missing Styles After Dark Mode Update
   Add this to your styles.css or use as standalone
   ============================================ */

/* ============================================
   STATUS OVERLAY - Voice Chat Status
   ============================================ */
.status-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    display: none; /* Hidden by default */
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.status-overlay.show {
    display: flex !important; /* Show when .show class is added */
}

/* Active (listening) state - green with pulse */
.status-overlay.active {
    background: rgba(76, 175, 80, 0.95);
    animation: pulse 2s ease-in-out infinite;
}

/* Thinking state - red, no pulse */
.status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
        transform: scale(1.02);
    }
}

/* ============================================
   ALERT SECTION - Orange Info Notifications
   ============================================ */
.alert-section {
    background: linear-gradient(135deg, #fb923c, #f97316); /* Orange gradient */
    padding: 12px 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease-out;
    display: none; /* Hidden by default - JavaScript shows it */
    position: relative;
    z-index: 100;
}

/* Show alert when it has content or .show class */
.alert-section.show,
.alert-section[style*="display: block"] {
    display: block !important;
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.alert-content i.bi-exclamation-triangle-fill,
.alert-content i {
    font-size: 20px;
    flex-shrink: 0;
}

.alert-content span {
    flex: 1;
    line-height: 1.4;
}

.alert-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.alert-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   PHONE & EMAIL ALERT SECTIONS
   ============================================ */
#phoneAlertSection {
    background: linear-gradient(135deg, #10b981, #059669); /* Green */
    padding: 12px 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: block;
    animation: slideDown 0.3s ease-out;
}

#emailAlertSection {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* Blue */
    padding: 12px 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: block;
    animation: slideDown 0.3s ease-out;
}

/* ============================================
   TERMS & PRIVACY OVERLAY
   ============================================ */
#terms-privacy-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
}

/* ============================================
   DARK MODE COMPATIBILITY
   ============================================ */
[data-theme="dark"] .status-overlay {
    /* Status overlay works in dark mode */
}

[data-theme="dark"] .alert-section {
    /* Alert gradients work in both modes */
}

[data-theme="dark"] #phoneAlertSection,
[data-theme="dark"] #emailAlertSection {
    /* Alert sections work in both modes */
}

/* ============================================
   IMPORTANT OVERRIDES
   ============================================ */
/* Ensure these elements show when needed regardless of other CSS */
.status-overlay.show {
    display: flex !important;
}

.alert-section[style*="display: block"],
.alert-section[style*="display:block"] {
    display: block !important;
}

#alertSection[style*="display: block"],
#alertSection[style*="display:block"] {
    display: block !important;
}

/* ============================================
   LOADING STATES
   ============================================ */
/* Ensure status shows during page load if needed */
body.loading .status-overlay.show {
    display: flex !important;
}

/* ============================================
   Z-INDEX HIERARCHY
   ============================================ */
.status-overlay {
    z-index: 9999;
}

.alert-section,
#phoneAlertSection,
#emailAlertSection,
#alertSection {
    z-index: 100;
}

#terms-privacy-overlay {
    z-index: 10000 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .status-overlay {
        top: 10px;
        left: 10px;
        font-size: 12px;
        padding: 8px 14px;
    }
    
    .alert-section {
        padding: 10px 12px;
    }
    
    .alert-content {
        font-size: 13px;
    }
}
/* ============================================
   DARK MODE VARIABLES ONLY
   Add this to your existing styles.css
   ============================================ */

/* Add dark mode variables */
[data-theme="dark"] {
    /* Primary Brand Colors - adjusted for dark mode */
    --primary-color: #7289DA;
    --secondary-color: #1DD1A1;
    
    /* Text Colors - inverted */
    --text-dark: #F9FAFB;
    --text-light: #D1D5DB;
    
    /* Background Colors - dark */
    --bg-white: #1F2937;
    --bg-light: #111827;
    --bg-gray: #374151;
    --chat-bg: #1F2937;
    --message-bg: #374151;
    --input-bg: #374151;
    
    /* Border Colors - dark */
    --border-color: #374151;
    
    /* Shadow - deeper for dark mode */
    --shadow: rgba(0, 0, 0, 0.4);
}

/* Smooth transitions for theme switching */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Prevent transitions during page load */
.preload * {
    transition: none !important;
}
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}

/* ============================================
   THINKING INDICATOR (Kuba is thinking...)
   ============================================ */
.thinking-indicator {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #E8E8E8;
    border-radius: 12px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    animation: thinkingPulse 1.5s ease-in-out infinite;
}

.thinking-indicator i {
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}

.thinking-indicator span {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

@keyframes thinkingPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

[data-theme="dark"] .thinking-indicator {
    background: #374151 !important;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF !important;
}

[data-theme="dark"] .thinking-indicator span {
    color: #9CA3AF !important;
}

.chat-content .thinking-indicator {
    display: flex !important;
}

.thinking-indicator.hidden {
    display: none !important;
}
/* ============================================
   THINKING INDICATOR FIX
   Ensures thinking indicator shows properly and matches Kuba's message style
   ============================================ */

/* Base thinking indicator style - matches Kuba message bubble */
.thinking-indicator {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #E8E8E8;
    border-radius: 12px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    animation: thinkingPulse 1.5s ease-in-out infinite;
}

.thinking-indicator i {
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}

.thinking-indicator span {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

/* Pulsing animation for thinking indicator */
@keyframes thinkingPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Dark mode styles for thinking indicator */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

[data-theme="dark"] .thinking-indicator span {
    color: #9CA3AF;
}

/* Ensure it shows in chat content */
.chat-content .thinking-indicator {
    display: flex !important;
}

/* Hide class if needed */
.thinking-indicator.hidden {
    display: none !important;
}
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}

/* ============================================
   ORDER BUTTON WHITE BACKGROUND FIX
   Fixes white container around "Kliknij aby zamówić"
   ============================================ */

/* Fix button container/wrapper */
[data-theme="dark"] .order-button-container,
[data-theme="dark"] .checkout-container,
[data-theme="dark"] .cart-footer,
[data-theme="dark"] .basket-footer {
    background: #1F2937 !important;
}

/* Info notification area */
[data-theme="dark"] .cart-info-section,
[data-theme="dark"] .basket-info-section {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

/* Remove white backgrounds from any wrapper divs */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background-color:white"],
[data-theme="dark"] div[style*="background:#FFFFFF"],
[data-theme="dark"] div[style*="background: #FFFFFF"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] div[style*="background: #ffffff"],
[data-theme="dark"] div[style*="background:#FFF"],
[data-theme="dark"] div[style*="background: #FFF"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Keep green button green */
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .order-button,
[data-theme="dark"] button[onclick*="checkout"] {
    background: linear-gradient(135deg, #10B981, #059669) !important;
}

/* Parent containers should be dark */
[data-theme="dark"] .right-column > div,
[data-theme="dark"] .cart-container > div,
[data-theme="dark"] .basket-container > div {
    background: transparent !important;
}
/* ============================================
   FIX: Order Button White Background in Dark Mode
   The "Kliknij aby zamówić" button wrapper fix
   ============================================ */

/* Fix for button container/wrapper with white background */
[data-theme="dark"] .order-button-container,
[data-theme="dark"] .checkout-container,
[data-theme="dark"] .cart-footer,
[data-theme="dark"] .basket-footer {
    background: #1F2937 !important;
}

/* Fix the button itself */
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .order-button,
[data-theme="dark"] .place-order-btn,
[data-theme="dark"] button[onclick*="zamówi"],
[data-theme="dark"] button[onclick*="checkout"] {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border: none !important;
    color: white !important;
}

[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

/* Fix any wrapper div around the button */
[data-theme="dark"] .checkout-btn-wrapper,
[data-theme="dark"] .order-btn-wrapper,
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background-color:white"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Fix the cart section that contains the button */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937 !important;
}

/* Info section above button */
[data-theme="dark"] .cart-info-section,
[data-theme="dark"] .basket-info-section {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

/* Disabled state */
[data-theme="dark"] .checkout-btn:disabled,
[data-theme="dark"] .order-button:disabled {
    background: #4B5563 !important;
    color: #9CA3AF !important;
    opacity: 0.6;
}

/* Remove any white backgrounds from parent containers */
[data-theme="dark"] .right-column > div,
[data-theme="dark"] .cart-container > div,
[data-theme="dark"] .basket-container > div {
    background: transparent !important;
}

/* Specific fix for any div with inline white background in dark mode */
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] {
    background: #1F2937 !important;
}

/* Green button should stay green */
[data-theme="dark"] button[style*="background: linear-gradient"][style*="10B981"],
[data-theme="dark"] button[style*="background:linear-gradient"][style*="10B981"] {
    /* Keep the green gradient */
    background: linear-gradient(135deg, #10B981, #059669) !important;
}
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}

/* ============================================
   PRESERVE ORIGINAL COLORS - VIDEO SECTION
   Video section elements should keep light mode colors
   ============================================ */

/* Language selector on video - ALWAYS WHITE */
[data-theme="dark"] .video-section .language-selector,
[data-theme="dark"] .video-section .language-dropdown-button,
[data-theme="dark"] .video-section select {
    background: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="dark"] .video-section .language-selector:hover {
    background: #f8f9fa !important;
}

/* Status overlay - ALWAYS RED (thinking) or GREEN (active) */
[data-theme="dark"] .status-overlay,
[data-theme="dark"] .status-overlay.thinking,
[data-theme="dark"] #status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95) !important;
    color: white !important;
}

[data-theme="dark"] .status-overlay.active,
[data-theme="dark"] #status-overlay.active {
    background: rgba(76, 175, 80, 0.95) !important;
    color: white !important;
}

/* "Pokaż" button - KEEP BLUE */
[data-theme="dark"] .video-section .show-btn,
[data-theme="dark"] .video-section button[onclick*="pokaz"] {
    background: #5B68F5 !important;
    color: white !important;
}

/* End button - KEEP GRAY */
[data-theme="dark"] .video-section .end-button {
    background: rgba(108, 117, 125, 0.9) !important;
}

[data-theme="dark"] .video-section .end-button:hover {
    background: rgba(220, 53, 69, 0.9) !important;
}

/* Mute button - KEEP GREEN/RED */
[data-theme="dark"] .video-section .mute-button {
    background: rgba(76, 175, 80, 0.95) !important;
}

[data-theme="dark"] .video-section .mute-button.muted {
    background: rgba(244, 67, 54, 0.95) !important;
}

/* Icons on video section - KEEP WHITE */
[data-theme="dark"] .video-section button svg,
[data-theme="dark"] .video-section .settings-icon svg {
    stroke: white !important;
}

/* Video section background - don't change */
[data-theme="dark"] .video-section {
    background: inherit !important;
}
/* ============================================
   PRESERVE ORIGINAL COLORS - VIDEO SECTION
   These elements on the video/left side should ALWAYS keep light mode colors
   ============================================ */

/* ============================================
   LANGUAGE SELECTOR (on video section) - ALWAYS WHITE
   ============================================ */

/* Language selector on video section - keep white/light */
[data-theme="dark"] .video-section .language-selector,
[data-theme="dark"] .video-section .language-dropdown-button,
[data-theme="dark"] .video-section select,
[data-theme="dark"] .video-section .lang-selector {
    background: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="dark"] .video-section .language-selector:hover,
[data-theme="dark"] .video-section .language-dropdown-button:hover {
    background: #f8f9fa !important;
}

/* Language dropdown arrow/icon */
[data-theme="dark"] .video-section .language-selector svg,
[data-theme="dark"] .video-section .language-dropdown-button svg {
    stroke: #495057 !important;
}

/* ============================================
   STATUS OVERLAY (Kuba myśli, three dots) - KEEP RED
   ============================================ */

/* "Kuba myśli" with three dots - ALWAYS RED */
[data-theme="dark"] .status-overlay,
[data-theme="dark"] .status-overlay.thinking,
[data-theme="dark"] #status-overlay,
[data-theme="dark"] #status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95) !important;
    color: white !important;
}

/* Active/Listening state - ALWAYS GREEN */
[data-theme="dark"] .status-overlay.active,
[data-theme="dark"] #status-overlay.active {
    background: rgba(76, 175, 80, 0.95) !important;
    color: white !important;
    animation: pulse 2s ease-in-out infinite !important;
}

/* Text and icon inside status overlay */
[data-theme="dark"] .status-overlay span,
[data-theme="dark"] .status-overlay i,
[data-theme="dark"] #status-overlay span,
[data-theme="dark"] #status-overlay i {
    color: white !important;
}

/* ============================================
   DESKTOP/COMPUTER ICON - KEEP WHITE
   ============================================ */
[data-theme="dark"] .video-section .desktop-icon,
[data-theme="dark"] .video-section button svg,
[data-theme="dark"] .video-section .icon-btn svg {
    stroke: white !important;
}

/* ============================================
   "Pokaż" BUTTON - KEEP BLUE
   ============================================ */
[data-theme="dark"] .video-section .show-btn,
[data-theme="dark"] .video-section button[onclick*="pokaz"],
[data-theme="dark"] .video-section .btn-primary {
    background: #5B68F5 !important;
    color: white !important;
    border: none !important;
}

[data-theme="dark"] .video-section .show-btn:hover,
[data-theme="dark"] .video-section button[onclick*="pokaz"]:hover {
    background: #4F5BD5 !important;
}

/* ============================================
   SETTINGS/GEAR ICON - KEEP VISIBLE
   ============================================ */
[data-theme="dark"] .video-section .settings-icon,
[data-theme="dark"] .video-section .gear-icon,
[data-theme="dark"] .video-section .settings-btn svg {
    stroke: white !important;
    fill: none !important;
}

/* ============================================
   END BUTTON - Keep gray
   ============================================ */
[data-theme="dark"] .video-section .end-button {
    background: rgba(108, 117, 125, 0.9) !important;
    color: white !important;
}

[data-theme="dark"] .video-section .end-button:hover {
    background: rgba(220, 53, 69, 0.9) !important;
}

/* ============================================
   MUTE BUTTON - Keep green/red
   ============================================ */
[data-theme="dark"] .video-section .mute-button {
    background: rgba(76, 175, 80, 0.95) !important;
    color: white !important;
}

[data-theme="dark"] .video-section .mute-button.muted {
    background: rgba(244, 67, 54, 0.95) !important;
}

/* ============================================
   VIDEO SECTION BACKGROUND - DON'T CHANGE
   ============================================ */
[data-theme="dark"] .video-section {
    /* Keep original background - don't make it dark */
    background: inherit !important;
}

/* ============================================
   ALL VIDEO SECTION BUTTONS - KEEP ORIGINAL
   ============================================ */

/* Override any dark mode button styling for video section */
[data-theme="dark"] .video-section button {
    /* Let each button keep its specific styling */
}

/* White buttons should stay white */
[data-theme="dark"] .video-section button[style*="background: white"],
[data-theme="dark"] .video-section button[style*="background:white"],
[data-theme="dark"] .video-section .btn-light {
    background: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

/* ============================================
   IMPORTANT OVERRIDES
   ============================================ */

/* Make sure status overlay is always on top and visible */
[data-theme="dark"] .status-overlay,
[data-theme="dark"] #status-overlay {
    z-index: 9999 !important;
    opacity: 1 !important;
}

/* Language selector should not inherit dark styles */
[data-theme="dark"] .video-section select,
[data-theme="dark"] .video-section .language-selector * {
    background: inherit !important;
    color: inherit !important;
}

/* ============================================
   SUMMARY OF PRESERVED COLORS
   ============================================ */

/*
Video Section Elements (LEFT SIDE) - Keep Original:
✓ Language selector: WHITE background
✓ "Kuba myśli" (thinking): RED background
✓ "Active" (listening): GREEN background  
✓ "Pokaż" button: BLUE background
✓ Settings icon: WHITE
✓ Desktop icon: WHITE
✓ End button: GRAY
✓ Mute button: GREEN/RED
✓ All overlay buttons: Original colors
*/
/* ============================================
   COMPREHENSIVE DARK MODE CSS
   Add this AFTER your main styles.css
   Version: 2.0 - Complete Dark Mode Support
   ============================================ */

/* ============================================
   TAB BUTTONS (Chat, Koszyk, Paragon)
   ============================================ */
[data-theme="dark"] .chat-tabs .tab-btn {
    background: #374151;
    border-color: #4B5563;
    color: #D1D5DB;
}

[data-theme="dark"] .chat-tabs .tab-btn:hover {
    background: #4B5563;
    border-color: #6B7280;
}

/* Active/Checked tab stays green (no change needed) */
[data-theme="dark"] .chat-tabs .btn-check:checked + .tab-btn {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    border-color: #10B981 !important;
    color: white !important;
}

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

/* Kuba's messages - darker gray in dark mode */
[data-theme="dark"] .chat-content .message-bubble.kuba-message {
    background: #374151 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .chat-content .message-bubble.kuba-message .message-header {
    color: #9CA3AF !important;
}

/* User messages - keep blue but slightly adjusted */
[data-theme="dark"] .chat-content .message-bubble.user-message {
    background: #4F5BD5 !important;
    color: white !important;
}

[data-theme="dark"] .chat-content .message-bubble.user-message .message-header {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   MESSAGE INPUT AREA
   ============================================ */
[data-theme="dark"] .message-input-area {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .message-input-area .message-input {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .message-input-area .message-input::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .message-input-area .message-input:focus {
    background: #374151;
    border-color: #6B7280;
    color: #F9FAFB;
}

/* ============================================
   KEYBOARD ICON BUTTON (next to input)
   ============================================ */
[data-theme="dark"] .keyboard-icon-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .keyboard-icon-btn:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .keyboard-icon-btn svg {
    stroke: #D1D5DB !important;
}

/* ============================================
   SEND BUTTON
   ============================================ */
[data-theme="dark"] .send-btn {
    background: #7289DA !important;
    border-color: #7289DA !important;
    color: white !important;
}

[data-theme="dark"] .send-btn:hover {
    background: #5B6FC7 !important;
    border-color: #5B6FC7 !important;
}

[data-theme="dark"] .send-btn:disabled {
    background: #4B5563 !important;
    border-color: #4B5563 !important;
    color: #6B7280 !important;
}

/* ============================================
   CART/BASKET ITEMS
   ============================================ */
[data-theme="dark"] .cart-content,
[data-theme="dark"] .basket-content {
    background: #1F2937;
}

[data-theme="dark"] .cart-item,
[data-theme="dark"] .basket-item {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-item:hover,
[data-theme="dark"] .basket-item:hover {
    background: #4B5563;
}

[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .product-name {
    color: #F9FAFB;
}

[data-theme="dark"] .cart-item-price,
[data-theme="dark"] .product-price {
    color: #10B981;
}

/* ============================================
   QUANTITY BUTTONS (-, +)
   ============================================ */
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .btn-decrease,
[data-theme="dark"] .btn-increase {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .quantity-btn:hover,
[data-theme="dark"] .btn-decrease:hover,
[data-theme="dark"] .btn-increase:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .quantity-input,
[data-theme="dark"] .quantity-display {
    background: #1F2937 !important;
    border-color: #4B5563 !important;
    color: #F9FAFB !important;
}

/* ============================================
   ORDER/CHECKOUT BUTTONS
   ============================================ */
[data-theme="dark"] .order-button,
[data-theme="dark"] .checkout-btn,
[data-theme="dark"] .place-order-btn {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: white !important;
}

[data-theme="dark"] .order-button:hover,
[data-theme="dark"] .checkout-btn:hover,
[data-theme="dark"] .place-order-btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   INFO NOTIFICATION (above cart)
   ============================================ */
[data-theme="dark"] .info-notification,
[data-theme="dark"] .cart-info {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .info-notification i {
    color: #60A5FA;
}

/* ============================================
   EMPTY STATE MESSAGES
   ============================================ */
[data-theme="dark"] .empty-chat-message,
[data-theme="dark"] .empty-cart-message,
[data-theme="dark"] .empty-receipt-message {
    color: #9CA3AF;
}

[data-theme="dark"] .empty-chat-message i,
[data-theme="dark"] .empty-cart-message i,
[data-theme="dark"] .empty-receipt-message i {
    color: #6B7280;
}

[data-theme="dark"] .empty-chat-message h5,
[data-theme="dark"] .empty-cart-message h5,
[data-theme="dark"] .empty-receipt-message h5 {
    color: #D1D5DB;
}

/* ============================================
   CART SUMMARY / TOTALS
   ============================================ */
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .order-summary {
    background: #374151;
    border-color: #4B5563;
}

[data-theme="dark"] .cart-summary-row,
[data-theme="dark"] .summary-row {
    color: #D1D5DB;
    border-bottom-color: #4B5563;
}

[data-theme="dark"] .cart-total,
[data-theme="dark"] .order-total {
    color: #F9FAFB;
    font-weight: 700;
}

[data-theme="dark"] .cart-total-amount,
[data-theme="dark"] .total-amount {
    color: #10B981;
}

/* ============================================
   BADGE / COUNTER (number on tab)
   ============================================ */
[data-theme="dark"] .tab-badge {
    background: #EF4444;
    color: white;
}

/* Active tab badge (white background with green text) */
[data-theme="dark"] .btn-check:checked + .tab-btn .tab-badge {
    background: white !important;
    color: #10B981 !important;
}

/* ============================================
   SCROLLBAR (for dark mode)
   ============================================ */
[data-theme="dark"] .chat-content::-webkit-scrollbar,
[data-theme="dark"] .cart-content::-webkit-scrollbar,
[data-theme="dark"] .desk-content::-webkit-scrollbar {
    width: 8px;
    background: #1F2937;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

[data-theme="dark"] .chat-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .cart-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .desk-content::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   THINKING INDICATOR
   ============================================ */
[data-theme="dark"] .thinking-indicator {
    background: #374151;
    color: #D1D5DB;
}

[data-theme="dark"] .thinking-indicator i {
    color: #9CA3AF;
}

/* ============================================
   RIGHT COLUMN CONTAINER
   ============================================ */
[data-theme="dark"] .right-column,
[data-theme="dark"] .chat-container {
    background: #1F2937;
    border-left-color: #374151;
}

[data-theme="dark"] .right-column-header,
[data-theme="dark"] .chat-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

/* ============================================
   BUTTONS - GENERAL
   ============================================ */
[data-theme="dark"] .btn-light {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-light:hover {
    background: #4B5563 !important;
    border-color: #6B7280 !important;
}

[data-theme="dark"] .btn-outline-secondary {
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: #374151 !important;
    border-color: #6B7280 !important;
    color: #F9FAFB !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: #374151;
    border-color: #7289DA;
    color: #F9FAFB;
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
[data-theme="dark"] .modal-content {
    background: #1F2937;
    border-color: #374151;
}

[data-theme="dark"] .modal-header {
    background: #1F2937;
    border-bottom-color: #374151;
    color: #F9FAFB;
}

[data-theme="dark"] .modal-body {
    background: #1F2937;
    color: #D1D5DB;
}

[data-theme="dark"] .modal-footer {
    background: #1F2937;
    border-top-color: #374151;
}

[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ============================================
   DESK TAB
   ============================================ */
[data-theme="dark"] .desk-content {
    background: #1F2937;
}

[data-theme="dark"] .desk-item {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

[data-theme="dark"] .desk-item:hover {
    background: #4B5563;
}

/* ============================================
   RECEIPT / PARAGON
   ============================================ */
[data-theme="dark"] .receipt-content {
    background: #1F2937;
    color: #F9FAFB;
}

[data-theme="dark"] .receipt-item {
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-header {
    color: #F9FAFB;
    border-bottom-color: #374151;
}

[data-theme="dark"] .receipt-total {
    color: #10B981;
    border-top-color: #374151;
}

/* ============================================
   TEXT COLORS
   ============================================ */
[data-theme="dark"] .text-muted {
    color: #9CA3AF !important;
}

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

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

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */
[data-theme="dark"] hr {
    border-color: #374151;
    opacity: 1;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left,
[data-theme="dark"] .border-right {
    border-color: #4B5563 !important;
}

/* ============================================
   ICONS
   ============================================ */
[data-theme="dark"] i.bi {
    color: inherit;
}

[data-theme="dark"] svg {
    stroke: currentColor;
}

/* ============================================
   TRANSITIONS
   ============================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Don't transition on page load */
.preload [data-theme="dark"] * {
    transition: none !important;
}

/* ============================================
   CRITICAL FIX: LANGUAGE SELECTOR MUST STAY WHITE
   Force white background even if it has dark class
   ============================================ */

/* Language selector - FORCE WHITE */
[data-theme="dark"] .video-section .language-selector,
[data-theme="dark"] .video-section .language-dropdown-button,
[data-theme="dark"] .video-section .lang-selector,
[data-theme="dark"] .video-section select[name*="lang"],
[data-theme="dark"] .video-section select[id*="lang"],
[data-theme="dark"] .video-section button[onclick*="language"],
[data-theme="dark"] .video-section .language-btn,
[data-theme="dark"] .video-section button.btn-dark,
[data-theme="dark"] .video-section .dropdown-toggle {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

/* Override any dark button styling */
[data-theme="dark"] .video-section button[style*="background: #2C3E50"],
[data-theme="dark"] .video-section button[style*="background:#2C3E50"],
[data-theme="dark"] .video-section button[style*="background-color: #2C3E50"],
[data-theme="dark"] .video-section button[class*="dark"] {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
}

/* Hover */
[data-theme="dark"] .video-section .language-selector:hover,
[data-theme="dark"] .video-section .language-dropdown-button:hover,
[data-theme="dark"] .video-section button[onclick*="language"]:hover {
    background: #f8f9fa !important;
}

/* Icon/arrow */
[data-theme="dark"] .video-section .language-selector svg,
[data-theme="dark"] .video-section .language-dropdown-button svg {
    stroke: #495057 !important;
}

/* Text */
[data-theme="dark"] .video-section .language-selector span,
[data-theme="dark"] .video-section .language-dropdown-button span {
    color: #495057 !important;
}

/* Select dropdown */
[data-theme="dark"] .video-section select,
[data-theme="dark"] .video-section select option {
    background: white !important;
    color: #495057 !important;
}
/* ============================================
   FORCE LANGUAGE SELECTOR TO STAY WHITE
   Even more specific rules with !important
   ============================================ */

/* Language selector - FORCE WHITE in dark mode */
[data-theme="dark"] .video-section .language-selector,
[data-theme="dark"] .video-section .language-dropdown-button,
[data-theme="dark"] .video-section .lang-selector,
[data-theme="dark"] .video-section select[name*="lang"],
[data-theme="dark"] .video-section select[id*="lang"],
[data-theme="dark"] .video-section button[onclick*="language"],
[data-theme="dark"] .video-section .language-btn {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

/* Any button or select in video section with "PL" text */
[data-theme="dark"] .video-section button:has(span:contains("PL")),
[data-theme="dark"] .video-section select option,
[data-theme="dark"] .video-section .dropdown-toggle {
    background: white !important;
    color: #495057 !important;
}

/* Override all dark button styles for language selector */
[data-theme="dark"] .video-section button.btn-dark,
[data-theme="dark"] .video-section button[style*="background: #2C3E50"],
[data-theme="dark"] .video-section button[style*="background:#2C3E50"] {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
}

/* Hover state */
[data-theme="dark"] .video-section .language-selector:hover,
[data-theme="dark"] .video-section .language-dropdown-button:hover,
[data-theme="dark"] .video-section button[onclick*="language"]:hover {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    color: #495057 !important;
}

/* Dropdown icon/arrow */
[data-theme="dark"] .video-section .language-selector svg,
[data-theme="dark"] .video-section .language-dropdown-button svg,
[data-theme="dark"] .video-section button[onclick*="language"] svg {
    stroke: #495057 !important;
    fill: none !important;
}

/* Dropdown text */
[data-theme="dark"] .video-section .language-selector span,
[data-theme="dark"] .video-section .language-dropdown-button span {
    color: #495057 !important;
}

/* Select element specific */
[data-theme="dark"] .video-section select {
    background: white !important;
    background-color: white !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="dark"] .video-section select option {
    background: white !important;
    color: #495057 !important;
}

/* Any dark styled button in video section that shows language */
[data-theme="dark"] .video-section button[class*="dark"],
[data-theme="dark"] .video-section .btn-dark {
    background: white !important;
    color: #495057 !important;
}
/* ============================================
   DARK MODE DROPDOWN FIX - COMPLETE VERSION
   Makes settings dropdown adapt to dark mode
   ============================================ */

/* Settings dropdown container - dark mode */
body.dark-mode #settings-dropdown,
body.dark-mode .settings-dropdown {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

/* ALL content inside dropdown - dark background */
body.dark-mode #settings-dropdown *,
body.dark-mode .settings-dropdown * {
    background-color: transparent !important;
}

/* Accordion content areas - dark background */
body.dark-mode #tools-content,
body.dark-mode #media-content,
body.dark-mode #legal-content {
    background: #1F2937 !important;
    border: none !important;
}

/* Accordion header buttons - dark mode */
body.dark-mode #settings-dropdown button,
body.dark-mode .settings-dropdown button {
    background: #374151 !important;
    color: #E5E7EB !important;
    border-color: #4B5563 !important;
}

body.dark-mode #settings-dropdown button:hover,
body.dark-mode .settings-dropdown button:hover {
    background: #4B5563 !important;
}

/* ALL buttons inside tools/media content - dark mode */
body.dark-mode #tools-content button,
body.dark-mode #media-content button,
body.dark-mode #legal-content button {
    background: #374151 !important;
    color: #E5E7EB !important;
}

body.dark-mode #tools-content button:hover,
body.dark-mode #media-content button:hover,
body.dark-mode #legal-content button:hover {
    background: #4B5563 !important;
}

/* Dark mode text colors for ALL elements */
body.dark-mode #settings-dropdown,
body.dark-mode #settings-dropdown *,
body.dark-mode .settings-dropdown,
body.dark-mode .settings-dropdown * {
    color: #E5E7EB !important;
}

/* Dark mode icons */
body.dark-mode #settings-dropdown svg,
body.dark-mode .settings-dropdown svg,
body.dark-mode #settings-dropdown i,
body.dark-mode .settings-dropdown i {
    color: #E5E7EB !important;
    fill: #E5E7EB !important;
}

/* ============================================
   REMOVE GAPS BETWEEN ACCORDIONS
   ============================================ */

/* Remove margins/padding from accordion sections */
#settings-dropdown .accordion-section,
.settings-dropdown .accordion-section {
    margin: 0 !important;
    padding: 0 !important;
}

/* Accordion buttons - no gaps */
#settings-dropdown button[onclick*="toggleAccordion"],
.settings-dropdown button[onclick*="toggleAccordion"] {
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #E5E7EB;
}

/* Dark mode accordion button borders */
body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"],
body.dark-mode .settings-dropdown button[onclick*="toggleAccordion"] {
    border-bottom: 1px solid #4B5563 !important;
}

/* First accordion button - top border radius */
#settings-dropdown button[onclick*="toggleAccordion"]:first-of-type,
.settings-dropdown button[onclick*="toggleAccordion"]:first-of-type {
    border-radius: 4px 4px 0 0 !important;
}

/* Last visible element - bottom border radius */
#settings-dropdown > div:last-child,
.settings-dropdown > div:last-child {
    border-radius: 0 0 4px 4px !important;
}

/* Accordion content - no gaps */
#tools-content,
#media-content,
#legal-content {
    margin: 0 !important;
    padding: 10px !important;
    border: none !important;
}

/* Remove any default margins from container */
#settings-dropdown > div,
.settings-dropdown > div {
    margin: 0 !important;
}

/* ============================================
   FORCE DARK BACKGROUNDS IN ALL DROPDOWNS
   ============================================ */

/* Force dark background on dropdown wrapper */
body.dark-mode #settings-dropdown {
    background: #1F2937 !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Force dark background on all divs inside dropdown */
body.dark-mode #settings-dropdown div,
body.dark-mode .settings-dropdown div {
    background-color: #1F2937 !important;
}

/* Force transparent background on buttons to show parent dark bg */
body.dark-mode #settings-dropdown button {
    background: #374151 !important;
}

/* Override any white backgrounds in tools/media sections */
body.dark-mode #tools-content > *,
body.dark-mode #media-content > *,
body.dark-mode #legal-content > * {
    background: transparent !important;
}

/* ============================================
   DARK MODE TOGGLE SWITCHES & INPUTS
   ============================================ */

body.dark-mode .toggle-switch {
    background: #374151 !important;
}

body.dark-mode .toggle-switch.active {
    background: #10B981 !important;
}

body.dark-mode #settings-dropdown input,
body.dark-mode .settings-dropdown input {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #E5E7EB !important;
}

/* ============================================
   SCROLLBAR IN DARK MODE
   ============================================ */

body.dark-mode #tools-content::-webkit-scrollbar-track,
body.dark-mode #media-content::-webkit-scrollbar-track {
    background: #1F2937 !important;
}

body.dark-mode #tools-content::-webkit-scrollbar-thumb,
body.dark-mode #media-content::-webkit-scrollbar-thumb {
    background: #4B5563 !important;
}
/* ============================================
   SETTINGS DROPDOWN - COMPLETE STYLING
   All styling extracted from inline HTML
   Includes both light and dark mode
   ============================================ */

/* ============================================
   DROPDOWN CONTAINER
   ============================================ */

#settings-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    max-width: 220px;
    display: none;
    z-index: 1000;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dark mode dropdown */
body.dark-mode #settings-dropdown {
    background: #1F2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ============================================
   ACCORDION SECTIONS
   ============================================ */

.accordion-section {
    margin: 0;
    padding: 0;
}

/* ============================================
   ACCORDION HEADER BUTTONS
   ============================================ */

#settings-dropdown button[onclick*="toggleAccordion"] {
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid #E5E7EB;
}

#settings-dropdown button[onclick*="toggleAccordion"]:hover {
    background: #f8f9fa;
}

/* Dark mode accordion headers */
body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"] {
    background: #374151;
    color: #E5E7EB;
    border-bottom-color: #4B5563;
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"]:hover {
    background: #4B5563;
}

/* First accordion header - rounded top */
#settings-dropdown .accordion-section:first-child button {
    border-radius: 8px 8px 0 0;
}

/* Last accordion header - no bottom border */
#settings-dropdown .accordion-section:last-child button {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

/* Chevron icons */
#settings-dropdown button[onclick*="toggleAccordion"] svg {
    transition: transform 0.3s;
    transform: rotate(-90deg);
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"] svg {
    stroke: #E5E7EB;
}

/* ============================================
   ACCORDION CONTENT AREAS
   ============================================ */

#tools-content,
#media-content,
#legal-content {
    display: none;
    margin: 0;
    padding: 10px;
    background: white;
    border: none;
}

/* Dark mode content areas */
body.dark-mode #tools-content,
body.dark-mode #media-content,
body.dark-mode #legal-content {
    background: #1F2937;
}

/* ============================================
   BUTTONS INSIDE CONTENT (Tool buttons, etc.)
   ============================================ */

#tools-content button,
#media-content button,
#legal-content button {
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-align: left;
    border-radius: 4px;
    color: #495057;
}

#tools-content button:hover,
#media-content button:hover,
#legal-content button:hover {
    background: #f8f9fa;
}

/* Dark mode tool buttons */
body.dark-mode #tools-content button,
body.dark-mode #media-content button,
body.dark-mode #legal-content button {
    background: #374151;
    color: #E5E7EB;
}

body.dark-mode #tools-content button:hover,
body.dark-mode #media-content button:hover,
body.dark-mode #legal-content button:hover {
    background: #4B5563;
}

/* Icons in buttons */
#tools-content button svg,
#media-content button svg,
#legal-content button svg,
#tools-content button i,
#media-content button i,
#legal-content button i {
    color: #6c757d;
}

body.dark-mode #tools-content button svg,
body.dark-mode #media-content button svg,
body.dark-mode #legal-content button svg,
body.dark-mode #tools-content button i,
body.dark-mode #media-content button i,
body.dark-mode #legal-content button i {
    color: #E5E7EB;
}

/* ============================================
   MODE TOGGLE BUTTONS (Voice Only, Dark Mode)
   ============================================ */

.mode-toggle-btn {
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    border-radius: 4px;
    color: #495057;
    margin-bottom: 4px;
}

.mode-toggle-btn:hover {
    background: #f8f9fa;
}

body.dark-mode .mode-toggle-btn {
    background: #374151;
    color: #E5E7EB;
}

body.dark-mode .mode-toggle-btn:hover {
    background: #4B5563;
}

/* Toggle switches */
.toggle-switch {
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
}

.toggle-switch.active {
    background: #10B981;
}

.toggle-switch-slider {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.toggle-switch.active .toggle-switch-slider {
    transform: translateX(20px);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

#settings-dropdown::-webkit-scrollbar {
    width: 6px;
}

#settings-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#settings-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#settings-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Dark mode scrollbar */
body.dark-mode #settings-dropdown::-webkit-scrollbar-track {
    background: #1F2937;
}

body.dark-mode #settings-dropdown::-webkit-scrollbar-thumb {
    background: #4B5563;
}

body.dark-mode #settings-dropdown::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   REMOVE ALL INLINE STYLES (Override)
   ============================================ */

/* Force remove inline background colors */
#settings-dropdown[style*="background"],
#settings-dropdown button[style*="background"],
#tools-content[style*="background"],
#media-content[style*="background"],
#legal-content[style*="background"] {
    background: white !important;
}

body.dark-mode #settings-dropdown[style*="background"],
body.dark-mode #settings-dropdown button[style*="background"],
body.dark-mode #tools-content[style*="background"],
body.dark-mode #media-content[style*="background"],
body.dark-mode #legal-content[style*="background"] {
    background: #1F2937 !important;
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"][style*="background"] {
    background: #374151 !important;
}

body.dark-mode #tools-content button[style*="background"],
body.dark-mode #media-content button[style*="background"] {
    background: #374151 !important;
}
/* ============================================
   HEADER ICONS - DARK MODE FIX
   Makes icons white/visible in dark mode
   ============================================ */

/* Language dropdown button in dark mode */
body.dark-mode .language-dropdown-button,
body.dark-mode #language-button {
    background: #374151 !important;
    color: #FFFFFF !important;
    border-color: #4B5563 !important;
}

body.dark-mode .language-dropdown-button:hover,
body.dark-mode #language-button:hover {
    background: #4B5563 !important;
}

/* Settings button in dark mode */
body.dark-mode #settings-button {
    background: #374151 !important;
    border-color: #4B5563 !important;
}

body.dark-mode #settings-button:hover {
    background: #4B5563 !important;
}

/* All SVG icons in header buttons - make white */
body.dark-mode .language-dropdown-button svg,
body.dark-mode #language-button svg,
body.dark-mode #settings-button svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Text in language button */
body.dark-mode #current-language {
    color: #FFFFFF !important;
}

/* Toggle button (Pokaz/Show) in dark mode */
body.dark-mode #toggle-button {
    background: #374151 !important;
    color: #FFFFFF !important;
    border-color: #4B5563 !important;
}

body.dark-mode #toggle-button:hover {
    background: #4B5563 !important;
}

/* Toggle button SVG icon */
body.dark-mode #toggle-button svg {
    stroke: #FFFFFF !important;
}

/* All header buttons in dark mode */
body.dark-mode .chat-header button {
    background: #374151 !important;
    color: #FFFFFF !important;
    border-color: #4B5563 !important;
}

body.dark-mode .chat-header button:hover {
    background: #4B5563 !important;
}

/* Header text and icons */
body.dark-mode .chat-header {
    background: #1F2937 !important;
    color: #E5E7EB !important;
    border-bottom-color: #374151 !important;
}

/* Phone icon in header */
body.dark-mode .header-info i,
body.dark-mode .header-info svg {
    color: #60A5FA !important; /* Light blue for visibility */
}

/* Phone number text */
body.dark-mode .header-info .phone-number {
    color: #E5E7EB !important;
}

/* Cart total in header */
body.dark-mode #headerCartTotal {
    color: #10B981 !important; /* Green for price */
}

/* Language dropdown menu in dark mode */
body.dark-mode .language-dropdown-menu {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

body.dark-mode .language-option {
    color: #E5E7EB !important;
}

body.dark-mode .language-option:hover {
    background: #374151 !important;
}

body.dark-mode .language-option.selected {
    background: #374151 !important;
}

/* Check icons in language dropdown */
body.dark-mode .language-option i,
body.dark-mode .language-option .check-icon {
    color: #10B981 !important;
}

/* ============================================
   ADDITIONAL HEADER ELEMENTS
   ============================================ */

/* Header top section */
body.dark-mode .header-top {
    background: #1F2937 !important;
}

/* All icons and text in header */
body.dark-mode .chat-header * {
    color: #E5E7EB !important;
}

/* Override any specific icon colors */
body.dark-mode .bi,
body.dark-mode [class*="bi-"] {
    color: #E5E7EB !important;
}

/* Gear/settings icon specifically */
body.dark-mode #settings-button path,
body.dark-mode #settings-button circle {
    stroke: #FFFFFF !important;
}

/* Chevron/arrow icons */
body.dark-mode polyline {
    stroke: #FFFFFF !important;
}
/* ============================================
   SETTINGS DROPDOWN - COMPLETE STYLING
   All styling extracted from inline HTML
   Includes both light and dark mode
   ============================================ */

/* ============================================
   DROPDOWN CONTAINER
   ============================================ */

#settings-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    max-width: 220px;
    display: none;
    z-index: 1000;
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dark mode dropdown */
body.dark-mode #settings-dropdown {
    background: #1F2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ============================================
   ACCORDION SECTIONS
   ============================================ */

.accordion-section {
    margin: 0;
    padding: 0;
}

/* ============================================
   ACCORDION HEADER BUTTONS
   ============================================ */

#settings-dropdown button[onclick*="toggleAccordion"] {
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    margin: 0;
    border-bottom: 1px solid #E5E7EB;
}

#settings-dropdown button[onclick*="toggleAccordion"]:hover {
    background: #f8f9fa;
}

/* Dark mode accordion headers */
body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"] {
    background: #374151;
    color: #E5E7EB;
    border-bottom-color: #4B5563;
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"]:hover {
    background: #4B5563;
}

/* First accordion header - rounded top */
#settings-dropdown .accordion-section:first-child button {
    border-radius: 8px 8px 0 0;
}

/* Last accordion header - no bottom border */
#settings-dropdown .accordion-section:last-child button {
    border-bottom: none;
    border-radius: 0 0 8px 8px;
}

/* Chevron icons */
#settings-dropdown button[onclick*="toggleAccordion"] svg {
    transition: transform 0.3s;
    transform: rotate(-90deg);
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"] svg {
    stroke: #E5E7EB;
}

/* ============================================
   ACCORDION CONTENT AREAS
   ============================================ */

#tools-content,
#media-content,
#legal-content {
    display: none;
    margin: 0;
    padding: 10px;
    background: white;
    border: none;
}

/* Dark mode content areas */
body.dark-mode #tools-content,
body.dark-mode #media-content,
body.dark-mode #legal-content {
    background: #1F2937;
}

/* ============================================
   BUTTONS INSIDE CONTENT (Tool buttons, etc.)
   ============================================ */

#tools-content button,
#media-content button,
#legal-content button {
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-align: left;
    border-radius: 4px;
    color: #495057;
}

#tools-content button:hover,
#media-content button:hover,
#legal-content button:hover {
    background: #f8f9fa;
}

/* Dark mode tool buttons */
body.dark-mode #tools-content button,
body.dark-mode #media-content button,
body.dark-mode #legal-content button {
    background: #374151;
    color: #E5E7EB;
}

body.dark-mode #tools-content button:hover,
body.dark-mode #media-content button:hover,
body.dark-mode #legal-content button:hover {
    background: #4B5563;
}

/* Icons in buttons */
#tools-content button svg,
#media-content button svg,
#legal-content button svg,
#tools-content button i,
#media-content button i,
#legal-content button i {
    color: #6c757d;
}

body.dark-mode #tools-content button svg,
body.dark-mode #media-content button svg,
body.dark-mode #legal-content button svg,
body.dark-mode #tools-content button i,
body.dark-mode #media-content button i,
body.dark-mode #legal-content button i {
    color: #E5E7EB;
}

/* ============================================
   MODE TOGGLE BUTTONS (Voice Only, Dark Mode)
   ============================================ */

.mode-toggle-btn {
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    border-radius: 4px;
    color: #495057;
    margin-bottom: 4px;
}

.mode-toggle-btn:hover {
    background: #f8f9fa;
}

body.dark-mode .mode-toggle-btn {
    background: #374151;
    color: #E5E7EB;
}

body.dark-mode .mode-toggle-btn:hover {
    background: #4B5563;
}

/* Toggle switches */
.toggle-switch {
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
}

.toggle-switch.active {
    background: #10B981;
}

.toggle-switch-slider {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.toggle-switch.active .toggle-switch-slider {
    transform: translateX(20px);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

#settings-dropdown::-webkit-scrollbar {
    width: 6px;
}

#settings-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#settings-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#settings-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Dark mode scrollbar */
body.dark-mode #settings-dropdown::-webkit-scrollbar-track {
    background: #1F2937;
}

body.dark-mode #settings-dropdown::-webkit-scrollbar-thumb {
    background: #4B5563;
}

body.dark-mode #settings-dropdown::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* ============================================
   REMOVE ALL INLINE STYLES (Override)
   ============================================ */

/* Force remove inline background colors */
#settings-dropdown[style*="background"],
#settings-dropdown button[style*="background"],
#tools-content[style*="background"],
#media-content[style*="background"],
#legal-content[style*="background"] {
    background: white !important;
}

body.dark-mode #settings-dropdown[style*="background"],
body.dark-mode #settings-dropdown button[style*="background"],
body.dark-mode #tools-content[style*="background"],
body.dark-mode #media-content[style*="background"],
body.dark-mode #legal-content[style*="background"] {
    background: #1F2937 !important;
}

body.dark-mode #settings-dropdown button[onclick*="toggleAccordion"][style*="background"] {
    background: #374151 !important;
}

body.dark-mode #tools-content button[style*="background"],
body.dark-mode #media-content button[style*="background"] {
    background: #374151 !important;
}
/* ============================================
   FLOATING BUTTONS FIX - CORRECT LOGIC
   Light mode = light buttons with dark icons/text
   Dark mode = dark buttons with white icons/text
   ============================================ */

/* ============================================
   1. FLOATING KEYBOARD BUTTON
   ============================================ */

/* Light mode - light gray background with dark icon */
#floating-keyboard-btn {
    background: #F3F4F6 !important;
    border: 1px solid #D1D5DB !important;
    color: #1F2937 !important;
}

#floating-keyboard-btn:hover {
    background: #E5E7EB !important;
}

#floating-keyboard-btn svg {
    stroke: #1F2937 !important;
    color: #1F2937 !important;
}

/* Dark mode - dark gray background with WHITE icon */
body.dark-mode #floating-keyboard-btn {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #FFFFFF !important;
}

body.dark-mode #floating-keyboard-btn:hover {
    background: #4B5563 !important;
}

body.dark-mode #floating-keyboard-btn svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* ============================================
   2. FLOATING LANGUAGE BUTTON (PL/EN/ES)
   ============================================ */

/* Light mode - light gray background with DARK text */
#floating-language-button,
#floating-language-container .language-dropdown-button {
    background: #F3F4F6 !important;
    color: #1F2937 !important;
    border: 1px solid #D1D5DB !important;
}

#floating-language-button:hover,
#floating-language-container .language-dropdown-button:hover {
    background: #E5E7EB !important;
}

/* Language text - DARK in light mode */
#floating-current-language {
    color: #1F2937 !important;
}

/* Chevron - DARK in light mode */
#floating-language-button svg,
#floating-language-container .language-dropdown-button svg {
    stroke: #1F2937 !important;
}

/* Dark mode - dark gray background with WHITE text */
body.dark-mode #floating-language-button,
body.dark-mode #floating-language-container .language-dropdown-button {
    background: #374151 !important;
    color: #FFFFFF !important;
    border-color: #4B5563 !important;
}

body.dark-mode #floating-language-button:hover,
body.dark-mode #floating-language-container .language-dropdown-button:hover {
    background: #4B5563 !important;
}

body.dark-mode #floating-current-language {
    color: #FFFFFF !important;
}

body.dark-mode #floating-language-button svg,
body.dark-mode #floating-language-container .language-dropdown-button svg {
    stroke: #FFFFFF !important;
}

/* Language dropdown menu - light mode */
#floating-language-dropdown {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
}

#floating-language-dropdown .language-option {
    color: #1F2937 !important;
    background: transparent !important;
}

#floating-language-dropdown .language-option:hover {
    background: #F3F4F6 !important;
}

#floating-language-dropdown .language-option.selected {
    background: #E5E7EB !important;
}

#floating-language-dropdown .check-icon {
    color: #10B981 !important;
}

/* Language dropdown - dark mode */
body.dark-mode #floating-language-dropdown {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

body.dark-mode #floating-language-dropdown .language-option {
    color: #FFFFFF !important;
}

body.dark-mode #floating-language-dropdown .language-option:hover {
    background: #374151 !important;
}

body.dark-mode #floating-language-dropdown .language-option.selected {
    background: #4B5563 !important;
}

/* ============================================
   3. FLOATING CART/BASKET BUTTON (Pokaż)
   ============================================ */

/* Both modes - always blue with white text */
.floating-toggle,
#floating-toggle {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
    border: none !important;
}

.floating-toggle:hover,
#floating-toggle:hover {
    background: #2563EB !important;
}

.floating-toggle i,
#floating-toggle i {
    color: #FFFFFF !important;
}

.floating-toggle span,
#floating-toggle span {
    color: #FFFFFF !important;
}

/* Dark mode - blue with glow */
body.dark-mode .floating-toggle,
body.dark-mode #floating-toggle {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .floating-toggle:hover,
body.dark-mode #floating-toggle:hover {
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4) !important;
}

/* ============================================
   SUMMARY - CORRECT LOGIC
   ============================================ */

/*
LIGHT MODE (default):
- Keyboard: Light gray (#F3F4F6) with DARK icon (#1F2937)
- Language: Light gray (#F3F4F6) with DARK text "PL" (#1F2937)
- Cart: Blue (#3B82F6) with white text

DARK MODE:
- Keyboard: Dark gray (#374151) with WHITE icon (#FFFFFF)
- Language: Dark gray (#374151) with WHITE text "PL" (#FFFFFF)
- Cart: Blue (#3B82F6) with white text + glow
*/
/* ============================================
   TEXT ONLY MODE
   Expands right column to full width, hides left video
   ============================================ */

/* Hide left video section in text-only mode */
body.text-only-mode .video-section,
body.text-only-mode #left-column {
    display: none !important;
}

/* Expand right column to full width */
body.text-only-mode .chat-section,
body.text-only-mode #right-column {
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
}

/* Center chat content and limit max width for readability */
body.text-only-mode .chat-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Center cart content */
body.text-only-mode .cart-content,
body.text-only-mode .receipt-content,
body.text-only-mode .desk-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Hide floating buttons in text-only mode */
body.text-only-mode .floating-toggle,
body.text-only-mode #floating-toggle,
body.text-only-mode .klono-logo,
body.text-only-mode #floating-keyboard-btn,
body.text-only-mode #floating-language-container {
    display: none !important;
}

/* Make sure right column is always visible in text-only mode */
body.text-only-mode .chat-section {
    display: flex !important;
}

/* Adjust main wrapper for full width */
body.text-only-mode .main-wrapper {
    display: block;
}

/* Dark mode compatibility */
body.dark-mode.text-only-mode .chat-section {
    background: #1F2937;
}

body.dark-mode.text-only-mode .chat-content,
body.dark-mode.text-only-mode .cart-content,
body.dark-mode.text-only-mode .receipt-content,
body.dark-mode.text-only-mode .desk-content {
    background: #1F2937;
}

/* Text Only Mode Button - Dark Mode */
body.dark-mode #text-only-toggle-btn {
    background: #374151 !important;
    color: #E5E7EB !important;
}

body.dark-mode #text-only-toggle-btn:hover {
    background: #4B5563 !important;
}

body.dark-mode #text-only-toggle-btn svg {
    stroke: #E5E7EB !important;
}

body.dark-mode #text-only-status {
    background: #4B5563 !important;
    color: #9CA3AF !important;
}

/* When active in dark mode */
body.dark-mode #text-only-toggle-btn.active #text-only-status {
    background: #667eea !important;
    color: white !important;
}
/* Hide floating buttons on mobile phones */
@media (max-width: 768px) {
    /* Hide desktop/computer icon button */
    
    /* Hide language selector button on mobile */
    #floating-language-container,
    .floating-language,
    #floating-language-button {
        display: none !important;
    }
    
    /* Hide keyboard button if present */
    #floating-keyboard-btn {
        display: none !important;
    }
}

/* Extra small phones - be extra sure */
@media (max-width: 480px) {
    /* Hide ALL floating buttons */
    #floating-language-container,
    #floating-language-button,
    #floating-keyboard-btn,
    button[style*="position: fixed"][style*="bottom"] {
        display: none !important;
    }
}
/* Status overlay - reference size */
.status-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 12px 20px; /* Increased padding */
    border-radius: 30px; /* Larger border radius */
    font-size: 14px; /* Slightly larger font */
    font-weight: 600;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    min-height: 44px; /* Ensure consistent height */
}

/* Active (listening) state */
.status-overlay.active {
    background: rgba(76, 175, 80, 0.95);
    animation: pulse 2s ease-in-out infinite;
}

/* Thinking state */
.status-overlay.thinking {
    background: rgba(244, 67, 54, 0.95);
    animation: none;
}

/* Mute button - MATCH status overlay size */
.mute-button {
    position: absolute;
    top: 20px;
    right: 110px; /* Adjusted spacing */
    background: rgba(76, 175, 80, 0.95);
    color: white;
    padding: 12px 20px; /* Match status overlay padding */
    border-radius: 30px; /* Match status overlay border-radius */
    font-size: 14px; /* Match status overlay font-size */
    font-weight: 600;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.3s;
    border: none;
    gap: 8px;
    pointer-events: auto;
    min-height: 44px; /* Match status overlay height */
    min-width: 44px; /* Ensure circular button is large enough */
}

.mute-button.show {
    display: flex;
}

.mute-button:hover:not(:disabled) {
    background: rgba(67, 160, 71, 0.95);
    transform: scale(1.05);
}

.mute-button.muted {
    background: rgba(244, 67, 54, 0.95);
}

.mute-button.muted:hover:not(:disabled) {
    background: rgba(229, 57, 53, 0.95);
}

.mute-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Mute button icon - larger */
.mute-button i {
    font-size: 18px; /* Larger icon */
}

/* End button - MATCH status overlay size */
.end-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    padding: 12px 24px; /* Match status overlay padding */
    border-radius: 30px; /* Match status overlay border-radius */
    font-size: 14px; /* Match status overlay font-size */
    font-weight: 600; /* Match status overlay font-weight */
    border: none;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s;
    display: none;
    pointer-events: auto;
    min-height: 44px; /* Match status overlay height */
}

.end-button.show {
    display: block;
}

.end-button:hover {
    background: rgba(220, 53, 69, 0.9);
    transform: scale(1.05);
}

/* Mobile responsive - keep proportions */
@media (max-width: 768px) {
    .status-overlay,
    .mute-button,
    .end-button {
        top: 15px;
        padding: 10px 16px;
        border-radius: 25px;
        font-size: 13px;
        min-height: 40px;
    }
    
    .mute-button {
        right: 100px;
        min-width: 40px;
    }
    
    .mute-button i {
        font-size: 16px;
    }
    
    .end-button {
        right: 15px;
        padding: 10px 20px;
    }
    
    .status-overlay {
        left: 15px;
    }
}

@media (max-width: 480px) {
    .status-overlay,
    .mute-button,
    .end-button {
        top: 12px;
        padding: 8px 14px;
        border-radius: 22px;
        font-size: 12px;
        min-height: 36px;
    }
    
    .mute-button {
        right: 90px;
        min-width: 36px;
    }
    
    .mute-button i {
        font-size: 14px;
    }
    
    .end-button {
        right: 12px;
        padding: 8px 16px;
    }
    
    .status-overlay {
        left: 12px;
    }
}
/* End button - slightly larger font */
.end-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    padding: 12px 26px; /* Slightly more horizontal padding */
    border-radius: 30px;
    font-size: 15px; /* Increased from 14px */
    font-weight: 600;
    border: none;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s;
    display: none;
    pointer-events: auto;
    min-height: 44px;
    letter-spacing: 0.3px; /* Slightly more spacing for better readability */
}

.end-button.show {
    display: block;
}

.end-button:hover {
    background: rgba(220, 53, 69, 0.9);
    transform: scale(1.05);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .end-button {
        top: 15px;
        padding: 10px 22px;
        font-size: 14px;
        min-height: 40px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .end-button {
        top: 12px;
        padding: 8px 18px;
        font-size: 13px;
        min-height: 36px;
        right: 12px;
    }
}
/* Klono.ai logo in bottom-left corner - moved up 5px */
.klono-logo {
    position: fixed !important;
    bottom: 25px !important; /* Changed from 20px to 25px */
    left: 20px !important;
    z-index: 9999 !important;
    opacity: 0.85;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.klono-logo img {
    height: 32px;
    width: auto;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.klono-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .klono-logo {
        bottom: 20px !important; /* Slightly adjusted for mobile */
        left: 15px !important;
    }
    
    .klono-logo img {
        height: 28px !important;
    }
}

@media (max-width: 480px) {
    .klono-logo {
        bottom: 90px !important; /* Keep existing mobile positioning */
        left: 12px !important;
    }
    
    .klono-logo img {
        height: 24px !important;
    }
}

@media (max-width: 375px) {
    .klono-logo img {
        height: 20px !important;
    }
}

/* Desktop/larger screens - ensure alignment with floating buttons */
@media (min-width: 481px) {
    .klono-logo {
        bottom: 25px !important; /* 5px higher than before */
        left: 20px !important;
    }
}
/* Klono.ai logo in bottom-left corner - aligned with floating buttons on all devices */
.klono-logo {
    position: fixed !important;
    bottom: 25px !important; /* Aligned with floating buttons */
    left: 20px !important;
    z-index: 9999 !important;
    opacity: 0.85;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.klono-logo img {
    height: 32px;
    width: auto;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.klono-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Tablet responsive */
@media (max-width: 768px) {
    .klono-logo {
        bottom: 25px !important; /* Keep aligned */
        left: 15px !important;
    }
    
    .klono-logo img {
        height: 28px !important;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .klono-logo {
        bottom: 25px !important; /* Aligned with floating buttons */
        left: 12px !important;
    }
    
    .klono-logo img {
        height: 24px !important;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .klono-logo {
        bottom: 25px !important; /* Keep consistent alignment */
        left: 12px !important;
    }
    
    .klono-logo img {
        height: 20px !important;
    }
}

/* Desktop/larger screens */
@media (min-width: 769px) {
    .klono-logo {
        bottom: 25px !important;
        left: 20px !important;
    }
    
    .klono-logo img {
        height: 32px;
    }
}
/* Avatar start button - default size */
.avatar-start-btn {
    width: 240px;  /* Desktop size */
    height: 240px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: 8px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0;
    text-indent: -9999px;
    overflow: visible;
    animation: pulse-button 2s ease-in-out infinite;
}

/* Pulsing ring effect around the button */
.avatar-start-btn::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 3px solid rgba(40, 167, 69, 0.6);
    animation: pulse-ring 2s ease-in-out infinite;
}

.avatar-start-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 70px;
    border-color: transparent transparent transparent white;
    margin-left: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    text-indent: 0;
}

.avatar-start-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    animation: pulse-button-hover 1.5s ease-in-out infinite;
}

/* Tablet - 75% size */
@media (max-width: 768px) {
    .avatar-start-btn {
        width: 180px;
        height: 180px;
        border: 6px solid rgba(255, 255, 255, 0.9);
    }
    
    .avatar-start-btn::before {
        border-width: 30px 0 30px 52px;
        margin-left: 9px;
    }
    
    .avatar-start-btn::after {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 2px;
    }
}

/* Mobile phones - 50% size (half of desktop) */
@media (max-width: 480px) {
    .avatar-start-btn {
        width: 120px;  /* Half of 240px */
        height: 120px; /* Half of 240px */
        border: 4px solid rgba(255, 255, 255, 0.9); /* Half of 8px */
    }
    
    .avatar-start-btn::before {
        border-width: 20px 0 20px 35px; /* Half of original */
        margin-left: 6px; /* Half of 12px */
    }
    
    .avatar-start-btn::after {
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-width: 2px; /* Half of original */
    }
}

/* Very small phones - slightly smaller */
@media (max-width: 375px) {
    .avatar-start-btn {
        width: 100px;
        height: 100px;
        border: 3px solid rgba(255, 255, 255, 0.9);
    }
    
    .avatar-start-btn::before {
        border-width: 16px 0 16px 28px;
        margin-left: 5px;
    }
    
    .avatar-start-btn::after {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-width: 2px;
    }
}

/* Pulsing animation */
@keyframes pulse-button {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5), 
                    0 0 0 0 rgba(40, 167, 69, 0.7);
    }
}

/* Pulsing ring animation */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Faster pulse on hover */
@keyframes pulse-button-hover {
    0%, 100% {
        transform: scale(1.1);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 16px 64px rgba(40, 167, 69, 0.6),
                    0 0 0 8px rgba(40, 167, 69, 0.3);
    }
}
/* Klono.ai logo in bottom-left corner - aligned with floating buttons on all devices */
.klono-logo {
    position: fixed !important;
    bottom: 25px !important; /* Aligned with floating buttons */
    left: 20px !important;
    z-index: 100 !important; /* Lower z-index to stay behind modals/overlays */
    opacity: 0.85;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
}

.klono-logo img {
    height: 32px;
    width: auto;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.klono-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Tablet responsive */
@media (max-width: 768px) {
    .klono-logo {
        bottom: 25px !important;
        left: 15px !important;
        z-index: 100 !important; /* Stay behind modals */
    }
    
    .klono-logo img {
        height: 30px !important;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .klono-logo {
        bottom: 25px !important;
        left: 12px !important;
        z-index: 100 !important; /* Stay behind modals and input areas */
    }
    
    .klono-logo img {
        height: 28px !important;
    }
}

/* Very small phones */
@media (max-width: 375px) {
    .klono-logo {
        bottom: 25px !important;
        left: 12px !important;
        z-index: 100 !important;
    }
    
    .klono-logo img {
        height: 26px !important;
    }
}

/* Desktop/larger screens */
@media (min-width: 769px) {
    .klono-logo {
        bottom: 25px !important;
        left: 20px !important;
        z-index: 100 !important;
    }
    
    .klono-logo img {
        height: 32px;
    }
}

/* Ensure chat input and overlays are above the logo */
.message-input-area,
.chat-input,
#keyboard-overlay,
#keypad-overlay,
.modal,
.overlay {
    z-index: 1000 !important;
}

/* Ensure the "Brak wiadomości" empty state is above logo */
.empty-chat-message,
.chat-content {
    position: relative;
    z-index: 200;
}
/* Mobile - Horizontal video layout when chat is open */
@media (max-width: 768px) {
    /* Change main wrapper to vertical layout on mobile */
    .main-wrapper {
        flex-direction: column;
    }
    
    /* Video section - horizontal/landscape on mobile */
    .video-section {
        width: 100% !important;
        height: 40vh !important; /* Takes 40% of screen height */
        min-height: 300px;
    }
    
    /* Chat section - takes remaining space */
    .chat-section {
        width: 100% !important;
        height: 60vh !important; /* Takes 60% of screen height */
        border-left: none !important;
        border-top: 1px solid var(--border-color);
    }
    
    /* Video container - adjust for horizontal layout */
    .video-container {
        width: 100%;
        height: 100%;
    }
    
    /* Background video - fit horizontal container */
    #background-video,
    #background-image {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important; /* Remove any scaling transforms */
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* HeyGen avatar video - fit horizontal container */
    .video-container video {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* Loading spinner - center in horizontal video */
    .loading-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 60;
    }
    
    /* Avatar start button - keep centered in horizontal video */
    .avatar-start-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Reposition top controls for horizontal layout */
    .status-overlay {
        top: 15px;
        left: 15px;
    }
    
    .mute-button {
        top: 15px;
        right: 100px;
    }
    
    .end-button {
        top: 15px;
        right: 15px;
    }
    
    /* Klono logo - move to bottom of video section */
    .klono-logo {
        bottom: 15px;
        left: 15px;
        z-index: 100;
    }
}

/* Very small phones - more compact */
@media (max-width: 480px) {
    .video-section {
        height: 35vh !important; /* Smaller video area */
        min-height: 250px;
    }
    
    .chat-section {
        height: 65vh !important; /* More space for chat */
    }
    
    /* Background video - ensure full coverage */
    #background-video,
    #background-image {
        object-fit: cover !important;
    }
    
    /* Even more compact controls */
    .status-overlay,
    .mute-button,
    .end-button {
        top: 10px;
    }
    
    .mute-button {
        right: 85px;
    }
    
    .klono-logo {
        bottom: 10px;
        left: 10px;
    }
    
    /* Loading spinner */
    .loading-spinner {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* Landscape mobile orientation - optimize for horizontal view */
@media (max-width: 768px) and (orientation: landscape) {
    .video-section {
        height: 50vh !important;
    }
    
    .chat-section {
        height: 50vh !important;
    }
    
    /* Ensure video fills landscape properly */
    #background-video,
    #background-image,
    .video-container video {
        object-fit: cover !important;
    }
}

/* Extra small phones - ultra compact */
@media (max-width: 375px) {
    .video-section {
        height: 30vh !important;
        min-height: 220px;
    }
    
    .chat-section {
        height: 70vh !important;
    }
    
    /* Smaller loading spinner */
    .loading-spinner {
        transform: translate(-50%, -50%) scale(0.7);
    }
    
    .loading-spinner .spinner {
        width: 40px;
        height: 40px;
    }
}
/* Avatar start button - default size */
.avatar-start-btn {
    width: 240px;  /* Desktop size */
    height: 240px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: 8px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* Changed to absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    font-size: 0;
    text-indent: -9999px;
    overflow: visible;
    animation: pulse-button 2s ease-in-out infinite;
}

/* Pulsing ring effect around the button */
.avatar-start-btn::after {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 3px solid rgba(40, 167, 69, 0.6);
    animation: pulse-ring 2s ease-in-out infinite;
}

.avatar-start-btn::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 40px 70px;
    border-color: transparent transparent transparent white;
    margin-left: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    text-indent: 0;
}

.avatar-start-btn:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Keep centered on hover */
    box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    animation: pulse-button-hover 1.5s ease-in-out infinite;
}

/* Tablet - 75% size, CENTERED */
@media (max-width: 768px) {
    .avatar-start-btn {
        width: 180px;
        height: 180px;
        border: 6px solid rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .avatar-start-btn:hover {
        transform: translate(-50%, -50%) scale(1.1);
    }
    
    .avatar-start-btn::before {
        border-width: 30px 0 30px 52px;
        margin-left: 9px;
    }
    
    .avatar-start-btn::after {
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-width: 2px;
    }
}

/* Mobile phones - 50% size, CENTERED */
@media (max-width: 480px) {
    .avatar-start-btn {
        width: 120px;  /* Half of 240px */
        height: 120px; /* Half of 240px */
        border: 4px solid rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .avatar-start-btn:hover {
        transform: translate(-50%, -50%) scale(1.1);
    }
    
    .avatar-start-btn::before {
        border-width: 20px 0 20px 35px; /* Half of original */
        margin-left: 6px; /* Half of 12px */
    }
    
    .avatar-start-btn::after {
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-width: 2px; /* Half of original */
    }
}

/* Very small phones - CENTERED */
@media (max-width: 375px) {
    .avatar-start-btn {
        width: 100px;
        height: 100px;
        border: 3px solid rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .avatar-start-btn:hover {
        transform: translate(-50%, -50%) scale(1.1);
    }
    
    .avatar-start-btn::before {
        border-width: 16px 0 16px 28px;
        margin-left: 5px;
    }
    
    .avatar-start-btn::after {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-width: 2px;
    }
}

/* Pulsing animation - maintain centering */
@keyframes pulse-button {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 8px 32px rgba(40, 167, 69, 0.35);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5), 
                    0 0 0 0 rgba(40, 167, 69, 0.7);
    }
}

/* Pulsing ring animation */
@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Faster pulse on hover - maintain centering */
@keyframes pulse-button-hover {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 12px 48px rgba(40, 167, 69, 0.5);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        box-shadow: 0 16px 64px rgba(40, 167, 69, 0.6),
                    0 0 0 8px rgba(40, 167, 69, 0.3);
    }
}
/* End Conversation Modal - highest z-index */
#endConversationModal,
.modal.show {
    z-index: 10001 !important;
}

.modal-backdrop.show {
    z-index: 10000 !important;
}

/* Ensure modal dialog is on top */
#endConversationModal .modal-dialog,
.modal .modal-dialog {
    z-index: 10002 !important;
}

/* Modal content should be visible */
#endConversationModal .modal-content,
.modal .modal-content {
    z-index: 10003 !important;
    position: relative;
}

/* All other elements should be below modal */
.video-section,
.video-container,
#background-video,
.avatar-start-btn,
.status-overlay,
.mute-button,
.end-button {
    z-index: 100 !important;
}

/* Chat section below modal */
.chat-section,
.chat-content,
.message-input-area {
    z-index: 200 !important;
}

/* Floating buttons below modal */
.floating-toggle,
.klono-logo,
#floating-keyboard-btn,
#floating-language-container {
    z-index: 300 !important;
}

/* Overlays and tools below modal but above video */
#keyboard-overlay,
#keypad-overlay,
#yesno-overlay,
#scale10-overlay,
#select-overlay,
#qr-overlay,
.input-overlay {
    z-index: 1000 !important;
}

/* Domain and connection errors - very high but below modal */
#domain-status-overlay,
#connection-error-overlay {
    z-index: 9999 !important;
}

/* Bootstrap modal specific fixes */
.modal.fade.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10001 !important;
}

/* Ensure backdrop doesn't block modal */
.modal-backdrop {
    z-index: 10000 !important;
}

/* Mobile responsive - maintain z-index hierarchy */
@media (max-width: 768px) {
    #endConversationModal,
    .modal.show {
        z-index: 10001 !important;
    }
    
    #endConversationModal .modal-dialog {
        z-index: 10002 !important;
        margin: 1rem;
    }
}
/* Complete Z-index hierarchy */

/* 1. Video and background - lowest */
.video-section,
.video-container,
#background-video,
#background-image {
    z-index: 1 !important;
}

/* 2. Avatar start button */
.avatar-start-btn {
    z-index: 50 !important;
}

/* 3. Video controls (status, mute, end) */
.status-overlay {
    z-index: 100 !important;
}

.mute-button,
.end-button {
    z-index: 100 !important;
}

/* 4. Klono logo */
.klono-logo {
    z-index: 100 !important;
}

/* 5. Chat section */
.chat-section,
.chat-content,
.message-input-area {
    z-index: 200 !important;
}

/* 6. Floating buttons */
.floating-toggle,
#floating-keyboard-btn,
#floating-language-container {
    z-index: 300 !important;
}

/* 7. Loading spinner - VISIBLE ABOVE VIDEO */
.loading-spinner {
    z-index: 500 !important;
}

/* 8. Input overlays (keyboard, keypad, etc.) */
#keyboard-overlay,
#keypad-overlay,
#yesno-overlay,
#scale10-overlay,
#select-overlay,
#qr-overlay,
.input-overlay {
    z-index: 1000 !important;
}

/* 9. Settings dropdown */
#settings-dropdown {
    z-index: 1000 !important;
}

/* 10. Connection and domain errors */
#connection-error-overlay,
#domain-status-overlay {
    z-index: 9999 !important;
}

/* 11. Modal backdrop */
.modal-backdrop,
.modal-backdrop.show {
    z-index: 10000 !important;
}

/* 12. Modals (highest) */
#endConversationModal,
.modal,
.modal.show {
    z-index: 10001 !important;
}

#endConversationModal .modal-dialog,
.modal .modal-dialog {
    z-index: 10002 !important;
}

#endConversationModal .modal-content,
.modal .modal-content {
    z-index: 10003 !important;
}