:root{
    --text-color: #1c1e21;
    --text-secondary: #65676b;
    --text-buttons: #ebebeb;
    --border-color: #dddfe2;
    --border-contrast: #333;
    --input-background: #f0f2f5;
    --primary-color: #1994db;
    --primary-hover: #136fa5;
    --background-color: #f4f4f4;
    --background-color-hvr: #e0e0e0;
    --background-contrast: #333;
}

/* Define a fonte Inter como padrão */
body {
    font-family: 'Inter', sans-serif;
}

/* --- Estilos para os Toasts (Notificações) --- */

/* Container para os toasts */
#toast-container {
    position: fixed;
    top: 1.25rem; /* 20px */
    right: 1.25rem; /* 20px */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
    max-width: 320px;
}

/* Estilo base do toast */
.toast {
    background-color: #424242; /* Cinza escuro */
    color: #ffffff;
    padding: 1rem; /* 16px */
    border-radius: 0.5rem; /* 8px */
    border-left-width: 4px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
}

/* Animação de entrada */
.toast.show {
    opacity: 1;
    transform: translateX(0);
}

/* Tipos de toast */

.toast.success {
    border-color: #4ade80; /* Verde */
    background-color: #22c55e;
}

.toast.error {
    border-color: #f87171; /* Vermelho */
    background-color: #ef4444;
}

.toast.warning {
    border-color: #facc15; /* Amarelo */
    background-color: #eab308;
    color: #422006; /* Cor de texto mais escura para melhor contraste */
}

/* --- Mensagens Não Lidas --- */

.nao-lida h3 {
    font-weight: 700; /* bold */
    color: #ef4444; /* Branco mais vivo */
}

.nao-lida p {
    font-weight: 500; /* medium */
    color: #f3f4f6; /* Cinza mais claro */
}
.nao-lida{
    background-color: rgb(70, 70, 70);
}

/* Badge com o contador */
.unread-badge {
    min-width: 20px; /* Largura mínima (para não achatar o número) */
    height: 20px;
    padding: 0 6px; /* Espaçamento lateral para números > 9 */
    background-color: #ef4444; 
    border-radius: 9999px; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px; /* Espaço entre a hora e o badge */
}

/* --- Modais --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 101;
}

.modal-content {
    background: rgb(33, 54, 38);
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.modal-input {
    justify-content:first baseline;
    width: 95%;
    padding: 8px;
    margin-bottom: 20px;
    border: 2px solid var(--border-color);
    color: black;
    border-radius: 5px;
    font-size: 1em;
}

.modal-input#ipt-txtmsg {
    resize: none;
}

.modal-title{
    display: flex;
    cursor: default;
}

.modal-confirm-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 20px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;

    display: block;      
    /* margin-left: auto;  
    margin-right: auto; */
}

.modal-confirm-btn:hover {
    background-color: var(--primary-hover);
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #374151;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #4b5563;
}

.history-item:hover {
    background-color: #4b5563;
}

.reopen-btn {
    background-color: #2563eb; 
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    transition: background 0.2s;
}

.reopen-btn:hover {
    background-color: #1d4ed8;
}


/* --- Mensagens com mídia --- */

.media-image {
    max-width: 300px; /* Limita a largura */
    width: 100%;
    border-radius: 8px; /* Arredonda os cantos */
    margin-bottom: 5px; /* Espaço antes do timestamp */
    cursor: zoom-in;
}

.media-video {
    max-width: 300px;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 5px;
}

.media-audio {
    width: 100%;
    max-width: 280px;
    min-width: 250px;
    height: 40px;
    margin-bottom: 5px;
}

.media-document {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
}

/* Cor do link (herdada) */
.media-document:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Ajusta o texto do link para o balão azul (atendente) */
.bg-blue-600 .media-document {
    color: #e0f2fe; /* Azul claro */
}
/* Ajusta o texto do link para o balão cinza (cliente) */
.bg-gray-700 .media-document {
    color: #e5e7eb; /* Cinza claro */
}

/*Dropdown*/
#user-dropdown {
            transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
#user-dropdown.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}
#user-dropdown:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/*Limitador */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}