/*==============================================================================
  ATENDIMENTO — CHAT E TICKETS

  A conversa e o assunto da tela, entao ela ocupa o centro e a largura util. O
  contexto (cliente, linha do tempo) fica ao lado no desktop e desce para baixo
  no celular — nunca some, porque e ele que permite responder sem perguntar de
  novo o que a pessoa ja contou.
==============================================================================*/

.sp-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
}

.sp-thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--w-surface);
    border-radius: var(--w-radius-lg, 14px);
    overflow: hidden;
}

.sp-lado {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/*------------------------------------------------------------------------------
  Mensagens
------------------------------------------------------------------------------*/

.sp-mensagens {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.15rem;
    /* Altura fixa com rolagem propria: a conversa cresce sem empurrar o campo
       de resposta para fora da tela. */
    max-height: 58vh;
    overflow-y: auto;
}

.sp-msg {
    max-width: 82%;
    padding: .8rem 1rem;
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface-sunken);
}

.sp-msg header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .35rem;
}

.sp-msg header strong {
    font-size: var(--w-text-xs, .8125rem);
    color: var(--w-text-primary);
}

.sp-msg header time {
    font-size: var(--w-text-2xs, .75rem);
    color: var(--w-text-tertiary);
    white-space: nowrap;
}

.sp-msg p {
    margin: 0;
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.6;
    color: var(--w-text-primary);
    overflow-wrap: anywhere;
}

/* Quem falou se distingue pelo lado E pela cor — lado sozinho some no
   empilhamento do celular, cor sozinha some para quem nao a percebe. */
.sp-msg--cliente {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.sp-msg--suporte {
    align-self: flex-end;
    background: var(--w-accent-subtle, #eef2ff);
    border-bottom-right-radius: 4px;
}

/* Nota interna: visualmente diferente de qualquer mensagem, porque confundi-la
   com uma resposta ao cliente seria um erro caro. */
.sp-msg--nota {
    align-self: stretch;
    max-width: 100%;
    background: var(--w-warning-bg, #fff8e6);
    border-left: 3px solid var(--w-warning, #d97706);
}

.sp-msg--nota header strong {
    color: var(--w-warning-fg, #7a5b12);
}

.sp-anexos {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sp-anexos a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: var(--w-radius-full, 999px);
    background: var(--w-surface);
    font-size: var(--w-text-2xs, .75rem);
    color: var(--w-text-link, var(--w-accent));
    text-decoration: none;
}

.sp-anexos a span {
    color: var(--w-text-tertiary);
}

/*------------------------------------------------------------------------------
  Campo de resposta
------------------------------------------------------------------------------*/

.sp-responder {
    padding: 1rem 1.15rem 1.15rem;
    border-top: 1px solid var(--w-border);
    background: var(--w-surface);
}

.sp-responder textarea {
    width: 100%;
    padding: .7rem .85rem;
    border-radius: var(--w-radius-md, 12px);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-size: var(--w-text-sm, .875rem);
    font-family: inherit;
    resize: vertical;
}

.sp-responder textarea:focus {
    outline: none;
    border-color: var(--w-border-focus, var(--w-accent));
    box-shadow: var(--w-shadow-focus, 0 0 0 3px rgba(74, 108, 247, .18));
}

.sp-responder__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: .7rem;
}

.sp-check {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 auto 0 0;
    font-size: var(--w-text-xs, .8125rem);
    color: var(--w-text-secondary);
    cursor: pointer;
}

.sp-anexar {
    cursor: pointer;
    margin: 0;
}

/* Respostas prontas: atalhos curtos, em linha, sem virar um menu. */
.sp-prontas {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .6rem;
}

.sp-pronta {
    padding: .3rem .7rem;
    border-radius: var(--w-radius-full, 999px);
    border: 1px solid var(--w-border);
    background: var(--w-surface-sunken);
    font-size: var(--w-text-2xs, .75rem);
    font-family: var(--w-font-mono, monospace);
    color: var(--w-text-secondary);
    cursor: pointer;
}

.sp-pronta:hover {
    border-color: var(--w-accent);
    color: var(--w-accent);
}

/*------------------------------------------------------------------------------
  Controles do atendimento (central)
------------------------------------------------------------------------------*/

.sp-controles {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface);
}

.sp-controle {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 150px;
    flex: 1 1 150px;
}

.sp-controle label {
    font-size: var(--w-text-2xs, .75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--w-text-tertiary);
}

.sp-controle select {
    padding: .45rem .6rem;
    border-radius: var(--w-radius-sm, 8px);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-size: var(--w-text-sm, .875rem);
}

.sp-controle--sla {
    justify-content: flex-start;
}

/*------------------------------------------------------------------------------
  Painel e fila do dashboard
------------------------------------------------------------------------------*/

.sp-painel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.sp-fila__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--w-border-subtle, var(--w-border));
    text-decoration: none;
    color: inherit;
}

.sp-fila__item:last-child {
    border-bottom: 0;
}

.sp-fila__canal {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--w-surface-sunken);
    color: var(--w-accent);
    font-size: .8125rem;
}

