/* responsive.css - Styles pour l'adaptabilité aux différentes tailles d'écran */

/* Tablettes et petits écrans */
@media (max-width: 992px) {
    .container, .files-container, .welcome-container, .chat-container {
        max-width: 95%;
    }
    
    .message {
        max-width: 85%;
    }
    
    .fixed-width-button {
        width: 160px; /* Légèrement plus petit sur tablettes */
    }
    
    .background-logo-container {
        width: 130px;
        height: 130px;
    }
}

/* Smartphones et très petits écrans */
@media (max-width: 768px) {
    .background-logo-container {
        width: 130px;
        height: 130px;
        top: 10px;
        right: 10px;
    }
    
    .container, .files-container, .welcome-container {
        max-width: 100%;
        margin: 10px;
        padding: 15px;
    }
    
    .chat-container {
        max-width: 100%;
        height: calc(100vh - 20px);
        margin: 10px;
        padding: 15px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    .conversation {
        height: calc(100vh - 200px);
    }
    
    .message {
        max-width: 90%;
        padding: 8px 12px;
    }
    
    #prompt-input {
        height: 60px;
    }
    
    .model-selector-container {
        justify-content: center;
        margin-top: 10px;
    }
    
    .file-upload-section, .file-list-section {
        padding: 15px;
    }
    
    .file-table th, .file-table td {
        padding: 8px 10px;
    }
    
    .file-table th:nth-child(3), 
    .file-table td:nth-child(3) {
        display: none; /* Masquer la colonne de taille sur mobile */
    }
    
    .welcome-button {
        padding: 10px 15px;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .welcome-buttons {
        flex-direction: column;
    }
    
    .action-buttons-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .fixed-width-button {
        width: 100%; /* Pleine largeur sur mobile */
    }
    
    .tabs {
        flex-direction: column;
    }
    
    .tab {
        margin-bottom: 5px;
        border: 1px solid #ddd;
        text-align: center;
    }
    
    .tab.active {
        margin-bottom: 5px;
    }
    
    .tab-content {
        padding: 15px;
    }
    
    .compilation-item {
        flex-direction: column;
        padding: 15px;
    }
    
    .compilation-label {
        margin-bottom: 5px;
    }
    
    .file-action {
        width: 36px;
        height: 36px; /* Plus grand sur mobile pour faciliter le toucher */
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .background-logo-container {
        width: 130px;
        height: 130px;
    }
    
    h1 {
        font-size: 1.3rem;
    }
    
    .file-table th:nth-child(2), 
    .file-table td:nth-child(2) {
        display: none; /* Masquer aussi la colonne de type sur très petit écran */
    }
    
    .file-action {
        width: 40px;
        height: 40px;
    }
    
    .file-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .progress-container {
        height: 15px;
    }
    
    .progress-text {
        font-size: 10px;
    }
}

/* Pour les grands écrans */
@media (min-width: 1200px) {
    .container, .files-container, .welcome-container {
        max-width: 1140px;
    }
    
    .chat-container {
        max-width: 1140px;
    }
}

/* Pour les écrans ultra-larges */
@media (min-width: 1600px) {
    .container, .files-container, .welcome-container, .chat-container {
        max-width: 1400px;
    }
    
    .background-logo-container {
        width: 130px;
        height: 130px;
    }
}

/* Orientation Paysage sur mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .chat-container {
        height: auto;
    }
    
    .conversation {
        height: 200px;
    }
    
    #prompt-input {
        height: 40px;
    }
    
    .background-logo-container {
        display: none; /* Masquer le logo en arrière-plan en mode paysage sur petit écran */
    }
}