:root {
  --fundo: #f3f0e8;
  --painel: #fbfaf6;
  --linha: #e2ddd0;
  --tinta: #1c2320;
  --tinta-2: #5d6661;
  --tinta-3: #8c938e;
  --acento: #0e5a4b;
  --acento-tinta: #ffffff;
  --balao-meu: #d9ebe3;
  --balao-dele: #ffffff;
  --perigo: #b4372f;
  --aviso: #9a6a12;
  --aviso-fundo: #fbefd6;
  --sombra: 0 1px 2px rgba(28, 35, 32, .08);
  --raio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121715;
    --painel: #1a201d;
    --linha: #2a322e;
    --tinta: #e8ece9;
    --tinta-2: #a3aca7;
    --tinta-3: #6f7873;
    --acento: #4fb89b;
    --acento-tinta: #08130f;
    --balao-meu: #1f3d34;
    --balao-dele: #222a26;
    --perigo: #e0675e;
    --aviso: #e3b25a;
    --aviso-fundo: #33291a;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo); color: var(--tinta);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
#app { height: 100dvh; display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }

/* ------------------------------------------------ barra de cima */
.barra {
  display: flex; align-items: center; gap: 6px;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 8px;
  background: var(--fundo); border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 5;
}
.barra h1 { font-size: 21px; font-weight: 700; margin: 0 auto 0 6px; letter-spacing: -.01em; }
.barra .titulo { flex: 1; min-width: 0; margin-left: 2px; }
.barra .titulo b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .titulo small { display: flex; align-items: center; gap: 6px; color: var(--tinta-2); font-size: 13px; white-space: nowrap; overflow: hidden; }
.ib {
  width: 42px; height: 42px; border: 0; background: none; border-radius: 50%;
  display: grid; place-items: center; color: var(--tinta); flex: none;
}
.ib:active { background: var(--linha); }
.ib svg { width: 24px; height: 24px; }

/* ------------------------------------------------ filtro de chips */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px 6px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.pilula {
  flex: none; border: 1px solid var(--linha); background: var(--painel);
  border-radius: 999px; padding: 6px 12px; font-size: 14px; display: flex; align-items: center; gap: 7px;
}
.pilula.ativa { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.ponto.off { outline: 2px solid var(--perigo); outline-offset: 1px; }

.busca { padding: 6px 12px 4px; }
.busca input {
  width: 100%; border: 1px solid var(--linha); background: var(--painel); border-radius: 12px;
  padding: 10px 12px; outline: none;
}

/* ------------------------------------------------ lista de conversas */
.rolagem { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.conv {
  display: flex; gap: 12px; align-items: center; padding: 11px 14px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--linha); position: relative;
}
.conv:active { background: var(--painel); }
.conv::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cor); }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; font-size: 17px; color: #fff; background: var(--cor);
}
.conv .meio { flex: 1; min-width: 0; }
.conv .l1, .conv .l2 { display: flex; align-items: baseline; gap: 8px; }
.conv .nome { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .hora { font-size: 12.5px; color: var(--tinta-3); flex: none; }
.conv .previa { flex: 1; color: var(--tinta-2); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .chip-tag { font-size: 11.5px; color: var(--tinta-3); flex: none; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.nova .hora { color: var(--acento); font-weight: 600; }
.conv.nova .nome { font-weight: 700; }
.selo {
  min-width: 21px; height: 21px; border-radius: 11px; background: var(--acento); color: var(--acento-tinta);
  font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; flex: none;
}
.vazio { text-align: center; color: var(--tinta-2); padding: 48px 24px; }
.vazio b { display: block; color: var(--tinta); font-size: 17px; margin-bottom: 6px; }
.rodape-lista { text-align: center; padding: 18px; }
.rodape-lista a { color: var(--tinta-2); font-size: 14px; }

.fab {
  position: fixed; right: max(18px, calc(50vw - 380px + 18px)); bottom: calc(env(safe-area-inset-bottom) + 18px);
  width: 58px; height: 58px; border-radius: 18px; border: 0; background: var(--acento); color: var(--acento-tinta);
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.fab svg { width: 28px; height: 28px; }

/* ------------------------------------------------ conversa */
.faixa-botao { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linha); font-weight: 600; }
.faixa { background: var(--aviso-fundo); color: var(--aviso); font-size: 14px; padding: 8px 14px; border-bottom: 1px solid var(--linha); }
.mensagens { flex: 1; overflow-y: auto; padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 3px; }
.dia { align-self: center; font-size: 12.5px; color: var(--tinta-2); background: var(--painel); border: 1px solid var(--linha); border-radius: 8px; padding: 3px 10px; margin: 10px 0 6px; }
.msg { max-width: 84%; display: flex; flex-direction: column; position: relative; }
.msg.mim { align-self: flex-end; }
.msg.dele { align-self: flex-start; }
.msg.junta { margin-top: -1px; }
.msg:not(.junta) { margin-top: 5px; }
.balao {
  padding: 7px 10px 5px; border-radius: var(--raio); background: var(--balao-dele); box-shadow: var(--sombra);
  word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
}
.mim .balao { background: var(--balao-meu); }
.dele:not(.junta) .balao { border-top-left-radius: 4px; }
.mim:not(.junta) .balao { border-top-right-radius: 4px; }
.balao a { color: var(--acento); }
.autor { font-size: 13px; font-weight: 600; color: var(--acento); margin-bottom: 1px; }
.pe { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 11.5px; color: var(--tinta-3); margin-top: 1px; float: right; margin-left: 10px; position: relative; top: 4px; }
.pe svg { width: 15px; height: 15px; }
.pe .ok { color: var(--acento); }
.msg.erro .balao { outline: 1.5px solid var(--perigo); }
.erro-envio { font-size: 12.5px; color: var(--perigo); margin-top: 3px; text-align: right; }
.erro-envio button { border: 0; background: none; color: var(--perigo); text-decoration: underline; padding: 0 0 0 6px; }
.reacao { position: absolute; bottom: -12px; font-size: 14px; background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 0 5px; line-height: 20px; }
.dele .reacao { left: 8px; }
.mim .reacao { right: 8px; }
.msg.tem-reacao { margin-bottom: 12px; }
.citada { border-left: 3px solid var(--acento); background: rgba(127,127,127,.1); border-radius: 6px; padding: 4px 8px; font-size: 13.5px; color: var(--tinta-2); margin-bottom: 4px; max-height: 3.2em; overflow: hidden; }
.midia-img { display: block; max-width: 100%; max-height: 340px; border-radius: 10px; margin: -2px -4px 4px; min-width: 120px; background: var(--linha); }
.midia-video { max-width: 100%; max-height: 340px; border-radius: 10px; margin-bottom: 4px; }
audio { width: 250px; max-width: 100%; height: 40px; margin-bottom: 2px; }
.doc { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; padding: 6px 4px; }
.doc svg { width: 28px; height: 28px; flex: none; color: var(--tinta-2); }
.doc span { font-size: 14.5px; word-break: break-all; }
.figurinha { width: 130px; height: 130px; object-fit: contain; }
.msg.figura .balao { background: none; box-shadow: none; padding: 0; }
.acoes-msg { display: flex; gap: 6px; margin-top: 4px; }
.mim .acoes-msg { justify-content: flex-end; }
.acoes-msg button { border: 1px solid var(--linha); background: var(--painel); border-radius: 999px; padding: 4px 11px; font-size: 13.5px; display: flex; align-items: center; gap: 5px; }
.acoes-msg svg { width: 16px; height: 16px; }
.carregar-mais { align-self: center; border: 1px solid var(--linha); background: var(--painel); border-radius: 999px; padding: 6px 14px; font-size: 14px; margin: 6px 0; }

/* ------------------------------------------------ caixa de escrever */
.compor { border-top: 1px solid var(--linha); background: var(--fundo); padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px); }
.respondendo { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; }
.respondendo .citada { flex: 1; margin: 0; }
.anexo-previa { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; padding: 8px; background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; font-size: 14px; }
.anexo-previa img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.anexo-previa span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-compor { display: flex; align-items: flex-end; gap: 6px; }
.linha-compor textarea {
  flex: 1; resize: none; border: 1px solid var(--linha); background: var(--painel); border-radius: 22px;
  padding: 10px 14px; max-height: 150px; min-height: 44px; outline: none; line-height: 1.35;
}
.enviar { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--acento); color: var(--acento-tinta); display: grid; place-items: center; flex: none; }
.enviar:disabled { opacity: .45; }
.enviar svg { width: 22px; height: 22px; }

/* ------------------------------------------------ formularios e ajustes */
.pagina { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: 16px; padding: 14px; }
.cartao h2 { font-size: 15px; margin: 0 0 10px; color: var(--tinta-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cartao p { margin: 6px 0; color: var(--tinta-2); font-size: 14.5px; }
label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--linha); background: var(--fundo); border-radius: 12px; padding: 11px 12px; color: var(--tinta); outline: none; font-size: 16px;
}
.campo textarea { resize: vertical; min-height: 90px; }
.botao { border: 0; background: var(--acento); color: var(--acento-tinta); border-radius: 12px; padding: 12px 16px; font-weight: 600; }
.botao.leve { background: var(--fundo); color: var(--tinta); border: 1px solid var(--linha); }
.botao.perigo { background: none; color: var(--perigo); border: 1px solid var(--perigo); }
.botao:disabled { opacity: .5; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.chave { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.chave:first-of-type { border-top: 0; }
.chave span { flex: 1; }
.chave small { display: block; color: var(--tinta-3); font-size: 13px; }
.chave input { width: 46px; height: 28px; appearance: none; background: var(--linha); border-radius: 14px; position: relative; flex: none; transition: background .15s; }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.chave input:checked { background: var(--acento); }
.chave input:checked::after { transform: translateX(18px); }
.chip-linha { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linha); text-decoration: none; color: inherit; }
.chip-linha:first-of-type { border-top: 0; }
.chip-linha .meio { flex: 1; min-width: 0; }
.chip-linha small { display: block; color: var(--tinta-3); font-size: 13px; }
.estado-ok { color: var(--acento); }
.estado-ruim { color: var(--perigo); }
.qr { display: block; width: 260px; max-width: 100%; margin: 6px auto; background: #fff; padding: 10px; border-radius: 12px; }
.codigo { font: 700 30px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-align: center; padding: 14px; background: var(--fundo); border-radius: 12px; }
.erro-form { color: var(--perigo); font-size: 14px; min-height: 1em; }
.login { margin: auto; width: 100%; max-width: 360px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.login h1 { margin: 0; font-size: 26px; }
.login p { margin: 0; color: var(--tinta-2); }
ol.passos { margin: 4px 0; padding-left: 20px; color: var(--tinta-2); font-size: 14.5px; }
ol.passos li { margin: 4px 0; }

.menu-flutua { position: fixed; inset: 0; z-index: 20; }
.menu-flutua .caixa { position: absolute; right: 10px; top: calc(env(safe-area-inset-top) + 54px); background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.18); min-width: 210px; overflow: hidden; }
.menu-flutua button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 13px 16px; font-size: 15.5px; }
.menu-flutua button:active { background: var(--linha); }
.visor { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 30; display: grid; place-items: center; }
.visor img { max-width: 100vw; max-height: 100dvh; }
.visor .ib { position: absolute; top: calc(env(safe-area-inset-top) + 8px); right: 8px; color: #fff; }
.aviso-topo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 90px); background: var(--tinta); color: var(--fundo); padding: 10px 16px; border-radius: 12px; font-size: 14.5px; z-index: 40; max-width: 90vw; }