.sp-fila__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-fila__texto strong {
    display: block;
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-fila__texto small {
    font-size: var(--w-text-2xs, .75rem);
    color: var(--w-text-tertiary);
}

/*------------------------------------------------------------------------------
  Cliente 360, avaliacao e formularios
------------------------------------------------------------------------------*/

.sp-sub {
    margin: 1.15rem 0 .5rem;
    font-size: var(--w-text-xs, .8125rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--w-text-tertiary);
}

.sp-anteriores {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .4rem;
}

.sp-anteriores li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: var(--w-text-xs, .8125rem);
}

.sp-anteriores a {
    color: var(--w-text-link, var(--w-accent));
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-form {
    display: grid;
    gap: 1rem;
    max-width: 720px;
    padding: 1.25rem;
    background: var(--w-surface);
    border-radius: var(--w-radius-lg, 14px);
}

.sp-form textarea,
.sp-form input[type="text"],
.sp-form input[type="file"],
.sp-form select {
    width: 100%;
    padding: .6rem .75rem;
    border-radius: var(--w-radius-md, 10px);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-size: var(--w-text-sm, .875rem);
    font-family: inherit;
}

.sp-aviso {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--w-radius-md, 12px);
    background: var(--w-warning-bg, #fff8e6);
    color: var(--w-warning-fg, #7a5b12);
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.55;
}

.sp-aviso--sutil {
    background: var(--w-info-bg, #e8f1fe);
    color: var(--w-info-fg, #1d4ed8);
}

.sp-encerrado {
    margin: 0;
    padding: 1.15rem;
    text-align: center;
    border-top: 1px solid var(--w-border);
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-secondary);
}

/* Estrelas: os radios saem na ordem 5..1 e o CSS os exibe invertidos, o que
   permite pintar as anteriores a escolhida sem JavaScript. */
.sp-avaliar {
    display: grid;
    gap: .75rem;
}

.sp-estrelas {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: .15rem;
}

.sp-estrelas input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sp-estrelas label {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--w-border-strong, #cfd4e2);
    cursor: pointer;
    margin: 0;
}

.sp-estrelas input:checked ~ label,
.sp-estrelas label:hover,
.sp-estrelas label:hover ~ label {
    /* Dourado literal: estrela e dourada nos dois temas — um token de marca
       aqui deixaria a avaliacao mudando de cor conforme o tema. */
    color: #f5b301;
}

.sp-estrelas input:focus-visible + label {
    outline: 2px solid var(--w-accent);
    outline-offset: 2px;
}

.sp-avaliar textarea {
    width: 100%;
    padding: .6rem .75rem;
    border-radius: var(--w-radius-md, 10px);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-family: inherit;
    font-size: var(--w-text-sm, .875rem);
}

/*------------------------------------------------------------------------------
  Responsivo
------------------------------------------------------------------------------*/

@media (max-width: 64rem) {
    .sp-grade,
    .sp-painel {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    .sp-msg {
        max-width: 94%;
    }

    .sp-mensagens {
        max-height: 52vh;
        padding: .9rem;
    }

    .sp-controle {
        flex: 1 1 100%;
    }

    .sp-responder__acoes {
        justify-content: stretch;
    }

    .sp-responder__acoes .lz-btn {
        flex: 1 1 100%;
        min-height: 44px;
    }

    .sp-check {
        margin: 0 0 .4rem;
    }
}

/* ── Anexos escolhidos, antes de enviar ─────────────────────────────────── */
.sp-previa { margin-top: var(--w-space-3, 12px); }
.sp-previa[hidden] { display: none; }

.sp-previa__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--w-space-2, 8px);
}

.sp-previa__item {
    display: flex;
    align-items: center;
    gap: var(--w-space-3, 12px);
    padding: var(--w-space-2, 8px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface-sunken);
}

/* Arquivo grande demais é recusado pelo servidor: dizer isso antes de enviar
   poupa a pessoa de descobrir depois do upload inteiro. */
.sp-previa__item.is-grande {
    border-color: var(--w-danger);
    background: color-mix(in srgb, var(--w-danger) 8%, transparent);
}

.sp-previa__mini {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--w-radius-sm, 8px);
    background: var(--w-surface);
    color: var(--w-text-tertiary);
}

.sp-previa__mini img { width: 100%; height: 100%; object-fit: cover; }

.sp-previa__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sp-previa__texto strong {
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-previa__texto small { font-size: var(--w-text-xs, .75rem); color: var(--w-text-secondary); }

.sp-previa__x {
    width: 28px;
    height: 28px;
    flex: none;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--w-text-tertiary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.sp-previa__x:hover { background: var(--w-surface-hover); color: var(--w-danger); }

/* ── Pedido de validação (lado do atendente) ────────────────────────────────
   Um cartão, não um punhado de campos soltos: a ação é distinta o bastante de
   "responder" para merecer moldura própria, e próxima o bastante para ficar
   logo abaixo. */
.sp-validar {
    margin-top: var(--w-space-4, 16px);
    padding: var(--w-space-4, 16px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface);
    display: grid;
    gap: var(--w-space-3, 12px);
}

.sp-validar__topo {
    display: flex;
    align-items: center;
    gap: var(--w-space-2, 8px);
    color: var(--w-text-primary);
    font-size: var(--w-text-sm, .875rem);
}

.sp-validar__topo i { color: var(--w-accent); }

/* Seletor segmentado: o radio nativo continua lá para teclado e leitor de
   tela, mas quem enxerga vê duas pastilhas — mais fácil de acertar no toque
   que um círculo de 13px. */
.sp-validar__tipo {
    display: flex;
    gap: var(--w-space-2, 8px);
    flex-wrap: wrap;
}

.sp-validar__tipo .sp-check {
    flex: 1 1 12rem;
    margin: 0;
    position: relative;
}

.sp-validar__tipo input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sp-validar__tipo input[type="radio"] + span {
    display: block;
    padding: 10px var(--w-space-3, 12px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface-sunken);
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm, .875rem);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--w-duration-fast, .12s) ease,
                background var(--w-duration-fast, .12s) ease;
}

.sp-validar__tipo input[type="radio"]:checked + span {
    border-color: var(--w-accent);
    background: color-mix(in srgb, var(--w-accent) 10%, transparent);
    color: var(--w-text-primary);
    font-weight: var(--w-weight-semibold, 600);
}

.sp-validar__tipo input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--w-accent);
    outline-offset: 2px;
}

