/* Layout compartilhado das telas de Conversas (Fila, Atendimento, Todas em Atendimento, Encerradas). */
.conversa-layout {
    display: grid;
    grid-template-columns: fit-content(55%) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    height: calc(100vh - var(--conversa-offset, 360px));
    min-height: 420px;
}

.conversa-layout > .mjr-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

.conversa-layout > .mjr-card > .conversa-historico {
    flex: 1 1 auto;
    max-height: none;
    min-height: 120px;
}

.conversa-historico {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* max-height (não height): nunca força a página a crescer além da viewport, só limita
       o quanto o histórico pode ocupar quando há muitas mensagens. Telas com painel extra
       acima (transferência, abrir ticket) continuam seguras porque o histórico encolhe. */
    max-height: min(55vh, 520px);
    min-height: 220px;
    overflow-y: auto;
    padding: 0.5rem;
}

.conversa-anexo-input-hidden {
    display: none;
}

.anexo-icone-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    color: var(--mud-palette-primary);
    transition: background-color 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anexo-icone-label::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.anexo-icone-label:hover:not(.anexo-icone-label-disabled)::before {
    opacity: 0.1;
    transform: scale(1.6);
}

.anexo-icone-label:hover:not(.anexo-icone-label-disabled) {
    transform: scale(1.12);
}

.anexo-icone-label-disabled {
    opacity: 0.38;
    pointer-events: none;
}

.acao-icone-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.conversa-anexo-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.nome-em-linhas {
    width: min-content;
    min-width: 0;
}