/* Fonte do logotipo (mesma do VeriPay): Comfortaa Bold, hospedada localmente (licença OFL em /fonts) */
@font-face { font-family: "Comfortaa"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/comfortaa-700.woff2") format("woff2"); }

/* Tokens inspirados no WDS (WhatsApp Design System) — https://ui.meta-cloud-api.site */
:root {
  color-scheme: light;
  --bg: #fff; --bg-deep: #f0f2f5; --papel: #f5f0e8; --header: #fff; --compositor: #f0f2f5;
  --balao-in: #fff; --balao-out: #e7ffdb;
  --texto: #111b21; --suave: #667781; --mudo: #8696a0; --meta-out: #667781;
  --borda: #e9edef; --hover: #f5f6f6; --sel: #f0f2f5; --camada: rgba(11, 20, 26, .06);
  --accent: #00a884; --accent-forte: #008069; --accent-claro: #e7fce3; --remetente: #008069; --link: #027eb5;
  --critico: #ea0038; --ok: #1fa855; --lido: #53bdeb; --entregue: #8696a0; --naolida: #25d366; --naolida-texto: #fff;
  --input: #fff; --sombra-balao: 0 1px .5px rgba(11, 20, 26, .13);
  --erro: var(--critico);
  --login-banda: #00a884;
  --fonte: "Segoe UI", "Helvetica Neue", Helvetica, Arial, Ubuntu, sans-serif;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #111b21; --bg-deep: #0b141a; --papel: #0b141a; --header: #202c33; --compositor: #202c33;
  --balao-in: #202c33; --balao-out: #005c4b;
  --texto: #e9edef; --suave: #8696a0; --mudo: #8696a0; --meta-out: rgba(255, 255, 255, .6);
  --borda: #222d34; --hover: #202c33; --sel: #2a3942; --camada: rgba(255, 255, 255, .06);
  --accent: #06cf9c; --accent-forte: #00a884; --accent-claro: #005c4b; --remetente: #06cf9c; --link: #53bdeb;
  --entregue: #aebac1; --naolida-texto: #111b21;
  --input: #2a3942; --sombra-balao: 0 1px .5px rgba(11, 20, 26, .4); --login-banda: #005c4b;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--mudo) transparent; }
html { background: var(--header); }
body { background: var(--bg); }
/* iOS (app instalado): a página ocupa a tela toda, inclusive sob a barra de status, pintada com a cor do cabeçalho (clara e lisa: o vidro do sistema fica invisível sobre ela) */
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
button, label, a { touch-action: manipulation; }
body { font: 15px/1.4 var(--fonte); color: var(--texto); background: var(--bg); }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 8px; background: var(--accent-forte); color: #fff; padding: 8px 14px; }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select { font: inherit; border: 1px solid transparent; border-radius: 8px; padding: 9px 12px; background: var(--bg-deep); color: var(--texto); outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
svg { flex: none; }

/* ---------- Login (estilo VeriPay; claro por padrão e escuro quando o usuário escolhe) ---------- */
.login {
  --l-fundo: #f0f2f5; --l-campo: #fff; --l-borda: #d1d7db; --l-texto: #111b21; --l-suave: #667781;
  --l-verde: #008069; --l-pe: #00a884; --l-foco: rgba(0, 168, 132, .25); --erro: #ea0038;
  --l-instalar: #008069; --l-instalar-fundo: rgba(0, 168, 132, .08); --l-instalar-borda: rgba(0, 128, 105, .35);
  height: 100%; height: 100dvh; overflow-y: auto; display: flex; padding: calc(32px + env(safe-area-inset-top, 0px)) 20px calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--l-fundo); color: var(--l-texto);
}
:root[data-tema="escuro"] .login {
  --l-fundo: #0b141a; --l-campo: #202c33; --l-borda: #2a3942; --l-texto: #e9edef; --l-suave: #8696a0;
  --l-verde: #00a884; --l-pe: #06cf9c; --erro: #ff6b81;
  --l-instalar: #06cf9c; --l-instalar-fundo: rgba(6, 207, 156, .1); --l-instalar-borda: rgba(6, 207, 156, .35);
}
.login-box { width: min(392px, 100%); margin: auto; }
.marca { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 36px; }
.marca-icone { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0, 168, 132, .25); }
.marca-nome { font: 700 46px/1 "Comfortaa", ui-rounded, var(--fonte); color: var(--l-texto); }
.marca-nome .verde { color: var(--l-pe); }
#login-form { display: flex; flex-direction: column; gap: 20px; }
.campo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.campo label { font-size: 15px; font-weight: 600; color: var(--l-texto); }
.login input { width: 100%; height: 56px; padding: 0 48px; border-radius: 12px; border: 1px solid var(--l-borda); background: var(--l-campo); color: var(--l-texto); font-size: 16px; text-align: center; transition: border-color .15s, box-shadow .15s; }
.login input::placeholder { color: var(--l-suave); }
.login input:focus { border-color: var(--l-verde); box-shadow: 0 0 0 3px var(--l-foco); }
.senha { position: relative; width: 100%; }
.olho { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; color: var(--l-suave); padding: 0; line-height: 0; border-radius: 0; }
.olho:hover { color: var(--l-texto); }
.entrar { width: 100%; height: 56px; margin-top: 4px; border-radius: 12px; background: var(--l-verde); font-size: 17px; font-weight: 700; }
.entrar:hover:not(:disabled) { filter: brightness(1.1); }
.erro { color: var(--erro); margin: -6px 0 0; min-height: 1.2em; font-size: 13.5px; text-align: center; }
.erro.ok { color: var(--l-pe); }
.instalar { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 12px 22px; border-radius: 12px; border: 1px solid var(--l-instalar-borda); background: var(--l-instalar-fundo); color: var(--l-instalar); font-size: 15px; font-weight: 600; }
.instalar:hover { filter: brightness(.95); }