.sp-validar textarea {
    width: 100%;
    min-height: 5.5rem;
    padding: var(--w-space-3, 12px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-family: inherit;
    /* 16px no celular: abaixo disso o iOS dá zoom sozinho ao focar. */
    font-size: 16px;
    resize: vertical;
}

@media (min-width: 48rem) {
    .sp-validar textarea { font-size: var(--w-text-sm, .875rem); }
}

.sp-validar textarea:focus {
    outline: none;
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent) 20%, transparent);
}

.sp-validar button { justify-self: end; }

/* ── Histórico das validações ───────────────────────────────────────────── */
.sp-validacoes {
    margin-top: var(--w-space-4, 16px);
    display: grid;
    gap: var(--w-space-2, 8px);
}

.sp-validacoes h3 {
    margin: 0;
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-secondary);
}

.sp-validacao {
    padding: var(--w-space-3, 12px);
    border: 1px solid var(--w-border);
    border-left: 3px solid var(--w-text-tertiary);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface);
}

/* A cor da borda diz o desfecho antes de a pessoa ler o rótulo. */
.sp-validacao--pendente  { border-left-color: var(--w-warning, #d97706); }
.sp-validacao--aprovada  { border-left-color: var(--w-success, #059669); }
.sp-validacao--reprovada { border-left-color: var(--w-danger); }
.sp-validacao--respondida { border-left-color: var(--w-accent); }

.sp-validacao header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-2, 8px);
    margin-bottom: var(--w-space-2, 8px);
}

.sp-validacao__estado {
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--w-text-secondary);
}

.sp-validacao time { font-size: var(--w-text-xs, .75rem); color: var(--w-text-tertiary); }

.sp-validacao__pergunta { margin: 0; color: var(--w-text-primary); line-height: 1.5; }

.sp-validacao__resposta {
    margin: var(--w-space-2, 8px) 0 0;
    padding: var(--w-space-2, 8px);
    border-radius: var(--w-radius-sm, 8px);
    background: var(--w-surface-sunken);
    color: var(--w-text-secondary);
    line-height: 1.5;
}

.sp-validacao small { color: var(--w-text-tertiary); font-size: var(--w-text-xs, .75rem); }

/* ── Pedido esperando o cliente ─────────────────────────────────────────────
   Fica no topo da conversa e usa a cor de atenção: é a única coisa na tela
   que trava o atendimento até alguém agir. */
.sp-pedido {
    margin-bottom: var(--w-space-4, 16px);
    padding: var(--w-space-5, 20px);
    border: 1px solid color-mix(in srgb, var(--w-warning, #d97706) 40%, var(--w-border));
    border-radius: var(--w-radius-lg, 14px);
    background: color-mix(in srgb, var(--w-warning, #d97706) 7%, var(--w-surface));
}

.sp-pedido__topo {
    display: flex;
    align-items: flex-start;
    gap: var(--w-space-3, 12px);
    margin-bottom: var(--w-space-3, 12px);
}

.sp-pedido__topo i {
    font-size: 20px;
    color: var(--w-warning, #d97706);
    margin-top: 2px;
}

.sp-pedido__topo strong { display: block; color: var(--w-text-primary); }
.sp-pedido__topo small { color: var(--w-text-secondary); font-size: var(--w-text-xs, .75rem); }

.sp-pedido__pergunta {
    margin: 0 0 var(--w-space-4, 16px);
    padding: var(--w-space-3, 12px);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface);
    color: var(--w-text-primary);
    line-height: 1.55;
}

.sp-pedido__form textarea {
    width: 100%;
    min-height: 5rem;
    padding: var(--w-space-3, 12px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
}

@media (min-width: 48rem) {
    .sp-pedido__form textarea { font-size: var(--w-text-sm, .875rem); }
}

.sp-pedido__form textarea:focus {
    outline: none;
    border-color: var(--w-warning, #d97706);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-warning, #d97706) 22%, transparent);
}

.sp-pedido__erro { display: block; margin-top: 6px; color: var(--w-danger); font-size: var(--w-text-xs, .75rem); }

/* No celular os botões empilham e ocupam a linha: aprovar por engano porque o
   alvo era pequeno é o pior desfecho possível aqui. */
.sp-pedido__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w-space-2, 8px);
    margin-top: var(--w-space-3, 12px);
}

@media (max-width: 30rem) {
    .sp-pedido__acoes .lz-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Mensagem que chegou pela sondagem ──────────────────────────────────── */
.sp-msg--nova { animation: sp-msg-entra .22s var(--w-ease-out, ease-out); }

@keyframes sp-msg-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-msg--nova { animation: none; }
}

.sp-msg__tag {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--w-warning, #d97706) 18%, transparent);
    color: var(--w-warning, #d97706);
    font-size: var(--w-text-2xs, .6875rem);
    font-weight: var(--w-weight-semibold, 600);
}

.w-toast--suporte { text-decoration: none; }

/* ── Situação travada (chamado encerrado) ───────────────────────────────────
   O seletor sai de cena e vira um valor fixo com a saída ao lado: assim fica
   claro que a mudança existe, mas passa por reabrir. */
.sp-controle--travado label { display: block; }

.sp-travado {
    display: flex;
    align-items: center;
    gap: var(--w-space-2, 8px);
    padding: 6px 6px 6px var(--w-space-3, 12px);
    border: 1px dashed var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface-sunken);
}

.sp-travado__valor {
    flex: 1;
    min-width: 0;
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-travado__acao {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm, 8px);
    background: var(--w-surface);
    color: var(--w-accent);
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-medium, 500);
    cursor: pointer;
}

.sp-travado__acao:hover {
    border-color: var(--w-accent);
    background: color-mix(in srgb, var(--w-accent) 10%, transparent);
}

/*==============================================================================
  Refino visual da tela de atendimento

  O que havia funcionava, mas lia como um formulário: caixas cinzas iguais,
  seletores soltos numa faixa branca e mensagens sem dono aparente. As regras
  abaixo dão hierarquia — barra de controles com moldura e divisórias, balões
  com autor destacado e ponta, respostas prontas com cara de atalho.
==============================================================================*/

/* ── Barra de controles ─────────────────────────────────────────────────── */
.sp-controles {
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--w-border);
    box-shadow: var(--w-shadow-sm, 0 1px 2px rgb(0 0 0 / .04));
    overflow: hidden;
}

.sp-controle {
    gap: .35rem;
    padding: .75rem 1rem;
    min-width: 11rem;
    /* Divisória fina no lugar do espaço vazio: os controles passam a ler como
       uma barra só, e não como campos avulsos flutuando. */
    border-right: 1px solid var(--w-border);
}

.sp-controle:last-child { border-right: 0; }

@media (max-width: 62rem) {
    .sp-controle {
        border-right: 0;
        border-bottom: 1px solid var(--w-border);
    }

    .sp-controle:last-child { border-bottom: 0; }
}

.sp-controle label {
    font-size: var(--w-text-2xs, .6875rem);
    letter-spacing: .06em;
}

.sp-controle select {
    width: 100%;
    padding: .5rem .65rem;
    border-radius: var(--w-radius-md, 10px);
    font-weight: var(--w-weight-medium, 500);
    cursor: pointer;
    transition: border-color var(--w-duration-fast, .12s) ease;
}

.sp-controle select:hover { border-color: var(--w-accent); }

.sp-controle select:focus {
    outline: none;
    border-color: var(--w-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent) 18%, transparent);
}

/* ── Balões da conversa ─────────────────────────────────────────────────── */
.sp-mensagens { gap: .85rem; padding-right: .25rem; }

.sp-msg {
    position: relative;
    border: 1px solid transparent;
    box-shadow: var(--w-shadow-sm, 0 1px 2px rgb(0 0 0 / .05));
}

.sp-msg header strong {
    font-size: var(--w-text-sm, .8125rem);
    font-weight: var(--w-weight-semibold, 600);
}

.sp-msg--cliente {
    background: var(--w-surface);
    border-color: var(--w-border);
}

.sp-msg--suporte {
    background: color-mix(in srgb, var(--w-accent) 10%, var(--w-surface));
    border-color: color-mix(in srgb, var(--w-accent) 24%, transparent);
}

.sp-msg--suporte header strong { color: var(--w-accent); }

/* Faixa de cor na borda de cima: diz de quem é o balão antes da leitura, e
   sobrevive ao empilhamento no celular, onde o lado deixa de distinguir. */
.sp-msg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--w-border);
}

