/* Problemas e Sugestões (V.193) — botão fixo da home, painel, editor de print e a
   página de gestão (problemas.html). Tudo com prefixo .rel- para não esbarrar no
   resto da Central. Cores: as da casa (reset.css) + uma cor por situação. */

:root {
  --rel-novo: #1e6fd9;
  --rel-analise: #b7791f;
  --rel-aguardando: #8e44ad;
  --rel-resolvido: #2e7d4f;
  --rel-nao: #6b7570;
  --rel-alerta: #c62828;
  --rel-amarelo: #f6c445;
}

/* ============================ Botão fixo ============================ */

.rel-fab {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 58;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  min-width: 56px;
  padding: 0 14px 0 13px;
  color: #fff;
  background: linear-gradient(145deg, var(--green-700), var(--green-900));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(23, 48, 40, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font: 700 13px/1 "Montserrat", Arial, sans-serif;
  cursor: pointer;
  animation: rel-fab-entra 0.5s 0.8s cubic-bezier(0.22, 1.4, 0.36, 1) both;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rel-fab:hover, .rel-fab:focus-visible { box-shadow: 0 14px 32px rgba(23, 48, 40, 0.42); transform: translateY(-2px); }
.rel-fab:focus-visible { outline: 3px solid var(--rel-amarelo); outline-offset: 3px; }
.rel-fab-icone { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; }
.rel-fab-icone svg { width: 26px; height: 26px; }
.rel-fab-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}
@media (hover: hover) and (min-width: 700px) {
  .rel-fab:hover .rel-fab-texto, .rel-fab:focus-visible .rel-fab-texto { max-width: 200px; opacity: 1; margin-left: 10px; }
}
.rel-fab-bolinha {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--rel-alerta);
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.rel-fab-bolinha[hidden] { display: none; }
.rel-fab--novidade::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid var(--rel-amarelo);
  animation: rel-pulso 1.8s ease-out infinite;
  pointer-events: none;
}
body.rel-aberto .rel-fab { z-index: 3501; }

@keyframes rel-fab-entra { from { opacity: 0; transform: scale(0.4) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rel-pulso { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }

/* ============================ Painel ============================ */

.rel-fundo { position: fixed; inset: 0; z-index: 3400; background: rgba(10, 10, 10, 0.22); }
.rel-fundo[hidden], .rel-painel[hidden] { display: none; }
.rel-painel {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 68px);
  z-index: 3500;
  display: flex;
  flex-direction: column;
  width: min(1780px, calc(100vw - 32px));
  height: min(780px, calc(100vh - 100px));
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px; /* V.197: menos arredondado (pedido da dona; só a moldura do painel) */
  box-shadow: 0 24px 60px rgba(23, 48, 40, 0.28);
  font-family: "Montserrat", Arial, sans-serif;
  overflow: hidden;
  animation: rel-painel-entra 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: bottom left;
}
@keyframes rel-painel-entra { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: none; } }

.rel-painel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 12px;
  color: #fff;
  background: linear-gradient(140deg, var(--green-700), var(--green-900));
}
.rel-painel-marca { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.rel-painel-icone { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; background: rgba(255, 255, 255, 0.12); border-radius: 12px; }
.rel-painel-icone svg { width: 24px; height: 24px; }
.rel-painel-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.rel-painel-head p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; opacity: 0.85; }
.rel-fechar { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 50%; cursor: pointer; }
.rel-fechar:hover { background: rgba(255, 255, 255, 0.22); }

.rel-abas { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--green-050); overflow-x: auto; }
.rel-aba {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  color: var(--green-800);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 12.5px/1 "Montserrat", Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.rel-aba .material-symbols-rounded { font-size: 18px; }
.rel-aba:hover { background: var(--green-100); }
.rel-aba[aria-selected="true"] { color: #fff; background: var(--green-800); }
.rel-aba-cont { min-width: 18px; padding: 2px 6px; color: #fff; background: var(--rel-alerta); border-radius: 999px; font-size: 10.5px; }
.rel-aba-cont[hidden] { display: none; }

.rel-painel-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 600px) {
  .rel-fab { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); height: 52px; min-width: 52px; padding: 0 11px; }
  .rel-painel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; padding-bottom: env(safe-area-inset-bottom); }
  body.rel-aberto .rel-fab { display: none; }
  body.rel-aberto { overflow: hidden; }
}

/* ============================ Peças comuns ============================ */

.rel-passos { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: p; }
.rel-passos li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 7px 8px; color: var(--muted); background: var(--green-050); border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 1.2; }
.rel-passos li span { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; background: #fff; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.rel-passos li.is-atual { color: var(--green-900); background: var(--green-100); }
.rel-passos li.is-atual span { color: #fff; background: var(--green-800); border-color: var(--green-800); }
.rel-passos li.is-feito span { color: #fff; background: var(--green-600); border-color: var(--green-600); }

.rel-pergunta { margin: 4px 0 0; font-size: 18px; font-weight: 800; color: var(--green-900); text-wrap: balance; }
.rel-dica { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.rel-erro { margin: 0; padding: 10px 12px; color: #8a1c1c; background: #fdecec; border-radius: 10px; font-size: 13px; }
.rel-ok { margin: 0; padding: 10px 12px; color: #1d5b3a; background: #e3f4ea; border-radius: 10px; font-size: 13px; }
.rel-erro[hidden], .rel-ok[hidden] { display: none; }
.rel-carregando, .rel-vazio { margin: 8px 0; color: var(--muted); font-size: 13px; }

.rel-input {
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid rgba(10, 10, 10, 0.2);
  border-radius: 12px;
  font: 500 14px/1.45 "Montserrat", Arial, sans-serif;
  resize: vertical;
}
.rel-input:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(91, 0, 204, 0.18); }
select.rel-input { width: auto; max-width: 100%; padding-right: 30px; }

.rel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 700 13px/1 "Montserrat", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.rel-btn .material-symbols-rounded { font-size: 18px; }
.rel-btn:disabled { opacity: 0.55; cursor: wait; }
.rel-btn--primario { color: #fff; background: var(--green-800); }
.rel-btn--primario:hover:not(:disabled) { background: var(--green-900); }
.rel-btn--claro { color: var(--green-900); background: #fff; border-color: var(--line); }
.rel-btn--claro:hover { background: var(--green-050); }
.rel-btn--fantasma { color: var(--green-800); background: transparent; border-color: rgba(10, 10, 10, 0.2); }
.rel-btn--grande { padding: 14px 20px; font-size: 14.5px; }
.rel-link { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; color: var(--green-700); background: none; border: 0; font: 700 12px "Montserrat", Arial, sans-serif; text-decoration: underline; cursor: pointer; }
.rel-link .material-symbols-rounded { font-size: 16px; }
.rel-link--perigo { color: var(--rel-alerta); }
.rel-voltar { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; color: var(--green-700); background: none; border: 0; font: 700 12.5px "Montserrat", Arial, sans-serif; cursor: pointer; }
.rel-voltar .material-symbols-rounded { font-size: 18px; }

.rel-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; color: var(--green-900); background: var(--green-100); border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.rel-chip .material-symbols-rounded { font-size: 14px; }
.rel-chip--alerta { color: #fff; background: var(--rel-alerta); }
.rel-chip--botao { border: 0; cursor: pointer; font-family: inherit; }
.rel-chip--botao[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 1px; }
.rel-sit--novo { color: #fff; background: var(--rel-novo); }
.rel-sit--em_analise { color: #fff; background: var(--rel-analise); }
.rel-sit--aguardando { color: #fff; background: var(--rel-aguardando); }
.rel-sit--resolvido { color: #fff; background: var(--rel-resolvido); }
.rel-sit--nao_vai_mudar { color: #fff; background: var(--rel-nao); }
.rel-sit--duplicado { color: var(--ink); background: #e3e7e5; }
.rel-num { color: var(--muted); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rel-novo { padding: 3px 8px; color: #fff; background: var(--rel-alerta); border-radius: 999px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }

/* --- passo 1: assuntos --- */
.rel-assuntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 10px; align-items: start; }
.rel-assuntos > .rel-itens--fixos, .rel-assuntos > .rel-vazio { grid-column: 1 / -1; }
.rel-cat { padding: 4px; border: 1px solid var(--line); border-radius: 16px; }
.rel-cat--aqui { border-color: var(--green-600); background: var(--green-050); }
.rel-cat-titulo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; color: var(--green-900); background: none; border: 0; border-radius: 12px; font: 800 14px "Montserrat", Arial, sans-serif; text-align: left; cursor: pointer; }
.rel-cat-titulo:hover { background: var(--green-100); }
.rel-cat-titulo span:not(.material-symbols-rounded) { flex: 1; }
.rel-cat-titulo em { padding: 2px 7px; color: #fff; background: var(--green-700); border-radius: 999px; font-size: 10px; font-style: normal; }
.rel-cat-titulo small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.rel-cat-titulo img, .rel-item img { width: 22px; height: 22px; object-fit: contain; }
.rel-itens { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 8px; }
.rel-itens--fixos { padding: 0; }
.rel-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; color: var(--green-900); background: #fff; border: 1px solid var(--line); border-radius: 999px; font: 600 12.5px "Montserrat", Arial, sans-serif; cursor: pointer; }
.rel-item .material-symbols-rounded { font-size: 17px; color: var(--green-600); }
.rel-item:hover, .rel-item:focus-visible { border-color: var(--green-600); background: var(--green-100); }
.rel-item--fixo { background: var(--green-050); }

.rel-escolhido { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--green-900); background: var(--green-100); border-radius: 12px; font-size: 13px; font-weight: 700; }
.rel-escolhido span:not(.material-symbols-rounded) { flex: 1; min-width: 0; }
.rel-escolhido--tipo { background: #fff6dc; }
.rel-topo-passo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rel-topo-passo .rel-voltar { align-self: center; }
.rel-topo-passo .rel-escolhido { flex: 0 1 auto; }
.rel-cat--fixo { background: #fff8e6; border-color: #efdcae; }
.rel-cat--fixo .rel-cat-titulo:hover { background: #fdeec8; }
.rel-cat--fixo .rel-cat-titulo .material-symbols-rounded { color: #a06d00; }

/* --- passo 2: tipos --- */
.rel-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.rel-tipo-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 16px; font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.rel-tipo-btn:hover, .rel-tipo-btn:focus-visible { border-color: var(--green-600); transform: translateY(-2px); }
.rel-tipo-btn[aria-pressed="true"] { border-color: var(--green-800); background: var(--green-050); }
.rel-tipo-btn .material-symbols-rounded { font-size: 26px; padding: 6px; border-radius: 10px; background: var(--green-100); color: var(--green-800); }
.rel-tipo-btn strong { font-size: 13.5px; }
.rel-tipo-btn span:last-child { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.rel-tipo--problema .material-symbols-rounded { background: #fdecec; color: var(--rel-alerta); }
.rel-tipo--sugestao .material-symbols-rounded { background: #fff6dc; color: #a06d00; }
.rel-tipo--informacao .material-symbols-rounded { background: #e8f0fd; color: var(--rel-novo); }
.rel-tipo--acesso .material-symbols-rounded { background: #f3e8f8; color: var(--rel-aguardando); }
.rel-tipo.rel-tipo--problema, .rel-tipo.rel-tipo--sugestao, .rel-tipo.rel-tipo--informacao, .rel-tipo.rel-tipo--acesso, .rel-tipo.rel-tipo--outro { background: #f1f4f2; }
.rel-tipo .material-symbols-rounded { background: none !important; padding: 0 !important; font-size: 14px !important; }

/* --- passo 3: campos --- */
.rel-campo { display: flex; flex-direction: column; gap: 6px; }
.rel-label { font-size: 13px; font-weight: 800; color: var(--green-900); }
.rel-obrig { color: var(--rel-alerta); }
.rel-opc { color: var(--muted); font-weight: 600; }
.rel-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-opcao { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rel-opcao:has(input:checked) { border-color: var(--green-800); background: var(--green-100); }
.rel-opcao input { accent-color: var(--green-800); margin: 0; }
.rel-opcoes--grandes { flex-direction: column; }
.rel-opcao--grande { border-radius: 14px; padding: 12px 14px; align-items: flex-start; }
.rel-opcao--grande span { display: flex; flex-direction: column; gap: 2px; }
.rel-opcao--grande small { color: var(--muted); font-weight: 500; }
.rel-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rel-check input { accent-color: var(--green-800); }

.rel-zona { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px; color: var(--green-800); background: var(--green-050); border: 2px dashed rgba(10, 10, 10, 0.25); border-radius: 16px; text-align: center; cursor: pointer; }
.rel-zona[hidden] { display: none; }
.rel-zona .material-symbols-rounded { font-size: 30px; }
.rel-zona strong { font-size: 13.5px; }
.rel-zona span:last-child { color: var(--muted); font-size: 12px; }
.rel-zona:hover, .rel-zona:focus-visible, .rel-zona.is-sobre { border-color: var(--green-600); background: var(--green-100); outline: none; }

.rel-minis { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-mini { display: block; width: 104px; height: 78px; padding: 0; background: #eef2ef; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.rel-mini img { width: 100%; height: 100%; object-fit: cover; }
.rel-mini-edit { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.rel-mini-edit figcaption { display: flex; justify-content: space-between; }

.rel-tecnico { padding: 8px 12px; background: var(--green-050); border-radius: 12px; font-size: 12px; }
.rel-tecnico summary { cursor: pointer; font-weight: 700; color: var(--green-800); }
.rel-tecnico dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 2px; }
.rel-tecnico dt { color: var(--muted); }
.rel-tecnico dd { margin: 0; overflow-wrap: anywhere; }

.rel-sucesso { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 6px; text-align: center; }
.rel-sucesso-icone .material-symbols-rounded { font-size: 64px; color: var(--rel-resolvido); animation: rel-fab-entra 0.5s cubic-bezier(0.22, 1.4, 0.36, 1) both; }
.rel-sucesso h3 { margin: 0; font-size: 20px; color: var(--green-900); }
.rel-sucesso p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 34ch; }
.rel-sucesso-resumo { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px; background: var(--green-050); border-radius: 12px; font-size: 13px; text-align: left; overflow-wrap: anywhere; }
.rel-sucesso-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rel-vazio-grande { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 10px; color: var(--muted); text-align: center; }
.rel-vazio-grande > .material-symbols-rounded { font-size: 48px; color: var(--green-600); }

/* ===== Lista + conversa (V.206: Meus relatos e fila da equipe com o mesmo layout) ===== */
.rel-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rel-quando { color: var(--muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* situação: um ponto colorido + o nome */
.rel-status { display: inline-flex; align-items: center; gap: 6px; color: #4b5a54; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rel-status .material-symbols-rounded { font-size: 15px; }
.rel-status-ponto { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--rel-nao); }
.rel-status--novo .rel-status-ponto { background: var(--rel-novo); }
.rel-status--em_analise .rel-status-ponto { background: var(--rel-analise); }
.rel-status--aguardando .rel-status-ponto { background: var(--rel-aguardando); }
.rel-status--aguardando { color: var(--rel-aguardando); font-weight: 700; }
.rel-status--resolvido .rel-status-ponto { background: var(--rel-resolvido); }
.rel-status--duplicado .rel-status-ponto { background: #b8c1bd; }
.rel-impede { display: inline-flex; align-items: center; gap: 3px; color: var(--rel-alerta); font-weight: 700; }
.rel-impede .material-symbols-rounded { font-size: 15px; }

/* esqueleto: o painel inteiro, cada coluna rolando sozinha */
.rel-painel-corpo--chat { padding: 0; overflow: hidden; display: block; }
.rel-chat { container-type: inline-size; height: 100%; min-height: 0; }
.rel-chat-grade { display: grid; grid-template-columns: 1fr; height: 100%; min-height: 0; }
.rel-chat-lista, .rel-chat-conversa { min-width: 0; min-height: 0; }
.rel-chat-lista { display: flex; flex-direction: column; background: #fff; }
.rel-chat-conversa { display: none; flex-direction: column; position: relative; background: var(--green-050); }
.rel-chat--aberto .rel-chat-lista { display: none; }
.rel-chat--aberto .rel-chat-conversa { display: flex; }
@container (min-width: 720px) {
  .rel-chat-grade { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .rel-chat-lista, .rel-chat--aberto .rel-chat-lista { display: flex; border-right: 1px solid rgba(10, 10, 10, 0.14); }
  .rel-chat-conversa { display: flex; }
  .rel-chat-voltar { display: none !important; }
}

/* coluna da lista */
.rel-chat-lista-topo { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.rel-chat-lista-topo h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--green-900); font-size: 14px; font-weight: 800; }
.rel-chat-lista-topo:has(h3) { flex-direction: row; align-items: center; justify-content: space-between; }
.rel-chat-lista-cont { min-width: 22px; padding: 2px 8px; color: var(--green-900); background: var(--green-100); border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; }
.rel-chat-lista-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.rel-chat-lista-vazio { padding: 14px 10px; }
.rel-chat-lista-topo--fila .rel-g-filtros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 142px); gap: 6px; }
.rel-chat-lista-topo--fila .rel-input { padding: 8px 11px; font-size: 13px; }
.rel-chat-lista-topo--fila select.rel-input { width: 100%; }
.rel-chat-lista-topo--fila .rel-g-pilulas { gap: 5px; }
.rel-chat-lista-topo--fila .rel-g-pilula { gap: 5px; padding: 5px 9px; font-size: 11.5px; }
.rel-chat-lista-topo--fila .rel-g-pilula span { min-width: 18px; padding: 1px 5px; font-size: 10.5px; }
.rel-g-rodape { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 11.5px; }
.rel-g-rodape a { color: var(--green-700); font-weight: 700; }

/* linhas da lista */
.rel-linhas { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rel-linha { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 11px 10px; color: var(--ink); background: none; border: 0; border-radius: 10px; font-family: inherit; text-align: left; cursor: pointer; }
.rel-linha:hover { background: var(--green-050); }
.rel-linha.is-ativo { background: var(--green-100); }
.rel-linha:focus-visible { outline: 2px solid var(--green-600); outline-offset: -2px; }
.rel-linha-icone { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; color: var(--green-700); background: var(--green-050); border-radius: 50%; }
.rel-linha.is-ativo .rel-linha-icone { background: #fff; }
.rel-linha-icone .material-symbols-rounded { font-size: 18px; }
.rel-linha-corpo { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rel-linha-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rel-linha-titulo { flex: 1; min-width: 0; overflow: hidden; color: var(--green-900); font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.rel-linha-resumo { overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.rel-linha-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.rel-linha-meta .material-symbols-rounded { font-size: 15px; }
.rel-linha-quem { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.rel-linha-impede { display: inline-flex; color: var(--rel-alerta); }
.rel-linha-anexos { display: inline-flex; align-items: center; gap: 2px; }
.rel-linha--novidade .rel-linha-titulo { font-weight: 800; }
.rel-linha--novidade .rel-linha-resumo { color: var(--ink); }
.rel-ponto-novo { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--rel-alerta); }
.rel-linha--pedido .rel-linha-icone { color: var(--rel-aguardando); background: #f3e8f8; }

/* coluna da conversa */
.rel-chat-vazio { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 30px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.rel-chat-vazio .material-symbols-rounded { font-size: 40px; color: var(--green-600); opacity: 0.7; }
.rel-chat-topo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid rgba(10, 10, 10, 0.14); }
.rel-chat-voltar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; margin-left: -6px; color: var(--green-800); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.rel-chat-voltar:hover { background: var(--green-100); }
.rel-chat-topo-texto { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.rel-chat-titulo { margin: 0; overflow: hidden; color: var(--green-900); font-size: 15px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.rel-chat-btn-det { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 12px; color: var(--green-800); background: #fff; border: 1px solid var(--line); border-radius: 999px; font: 700 12px "Montserrat", Arial, sans-serif; cursor: pointer; }
.rel-chat-btn-det .material-symbols-rounded { font-size: 18px; }
.rel-chat-btn-det:hover, .rel-chat-btn-det[aria-expanded="true"] { background: var(--green-100); border-color: transparent; }
.rel-chat-voltar:focus-visible, .rel-chat-btn-det:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }

/* separador "·" antes de cada item; o do começo de cada linha fica escondido (clip-path), então
   quebrar linha nunca começa com um ponto solto */
.rel-det-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 0 -18px; color: var(--muted); font-size: 12px; clip-path: inset(0 0 0 18px); }
.rel-det-meta > *::before { content: "·"; display: inline-block; width: 18px; color: #b3bdb9; font-weight: 400; text-align: center; }
.rel-det-meta > .rel-status::before { margin-right: -6px; } /* compensa o gap interno (ponto/ícone) */
.rel-det-meta > .rel-impede::before { margin-right: -3px; }

.rel-chat-meio { display: flex; flex: 1; min-height: 0; position: relative; }
.rel-chat-fio { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.rel-chat-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px clamp(14px, 3cqi, 32px) 22px; }
.rel-chat-msgs:focus-visible { outline: 2px solid var(--green-600); outline-offset: -2px; }

/* mensagens: quem abriu à direita, a equipe à esquerda — sempre com o nome */
.rel-conversa { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; padding: 0; list-style: none; }
.rel-msg { display: flex; max-width: min(82%, 620px); }
.rel-msg--equipe { align-self: flex-start; }
.rel-msg--autor { align-self: flex-end; }
.rel-bolha { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 9px 13px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; font-size: 13.5px; }
.rel-msg--equipe .rel-bolha { border-top-left-radius: 4px; }
.rel-msg--autor .rel-bolha { background: var(--green-100); border-color: rgba(91, 0, 204, 0.22); border-top-right-radius: 4px; }
.rel-msg-quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 0; color: var(--muted); font-size: 11.5px; }
.rel-msg-quem strong { color: var(--green-800); font-weight: 700; }
.rel-msg-quem .rel-quando { font-size: 11.5px; }
.rel-msg-texto { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rel-msg-rotulo { display: inline-flex; align-items: center; gap: 4px; color: #6e2f8a; font-size: 11.5px; font-weight: 700; }
.rel-msg-rotulo .material-symbols-rounded { font-size: 15px; }
.rel-msg--relato { max-width: min(88%, 680px); }
.rel-msg--nota .rel-bolha { background: #fff8e1; border: 1px dashed #d9b44a; }
.rel-msg--nota .rel-msg-rotulo { color: #7a5a00; }
.rel-msg--pedido .rel-bolha { background: #fbf6fd; border: 1.5px solid rgba(142, 68, 173, 0.45); }
.rel-respostas { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid rgba(10, 10, 10, 0.1); }
.rel-respostas dt { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.rel-respostas dd { margin: 1px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rel-bolha .rel-mini { width: 120px; height: 84px; border-radius: 8px; }
.rel-ev { display: flex; justify-content: center; }
.rel-ev-texto { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; max-width: 90%; padding: 3px 12px; color: var(--muted); background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; text-align: center; }
.rel-ev-texto strong { color: var(--ink); font-weight: 600; }
.rel-ev .rel-status, .rel-ev .rel-quando { font-size: 11.5px; }
.rel-ev--vazio .rel-ev-texto { background: none; border: 0; }

/* rodapé fixo da conversa */
.rel-chat-rodape { display: flex; flex-direction: column; gap: 6px; padding: 10px clamp(12px, 3cqi, 32px) 12px; background: #fff; border-top: 1px solid rgba(10, 10, 10, 0.14); }
.rel-chat-rodape > * { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; } /* alinha com as mensagens */
.rel-composer-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rel-composer-extra:not(:has(.rel-check)):has(.rel-print-info:empty) { display: none; }
.rel-composer { display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 4px; background: #fff; border: 1.5px solid rgba(10, 10, 10, 0.2); border-radius: 14px; transition: border-color 0.15s, box-shadow 0.15s; }
.rel-composer:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(91, 0, 204, 0.16); }
.rel-composer--pedido { border-color: rgba(142, 68, 173, 0.5); }
.rel-composer--nota { background: #fff8e1; border-color: #d9b44a; }
.rel-composer-texto { flex: 1; min-width: 0; min-height: 38px; max-height: 200px; padding: 9px 4px; color: var(--ink); background: transparent; border: 0; font: 500 14px/1.45 "Montserrat", Arial, sans-serif; resize: none; }
.rel-composer-texto:focus { outline: none; }
.rel-composer-enviar { flex: 0 0 auto; padding: 10px 16px; }
.rel-icone-btn { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: var(--green-700); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.rel-icone-btn:hover { background: var(--green-100); }
.rel-icone-btn:focus-visible { outline: 2px solid var(--green-600); outline-offset: 1px; }
.rel-icone-btn--mini { width: 26px; height: 26px; flex-basis: 26px; }
.rel-icone-btn--mini .material-symbols-rounded { font-size: 16px; }
.rel-print-info { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.rel-print-info:empty { display: none; }
.rel-print-info > .material-symbols-rounded { font-size: 17px; }
.rel-chat-rodape--fechado { align-items: center; color: var(--muted); font-size: 12.5px; text-align: center; }
.rel-reabrir { align-self: stretch; }
.rel-reabrir summary { display: inline-block; padding: 2px 6px; color: var(--green-700); font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.rel-reabrir summary::-webkit-details-marker { display: none; }
.rel-reabrir summary:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; border-radius: 6px; }
.rel-reabrir[open] summary { text-decoration: none; color: var(--green-900); }
.rel-reabrir-corpo { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 8px; text-align: left; }

/* painel "Detalhes": coluna estreita quando cabe; por cima da conversa quando não cabe */
.rel-chat-detalhes { display: none; flex-direction: column; gap: 14px; width: min(320px, 100%); padding: 12px 16px 18px; overflow-y: auto; background: #fff; }
.rel-chat-detalhes:focus { outline: none; }
.rel-chat--detalhes-sobre .rel-chat-detalhes { display: flex; position: absolute; inset: 0 0 0 auto; z-index: 3; border-left: 1px solid rgba(10, 10, 10, 0.14); box-shadow: -14px 0 30px rgba(23, 48, 40, 0.14); }
@container (min-width: 1100px) {
  .rel-chat--detalhes .rel-chat-detalhes { display: flex; position: static; flex: 0 0 300px; width: 300px; border-left: 1px solid rgba(10, 10, 10, 0.14); box-shadow: none; }
  .rel-chat--detalhes-sobre:not(.rel-chat--detalhes) .rel-chat-detalhes { display: none; }
}
@container (max-width: 560px) {
  .rel-chat--detalhes-sobre .rel-chat-detalhes { width: 100%; border-left: 0; box-shadow: none; }
  .rel-chat-btn-det { padding: 8px; }
  .rel-chat-btn-det-texto, .rel-composer-enviar-texto { display: none; }
  .rel-composer-enviar { width: 40px; height: 40px; padding: 0; }
  .rel-msg, .rel-msg--relato { max-width: 90%; }
}
.rel-chat-det-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rel-chat-det-topo h4 { margin: 0; color: var(--green-900); font-size: 14px; font-weight: 800; }
.rel-det-secao { margin: 0; color: var(--green-800); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.rel-det-lista { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.rel-det-lista dt { color: var(--muted); font-size: 11px; font-weight: 600; }
.rel-det-lista dd { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.rel-det-lista small { color: var(--muted); font-size: 12px; }
.rel-gestao { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--green-050); border: 1px solid var(--line); border-radius: 12px; }
.rel-gestao select.rel-input { width: 100%; }
.rel-gestao .rel-btn { align-self: flex-start; }
.rel-gestao .rel-dica[hidden] { display: none; }

/* --- lightbox e editor --- */
.rel-lightbox, .rel-editor { position: fixed; inset: 0; z-index: 6000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(10, 22, 18, 0.92); font-family: "Montserrat", Arial, sans-serif; }
.rel-lightbox img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 10px; background: #fff; }
.rel-lightbox-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rel-editor { justify-content: flex-start; padding-top: max(12px, env(safe-area-inset-top)); }
.rel-ed-barra { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rel-ed-grupo { display: flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 14px; }
.rel-ed-ferr { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; padding: 6px 8px; color: #fff; background: transparent; border: 0; border-radius: 10px; font: 700 10.5px "Montserrat", Arial, sans-serif; cursor: pointer; }
.rel-ed-ferr:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.rel-ed-ferr[aria-pressed="true"] { color: var(--green-900); background: #fff; }
.rel-ed-ferr:disabled { opacity: 0.35; cursor: default; }
.rel-ed-cor { width: 34px; height: 34px; margin: 6px 2px; background: var(--cor); border: 3px solid rgba(255, 255, 255, 0.35); border-radius: 50%; cursor: pointer; }
.rel-ed-cor[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--cor); }
.rel-ed-dica { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 12px; text-align: center; }
.rel-ed-palco { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.rel-editor-canvas { max-width: 100%; max-height: 100%; border-radius: 8px; background: #fff; cursor: crosshair; touch-action: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.rel-ed-rodape { display: flex; gap: 10px; padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 600px) {
  .rel-ed-ferr { min-width: 46px; padding: 6px 4px; }
  .rel-ed-ferr span:not(.material-symbols-rounded) { font-size: 9.5px; }
  .rel-ed-cor { width: 28px; height: 28px; }
}

/* ============================ Página de gestão ============================ */

/* V.206: a página não rola inteira — topo fixo e, embaixo, o cartão lista | conversa, cada coluna
   rolando sozinha. O espaço embaixo do cartão é onde fica o selo de versão. */
.rel-g-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; font-family: "Montserrat", Arial, sans-serif; }
.rel-g-topo { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, 2vw); color: #fff; background: linear-gradient(140deg, var(--green-700), var(--green-900)); }
.rel-g-marca { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; }
.rel-g-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px max(14px, 2vw) 40px; }
.rel-g-main > .rel-chat { flex: 1; height: auto; background: #fff; border: 1px solid rgba(10, 10, 10, 0.16); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(23, 48, 40, 0.08); }
.rel-g-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rel-g-pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-g-pilula { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--green-800); background: #fff; border: 1px solid var(--line); border-radius: 999px; font: 700 12.5px "Montserrat", Arial, sans-serif; cursor: pointer; }
.rel-g-pilula span { min-width: 20px; padding: 1px 6px; color: var(--green-900); background: var(--green-100); border-radius: 999px; font-size: 11px; text-align: center; }
.rel-g-pilula[aria-selected="true"] { color: #fff; background: var(--green-800); border-color: var(--green-800); }
.rel-g-pilula[aria-selected="true"] span { color: var(--green-900); background: #fff; }
.rel-g-pilula:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
@media (max-width: 600px) {
  .rel-g-main { padding: 0 0 34px; }
  .rel-g-main > .rel-chat { border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  .rel-g-topo .rel-btn span:last-child { display: none; }
}
.rel-g-config { display: flex; flex-direction: column; gap: 22px; max-width: 980px; }
.rel-g-config section { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.rel-g-config h2 { margin: 0; font-size: 17px; color: var(--green-900); }
.rel-g-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rel-tabela-rolagem { overflow-x: auto; }
.rel-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.rel-tabela th, .rel-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.rel-tabela th { color: var(--green-800); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.rel-tabela small { color: var(--muted); }
.rel-centro { text-align: center !important; }
.rel-tabela input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green-800); }

.rel-g-body .build-badge {
  position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 90;
  padding: 4px 9px; color: #fff; background: rgba(10, 10, 10, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  font: 700 11px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rel-fab, .rel-painel, .rel-sucesso-icone .material-symbols-rounded { animation: none; }
  .rel-fab--novidade::after { animation: none; opacity: 0.8; }
}