/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
    }
    
    .header {
        padding: 0 var(--spacing-md);
    }
    
    .chat-container {
        padding: var(--spacing-md);
    }
    
    .input-section {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .message-content {
        max-width: 85%;
    }
    
    .message-bubble {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .message-image {
        max-width: 100%;
    }
    
    .welcome-content h2 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .message-content {
        max-width: 90%;
    }
    
    .avatar {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
    
    .message-avatar {
        width: 32px;
        height: 32px;
    }
    
    #messageInput {
        font-size: 16px; /* Evita zoom en iOS */
    }
    
    /* Sidebar en móvil */
    .sidebar {
        width: 100%;
        right: -100%;
    }
    
    .sidebar.open {
        right: 0;
    }
}