.sp-msg--suporte::before { background: var(--w-accent); }
.sp-msg--nota::before { display: none; }

/* ── Respostas prontas ──────────────────────────────────────────────────── */
.sp-prontas { gap: .4rem; }

.sp-pronta {
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px dashed var(--w-border);
    background: transparent;
    color: var(--w-text-secondary);
    font-family: var(--w-font-mono, ui-monospace, monospace);
    font-size: var(--w-text-xs, .75rem);
    cursor: pointer;
    transition: border-color var(--w-duration-fast, .12s) ease,
                color var(--w-duration-fast, .12s) ease;
}

.sp-pronta:hover {
    border-style: solid;
    border-color: var(--w-accent);
    background: color-mix(in srgb, var(--w-accent) 8%, transparent);
    color: var(--w-accent);
}

/* ── Campo de resposta ──────────────────────────────────────────────────── */
.sp-responder {
    padding: var(--w-space-4, 16px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface);
    display: grid;
    gap: var(--w-space-3, 12px);
}

.sp-responder textarea {
    width: 100%;
    padding: var(--w-space-3, 12px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface-sunken);
    color: var(--w-text-primary);
    font-family: inherit;
    /* 16px no celular: abaixo disso o iOS dá zoom sozinho ao focar. */
    font-size: 16px;
    line-height: 1.55;
    resize: vertical;
}

