/* Inter embutida (variável, subconjunto latin: cobre o português), a mesma do VeriPay; licença OFL em /fonts */
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* 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"); }
/* Títulos e números de destaque: Plus Jakarta Sans (pesos 700 e 800), hospedada localmente (licença OFL em /fonts) */
@font-face { font-family: "Plus Jakarta Sans Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"); }

/* Tokens inspirados no WDS (WhatsApp Design System) — https://ui.meta-cloud-api.site */
:root {
  color-scheme: light;
  --bg: #fff; --bg-deep: #F5F7F6; --papel: #EEF2EF; --header: #fff; --compositor: #ECEFED;
  --balao-in: #FFFFFF; --balao-out: #DCEBE2;
  --texto: #141B18; --suave: #4D5B55; --mudo: #6B7A73; --meta-out: #6B7A73;
  --borda: #DCE2DF; --hover: #F5F7F6; --sel: #ECEFED; --camada: rgba(20, 27, 24, .06);
  --botao: #23664C; --accent: #2F7A5C; --accent-forte: #23664C; --accent-claro: #E3F0E8; --remetente: #23664C; --link: #2F6BB0;
  --critico: #C0392B; --ok: #2F7A5C; --lido: #2F6BB0; --entregue: #96A39D; --naolida: #2F7A5C; --naolida-texto: #FFFFFF;
  --input: #fff; --sombra-balao: 0 1px 1px rgba(20, 27, 24, .08);
  --erro: var(--critico);
  --login-banda: #23664C;
  /* status do atendimento (sempre com texto ou ícone junto, nunca só a cor) */
  --st-ok-bg: #E3F0E8; --st-ok: #2F7A5C; --st-ok-tx: #1C523E;
  --st-aviso-bg: #FBF1DC; --st-aviso: #C98A12; --st-aviso-tx: #7A5208;
  --st-info-bg: #E3EDF8; --st-info: #2F6BB0; --st-info-tx: #1F4B7E;
  --st-erro-bg: #FBE5E2; --st-erro: #C0392B; --st-erro-tx: #8E2A20;
  --fonte: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;      /* interface e texto */
  --fonte-titulo: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", var(--fonte);                                    /* títulos, nomes de tela e números de destaque */
  --fonte-logo: "Comfortaa", ui-rounded, var(--fonte);                                                               /* só o nome "kippe." e as marcas Nukt */
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #151D1A; --bg-deep: #0F1513; --papel: #111916; --header: #151D1A; --compositor: #1E2824;
  --balao-in: #1E2824; --balao-out: #1C3A2E;
  --texto: #E6ECE9; --suave: #9AA8A2; --mudo: #8A9892; --meta-out: rgba(230, 236, 233, .6);
  --borda: #2C3833; --hover: #1E2824; --sel: #1E2824; --camada: rgba(255, 255, 255, .06);
  --botao: #2F7A5C; --accent: #7FB49A; --accent-forte: #7FB49A; --accent-claro: #1C3A2E; --remetente: #9CC4AE; --link: #6A9AD6;
  --critico: #E06555; --ok: #7FB49A; --lido: #6A9AD6; --entregue: #96A39D; --naolida: #7FB49A; --naolida-texto: #0F2E24;
  --input: #1E2824; --sombra-balao: 0 1px 1px rgba(0, 0, 0, .4); --login-banda: #1C523E;
  --st-ok-bg: #1C3A2E; --st-ok: #7FB49A; --st-ok-tx: #AFD1BF;
  --st-aviso-bg: #3A2C10; --st-aviso: #E0A63A; --st-aviso-tx: #F2C66B;
  --st-info-bg: #182B42; --st-info: #6A9AD6; --st-info-tx: #A9C6EC;
  --st-erro-bg: #3D1D1A; --st-erro: #E06555; --st-erro-tx: #F4A399;
}

* { 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); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 8px; background: var(--botao); 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-botao: #141B18; --l-fundo: #F5F7F6; --l-campo: #fff; --l-borda: #DCE2DF; --l-texto: #141B18; --l-suave: #4D5B55;
  --l-verde: #23664C; --l-pe: #23664C; --l-foco: rgba(47, 122, 92, .25); --erro: #C0392B;
  --l-instalar: var(--l-texto); --l-instalar-fundo: color-mix(in srgb, var(--l-texto) 6%, transparent); --l-instalar-borda: color-mix(in srgb, var(--l-texto) 22%, transparent);
  height: 100%; height: 100dvh; overflow-y: auto; display: flex; padding: env(safe-area-inset-top, 0px) 28px calc(96px + env(safe-area-inset-bottom, 0px));   /* mesmas medidas do VeriPay: 28 px nas laterais e o bloco um pouco acima do centro */
  background: var(--l-fundo); color: var(--l-texto);
}
:root[data-tema="escuro"] .login {
  --l-fundo: #0F1513; --l-campo: #1E2824; --l-borda: #2C3833; --l-texto: #E6ECE9; --l-suave: #9AA8A2;
  --l-verde: #7FB49A; --l-pe: #7FB49A; --erro: #E06555;
  --l-instalar: var(--l-texto); --l-instalar-fundo: color-mix(in srgb, var(--l-texto) 6%, transparent); --l-instalar-borda: color-mix(in srgb, var(--l-texto) 22%, transparent);
}
.login-box { width: min(392px, 100%); margin: auto; }
.marca { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 40px; }
.marca-nome { font: 700 42px/1 var(--fonte-logo); 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: 8px; }
.campo label { font-size: 16px; font-weight: 600; color: var(--l-texto); }
.login input { width: 100%; height: 62px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--l-borda); background: var(--l-campo); color: var(--l-texto); font-size: 18px; text-align: center; transition: border-color .15s, box-shadow .15s; }
.login input::placeholder { color: var(--l-suave); }
.login input:focus, .login input:focus-visible { border-color: var(--l-verde); box-shadow: none !important; outline: none; }
.senha { position: relative; width: 100%; }
.olho svg { width: 24px; height: 24px; }
.olho { position: absolute; right: 16px; 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: 60px; border-radius: 12px; background: var(--l-botao, var(--l-verde)); font-size: 20px; font-weight: 600; }
.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; }
#login-form .erro { margin: 0; min-height: 0; font-size: 14px; }
#login-form .erro:empty { display: none; }
.erro.ok { color: var(--l-pe); }
.instalar { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px auto 0; padding: 12px 20px; border-radius: 12px; border: 1px solid var(--l-instalar-borda); background: var(--l-instalar-fundo); color: var(--l-instalar); font-size: 16px; 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(--accent-forte); }
.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(--botao); }
#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(--botao); 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(--botao); }
#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(--botao); 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(--botao); 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; }
.previa.rascunho { color: var(--critico); }
#fixar-btn.fixada { color: var(--accent-forte); background: var(--g-50, rgba(47,122,92,.12)); }
#fixar-btn.fixada svg { fill: currentColor; }