/* ---------- Aplicativo ---------- */
.app { height: 100%; display: grid; grid-template-columns: var(--lista-w, clamp(400px, 34vw, 560px)) minmax(0, 1fr); position: relative; }
.lista, .conversa { min-width: 0; }

.lista { background: var(--bg); border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
.lista-topo { height: calc(59px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px) !important; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 16px; background: var(--header); }
/* mesmo logotipo do login: Comfortaa Bold, "kip" na cor do texto e "pe" no verde */
.lista-topo h1 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 28px/1 "Comfortaa", ui-rounded, var(--fonte); color: var(--texto); }
.lista-topo h1 .verde { color: var(--accent); }
.acoes { flex: none; }
.acoes { display: flex; align-items: center; }
.ic { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--suave); }
.ic:hover { background: var(--hover); }
.ic.on { color: var(--accent); }
#notif .on-ico { display: none; }
#notif.on .on-ico { display: grid; }
#notif.on .off-ico { display: none; }
.busca-wrap { flex: none; padding: 7px 12px; background: var(--bg); }
.busca-wrap input { width: 100%; padding: 8px 14px; font-size: 14px; background: var(--bg-deep); border-radius: 8px; }
.aviso { flex: none; margin: 4px 12px 8px; padding: 10px 12px; border-radius: 8px; background: rgba(234, 0, 56, .08); border: 1px solid rgba(234, 0, 56, .25); color: var(--texto); font-size: 13px; line-height: 1.4; }
.aviso button { margin-left: 6px; padding: 2px 8px; font-size: 12px; background: var(--bg-deep); color: var(--texto); }
#contatos { list-style: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); overflow-y: auto; flex: 1; }
#contatos li { display: flex; align-items: center; gap: 13px; padding: 0 15px; height: 72px; cursor: pointer; }
#contatos li:hover { background: var(--hover); }
#contatos li.ativo { background: var(--sel); }
.avatar { flex: none; width: 49px; height: 49px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 500; overflow: hidden; }
.avatar svg { width: 62%; height: 62%; opacity: .9; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.grande { width: 140px; height: 140px; font-size: 56px; margin: 0 auto; }
.topo .avatar { cursor: pointer; }
.topo .avatar:hover { filter: brightness(1.12); }
.dica { margin: 0; font-size: 12.5px; color: var(--suave); text-align: center; }
.topo .avatar { width: 40px; height: 40px; font-size: 17px; }
.info { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-bottom: 1px solid var(--borda); }
#contatos li:last-child .info { border-bottom: 0; }
.info .linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 20px; }
.info .nome { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info .hora { flex: none; font-size: 12px; color: var(--mudo); }
li.nao-lida .hora { color: var(--naolida); }
.info .previa { font-size: 14px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: var(--naolida); color: var(--naolida-texto); font-size: 12px; font-weight: 600; }
.tag { font-size: 11px; color: var(--suave); background: var(--bg-deep); border-radius: 6px; padding: 0 6px; margin-left: 6px; vertical-align: middle; }

.conversa { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--papel); }
.vazio { margin: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--suave); font-size: 14px; }
.vazio strong { margin-top: 10px; color: var(--texto); font-size: 18px; font-weight: 600; }
.vazio-icone { overflow: visible; animation: vazio-entra .5s ease-out both; }
.topo { height: calc(59px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px) !important; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--header); border-bottom: 1px solid var(--borda); }
.topo-info { min-width: 0; }
.topo-info strong { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-info small { display: block; font-size: 13px; color: var(--suave); }
.so-mobile { display: none; margin-left: -8px; }

.mensagens { flex: 1; overflow-y: auto; padding: 14px clamp(12px, 6%, 64px); display: flex; flex-direction: column; gap: 2px; }
.ir-fim { position: absolute; right: 22px; bottom: 76px; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--header); color: var(--suave); box-shadow: 0 2px 8px rgba(11, 20, 26, .3); z-index: 2; }
.ir-fim:hover { color: var(--texto); }
.dia { align-self: center; margin: 10px 0; padding: 5px 12px; border-radius: 7.5px; background: var(--balao-in); box-shadow: var(--sombra-balao); color: var(--suave); font-size: 12.5px; }
.msg { position: relative; align-self: flex-start; max-width: min(65%, 560px); padding: 6px 7px 8px 9px; border-radius: 7.5px; background: var(--balao-in); box-shadow: var(--sombra-balao); font-size: 14.2px; line-height: 19px; white-space: pre-wrap; word-break: break-word; }
.msg.eu { align-self: flex-end; background: var(--balao-out); }
.msg.primeira { margin-top: 8px; }
.msg.primeira::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; left: -8px; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.msg.primeira { border-top-left-radius: 0; }
.msg.eu.primeira { border-top-left-radius: 7.5px; border-top-right-radius: 0; }
.msg.eu.primeira::before { left: auto; right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg .bq { margin: 2px 0; padding: 2px 8px; border-left: 4px solid var(--mudo); border-radius: 0 4px 4px 0; background: var(--camada); white-space: pre-wrap; }
.msg ul, .msg ol { margin: 2px 0; padding-left: 22px; white-space: normal; }
.msg li { padding-left: 2px; }
.msg code { font-family: Consolas, Menlo, Monaco, monospace; font-size: .93em; background: var(--camada); border-radius: 3px; padding: 0 3px; }
.msg code.bloco { display: block; padding: 6px 8px; margin: 2px 0; white-space: pre-wrap; }
.citacao code, .resposta-corpo code { background: transparent; padding: 0; }
.msg a { color: var(--link); overflow-wrap: anywhere; }
.msg a:hover { text-decoration: underline; }
.msg .doc, .msg .doc:hover { text-decoration: none; }
.msg audio { max-width: 100%; }
.msg video { max-width: 100%; border-radius: 6px; display: block; margin-bottom: 4px; }
.msg .thumb { display: block; width: fit-content; max-width: 100%; padding: 0; margin: 0 0 4px; background: var(--camada); border-radius: 6px; overflow: hidden; line-height: 0; cursor: zoom-in; min-width: 120px; min-height: 90px; }
.msg .thumb img { max-width: min(320px, 70vw); max-height: 320px; object-fit: cover; display: block; }
.msg .doc { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 230px; margin: 0 0 4px; padding: 10px; border-radius: 6px; background: var(--camada); color: var(--texto); text-align: left; text-decoration: none; }
.msg .doc:hover { filter: brightness(.97); }
.doc-icone { flex: none; width: 36px; height: 44px; border-radius: 6px; background: var(--critico); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.doc-icone.outro { background: var(--mudo); }
.doc-info { min-width: 0; display: flex; flex-direction: column; }
.doc-nome { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-acao { font-size: 12px; color: var(--accent-forte); }
.remetente { font-size: 12.5px; font-weight: 600; color: var(--remetente); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transcricao { margin-top: 2px; }
.transcrever { background: none; color: var(--accent-forte); padding: 2px 0; font-size: 13px; font-weight: 500; }
.transcrever:disabled { opacity: .6; }
.transcricao-texto { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--borda); font-size: 14px; }
.transcricao-texto.vazia { color: var(--mudo); font-style: italic; }
.meta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin: 1px -2px -3px 12px; font-size: 11px; line-height: 15px; color: var(--mudo); user-select: none; }
.msg.eu .meta { color: var(--meta-out); }
.ticks { display: inline-flex; color: var(--entregue); }
.ticks.lida { color: var(--lido); }
.meta .falhou { color: var(--critico); font-weight: 600; }

/* ---------- Responder (citação) ---------- */
.resposta { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 12px 0 16px; background: var(--compositor); }
.resposta-card { flex: 1; min-width: 0; border-radius: 8px; border-left: 4px solid var(--remetente); background: var(--input); padding: 7px 10px; }
.resposta-corpo { display: flex; flex-direction: column; min-width: 0; }
.resposta-corpo strong { font-size: 13px; font-weight: 600; color: var(--remetente); }
.resposta-corpo span { font-size: 13.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa.respondendo .ir-fim { bottom: 138px; }
.citacao { display: block; width: 100%; text-align: left; margin: 0 0 4px; padding: 6px 9px; border: 0; border-left: 4px solid var(--remetente); border-radius: 6px; background: var(--camada); color: var(--texto); cursor: pointer; min-width: 140px; }
.citacao strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--remetente); }
.citacao span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 17px; color: var(--suave); white-space: normal; }
.responder { position: absolute; top: 3px; right: 4px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--balao-in); color: var(--suave); box-shadow: var(--sombra-balao); opacity: 0; transition: opacity .12s; z-index: 1; }
.msg.eu .responder { background: var(--balao-out); }
.msg:hover .responder, .responder:focus-visible { opacity: 1; }
@media (hover: none) { .responder { display: none; } }
.msg { touch-action: pan-y; }
.msg.volta { transition: transform .18s ease; }
.msg.destaque { animation: destaque 1.6s ease; }
@keyframes destaque { 0%, 55% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--sombra-balao); } }

