/* ============================================================================
   SisÁgua Conecta — sac-suporte.css
   Suporte (chamados): caixa de entrada, conversa, dossiê e a faixa na página do envio.
   ADITIVO — depende de tokens.css (--sac-*), app.css e sac-redesign.css.
   Ordem em App.razor: depois de sac-envios.css.
   ========================================================================== */

/* ------------------------------------------------------------ caixa de entrada */
/* Ponto azul = mensagem do tenant que o suporte ainda não abriu (ou resposta não lida, no tenant). */
.sac-unread {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sac-blue-500);
    flex: none;
    margin-right: 10px;
}

    .sac-unread.is-none {
        background: transparent;
    }

.sac-cel-sub {
    font-family: var(--sac-font-mono);
    font-size: 11px;
    color: var(--sac-slate-500);
    margin-top: 2px;
}

.sac-cel-msg {
    font-size: 13px;
    color: var(--sac-slate-700);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}

.sac-cel-who {
    font-size: 11.5px;
    color: var(--sac-slate-500);
    margin-top: 3px;
}

.sac-age {
    font-size: 12px;
    color: var(--sac-slate-500);
    white-space: nowrap;
    margin-top: 4px;
}

    .sac-age.is-late {
        color: #B0781C;
        font-weight: 600;
    }

/* A linha inteira abre o chamado; as ações da célula não devem repassar o clique. */
.sac-card tbody td.sac-col-acoes {
    padding: 9px 8px;
}

.sac-card thead th.sac-col-acoes {
    min-width: 0 !important;
}

/* ------------------------------------------------------------ detalhe: grade conversa | dossiê */
.sac-sup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    gap: 20px;
    align-items: start;
}

    .sac-sup-grid--pdf {
        grid-template-columns: minmax(0, 1fr) 46%;
    }

.sac-dossie {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.sac-sup-head-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--sac-slate-500);
}

.sac-sup-num {
    font-family: var(--sac-font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--sac-slate-400, #8A98A0);
    margin-right: 8px;
}

/* ------------------------------------------------------------ conversa */
.sac-conversa {
    min-width: 0;
}

.sac-thread {
    display: flex;
    flex-direction: column;
}

.sac-msg {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sac-slate-100);
}

    .sac-msg:last-child {
        border-bottom: none;
    }

.sac-msg--suporte {
    background: #FAFCFC;
}

.sac-msg-av {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sac-blue-100);
    color: var(--sac-blue-900);
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

    .sac-msg-av.is-suporte {
        background: var(--sac-gradient-ui);
        color: #fff;
    }

.sac-msg-body {
    min-width: 0;
    flex: 1;
}

.sac-msg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.sac-msg-nome {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sac-ink);
}

.sac-msg-quando {
    margin-left: auto;
    font-family: var(--sac-font-mono);
    font-size: 11.5px;
    color: var(--sac-slate-500);
    white-space: nowrap;
}

.sac-msg-txt {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sac-slate-700);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.sac-msg-nova {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--sac-radius-pill);
    font-size: 10px;
    font-weight: 600;
    background: var(--sac-blue-100);
    color: var(--sac-blue-900);
    line-height: 1.4;
}

/* linha de sistema: mudança de situação, abertura automática */
.sac-sys {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    font-family: var(--sac-font-mono);
    font-size: 11.5px;
    color: var(--sac-slate-500);
    border-bottom: 1px solid var(--sac-slate-100);
}

    .sac-sys i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sac-slate-300);
        display: block;
        flex: none;
    }

.sac-sys-quando {
    margin-left: auto;
    white-space: nowrap;
}

.sac-composer {
    padding: 16px 20px 18px;
    background: var(--sac-slate-50);
    border-top: 1px solid var(--sac-slate-100);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sac-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.sac-composer-hint {
    flex: 1 1 200px;
    padding-bottom: 6px;
}

.sac-hint {
    font-size: 12.5px;
    color: var(--sac-slate-500);
    line-height: 1.5;
}

/* ------------------------------------------------------------ dossiê */
.sac-dossie-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sac-err-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    background: #F8DEE0;
    border-radius: 9px;
    font-size: 12.5px;
    color: #7A1E26;
    line-height: 1.55;
}

    .sac-err-box .fluent-icon {
        flex: none;
        margin-top: 1px;
    }

.sac-dossie-acoes {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* linha de laudo no dossiê: arquivo + laboratório/análises, status e a ação */
.sac-laudo-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--sac-slate-100);
}

    .sac-laudo-linha:last-child {
        border-bottom: none;
    }

/* laudo apontado pelo chamado */
.sac-laudo-linha.is-alvo {
    background: #F3F9FD;
}

/* Com o PDF aberto ao lado, o rail vira uma barra só com a ação principal: a seção
   Suporte sai junto com progresso e prontidão (ver .sac-envio-grid--pdf em sac-envios.css). */
.sac-envio-grid--pdf .sac-rail-sec--suporte {
    display: none;
}

.sac-laudo-nome {
    font-weight: 600;
    color: var(--sac-ink);
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* linha do tempo compacta (comunicações e trilha) */
.sac-tl-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto 32px;
    gap: 12px;
    align-items: start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sac-slate-100);
}

    .sac-tl-row:last-child {
        border-bottom: none;
    }

    .sac-tl-row.is-erro {
        background: #FFF6F6;
    }

.sac-tl-when {
    font-family: var(--sac-font-mono);
    font-size: 11.5px;
    color: var(--sac-slate-500);
    padding-top: 3px;
    line-height: 1.4;
}

.sac-tl-t {
    font-size: 13px;
    font-weight: 600;
    color: var(--sac-ink);
}

.sac-tl-m {
    font-size: 12.5px;
    color: var(--sac-slate-500);
    margin-top: 2px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sac-tl-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.sac-tl-dur {
    font-family: var(--sac-font-mono);
    font-size: 11.5px;
    color: var(--sac-slate-500);
}

/* PDF ao lado, no lugar do dossiê */
.sac-pdfpane {
    position: sticky;
    top: 0;
    height: calc(100dvh - 110px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ------------------------------------------------------------ faixa do chamado (página do envio) */
.sac-faixa {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 14px;
    background: #fff;
    border: 1px solid var(--sac-border);
    border-radius: var(--sac-radius-lg);
    box-shadow: var(--sac-shadow-sm);
    margin-bottom: 16px;
}

.sac-faixa-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sac-blue-100);
    color: var(--sac-blue-700);
    display: grid;
    place-items: center;
    flex: none;
}

.sac-faixa-t {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sac-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sac-faixa-s {
    font-size: 12.5px;
    color: var(--sac-slate-500);
    margin-top: 2px;
}

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1180px) {
    .sac-sup-grid,
    .sac-sup-grid--pdf {
        grid-template-columns: minmax(0, 1fr);
    }

    .sac-pdfpane {
        position: static;
        height: 70dvh;
    }
}