/* style_enviar_audio.css */

/* --- Estilos Gerais (Desktop) --- */
.area-gravacao-audio {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    background: linear-gradient(90deg, #0f2027, #203a43, #2c5364);
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-align: center;
    border: 1px solid #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box; /* Garante que o padding não estoure a largura */
}

.controles-gravacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Permite ajustar se faltar espaço */
}

.input-nome-audio {
    flex: 1;
    padding: 12px;
    border-radius: 25px;
    border: none;
    background: #2b2b36;
    color: #fff;
    outline: none;
    transition: 0.3s;
    min-width: 150px; /* Tamanho mínimo para não sumir */
}
.input-nome-audio:focus { box-shadow: 0 0 5px #f77810; }

.btn-mic, .btn-info {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    color: white;
    flex-shrink: 0; /* Impede o botão de ser esmagado */
}

.btn-mic {
    background: linear-gradient(135deg, #f77810, #ff9e4a);
    box-shadow: 0 4px 10px rgba(247, 120, 16, 0.4);
    font-size: 24px;
}

.btn-mic.gravando {
    background: #ff3b3b;
    animation: pulsar 1.5s infinite;
}

.btn-info {
    background: #444;
    font-size: 20px;
}
.btn-info:hover { background: #666; }

.botoes-acao {
    display: none; /* Escondido até gravar */
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
    flex-wrap: wrap; /* Segurança para telas médias */
}

.btn-acao {
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: 0.2s;
    white-space: nowrap; /* Texto não quebra linha dentro do botão */
}

.btn-play { background: #2196F3; }
.btn-enviar { background: #4CAF50; }
.btn-cancelar { background: #f44336; }
.btn-acao:hover { opacity: 0.9; transform: scale(1.05); }

/* Modal de Ajuda */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Espaço nas bordas no celular */
    box-sizing: border-box;
}
.modal-box {
     background: linear-gradient(90deg, #0f2027, #203a43, #2c5364);
    padding: 25px;
    border-radius: 15px;
    max-width: 400px;
    width: 100%;
    color: #fff;
    text-align: center;
    border: 1px solid #f77810;
    box-shadow: 0 0 20px rgba(247, 120, 16, 0.2);
}
.modal-box h3 { color: #f77810; margin-top: 0;}

@keyframes pulsar {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 59, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

#statusGravacao { color: #aaa; font-size: 12px; margin-top: 5px; }

/* --- RESPONSIVIDADE (CELULAR) --- */
@media (max-width: 480px) {
    /* 1. Ajuste da barra superior (Input e Microfone) */
    .controles-gravacao {
        /* Input vai para cima, botões para baixo */
        flex-direction: row; 
        flex-wrap: wrap;
    }
    .area-gravacao-audio {
    background: linear-gradient(90deg, #0f2027, #203a43, #2c5364);}
    
    .input-nome-audio {
        width: 100%; /* Input ocupa a linha toda */
        flex: none; /* Remove flexibilidade para forçar largura */
        order: -1; /* Força o input para o topo */
        margin-bottom: 10px;
    }

    /* 2. Ajuste dos botões de ação (Play, Enviar, Cancelar) */
    .botoes-acao {
        flex-direction: column; /* Um embaixo do outro */
        width: 100%;
    }

    .btn-acao {
        width: 100%; /* Botão ocupa toda a largura */
        padding: 12px; /* Botão mais gordinho para o dedo */
        font-size: 16px;
    }
    
    /* Aumenta um pouco o botão do microfone no celular */
    .btn-mic {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}