@media (min-width: 48rem) {
    .sp-responder textarea { font-size: var(--w-text-sm, .875rem); }
}

.sp-responder textarea:focus {
    outline: none;
    border-color: var(--w-accent);
    background: var(--w-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent) 18%, transparent);
}

.sp-responder__acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-3, 12px);
    flex-wrap: wrap;
}

/* ── Ficha do cliente ───────────────────────────────────────────────────── */
.sp-lado {
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface);
    padding: var(--w-space-4, 16px);
}

.sp-lado h2,
.sp-lado h3 {
    margin: 0 0 var(--w-space-3, 12px);
    padding-bottom: var(--w-space-2, 8px);
    border-bottom: 1px solid var(--w-border);
    font-size: var(--w-text-base, 1rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.sp-lado dt {
    font-size: var(--w-text-2xs, .6875rem);
    font-weight: var(--w-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w-text-tertiary);
}

.sp-lado dd {
    margin: 2px 0 var(--w-space-3, 12px);
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-primary);
    overflow-wrap: anywhere;
}

/*==============================================================================
  Espaço de trabalho do chamado

  A faixa horizontal de seletores no topo era o que fazia a tela parecer um
  formulário. Aqui ela vira um painel de propriedades na coluna da direita —
  a forma que ferramentas de atendimento usam — e o centro fica só com a
  conversa, que é o que o atendente lê.
==============================================================================*/

/* A coluna da direita cola ao rolar: as propriedades do chamado precisam estar
   à mão enquanto se lê uma conversa longa. */
@media (min-width: 62rem) {
    .sp-grade { grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.25rem; }

    .sp-lado {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        padding: 0;
        border: 0;
        background: transparent;
    }
}

.sp-props {
    padding: var(--w-space-4, 16px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface);
    box-shadow: var(--w-shadow-sm, 0 1px 2px rgb(0 0 0 / .04));
    display: grid;
    gap: 0;
}

.sp-props__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--w-space-2, 8px);
    padding-bottom: var(--w-space-3, 12px);
    border-bottom: 1px solid var(--w-border);
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.sp-props__titulo i { color: var(--w-text-tertiary); }

/* Cada propriedade vira uma linha rótulo/valor, como numa ficha — e não um
   campo de formulário com moldura própria. */
.sp-props .sp-controle {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-3, 12px);
    min-width: 0;
    padding: var(--w-space-3, 12px) 0;
    border: 0;
    border-bottom: 1px solid var(--w-border-subtle, var(--w-border));
}

.sp-props .sp-controle:last-of-type { border-bottom: 0; padding-bottom: 0; }

.sp-props .sp-controle label {
    flex: 0 0 7rem;
    margin: 0;
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-medium, 500);
    text-transform: none;
    letter-spacing: 0;
    color: var(--w-text-secondary);
}

/* O seletor perde a moldura e ganha o desenho ao passar o mouse: em repouso
   parece um valor, ao interagir mostra que é editável. */
.sp-props .sp-controle select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border-color: transparent;
    background: transparent;
    text-align: right;
    text-align-last: right;
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.sp-props .sp-controle select:hover {
    border-color: var(--w-border);
    background: var(--w-surface-sunken);
}

.sp-props .sp-controle--sla,
.sp-props .sp-controle--travado { align-items: center; }

.sp-props .sp-travado { flex: 1; min-width: 0; }

/* ── Cabeçalho do chamado ───────────────────────────────────────────────── */
.sp-conversa .lz-topo {
    padding: var(--w-space-4, 16px) var(--w-space-5, 20px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface);
    margin-bottom: 1rem;
}

.sp-conversa .lz-topo h1 {
    font-size: var(--w-text-xl, 1.25rem);
    line-height: 1.3;
}

/* ── Conversa ───────────────────────────────────────────────────────────── */
.sp-thread {
    border: 1px solid var(--w-border);
    box-shadow: var(--w-shadow-sm, 0 1px 2px rgb(0 0 0 / .04));
}

.sp-mensagens {
    padding: var(--w-space-4, 16px);
    background: var(--w-surface-sunken);
    max-height: 60vh;
}

.sp-msg { max-width: 88%; }

@media (min-width: 62rem) {
    .sp-msg { max-width: 76%; }
}

.sp-responder {
    border: 0;
    border-top: 1px solid var(--w-border);
    border-radius: 0;
}

/*==============================================================================
  Equipe de atendimento
==============================================================================*/
.eq-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.eq-cartao {
    padding: var(--w-space-4, 16px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg, 14px);
    background: var(--w-surface);
}

.eq-cartao__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--w-space-3, 12px);
    padding-bottom: var(--w-space-3, 12px);
    border-bottom: 1px solid var(--w-border);
    font-size: var(--w-text-base, 1rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.eq-cartao__titulo i { color: var(--w-text-tertiary); }

.eq-conta {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--w-surface-sunken);
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs, .75rem);
}

.eq-pessoa {
    display: flex;
    align-items: center;
    gap: var(--w-space-3, 12px);
    padding: var(--w-space-3, 12px) 0;
    border-bottom: 1px solid var(--w-border-subtle, var(--w-border));
}

.eq-pessoa:last-child { border-bottom: 0; }
.eq-pessoa[hidden] { display: none; }

.eq-avatar {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--w-accent) 14%, transparent);
    color: var(--w-accent);
    font-weight: var(--w-weight-bold, 700);
    text-transform: uppercase;
}

.eq-pessoa__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.eq-pessoa__texto strong {
    font-size: var(--w-text-sm, .875rem);
    color: var(--w-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eq-pessoa__texto small {
    font-size: var(--w-text-xs, .75rem);
    color: var(--w-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eq-pessoa__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: none;
}

.eq-pessoa__meta small { font-size: var(--w-text-2xs, .6875rem); color: var(--w-text-tertiary); }

.eq-acao {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface);
    color: var(--w-accent);
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-medium, 500);
    cursor: pointer;
}

.eq-acao:hover { border-color: var(--w-accent); background: color-mix(in srgb, var(--w-accent) 10%, transparent); }

.eq-acao--sair { color: var(--w-danger); }
.eq-acao--sair:hover { border-color: var(--w-danger); background: color-mix(in srgb, var(--w-danger) 10%, transparent); }

.eq-busca {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 var(--w-space-3, 12px);
    margin-bottom: var(--w-space-2, 8px);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-md, 10px);
    background: var(--w-surface-sunken);
    color: var(--w-text-tertiary);
}

