/* Mesa de atendimento: trilho escuro, lista, conversa e Acessórias lado a lado. Claro de ler o dia inteiro. */
@font-face { font-family: "Plex Sans"; src: url(/estatico/plex-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/estatico/plex-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/estatico/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --fundo: #f2f5f3; --painel: #fff; --painel-2: #f6f8f7; --linha: #e2e8e5; --linha-forte: #c9d3ce;
  --tinta: #14211d; --suave: #566660; --marca: #0b6e5f; --marca-forte: #085a4e; --marca-texto: #fff; --marca-clara: #e2f3ee;
  --trilho: #0c2b26; --trilho-texto: #b7ccc5; --trilho-ativo: #1a4a41;
  --ambar: #92500a; --ambar-fundo: #fdf0d9; --perigo: #b42318; --perigo-fundo: #fbe8e6; --azul: #1b5f9e; --azul-fundo: #e5f0fa; --neutro: #4a5a54; --neutro-fundo: #e9eeeb;
  --mural: #ece8df; --mural-ponto: #e0dbcf; --balao-dela: #fff; --balao-nosso: #d8f5d0; --nota-fundo: #fff4cf; --nota-linha: #e7cf83;
  --sombra: 0 1px 2px rgb(16 40 34 / .06), 0 6px 20px rgb(16 40 34 / .08); --sombra-forte: 0 12px 36px rgb(16 40 34 / .22);
  --sans: "Plex Sans", system-ui, sans-serif; --mono: "Plex Mono", ui-monospace, monospace;
  --raio: 10px; --alvo: 38px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0e1513; --painel: #162019; --painel-2: #1b2722; --linha: #27342f; --linha-forte: #3a4a44;
    --tinta: #e8efec; --suave: #a0b2ab; --marca: #3bbf9f; --marca-forte: #5ad0b3; --marca-texto: #06201a; --marca-clara: #173a31;
    --trilho: #0a1311; --trilho-texto: #9db3ab; --trilho-ativo: #1a332c;
    --ambar: #f0b566; --ambar-fundo: #3a2a12; --perigo: #f4857a; --perigo-fundo: #3d1c18; --azul: #84bdf0; --azul-fundo: #182c40; --neutro: #b5c4be; --neutro-fundo: #25322d;
    --mural: #0f1714; --mural-ponto: #18221e; --balao-dela: #1c2925; --balao-nosso: #11473a; --nota-fundo: #3a3214; --nota-linha: #6b5c22;
    --sombra: 0 1px 2px rgb(0 0 0 / .4), 0 6px 20px rgb(0 0 0 / .35); --sombra-forte: 0 12px 36px rgb(0 0 0 / .6);
  }
}
@media (pointer: coarse) { :root { --alvo: 44px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--fundo); color: var(--tinta); font: 400 14.5px/1.45 var(--sans); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 0; }
h1 { font-size: 1.5rem; margin-bottom: 4px; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 28px 0 10px; }
a { color: var(--marca); text-underline-offset: 2px; }
p { margin: 0; }
.sub { color: var(--suave); margin-bottom: 16px; }
.vazio { padding: 32px 16px; color: var(--suave); text-align: center; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
small { display: block; color: var(--suave); font-weight: 400; font-size: .85rem; overflow-wrap: anywhere; }
/* O atributo hidden sempre vence: display:flex de uma classe não pode mostrar o que está escondido. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.icone { width: 20px; height: 20px; flex: none; }
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 1px 2px rgb(16 40 34 / .04); }

/* estrutura */
.com-menu { display: grid; grid-template-columns: 84px minmax(0, 1fr); height: 100dvh; overflow: hidden; }
.area { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100dvh; }
main { flex: 1; min-height: 0; overflow-y: auto; width: 100%; padding: 28px max(16px, calc((100% - 960px) / 2)) 64px; }
.tela-caixa main { padding: 0; overflow: hidden; }
main > .formulario, main > .linha-setor { padding: 18px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); }

/* trilho */
.trilho { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 8px; background: var(--trilho); color: var(--trilho-texto); z-index: 30; min-height: 0; }
.marca { display: grid; place-items: center; height: 48px; margin: 0 0 10px; }
/* O arquivo é escuro e sem fundo: aqui fica branco, para aparecer no trilho. */
.marca img { width: 44px; height: 44px; filter: brightness(0) invert(1); }
.trilho nav { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.trilho nav > a, .menu-admin > summary, .botao-trilho {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 58px; padding: 8px 2px;
  background: none; border: 0; border-radius: 9px; color: inherit; font: 400 .69rem/1.15 var(--sans); text-align: center; text-decoration: none; cursor: pointer; list-style: none; transition: background .12s, color .12s;
}
.menu-admin > summary::-webkit-details-marker { display: none; }
.trilho nav > a:hover, .menu-admin > summary:hover, .botao-trilho:hover { background: rgb(255 255 255 / .07); color: #fff; }
.trilho nav > a[aria-current], .menu-admin[data-atual] > summary, .menu-admin[open] > summary { background: var(--trilho-ativo); color: #fff; font-weight: 600; }
.trilho .icone { width: 22px; height: 22px; }
.menu-admin { position: relative; }
.menu-admin > div { position: absolute; z-index: 40; top: 0; left: calc(100% + 10px); min-width: 190px; display: grid; padding: 6px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-forte); }
.menu-admin > div a { padding: 9px 12px; border-radius: 7px; color: var(--tinta); text-decoration: none; }
.menu-admin > div a:hover { background: var(--painel-2); }
.menu-admin > div a[aria-current] { background: var(--marca-clara); color: var(--marca-forte); font-weight: 600; }
.sair { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quem { display: block; }
.botao-trilho.botao-trilho { min-height: 50px; }

/* avatar */
.avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; font-weight: 600; font-size: .86rem; letter-spacing: .02em; }
.avatar .icone { width: 22px; height: 22px; }
.avatar.pequeno { width: 32px; height: 32px; font-size: .72rem; }
.cor-0 { background: #d6ecff; color: #114a7c; } .cor-1 { background: #dcf3e2; color: #17603a; } .cor-2 { background: #ffe6cf; color: #854400; }
.cor-3 { background: #ece3fb; color: #503091; } .cor-4 { background: #fbe0e6; color: #8d2341; } .cor-5 { background: #d9f1f1; color: #0f5b60; }
@media (prefers-color-scheme: dark) {
  .cor-0 { background: #17324a; color: #a8d4fb; } .cor-1 { background: #173a25; color: #a7e6bd; } .cor-2 { background: #40290f; color: #f6c78f; }
  .cor-3 { background: #2c2147; color: #cdb8f6; } .cor-4 { background: #431b27; color: #f5b1c2; } .cor-5 { background: #143537; color: #a3e3e3; }
}

/* controles */
button, .botao-link { min-height: var(--alvo); padding: 0 14px; border: 1px solid var(--marca); border-radius: 8px; background: var(--marca); color: var(--marca-texto); font: 600 .9rem var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
button:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
button:disabled { opacity: .5; cursor: default; }
button.discreto, .botao-link { background: var(--painel); border-color: var(--linha-forte); color: var(--tinta); font-weight: 400; }
button.discreto:hover, .botao-link:hover { background: var(--painel-2); border-color: var(--suave); }
.icone-botao { display: inline-grid; place-items: center; width: var(--alvo); height: var(--alvo); min-height: 0; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--suave); cursor: pointer; flex: none; }
.icone-botao:hover { background: var(--painel-2); border: 0; color: var(--tinta); }
input:not([type=checkbox], [type=radio]), select, textarea { width: 100%; min-height: var(--alvo); padding: 7px 10px; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--painel); color: var(--tinta); font: inherit; }
textarea { resize: vertical; display: block; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--marca); flex: none; }
label { display: block; font-weight: 600; font-size: .86rem; }
label > input:not([type=checkbox], [type=radio]), label > select, label > textarea { margin-top: 4px; font-weight: 400; font-size: .95rem; }
label.marcar { display: flex; align-items: center; gap: 9px; font-weight: 400; font-size: .92rem; }
label.marcar input { margin: 0; }
.formulario { display: grid; gap: 14px; max-width: 560px; }
.formulario > button { justify-self: start; }
form.cartao { padding: 18px; }
.dois-campos { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 10px; }

/* selo e carimbo */
.selo { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--perigo); color: #fff; font-size: .7rem; font-weight: 600; }
@media (prefers-color-scheme: dark) { .selo { color: #1c0b09; } }
.carimbo { display: inline-block; flex: none; padding: 1px 8px; border-radius: 20px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.carimbo.alerta { background: var(--ambar-fundo); color: var(--ambar); }
.carimbo.urgente { background: var(--perigo-fundo); color: var(--perigo); }
.carimbo.ativo { background: var(--marca-clara); color: var(--marca-forte); }
.carimbo.azul { background: var(--azul-fundo); color: var(--azul); }
.carimbo.neutro { background: var(--neutro-fundo); color: var(--neutro); }
.carimbo.apagado { background: var(--neutro-fundo); color: var(--suave); font-weight: 400; }
.etiqueta { color: var(--suave); font-size: .79rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiqueta b { color: var(--marca-forte); }

/* avisos */
.aviso { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: var(--neutro-fundo); font-size: .9rem; }
.aviso.erro { background: var(--perigo-fundo); color: var(--perigo); font-weight: 600; }
.aviso.ok { background: var(--marca-clara); color: var(--marca-forte); }
.alertas { flex: none; padding: 8px 16px; background: var(--perigo); color: #fff; font-weight: 600; font-size: .9rem; }
@media (prefers-color-scheme: dark) { .alertas { color: #1c0b09; } }
.alertas p { margin: 2px 0; }
.link-convite { margin-bottom: 20px; padding: 16px; border-radius: var(--raio); border: 1px solid var(--marca); background: var(--marca-clara); }
.link-convite h2 { margin: 0 0 6px; }
.link-convite p { margin-bottom: 10px; }
.link-convite input { font: 400 .85rem var(--mono); }
.nota { color: var(--suave); font-size: .85rem; }

/* entrada */
.sem-menu { background: radial-gradient(1000px 500px at 85% -10%, #15564a, transparent), var(--trilho); }
.sem-menu main { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }
.folha-entrada { width: 100%; max-width: 400px; padding: 32px 28px; background: var(--painel); border-radius: 16px; box-shadow: var(--sombra-forte); }
.folha-entrada form { display: grid; gap: 14px; margin-top: 18px; }
.folha-entrada button { min-height: 44px; font-size: 1rem; }
.folha-entrada input { min-height: 44px; }
.folha-entrada h1 { margin-bottom: 8px; }
.marca-grande { margin: 0 0 26px; display: grid; justify-items: center; gap: 10px; color: var(--suave); font-weight: 600; }
.logo-ntw { display: block; max-width: 100%; height: auto; }
/* A logo é escura e sem fundo: no tema escuro, fica branca. */
@media (prefers-color-scheme: dark) { .logo-ntw { filter: brightness(0) invert(1); } }
.lista-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo-celular { display: none; }
.folha-entrada .nota { margin-top: 16px; }

/* lista de atendimentos */
.lista-atend { list-style: none; margin: 0; padding: 0; }
.lista-atend li + li { border-top: 1px solid var(--linha); }
.lista-atend a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 1px 11px; padding: 11px 14px; color: inherit; text-decoration: none; position: relative; }
.lista-atend a:hover { background: var(--painel-2); }
.lista-atend a[aria-current] { background: var(--marca-clara); }
.lista-atend a[aria-current] .carimbo.ativo { background: var(--painel); }
.lista-atend a[aria-current]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--marca); }
.lista-atend .avatar { grid-row: 1 / span 3; align-self: start; margin-top: 2px; }
.linha-1 { grid-column: 2; min-width: 0; }
.linha-1 strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-atend time { grid-column: 3; grid-row: 1; color: var(--suave); font-size: .76rem; white-space: nowrap; align-self: center; }
.lista-atend .previa { grid-column: 2 / -1; color: var(--suave); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-atend .espera .previa { color: var(--tinta); }
.linha-2 { grid-column: 2 / -1; display: flex; align-items: center; gap: 7px; margin-top: 4px; min-width: 0; }
.lista-busca { margin-top: 16px; overflow: hidden; }

/* tabela e cadastros */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela thead th { border-top: 0; color: var(--suave); font-size: .78rem; font-weight: 600; background: var(--painel-2); }
.tabela tbody th { font-weight: 600; }
.tabela tr.inativo { color: var(--suave); }
.setores { margin: 0; padding: 0; border: 0; }
.setores legend { padding: 0 0 6px; font-weight: 600; font-size: .86rem; }
.setores table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--painel); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.setores th, .setores td { padding: 8px 12px; border-top: 1px solid var(--linha); text-align: left; font-size: .9rem; }
.setores thead th { border-top: 0; color: var(--suave); font-weight: 400; font-size: .8rem; }
.setores tbody th { font-weight: 400; }
.lista-setores { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-setores > li { padding: 16px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); }
.linha-setor { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.linha-setor > button { justify-self: end; min-width: 96px; }
form[role=search].linha-setor { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
.titulo-linha { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.voltar { margin: 0 0 12px; }
.voltar a { display: inline-block; padding: 6px 0; }
.voltar a::before { content: "← "; }

/* caixa */
.caixa { display: grid; grid-template-columns: 380px minmax(0, 1fr); height: 100%; }
.coluna-lista { display: flex; flex-direction: column; min-height: 0; background: var(--painel); border-right: 1px solid var(--linha); }
.lista-topo { flex: none; padding: 14px 14px 0; border-bottom: 1px solid var(--linha); }
.lista-topo h1 { font-size: 1.15rem; margin-bottom: 0; }
.lista-titulo { margin-bottom: 10px; }
#lista { flex: 1; min-height: 0; overflow-y: auto; }
.lista-busca-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; margin-bottom: 10px; position: relative; }
.busca-rapida { position: relative; }
.busca-rapida .icone { position: absolute; top: 50%; left: 10px; width: 17px; height: 17px; transform: translateY(-50%); color: var(--suave); pointer-events: none; }
.busca-rapida input { padding-left: 34px; background: var(--painel-2); border-color: transparent; }
.dobra-filtros > summary { display: grid; place-items: center; width: var(--alvo); height: var(--alvo); position: relative; border-radius: 8px; background: var(--painel-2); color: var(--suave); cursor: pointer; list-style: none; }
.dobra-filtros > summary::-webkit-details-marker { display: none; }
.dobra-filtros > summary:hover, .dobra-filtros[open] > summary { color: var(--tinta); background: var(--neutro-fundo); }
.dobra-filtros .selo { position: absolute; top: -4px; right: -4px; background: var(--marca); color: var(--marca-texto); }
.filtros { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.filtros .marcar { grid-column: 1 / -1; }
.abas { display: flex; gap: 2px; }
.abas a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 2px; color: var(--suave); font-size: .86rem; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.abas a span { font-size: .76rem; }
.abas a:hover { color: var(--tinta); }
.abas a[aria-current], .abas a.no-grupo { color: var(--marca-forte); font-weight: 600; border-bottom-color: var(--marca); }
.recortes { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 0; }
.recortes a { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 7px; border-radius: 20px; background: var(--painel-2); color: var(--suave); font-size: .76rem; text-decoration: none; white-space: nowrap; }
.recortes a span { font-weight: 600; }
.recortes a:hover { color: var(--tinta); background: var(--neutro-fundo); }
.recortes a.zerado span { font-weight: 400; }
.recortes a.pede-atencao { background: var(--ambar-fundo); color: var(--ambar); }
.recortes a[aria-current] { background: var(--marca); color: var(--marca-texto); }
@media (pointer: coarse) { .recortes a { min-height: 36px; } }

.coluna-conversa { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-width: 0; min-height: 0; overflow: hidden; background: var(--mural); }
.coluna-conversa:has(> .sem-escolha) { display: grid; grid-template-columns: 1fr; }
.sem-escolha { display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--suave); text-align: center; padding: 24px; }
.sem-escolha .logo-ntw { opacity: .8; margin-bottom: 8px; }
.miolo { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }

/* cabeçalho da conversa */
/* O nome do cliente tem a primeira linha só para ele. Selos e dados ficam abaixo, e os botões ao lado. Em conversa estreita, os botões descem. */
.miolo { container: miolo / inline-size; }
.cabeca-conversa { flex: none; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto auto; grid-template-areas: "volta foto nome nome acoes lado" "volta foto selos dados acoes lado"; align-items: center; padding: 9px 14px; min-height: 60px; background: var(--painel); border-bottom: 1px solid var(--linha); position: relative; z-index: 5; }
.cabeca-conversa > .avatar { grid-area: foto; margin-right: 11px; }
.quem-e, .barra-acoes { display: contents; }
.quem-e h2 { grid-area: nome; margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem-e .sub { grid-area: dados; margin: 0; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marcas { grid-area: selos; display: flex; gap: 5px; margin: 2px 8px 0 0; }
.voltar-lista { grid-area: volta; display: none; margin: 0 2px 0 -6px; }
.painel-acoes { grid-area: acoes; display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.botao-lateral { grid-area: lado; display: none; margin-left: 6px; position: relative; }
.botao-lateral .selo { background: var(--ambar); }
@container miolo (max-width: 540px) {
  .cabeca-conversa { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "volta foto nome lado" "volta foto dados lado" "barra barra barra barra"; padding: 7px 10px; }
  .barra-acoes { grid-area: barra; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-top: 7px; min-width: 0; }
  .marcas { margin: 0; min-width: 0; flex-wrap: wrap; }
  .painel-acoes { margin-left: auto; flex: none; }
}
.menu-mais { position: relative; }
.menu-mais > summary { display: grid; place-items: center; width: var(--alvo); height: var(--alvo); border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--painel); color: var(--tinta); cursor: pointer; list-style: none; }
.menu-mais > summary::-webkit-details-marker { display: none; }
.menu-mais > summary:hover, .menu-mais[open] > summary { background: var(--painel-2); }
.menu-mais > div { position: absolute; z-index: 25; top: calc(100% + 6px); right: 0; min-width: 210px; padding: 6px; display: grid; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-forte); }
button.item-menu { width: 100%; justify-content: flex-start; background: none; border: 0; color: var(--tinta); font-weight: 400; }
button.item-menu:hover { background: var(--painel-2); border: 0; }

/* janelas */
dialog.modal { width: min(460px, calc(100vw - 32px)); padding: 22px; border: 0; border-radius: 14px; background: var(--painel); color: var(--tinta); box-shadow: var(--sombra-forte); }
dialog.modal::backdrop { background: rgb(8 22 18 / .5); }
dialog.modal h3 { font-size: 1.1rem; }
.modal-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 16px; background: rgba(8, 12, 10, .94); }
#visor::backdrop { background: rgba(8, 12, 10, .94); }
#visor[open] { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
#visor img { width: 100%; flex: 1; min-height: 0; object-fit: contain; }

/* mensagens */
.conversa { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; list-style: none; margin: 0; padding: 16px clamp(12px, 3vw, 36px); display: flex; flex-direction: column; gap: 5px; background: var(--mural) radial-gradient(var(--mural-ponto) 1px, transparent 1.4px) 0 0 / 18px 18px; }
.miolo > .vazio { flex: none; background: var(--mural); }
.conversa > li { position: relative; }
.conversa > li.dela, .conversa > li.nossa { max-width: min(78%, 560px); padding: 6px 10px 5px; border-radius: 10px; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgb(16 40 34 / .1); }
.conversa > li.dela { align-self: flex-start; background: var(--balao-dela); border-top-left-radius: 3px; }
.conversa > li.nossa { align-self: flex-end; background: var(--balao-nosso); border-top-right-radius: 3px; }
.conversa > li.reacao { padding: 2px 10px; background: transparent; box-shadow: none; color: var(--suave); font-size: .85rem; }
.conversa > li.nossa.reacao .quem-falou { display: none; }
.conversa > li.reacao .hora { display: inline; float: none; margin-left: 6px; }
.conversa > li.reacao .texto { display: inline; }
.conversa li.apagada .texto { color: var(--suave); text-decoration: line-through; }
.quem-falou { margin-bottom: 2px; color: var(--marca-forte); font-size: .78rem; font-weight: 600; }
.texto { white-space: pre-wrap; display: inline; }
.hora { display: block; float: right; margin: 4px 0 -1px 12px; color: var(--suave); font-size: .69rem; line-height: 1.4; }
.tipo, .marca-msg, .arquivo-aviso { color: var(--suave); font-size: .84rem; font-style: italic; }
.marca-msg { color: var(--ambar); font-size: .78rem; clear: both; }
.dia { align-self: center; margin: 10px 0 6px; }
.dia span { display: block; padding: 3px 12px; border-radius: 20px; background: var(--painel); color: var(--suave); font-size: .74rem; font-weight: 600; box-shadow: 0 1px 1px rgb(16 40 34 / .08); }
.evento { align-self: center; max-width: 92%; padding: 1px 8px; color: var(--suave); font-size: .77rem; text-align: center; }
.nota-interna { align-self: center; width: min(82%, 520px); padding: 7px 11px 5px; border-radius: 8px; background: var(--nota-fundo); border: 1px solid var(--nota-linha); }
.nota-interna .quem-falou { color: var(--ambar); }

/* ações da mensagem: aparecem ao passar o mouse */
.acoes-msg { position: absolute; top: 2px; display: none; gap: 2px; padding: 2px; background: var(--painel); border-radius: 8px; box-shadow: var(--sombra); z-index: 3; }
li.dela > .acoes-msg { left: calc(100% + 4px); }
li.nossa > .acoes-msg { right: calc(100% + 4px); }
.acoes-msg button { width: 28px; height: 28px; min-height: 0; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--suave); }
.acoes-msg button:hover { background: var(--painel-2); border: 0; color: var(--tinta); }
.acoes-msg .icone { width: 16px; height: 16px; }
/* Sempre alcançáveis pelo teclado. A ponte invisível cobre o vão entre o balão e os botões, para o mouse não os perder. */
.pode-responder > li > .acoes-msg { display: flex; opacity: 0; pointer-events: none; }
.pode-responder > li:hover > .acoes-msg, .pode-responder > li:focus-within > .acoes-msg { opacity: 1; pointer-events: auto; }
.acoes-msg::before { content: ""; position: absolute; top: 0; bottom: 0; width: 8px; }
li.dela > .acoes-msg::before { left: -8px; }
li.nossa > .acoes-msg::before { right: -8px; }
@media (hover: none) { .pode-responder > li.dela > .acoes-msg { opacity: 1; pointer-events: auto; position: static; background: none; box-shadow: none; clear: both; } .pode-responder > li.nossa > .acoes-msg { display: none; } }
.seletor-reacao { position: absolute; top: calc(100% + 2px); left: 0; z-index: 6; display: flex; gap: 2px; padding: 4px; background: var(--painel); border-radius: 20px; box-shadow: var(--sombra-forte); }
.seletor-reacao button { width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; background: none; border-radius: 50%; font-size: 1.15rem; }
.seletor-reacao button:hover { background: var(--painel-2); border: 0; }

/* arquivos */
.arquivo-cartao { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: rgb(16 40 34 / .05); }
.arquivo-cartao .icone { width: 26px; height: 26px; color: var(--marca); }
.arquivo-nome { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.acoes { display: flex; gap: 12px; margin-top: 5px; }
.link-acao { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--marca-forte); font-size: .82rem; text-decoration: none; font-weight: 600; }
.link-acao:hover { text-decoration: underline; }
.link-acao .icone { width: 15px; height: 15px; }
@media (pointer: coarse) { .link-acao { min-height: 40px; } }
audio, video { display: block; width: 100%; min-width: min(280px, 58vw); margin-top: 2px; }
audio { height: 42px; }
.ampliar, .ampliar:hover { display: block; width: 100%; min-height: 0; padding: 0; border: 0; background: none; border-radius: 7px; overflow: hidden; cursor: zoom-in; max-width: 320px; }
.ampliar img { display: block; width: 100%; max-height: 320px; object-fit: contain; }
.velocidades { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.velocidades button { min-height: 26px; padding: 0 8px; border: 0; border-radius: 13px; background: rgb(16 40 34 / .07); color: var(--tinta); font-weight: 400; font-size: .76rem; }
.velocidades button:hover { background: rgb(16 40 34 / .14); border: 0; }
.velocidades button[aria-pressed="true"] { background: var(--marca); color: var(--marca-texto); font-weight: 600; }
.velocidades .link-acao { margin-left: auto; }
@media (pointer: coarse) { .velocidades button { min-height: 38px; padding: 0 12px; } }
@media (prefers-color-scheme: dark) { .velocidades button, .arquivo-cartao { background: rgb(255 255 255 / .09); } }

/* rodapé: responder ou nota */
.rodape { flex: none; padding: 0 12px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--painel); border-top: 1px solid var(--linha); position: relative; z-index: 4; }
.rodape > .aviso { margin: 10px 0 6px; }
.rodape-abas { display: flex; align-items: center; gap: 2px; padding-top: 2px; }
.rodape-abas button { min-height: 34px; padding: 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--suave); font-weight: 400; font-size: .84rem; }
.rodape-abas button:hover { background: none; border: 0; border-bottom: 2px solid var(--linha-forte); color: var(--tinta); }
.rodape-abas button[aria-pressed="true"] { color: var(--marca-forte); font-weight: 600; border-bottom-color: var(--marca); }
.rodape-abas button[data-rodape="nota"][aria-pressed="true"] { color: var(--ambar); border-bottom-color: var(--ambar); }
.situacao-dono { margin-left: auto; color: var(--suave); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compositor { position: relative; display: grid; gap: 4px; padding-top: 8px; }
.compositor textarea { min-height: 42px; max-height: 160px; resize: none; background: var(--painel-2); border-color: transparent; border-radius: 10px; }
.linha-envio { display: flex; align-items: center; gap: 2px; min-width: 0; }
.anexo { cursor: pointer; }
.enviar { margin-left: auto; }
.enviar .icone { width: 16px; height: 16px; }
[data-gravar] .gravando { display: none; }
[data-gravar][aria-pressed="true"] { background: var(--perigo); color: #fff; animation: pisca 1.2s infinite; }
[data-gravar][aria-pressed="true"] .gravando { display: block; }
[data-gravar][aria-pressed="true"] .ao-parado { display: none; }
@keyframes pisca { 50% { opacity: .65; } }
.citando { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; border-left: 3px solid var(--marca); border-radius: 4px; background: var(--painel-2); color: var(--suave); font-size: .84rem; }
.citando span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citando button { min-height: 30px; }
.estado-envio { margin-left: 8px; color: var(--perigo); font-size: .84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rapidas-lista { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: 280px; overflow-y: auto; padding: 8px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-forte); }
.rapidas-lista .nota { padding: 0 6px 4px; font-size: .76rem; }
.rapidas-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.rapidas-lista button { display: block; width: 100%; padding: 7px 8px; min-height: 0; text-align: left; white-space: normal; background: none; border: 0; color: var(--tinta); font-weight: 400; }
.rapidas-lista button:hover, .rapidas-lista button.marcada { background: var(--marca-clara); border: 0; }
.rapidas-lista b { font-weight: 600; font-size: .88rem; display: block; }
.rapidas-lista small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.form-nota { display: grid; gap: 8px; padding-top: 8px; }
.form-nota label { font-weight: 400; font-size: .8rem; color: var(--ambar); }
.form-nota textarea { background: var(--nota-fundo); border-color: var(--nota-linha); color: var(--tinta); }
.botao-nota { justify-self: end; background: var(--ambar); border-color: var(--ambar); color: #fff; }
.botao-nota:hover { background: var(--ambar); border-color: var(--ambar); filter: brightness(1.1); }
@media (prefers-color-scheme: dark) { .botao-nota { color: #241703; } }
.dobra-nota > summary { min-height: 32px; display: flex; align-items: center; color: var(--suave); font-size: .84rem; cursor: pointer; }

/* Acessórias */
.lateral { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--painel); border-left: 1px solid var(--linha); }
.lateral-cabeca { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 59px; padding: 8px 14px; border-bottom: 1px solid var(--linha); }
.lateral-cabeca h3 { font-size: 1rem; }
.lateral-estado { color: var(--suave); font-size: .8rem; }
.lateral-estado b { color: var(--ambar); }
.fechar-lateral { display: none; }
.lateral-miolo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: grid; gap: 14px; align-content: start; }
.lateral-miolo .aviso { margin: 0; }
.passo { display: grid; gap: 10px; }
.passo + .passo { padding-top: 14px; border-top: 1px solid var(--linha); }
.passo h4 { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.numero { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--neutro-fundo); color: var(--neutro); font-size: .76rem; font-weight: 600; }
.passo.feito .numero { background: var(--marca); color: var(--marca-texto); }
.numero .icone { width: 14px; height: 14px; stroke-width: 2.6; }
.passo .sub { margin: 0; font-size: .86rem; }
.passo .formulario { gap: 11px; }
.passo .formulario > button { justify-self: stretch; }
.empresa-vinculada { font-size: .9rem; }
.busca-empresa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: end; }
.form-ia button { width: 100%; }
.form-ia .icone { width: 16px; height: 16px; color: var(--marca); }
.pendentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pendente { padding: 12px; border: 1px solid var(--nota-linha); border-radius: var(--raio); background: var(--nota-fundo); display: grid; gap: 10px; }
.pendente.com-erro { border-color: var(--perigo); background: var(--perigo-fundo); }
.pendente h3 { font-size: .94rem; }
.pendente .aviso { margin: 0; }
.texto-previa { margin: 0; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.anexo:focus-within { outline: 2px solid var(--marca); outline-offset: 2px; }
.rodape-abas button.tem-rascunho::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--ambar); }
.lista-topo .aviso { margin: 0 0 10px; }
.bloco-token { display: grid; gap: 14px; padding: 16px; margin: 12px 0 16px; }
.bloco-token h2 { margin: 0; font-size: 1.05rem; }
.bloco-token form { margin: 0; }
.bloco-token .previa-dados { font-size: .95rem; }
/* celular deitado: o menu lateral precisa caber na altura */
@media (max-height: 460px) and (min-width: 821px) {
  .marca, .quem { display: none; }
  .trilho { padding: 6px 8px; gap: 4px; }
  .trilho nav > a, .menu-admin > summary, .botao-trilho, .botao-trilho.botao-trilho { min-height: 46px; padding: 3px 2px; }
}
.pendente .formulario > button { justify-self: end; }
.pendente .linha-envio { justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.previa-dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: .86rem; }
.previa-dados.cartao { padding: 16px; margin: 12px 0 16px; font-size: .95rem; }
.previa-dados dt { color: var(--suave); }
.previa-dados dd { margin: 0; overflow-wrap: anywhere; }
.anexos { margin: 0; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; display: grid; gap: 6px; }
.anexos legend { padding: 0 4px; font-weight: 600; font-size: .84rem; }
/* Nome de arquivo comprido quebra a linha em vez de alargar o painel. */
.anexos label, .lateral-miolo, .lateral-miolo > *, .passo, .passo .formulario > * { min-width: 0; }
.anexos label { overflow-wrap: anywhere; }
.citacao { margin: 0 0 4px; padding: 3px 8px; border-left: 3px solid var(--marca); border-radius: 4px; background: rgb(16 40 34 / .06); color: var(--suave); font-size: .82rem; overflow-wrap: anywhere; }
.aviso.limite { margin: 0; border-radius: 0; }
.limite-lista { padding: 10px 14px; }
@media (max-width: 420px) { .tabela { display: block; overflow-x: auto; } .formulario input, .formulario select, .formulario textarea { min-width: 0; max-width: 100%; } }

/* tela média: o Acessórias vira gaveta */
@media (max-width: 1240px) {
  .coluna-conversa { grid-template-columns: minmax(0, 1fr); }
  .botao-lateral { display: inline-flex; padding: 0; width: var(--alvo); }
  .botao-lateral .rotulo { display: none; }
  .botao-lateral .selo { position: absolute; top: -5px; right: -5px; }
  .lateral { position: fixed; inset: 0 0 0 auto; width: min(380px, 100vw); height: 100dvh; z-index: 35; box-shadow: var(--sombra-forte); transform: translateX(105%); visibility: hidden; transition: transform .18s ease, visibility .18s; }
  .lateral.aberta { transform: none; visibility: visible; }
  .fechar-lateral { display: inline-grid; }
}

/* celular: uma coluna de cada vez, e o menu vai para baixo */
@media (max-width: 820px) {
  body { font-size: 15px; }
  .com-menu { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .area { grid-row: 1; height: auto; min-height: 0; }
  main { padding: 18px 16px 32px; }
  .trilho { grid-row: 2; flex-direction: row; align-items: stretch; gap: 2px; padding: 4px 6px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .marca, .quem { display: none; }
  .logo-celular { display: block; flex: none; }
  .trilho nav { flex-direction: row; gap: 2px; min-width: 0; }
  .trilho nav > a, .menu-admin { flex: 1 1 0; min-width: 0; }
  .trilho nav > a, .menu-admin > summary, .botao-trilho { min-height: 54px; font-size: .66rem; }
  .sair { flex: 0 0 56px; }
  .botao-trilho.botao-trilho { min-height: 54px; }
  .menu-admin > div { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }
  .conversa-aberta .trilho { display: none; }
  .conversa-aberta.com-menu { grid-template-rows: minmax(0, 1fr); }
  .caixa { grid-template-columns: minmax(0, 1fr); }
  .caixa.com-conversa .coluna-lista { display: none; }
  .caixa.sem-conversa .coluna-conversa { display: none; }
  .voltar-lista { display: inline-grid; }
  .cabeca-conversa > .avatar { width: 36px; height: 36px; font-size: .78rem; margin-right: 9px; }

  .conversa > li.dela, .conversa > li.nossa { max-width: 88%; }
  .compositor textarea, input:not([type=checkbox], [type=radio]), select, textarea { font-size: 16px; }
  .situacao-dono { display: none; }
  .tabela th, .tabela td { padding: 9px 10px; font-size: .9rem; }
  .folha-entrada { padding: 26px 20px; }
  .lateral { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }