@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html, body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f0f2f5; 
    height: 100%; 
}

.btn { 
    transition: all 0.2s ease-in-out; 
}

.btn-primary { 
    background: linear-gradient(to right, #25D366, #128C7E); 
    color: white; 
}
.btn-primary:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}
.btn-primary:disabled { 
    background: #9ca3af; 
    cursor: not-allowed; 
    transform: none; 
    box-shadow: none; 
}

.card { 
    background-color: white; 
    border-radius: 0.75rem; 
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 
}

.modal-backdrop { 
    background-color: rgba(0,0,0,0.6); 
    backdrop-filter: blur(4px); 
    animation: fadeIn 0.3s ease-out forwards;
}

.form-locked { 
    opacity: 0.6; 
    pointer-events: none; 
}

.instance-filter-btn.active { 
    background-color: #128C7E; 
    color: white; 
    font-weight: 600;
}

/* Estilos para o Select2 */
.select2-container--default .select2-selection--single {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem 0 0 0.375rem; /* rounded-l-md */
    height: 42px; /* A altura do p-2 do textarea */
    padding: 0.5rem 0.75rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
    padding-left: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}
.select2-dropdown {
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.toast {
    animation: slideInUp 0.4s ease-out forwards;
}

/* Estilos para o Preview */
.chat-bubble-container {
    display: flex; /* Começa como flex para ser alterado por JS */
    margin-bottom: 8px;
}
.chat-bubble-sent {
    background-color: #dcf8c6;
    max-width: 80%;
    word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}