.eq-busca:focus-within { border-color: var(--w-accent); }

.eq-busca input {
    flex: 1;
    padding: 9px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--w-text-primary);
    font-size: 16px;
}

@media (min-width: 48rem) {
    .eq-busca input { font-size: var(--w-text-sm, .875rem); }
}

.eq-lista { max-height: 26rem; overflow-y: auto; }

.eq-vazio {
    margin: var(--w-space-3, 12px) 0 0;
    color: var(--w-text-secondary);
    font-size: var(--w-text-sm, .875rem);
}

/*==============================================================================
  Conversa em destaque

  A lista de balões começava direto, sem nada dizendo que aquilo era a conversa.
  Agora tem cabeçalho com a situação ao lado, fundo próprio e balões com a cor
  da marca de um lado e a superfície neutra do outro — quem falou se reconhece
  antes de ler.
==============================================================================*/
.sp-thread__topo {
    display: flex;
    align-items: center;
    gap: var(--w-space-3, 12px);
    padding: var(--w-space-3, 12px) var(--w-space-4, 16px);
    border-bottom: 1px solid var(--w-border);
    background: var(--w-surface);
}

.sp-thread__icone {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--w-radius-md, 10px);
    background: color-mix(in srgb, var(--w-accent) 14%, transparent);
    color: var(--w-accent);
}

.sp-thread__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sp-thread__texto strong {
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    color: var(--w-text-primary);
}

.sp-thread__texto small { font-size: var(--w-text-xs, .75rem); color: var(--w-text-secondary); }

/* A situação fica junto da conversa, e não só no painel lateral: é o dado que
   muda o sentido do que se está lendo. */
.sp-thread__estado {
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--w-surface-sunken);
    border: 1px solid var(--w-border);
    color: var(--w-text-secondary);
    font-size: var(--w-text-xs, .75rem);
    font-weight: var(--w-weight-semibold, 600);
}