/* Reações */
.reacoes { display: flex; gap: 4px; margin-top: 3px; }
.rx { padding: 0 6px; border-radius: 999px; background: var(--bg-deep); border: 1px solid var(--borda); font-size: 14px; line-height: 20px; }
.rx.equipe { background: var(--accent-claro, #E3F0E8); border-color: var(--accent); }
.responder.reagir { right: 34px; font-size: 14px; }
.rx-popup { position: absolute; top: -40px; right: 0; z-index: 30; display: flex; gap: 2px; padding: 4px 6px; background: var(--bg); border: 1px solid var(--borda); border-radius: 999px; box-shadow: 0 6px 20px rgba(11, 20, 26, .25); }
.rx-popup button { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: transparent; font-size: 18px; line-height: 1; }
.rx-popup button:hover, .rx-popup button.sel { background: var(--hover); }
@media (hover: none) { .responder.reagir { display: grid; opacity: .6; } }

/* Notas internas */
.nota-interna { align-self: center; width: min(560px, 92%); margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: #fff7d6; border: 1px solid #f0d77a; color: #4a3b00; box-shadow: var(--sombra-balao); }
:root[data-tema="escuro"] .nota-interna { background: #3a3220; border-color: #6b5a2a; color: #f4e6b0; }
.nota-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; opacity: .85; }
.nota-excluir { padding: 0 6px; background: transparent; color: inherit; font-size: 13px; opacity: .6; }
.nota-excluir:hover { opacity: 1; }
.nota-corpo { margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.compositor.modo-nota { background: #fff2c2; }
:root[data-tema="escuro"] .compositor.modo-nota { background: #3a3220; }
#nota-btn.ativo { background: #f0d77a; color: #4a3b00; }

/* Etiquetas */
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 0; }
.etiqueta { --cor: #2F7A5C; display: inline-block; max-width: 120px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--cor) 18%, transparent); color: color-mix(in srgb, var(--cor) 55%, #000); border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); font-size: 11px; font-weight: 700; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiqueta.mais { --cor: #64748b; }
.et-item { display: flex; align-items: center; gap: 8px; flex: 1; }

/* Busca global */
.busca-titulo { padding: 8px 16px; background: var(--bg-deep); color: var(--suave); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.busca-msg { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 16px; border-bottom: 1px solid var(--borda); cursor: pointer; }
.busca-msg:hover { background: var(--hover); }
.busca-msg strong { font-size: 14px; }
.busca-msg small { color: var(--suave); font-size: 11.5px; }
.busca-msg span { grid-column: 1 / -1; color: var(--suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-msg mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
.msg.destaque, .nota-interna.destaque { animation: destaque 2.2s ease-out; }
@keyframes destaque { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: none; } }
.et-cor-linha { display: flex; align-items: center; gap: 10px; }
.et-previa { flex: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--borda); background: #2F7A5C; }
.et-previa.invalida { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(220,38,38,.35) 5px 7px); }
#et-cor { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }

/* Menu "mais ações" */
.mais-wrap { position: relative; flex: none; }
.menu-mais { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 250px; padding: 6px; background: var(--bg); border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 10px 30px rgba(11, 20, 26, .25); }
.menu-mais button { display: block; width: 100%; padding: 9px 12px; background: transparent; color: var(--texto); text-align: left; font-size: 14px; border-radius: 8px; }
.menu-mais button:hover { background: var(--hover); }

/* Pesquisar na conversa */
.buscaconv { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--header); border-bottom: 1px solid var(--borda); }
.buscaconv input { flex: 1; min-width: 0; padding: 7px 12px; background: var(--input, var(--bg-deep)); border-radius: 8px; font-size: 14px; }
.bc-n { color: var(--suave); font-size: 12.5px; white-space: nowrap; min-width: 52px; text-align: center; }
.buscaconv .ic { width: 32px; height: 32px; font-size: 16px; }
.msg.achado { box-shadow: 0 0 0 3px var(--accent); }

/* Galeria */
.gal-abas { margin: 0 0 4px; }
.gal-corpo { min-height: 160px; max-height: 60vh; overflow-y: auto; }
.gal-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.gal-thumb { aspect-ratio: 1; padding: 0; border-radius: 8px; background: var(--bg-deep); display: grid; place-items: center; font-size: 28px; overflow: hidden; }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-corpo .rr-info a { color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Anexos múltiplos */
.anexo-previa { flex-direction: column; align-items: stretch; gap: 6px; max-height: 220px; overflow-y: auto; }
.anexo-item { display: flex; align-items: center; gap: 10px; }
.anexo-item img { height: 48px; width: 48px; max-width: none; object-fit: cover; border-radius: 8px; }
.anexo-doc { width: 48px; height: 48px; display: grid; place-items: center; font-size: 24px; background: var(--bg-deep); border-radius: 8px; }
.anexo-nome-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--texto); }
.anexo-item small { color: var(--suave); font-size: 12px; white-space: nowrap; }
.anexo-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--suave); }
.anexo-rodape label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--suave); }

/* Menu da mensagem, dados e encaminhar */
.responder.menu-msg { right: 64px; font-size: 16px; }
@media (hover: none) { .responder.menu-msg { display: grid; opacity: .6; } }
.msg-menu { position: absolute; top: 32px; right: 4px; z-index: 30; min-width: 190px; padding: 4px; background: var(--bg); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(11, 20, 26, .25); }
.msg-menu button { display: block; width: 100%; padding: 8px 10px; background: transparent; color: var(--texto); text-align: left; font-size: 14px; border-radius: 7px; }
.msg-menu button:hover { background: var(--hover); }
.info-corpo { display: flex; flex-direction: column; gap: 2px; }
.info-linha { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.info-linha:first-child { border-top: 0; }
.info-linha span { color: var(--suave); }
.info-linha b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.enc-item { cursor: pointer; }
.enc-item:hover { background: var(--hover); }
#enc-busca { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 100; padding: 10px 16px; border-radius: 10px; background: #111b21; color: #fff; font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }

/* Alertas e modelos (admin) */
.cfg-sub { margin: 18px 0 6px; font-size: 15px; }
.cfg-alertas { max-height: 220px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 4px 10px; }
.alerta { display: flex; flex-direction: column; padding: 7px 0; border-top: 1px solid var(--borda); }
.alerta:first-child { border-top: 0; }
.alerta strong { font-size: 13.5px; }
.alerta small { color: var(--suave); font-size: 12px; }
.ma-lista { max-height: 58vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 4px 10px; }
.ma-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--borda); }
.ma-item:first-child { border-top: 0; }
.ma-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ma-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ma-status { padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 18px; }
.ma-status.ok { background: #dcfce7; color: #15803d; }
.ma-status.espera { background: #fef3c7; color: #b45309; }
.ma-status.erro { background: #fee2e2; color: #b91c1c; }
.ma-info small { color: var(--suave); }
.ma-corpo { color: var(--suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-item button { padding: 5px 10px; font-size: 12.5px; }
.mf-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.dlg-form input, .dlg-form select { font: inherit; }
#dlg-modelo-form .dlg-form input, #dlg-modelo-form .dlg-form select { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); }
.mf-exemplos { display: flex; flex-direction: column; gap: 8px; }
.mf-rot { display: block; margin-bottom: 6px; font-size: 13px; color: var(--suave); }
.mf-botoes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mf-botao { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 6px; align-items: center; }
.mf-botao .hidden { display: none; }
#mf-fechar, #ma-fechar { background: var(--critico); color: #fff; }
#dlg-modelo-form, #dlg-modelos-adm { width: min(820px, 96vw); }
#dlg-vinculo { width: min(560px, 96vw); }
.mf-vinculo { display: flex; flex-direction: column; gap: 10px; }
.mf-vinculo select, #dlg-vinculo select { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); }
@media (max-width: 720px) { .mf-grade { grid-template-columns: 1fr; } .mf-botao { grid-template-columns: 1fr 1fr; } }
/* Itens da lista com altura que acompanha o conteúdo (etiquetas deixam o item mais alto); mínimo de 72 px */
#contatos li { height: auto; min-height: 72px; align-items: stretch; }
#contatos li .avatar { align-self: center; }
#contatos .info { height: auto; padding: 9px 0; }
.responder.menu-msg { right: 64px; }
.responder.menu-msg:hover { color: var(--texto); }

/* Ícones: um único padrão (contorno 1,8 px) */
.ico-inline { display: inline-flex; vertical-align: -3px; }
.status-btn svg, .menu-mais svg, .msg-menu svg { flex: none; vertical-align: -3px; margin-right: 2px; }
.nota-rotulo { display: inline-flex; align-items: center; gap: 4px; }
.alerta-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3b82f6; margin-right: 2px; }
.alerta-ponto.critico { background: #dc2626; }
.alerta-ponto.aviso { background: #f59e0b; }
.hora .ico-inline, .resp-badge .ico-inline { vertical-align: -2px; }
.previa .ico-inline { opacity: .85; }
.lista-toggle svg, .visor-nav svg, #visor-fechar svg { display: block; margin: auto; }
.gal-thumb svg { color: var(--suave); }
#enviar svg, #grav-enviar svg { display: block; }

/* Arrastar e soltar */
.conversa { position: relative; }
.solte { position: absolute; inset: 8px; z-index: 50; display: grid; place-items: center; border: 3px dashed var(--accent); border-radius: 16px; background: rgba(47, 122, 92, .12); color: var(--accent-forte); font-size: 18px; font-weight: 700; pointer-events: none; backdrop-filter: blur(2px); }
#sd-fechar { background: var(--critico); color: #fff; }
#dlg-saude .alerta { padding-top: 10px; }
code { padding: 0 4px; border-radius: 4px; background: var(--bg-deep); font-size: 12px; }

/* Configurações: duas colunas, no estilo do WhatsApp Web */
.cfgw-dlg { width: min(1040px, 96vw); height: min(680px, 92vh); padding: 0; overflow: hidden; }
.cfgw { display: grid; grid-template-columns: 340px 1fr; height: 100%; }
.cfgw-menu { display: flex; flex-direction: column; min-height: 0; background: var(--bg); border-right: 1px solid var(--borda); }
.cfgw-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 8px 20px; }
.cfgw-topo h2 { margin: 0; font-size: 22px; font-weight: 600; }
.cfgw-busca { display: flex; align-items: center; gap: 10px; margin: 8px 20px 10px; padding: 0 14px; height: 40px; border-radius: 999px; background: var(--bg-deep); color: var(--suave); }
.cfgw-busca input { flex: 1; min-width: 0; background: transparent; font-size: 14px; }
.cfgw-perfil { display: flex; align-items: center; gap: 14px; margin: 0 20px; padding: 12px 0 16px; border-bottom: 1px solid var(--borda); }
.cfgw-perfil .avatar { width: 56px; height: 56px; font-size: 24px; color: #fff; }
.cfgw-perfil-txt { display: flex; flex-direction: column; min-width: 0; }
.cfgw-perfil-txt b { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfgw-perfil-txt small { color: var(--suave); }
.cfgw-nav { flex: 1; overflow-y: auto; padding: 8px 10px 14px; }
.cfgw-item { display: flex; align-items: center; gap: 18px; width: 100%; padding: 12px 12px; border-radius: 12px; background: transparent; color: var(--texto); text-align: left; }
.cfgw-item:hover { background: var(--hover); }
.cfgw-item.ativa { background: var(--sel); }
.cfgw-item.filtrado { display: none; }
.cfgw-ic { flex: none; display: grid; place-items: center; width: 28px; color: var(--suave); }
.cfgw-tx { display: flex; flex-direction: column; min-width: 0; }
.cfgw-tx b { font-size: 15px; font-weight: 400; }
.cfgw-tx small { color: var(--suave); font-size: 12.5px; line-height: 1.3; }
.cfgw-item.perigo, .cfgw-item.perigo .cfgw-ic { color: var(--critico); }
.cfgw-item.so-admin.hidden { display: none; }
.cfgw-painel { position: relative; min-height: 0; background: var(--bg-deep); overflow: hidden; }
.cfgw-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--texto); }
.cfgw-vazio.hidden { display: none; }
.cfgw-vazio-ic { color: #aeb3b8; }
.cfgw-vazio h3 { margin: 0; font-size: 26px; font-weight: 400; }
.cfgw-sec { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.cfgw-sec.hidden { display: none; }
.cfgw-sec-topo { display: flex; align-items: center; gap: 12px; padding: 20px 24px 12px; }
.cfgw-sec-topo h3 { flex: 1; margin: 0; font-size: 22px; font-weight: 500; }
.cfgw-sec-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px 24px; }
.cfgw-voltar { display: none; }
.cfgw-sec .cfg-lista { max-height: none; background: var(--bg); border-radius: 14px; padding: 0 16px; }
.cfgw-sec .cfg-item { flex-wrap: wrap; }
.cfgw-sec .cfg-item:last-child { border-bottom: 0; }
.cfgw-sec .cfg-alertas { max-height: none; background: var(--bg); border: 0; border-radius: 14px; padding: 6px 16px; }
.cfgw-sec .info-corpo { background: var(--bg); border-radius: 14px; padding: 6px 16px; }
.cfgw-txt { margin: 0 0 16px; color: var(--texto); line-height: 1.5; }
@media (max-width: 860px) {
  .cfgw { grid-template-columns: 1fr; }
  .cfgw-painel { display: none; }
  .cfgw-dlg.com-secao .cfgw-menu { display: none; }
  .cfgw-dlg.com-secao .cfgw-painel { display: block; }
  .cfgw-voltar { display: grid; }
}

/* Permissões: telas em somente leitura */
.somente-leitura .dlg-form > label, .somente-leitura #rr-salvar, .somente-leitura #rr-novo, .somente-leitura #et-criar, .somente-leitura #et-cancelar, .somente-leitura #et-salvar.sem, .somente-leitura .rr-linha > button.sec { display: none !important; }
#dlg-etiquetas.somente-leitura #et-salvar { display: inline-flex !important; }

/* Paginação */
.carregar-mais, .carregar-antigas { list-style: none; align-self: center; padding: 10px 16px; margin: 8px auto; border-radius: 999px; background: var(--bg-deep); color: var(--link); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
#contatos .carregar-mais { display: block; height: auto; margin: 10px 16px; }
.carregar-antigas { display: block; }

/* Atendimento, métricas e permissões (⚙) */
.cfg-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.cfg-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
.cfg-form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); font-size: 14px; }
.cfg-form select, .cfg-form textarea, .cfg-form input[type="number"], .cfg-form input[type="time"] { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.cfg-form textarea { resize: vertical; }
.at-dias { display: flex; flex-direction: column; gap: 6px; background: var(--bg); border-radius: 12px; padding: 8px 12px; }
.at-dia { display: grid; grid-template-columns: 170px auto auto auto; align-items: center; gap: 8px; }
.at-dia input[type="time"] { padding: 5px 8px; }
.mt-controles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mt-controles select { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.mt-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mt-cartao { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.mt-cartao small { color: var(--suave); font-size: 12px; }
.mt-cartao b { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.mt-grafico { margin: 16px 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.mt-legenda { display: flex; gap: 16px; font-size: 12px; color: var(--suave); margin-bottom: 8px; }
.mt-legenda i, .mt-col i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.rec { background: #5c6bc0; } .env { background: var(--accent); } .res { background: #f59e0b; }
.mt-barras { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.mt-col { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.mt-col i { flex: 1; width: auto; min-width: 2px; margin: 0; border-radius: 3px 3px 0 0; }
.mt-eixo { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--suave); }
.mt-tabela { width: 100%; border-collapse: collapse; background: var(--bg); border-radius: 12px; overflow: hidden; font-size: 14px; }
.mt-tabela th, .mt-tabela td { padding: 9px 12px; text-align: right; border-top: 1px solid var(--borda); }
.mt-tabela th:first-child, .mt-tabela td:first-child { text-align: left; }
.mt-tabela thead th { border-top: 0; color: var(--suave); font-size: 12px; font-weight: 600; }
.pm-tabela th, .pm-tabela td { text-align: center; }
.pm-tabela th:first-child, .pm-tabela td:first-child { text-align: left; text-transform: capitalize; }
.resp-badge, .resp-badge.eu { background: var(--bg-deep); color: var(--texto); }

/* Configurações: cabe sem barra de rolagem interna */
.cfgw-dlg { height: min(860px, 96vh); }
.cfgw-item { padding: 8px 12px; gap: 16px; }
.cfgw-nav { scrollbar-width: none; }
.cfgw-nav::-webkit-scrollbar { display: none; }
.cfgw-perfil { padding: 8px 0 12px; }
.cfgw-busca { margin: 4px 20px 8px; }

/* Prévia de link, pedido de localização, erros */
.previa-link.hidden { display: none; }
.card-link { display: flex; flex-direction: column; margin-top: 6px; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, .06); color: inherit; border-left: 4px solid var(--accent); }
.card-link img { width: 100%; max-height: 160px; object-fit: cover; }
.card-link-txt { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; min-width: 0; }
.card-link-txt strong { font-size: 13.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-link-txt span { font-size: 12.5px; color: var(--suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-link-txt small { color: var(--suave); font-size: 11.5px; }
.pedido-loc { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--borda); }
.pedido-loc input { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.er-item { background: var(--bg); border-radius: 12px; padding: 8px 14px; margin-bottom: 8px; }
.er-item summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; list-style: none; font-size: 13.5px; }
.er-item summary::-webkit-details-marker { display: none; }
.er-item summary span { flex-basis: 100%; color: var(--suave); overflow-wrap: anywhere; }
.er-item summary small { color: var(--suave); }
.er-item pre { margin: 8px 0 2px; padding: 8px; background: var(--bg-deep); border-radius: 8px; font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow-y: auto; }

/* Mensagem interativa e favoritas */
.in-grupo { display: flex; flex-direction: column; gap: 8px; }
.in-grupo.hidden { display: none; }
.in-linha { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
#in-linhas .in-linha { grid-template-columns: 1fr 1.4fr auto; }
.in-linha input, #dlg-interativa .dlg-form input, #dlg-interativa .dlg-form select, #dlg-interativa .dlg-form textarea { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
#in-fechar { background: var(--critico); color: #fff; }
.estrela { color: #f59e0b; margin-right: 3px; }
.estrela svg { fill: currentColor; }
.fav-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px; background: var(--bg); cursor: pointer; }
.fav-item:hover { background: var(--hover); }
.fav-item small { color: var(--suave); }
.fav-item span { grid-column: 1 / -1; color: var(--suave); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ocultar/exibir a lista: menu hambúrguer no topo (substitui a aba lateral) */
@media (min-width: 721px) {
  .lista-toggle, .app.lista-oculta .lista-toggle { top: 9px; left: 8px; transform: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; box-shadow: none; opacity: 1; color: var(--suave); z-index: 8; }
  .lista-toggle:hover { background: var(--hover); }
  .lista-topo { padding-left: 54px; }
  .app.lista-oculta .topo { padding-left: 58px; }
}

/* Envio de modelo: preenchimento à esquerda, pré-visualização à direita */
#dlg-modelo { width: min(920px, 96vw); }
.modelo-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.modelo-esq { display: flex; flex-direction: column; gap: 14px; }
.modelo-dir { position: sticky; top: 0; }
.modelo-dir .modelo-previa { max-height: 60vh; }
@media (max-width: 720px) { .modelo-grade { grid-template-columns: 1fr; } .modelo-dir { position: static; } }

/* Formulário de modelo: exemplos à esquerda e vínculo com a guia à direita, na mesma linha de cada variável */
#dlg-modelo-form { width: min(1040px, 96vw); }
.mf-expr { display: flex; gap: 6px; }
.mf-expr input { flex: 1 1 auto; min-width: 0; }
.mf-vars .mf-expr select, #dlg-vinculo .mf-expr select { flex: 0 0 150px; width: 150px; }
.mf-vars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
.mf-vars:has(#mf-mapa:not(.hidden)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mf-vars input, .mf-vars select { height: 40px; box-sizing: border-box; width: 100%; }
@media (max-width: 720px) { .mf-vars:has(#mf-mapa:not(.hidden)) { grid-template-columns: 1fr; } }

/* Campos de upload nos diálogos: área tracejada com botão no padrão do app */
.dlg-form input[type="file"] { width: 100%; box-sizing: border-box; padding: 12px; border: 1.5px dashed var(--borda); border-radius: 10px; background: var(--camada, var(--bg)); color: var(--suave); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.dlg-form input[type="file"]:hover { border-color: var(--accent); }
.dlg-form input[type="file"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlg-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.dlg-form input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }

/* Aviso em card vermelho (ex.: dados importados da guia) */
.aviso-vermelho { padding: 10px 12px; border: 1px solid #f5b5b5; border-left: 4px solid #dc2626; border-radius: 8px; background: #fee2e2; color: #991b1b; font-size: 13px; line-height: 1.4; }
:root[data-tema="escuro"] .aviso-vermelho, :root[data-tema="dark"] .aviso-vermelho { background: #3b1414; border-color: #7f2a2a; color: #fecaca; }

/* Pré-visualização do modelo centralizada na coluna da direita */
.modelo-dir { position: static; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.modelo-dir .modelo-previa { width: 100%; }
@media (max-width: 720px) { .modelo-dir { align-self: auto; } }
#modelo-guia-alerta { display: flex; flex-direction: column; gap: 8px; }
#modelo-guia-alerta label.check { color: inherit; font-weight: 600; }

/* Seletor de emoji */
.emoji-painel { position: absolute; left: 16px; bottom: calc(100% + 4px); width: min(360px, calc(100% - 32px)); background: var(--bg); border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 8px 28px rgba(11, 20, 26, .22); z-index: 25; overflow: hidden; }
.emoji-abas { display: flex; border-bottom: 1px solid var(--borda); }
.emoji-aba { flex: 1; padding: 8px 0; font-size: 18px; background: none; border-bottom: 2px solid transparent; cursor: pointer; }
.emoji-aba.ativa { border-bottom-color: var(--accent); }
.emoji-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; max-height: 240px; overflow-y: auto; }
.emoji { padding: 4px 0; font-size: 22px; line-height: 1.2; background: none; border-radius: 6px; cursor: pointer; }
.emoji:hover { background: var(--camada); }
.emoji-grade .dica { grid-column: 1 / -1; text-align: center; }

/* Carrossel */
#dlg-carrossel { width: min(720px, 96vw); }
.ca-cartoes { display: flex; flex-direction: column; gap: 12px; }
.ca-cartao { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px 44px; border: 1px solid var(--borda); border-radius: 10px; }
.ca-cartao::before { content: attr(data-n); position: absolute; left: 12px; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.ca-cartao input:not([type="file"]), .ca-cartao textarea { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; resize: vertical; }
.ca-x { position: absolute; right: 8px; top: 8px; }

/* Custos */
#cu-mes { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.cu-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cu-tabela th, .cu-tabela td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--borda); }
.cu-tabela th:first-child, .cu-tabela td:first-child { text-align: left; }
.cu-tabela th { color: var(--suave); font-weight: 600; }
.cu-tabela tfoot td { font-weight: 700; border-bottom: 0; }
.cu-tabela tfoot td:first-child { text-align: left; }
.cu-nota { margin-top: 12px; text-align: left; }
.cu-gratis { margin-top: 12px; }

/* Aviso da janela de 24 h acima do compositor */
.janela-aviso { display: flex; align-items: center; gap: 12px; margin: 0; border-radius: 0; border-left-width: 4px; border-right: 0; border-top: 0; }
.janela-aviso .ja-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.janela-aviso button { flex: none; }

/* ⚙ → Mensagens rápidas */
.mr-lista { max-height: 320px; margin-bottom: 14px; }
.mr-form { display: flex; flex-direction: column; gap: 12px; }
.mr-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
.mr-form input, .mr-form textarea { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; resize: vertical; }
.mr-form .dlg-acoes { justify-content: flex-end; }

/* Configurações como página: ocupa a tela toda, com o menu à esquerda e a seção ao lado */
.cfgw-dlg { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border-radius: 0; border: 0; box-shadow: none; }
.cfgw { grid-template-columns: minmax(300px, 360px) 1fr; }
.cfgw-sec-topo { padding: 24px clamp(24px, 4vw, 64px) 12px; }
.cfgw-sec-corpo { padding: 4px clamp(24px, 4vw, 64px) 32px; }
.cfgw-sec-topo h3 { font-size: 24px; }
.cfgw-sec .cfgw-sec-corpo > * { max-width: 1280px; }
@media (max-width: 860px) { .cfgw { grid-template-columns: 1fr; } }

/* Botão Sair do cabeçalho em vermelho */
#sair { color: var(--critico); }
#sair:hover { background: color-mix(in srgb, var(--critico) 12%, transparent); }

/* Selo do responsável: fundo preto, ícone e texto brancos */
.resp-badge, .resp-badge.eu { background: #000; color: #fff; }
.resp-badge .ico-inline { stroke: #fff; }
:root[data-tema="escuro"] .resp-badge, :root[data-tema="escuro"] .resp-badge.eu { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }

/* Indicativo de janela de 24 h aberta na lista de conversas */
.janela-ok { color: var(--accent-forte); }
.janela-fechada { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: 10.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }
:root[data-tema="escuro"] .janela-fechada { background: #3b1414; color: #fecaca; }

/* Telefone clicável nos cartões de contato */
.link-tel { padding: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }
.janela-ok { margin-right: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.janela-ok.acabando { color: #d97706; }

/* ⚙ → Auditoria */
.mt-controles input[type="search"] { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; min-width: 180px; }
.au-tabela th, .au-tabela td { text-align: left; vertical-align: top; }
.au-tabela td:first-child { white-space: nowrap; }

/* Rodízio: separador no Atendimento e disponibilidade no menu das Configurações */
.at-sep { border: 0; border-top: 1px solid var(--borda); margin: 18px 0; }
.cfgw-disp { display: flex; align-items: center; gap: 10px; margin: 8px 20px 4px; font-size: 13.5px; color: var(--texto); cursor: pointer; }

/* Tarefas: seleção de mensagens, chip #N e página da tarefa */
.selecao-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--accent-claro); color: var(--accent-forte); font-size: 14px; }
.sel-acoes { display: flex; gap: 8px; }
.modo-selecao .msg { pointer-events: none; }
.modo-selecao .msg.selecionavel { pointer-events: auto; cursor: pointer; position: relative; outline: 2px solid transparent; outline-offset: 2px; }
.modo-selecao .msg.selecionavel * { pointer-events: none; }
.modo-selecao .msg.selecionavel.selecionada { outline-color: var(--accent); }
.modo-selecao .msg.selecionavel::before { content: ''; position: absolute; top: 6px; left: -26px; width: 18px; height: 18px; border: 2px solid var(--borda); border-radius: 50%; background: var(--bg); }
.modo-selecao .msg.eu.selecionavel::before { left: auto; right: -26px; }
.modo-selecao .msg.selecionavel.selecionada::before { background: var(--accent); border-color: var(--accent); }
.tarefa-chip { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 17px; cursor: pointer; background: #fef3c7; color: #92400e; }
.tarefa-chip.concluida { background: #d1fae5; color: #065f46; }
.tarefa-chip.cancelada { background: #e5e7eb; color: #4b5563; }
:root[data-tema="escuro"] .tarefa-chip { background: #4a3a12; color: #fde68a; }
:root[data-tema="escuro"] .tarefa-chip.concluida { background: #0f3d2e; color: #a7f3d0; }
:root[data-tema="escuro"] .tarefa-chip.cancelada { background: #374151; color: #d1d5db; }
.tn-msgs { max-height: 220px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 4px 10px; }
.tn-msg { padding: 8px 0; border-top: 1px solid var(--borda); }
.tn-msg:first-child { border-top: 0; }
.tn-msg small { color: var(--suave); }
.tarefa-dlg { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border: 0; border-radius: 0; padding: 0; background: var(--bg-deep); }
.tp { display: flex; flex-direction: column; height: 100%; }
.tp-topo { display: flex; align-items: center; gap: 12px; padding: 16px clamp(16px, 4vw, 48px); background: var(--bg); border-bottom: 1px solid var(--borda); }
.tp-titulo { flex: 1; min-width: 0; }
.tp-titulo small { color: var(--suave); font-weight: 600; }
.tp-titulo h2 { margin: 0; font-size: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-status { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--bg); color: var(--texto); font: inherit; font-weight: 600; }
.tp-status.concluida { border-color: #10b981; color: #047857; }
.tp-status.cancelada { border-color: #9ca3af; color: #6b7280; }
.tp-status.andamento { border-color: #f59e0b; color: #b45309; }
.tp-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 20px; padding: 20px clamp(16px, 4vw, 48px); overflow: hidden; }
.tp-esq, .tp-dir { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.tp h3 { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.tp-desc { margin: 0; white-space: pre-wrap; }
.tp-meta { text-align: left; margin: 0; }
.tp-msgs, .tp-coments { display: flex; flex-direction: column; gap: 8px; }
.tp-coments { flex: 1; min-height: 120px; overflow-y: auto; }
.tp-msg, .tp-com { padding: 10px 12px; border-radius: 10px; background: var(--bg); white-space: pre-wrap; }
.tp-msg.e { background: var(--balao-out, var(--accent-claro)); }
.tp-msg small, .tp-com small { display: block; color: var(--suave); margin-bottom: 2px; }
.tp-com.status { background: transparent; border: 1px dashed var(--borda); color: var(--suave); }
.tp-novo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
.tp-novo textarea { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; resize: vertical; }
@media (max-width: 860px) { .tp-corpo { grid-template-columns: 1fr; overflow-y: auto; } .tp-esq, .tp-dir { overflow: visible; } }
.tl-lista { display: flex; flex-direction: column; gap: 8px; }
.tl-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); text-align: left; color: var(--texto); cursor: pointer; }
.tl-item:hover { background: var(--hover); }
.tl-info { display: flex; flex-direction: column; min-width: 0; }
.tl-info small { color: var(--suave); }

/* O botão "ir para o fim" sobe quando há uma barra acima do compositor (seleção de mensagens, aviso da janela de 24 h) */
.conversa:has(#selecao-barra:not(.hidden)) .ir-fim { bottom: 136px; }
.conversa:has(#janela-aviso:not(.hidden)) .ir-fim { bottom: 150px; }
.conversa:has(#selecao-barra:not(.hidden)):has(#janela-aviso:not(.hidden)) .ir-fim { bottom: 210px; }

/* Fechar e Cancelar em vermelho */
button.btn-perigo, button.sec.btn-perigo { background: var(--critico); color: #fff; }
button.btn-perigo:hover:not(:disabled) { filter: brightness(1.08); }

/* Aba Tarefas */
.tarefas-painel { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.tab-filtros select { width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }
.tl-info small b { color: var(--texto); font-weight: 600; }
.tl-info { gap: 1px; }

/* Selo da tarefa sempre à esquerda da bolha; o horário e o status ficam à direita */
.meta .tarefa-chip { margin-right: 4px; }
.meta .tarefa-chip:last-of-type { margin-right: auto; }

/* Mídias na página da tarefa: mesmo padrão da conversa */
.tp-msg .doc, .tp-msg .doc:hover { text-decoration: none; }
.tp-msg audio { max-width: 100%; }
.tp-msg video { max-width: 100%; border-radius: 6px; display: block; margin-bottom: 4px; }
.tp-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; }
.tp-msg .thumb img { max-width: min(320px, 70vw); max-height: 320px; object-fit: cover; display: block; }
.tp-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; }
.tp-msg .doc:hover { filter: brightness(.97); }

/* Status Reaberta */
.tarefa-chip.reaberta { background: #dbeafe; color: #1e40af; }
.tp-status.reaberta { border-color: #3b82f6; color: #1d4ed8; }
:root[data-tema="escuro"] .tarefa-chip.reaberta { background: #1e3a5f; color: #bfdbfe; }

/* Confirmações e avisos dentro do app */
dialog.dlg-conf { width: min(420px, 94vw); }
.conf-topo { display: flex; align-items: center; gap: 12px; }
.conf-topo h2 { margin: 0; font-size: 18px; font-weight: 600; }
.conf-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-claro); color: var(--accent-forte); }
.conf-ic.perigo { background: #fee2e2; color: #b91c1c; }
:root[data-tema="escuro"] .conf-ic.perigo { background: #3b1414; color: #fecaca; }
.conf-texto { margin: 0; font-size: 15px; line-height: 1.45; text-align: left; color: var(--texto); white-space: pre-line; }
.conf-detalhe { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--bg-deep); font-size: 13.5px; line-height: 1.45; text-align: left; color: var(--suave); white-space: pre-line; }

/* Filtro de status das tarefas em caixas de seleção */
.tab-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 2px; }
.tab-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--texto); cursor: pointer; }
.tab-checks input { width: 16px; height: 16px; accent-color: var(--accent); }
.tab-checks-linha { align-items: center; }

/* Tarefas do contato (cabeçalho da conversa) */
.tc-lista { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.tc-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--bg-deep); color: var(--texto); text-align: left; cursor: pointer; font-size: 14px; line-height: 1.4; }
.tc-item:hover { background: var(--hover); }
.tc-l2 { color: var(--suave); font-size: 13px; }

/* Campos de seleção mais simples: sem borda, fundo suave e seta discreta */
select:not([size]):not([multiple]):not(.tp-status) {
  appearance: none; -webkit-appearance: none;
  border: 1px solid transparent !important; border-radius: 8px;
  background-color: var(--bg-deep) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  padding: 9px 32px 9px 12px; cursor: pointer;
}
select:not([size]):not([multiple]):not(.tp-status):hover { background-color: var(--hover) !important; }
select:not([size]):not([multiple]):not(.tp-status):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:root[data-tema="escuro"] select:not([size]):not([multiple]):not(.tp-status) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* Filtros das tarefas: espaço entre o status e o usuário */
.tab-filtros { display: flex; flex-direction: column; gap: 12px; }
.tab-filtros select { width: 100%; }
.tab-checks { padding: 2px 4px; }

/* Filtro de usuários (um ou mais) */
details.multi { position: relative; }
details.multi > summary { list-style: none; cursor: pointer; padding: 9px 32px 9px 12px; border-radius: 8px; background-color: var(--bg-deep); color: var(--texto); font-size: 14px; user-select: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
details.multi > summary::-webkit-details-marker { display: none; }
details.multi > summary:hover { background-color: var(--hover); }
.multi-lista { position: absolute; z-index: 30; left: 0; right: 0; min-width: 220px; margin-top: 4px; max-height: 260px; overflow-y: auto; padding: 6px; border: 1px solid var(--borda); border-radius: 10px; background: var(--bg); box-shadow: 0 8px 28px rgba(11, 20, 26, .18); }
.multi-lista label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 14px; color: var(--texto); cursor: pointer; }
.multi-lista label:hover { background: var(--hover); }
.multi-lista input { width: 16px; height: 16px; accent-color: var(--accent); }
.mt-controles details.multi { min-width: 200px; }

/* Ir para a mensagem (página da tarefa) */
.tp-msg-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.tp-msg-topo small { margin: 0; }
.tp-ir { padding: 2px 8px; border-radius: 6px; background: transparent; color: var(--accent-forte); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tp-ir:hover { background: var(--hover); }
.tp-ir .ico-inline { vertical-align: -2px; }

/* Tarefas do Contato: card mais largo e grupos por status */
#dlg-tarefas-contato { width: min(860px, 96vw); }
.tc-grupo { margin: 10px 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--suave); }
.tc-grupo:first-child { margin-top: 0; }
.tc-grupo.andamento { color: #b45309; }
.tc-grupo.reaberta { color: #1d4ed8; }
.tc-grupo.concluida { color: #047857; }

/* Leitor de PDF interno do visor (pdf.js) */
.visor-corpo { position: relative; }
.pdf-int { position: absolute; inset: 0; overflow: auto; padding: 12px 12px 64px; background: rgba(0, 0, 0, .25); }
.pdf-paginas { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pdf-pagina { position: relative; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .45); border-radius: 2px; flex: none; }
.pdf-pagina canvas { display: block; }
.pdf-ctl { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(32, 44, 51, .92); color: #fff; font-size: 13px; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
.pdf-ctl button { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.pdf-ctl button:hover { background: rgba(255, 255, 255, .28); }
.pdf-pct { min-width: 42px; text-align: center; }
.pdf-pos { min-width: 36px; text-align: center; color: rgba(255, 255, 255, .75); }

/* Modelos em página inteira (lista, criação e edição) */
#dlg-modelo-form, #dlg-modelos-adm, dialog.pagina-dlg { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border: 0; border-radius: 0; padding: 0; background: var(--bg-deep); }
.pg { display: flex; flex-direction: column; height: 100%; }
.pg-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(16px, 4vw, 48px); background: var(--bg); border-bottom: 1px solid var(--borda); }
.pg-topo h2 { margin: 0; font-size: 22px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-topo .dlg-acoes { flex: none; }
.pg-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px clamp(16px, 4vw, 48px) 32px; }
.pg-dica { margin: 0 0 14px; text-align: left; }
#dlg-modelos-adm .ma-lista { max-height: none; border: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 12px; overflow: visible; }
#dlg-modelos-adm .ma-item { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--bg); }
#dlg-modelos-adm .ma-corpo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#dlg-modelos-adm .ma-item > button { align-self: flex-start; }
.mf-pg { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; max-width: 1400px; margin: 0 auto; }
.mf-esq { padding: 0; }
.mf-dir { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.mf-dir .modelo-previa { max-height: 70vh; }
.mf-midia-previa { margin: -2px -2px 8px; padding: 36px 10px; border-radius: 6px; background: rgba(0, 0, 0, .08); color: var(--suave); text-align: center; font-size: 13px; }
@media (max-width: 960px) { .mf-pg { grid-template-columns: 1fr; } .mf-dir { position: static; } #dlg-modelos-adm .ma-lista { grid-template-columns: 1fr; } }

/* Payload da mensagem (admin) */
#dlg-payload-ver { width: min(860px, 96vw); }
.pv-topo { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pv-json { margin: 6px 0 0; max-height: 34vh; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--bg-deep); color: var(--texto); font: 12.5px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-all; user-select: text; text-align: left; }

/* Modelos: ações lado a lado, com cores por tipo */
.ma-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-item .ma-b { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.ma-item .ma-b:hover:not(:disabled) { filter: brightness(1.08); }
.ma-item .ma-b.vincular { background: #2563eb; }
.ma-item .ma-b.clonar { background: #7c3aed; }
.ma-item .ma-b.editar { background: #23664C; }
.ma-item .ma-b.excluir { background: #dc2626; }
.ma-item .ma-b:disabled { background: var(--bg-deep); color: var(--mudo); cursor: not-allowed; }

/* Payload da mensagem: payload à esquerda e registro à direita */
#dlg-payload-ver { width: min(1360px, 96vw); }
.pv-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.pv-grade:has(#pv-bloco-payload.hidden) { grid-template-columns: minmax(0, 1fr); }
.pv-grade .pv-json { max-height: 62vh; }
@media (max-width: 900px) { .pv-grade { grid-template-columns: minmax(0, 1fr); } }

/* Menu da mensagem em posição fixa (não é cortado pela rolagem da conversa) */
.msg-menu { position: fixed; right: auto; z-index: 60; }

/* Botão Copiar em verde */
button.btn-copiar, button.sec.btn-copiar { background: var(--botao); color: #fff; }
button.btn-copiar:hover:not(:disabled) { filter: brightness(1.08); }

/* Botão de 3 pontos ao lado da bolha (abre todas as ações da mensagem) */
.msg .menu-msg { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 6px; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--suave); box-shadow: 0 1px 4px rgba(11, 20, 26, .25); opacity: 0; cursor: pointer; transition: opacity .12s; }
.msg.eu .menu-msg { left: auto; right: 100%; margin-left: 0; margin-right: 6px; }
.msg:hover .menu-msg, .msg .menu-msg:focus-visible { opacity: 1; }
.msg .menu-msg:hover { color: var(--texto); }
@media (hover: none) { .msg .menu-msg { opacity: .55; } }

/* Modelos: campos disponíveis para as variáveis */
.campos-info { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--bg); }
.campos-info > summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.campos-info .dica { text-align: left; margin: 8px 0 12px; }
.ci-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.ci-grade > div > strong { display: block; margin-bottom: 8px; font-size: 13.5px; }
.ci-lista { display: flex; flex-direction: column; gap: 8px; }
.ci-lista > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--bg-deep); font-size: 13.5px; }
.ci-lista code { align-self: flex-start; font-size: 12.5px; color: var(--accent-forte); }
.ci-lista span { color: var(--suave); }

/* Notas do Contato */
.nc-lista { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.nc-item { padding: 10px 12px; border-radius: 10px; background: #fff8d6; color: #3b3a2a; }
:root[data-tema="escuro"] .nc-item { background: #3a3220; color: #f4e6b0; }
.nc-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.nc-topo small { flex: 1; color: inherit; opacity: .7; }
.nc-topo button { padding: 3px 10px; font-size: 12px; }
.nc-texto { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.4; }

/* Janela de 24 h fechada: campo, anexo e áudio bloqueados */
.compositor textarea:disabled { cursor: not-allowed; opacity: .6; }
#gravar:disabled { opacity: .4; cursor: not-allowed; }
label.anexo.bloqueado { opacity: .4; pointer-events: none; }

/* Cadastro do contato antes da primeira mensagem */
#cadastro-btn { padding: 8px 14px; font-weight: 600; }
.cd-lista { max-height: 38vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 4px 8px; }
.cd-item { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--borda); font-size: 14px; color: var(--texto); cursor: pointer; }
.cd-item:first-child { border-top: 0; }
.cd-item input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

/* Botões do compositor bloqueados (janela de 24 h fechada) */
.compositor button.ic:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Estilo visual: cartões suaves, cantos arredondados (o único estilo do app) ---------- */
:root[data-estilo="a"] .app { background: var(--bg-deep); }
:root[data-estilo="a"] .lista { background: transparent; border-right: 0; }
:root[data-estilo="a"] .lista-topo, :root[data-estilo="a"] .busca-wrap, :root[data-estilo="a"] .abas { background: transparent; }
:root[data-estilo="a"] .busca-wrap input { border-radius: 99px; background: var(--bg); padding: 9px 16px; }
:root[data-estilo="a"] .abas { border-bottom: 0; padding: 4px 10px 8px; gap: 4px; }
:root[data-estilo="a"] .aba { border-bottom: 0; border-radius: 99px; padding: 7px 8px; }
:root[data-estilo="a"] .aba.ativa { background: var(--botao); color: #fff; }
:root[data-estilo="a"] .aba.ativa .n { background: #fff; color: var(--botao); }
:root[data-estilo="a"] #contatos { padding: 0 8px 8px; }
:root[data-estilo="a"] #contatos li { margin-bottom: 6px; padding: 0 12px; border-radius: 16px; background: var(--bg); }
:root[data-estilo="a"] #contatos li:hover { background: var(--hover); }
:root[data-estilo="a"] #contatos li.ativo { background: var(--accent-claro); }
:root[data-estilo="a"] #contatos .info { border-bottom: 0; }
:root[data-estilo="a"] .msg { border-radius: 18px; padding: 7px 12px 8px; }
:root[data-estilo="a"] .msg.primeira::before { display: none; }
:root[data-estilo="a"] .msg.primeira, :root[data-estilo="a"] .msg.eu.primeira { border-radius: 18px; }
:root[data-estilo="a"] .msg:not(.eu).primeira { border-top-left-radius: 6px; }
:root[data-estilo="a"] .msg.eu.primeira { border-top-right-radius: 6px; }
:root[data-estilo="a"] .compositor { background: var(--bg); }
:root[data-estilo="a"] .compositor textarea { border-radius: 99px; padding: 11px 18px; }
:root[data-estilo="a"] #enviar { border-radius: 50%; }
@media (min-width: 861px) {
  :root[data-estilo="a"] .conversa { margin: 8px 8px 8px 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--borda); }
}

/* ============ Variação A em todas as telas: cantos mais arredondados (gerado a partir dos raios de 8 a 14 px) ============ */
:root[data-estilo="a"] .aviso { border-radius: 14px; }
:root[data-estilo="a"] .resposta-card { border-radius: 14px; }
:root[data-estilo="a"] .btn-link { border-radius: 14px; }
:root[data-estilo="a"] .dlg-form select { border-radius: 14px; }
:root[data-estilo="a"] .dlg-form .modelo-campos input { border-radius: 14px; }
:root[data-estilo="a"] .modelo-previa { border-radius: 14px; }
:root[data-estilo="a"] .vinculos input#emp-filtro { border-radius: 14px; }
:root[data-estilo="a"] .emp-lista { border-radius: 14px; }
:root[data-estilo="a"] .status-btn { border-radius: 14px; }
:root[data-estilo="a"] .rr-lista { border-radius: 14px; }
:root[data-estilo="a"] .dlg-form textarea { border-radius: 14px; }
:root[data-estilo="a"] .dlg-form label input#rr-atalho { border-radius: 14px; }
:root[data-estilo="a"] .dlg-form input[type="datetime-local"] { border-radius: 14px; }
:root[data-estilo="a"] #num-empresa { border-radius: 14px; }
:root[data-estilo="a"] #num-empresa-filtro { border-radius: 14px; }
:root[data-estilo="a"] .et-previa { border-radius: 14px; }
:root[data-estilo="a"] #et-cor { border-radius: 14px; }
:root[data-estilo="a"] .menu-mais { border-radius: 18px; }
:root[data-estilo="a"] .menu-mais button { border-radius: 14px; }
:root[data-estilo="a"] .buscaconv input { border-radius: 14px; }
:root[data-estilo="a"] .gal-thumb { border-radius: 14px; }
:root[data-estilo="a"] .anexo-doc { border-radius: 14px; }
:root[data-estilo="a"] #enc-busca { border-radius: 14px; }
:root[data-estilo="a"] .toast { border-radius: 16px; }
:root[data-estilo="a"] .cfg-alertas { border-radius: 14px; }
:root[data-estilo="a"] .ma-lista { border-radius: 14px; }
:root[data-estilo="a"] #dlg-modelo-form .dlg-form input { border-radius: 14px; }
:root[data-estilo="a"] #dlg-modelo-form .dlg-form select { border-radius: 14px; }
:root[data-estilo="a"] .mf-vinculo select { border-radius: 14px; }
:root[data-estilo="a"] #dlg-vinculo select { border-radius: 14px; }
:root[data-estilo="a"] .cfgw-item { border-radius: 18px; }
:root[data-estilo="a"] .cfgw-sec .cfg-lista { border-radius: 20px; }
:root[data-estilo="a"] .cfgw-sec .cfg-alertas { border-radius: 20px; }
:root[data-estilo="a"] .cfgw-sec .info-corpo { border-radius: 20px; }
:root[data-estilo="a"] .cfg-form select { border-radius: 14px; }
:root[data-estilo="a"] .cfg-form textarea { border-radius: 14px; }
:root[data-estilo="a"] .cfg-form input[type="number"] { border-radius: 14px; }
:root[data-estilo="a"] .cfg-form input[type="time"] { border-radius: 14px; }
:root[data-estilo="a"] .at-dias { border-radius: 18px; }
:root[data-estilo="a"] .mt-controles select { border-radius: 14px; }
:root[data-estilo="a"] .mt-cartao { border-radius: 18px; }
:root[data-estilo="a"] .mt-grafico { border-radius: 18px; }
:root[data-estilo="a"] .mt-tabela { border-radius: 18px; }
:root[data-estilo="a"] .card-link { border-radius: 14px; }
:root[data-estilo="a"] .pedido-loc input { border-radius: 14px; }
:root[data-estilo="a"] .er-item { border-radius: 18px; }
:root[data-estilo="a"] .er-item pre { border-radius: 14px; }
:root[data-estilo="a"] .in-linha input { border-radius: 14px; }
:root[data-estilo="a"] #dlg-interativa .dlg-form input { border-radius: 14px; }
:root[data-estilo="a"] #dlg-interativa .dlg-form select { border-radius: 14px; }
:root[data-estilo="a"] #dlg-interativa .dlg-form textarea { border-radius: 14px; }
:root[data-estilo="a"] .fav-item { border-radius: 18px; }
:root[data-estilo="a"] .dlg-form input[type="file"] { border-radius: 16px; }
:root[data-estilo="a"] .dlg-form input[type="file"]::file-selector-button { border-radius: 14px; }
:root[data-estilo="a"] .aviso-vermelho { border-radius: 14px; }
:root[data-estilo="a"] .emoji-painel { border-radius: 18px; }
:root[data-estilo="a"] .ca-cartao { border-radius: 16px; }
:root[data-estilo="a"] .ca-cartao input:not([type="file"]) { border-radius: 14px; }
:root[data-estilo="a"] .ca-cartao textarea { border-radius: 14px; }
:root[data-estilo="a"] #cu-mes { border-radius: 14px; }
:root[data-estilo="a"] .mr-form input { border-radius: 14px; }
:root[data-estilo="a"] .mr-form textarea { border-radius: 14px; }
:root[data-estilo="a"] .mt-controles input[type="search"] { border-radius: 14px; }
:root[data-estilo="a"] .tn-msgs { border-radius: 14px; }
:root[data-estilo="a"] .tp-status { border-radius: 14px; }
:root[data-estilo="a"] .tp-msg { border-radius: 16px; }
:root[data-estilo="a"] .tp-com { border-radius: 16px; }
:root[data-estilo="a"] .tp-novo textarea { border-radius: 14px; }
:root[data-estilo="a"] .tl-item { border-radius: 18px; }
:root[data-estilo="a"] .tab-filtros select { border-radius: 14px; }
:root[data-estilo="a"] .conf-detalhe { border-radius: 14px; }
:root[data-estilo="a"] .tc-item { border-radius: 16px; }
:root[data-estilo="a"] select:not([size]):not([multiple]):not(.tp-status) { border-radius: 14px; }
:root[data-estilo="a"] details.multi > summary { border-radius: 14px; }
:root[data-estilo="a"] .multi-lista { border-radius: 16px; }
:root[data-estilo="a"] #dlg-modelos-adm .ma-item { border-radius: 18px; }
:root[data-estilo="a"] .pv-json { border-radius: 14px; }
:root[data-estilo="a"] .ma-item .ma-b { border-radius: 14px; }
:root[data-estilo="a"] .campos-info { border-radius: 18px; }
:root[data-estilo="a"] .ci-lista > div { border-radius: 14px; }
:root[data-estilo="a"] .nc-item { border-radius: 16px; }
:root[data-estilo="a"] .cd-lista { border-radius: 14px; }
:root[data-estilo="a"] dialog:not(.visor):not(.cfgw-dlg):not(.tarefa-dlg):not(.pagina-dlg) { border-radius: 24px; }
:root[data-estilo="a"] .dlg-acoes button, :root[data-estilo="a"] .dlg-form > button, :root[data-estilo="a"] .cfgw-sec-corpo button:not(.ic), :root[data-estilo="a"] .pg-topo button, :root[data-estilo="a"] .tp-topo button { border-radius: 14px; }
:root[data-estilo="a"] .dlg-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), :root[data-estilo="a"] .cfgw-sec-corpo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), :root[data-estilo="a"] .mt-controles input, :root[data-estilo="a"] .tp-novo textarea, :root[data-estilo="a"] .mr-form input, :root[data-estilo="a"] .mr-form textarea { border-radius: 14px; }
:root[data-estilo="a"] select:not([size]):not([multiple]):not(.tp-status), :root[data-estilo="a"] .tp-status { border-radius: 14px; }
:root[data-estilo="a"] details.multi > summary, :root[data-estilo="a"] .multi-lista { border-radius: 14px; }
:root[data-estilo="a"] .toast, :root[data-estilo="a"] .msg-menu, :root[data-estilo="a"] .estilo-menu { border-radius: 18px; }
:root[data-estilo="a"] .msg-menu button, :root[data-estilo="a"] .estilo-menu button { border-radius: 12px; }

/* Selo das mensagens "unsupported" com texto ajustado à mão */
.selo-ajustada { margin-top: 3px; padding: 1px 8px; width: fit-content; max-width: 100%; border-radius: 99px; background: #fff3cd; color: #7a5b00; font-size: 11.5px; font-weight: 500; }
:root[data-tema="escuro"] .selo-ajustada { background: #4a3d10; color: #ffd966; }

/* Variação A: campo de mensagem com borda de destaque, como o de pesquisa */
.compositor textarea { overflow-y: hidden; }
:root[data-estilo="a"] .compositor textarea { background: var(--bg); border: 1px solid var(--borda); }
:root[data-estilo="a"] .compositor textarea:focus { border-color: var(--accent-forte); outline: 0; }

/* Ajustar foto do contato (recorte) */
#dlg-recorte { width: min(380px, 94vw); }
.rc-area { position: relative; width: 320px; max-width: 100%; aspect-ratio: 1; margin: 6px auto 12px; border-radius: 12px; overflow: hidden; background: #fff; touch-action: none; }
.rc-area canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.rc-area canvas:active { cursor: grabbing; }
.rc-mascara { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(11, 20, 26, .55); pointer-events: none; }
.rc-controles { display: flex; flex-direction: column; gap: 10px; }
.rc-controles label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.rc-controles input[type="range"] { flex: 1; }

/* Cadastrar Contato: cartão mais largo e caixa de seleção ao lado do nome da empresa */
#dlg-cadastro { width: min(680px, 96vw); }
.dlg-form label.cd-item { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--texto); }

/* OpenAI API: uso, custos e saldo */
.oa-titulo { margin: 18px 0 8px; font-size: 14px; font-weight: 600; color: var(--suave); }
.oa-rolagem { overflow-x: auto; }
.oa-rolagem .mt-tabela td, .oa-rolagem .mt-tabela th { white-space: nowrap; }
.oa-rolagem .mt-tabela td:last-child { white-space: normal; min-width: 220px; text-align: left; }
.oa-credito { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.oa-credito label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); }
.oa-credito input { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--bg); color: var(--texto); font: inherit; }

/* ============ Métricas: seções, cartões com marcador, gráfico com eixo e detalhe, tabela com barras ============ */
.mt-secao { margin: 0 0 22px; }
.mt-secao-titulo { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); }
.mt-cartoes { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.mt-cartao { gap: 6px; padding: 16px 18px; border: 1px solid var(--borda); box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.mt-cartao-cab { display: flex; align-items: center; gap: 8px; }
.mt-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mudo, #8696a0); }
.tom-azul .mt-ponto { background: #5c6bc0; } .tom-verde .mt-ponto { background: var(--accent); } .tom-amarelo .mt-ponto { background: #f59e0b; }
.tom-vermelho .mt-ponto { background: #e53935; } .tom-cinza .mt-ponto { background: #8696a0; }
.tom-vermelho { border-color: rgba(229, 57, 53, .35); background: rgba(229, 57, 53, .06); }
.tom-vermelho b { color: #d32f2f; }
.mt-cartao b { font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
.mt-sub { color: var(--suave); font-size: 12px; }
.mt-progresso { height: 6px; margin-top: 6px; border-radius: 99px; background: var(--bg-deep); overflow: hidden; }
.mt-progresso span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.mt-grafico { margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--borda); box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.mt-graf-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.mt-graf-cab .mt-secao-titulo { margin: 0; }
.mt-leg { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--suave); }
.mt-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.mt-leg b { color: var(--texto); font-weight: 600; }
.mt-plot { display: grid; grid-template-columns: 38px 1fr; gap: 8px; }
.mt-y { display: flex; flex-direction: column; justify-content: space-between; height: 170px; text-align: right; font-size: 11px; color: var(--suave); transform: translateY(-6px); }
.mt-area { position: relative; height: 170px; }
.mt-linha { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--borda); }
.mt-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.mt-colx { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-radius: 6px; cursor: default; }
.mt-colx:hover { background: var(--hover); }
.mt-colx i { flex: 1; width: auto; min-width: 2px; max-width: 14px; border-radius: 4px 4px 0 0; }
.mt-dica { position: absolute; top: 0; z-index: 3; display: none; min-width: 150px; padding: 8px 10px; border-radius: 10px; background: #111b21; color: #e9edef; font-size: 12px; line-height: 1.6; pointer-events: none; box-shadow: 0 6px 18px rgba(11, 20, 26, .3); }
.mt-dica.aberta { display: block; }
.mt-dica i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.mt-plot-x { margin-top: 6px; }
.mt-eixo { display: flex; justify-content: space-between; font-size: 11px; color: var(--suave); margin: 0; }
.mt-atend { border: 1px solid var(--borda); }
.mt-atend th { padding: 11px 14px; background: var(--bg-deep); }
.mt-atend td { padding: 12px 14px; vertical-align: middle; }
.mt-atend tbody tr:hover { background: var(--hover); }
.mt-atend tfoot td { font-weight: 600; border-top: 2px solid var(--borda); background: var(--bg-deep); }
.mt-quem { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.mt-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 600; }
.mt-num { display: block; margin-bottom: 4px; }
.mt-mini { width: 100%; min-width: 70px; height: 4px; margin-left: auto; border-radius: 99px; background: var(--bg-deep); overflow: hidden; }
.mt-mini span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.mt-tempo { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--bg-deep); font-size: 13px; }
.mt-tempo.bom { background: rgba(47, 122, 92, .14); color: var(--accent-forte); }
.mt-tempo.medio { background: rgba(245, 158, 11, .16); color: #b26a00; }
.mt-tempo.ruim { background: rgba(229, 57, 53, .12); color: #c62828; }
:root[data-tema="escuro"] .mt-tempo.medio { color: #ffca66; }
:root[data-tema="escuro"] .mt-tempo.ruim { color: #ff8a80; }
@media (max-width: 640px) { .mt-cartoes { grid-template-columns: repeat(2, 1fr); } .mt-cartao b { font-size: 22px; } .mt-plot { grid-template-columns: 30px 1fr; } }

/* Métricas, Custos e OpenAI: barra de filtros em cartão, seletores em pílula e cartões que ocupam a largura toda */
.mt-secao .mt-cartoes { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .mt-secao .mt-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mt-secao .mt-cartoes { grid-template-columns: minmax(0, 1fr); } }
.mt-controles { align-items: center; gap: 10px; width: 100%; padding: 10px 14px; margin-bottom: 20px; background: var(--bg); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.mt-controles select, .mt-controles input[type="month"] { appearance: none; -webkit-appearance: none; padding: 9px 38px 9px 16px; border: 1px solid transparent; background: var(--bg-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; color: var(--texto); font: inherit; font-weight: 500; cursor: pointer; }
.mt-controles input[type="month"] { padding-right: 16px; background-image: none; }
.mt-controles select:hover, .mt-controles input[type="month"]:hover { border-color: var(--borda); }
.mt-controles select:focus-visible, .mt-controles input[type="month"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:root[data-estilo="a"] .cfgw-sec-corpo .mt-controles select, :root[data-estilo="a"] .cfgw-sec-corpo .mt-controles input[type="month"], :root[data-estilo="a"] .cfgw-sec-corpo .mt-controles button { border-radius: 99px !important; }
.mt-controles button { padding: 9px 20px; font-weight: 500; }
.mt-controles select + button { margin-left: auto; }
.mt-controles button.sec { background: var(--bg-deep); color: var(--texto); border: 1px solid transparent; }
.mt-controles button.sec:hover:not(:disabled) { background: var(--hover); border-color: var(--borda); }
#mt-csv { background: var(--botao); color: #fff; border-color: transparent; }
#mt-csv:hover:not(:disabled) { background: var(--botao); filter: brightness(1.08); border-color: transparent; }
@media (max-width: 640px) { .mt-controles select + button { margin-left: 0; } .mt-controles select { flex: 1 1 140px; } }

/* Configurações: a rolagem continua (mouse, toque e teclado), mas sem a barra lateral visível */
.cfgw-sec-corpo { scrollbar-width: none; -ms-overflow-style: none; }
.cfgw-sec-corpo::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Menu de Configurações: espaço entre os itens, para o item ativo e o item sob o mouse não se encostarem */
.cfgw-nav { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 16px; }
.cfgw-item { padding: 10px 14px; border-radius: 14px; }

/* ============ Campos de lista (select) em todo o app: botão e lista suspensa com o visual do Kippe ============ */
/* Navegadores com select personalizável (Chrome e Edge recentes); nos demais, vale o seletor nativo do sistema */
@supports (appearance: base-select) {
  :root select:not([multiple]):not([size]), :root select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  :root select:not([multiple]):not([size]) { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
  :root select:not([multiple]):not([size])::picker-icon { color: var(--suave); transition: rotate .15s; }
  :root select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
  .mt-controles select { background-image: none; padding-right: 16px; }
  :root select:not([multiple]):not([size])::picker(select) {
    margin-top: 6px; padding: 6px; max-height: min(340px, 60vh); overflow-y: auto;
    border: 1px solid var(--borda); border-radius: 16px; background: var(--bg); color: var(--texto);
    box-shadow: 0 12px 32px rgba(11, 20, 26, .2);
  }
  :root select:not([multiple]):not([size]) option { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font: inherit; font-weight: 400; color: var(--texto); background: transparent; cursor: pointer; }
  :root select:not([multiple]):not([size]) option:hover, :root select:not([multiple]):not([size]) option:focus-visible { background: var(--hover); outline: 0; }
  :root select:not([multiple]):not([size]) option:checked { background: var(--accent-claro); color: var(--accent-forte); font-weight: 600; }
  :root select:not([multiple]):not([size]) option::checkmark { display: none; }
  :root select:not([multiple]):not([size]) option:disabled { color: var(--suave); cursor: default; }
}

/* ============ Padrão único de campos e botões (checkup de coesão visual) ============ */
/* Campos: 14 px de texto, cantos de 14 px, fundo cinza claro sem borda visível (borda verde ao focar) e altura mínima de 40 px.
   Fora ficam os filtros em pílula das barras (.mt-controles), que têm medidas próprias. */
:root[data-estilo="a"] :is(dialog, .cfgw-sec-corpo) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select:not([multiple], [size]), textarea):not(.mt-controles *) {
  font-size: 14px !important; border-radius: 14px !important; border-color: transparent !important; background-color: var(--bg-deep) !important;
}
:root[data-estilo="a"] :is(dialog, .cfgw-sec-corpo) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select:not([multiple], [size])):not(.mt-controles *) { min-height: 40px; }
:root[data-estilo="a"] :is(dialog, .cfgw-sec-corpo) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea):not(.mt-controles *):hover { border-color: var(--borda) !important; }
:root[data-estilo="a"] :is(dialog, .cfgw-sec-corpo) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea):not(.mt-controles *):focus-visible { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(47, 122, 92, .16); }
:root[data-estilo="a"] .mt-controles select, :root[data-estilo="a"] .mt-controles button, :root[data-estilo="a"] .mt-controles input { font-size: 14px; }
/* Botões de ação: 40 px de altura e 14 px de texto em todas as janelas e seções; os que ainda tinham cantos de 8 px passam a 14 px */
:root[data-estilo="a"] :is(.dlg-acoes, .dlg-form, .cfgw-sec-corpo, .pg-topo, .tp-topo) button:not(.ic, .aba, .link-modelo, .link-tel, .transcrever, .cfgw-item, .cfgw-voltar, .btn-link):not(.mt-controles *) { min-height: 40px; font-size: 14px; border-radius: 14px; }
:root[data-estilo="a"] :is(#nome-salvar, #emp-salvar, #cfg-novo, #mf-add-botao, #in-add-botao, #tp-conversa, #pv-copiar-payload, #pv-copiar-registro) { border-radius: 14px; }
/* Lista com seleção múltipla (sem o menu suspenso): seleção em verde claro em vez do azul do sistema */
select[multiple] option:checked, select[size] option:checked { background: var(--accent-claro) linear-gradient(0deg, var(--accent-claro), var(--accent-claro)); color: var(--accent-forte); }
select[multiple], select[size] { padding: 6px; }
select[multiple] option, select[size] option { padding: 6px 8px; border-radius: 8px; }
/* Barras de filtro: todos os controles com 40 px, 14 px de texto e cantos em pílula (inclui o campo de busca) */
:root[data-estilo="a"] .cfgw-sec-corpo .mt-controles :is(select, input, button) { height: 40px; min-height: 40px; font-size: 14px !important; }
:root[data-estilo="a"] .cfgw-sec-corpo .mt-controles input[type="search"] { border-radius: 99px !important; padding-left: 16px; }
:root[data-estilo="a"] :is(#cfg-novo, #tp-conversa, #cfg-conectar) { min-height: 40px; font-size: 14px; border-radius: 14px; }
/* Select personalizável: uma única seta (a do próprio campo), em traço fino como os demais ícones */
@supports (appearance: base-select) {
  :root select:not([multiple]):not([size]) { background-image: none !important; padding-right: 14px; }
  :root select:not([multiple]):not([size])::picker-icon { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); width: 14px; height: 14px; }
}

:root[data-tema="escuro"] .etiqueta { color: color-mix(in srgb, var(--cor) 60%, #fff); }
/* Páginas inteiras (fundo cinza): os campos ficam brancos com borda fina, para se destacarem do fundo */
:root[data-estilo="a"] :is(.pagina-dlg, .cfgw-dlg, .tarefa-dlg, .cfgw-sec-corpo) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select:not([multiple], [size]), textarea):not(.mt-controles *) {
  background-color: var(--bg) !important; border-color: var(--borda) !important;
}
:root[data-estilo="a"] :is(.pagina-dlg, .cfgw-dlg, .tarefa-dlg, .cfgw-sec-corpo) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="hidden"]), select, textarea):not(.mt-controles *):hover { border-color: var(--mudo) !important; }
:root[data-estilo="a"] :is(.pagina-dlg, .cfgw-dlg, .tarefa-dlg, .cfgw-sec-corpo) :is(input, select, textarea):not(.mt-controles *):focus-visible { border-color: var(--accent) !important; }

/* ============ Celular (iOS e Android): campo de mensagem em foco e ações no botão + ============ */
#mais-composer, .item-celular, .sheet { display: none; }
@media (max-width: 720px) {
  .app { height: var(--vvh, 100dvh); }
  /* compositor: + | campo | microfone ou enviar */
  .compositor { gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  #rapidas-abrir, #nota-btn, #local-abrir, #contato-abrir, #modelo-abrir, label.anexo, #emoji-abrir, #agendar, .anexo-nome { display: none !important; }
  #mais-composer { display: grid; flex: none; width: 42px; height: 42px; color: var(--suave); }
  .compositor textarea { font-size: 16px; line-height: 22px; min-height: 42px; padding: 9px 16px; border-radius: 22px; min-width: 0; }
  #gravar, #enviar { flex: none; width: 42px; height: 42px; }
  /* cabeçalho: voltar, foto, nome, ⋮ e o botão de status; o resto está no menu ⋮ */
  #etiquetas-btn, #fixar-btn, #notas-btn, #tarefas-btn, #empresas-btn, #atribuir-btn, #transferir-btn { display: none !important; }
  .topo { gap: 8px; padding-left: 6px; padding-right: 10px; }
  .topo-info { min-width: 0; flex: 1; }
  .topo-info strong, .topo-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status-btn { padding: 8px 12px; font-size: 13px; }
  .item-celular { display: flex; align-items: center; gap: 4px; }
  .item-celular.hidden { display: none !important; }
  .contagem-celular { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--botao); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }
  .contagem-celular.hidden { display: none; }
  .menu-mais { max-height: 70dvh; overflow-y: auto; }
  .menu-mais button { padding: 12px 14px; }
  /* folha de ações do botão + (parte de baixo da tela) */
  .sheet { display: block; position: fixed; inset: 0; z-index: 90; }
  .sheet-fundo { position: absolute; inset: 0; background: rgba(11, 20, 26, .45); }
  .sheet-corpo { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(11, 20, 26, .25); animation: sobe .18s ease-out; }
  .sheet-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .sheet-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; background: transparent; color: var(--texto); font-size: 13px; min-height: 0; }
  .sheet-item:disabled { opacity: .4; }
  .sheet-ic { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-deep); color: var(--accent-forte); }
  .sheet-ic svg { width: 26px; height: 26px; }
}
@keyframes sobe { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
/* Toque: sem botão ⋮ ao lado de cada mensagem (pressionar e segurar abre as ações) */
@media (hover: none) {
  .msg .menu-msg, .responder.menu-msg { display: none !important; }
  .msg { -webkit-touch-callout: none; }
}
/* Celular: o botão de status vira só o ícone (a conversa ganha espaço para o nome do contato) */
@media (max-width: 720px) {
  #status-btn { flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 0; }
  #status-btn svg { width: 20px; height: 20px; margin: 0; }
}

/* ============ Mensagens Rápidas: lista em cartões + painel de edição, na largura toda ============ */
#cfg-sec-mensagens .cfgw-sec-corpo > * { max-width: none; }
.mr-dica { text-align: left; margin-bottom: 12px; }
.mr-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
.mr-grade.so-lista { grid-template-columns: minmax(0, 1fr); }
.mr-cards { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mr-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.mr-card.editando { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 122, 92, .14); }
.mr-card.inativa .mr-info { opacity: .55; }
.mr-info { flex: 1; min-width: 0; }
.mr-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.mr-topo strong { font-size: 15px; color: var(--accent-forte); }
.mr-tag { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: var(--bg-deep); color: var(--suave); }
.mr-info p { margin: 0; font-size: 14px; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.mr-acoes { flex: none; display: flex; gap: 8px; }
.mr-acoes button { min-height: 36px !important; padding: 6px 14px; }
.mr-painel { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--bg); border: 1px solid var(--borda); border-radius: 20px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.mr-painel label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
.mr-painel textarea { resize: vertical; }
.mr-titulo { margin: 0; font-size: 16px; font-weight: 600; }
.mr-vars small { display: block; margin-bottom: 6px; color: var(--suave); font-size: 12px; }
.mr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-chip { min-height: 0 !important; padding: 3px 10px !important; border-radius: 99px !important; background: var(--bg-deep); color: var(--texto); font: 12px ui-monospace, Consolas, monospace !important; }
.mr-chip:hover { background: var(--hover); }
.mr-painel label.mr-ativa { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--texto); }
.mr-painel .dlg-acoes { justify-content: flex-end; }
.mr-switch { position: relative; flex: none; width: 44px; height: 26px; cursor: pointer; }
.mr-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mr-switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--mudo, #8696a0); transition: background .15s; }
.mr-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11, 20, 26, .3); transition: transform .15s; }
.mr-switch input:checked + span { background: var(--botao); }
.mr-switch input:checked + span::after { transform: translateX(18px); }
.mr-switch input:disabled { cursor: default; }
.mr-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1000px) { .mr-grade { grid-template-columns: minmax(0, 1fr); } .mr-painel { position: static; } }
@media (max-width: 520px) { .mr-card { flex-wrap: wrap; } .mr-acoes { width: 100%; justify-content: flex-end; } }

/* Mensagens Rápidas: ações em ícone (cabem mesmo com a lista estreita) */
.mr-acoes button.mr-ic { width: 38px; height: 38px; min-height: 38px !important; padding: 0 !important; display: grid; place-items: center; border-radius: 50% !important; }
.mr-acoes button.mr-ic.perigo { color: var(--critico); }
.mr-acoes button.mr-ic.perigo:hover { background: rgba(234, 0, 56, .1); }
.mr-grade { grid-template-columns: minmax(0, 1fr) clamp(340px, 34%, 460px); }
@media (max-width: 1240px) { .mr-grade { grid-template-columns: minmax(0, 1fr); } .mr-painel { position: static; } }

/* ============ Campos de pesquisa: um só contêiner, ícone dentro, destaque verde ao focar ============ */
.cfgw-busca { border: 1px solid transparent; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.cfgw-busca:hover { border-color: var(--borda); }
.cfgw-busca:focus-within { background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 122, 92, .16); }
.cfgw-busca:focus-within svg { color: var(--accent-forte); }
:root[data-estilo="a"] #cfg-busca { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; height: 100%; padding: 0 !important; font-size: 14px !important; }
:root[data-estilo="a"] .cfgw-sec-corpo .mt-controles input[type="search"] {
  flex: 1 1 280px; max-width: 520px; min-width: 200px; padding: 0 16px 0 44px; font-size: 14px !important;
  background: var(--bg-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center / 16px;
  border: 1px solid transparent; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
:root[data-estilo="a"] .cfgw-sec-corpo .mt-controles input[type="search"]:hover { border-color: var(--borda); }
:root[data-estilo="a"] .cfgw-sec-corpo .mt-controles input[type="search"]:focus-visible { background-color: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 122, 92, .16); outline: 0; }
#mr-nova { margin-left: auto; }

/* Preferências do usuário (menu de Configurações): cartão com chaves liga/desliga */
.cfgw-prefs { margin: 4px 20px 8px; padding: 2px 16px; background: var(--bg-deep); border-radius: 16px; }
.cfgw-pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14px; color: var(--texto); cursor: pointer; }
.cfgw-pref + .cfgw-pref { border-top: 1px solid var(--borda); }
.cfgw-pref .mr-switch { cursor: pointer; }

/* ============ Números de WhatsApp em cartões, com chave para ativar e desativar ============ */
.cfgw-sec .cfg-lista { gap: 12px; background: transparent; padding: 0; border-radius: 0; }
.cfgw-sec .cfg-item { align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.cfgw-sec .cfg-item:last-child { border-bottom: 1px solid var(--borda); }
.cfgw-sec .cfg-item .info { flex: 1; min-width: 220px; }
.cfgw-sec .cfg-item.inativa .info { opacity: .55; }
.cfgw-sec .cfg-item .info .nome { display: flex; align-items: center; gap: 8px; }
.cfg-item .inativo { margin-left: 0; padding: 1px 8px; border-radius: 99px; background: rgba(234, 0, 56, .1); color: var(--critico); font-size: 11px; font-weight: 600; }
.cfgw-sec .cfg-item button.sec { min-height: 36px; padding: 6px 14px; font-size: 13px; border-radius: 12px; }
/* Linhas com chave liga/desliga (opções de configuração) */
.linha-switch { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--bg-deep); border-radius: 14px; font-size: 14px; color: var(--texto) !important; cursor: pointer; }
.cfgw-sec-corpo .linha-switch { background: var(--bg); border: 1px solid var(--borda); }
.linha-switch .mr-switch { flex: none; }
.cfgw-sec .cfg-item button { margin-left: 0 !important; flex: none; }
.cfgw-sec .cfg-item .info { flex: 1 1 240px; }

/* ============ Formulário de número de WhatsApp: mais largo, em duas colunas e com a empresa em lista de seleção ============ */
dialog.num-dlg { width: min(860px, 94vw); max-height: min(92vh, 900px); scrollbar-width: none; }
dialog.num-dlg::-webkit-scrollbar { display: none; }
#form-numero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
#form-numero > h2, #form-numero > .num-empresa-bloco, #form-numero > .num-largo, #form-numero > .linha-switch, #form-numero > .erro, #form-numero > .dlg-acoes { grid-column: 1 / -1; }
#form-numero > h2 { margin: 0; }
#form-numero > .linha-switch { margin: 0; }
#form-numero > .dlg-acoes { position: sticky; bottom: -1px; margin: 0 -4px -4px; padding: 12px 4px 4px; background: var(--bg); justify-content: flex-end; }
.num-empresa-bloco { display: flex; flex-direction: column; gap: 8px; }
.num-rotulo { font-size: 13px; color: var(--suave); }
.emp-radios { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; padding: 6px; border-radius: 16px; background: var(--bg-deep); scrollbar-width: thin; }
.emp-radio { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: 14px; color: var(--texto); cursor: pointer; border: 1px solid transparent; }
.emp-radio:hover { background: var(--hover); }
.emp-radio.sel { background: var(--accent-claro); border-color: var(--accent); color: var(--accent-forte); font-weight: 500; }
.emp-radio input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--botao); }
@media (max-width: 640px) { #form-numero { grid-template-columns: minmax(0, 1fr); } }
#form-numero .emp-radio { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; font-size: 14px; color: var(--texto); }
#form-numero .emp-radio.sel { color: var(--accent-forte); }

/* ============ Alertas Recentes: filtros, grupos por dia e cartões com ícone ============ */
.al-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.al-chip { min-height: 36px; padding: 6px 14px; border-radius: 99px; background: var(--bg); color: var(--texto); border: 1px solid var(--borda); font-size: 13px; font-weight: 500; }
.al-chip b { margin-left: 4px; padding: 0 7px; border-radius: 99px; background: var(--bg-deep); font-size: 12px; }
.al-chip:hover { background: var(--hover); }
.al-chip.ativo { background: var(--botao); color: #fff; border-color: transparent; }
.al-chip.ativo b { background: rgba(255, 255, 255, .25); color: #fff; }
.cfg-alertas { display: flex; flex-direction: column; gap: 8px; }
.al-dia { margin: 14px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.al-dia:first-child { margin-top: 0; }
.al-card { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--bg); border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.al-card.sev-critico { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .05); }
.al-card.sev-aviso { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .06); }
.al-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(47, 122, 92, .14); color: var(--accent-forte); }
.al-card.sev-critico .al-ic { background: rgba(220, 38, 38, .14); color: #d32f2f; }
.al-card.sev-aviso .al-ic { background: rgba(245, 158, 11, .18); color: #b26a00; }
:root[data-tema="escuro"] .al-card.sev-aviso .al-ic { color: #ffca66; }
:root[data-tema="escuro"] .al-card.sev-critico .al-ic { color: #ff8a80; }
.al-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.al-corpo strong { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.al-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--suave); }
.al-tag { padding: 1px 9px; border-radius: 99px; background: var(--bg-deep); color: var(--texto); font-size: 11.5px; font-weight: 500; }
.al-tag.sev-critico { background: rgba(220, 38, 38, .12); color: #c62828; }
.al-tag.sev-aviso { background: rgba(245, 158, 11, .16); color: #b26a00; }
:root[data-tema="escuro"] .al-tag.sev-aviso { color: #ffca66; }
:root[data-tema="escuro"] .al-tag.sev-critico { color: #ff8a80; }
.al-hora { flex: none; font-size: 12.5px; color: var(--suave); }
.cfgw-sec .cfg-alertas { background: transparent; padding: 0; border-radius: 0; max-height: none; }
.cfgw-sec .cfg-alertas { overflow: visible; }
.al-dia { line-height: 1.5; padding-top: 4px; }

/* ============ Saúde do número: cartões de situação, dados em duas colunas e problemas em cartões ============ */
dialog.saude-dlg { width: min(760px, 94vw); scrollbar-width: none; }
dialog.saude-dlg::-webkit-scrollbar { display: none; }
.sd-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
.tom-amarelo { border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .06); }
.tom-amarelo b { color: #b26a00; }
:root[data-tema="escuro"] .tom-amarelo b { color: #ffca66; }
.sd-detalhes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding: 4px 18px; background: var(--bg-deep); border-radius: 16px; }
.sd-detalhes .info-linha { border-bottom: 1px solid var(--borda); }
.sd-detalhes .info-linha:nth-last-child(-n+2):nth-child(odd), .sd-detalhes .info-linha:last-child { border-bottom: 0; }
#sd-corpo .al-card { align-items: flex-start; margin-top: 8px; }
#sd-corpo .al-dia { margin-top: 18px; }
.sd-erros { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--suave); line-height: 1.45; }
@media (max-width: 560px) { .sd-cartoes, .sd-detalhes { grid-template-columns: minmax(0, 1fr); } }

/* ============ Modelos (página do número): barra, filtros e cartões com chave, status e usuários ============ */
.ma-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.ma-barra .al-filtros { margin: 0; }
#ma-busca { flex: 1 1 280px; max-width: 460px; min-width: 200px; height: 40px; padding: 0 16px 0 44px; border-radius: 99px; font-size: 14px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center / 16px; border: 1px solid var(--borda); }
#ma-busca:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 122, 92, .16); outline: 0; }
#dlg-modelos-adm .ma-lista { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 14px; }
.md-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.md-card.inativo { background: var(--bg-deep); }
.md-card.inativo .md-corpo, .md-card.inativo .md-titulo { opacity: .55; }
.md-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.md-titulo { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.md-titulo strong { font-size: 15px; overflow-wrap: anywhere; }
.md-titulo small { color: var(--suave); font-size: 12px; }
.md-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.md-corpo { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.md-motivo { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(220, 38, 38, .08); color: #c62828; font-size: 13px; }
.md-card .ma-acoes { margin-top: auto; padding-top: 4px; }
.md-card .ma-b { min-height: 34px; padding: 5px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #fff; }
.md-card .ma-b.status { background: #0e7490; }
.md-card .ma-b.usuarios { background: #ea580c; }
.md-card .ma-b.vincular { background: #2563eb; }
.md-card .ma-b.clonar { background: #7c3aed; }
.md-card .ma-b.editar { background: #23664C; }
.md-card .ma-b.excluir { background: #dc2626; }
.md-card .ma-b:hover:not(:disabled) { filter: brightness(1.08); }
.md-card .ma-b:disabled { background: var(--bg-deep); color: var(--mudo); cursor: not-allowed; }
dialog.ms-dlg { width: min(760px, 94vw); scrollbar-width: none; }
dialog.ms-dlg::-webkit-scrollbar { display: none; }
#ms-corpo .al-card { margin-top: 8px; }
#ms-corpo .al-dia { margin-top: 18px; }
.mu-lista { max-height: 300px; }
#mu-busca { height: 40px; }
@media (max-width: 960px) { #dlg-modelos-adm .ma-lista { grid-template-columns: minmax(0, 1fr); } }

/* ============ Login: mesmos detalhes do VeriPay (feedback de toque, botão ocupado, rolagem sem barra) ============ */
.login { scrollbar-width: none; -ms-overflow-style: none; }
.login::-webkit-scrollbar { display: none; }
.entrar { transition: transform .1s, filter .15s, opacity .15s; }
.entrar:active:not(:disabled) { transform: scale(.98); }
.entrar:disabled { opacity: .7; cursor: default; }
.instalar:active { transform: scale(.95); }
.login input { outline: none; }
/* Alturas de linha iguais às do Tailwind usado no VeriPay (texto-base 24 px, grande 28 px, pequeno 20 px) */
.campo label { line-height: 24px; }
.login input { line-height: 28px; }
.entrar { line-height: 28px; }
.instalar { line-height: 24px; }
#login-form .erro { line-height: 20px; }

/* ============ Janela "Instalar o Kippe" (iOS e navegadores sem instalação nativa): mesmo padrão do VeriPay ============ */
.instalar-ajuda { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .4); }
.instalar-ajuda.hidden { display: none; }
.ia-cartao { width: 100%; max-width: 384px; padding: 24px; border-radius: 24px; background: #fff; color: #0f172a; font-size: 16px; line-height: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }
.ia-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ia-topo h2 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; color: #0f172a; }
.ia-topo button { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 0; background: none; color: #0f172a; line-height: 0; }
.ia-lista { margin: 0; padding-left: 20px; list-style: decimal; color: #374151; }
.ia-lista li + li { margin-top: 8px; }
.ia-navegadores { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; }
.ia-navegadores svg { flex: none; }
.ia-chrome { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from -60deg, #ea4335 0 120deg, #fbbc05 120deg 240deg, #34a853 240deg 360deg); }
.ia-chrome > span { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff; background: #4285f4; }
.ia-compartilhar { display: inline; vertical-align: -3px; margin-top: -4px; }
.ia-texto { margin: 0; color: #374151; }

/* Usuário logado (Nome - E-mail), acima da pesquisa de conversas */
.usuario-logado { flex: none; margin: 4px 12px 0; padding: 8px 16px; border-radius: 99px; background: var(--bg-deep); color: var(--suave); font-size: 13px; line-height: 20px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-logado.hidden { display: none; }

/* ============ Impostos Enviados: filtros, dashboard e lista ============ */
.im-cartoes { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; }
@media (max-width: 1100px) { .im-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.im-grafico { margin-bottom: 18px; }
.im-dias-area { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: 4px 0; border-bottom: 1px solid var(--borda); }
.im-dia { flex: 1; min-width: 2px; height: 100%; display: flex; align-items: flex-end; border-radius: 4px; }
.im-dia:hover { background: var(--hover); }
.im-dia i { display: block; width: 100%; max-width: 22px; margin: 0 auto; border-radius: 4px 4px 0 0; background: var(--accent); }
.im-eixo { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--suave); }
.im-blocos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
@media (max-width: 1100px) { .im-blocos { grid-template-columns: minmax(0, 1fr); } }
.im-bloco { padding: 16px 18px; background: var(--bg); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.im-bloco .mt-secao-titulo { margin-bottom: 12px; }
.im-linha { margin-bottom: 12px; }
.im-linha:last-child { margin-bottom: 0; }
.im-rot { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 5px; }
.im-rot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-linha .mt-mini { height: 6px; }
.im-tabela td { white-space: nowrap; }
.im-tabela td:nth-child(2), .im-tabela td:nth-child(3) { white-space: normal; min-width: 180px; text-align: left; }
.im-tabela th:nth-child(n+2):nth-child(-n+4) { text-align: left; }
.im-guia { min-height: 32px; padding: 4px 12px; border-radius: 10px; font-size: 12.5px; }

/* Impostos Enviados: botões de ação da lista (sempre numa linha só) */
.im-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.im-tabela .im-b { min-height: 34px; padding: 5px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.im-tabela .im-b.guia { background: #2563eb; }
.im-tabela .im-b.mensagem { background: #23664C; }
.im-tabela .im-b:hover:not(:disabled) { filter: brightness(1.08); }

/* ============ Página da tarefa: cartões, dados em grade, linha do tempo e botões ============ */
.tp-topo { padding-top: 14px; padding-bottom: 14px; }
.tp-titulo small { display: inline-block; margin-bottom: 4px; padding: 1px 10px; border-radius: 99px; background: var(--accent-claro); color: var(--accent-forte); font-size: 12px; font-weight: 700; }
.tp-titulo h2 { font-size: 22px; }
.tp-cartao { padding: 16px 18px; background: var(--bg); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.tp-cartao h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); }
.tp h3.tp-sec { margin: 6px 0 0; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); }
.tp-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; }
.tp-meta-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-meta-item small { color: var(--suave); font-size: 12px; }
.tp-meta-item b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.tp-desc { margin: 0; font-size: 15px; line-height: 1.5; }
.tp-acoes { display: flex; }
#tp-conversa { min-height: 40px; padding: 8px 18px; border-radius: 14px; background: #2563eb; color: #fff; font-size: 14px; font-weight: 600; }
#tp-conversa:hover { filter: brightness(1.08); }
#tp-editar { background: #23664C; color: #fff; }
#tp-editar:hover { filter: brightness(1.08); }
.tp-status { min-height: 40px; padding: 8px 16px; border-width: 1.5px; font-weight: 700; }
.tp-msg { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 20, 26, .05); }
.tp-msg.e { border-color: rgba(47, 122, 92, .25); }
.tp-dir { overflow-y: auto; }
.tp-coments { gap: 12px; }
.tp-com { display: flex; gap: 10px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.tp-com .tp-av { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-forte); color: #fff; font-size: 14px; font-weight: 600; }
.tp-com-corpo { flex: 1; min-width: 0; }
.tp-com small { display: block; margin-bottom: 3px; color: var(--suave); }
.tp-com-texto { padding: 9px 12px; border-radius: 14px; background: var(--bg-deep); white-space: pre-wrap; overflow-wrap: anywhere; }
.tp-com.status .tp-av { background: var(--mudo, #8696a0); }
.tp-com.status .tp-com-texto { background: transparent; border: 1px dashed var(--borda); color: var(--suave); font-weight: 600; }
.tp-novo textarea { background: var(--bg-deep) !important; }
#tp-comentar { min-height: 40px; padding: 8px 22px; border-radius: 14px; font-weight: 600; }

/* Configurações → Agendamentos */
.im-tabela .im-b.cancelar { background: #dc2626; }
.ag-st { align-self: center; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--bg-deep); color: var(--suave); }
.ag-st.enviada { background: #dcfce7; color: #166534; }
.ag-st.falhou { background: #fee2e2; color: #991b1b; }

/* Tarefa: vincular mensagens */
.tp-acoes { gap: 10px; flex-wrap: wrap; }
#tp-vincular { min-height: 40px; padding: 8px 18px; border-radius: 14px; background: #23664C; color: #fff; font-size: 14px; font-weight: 600; }
#tp-vincular:hover { filter: brightness(1.08); }

/* Filtros de status das tarefas: chips centralizados (marcado = verde) */
.tab-checks { justify-content: center; gap: 8px; padding: 2px 0; }
.tab-checks label { position: relative; min-height: 34px; padding: 6px 14px; gap: 0; border: 1.5px solid var(--borda); border-radius: 99px; background: var(--bg); color: var(--suave); font-size: 13px; font-weight: 600; user-select: none; transition: background .15s, border-color .15s, color .15s; }
.tab-checks label:hover { border-color: var(--mudo); }
.tab-checks label:has(input:checked) { background: var(--accent-claro); border-color: var(--accent); color: var(--accent-forte); }
.tab-checks label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tab-checks input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
:root[data-tema="escuro"] .tab-checks label:has(input:checked) { background: #12332d; color: #7fe3c6; }
.tab-filtros #tab-usuario summary { text-align: center; }

/* Tarefa: status como botão colorido e campo de comentário maior, que cresce sem barra de rolagem */
:root .tarefa-dlg select.tp-status { min-height: 40px !important; padding: 8px 14px !important; border-radius: 14px !important; border-width: 0 !important; font-weight: 700 !important; letter-spacing: .01em; cursor: pointer; box-shadow: 0 1px 2px rgba(11, 20, 26, .12); }
:root .tarefa-dlg select.tp-status.andamento { background: #fef3c7 !important; color: #92400e !important; }
:root .tarefa-dlg select.tp-status.reaberta { background: #dbeafe !important; color: #1e40af !important; }
:root .tarefa-dlg select.tp-status.concluida { background: #d1fae5 !important; color: #065f46 !important; }
:root .tarefa-dlg select.tp-status.cancelada { background: #e5e7eb !important; color: #4b5563 !important; }
:root .tarefa-dlg select.tp-status:hover { filter: brightness(.96); }
:root[data-tema="escuro"] .tarefa-dlg select.tp-status.andamento { background: #4a3a12 !important; color: #fde68a !important; }
:root[data-tema="escuro"] .tarefa-dlg select.tp-status.reaberta { background: #1e3a5f !important; color: #bfdbfe !important; }
:root[data-tema="escuro"] .tarefa-dlg select.tp-status.concluida { background: #0f3d2e !important; color: #a7f3d0 !important; }
:root[data-tema="escuro"] .tarefa-dlg select.tp-status.cancelada { background: #2b3a42 !important; color: #cbd5e1 !important; }
.tp-novo textarea { min-height: 150px; max-height: 360px; padding: 12px 14px; resize: none; overflow-y: hidden; line-height: 1.5; font-size: 14.5px; }

/* Tarefa: botão de status com cor e borda (especificidade alta para vencer as regras gerais de campos) */
:root:root[data-estilo] .tarefa-dlg select.tp-status.tp-status { border-width: 1.5px !important; border-style: solid !important; }
:root:root[data-estilo] .tarefa-dlg select.tp-status.tp-status.andamento { background: #fef3c7 !important; color: #92400e !important; border-color: #f59e0b !important; }
:root:root[data-estilo] .tarefa-dlg select.tp-status.tp-status.reaberta { background: #dbeafe !important; color: #1e40af !important; border-color: #3b82f6 !important; }
:root:root[data-estilo] .tarefa-dlg select.tp-status.tp-status.concluida { background: #d1fae5 !important; color: #065f46 !important; border-color: #10b981 !important; }
:root:root[data-estilo] .tarefa-dlg select.tp-status.tp-status.cancelada { background: #e5e7eb !important; color: #4b5563 !important; border-color: #9ca3af !important; }
:root:root[data-tema="escuro"][data-estilo] .tarefa-dlg select.tp-status.tp-status.andamento { background: #4a3a12 !important; color: #fde68a !important; }
:root:root[data-tema="escuro"][data-estilo] .tarefa-dlg select.tp-status.tp-status.reaberta { background: #1e3a5f !important; color: #bfdbfe !important; }
:root:root[data-tema="escuro"][data-estilo] .tarefa-dlg select.tp-status.tp-status.concluida { background: #0f3d2e !important; color: #a7f3d0 !important; }
:root:root[data-tema="escuro"][data-estilo] .tarefa-dlg select.tp-status.tp-status.cancelada { background: #2b3a42 !important; color: #cbd5e1 !important; }

/* Tarefa: títulos dos grupos sem maiúsculas */
.tp-cartao h3, .tp h3.tp-sec, .tp-dir h3 { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }

/* Empresas vinculadas do contato: janela larga, uma empresa por linha e sem barra de rolagem (até 72% da altura da tela) */
#dlg-empresas-contato { width: min(920px, 96vw); }
#dlg-empresas-contato #ec-lista { max-height: 72vh; }
#dlg-empresas-contato .ec-linha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 4px; }

/* Erros: mensagens com falha e [unsupported] */
.er-sub { margin: 28px 0 4px; font-size: 16px; font-weight: 600; }
.ag-st.unsup { background: #fef3c7; color: #92400e; }
.im-tabela td small.mudo { display: block; margin-top: 2px; color: var(--suave); overflow-wrap: anywhere; }
#em-corpo td, #em-corpo th { text-align: left; }
#em-corpo td:last-child, #em-corpo th:last-child { text-align: right; }

/* Estado vazio: ícone limpo e estático */
.vazio-icone { animation: none !important; margin-bottom: 4px; }

/* Preferências pessoais (rodízio e assinatura) passaram para o canal: o administrador define em Configurações → Atendimento */
.cfgw-prefs { display: none !important; }
.at-rod-usuarios { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 4px; }
.at-rod-usuarios .check { display: inline-flex; align-items: center; gap: 8px; }

/* Login: subtítulo da marca (mesmo padrão do qefi e do qiponto: Comfortaa, negrito, minúsculas, cinza-azulado) */
.marca-sub { margin: 0; font: 700 14px/1 var(--fonte-logo); letter-spacing: .02em; color: var(--l-suave); }

/* ============ Tarefa: leiaute ágil, mensagens em grade e sem barras de rolagem ============ */
.tp-corpo { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 16px; padding: 16px clamp(16px, 3vw, 36px); }
.tp-esq, .tp-dir, .tp-msgs, .tp-coments { scrollbar-width: none; -ms-overflow-style: none; }
.tp-esq::-webkit-scrollbar, .tp-dir::-webkit-scrollbar, .tp-msgs::-webkit-scrollbar, .tp-coments::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tp-esq { gap: 10px; }
.tp-cartao { padding: 12px 16px; }
.tp-meta { gap: 10px 20px; }
.tp-acoes { gap: 8px; }
#tp-conversa, #tp-vincular { min-height: 36px; padding: 6px 16px; border-radius: 12px; font-size: 13.5px; }
/* mensagens da tarefa: cartões compactos em colunas (aproveita a largura e reduz a rolagem) */
.tp-msgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start; }
.tp-msg { padding: 8px 12px; border-radius: 14px; font-size: 14px; }
.tp-msg .thumb img { max-width: 100%; max-height: 170px; width: auto; }
.tp-msg .thumb { min-width: 0; }
.tp-msg video { max-height: 170px; }
.tp-msg .doc { min-width: 0; padding: 8px; }
/* comentários: campo mais baixo e botão logo abaixo */
.tp-dir { gap: 10px; }
.tp-novo textarea { min-height: 84px; max-height: 240px; padding: 10px 12px; font-size: 14px; }
.tp-dir .dlg-acoes { margin-top: 0; }
#tp-comentar { min-height: 36px; padding: 6px 18px; border-radius: 12px; font-size: 14px; }

/* ============ Marca Nukt: tipografia ============ */
h1, h2, h3, h4 { font-family: var(--fonte-titulo); letter-spacing: -.01em; }
h2, h3 { font-weight: 700; }
.vazio strong, .v2-pn-titulo, .v2-pn-topo h3, .tp-titulo h2, .lista-topo::before, .cfgw-sec-topo h3, .cfgw-topo h2 { font-family: var(--fonte-titulo); letter-spacing: -.01em; }
.vazio strong, .tp-titulo h2 { font-weight: 800; }
/* o nome da marca é sempre "kippe." (Comfortaa 700, caixa baixa) com o ponto na cor de destaque */
.marca-nome .ponto-marca, .lista-topo h1 .ponto-marca, .v2-marca .ponto-marca { color: var(--l-pe, var(--accent-forte)); }

/* botao Reabrir (conversa resolvida) em azul, como o status Reaberta */
#status-btn:not(.resolver) { background: #2F6BB0; color: #fff; }

/* Selo do responsável mais suave: fundo discreto e texto cinza-esverdeado (o "eu" em verde-claro) */
.resp-badge { background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--suave); font-weight: 600; box-shadow: none; }
.resp-badge.eu { background: var(--accent-claro); color: var(--accent-forte); }
.resp-badge .ico-inline { stroke: currentColor; }
:root[data-tema="escuro"] .resp-badge, :root[data-tema="escuro"] .resp-badge.eu { box-shadow: none; }

/* Atalhos do teclado: janela mais larga, uma linha por atalho */
#dlg-atalhos { width: min(560px, 94vw); }
#dlg-atalhos .info-linha > span { white-space: nowrap; }
#dlg-atalhos .info-linha > b { white-space: nowrap; margin-left: 16px; }

/* Etiquetas: janela mais larga, lista mais alta e sem barra de rolagem visível (a rolagem continua) */
#dlg-etiquetas { width: min(640px, 94vw); }
#dlg-etiquetas .dica { white-space: normal; text-align: left; }
#dlg-etiquetas #et-lista { max-height: min(52vh, 460px); scrollbar-width: none; -ms-overflow-style: none; }
#dlg-etiquetas #et-lista::-webkit-scrollbar { display: none; width: 0; }
#dlg-etiquetas #et-lista > * { min-height: 48px; }
#dlg-etiquetas .dlg-acoes { flex-wrap: wrap; }

/* Etiquetas: botões coloridos (Editar verde, Excluir vermelho, Criar etiqueta azul) */
#dlg-etiquetas #et-lista .rr-linha button:nth-of-type(1) { background: #23664C; color: #fff; }
#dlg-etiquetas #et-lista .rr-linha button:nth-of-type(2) { background: #C0392B; color: #fff; }
#dlg-etiquetas #et-lista .rr-linha button:hover { filter: brightness(1.08); }
#dlg-etiquetas #et-criar { background: #2F6BB0; color: #fff; }
#dlg-etiquetas #et-criar:hover:not(:disabled) { filter: brightness(1.08); }

/* Impostos Enviados: filtros numa linha só (os campos encolhem para caber) */
#cfg-sec-impostos .im-barra { flex-wrap: nowrap; }
#cfg-sec-impostos .im-barra > * { min-width: 0; }
#cfg-sec-impostos .im-barra select { flex: 0 1 auto; max-width: 190px; }
#cfg-sec-impostos .im-barra input[type="search"] { flex: 1 1 150px; }
#cfg-sec-impostos .im-barra button { flex: none; white-space: nowrap; }

/* Botões das barras de ferramentas das telas de Configurações: Atualizar verde, Exportar CSV azul, Limpar tudo vermelho */
:is(#im-atualizar, #mt-atualizar, #cu-atualizar, #au-atualizar, #oa-atualizar, #er-atualizar, #ag-atualizar, #em-atualizar, #tl-atualizar) { background: #23664C; color: #fff; }
:is(#im-csv, #mt-csv, #au-csv) { background: #2F6BB0; color: #fff; }
#er-limpar { background: #C0392B; color: #fff; }
:is(#im-atualizar, #mt-atualizar, #cu-atualizar, #au-atualizar, #oa-atualizar, #er-atualizar, #ag-atualizar, #em-atualizar, #tl-atualizar, #im-csv, #mt-csv, #au-csv, #er-limpar):hover:not(:disabled) { filter: brightness(1.08); }

/* barra de filtros ocupa a largura toda; os campos de digitação crescem para não sobrar espaço no fim */
.cfgw-sec .mt-controles { max-width: none; width: 100%; }
#cfg-sec-impostos .im-barra input[type="search"] { flex: 1 1 220px; max-width: none; }