/* ForgeReel Web App Styles */

:root {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #e5e7eb;
    background-color: #111827;
}

/* Custom Scrollbar Styling - Dark Theme */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #7c3aed #374151;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #374151;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #7c3aed;
    border-radius: 10px;
    border: 2px solid #374151;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #6d28d9;
}

/* Smooth scrolling */
.custom-scrollbar {
    scroll-behavior: smooth;
}

/* Touch-friendly elements */
button, a, input, select, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    /* Ensure buttons are touch-friendly on mobile */
    button, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better text sizing on mobile */
    body {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    input, textarea, select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Responsive video */
video {
    max-width: 100%;
    height: auto;
}

/* Ensure sidebar doesn't interfere on mobile */
@media (max-width: 1023px) {
    #chat-sidebar {
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.5);
    }
}

/* Dark theme select styling */
select {
    background-color: #1f2937;
    color: #e5e7eb;
}

select option {
    background-color: #1f2937;
    color: #e5e7eb;
}

/* Add more styles here as the app grows */