.sp-thread__estado[data-sp-status="resolvido"],
.sp-thread__estado[data-sp-status="fechado"] {
    background: color-mix(in srgb, var(--w-success, #059669) 14%, transparent);
    border-color: color-mix(in srgb, var(--w-success, #059669) 34%, transparent);
    color: var(--w-success, #059669);
}

.sp-thread__estado[data-sp-status="aguardando_usuario"],
.sp-thread__estado[data-sp-status="aguardando_validacao"] {
    background: color-mix(in srgb, var(--w-warning, #d97706) 16%, transparent);
    border-color: color-mix(in srgb, var(--w-warning, #d97706) 36%, transparent);
    color: var(--w-warning, #d97706);
}

.sp-thread__estado[data-sp-status="novo"],
.sp-thread__estado[data-sp-status="aguardando_suporte"] {
    background: color-mix(in srgb, var(--w-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--w-accent) 34%, transparent);
    color: var(--w-accent);
}

/* Balão do suporte na cor da marca, cheia: é o lado que representa o produto
   falando. O do cliente fica na superfície neutra, com borda. */
.sp-msg--suporte {
    background: var(--w-accent);
    border-color: transparent;
    color: var(--w-accent-contrast, #fff);
}

.sp-msg--suporte p,
.sp-msg--suporte header strong { color: var(--w-accent-contrast, #fff); }

.sp-msg--suporte header time { color: color-mix(in srgb, var(--w-accent-contrast, #fff) 72%, transparent); }

.sp-msg--suporte::before { display: none; }

/* Ponta do balão apontando para quem falou. */
.sp-msg--suporte::after,
.sp-msg--cliente::after {
    content: "";
    position: absolute;
    bottom: 10px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

.sp-msg--suporte::after {
    right: -5px;
    background: var(--w-accent);
}

.sp-msg--cliente::after {
    left: -5px;
    background: var(--w-surface);
    border-left: 1px solid var(--w-border);
    border-bottom: 1px solid var(--w-border);
}

.sp-msg--cliente::before { display: none; }

.sp-msg--nota::after { display: none; }

.sp-msg--suporte .sp-anexos a { color: var(--w-accent-contrast, #fff); text-decoration: underline; }

/* ==========================================================================
   Central de Ajuda
   --------------------------------------------------------------------------
   Uma lista de assuntos, agrupada pelo caminho do menu. Cada linha diz onde a
   tela fica antes de dizer o que fazer nela: quem procura ajuda quase sempre
   está perdido no menu, não na tela.
   ========================================================================== */

.ajuda-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--w-space-3);
    margin-bottom: var(--w-space-4);
}

.ajuda-topo h1 {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    color: var(--w-text-primary);
}

.ajuda-topo p {
    margin: 0;
    color: var(--w-text-secondary);
}

.ajuda-contagem {
    padding: .35rem .8rem;
    border-radius: var(--w-radius-full);
    background: var(--w-surface-sunken);
    border: 1px solid var(--w-border);
    color: var(--w-text-secondary);
    font-size: .85rem;
    white-space: nowrap;
}

.ajuda-busca {
    position: relative;
    margin-bottom: var(--w-space-5);
}

.ajuda-busca i {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--w-text-tertiary);
    pointer-events: none;
}

.ajuda-busca input {
    width: 100%;
    padding: .8rem 1rem .8rem 2.5rem;
    border-radius: var(--w-radius-lg);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-primary);
    font-size: 1rem;
}

.ajuda-busca input:focus {
    outline: none;
    border-color: var(--w-accent);
    box-shadow: var(--w-shadow-focus);
}

.ajuda-vazio {
    text-align: center;
    color: var(--w-text-secondary);
    padding: var(--w-space-5) 0;
}

.ajuda-grupo {
    margin-bottom: var(--w-space-5);
}

.ajuda-grupo__topo h2 {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
    color: var(--w-text-primary);
}

.ajuda-grupo__topo p {
    margin: 0 0 var(--w-space-3);
    font-size: .9rem;
    color: var(--w-text-secondary);
}

.ajuda-item {
    background: var(--w-surface);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-lg);
    margin-bottom: .6rem;
    overflow: hidden;
}

.ajuda-item.is-aberto {
    border-color: var(--w-accent);
    box-shadow: var(--w-shadow-sm);
}

.ajuda-item__cabeca {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    width: 100%;
    padding: .9rem 1rem;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--w-text-primary);
}

.ajuda-item__cabeca:hover {
    background: var(--w-surface-hover);
}

.ajuda-item__icone {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
    color: var(--w-accent);
}

.ajuda-item__titulo {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.ajuda-item__titulo strong {
    font-weight: 600;
    font-size: .98rem;
}

.ajuda-item__titulo small {
    color: var(--w-text-tertiary);
    font-size: .8rem;
}

.ajuda-item__selo {
    flex: 0 0 auto;
    font-size: .75rem;
    padding: .2rem .55rem;
    border-radius: var(--w-radius-full);
    background: var(--w-surface-sunken);
    color: var(--w-text-secondary);
    border: 1px solid var(--w-border);
}

.ajuda-item__seta {
    flex: 0 0 auto;
    color: var(--w-text-tertiary);
    transition: transform var(--w-duration-fast, .15s) ease;
}

.ajuda-item.is-aberto .ajuda-item__seta {
    transform: rotate(180deg);
}

.ajuda-item__corpo {
    padding: 0 1rem 1rem 4.35rem;
}

@media (max-width: 640px) {
    .ajuda-item__corpo {
        padding-left: 1rem;
    }
}

.ajuda-passos {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--w-text-secondary);
}

.ajuda-passos li {
    margin-bottom: .5rem;
    line-height: 1.6;
}

.ajuda-passos strong {
    color: var(--w-text-primary);
}

.ajuda-dicas {
    margin-top: var(--w-space-3);
    padding: .8rem 1rem;
    border-radius: var(--w-radius-md);
    background: var(--w-surface-sunken);
    border-left: 3px solid var(--w-accent);
}

.ajuda-dicas strong {
    display: block;
    margin-bottom: .4rem;
    font-size: .9rem;
    color: var(--w-text-primary);
}

.ajuda-dicas ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--w-text-secondary);
    font-size: .9rem;
}

.ajuda-dicas li {
    margin-bottom: .3rem;
}

.ajuda-video {
    position: relative;
    margin-top: var(--w-space-3);
    padding-top: 56.25%;
    border-radius: var(--w-radius-md);
    overflow: hidden;
    background: var(--w-surface-sunken);
}

.ajuda-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ajuda-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--w-space-3);
    padding: var(--w-space-4);
    border-radius: var(--w-radius-lg);
    background: var(--w-surface-sunken);
    border: 1px solid var(--w-border);
}

.ajuda-rodape strong {
    display: block;
    color: var(--w-text-primary);
}

.ajuda-rodape span {
    color: var(--w-text-secondary);
    font-size: .9rem;
}