/* ARI Suporte — sistema visual.
   Fonte Onest embutida (funciona sem internet). Tema claro e escuro por tokens. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/onest-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;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens: tema claro ---------- */
:root {
  color-scheme: light;
  --fundo: #eef2f1;          /* tela */
  --painel: #ffffff;         /* cartoes, tabelas */
  --painel-2: #f6f8f8;       /* areas internas, linhas alternadas */
  --painel-3: #e7edec;       /* trilhos, chips neutros */
  --tinta: #13232b;
  --tinta-2: #364953;
  --mudo: #5d6f79;
  --linha: #dbe3e1;
  --linha-forte: #c3cfcc;
  --campo: #ffffff;

  --marca: #0c6475;          /* petroleo da ARI */
  --marca-forte: #094d5a;
  --marca-suave: #dceef1;
  --marca-tinta: #07414c;
  --sobre-marca: #ffffff;

  --ambar: #b26f00;          /* fila / aguardando */
  --ambar-suave: #fbefd6;
  --ambar-tinta: #7a4b00;
  --verde: #22804d;
  --verde-suave: #dcf1e4;
  --verde-tinta: #175c37;
  --vermelho: #b23a28;
  --vermelho-suave: #f8e1dc;
  --vermelho-tinta: #842a1c;

  --conversa: #e6ecea;       /* fundo da conversa */
  --bolha-in: #ffffff;
  --bolha-out: #d3eaee;
  --bolha-auto: #eef1f0;

  /* menu lateral: sempre escuro, nos dois temas */
  --lat-fundo: #0f2a31;
  --lat-fundo-2: #163840;
  --lat-linha: #24474f;
  --lat-texto: #c5d8dc;
  --lat-mudo: #86a3aa;
  --lat-ativo: #1d5560;

  --sombra-1: 0 1px 2px rgba(16, 38, 46, .06);
  --sombra-2: 0 12px 32px -8px rgba(16, 38, 46, .22), 0 2px 6px rgba(16, 38, 46, .08);
  --foco: #1488a0;

  --r-1: 6px;     /* controles */
  --r-2: 10px;    /* paineis */
  --r-3: 14px;    /* dialogos */

  --lateral: 252px;
  --lateral-min: 72px;
  --barra: 58px;
  --fonte: "Onest", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
}

/* ---------- Tokens: tema escuro (automatico ou escolhido) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #0c1619; --painel: #131f23; --painel-2: #18262b; --painel-3: #213237;
    --tinta: #e3ecee; --tinta-2: #bccbcf; --mudo: #8ea3aa; --linha: #24363b; --linha-forte: #34494f; --campo: #0f1b1f;
    --marca: #3cb2c6; --marca-forte: #62c6d7; --marca-suave: #173d45; --marca-tinta: #9adbe6; --sobre-marca: #062a31;
    --ambar: #e3a33a; --ambar-suave: #3a2c12; --ambar-tinta: #f2c97c;
    --verde: #4cc283; --verde-suave: #143523; --verde-tinta: #8fdcb2;
    --vermelho: #ee7a63; --vermelho-suave: #3f1d17; --vermelho-tinta: #f6ab9b;
    --conversa: #0f1a1d; --bolha-in: #182a2f; --bolha-out: #134049; --bolha-auto: #1c2a2e;
    --lat-fundo: #0a1e23; --lat-fundo-2: #10292f; --lat-linha: #1c3a41; --lat-ativo: #17505b;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 16px 40px -8px rgba(0, 0, 0, .6);
    --foco: #5fd0e2;
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0c1619; --painel: #131f23; --painel-2: #18262b; --painel-3: #213237;
  --tinta: #e3ecee; --tinta-2: #bccbcf; --mudo: #8ea3aa; --linha: #24363b; --linha-forte: #34494f; --campo: #0f1b1f;
  --marca: #3cb2c6; --marca-forte: #62c6d7; --marca-suave: #173d45; --marca-tinta: #9adbe6; --sobre-marca: #062a31;
  --ambar: #e3a33a; --ambar-suave: #3a2c12; --ambar-tinta: #f2c97c;
  --verde: #4cc283; --verde-suave: #143523; --verde-tinta: #8fdcb2;
  --vermelho: #ee7a63; --vermelho-suave: #3f1d17; --vermelho-tinta: #f6ab9b;
  --conversa: #0f1a1d; --bolha-in: #182a2f; --bolha-out: #134049; --bolha-auto: #1c2a2e;
  --lat-fundo: #0a1e23; --lat-fundo-2: #10292f; --lat-linha: #1c3a41; --lat-ativo: #17505b;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 16px 40px -8px rgba(0, 0, 0, .6);
  --foco: #5fd0e2;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body { margin: 0; min-height: 100%; }
body {
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  display: flex;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11";
}
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 640; letter-spacing: -.01em; }
h1 { font-size: 26px; letter-spacing: -.02em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }
a { color: var(--marca); text-underline-offset: 2px; }
a:hover { color: var(--marca-forte); }
small, .mudo { color: var(--mudo); }
strong { font-weight: 620; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--marca-suave); }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Estrutura: menu lateral ---------- */
.lateral {
  width: var(--lateral);
  flex: none;
  background: var(--lat-fundo);
  color: var(--lat-texto);
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  transition: width .18s ease;
  z-index: 30;
}
.marca { display: flex; align-items: center; gap: 11px; padding: 4px 6px 16px; border-bottom: 1px solid var(--lat-linha); margin-bottom: 10px; min-width: 0; }
.marca-logo {
  width: 36px; height: 36px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, #1aa0b6, #0c6475); color: #fff; font-weight: 750; font-size: 17px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.marca-texto { min-width: 0; }
.marca-nome { display: block; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.marca-sub { display: block; font-size: 12px; color: var(--lat-mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-fechar { display: none; margin-left: auto; background: none; border: 0; color: var(--lat-texto); padding: 6px; border-radius: var(--r-1); cursor: pointer; }

.lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.lateral .grupo { font-size: 12px; color: var(--lat-mudo); padding: 14px 10px 6px; white-space: nowrap; }
.lateral .grupo:first-child { padding-top: 4px; }
.lateral nav a {
  color: var(--lat-texto); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 14.5px;
  display: flex; align-items: center; gap: 12px; position: relative; white-space: nowrap;
}
.lateral nav a .rot { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.lateral nav a:hover { background: var(--lat-fundo-2); color: #fff; }
.lateral nav a.ativo { background: var(--lat-ativo); color: #fff; font-weight: 560; }
.lateral nav a.ativo::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: #4fd1e5; }
.lateral nav a .ic { opacity: .9; }
.lateral .sep { height: 1px; background: var(--lat-linha); margin: 10px 8px; }

.lateral-rodape { border-top: 1px solid var(--lat-linha); padding: 12px 2px 0; font-size: 13px; display: grid; gap: 8px; }
.eu { display: flex; align-items: center; gap: 10px; padding: 0 6px; min-width: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--lat-fundo-2); color: #fff; font-weight: 650; border: 1px solid var(--lat-linha); }
.eu-texto { color: #fff; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-texto small { display: block; color: var(--lat-mudo); font-weight: 400; }
.eu-acoes { display: flex; gap: 2px; flex-wrap: wrap; }
.eu-acoes a, .btn-recolher {
  display: flex; align-items: center; gap: 8px; color: var(--lat-texto); text-decoration: none; font: inherit; font-size: 13px;
  padding: 6px 8px; border-radius: var(--r-1); background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.eu-acoes a .ic, .btn-recolher .ic { width: 17px; height: 17px; }
.eu-acoes a:hover, .btn-recolher:hover { background: var(--lat-fundo-2); color: #fff; }
.btn-recolher { color: var(--lat-mudo); }

.badge {
  background: var(--vermelho); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  padding: 1px 7px; min-width: 21px; text-align: center; line-height: 17px; font-variant-numeric: tabular-nums;
}
.lateral .badge { background: #f0b03a; color: #2b1c00; }

/* menu recolhido (so icones) */
@media (min-width: 1025px) {
  .menu-recolhido .lateral { width: var(--lateral-min); }
  .menu-recolhido .lateral .marca-texto,
  .menu-recolhido .lateral .rot,
  .menu-recolhido .lateral .grupo,
  .menu-recolhido .lateral .eu-texto { display: none; }
  .menu-recolhido .lateral .grupo + a { margin-top: 0; }
  .menu-recolhido .lateral nav { gap: 4px; }
  .menu-recolhido .lateral nav a { justify-content: center; padding: 10px; }
  .menu-recolhido .lateral .marca { justify-content: center; padding-left: 0; padding-right: 0; }
  .menu-recolhido .lateral .eu { justify-content: center; padding: 0; }
  .menu-recolhido .lateral .eu-acoes { flex-direction: column; align-items: center; }
  .menu-recolhido .lateral .btn-recolher { justify-content: center; }
  .menu-recolhido .lateral .btn-recolher .ic { transform: scaleX(-1); }
  .menu-recolhido .lateral nav a .badge { position: absolute; top: 2px; right: 2px; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 16px; }
  .menu-recolhido .lateral [data-rotulo]:hover::after {
    content: attr(data-rotulo); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--tinta); color: var(--painel); font-size: 12.5px; font-weight: 500; padding: 4px 9px; border-radius: var(--r-1);
    white-space: nowrap; pointer-events: none; box-shadow: var(--sombra-2); z-index: 40;
  }
  .menu-recolhido .lateral .eu-acoes a { position: relative; }
}

/* ---------- Estrutura: barra superior e conteudo ---------- */
.casca { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.barra {
  height: var(--barra); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: color-mix(in srgb, var(--painel) 88%, transparent); border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(1.4) blur(8px);
}
.barra-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.barra-btn {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-1); border: 1px solid var(--linha);
  background: var(--painel); color: var(--tinta-2); cursor: pointer; padding: 0;
}
.barra-btn:hover { background: var(--painel-2); color: var(--tinta); }
.so-celular { display: none; }
.ic-lua { display: none; }
:root[data-tema="escuro"] .ic-sol { display: none; }
:root[data-tema="escuro"] .ic-lua { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ic-sol { display: none; }
  :root:not([data-tema="claro"]) .ic-lua { display: block; }
}
.ir-para {
  display: flex; align-items: center; gap: 10px; width: min(380px, 100%); height: 38px; padding: 0 8px 0 12px;
  border: 1px solid var(--linha); border-radius: var(--r-1); background: var(--painel-2); color: var(--mudo);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.ir-para span { flex: 1; }
.ir-para:hover { border-color: var(--linha-forte); color: var(--tinta-2); }
.ir-para .ic { width: 18px; height: 18px; }
kbd { font-family: var(--fonte); font-size: 11.5px; border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--mudo); background: var(--painel); }

.wa-estado {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); padding: 6px 12px 6px 10px;
  border-radius: 999px; background: var(--painel-2); border: 1px solid var(--linha); white-space: nowrap;
}
.wa-ponto { width: 9px; height: 9px; border-radius: 50%; background: #7f8f98; flex: none; }
.wa-conectado .wa-ponto { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.wa-aguardando_qr .wa-ponto, .wa-desconectado .wa-ponto { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-suave); }
.wa-offline .wa-ponto { background: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-suave); }
.wa-offline { color: var(--vermelho-tinta); border-color: color-mix(in srgb, var(--vermelho) 35%, var(--linha)); }

.conteudo { flex: 1; min-width: 0; padding: 28px 32px 48px; width: 100%; max-width: 1480px; }
.conteudo.cheio { padding: 0; max-width: none; }
.sem-menu .casca { min-height: 100vh; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 22px; flex-wrap: wrap; }
.topo p { margin: 6px 0 0; color: var(--mudo); max-width: 72ch; }
.topo > div:first-child { min-width: 0; }

.avisos { margin-bottom: 18px; display: grid; gap: 8px; }
.aviso { padding: 11px 14px 11px 40px; border-radius: var(--r-1); border: 1px solid; position: relative; font-size: 14.5px; }
.aviso::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: currentColor; opacity: .85; }
.aviso.ok { background: var(--verde-suave); border-color: color-mix(in srgb, var(--verde) 35%, transparent); color: var(--verde-tinta); }
.aviso.erro { background: var(--vermelho-suave); border-color: color-mix(in srgb, var(--vermelho) 35%, transparent); color: var(--vermelho-tinta); }

/* ---------- Botoes e formularios ---------- */
.btn {
  font: inherit; font-size: 14px; font-weight: 540; cursor: pointer; border: 1px solid var(--linha-forte); background: var(--painel); color: var(--tinta);
  padding: 8px 14px; border-radius: var(--r-1); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  line-height: 1.3; box-shadow: var(--sombra-1); transition: background-color .12s, border-color .12s;
}
.btn:hover { background: var(--painel-2); border-color: var(--mudo); color: var(--tinta); }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.btn-primario:hover { background: var(--marca-forte); border-color: var(--marca-forte); color: var(--sobre-marca); }
.btn-perigo { color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 40%, var(--linha)); }
.btn-perigo:hover { background: var(--vermelho-suave); color: var(--vermelho-tinta); border-color: var(--vermelho); }
.btn-p { padding: 5px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

label { display: block; font-weight: 580; font-size: 13.5px; margin-bottom: 5px; color: var(--tinta-2); }
input[type=text], input[type=password], input[type=time], input[type=date], input[type=number], input[type=search], input[type=email], input[type=url],
select, textarea {
  font: inherit; font-size: 14.5px; width: 100%; padding: 8px 11px; border: 1px solid var(--linha-forte); border-radius: var(--r-1);
  background: var(--campo); color: var(--tinta); transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--mudo) 80%, transparent); }
input:hover, select:hover, textarea:hover { border-color: var(--mudo); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }
input[type=checkbox], input[type=radio] { accent-color: var(--marca); width: 16px; height: 16px; }
textarea { resize: vertical; min-height: 84px; }
.campo { margin-bottom: 16px; }
.campo .dica { font-size: 13px; color: var(--mudo); margin-top: 4px; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 400; color: var(--tinta); font-size: 14.5px; }
.check input { width: 16px; flex: none; }
.grade { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.painel { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-2); padding: 20px 22px; margin-bottom: 20px; box-shadow: var(--sombra-1); }
.painel > h2 { margin-bottom: 14px; }
.painel .sub { color: var(--mudo); font-size: 13.5px; margin: -8px 0 14px; }
details.painel > summary { list-style: none; display: flex; align-items: center; gap: 10px; }
details.painel > summary::-webkit-details-marker { display: none; }
details.painel > summary::before { content: "+"; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca-tinta); font-weight: 700; }
details.painel[open] > summary::before { content: "−"; }

/* ---------- Tabelas ---------- */
table.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.tabela th {
  text-align: left; font-weight: 600; font-size: 12.5px; color: var(--mudo); padding: 9px 12px; border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap; background: var(--painel);
}
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:hover td { background: var(--painel-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.dir, .tabela th.dir { text-align: right; }
.rolagem-x { overflow-x: auto; }

.tb-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.tb-busca { position: relative; flex: 1 1 240px; max-width: 360px; }
.tb-busca input { padding-left: 34px; }
.tb-busca .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--mudo); pointer-events: none; }
.tb-barra select { width: auto; }
.tb-info { font-size: 13px; color: var(--mudo); margin-left: auto; }
.tabela th.ordena { cursor: pointer; user-select: none; }
.tabela th.ordena:hover { color: var(--tinta); }
.tabela th.ordena::after { content: "↕"; margin-left: 5px; opacity: .35; font-size: 11px; }
.tabela th.ordena[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--marca); }
.tabela th.ordena[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--marca); }
.tabela th.ordena:focus-visible { outline-offset: -2px; }
.tb-pag { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; font-size: 13px; color: var(--mudo); }
.tb-pag .btn { min-width: 34px; justify-content: center; }
.tb-pag .btn.atual { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-tinta); }
.tb-vazio td { text-align: center; color: var(--mudo); padding: 26px 12px; }

.tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 19px; white-space: nowrap; }
.tag-ok { background: var(--verde-suave); color: var(--verde-tinta); }
.tag-off { background: var(--painel-3); color: var(--mudo); }
.tag-adm { background: var(--marca-suave); color: var(--marca-tinta); }

details.editar { margin-top: 6px; }
details.editar summary { cursor: pointer; color: var(--marca); font-size: 13px; font-weight: 540; }
details.editar form { margin-top: 10px; padding: 14px; background: var(--painel-2); border: 1px solid var(--linha); border-radius: var(--r-1); max-width: 560px; }

/* ---------- Login ---------- */
.sem-menu .conteudo { max-width: none; }
.login-pagina { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); width: 100%; min-height: 100vh; }
.login-lado {
  background: radial-gradient(120% 80% at 100% 0%, #15505b 0%, transparent 60%), var(--lat-fundo); color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  position: relative; overflow: hidden;
}
.login-lado .marca-logo { width: 46px; height: 46px; font-size: 22px; border-radius: 12px; }
.login-lado h1 { font-size: 40px; margin: 18px 0 12px; letter-spacing: -.03em; max-width: 14ch; line-height: 1.08; }
.login-lado p { color: #a9c3c9; max-width: 40ch; margin: 0; font-size: 16px; }
.login-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: #c5d8dc; font-size: 14.5px; position: relative; z-index: 1; }
.login-lista li { display: flex; gap: 10px; align-items: center; }
.login-lista li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4fd1e5; flex: none; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--painel); }
.login-form form { width: 100%; max-width: 360px; }
.login-form h2 { margin-bottom: 6px; font-size: 24px; letter-spacing: -.02em; }
.login-form .sub { color: var(--mudo); margin: 0 0 24px; }
.login-form .btn-primario { padding: 11px 14px; font-size: 15px; }

/* ---------- Atendimentos (chat) ---------- */
.chat { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - var(--barra)); height: calc(100dvh - var(--barra)); }
.col-lista { background: var(--painel); border-right: 1px solid var(--linha); display: flex; flex-direction: column; min-height: 0; }
.col-lista header { padding: 16px 16px 10px; }
.col-lista header h1 { font-size: 20px; margin-bottom: 12px; }
.abas { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; }
.abas button {
  font: inherit; font-size: 13.5px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 9px; margin-bottom: -1px;
  cursor: pointer; color: var(--mudo); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center;
}
.abas button:hover { color: var(--tinta); }
.abas button.ativa { color: var(--marca); border-bottom-color: var(--marca); font-weight: 600; }
.abas .n { font-variant-numeric: tabular-nums; font-size: 12px; }
.abas .n:not(:empty) { background: var(--painel-3); color: var(--tinta-2); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.abas button[data-f="aguardando"] .n:not(:empty) { background: var(--ambar-suave); color: var(--ambar-tinta); }
#lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.item-at { padding: 12px 16px; border-bottom: 1px solid var(--linha); cursor: pointer; position: relative; }
.item-at:hover { background: var(--painel-2); }
.item-at.sel { background: var(--marca-suave); }
.item-at.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--marca); }
.item-at .l1, .item-at .l2, .item-at .l3 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.item-at .l1 strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.item-at .hora { font-size: 12px; color: var(--mudo); flex: none; font-variant-numeric: tabular-nums; }
.item-at .prev { color: var(--tinta-2); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-at .l3 { justify-content: flex-start; margin-top: 5px; font-size: 12px; color: var(--mudo); flex-wrap: wrap; }
.item-at .badge { background: var(--verde); }
.st { padding: 0 8px; border-radius: 999px; font-weight: 600; line-height: 18px; }
.st-aguardando { background: var(--ambar-suave); color: var(--ambar-tinta); }
.st-em_atendimento { background: var(--marca-suave); color: var(--marca-tinta); }
.st-resolvido { background: var(--verde-suave); color: var(--verde-tinta); }
.vazio { padding: 36px 20px; color: var(--mudo); text-align: center; }

.col-conversa { display: flex; flex-direction: column; min-height: 0; background: var(--conversa); }
.conversa-vazia { margin: auto; text-align: center; color: var(--mudo); padding: 20px; max-width: 380px; }
.conversa-vazia::before {
  content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; background: var(--painel);
  border: 1px solid var(--linha); box-shadow: var(--sombra-1);
  background-image: radial-gradient(circle, var(--marca) 3px, transparent 4px), radial-gradient(circle, var(--marca) 3px, transparent 4px), radial-gradient(circle, var(--marca) 3px, transparent 4px);
  background-size: 64px 64px; background-repeat: no-repeat; background-position: -12px 0, 0 0, 12px 0;
}
.conversa-vazia h2 { color: var(--tinta); margin-bottom: 8px; }
.conversa-cab { background: var(--painel); border-bottom: 1px solid var(--linha); padding: 12px 20px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.conversa-cab h2 { font-size: 17px; }
.conversa-cab .meta { font-size: 13px; color: var(--mudo); }
.voltar { display: none; }
.msgs { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dia { align-self: center; font-size: 12px; color: var(--tinta-2); background: var(--painel); border: 1px solid var(--linha); border-radius: 999px; padding: 2px 12px; margin: 10px 0 4px; }
.nota { align-self: center; font-size: 12.5px; color: var(--ambar-tinta); background: var(--ambar-suave); border-radius: 8px; padding: 4px 12px; text-align: center; max-width: 80%; }
.bolha { max-width: min(760px, 78%); padding: 8px 12px 6px; border-radius: 12px 12px 12px 4px; background: var(--bolha-in); align-self: flex-start; box-shadow: var(--sombra-1); }
.bolha.out { align-self: flex-end; background: var(--bolha-out); border-radius: 12px 12px 4px 12px; }
.bolha.auto { background: var(--bolha-auto); font-style: italic; }
.bolha .corpo { white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha .rodape { font-size: 11.5px; color: var(--mudo); margin-top: 3px; text-align: right; display: flex; gap: 8px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.bolha .est-erro { color: var(--vermelho); font-weight: 600; }
.bolha img.mini { max-width: min(360px, 100%); max-height: 360px; border-radius: 8px; display: block; margin-bottom: 4px; }
.bolha audio, .bolha video { max-width: 100%; margin-bottom: 4px; }

.composer { background: var(--painel); border-top: 1px solid var(--linha); padding: 10px 16px 12px; position: relative; }
.composer .linha { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { min-height: 56px; max-height: 240px; resize: vertical; }
.composer .ferr { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.composer .ferr .mudo { font-size: 12.5px !important; }
.composer #btn-enviar { padding: 10px 18px; align-self: stretch; }
.composer .aviso-fechado { color: var(--mudo); padding: 6px 2px; }
.sugestoes { position: absolute; left: 16px; right: 16px; bottom: 100%; background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--r-2); max-height: 280px; overflow-y: auto; box-shadow: var(--sombra-2); z-index: 5; }
.sugestoes button { display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--linha); color: var(--tinta); }
.sugestoes button:last-child { border-bottom: 0; }
.sugestoes button.sel, .sugestoes button:hover { background: var(--marca-suave); }
.sugestoes .at { color: var(--marca); font-weight: 600; margin-right: 8px; }
.sugestoes .tx { color: var(--mudo); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

dialog { border: 1px solid var(--linha); border-radius: var(--r-3); padding: 22px 24px; max-width: 440px; width: calc(100% - 32px); background: var(--painel); color: var(--tinta); box-shadow: var(--sombra-2); }
dialog::backdrop { background: rgba(6, 20, 25, .5); backdrop-filter: blur(2px); }
dialog h3 { margin-bottom: 14px; font-size: 18px; }
dialog[open] { animation: surgir .16s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px) scale(.985); } }

/* "Ir para" (Ctrl K) */
dialog.dlg-ir { padding: 0; max-width: 520px; margin-top: 12vh; overflow: hidden; }
.ir-campo { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-bottom: 1px solid var(--linha); color: var(--mudo); }
.ir-campo input { border: 0; box-shadow: none !important; padding: 12px 0; font-size: 16px; background: transparent; }
#ir-lista { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
#ir-lista a { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; }
#ir-lista a .grupo-ir { margin-left: auto; font-size: 12px; color: var(--mudo); }
#ir-lista a.sel { background: var(--marca-suave); color: var(--marca-tinta); }
#ir-lista a .ic { color: var(--mudo); }
#ir-lista a.sel .ic { color: var(--marca); }
.ir-dica { margin: 0; padding: 8px 16px; font-size: 12.5px; color: var(--mudo); border-top: 1px solid var(--linha); background: var(--painel-2); }

/* ---------- Dashboard ---------- */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filtros a.btn.ativo, .filtros button.btn.ativo { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.filtros form { display: flex; gap: 6px; align-items: center; }
.filtros input[type=date] { width: auto; padding: 4px 8px; font-size: 13px; }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
@media (min-width: 1640px) { .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpis:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi {
  padding: 16px 18px 15px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-2); box-shadow: var(--sombra-1);
  position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--marca); opacity: .75; }
.kpi:nth-child(4)::before, .kpi:nth-child(5)::before { background: var(--ambar); }
.kpi .valor { font-size: 30px; font-weight: 680; line-height: 1.1; letter-spacing: -.02em; }
.kpi .rot { color: var(--tinta-2); font-size: 13.5px; margin-top: 6px; font-weight: 540; }
.kpi .apoio { color: var(--mudo); font-size: 12.5px; margin-top: 2px; }

.colunas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.colunas .painel { margin-bottom: 0; }
.colunas + .painel, .painel + .colunas, .colunas + .colunas { margin-top: 20px; }

.grafico { display: flex; gap: 3px; height: 200px; align-items: stretch; padding-top: 6px;
  background: repeating-linear-gradient(to top, var(--linha) 0 1px, transparent 1px 25%) 0 0 / 100% calc(100% - 18px) no-repeat; }
.grafico .col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.grafico .area { flex: 1; position: relative; }
.grafico .b { position: absolute; left: 14%; right: 14%; bottom: 0; height: calc(var(--p) * .84); background: var(--marca); border-radius: 3px 3px 0 0; min-height: 0; transition: opacity .12s; }
.grafico .col:hover .b { opacity: .78; }
.grafico .col.pico .b { background: var(--ambar); }
.grafico .v { position: absolute; left: -4px; right: -4px; bottom: calc(var(--p) * .84 + 2px); text-align: center; font-size: 11px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.grafico .r { height: 18px; font-size: 11px; color: var(--mudo); text-align: center; white-space: nowrap; overflow: visible; padding-top: 3px; }
.legenda { font-size: 12.5px; color: var(--mudo); margin-top: 10px; }
.legenda i { display: inline-block; width: 10px; height: 10px; background: var(--ambar); border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: grid; grid-template-columns: minmax(120px, 1.3fr) 2fr auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.rank li:last-child { border-bottom: 0; }
.rank .nome { overflow: hidden; }
.rank .nome strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .nome small { display: block; }
.rank .trilho { background: var(--painel-3); height: 8px; border-radius: 999px; overflow: hidden; }
.rank .trilho span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.rank .qtd { text-align: right; font-variant-numeric: tabular-nums; min-width: 64px; }
.rank .qtd small { display: block; }
.rodape-nota { color: var(--mudo); font-size: 13px; margin-top: 10px; margin-bottom: 0; }

.wa-qr { text-align: center; }
.wa-qr img { width: 280px; height: 280px; max-width: 100%; border: 1px solid var(--linha); border-radius: var(--r-2); padding: 10px; background: #fff; }
.estado-grande { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 640; margin-bottom: 8px; }
.estado-grande::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #7f8f98; }
.estado-grande.wa-conectado::before { background: var(--verde); box-shadow: 0 0 0 4px var(--verde-suave); }
.estado-grande.wa-aguardando_qr::before, .estado-grande.wa-desconectado::before { background: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-suave); }
.estado-grande.wa-offline::before { background: var(--vermelho); box-shadow: 0 0 0 4px var(--vermelho-suave); }
code, .cod { font-family: var(--mono); background: var(--painel-3); color: var(--tinta); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.vars span { margin-right: 6px; }

/* ---------- Telas medias e pequenas ---------- */
@media (max-width: 1024px) {
  .so-celular { display: grid; }
  .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s ease;
    width: min(300px, 86vw); box-shadow: var(--sombra-2);
  }
  .menu-aberto .lateral { transform: none; }
  .lateral-fechar { display: block; }
  .btn-recolher { display: none; }
  .veu { position: fixed; inset: 0; background: rgba(6, 20, 25, .45); z-index: 25; }
  .barra { padding: 0 16px; }
  .conteudo { padding: 22px 20px 36px; }
}
@media (max-width: 720px) {
  .ir-para span, .ir-para kbd { display: none; }
  .ir-para { width: 38px; padding: 0; justify-content: center; }
  .wa-texto { display: none; }
  .wa-estado { padding: 6px 10px; }
  .conteudo { padding: 18px 14px 30px; }
  h1 { font-size: 22px; }
  .painel { padding: 16px; }
  .kpis, .kpis:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi .valor { font-size: 24px; }
  .chat { grid-template-columns: 1fr; }
  .col-conversa { display: none; }
  .chat.conversa-aberta .col-lista { display: none; }
  .chat.conversa-aberta .col-conversa { display: flex; }
  .voltar { display: inline-flex; margin-bottom: 4px; }
  .login-pagina { grid-template-columns: 1fr; }
  .login-lado { padding: 28px 24px; gap: 18px; }
  .login-lista { display: none; }
  .login-lado h1 { font-size: 28px; margin-top: 14px; }
  .rank li { grid-template-columns: 1fr auto; }
  .rank .trilho { grid-column: 1 / -1; order: 3; }
  .bolha { max-width: 88%; }
  .msgs { padding: 14px; }
  .tb-info { margin-left: 0; width: 100%; }
  .tb-busca { max-width: none; }
  /* tabelas viram cartoes no celular */
  .tabela.cartoes thead { display: none; }
  .tabela.cartoes, .tabela.cartoes tbody, .tabela.cartoes tr, .tabela.cartoes td { display: block; width: 100%; }
  .tabela.cartoes tr { border: 1px solid var(--linha); border-radius: var(--r-2); padding: 6px 4px; margin-bottom: 10px; background: var(--painel); }
  .tabela.cartoes td { border: 0; padding: 5px 10px; text-align: left !important; }
  .tabela.cartoes td[data-th]:not(:first-child)::before { content: attr(data-th); display: block; font-size: 12px; color: var(--mudo); }
  .tabela.cartoes tbody tr:hover td { background: transparent; }
  .painel.rolagem-x:has(.cartoes) { padding: 12px; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .chat { grid-template-columns: 290px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* conversa: conteiner alternado */
.conv { display: none; flex-direction: column; flex: 1; min-height: 0; }
.conv.on { display: flex; }

/* ---------- Anexos, editor de imagem e passo a passo ---------- */
dialog.dlg-medio { max-width: 580px; }
dialog.dlg-grande { max-width: 880px; max-height: calc(100vh - 24px); overflow-y: auto; }
.conv.arrastando { outline: 3px dashed var(--marca); outline-offset: -6px; background: var(--marca-suave); }

.ax-previa { display: flex; justify-content: center; background: var(--painel-2); border: 1px solid var(--linha); border-radius: var(--r-2); padding: 10px; margin-bottom: 12px; }
.ax-previa img { max-width: 100%; max-height: 42vh; border-radius: 4px; }
.ax-arq { display: flex; gap: 10px; align-items: baseline; padding: 14px 6px; overflow-wrap: anywhere; }
.ps-erro { background: var(--vermelho-suave); color: var(--vermelho-tinta); border-radius: var(--r-1); padding: 8px 12px; margin-top: 10px; font-weight: 600; }

.rc-barra { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.rc-barra .btn.ativa { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }
.rc-sep { width: 1px; align-self: stretch; background: var(--linha-forte); margin: 0 4px; }
.rc-area { background: #1d2a30; border-radius: var(--r-2); padding: 8px; display: flex; justify-content: center; align-items: center; overflow: auto; }
.rc-area canvas { max-width: 100%; max-height: 58vh; width: auto; height: auto; cursor: crosshair; touch-action: none; background: #fff; }
.rc-dica { margin: 8px 0 0; color: var(--mudo); font-size: 13.5px; }

.ps-passo { border: 1px solid var(--linha-forte); border-radius: var(--r-2); padding: 12px 14px; margin-bottom: 10px; background: var(--painel-2); }
.ps-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ps-mov { display: flex; gap: 6px; }
.ps-passo textarea { min-height: 58px; resize: vertical; }
.ps-img { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ps-img img { max-width: 240px; max-height: 170px; border: 1px solid var(--linha-forte); border-radius: var(--r-1); background: #fff; }
.ps-img-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
label.btn { cursor: pointer; margin: 0; }
.ps-opcoes { display: grid; gap: 6px; margin-top: 12px; padding: 10px 12px; background: var(--painel-2); border-radius: var(--r-2); }

.gl-itens { max-height: 50vh; overflow-y: auto; margin-top: 10px; border: 1px solid var(--linha); border-radius: var(--r-2); }
.gl-item { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-bottom: 1px solid var(--linha); padding: 10px 12px; cursor: pointer; color: var(--tinta); }
.gl-item:last-child { border-bottom: 0; }
.gl-item:hover, .gl-item:focus-visible { background: var(--marca-suave); }
.gl-item .mudo { margin-left: auto; font-size: 13px; }

.g-linha { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 13px 0; border-bottom: 1px solid var(--linha); }
.g-linha:last-child { border-bottom: 0; }

/* ---------- Historico do cliente ---------- */
.hist-at { padding: 0; margin-bottom: 12px; overflow: hidden; }
.hist-at > summary { cursor: pointer; padding: 13px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; list-style: none; }
.hist-at > summary::-webkit-details-marker { display: none; }
.hist-at > summary::before { content: '▸'; color: var(--mudo); }
.hist-at[open] > summary::before { content: '▾'; }
.hist-at[open] > summary { border-bottom: 1px solid var(--linha); }
.hist-msgs { background: var(--conversa); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.hist-msgs .nota { align-self: center; }
mark { background: #ffe58f; color: #1b1b1b; padding: 0 1px; border-radius: 2px; }

/* ---------- Assistente de IA ---------- */
.ia-caixa { flex: none; max-height: 34vh; overflow-y: auto; background: color-mix(in srgb, var(--ambar-suave) 45%, var(--painel)); border-top: 2px solid var(--ambar); }
.ia-cab { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 16px; background: var(--ambar-suave); }
.ia-titulo { background: none; border: 0; font: inherit; font-weight: 700; color: var(--ambar-tinta); cursor: pointer; padding: 4px 0; }
.ia-estado { font-weight: 400; color: var(--mudo); }
.ia-corpo { padding: 8px 16px 12px; display: grid; gap: 8px; }
.ia-vazio, .ia-aviso, .ia-ok, .ia-analisando { margin: 0; }
.ia-aviso { background: var(--vermelho-suave); color: var(--vermelho-tinta); padding: 8px 10px; border-radius: var(--r-1); }
.ia-ok { background: var(--verde-suave); color: var(--verde-tinta); padding: 6px 10px; border-radius: var(--r-1); font-weight: 600; }
.ia-analisando { color: var(--ambar-tinta); font-size: 13px; font-style: italic; }
.ia-meta { font-size: 13px; color: var(--mudo); }
.ia-tag { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ambar-suave); color: var(--ambar-tinta); }
.ia-tag.alerta { background: var(--vermelho-suave); color: var(--vermelho-tinta); }
.ia-resumo { margin: 0; }
.ia-bloco { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-2); padding: 9px 12px; }
.ia-passos { margin: 4px 0 0; padding-left: 20px; }
.ia-texto { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--painel-2); border-radius: var(--r-1); padding: 8px 10px; }
.ia-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.ia-botoes .sel { background: var(--verde-suave); border-color: var(--verde); color: var(--verde-tinta); }
.ia-botoes .sel.ruim { background: var(--vermelho-suave); border-color: var(--vermelho); color: var(--vermelho-tinta); }
.ia-base { margin: 0; font-size: 13px; color: var(--mudo); }
.ia-auto { border-radius: var(--r-1); padding: 7px 10px; background: var(--painel-2); font-size: 13.5px; }
.ia-auto.agendada { background: var(--ambar-suave); border: 1px solid var(--ambar); }
.ia-dialogo { display: grid; gap: 6px; max-height: 190px; overflow-y: auto; }
.ia-fala { border-radius: var(--r-2); padding: 6px 10px; font-size: 14px; overflow-wrap: anywhere; }
.ia-fala .quem { display: block; font-size: 11.5px; font-weight: 700; color: var(--mudo); }
.ia-fala.ia { background: var(--painel); border: 1px solid var(--linha); }
.ia-fala.eu { background: var(--marca-suave); justify-self: end; max-width: 85%; }
.ia-perg { display: flex; gap: 6px; }
.ia-perg input { flex: 1; }
.ia-rodape { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ia-modos { display: grid; gap: 8px; }
.ia-modo { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linha-forte); border-radius: var(--r-2); padding: 11px 13px; cursor: pointer; font-weight: 580; }
.ia-modo small { display: block; color: var(--mudo); font-size: 13px; margin-top: 2px; font-weight: 400; }
.ia-modo:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.ia-modo input { margin-top: 3px; }
.ia-titulo { flex: 1; text-align: left; }
.ia-cab .btn { flex: none; white-space: nowrap; }

.ia-dialogo-cab { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: inherit; padding: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--mudo); }

/* conversa ampliada: some o menu lateral e a lista, a conversa usa a tela toda */
@media (min-width: 1025px) {
  body.foco-conversa.tem-conversa .lateral { display: none; }
  body.foco-conversa .chat.conversa-aberta { grid-template-columns: 1fr; }
  body.foco-conversa .chat.conversa-aberta .col-lista { display: none; }
  body.foco-conversa .msgs { padding: 18px 6%; }
  body.foco-conversa .bolha { max-width: min(900px, 75%); }
}
.btn-ampliar { font-weight: 600; }
@media (max-width: 1024px) { .btn-ampliar { display: none; } }

/* horario de atendimento no celular: dia em cima, periodos lado a lado */
@media (max-width: 720px) {
  .tabela.horario tr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .tabela.horario td:first-child, .tabela.horario td:nth-child(2) { grid-column: span 1; }
  .tabela.horario td:nth-child(2)::before { display: inline !important; margin-right: 8px; }
  .tabela.horario td:nth-child(2) { display: flex !important; align-items: center; }
}