.compositor { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 16px; background: var(--compositor); }
.compositor textarea { flex: 1; resize: none; max-height: 140px; min-height: 42px; padding: 10px 14px; background: var(--input); border-radius: 8px; font-size: 15px; line-height: 20px; }
.anexo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--suave); cursor: pointer; }
.anexo:hover { background: var(--hover); }
.anexo-nome { align-self: center; font-size: 12px; color: var(--suave); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#enviar { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent-forte); }
#enviar:hover:not(:disabled) { filter: brightness(1.08); }

/* ---------- Janelas ---------- */
dialog { border: 1px solid var(--borda); border-radius: 12px; padding: 0; width: min(360px, 92vw); background: var(--bg); color: var(--texto); box-shadow: 0 12px 40px rgba(11, 20, 26, .25); }
dialog::backdrop { background: rgba(11, 20, 26, .5); }
dialog.largo { width: min(760px, 96vw); }
.dlg-form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.dlg-form h2 { margin: 0; font-size: 18px; font-weight: 600; }
.dlg-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
.dlg-form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); }
.dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.dlg-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
button.sec { background: var(--bg-deep); color: var(--texto); }
.cfg-lista { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.cfg-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.cfg-item .info { height: auto; border: 0; }
.cfg-item .info .nome { font-size: 15px; font-weight: 500; }
.cfg-item .info small { display: block; color: var(--suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-item .inativo { color: var(--critico); font-size: 12px; margin-left: 6px; }
.cfg-item button { padding: 6px 10px; font-size: 13px; }
.mudo { color: var(--mudo); font-style: italic; }

/* ---------- Visor ---------- */
.visor { width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: hidden; border: 0; border-radius: 0; background: rgba(11, 20, 26, .95); color: #fff; margin: 0; padding: 0; }
.visor[open] { display: flex; flex-direction: column; }
.visor-topo { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: rgba(0, 0, 0, .35); }
.visor-topo strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.visor-pos { font-size: 13px; opacity: .7; }
.btn-link { background: var(--accent-forte); color: #fff; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.visor .sec { background: rgba(255, 255, 255, .12); color: #fff; }
.visor-corpo { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 12px; }
.visor-corpo img { max-width: 100%; max-height: calc(100dvh - 96px); object-fit: contain; cursor: zoom-in; margin: auto; }
.visor-corpo img.zoom { max-width: none; max-height: none; cursor: zoom-out; }
.visor-corpo iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #fff; }
.visor-vazio { text-align: center; line-height: 1.8; }
.visor .ic-v { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.visor .ic-v:hover { background: rgba(255, 255, 255, .22); }
/* imagem e PDF giráveis: o contêiner tem o tamanho já girado; o conteúdo gira por dentro */
.rot, .rot-pdf { position: relative; margin: auto; flex: none; }
.visor-corpo.rolavel { overflow: auto; } /* só no zoom (tamanho real); evita barras durante a animação de giro */
.rot { cursor: zoom-in; }
.rot.zoom { cursor: zoom-out; }
.visor-corpo .rot img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; margin: 0; cursor: inherit; transition: transform .18s ease; }
.visor-corpo .rot-pdf iframe { position: absolute; left: 50%; top: 50%; transition: transform .18s ease; }
.visor-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 30px; padding: 0; }
.visor-nav.ant { left: 10px; } .visor-nav.prox { right: 10px; }
.visor-nav:disabled { display: none; }

@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); height: 100dvh; }
  .resizer, .lista-toggle { display: none; }
  /* 16px evita o zoom automático do iOS ao focar um campo (que desloca a tela para o lado) */
  input, textarea, select { font-size: 16px; }
  .compositor { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .lista-topo { padding-left: 14px; padding-right: 6px; }
  .ic { width: 38px; height: 38px; }
  .app.em-conversa .lista { display: none; }
  .app:not(.em-conversa) .conversa { display: none; }
  .so-mobile { display: grid; }
  .msg { max-width: 82%; }
  .mensagens { padding: 12px; }
}

.anexo-previa { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--camada); border-top: 1px solid var(--borda, rgba(128,128,128,.25)); }
.anexo-previa img { max-height: 72px; max-width: 120px; border-radius: 8px; object-fit: cover; }
.anexo-previa span { flex: 1; min-width: 0; font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-previa.hidden, .anexo-previa img.hidden { display: none; }
.campo-nome { display: flex; gap: 8px; width: 100%; }
.campo-nome input { flex: 1; min-width: 0; }
.motivo-falha { margin-top: 4px; padding: 4px 8px; border-left: 3px solid var(--critico); border-radius: 4px; font-size: 12px; line-height: 1.35; color: var(--critico); background: rgba(220, 38, 38, .08); white-space: normal; }

/* iOS 26 (PWA): o sistema desfoca o conteúdo logo abaixo da barra de status. Um respiro extra no topo mantém logo e botões fora dessa faixa, e o desfoque cai só sobre o fundo liso do cabeçalho. */
@media (display-mode: standalone) and (pointer: coarse) {
  .lista-topo, .topo { height: calc(59px + 30px + env(safe-area-inset-top, 0px)); padding-top: calc(30px + env(safe-area-inset-top, 0px)) !important; }
}

dialog.largo { width: min(480px, 94vw); }
.dlg-form select, .dlg-form .modelo-campos input { width: 100%; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.modelo-campos > div { display: flex; flex-direction: column; gap: 10px; }
.modelo-campos > div:empty { display: none; }
.modelo-previa { padding: 10px 12px; border-radius: 8px; background: var(--balao-out, var(--camada)); white-space: pre-wrap; font-size: 14px; max-height: 220px; overflow-y: auto; }
.modelo-previa:empty { display: none; }
.modelo-botao { margin-top: 6px; padding: 6px; text-align: center; border-radius: 6px; background: var(--bg); color: var(--accent); font-weight: 600; }
.link-modelo { padding: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

.bolha { transform-box: fill-box; transform-origin: center; }
.bolha.b1 { animation: flutua 3.6s ease-in-out infinite; }
.bolha.b2 { animation: flutua 3.6s ease-in-out -1.8s infinite; opacity: .9; }
.ponto { animation: digita 1.3s ease-in-out infinite; }
.ponto.p2 { animation-delay: .18s; }
.ponto.p3 { animation-delay: .36s; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes digita { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes vazio-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bolha, .ponto, .vazio-icone { animation: none; } }

.gravacao { align-items: center; }
.gravacao .grav-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--critico); animation: grav-pulsa 1s ease-in-out infinite; }
.gravacao .grav-tempo { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 38px; }
.gravacao .grav-dica { flex: 1; color: var(--suave); font-size: 14px; }
#grav-enviar { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--accent-forte); }
#gravar { flex: none; }
@keyframes grav-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .gravacao .grav-ponto { animation: none; } }

.vinculos { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.vinculos input#emp-filtro { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.emp-lista { max-height: 160px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 4px 8px; }
.emp-lista label.check { flex-direction: row; align-items: center; gap: 8px; padding: 5px 0; color: var(--texto); font-size: 14px; }

.abas { flex: none; display: flex; background: var(--bg); border-bottom: 1px solid var(--borda); }
.aba { flex: 1; padding: 10px 8px; background: transparent; color: var(--suave); font-size: 14px; font-weight: 600; border-bottom: 3px solid transparent; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.aba:hover { background: var(--hover); }
.aba.ativa { color: var(--accent-forte); border-bottom-color: var(--accent-forte); }
.aba .n { min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11.5px; line-height: 18px; text-align: center; }
.status-btn { flex: none; margin-left: auto; padding: 7px 12px; border-radius: 8px; background: var(--bg-deep); color: var(--texto); font-size: 13px; font-weight: 600; white-space: nowrap; }
.status-btn.resolver { background: var(--accent-forte); color: #fff; }
.status-btn:hover:not(:disabled) { filter: brightness(1.08); }
.evento-status { align-self: center; margin: 8px 0; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-align: center; background: var(--balao-in); box-shadow: var(--sombra-balao); }
.evento-status.resolvido { color: var(--accent-forte); }
.evento-status.andamento { color: var(--suave); }
.evento-status.transferencia { color: var(--link); }
#transferir-btn { margin-left: auto; }
#transferir-btn + .status-btn { margin-left: 0; }
#filtro { position: relative; }
.ponto-filtro { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--header); }
#filtro.com-filtro { color: var(--accent-forte); }
#atribuir-btn { margin-left: auto; }
#atribuir-btn:not(.hidden) + #transferir-btn { margin-left: 0; }
.resp-badge { flex: none; max-width: 110px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bg-deep); color: var(--suave); font-size: 11.5px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resp-badge.eu { background: var(--accent-claro); color: var(--accent-forte); }
.compositor { position: relative; }
.rapidas { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 4px); max-height: 260px; overflow-y: auto; background: var(--bg); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 28px rgba(11, 20, 26, .22); z-index: 20; }
.rr-item { display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; cursor: pointer; }
.rr-item strong { flex: none; color: var(--accent-forte); font-size: 14px; }
.rr-item span { min-width: 0; color: var(--suave); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-item.sel, .rr-item:hover { background: var(--hover); }
.rr-rodape { padding: 9px 14px; color: var(--link); font-size: 13px; font-weight: 600; cursor: pointer; border-top: 1px solid var(--borda); }
.rr-rodape:first-child { border-top: 0; }
.rr-lista { max-height: 200px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 4px 8px; }
.rr-linha { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--borda); }
.rr-linha:first-child { border-top: 0; }
.rr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rr-info strong { font-size: 14px; }
.rr-info span { color: var(--suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-linha button { padding: 5px 10px; font-size: 12.5px; }
.dlg-form textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; resize: vertical; }
.dlg-form label input#rr-atalho { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.ic svg { display: block; }
#notif .on-ico, #notif .off-ico { line-height: 0; }
.agendadas-barra { flex: none; padding: 7px 16px; background: var(--camada); border-top: 1px solid var(--borda); color: var(--suave); font-size: 13px; }
.ag-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-atalhos button { padding: 5px 10px; font-size: 12.5px; }
.dlg-form input[type="datetime-local"] { width: 100%; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
#dlg-foto { width: min(600px, 94vw); }
#foto-fechar { background: var(--critico); color: #fff; }
#foto-fechar:hover:not(:disabled) { filter: brightness(1.08); }
.falha-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.falha-toggle { color: var(--critico); }

/* Coluna de conversas: arrastar a borda redimensiona; o botão ‹ › oculta e exibe (só no computador) */
.resizer { position: absolute; top: 0; bottom: 0; left: calc(var(--lista-w, clamp(400px, 34vw, 560px)) - 3px); width: 6px; cursor: col-resize; z-index: 6; touch-action: none; }
.resizer:hover, .resizer.arrastando { background: var(--accent); opacity: .45; }
.lista-toggle { position: absolute; top: 50%; left: calc(var(--lista-w, clamp(400px, 34vw, 560px)) - 12px); transform: translateY(-50%); width: 24px; height: 48px; padding: 0; border-radius: 12px; background: var(--bg); color: var(--suave); border: 1px solid var(--borda); font-size: 18px; line-height: 1; z-index: 7; box-shadow: 0 1px 4px rgba(11, 20, 26, .18); opacity: .55; }
.lista-toggle:hover { opacity: 1; }
@media (min-width: 721px) {
  .app.lista-oculta { grid-template-columns: minmax(0, 1fr); }
  .app.lista-oculta .lista, .app.lista-oculta .resizer { display: none; }
  .app.lista-oculta .lista-toggle { left: 0; border-radius: 0 12px 12px 0; }
}
body.redimensionando { user-select: none; cursor: col-resize; }
#dlg-numero { width: min(600px, 94vw); }
#num-cancelar { background: var(--critico); color: #fff; }
#num-cancelar:hover:not(:disabled) { filter: brightness(1.08); }
#num-empresa { width: 100%; padding: 4px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
#num-empresa option { padding: 5px 8px; border-radius: 6px; }
#num-empresa-filtro { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.motivo-falha.editada { border-left-color: var(--link); color: var(--texto); background: rgba(2, 126, 181, .08); }
.motivo-falha.editada .texto-original { margin-top: 3px; padding: 3px 8px; border-left: 3px solid var(--mudo); color: var(--suave); white-space: pre-wrap; }
.texto-original { margin-top: 3px; padding: 3px 8px; border-left: 3px solid var(--mudo); color: var(--suave); font-size: 13.5px; white-space: pre-wrap; }
.topo-info { flex: 1; }
.topo .status-btn, #atribuir-btn, #transferir-btn { margin-left: 0; }
.empresas-btn { position: relative; flex: none; }
.empresas-btn .contagem { position: absolute; top: 2px; right: 0; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-forte); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; }
.ec-linha { padding: 8px 2px; border-top: 1px solid var(--borda); font-size: 14px; overflow-wrap: anywhere; }
.ec-linha:first-child { border-top: 0; }
#ec-fechar { background: var(--critico); color: #fff; }
#ec-fechar:hover:not(:disabled) { filter: brightness(1.08); }
/* Enviando: spinner no botão de enviar e relógio girando no balão provisório */
#enviar.carregando { pointer-events: none; }
#enviar.carregando svg { display: none; }
#enviar.carregando::after { content: ''; width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; }
.enviando-spin { display: inline-block; width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; border: 2px solid var(--entregue); border-top-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #enviar.carregando::after, .enviando-spin { animation-duration: 2s; } }
#dlg-empresas-contato { width: min(800px, 96vw); }
.responder.corrigir { right: 34px; }
@media (hover: none) { .responder.corrigir { display: grid; opacity: .6; } }
/* Configurações (cadastro de números) só no computador */
@media (max-width: 720px), (hover: none) and (pointer: coarse) { #config { display: none !important; } }
#recarregar { display: none; }
@media (max-width: 720px), (hover: none) and (pointer: coarse) { #recarregar { display: grid; } }
#recarregar.girando svg { animation: gira .8s linear infinite; }