/* Portal do Jotinha: azul MJ, branco e grafite, o mesmo padrão das telas aprovadas. */
:root {
  --azul: #1559C9; --azul-escuro: #0F4399; --azul-suave: #E6EFFC; --azul-linha: #BCD2F4; --azul-fundo: #F5F9FF;
  --grafite: #1F262F; --grafite-2: #2A323D; --grafite-texto: #C9D1DC; --grafite-mudo: #8C97A6;
  --fundo: #F4F6FA; --cartao: #FFFFFF; --linha: #DFE5EE; --linha-forte: #C7D2E1; --texto: #18202B; --mudo: #5E6A7B; --fraco: #8A95A5;
  --ok: #1D7A4C; --ok-suave: #E3F4EA; --alerta: #94600A; --alerta-suave: #FCF1DC; --erro: #A33232; --erro-suave: #FBE7E7;
  --pido: #4B3BA8; --pido-forte: #5B4BC4; --pido-suave: #EEEBFB;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-marca: "Space Grotesk", "Inter", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 13.5px; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul-escuro); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
[hidden] { display: none !important; }
.ms { font-family: "Material Symbols Outlined"; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
  vertical-align: middle; overflow: hidden; width: 1em; flex: none; user-select: none; }
.cheio { font-variation-settings: "FILL" 1; }

/* Estrutura */
.app { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100vh; }
.lado { background: var(--grafite); color: var(--grafite-texto); display: flex; flex-direction: column; padding: 18px 14px 14px; min-height: 0; }
.marca { display: flex; align-items: center; gap: 10px; padding: 2px 6px 18px; border-bottom: 1px solid var(--grafite-2); }
.logo { width: 36px; height: 36px; border-radius: 9px; background: var(--azul); color: #fff; display: grid; place-items: center;
  font-family: var(--fonte-marca); font-weight: 600; font-size: 15px; flex: none; }
.marca b { display: block; color: #fff; font-size: 14.5px; font-weight: 600; }
.marca small { display: block; color: var(--grafite-mudo); font-size: 11.5px; }
.nav { display: grid; gap: 2px; margin-top: 16px; }
.nav button { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--grafite-texto);
  background: none; border: 0; font-size: 13.5px; text-align: left; }
.nav button:hover { background: var(--grafite-2); }
.nav button.ativo { background: var(--azul); color: #fff; font-weight: 500; }
.nav .conta { margin-left: auto; background: #fff; color: var(--azul-escuro); font-size: 11px; font-weight: 600; border-radius: 10px; padding: 1px 7px; }
.nav button:not(.ativo) .conta { background: var(--grafite-2); color: var(--grafite-texto); }
.lado-pe { margin-top: auto; display: grid; gap: 10px; }
.wa { background: var(--grafite-2); border-radius: 9px; padding: 10px 12px; font-size: 12px; border: 0; text-align: left; color: inherit; }
.wa .linha { display: flex; align-items: center; gap: 7px; color: #fff; font-weight: 500; }
.wa small { display: block; color: var(--grafite-mudo); margin-top: 3px; font-size: 11.5px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: #3CC37A; display: inline-block; flex: none; }
.ponto.alerta { background: #E0A33A; } .ponto.erro { background: #E26262; } .ponto.cinza { background: #8C97A6; }
.eu { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.eu b { display: block; color: #fff; font-size: 13px; font-weight: 500; }
.eu small { color: var(--grafite-mudo); font-size: 11.5px; }
.eu .sair { margin-left: auto; background: none; border: 0; color: var(--grafite-mudo); padding: 4px; border-radius: 6px; }
.eu .sair:hover { color: #fff; background: var(--grafite-2); }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none;
  background: #E2E8F0; color: #3A4657; }
.eu .av { background: #3A4452; color: #fff; }
.principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.faixa-teste { background: var(--alerta-suave); color: #6E4706; font-size: 12.5px; padding: 7px 22px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #F0D9A8; }
.faixa-teste .ms { font-size: 18px; }
.tela { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.topo { min-height: 64px; flex: none; background: var(--cartao); border-bottom: 1px solid var(--linha); display: flex; align-items: center;
  gap: 14px; padding: 10px 22px; flex-wrap: wrap; }
.topo h1 { margin: 0; font-size: 17px; font-weight: 600; }
.topo small { display: block; color: var(--mudo); font-size: 12px; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Controles */
.botao { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; border: 1px solid var(--linha-forte); background: #fff; color: var(--texto); white-space: nowrap; }
.botao:hover { border-color: #AFBBCB; background: #F8FAFC; }
.botao.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.botao.primario:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.botao.contorno { border-color: #AFC6EC; color: var(--azul-escuro); }
.botao.perigo { color: var(--erro); }
.botao.peq { height: 32px; font-size: 12.5px; padding: 0 12px; }
.botao[disabled] { opacity: .55; cursor: not-allowed; }
.botao .ms { font-size: 18px; }
.campo { display: grid; gap: 5px; min-width: 0; }
.rotulo { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mudo); }
.entrada, select.entrada, textarea.entrada { width: 100%; min-height: 36px; border: 1px solid var(--linha-forte); border-radius: 8px; background: #fff;
  padding: 7px 11px; font-size: 13.5px; }
textarea.entrada { resize: vertical; min-height: 84px; line-height: 1.45; }
.entrada:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(21, 89, 201, .12); }
.entrada[disabled] { background: #F1F4F8; color: var(--mudo); }
.dica { font-size: 11.5px; color: var(--mudo); display: flex; align-items: center; gap: 5px; }
.dica .ms { font-size: 15px; }
.dica.alerta { color: var(--alerta); } .dica.erro { color: var(--erro); }
.contador { display: flex; justify-content: space-between; font-size: 11px; color: var(--fraco); gap: 10px; }
.marca-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.marca-check input { width: 17px; height: 17px; accent-color: var(--azul); }
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; border-radius: 5px; padding: 1px 7px; white-space: nowrap;
  background: #EEF1F5; color: #4A5668; }
.selo .ms { font-size: 14px; }
.selo.azul { background: var(--azul-suave); color: var(--azul-escuro); }
.selo.ok { background: var(--ok-suave); color: var(--ok); }
.selo.alerta { background: var(--alerta-suave); color: var(--alerta); }
.selo.erro { background: var(--erro-suave); color: var(--erro); }
.selo.pido { background: var(--pido-suave); color: var(--pido); }
.painel { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.painel h2 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.painel h2 .ms { color: var(--azul); }
.painel h2 .direita { margin-left: auto; }
.vazio { color: var(--mudo); text-align: center; padding: 40px 20px; display: grid; gap: 8px; justify-items: center; }
.vazio .ms { font-size: 36px; color: var(--fraco); width: auto; }
.aviso { display: flex; gap: 9px; align-items: flex-start; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; line-height: 1.4; }
.aviso .ms { font-size: 18px; }
.aviso.alerta { background: var(--alerta-suave); color: #6E4706; }
.aviso.erro { background: var(--erro-suave); color: #7A2222; }
.aviso.info { background: var(--azul-suave); color: var(--azul-escuro); }
.aviso.ok { background: var(--ok-suave); color: #14573A; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--grafite); }
.login form { width: min(380px, 100%); background: #fff; border-radius: 14px; padding: 28px; display: grid; gap: 14px; }
.login .marca { border: 0; padding: 0 0 6px; }
.login .marca b { color: var(--texto); font-size: 17px; }
.login .marca small { color: var(--mudo); font-size: 12.5px; }

/* Atendimentos */
.atend { flex: 1; min-height: 0; display: grid; grid-template-columns: 336px minmax(0, 1fr); }
.lista { background: #fff; border-right: 1px solid var(--linha); display: flex; flex-direction: column; min-height: 0; }
.lista-topo { padding: 16px 16px 12px; border-bottom: 1px solid var(--linha); display: grid; gap: 10px; }
.lista-topo .t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lista-topo h1 { margin: 0; font-size: 16px; font-weight: 600; }
.busca { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linha); border-radius: 8px; padding: 0 10px; background: var(--fundo); }
.busca .ms { color: var(--fraco); }
.busca input { border: 0; background: none; height: 34px; width: 100%; outline: none; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 11.5px; padding: 4px 9px; border-radius: 14px; border: 1px solid var(--linha); color: var(--mudo); background: #fff; }
.chip.ativo { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.itens { overflow-y: auto; flex: 1; }
.item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--linha);
  align-items: start; background: #fff; width: 100%; text-align: left; }
.item:hover { background: #F8FAFC; }
.item.sel { background: var(--azul-suave); box-shadow: inset 3px 0 0 var(--azul); }
.item .av { width: 38px; height: 38px; grid-row: span 3; }
.item.sel .av { background: var(--azul); color: #fff; }
.item b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item time { font-size: 11.5px; color: var(--fraco); text-align: right; white-space: nowrap; }
.item p { margin: 0; color: var(--mudo); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 2 / 4; }
.item .selos { grid-column: 2 / 4; display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; align-items: center; }
.naolidas { background: var(--azul); color: #fff; font-size: 10.5px; font-weight: 600; border-radius: 9px; padding: 0 6px; }
.conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo); }
.conv-topo { min-height: 64px; flex: none; background: #fff; border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 12px; padding: 10px 22px; flex-wrap: wrap; }
.conv-topo .av { background: var(--azul); color: #fff; width: 40px; height: 40px; }
.conv-topo b { font-size: 15px; font-weight: 600; }
.conv-topo small { display: block; color: var(--mudo); font-size: 12px; }
.conv-topo .direita { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.canal { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); border-radius: 7px; padding: 5px 9px; font-size: 12px; }
.canal .ms { font-size: 17px; color: var(--mudo); }
.acoes { flex: none; background: #F7FAFE; border-bottom: 1px solid var(--azul-linha); padding: 10px 22px; display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.acoes .rotulo { color: var(--azul-escuro); }
.acoes select.entrada { border-color: #AFC6EC; font-weight: 500; }
.acoes .autoriza { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 12.5px; }
.acoes .autoriza small { display: block; color: var(--mudo); font-size: 11px; line-height: 1.2; }
.acoes .fim { margin-left: auto; }
.acoes .info { font-size: 12.5px; color: var(--mudo); line-height: 1.45; }
.acoes .info b { color: var(--texto); font-weight: 600; }
.recusa { margin: 10px 22px 0; }
.feed { flex: 1; overflow-y: auto; padding: 14px 22px 10px; display: flex; flex-direction: column; gap: 6px; }
.dia { align-self: center; font-size: 11.5px; color: var(--mudo); background: #E6EBF2; border-radius: 10px; padding: 2px 10px; margin: 4px 0; }
.evento { align-self: center; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mudo); background: #fff;
  border: 1px dashed #C9D3E0; border-radius: 14px; padding: 3px 11px; max-width: 80%; text-align: center; }
.evento .ms { font-size: 15px; color: var(--azul); }
.msg { width: fit-content; max-width: min(560px, 80%); padding: 7px 12px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--linha); align-self: flex-start;
  border-bottom-left-radius: 4px; overflow-wrap: anywhere; }
.msg .texto { white-space: pre-wrap; }
.msg.saida { align-self: flex-end; background: var(--azul-suave); border-color: var(--azul-linha); border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; }
.msg.saida.autor-equipe { background: #fff; border-color: var(--azul-linha); }
.msg.cancelado { opacity: .7; }
.meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mudo); margin-bottom: 2px; white-space: normal; flex-wrap: wrap; }
.meta b { font-weight: 600; color: var(--texto); }
.msg.saida .meta b { color: var(--azul-escuro); }
.meta .quem { font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: #fff; color: var(--azul-escuro); border: 1px solid var(--azul-linha); }
.meta .envio { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }
.meta .envio .ms { font-size: 15px; }
.envio.lido { color: var(--azul); } .envio.erro { color: var(--erro); } .envio.alerta { color: var(--alerta); }
.opcoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; white-space: normal; }
.opcao { font-size: 12px; background: #fff; border: 1px solid var(--azul-linha); border-radius: 6px; padding: 2px 8px; }
.msg audio { display: block; width: min(360px, 100%); height: 40px; margin-top: 3px; }
.msg img, .msg video { display: block; max-width: min(320px, 100%); border-radius: 8px; margin-top: 4px; }
.arquivo { font-size: 11px; color: var(--mudo); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.arquivo .ms { font-size: 14px; }
.reenviar { margin-top: 6px; }
.compor { flex: none; background: #fff; border-top: 1px solid var(--linha); padding: 12px 22px 10px; display: grid; gap: 6px; }
.caixa { display: flex; align-items: flex-end; gap: 10px; border: 1.5px solid var(--linha-forte); border-radius: 10px; padding: 6px 6px 6px 12px; background: #fff; }
.caixa:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(21, 89, 201, .12); }
.caixa textarea { flex: 1; border: 0; outline: none; resize: none; min-height: 38px; max-height: 180px; padding: 8px 0; line-height: 1.4; background: none; }
.compor .dicas { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fraco); gap: 10px; flex-wrap: wrap; }
.compor .dicas b { color: var(--mudo); font-weight: 500; }
.simulador { display: flex; gap: 8px; align-items: center; border: 1px dashed #E0BE73; background: #FFFBF2; border-radius: 9px; padding: 6px 8px 6px 12px; }
.simulador .rotulo { color: var(--alerta); white-space: nowrap; }
.simulador input { flex: 1; border: 0; background: none; outline: none; min-height: 32px; }

/* Kanban */
.relogio { display: flex; align-items: center; gap: 10px; background: var(--alerta-suave); border: 1px solid #F0D9A8; border-radius: 9px; padding: 6px 10px; font-size: 12.5px; color: #6E4706; }
.quadro { flex: 1; min-height: 0; overflow: auto; display: flex; gap: 12px; padding: 16px 22px; align-items: flex-start; }
.coluna { background: #E9EEF4; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; padding: 10px; width: 268px; flex: none; max-height: 100%; }
.coluna-topo { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0; }
.coluna-topo b { font-size: 13.5px; font-weight: 600; }
.coluna-topo .n { margin-left: auto; font-size: 11.5px; font-weight: 600; background: #fff; border-radius: 9px; padding: 1px 8px; color: var(--mudo); }
.cor { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--azul); }
.regras { background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 8px 9px; display: grid; gap: 5px; }
.regras .r { display: flex; align-items: center; gap: 6px; font-size: 11.5px; min-width: 0; }
.regras .r .selo { flex: none; }
.regras .r em { font-style: normal; color: var(--mudo); margin-left: auto; text-align: right; line-height: 1.25; }
.fechada { font-size: 11.5px; color: var(--mudo); display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: #F3F5F8; border-radius: 7px; border: 1px dashed #C9D3E0; }
.fechada .ms { font-size: 16px; }
.cartoes { display: grid; gap: 8px; overflow-y: auto; min-height: 0; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: 9px; padding: 9px 10px; display: grid; gap: 5px; text-align: left; width: 100%; }
button.cartao:hover { border-color: var(--azul-linha); }
.cartao .t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cartao .t b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao .av { width: 26px; height: 26px; font-size: 10.5px; }
.cartao .selos { display: flex; gap: 6px; flex-wrap: wrap; }
.proximo { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.proximo .ms { font-size: 15px; color: var(--azul); }
.proximo b { font-weight: 600; }
.sub { font-size: 11px; color: var(--mudo); line-height: 1.35; }
.nova-coluna { border: 1.5px dashed #AFC0D6; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px;
  text-align: center; color: var(--mudo); font-size: 12px; width: 180px; flex: none; background: none; }
.nova-coluna:hover { border-color: var(--azul); }
.nova-coluna .mais { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #AFC0D6; display: grid; place-items: center; color: var(--azul); }
.nova-coluna b { color: var(--texto); font-size: 13px; }

/* Gaveta */
.veu { position: fixed; inset: 0; background: rgba(17, 23, 31, .46); z-index: 20; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff; z-index: 21; display: flex; flex-direction: column; }
.gaveta-topo { padding: 14px 20px 12px; border-bottom: 1px solid var(--linha); display: flex; align-items: flex-start; gap: 12px; }
.gaveta-topo h2 { margin: 0; font-size: 17px; font-weight: 600; }
.gaveta-topo small { display: block; color: var(--mudo); font-size: 12px; margin-top: 2px; }
.gaveta-topo .fechar { margin-left: auto; background: none; border: 0; color: var(--mudo); padding: 4px; border-radius: 6px; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 14px 20px; display: grid; gap: 13px; align-content: start; }
.gaveta-pe { padding: 11px 20px; border-top: 1px solid var(--linha); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gaveta-pe .dica { margin-right: auto; }
.segs { display: flex; gap: 6px; flex-wrap: wrap; }
.seg { font-size: 12.5px; border: 1px solid var(--linha-forte); border-radius: 7px; padding: 5px 10px; background: #fff; display: inline-flex; align-items: center; gap: 6px; }
.seg.ativo { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-escuro); font-weight: 600; }
.seg small { font-size: 10.5px; color: var(--mudo); font-weight: 400; }
.dias { display: flex; gap: 5px; flex-wrap: wrap; }
.dia-bt { width: 36px; height: 32px; border: 1px solid var(--linha-forte); border-radius: 7px; background: #fff; font-weight: 500; }
.dia-bt.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.modo { border: 1px solid var(--linha-forte); border-radius: 9px; padding: 8px 10px; display: grid; gap: 2px; font-size: 12.5px; font-weight: 600;
  position: relative; background: #fff; text-align: left; }
.modo small { font-weight: 400; color: var(--mudo); font-size: 11px; line-height: 1.3; }
.modo .ms { font-size: 18px; color: var(--mudo); }
.modo .radio { position: absolute; right: 9px; top: 9px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #AFBBCB; }
.modo.ativo { border: 1.5px solid var(--azul); background: var(--azul-fundo); }
.modo.ativo .ms { color: var(--azul); }
.modo.ativo .radio { border: 4px solid var(--azul); }
.modo.pido.ativo { border-color: var(--pido-forte); background: #F6F4FE; }
.modo.pido.ativo .ms { color: var(--pido-forte); }
.modo.pido.ativo .radio { border-color: var(--pido-forte); }
.contexto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; font-size: 11.5px; }
.contexto span { display: flex; align-items: center; gap: 5px; }
.contexto .ms { font-size: 14px; color: var(--pido); }
.dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.leitura { min-height: 36px; border: 1px solid var(--linha); border-radius: 8px; background: #F8FAFC; padding: 8px 11px; font-size: 13px; display: flex; align-items: center; gap: 8px; }

/* Menus */
.menus { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 14px; padding: 16px 22px; overflow: hidden; }
.menus > * { min-height: 0; }
.col-esq { display: grid; gap: 14px; align-content: start; overflow-y: auto; min-width: 0; }
.arvore { display: grid; gap: 8px; }
.no { border: 1px solid var(--linha); border-radius: 9px; padding: 9px 11px; background: #fff; display: grid; gap: 3px; text-align: left; width: 100%; }
.no:hover { border-color: var(--azul-linha); }
.no .nt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.no .nt .ms { font-size: 18px; color: var(--azul); }
.no p { margin: 0; font-size: 12px; color: var(--mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no .selos { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.no.aberto { background: #F7FAFE; border-color: var(--azul-linha); }
.no.sel { border: 1.5px solid var(--azul); background: var(--azul-suave); }
.filhos { display: grid; gap: 6px; margin-left: 22px; padding-left: 16px; border-left: 2px solid var(--azul-linha); }
.filhos .no { position: relative; }
.filhos .no::before { content: ""; position: absolute; left: -18px; top: 20px; width: 16px; border-top: 2px solid var(--azul-linha); }
.seta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mudo); padding-left: 4px; }
.seta .ms { font-size: 16px; color: var(--azul); }
.editor { border: 1.5px solid var(--azul); border-radius: 11px; background: #fff; display: flex; flex-direction: column; min-height: 0; }
.editor-topo { padding: 12px 16px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 10px; }
.editor-topo b { font-size: 15px; font-weight: 600; }
.editor-topo small { display: block; color: var(--mudo); font-size: 12px; }
.editor-corpo { padding: 12px 16px; display: grid; gap: 11px; overflow-y: auto; flex: 1; align-content: start; }
.editor-pe { padding: 10px 16px; border-top: 1px solid var(--linha); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.caixa-audio { border: 1px dashed #AFC0D6; border-radius: 9px; padding: 10px; display: grid; gap: 8px; background: #FAFCFF; }
.linha-arquivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nome-arquivo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; min-width: 0; }
.nome-arquivo .ms { color: var(--azul); }
.nome-arquivo small { color: var(--mudo); font-weight: 400; }
.caixa-audio audio { width: 100%; height: 40px; }
.ordem { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mudo); flex-wrap: wrap; }
.link { background: none; border: 0; color: var(--azul-escuro); font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 2px; }
.link .ms { font-size: 16px; }
.link.perigo { color: var(--erro); }

/* WhatsApp */
.wa-tela { flex: 1; overflow-y: auto; padding: 16px 22px; display: grid; gap: 14px; align-content: start; }
.provs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prov { border: 1px solid var(--linha-forte); border-radius: 10px; padding: 12px 14px; background: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 12px; align-items: center; text-align: left; }
.prov .ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; grid-row: span 2; background: #EEF1F5; color: #4A5668; }
.prov b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.prov small { color: var(--mudo); font-size: 12px; grid-column: 2; }
.prov .radio { grid-row: span 2; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #AFBBCB; }
.prov.ativo { border: 1.5px solid var(--azul); background: var(--azul-fundo); }
.prov.ativo .ic { background: var(--azul); color: #fff; }
.prov.ativo .radio { border: 5px solid var(--azul); }
.conexao { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.qrcaixa { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 14px; display: grid; justify-items: center; gap: 8px; min-height: 300px; align-content: center; }
.qrcaixa img { width: 236px; height: 236px; border: 1px solid var(--linha); border-radius: 8px; padding: 6px; background: #fff; image-rendering: pixelated; }
.qr-vazio { width: 236px; height: 236px; border: 1.5px dashed var(--linha-forte); border-radius: 8px; display: grid; place-items: center; color: var(--fraco); text-align: center; padding: 18px; font-size: 12.5px; }
.barra { width: 236px; height: 4px; border-radius: 2px; background: #E6EBF2; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--azul); transition: width 1s linear; }
.temporizador { font-size: 12px; color: var(--mudo); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ligado { display: grid; justify-items: center; gap: 10px; text-align: center; }
.ligado .grande { width: 84px; height: 84px; border-radius: 50%; background: var(--ok-suave); color: var(--ok); display: grid; place-items: center; }
.ligado .grande .ms { font-size: 46px; width: auto; }
.ligado b { font-size: 16px; }
.ligado .numero { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.passos { display: grid; gap: 9px; }
.passo { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 13px; }
.passo .num { width: 26px; height: 26px; border-radius: 50%; background: var(--azul-suave); color: var(--azul-escuro); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 12.5px; margin: 0; }
.kv dt { color: var(--mudo); }
.kv dd { margin: 0; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.kv dd .ms { font-size: 16px; }
.registro { display: grid; gap: 6px; }
.reg { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 7px 9px; border-radius: 7px; background: #F6F8FB; }
.reg .ms { font-size: 18px; }
.reg time { font-size: 11.5px; color: var(--mudo); font-variant-numeric: tabular-nums; }
.reg small { display: block; color: var(--mudo); font-size: 11px; }
.reg.pendente { opacity: .6; }
.variaveis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; font-size: 12px; }
.variaveis span { display: flex; align-items: center; gap: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; }
.variaveis .ms { font-size: 16px; }
.okc { color: var(--ok); } .faltac { color: var(--erro); }
.eventos-con { display: grid; gap: 4px; font-size: 12px; }
.eventos-con div { display: flex; gap: 10px; }
.eventos-con time { color: var(--mudo); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Usuários */
.usuarios { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 14px; padding: 16px 22px; overflow: hidden; }
.usuarios > * { min-height: 0; }
.tabela-u { overflow-x: auto; }
.tabela-u table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela-u th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mudo); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela-u td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.nome-u { display: flex; align-items: center; gap: 9px; }
.nome-u .av { width: 30px; height: 30px; font-size: 11px; }
.nome-u b { font-weight: 600; display: block; }
.nome-u small { color: var(--mudo); font-size: 11.5px; }
.acoes-u { display: flex; gap: 4px; flex-wrap: wrap; }
.perfis { display: grid; gap: 6px; }
.perfil { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; font-size: 12.5px; align-items: center; background: #fff; text-align: left; width: 100%; }
.perfil b { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.perfil small { color: var(--mudo); font-size: 11.5px; grid-column: 1; }
.perfil.sel { border: 1.5px solid var(--azul); background: var(--azul-suave); }
.perm { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 1px 10px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; align-items: start; cursor: pointer; }
.perm input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--azul); }
.perm b { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.perm b .ms { font-size: 17px; color: var(--mudo); }
.perm small { grid-column: 2; color: var(--mudo); font-size: 11.5px; line-height: 1.35; }
.perm.marcado { border-color: var(--azul-linha); background: var(--azul-fundo); }
.perm.marcado b .ms { color: var(--azul); }

/* Diálogo e avisos */
.dialogo { border: 0; border-radius: 12px; padding: 0; width: min(480px, calc(100% - 32px)); }
.dialogo::backdrop { background: rgba(17, 23, 31, .46); }
.dialogo form { padding: 20px; display: grid; gap: 13px; }
.dialogo h2 { margin: 0; font-size: 16px; font-weight: 600; }
.dialogo .botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.dialogo .erro-dialogo { color: var(--erro); font-size: 12.5px; margin: 0; }
.avisos { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; max-width: min(420px, calc(100% - 32px)); }
.toast { background: var(--grafite); color: #fff; border-radius: 9px; padding: 10px 14px; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.toast.erro { background: #7A2222; }
.toast .ms { font-size: 18px; }

@media (max-width: 1180px) {
  .conexao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .conexao .qrcaixa { grid-column: 1 / -1; }
  .menus, .usuarios { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 100vh; }
  .lado { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
  .marca { border: 0; padding: 0; }
  .nav { display: flex; flex-wrap: wrap; margin: 0; }
  .lado-pe { margin: 0 0 0 auto; display: flex; }
  .lado-pe .wa { display: none; }
  .atend { grid-template-columns: minmax(0, 1fr); }
  .atend.com-conversa .lista { display: none; }
  .atend:not(.com-conversa) .conversa { display: none; }
  .conexao, .provs, .dois, .modos, .contexto { grid-template-columns: minmax(0, 1fr); }
  .tela, .principal { min-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }