/* =====================================================================
   ATENDIMENTO MAIS — Mais Ambiental
   Visual escuro premium (mesma linha do sistema Pau Brasil)
   ===================================================================== */

:root {
  --bg: #060b13;
  --bg2: #0a111c;
  --card: #0e1725;
  --card2: #121d2f;
  --card3: #172539;
  --linha: #1b283c;
  --linha2: #26374f;

  --txt: #eaf1ff;
  --txt2: #8ea3c6;
  --txt3: #5f7599;

  --verde: #16a34a;
  --verde-esc: #0f7a37;
  --verde-claro: #22c55e;
  --neon: #34d399;
  --menta: #86efac;
  --amarelo: #f5c542;
  --amarelo-esc: #d99e00;
  --erro: #ef4455;
  --erro-claro: #f87171;

  --r: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --sombra-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --brilho-verde: 0 12px 34px rgba(22, 163, 74, .35);

  --sidebar-w: 256px;
  --topbar-h: 72px;
  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--fonte);
  font-size: 14px;
  color: var(--txt);
  background:
    radial-gradient(1200px 600px at 8% -8%, rgba(22, 48, 90, .18), transparent),
    radial-gradient(1000px 500px at 108% 6%, rgba(22, 163, 74, .11), transparent) fixed,
    var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--neon); text-decoration: none; }
a:hover { color: var(--menta); }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; flex: none; }
.cinza { color: var(--txt2); }
.oculto { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linha2); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--verde); }

@keyframes lgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgSlide { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lgFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, 20px) scale(1.08); }
  66% { transform: translate(-20px, 40px) scale(.95); }
}
@keyframes lgRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}
@keyframes lgShine { 0%, 100% { left: -120%; } 50% { left: 150%; } }
@keyframes pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes entrarMsg { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------------------------------------------------------------------
   Botões e campos base
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r);
  padding: 10px 16px; font-weight: 700; font-size: 13.5px;
  transition: transform .18s cubic-bezier(.2, 1, .3, 1), box-shadow .2s, filter .15s, background .15s, border-color .15s, color .15s;
  white-space: nowrap; user-select: none;
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .6; cursor: wait; transform: none !important; }
.btn-primario {
  background: linear-gradient(135deg, var(--verde), var(--verde-esc));
  color: #fff; box-shadow: 0 6px 18px rgba(22, 163, 74, .33);
}
.btn-primario:hover { transform: translateY(-2px); box-shadow: var(--brilho-verde); filter: brightness(1.08); color: #fff; }
.btn-secundario { background: var(--card2); border-color: var(--linha2); color: var(--txt); }
.btn-secundario:hover { border-color: var(--neon); color: var(--neon); }
.btn-perigo { background: rgba(239, 68, 85, .12); border-color: rgba(239, 68, 85, .35); color: #ff8a94; }
.btn-perigo:hover { background: var(--erro); color: #fff; box-shadow: 0 10px 26px rgba(239, 68, 85, .35); }
.btn-amarelo {
  background: linear-gradient(160deg, var(--amarelo), var(--amarelo-esc));
  color: #3a2c00; box-shadow: 0 6px 18px rgba(245, 197, 66, .25);
}
.btn-amarelo:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-icone {
  width: 40px; height: 40px; padding: 0; border-radius: 11px;
  background: var(--card2); border: 1px solid var(--linha2); color: var(--txt2);
  display: inline-grid; place-items: center; transition: .15s;
}
.btn-icone svg { width: 19px; height: 19px; }
.btn-icone:hover { color: var(--neon); border-color: var(--neon); }

.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label { font-size: 11.5px; font-weight: 700; color: var(--txt2); letter-spacing: .5px; text-transform: uppercase; }
.campo label .opcional { text-transform: none; letter-spacing: 0; color: var(--txt3); font-weight: 600; }
.campo input, .campo textarea, .campo select {
  width: 100%;
  background: rgba(6, 11, 19, .6); border: 1.5px solid var(--linha2);
  border-radius: var(--r); padding: 11px 13px; color: var(--txt); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s; font-size: 14px;
}
.campo textarea { resize: vertical; min-height: 90px; line-height: 1.45; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--neon); box-shadow: 0 0 0 4px rgba(22, 163, 74, .16); background: rgba(6, 11, 19, .85);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--txt3); }
.campo select option { background: var(--card); }

.alerta { padding: 12px 14px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.alerta-erro { background: rgba(239, 68, 85, .1); color: #ff9aa3; border: 1px solid rgba(239, 68, 85, .3); }
.alerta-sucesso { background: rgba(34, 197, 94, .1); color: var(--menta); border: 1px solid rgba(34, 197, 94, .3); }

/* =====================================================================
   TELA DE LOGIN / SOLICITAR ACESSO
   ===================================================================== */
.auth {
  position: fixed; inset: 0; display: flex; overflow: hidden; animation: lgFade .5s ease;
  background: radial-gradient(ellipse 90% 80% at 22% 40%, #0d3d24 0%, #0a1f18 35%, #060b14 70%), #05080f;
}
.auth::before, .auth::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.auth::before {
  width: 800px; height: 800px; top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(22, 163, 74, .2), transparent 62%);
  animation: lgFloat 16s ease-in-out infinite;
}
.auth::after {
  width: 650px; height: 650px; bottom: -180px; left: 30%;
  background: radial-gradient(circle, rgba(251, 191, 36, .09), transparent 62%);
  animation: lgFloat 19s ease-in-out infinite reverse;
}
.auth-grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
  background-size: 30px 30px;
}
.auth-split { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; overflow-y: auto; }

.auth-hero { flex: 1; position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; }
.lh-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.lh-glow1 { width: 440px; height: 440px; top: -100px; left: -100px; opacity: .4; background: radial-gradient(circle, #fbbf24aa, #f59e0b44); animation: lgFloat 9s ease-in-out infinite; }
.lh-glow2 { width: 400px; height: 400px; bottom: -120px; right: -90px; opacity: .45; background: radial-gradient(circle, #34d399cc, #059669); animation: lgFloat 11s ease-in-out infinite reverse; }
.lh-glow3 { width: 300px; height: 300px; top: 40%; left: 55%; opacity: .3; background: radial-gradient(circle, #f97316aa, transparent 70%); animation: lgFloat 14s ease-in-out infinite; }
.lh-particulas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.lh-particulas span { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); animation: lgRise linear infinite; }
.lh-particulas span:nth-child(1) { left: 10%; animation-duration: 9s; background: rgba(251, 191, 36, .6); }
.lh-particulas span:nth-child(2) { left: 25%; animation-duration: 12s; animation-delay: 1.5s; width: 4px; height: 4px; }
.lh-particulas span:nth-child(3) { left: 40%; animation-duration: 8s; animation-delay: 3s; background: rgba(52, 211, 153, .7); }
.lh-particulas span:nth-child(4) { left: 55%; animation-duration: 14s; animation-delay: .5s; width: 8px; height: 8px; background: rgba(251, 191, 36, .5); }
.lh-particulas span:nth-child(5) { left: 70%; animation-duration: 10s; animation-delay: 2s; }
.lh-particulas span:nth-child(6) { left: 82%; animation-duration: 11s; animation-delay: 4s; background: rgba(249, 115, 22, .5); }
.lh-particulas span:nth-child(7) { left: 90%; animation-duration: 13s; animation-delay: 1s; width: 5px; height: 5px; }
.lh-particulas span:nth-child(8) { left: 33%; animation-duration: 15s; animation-delay: 3.5s; width: 3px; height: 3px; background: rgba(251, 191, 36, .7); }

.lh-conteudo { position: relative; z-index: 2; max-width: 580px; padding: 56px 50px; animation: lgSlide .7s cubic-bezier(.2, 1, .3, 1); }
.marca { display: flex; align-items: center; gap: 14px; }
.marca-logo { width: 62px; height: 62px; filter: drop-shadow(0 8px 20px rgba(22, 163, 74, .45)); animation: flutuar 6s ease-in-out infinite; }
.marca-nome { font-size: 25px; font-weight: 800; letter-spacing: .5px; line-height: 1; color: #fff; }
.marca-nome b { color: var(--neon); font-weight: 800; }
.marca-sub { font-size: 13.5px; color: var(--menta); font-weight: 600; margin-top: 5px; letter-spacing: .3px; }
.lh-conteudo .marca { margin-bottom: 40px; }
.lh-titulo { font-size: clamp(40px, 4.6vw, 62px); font-weight: 800; line-height: 1.03; letter-spacing: -1.8px; margin-bottom: 24px; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.lh-titulo em { font-style: normal; background: linear-gradient(120deg, var(--neon), var(--amarelo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lh-desc { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: #d9f7e6; margin-bottom: 42px; }
.lh-recursos { display: flex; flex-direction: column; gap: 16px; }
.lh-recurso {
  display: flex; align-items: center; gap: 17px; padding: 10px 14px; margin: -10px -14px;
  border-radius: 16px; border: 1px solid transparent; transition: .28s cubic-bezier(.2, 1, .3, 1);
}
.lh-recurso:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); transform: translateX(8px); }
.lh-recurso-ic {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px); transition: .28s cubic-bezier(.2, 1, .3, 1);
}
.lh-recurso-ic svg { width: 25px; height: 25px; color: #fff; }
.lh-recurso:hover .lh-recurso-ic { background: linear-gradient(135deg, var(--neon), var(--verde)); border-color: #6ee7b7; box-shadow: 0 8px 24px rgba(22, 163, 74, .4); transform: scale(1.08) rotate(-4deg); }
.lh-recurso-t { font-size: 17.5px; font-weight: 700; color: #fff; transition: .28s; }
.lh-recurso:hover .lh-recurso-t { color: #6ee7b7; }
.lh-recurso-d { font-size: 14.5px; color: #c7f5d9; margin-top: 2px; }
.lh-rodape { position: absolute; bottom: 30px; left: 50px; font-size: 12.5px; color: #a7f3d0; z-index: 2; opacity: .85; }

.auth-form-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-form { position: relative; width: 100%; max-width: 470px; animation: lgSlide .6s cubic-bezier(.2, 1, .3, 1); }
.auth-form .marca { display: none; margin-bottom: 34px; }
.lf-titulo {
  font-size: clamp(38px, 4.2vw, 54px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.02; margin-bottom: 14px;
  background: linear-gradient(120deg, #fff 25%, var(--menta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lf-sub { font-size: 17px; color: #9fb0cc; margin-bottom: 36px; line-height: 1.5; }
.lf-campo { margin-bottom: 20px; }
.lf-campo label { display: block; font-size: 14px; font-weight: 700; color: #d0dbec; margin-bottom: 9px; }
.lf-input {
  display: flex; align-items: center; gap: 13px; padding: 0 17px;
  background: rgba(8, 13, 23, .55); border: 1.5px solid #1e2c42; border-radius: 15px;
  backdrop-filter: blur(8px); transition: .25s;
}
.lf-input:focus-within { border-color: var(--neon); background: rgba(8, 13, 23, .78); box-shadow: 0 0 0 4px rgba(22, 163, 74, .15), 0 12px 38px rgba(22, 163, 74, .1); }
.lf-input > svg { width: 21px; height: 21px; color: #5b6b86; transition: .2s; }
.lf-input:focus-within > svg { color: var(--neon); }
.lf-input input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #fff; font-size: 16px; padding: 16px 0; }
.lf-input input::placeholder { color: #4b5a75; }
.lf-input input::-ms-reveal, .lf-input input::-ms-clear { display: none; }
.lf-input input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #0b1320 inset; caret-color: #fff; }
.lf-olho { background: none; border: none; color: #5b6b86; padding: 4px; display: grid; place-items: center; transition: .15s; }
.lf-olho svg { width: 21px; height: 21px; }
.lf-olho:hover { color: var(--neon); }
.lf-alerta { margin-bottom: 18px; }
.lf-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 20px; flex-wrap: wrap; }
.lf-manter { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.lf-manter input { position: absolute; opacity: 0; width: 0; height: 0; }
.lf-manter-box { width: 20px; height: 20px; border-radius: 6px; flex: none; border: 1.5px solid #33465f; background: rgba(8, 13, 23, .5); display: grid; place-items: center; transition: .18s; }
.lf-manter-box::after { content: ""; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--neon), var(--verde)); transform: scale(0); transition: .18s; }
.lf-manter input:checked + .lf-manter-box { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.lf-manter input:checked + .lf-manter-box::after { transform: scale(1); }
.lf-manter input:focus-visible + .lf-manter-box { outline: 2px solid var(--neon); outline-offset: 2px; }
.lf-manter-txt { font-size: 13.5px; color: #9fb0cc; }
.lf-manter:hover .lf-manter-txt { color: #d0dbec; }
.lf-btn {
  position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 11px;
  background: linear-gradient(135deg, var(--verde), var(--verde-esc)); color: #fff; border: none; border-radius: 15px;
  padding: 18px; font-size: 17px; font-weight: 800; transition: .25s; box-shadow: 0 12px 34px rgba(22, 163, 74, .33); margin-top: 4px;
}
.lf-btn::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: lgShine 3.5s ease-in-out infinite;
}
.lf-btn span, .lf-btn svg { position: relative; z-index: 1; }
.lf-btn svg { width: 21px; height: 21px; transition: .2s; }
.lf-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(22, 163, 74, .5); filter: brightness(1.1); }
.lf-btn:hover svg { transform: translateX(5px); }
.lf-btn:disabled { opacity: .75; cursor: wait; }
.lf-link { text-align: center; margin-top: 24px; font-size: 14.5px; color: #9fb0cc; }
.lf-link a { font-weight: 700; }
.lf-nota { text-align: center; font-size: 13px; color: #5b6b86; margin-top: 18px; }
.lf-dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

@media (max-width: 960px) {
  .auth-hero { display: none; }
  .auth-form-area { padding: 32px 20px; }
  .auth-form { margin: auto 0; padding: 12px 0 32px; }
  .auth-form .marca { display: flex; }
}
@media (max-width: 520px) {
  .auth-form-area { align-items: flex-start; }
  .lf-sub { margin-bottom: 28px; font-size: 15.5px; }
  .lf-dupla { grid-template-columns: 1fr; gap: 0; }
  .lf-btn { padding: 16px; font-size: 16px; }
  .marca-logo { width: 50px; height: 50px; }
  .marca-nome { font-size: 21px; }
}

/* =====================================================================
   APP SHELL (menu lateral + barra superior)
   ===================================================================== */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar {
  width: var(--sidebar-w); flex: none; height: 100%; z-index: 60;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0c1624, #070c14 65%);
  border-right: 1px solid var(--linha);
}
.side-marca { height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 18px; position: relative; flex: none; color: inherit; }
.side-marca:hover { color: inherit; }
.side-marca::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 197, 94, .35), transparent); }
.side-marca img { width: 42px; height: 42px; filter: drop-shadow(0 3px 10px rgba(22, 163, 74, .45)); transition: transform .3s cubic-bezier(.2, 1, .3, 1); }
.side-marca:hover img { transform: scale(1.08) rotate(-6deg); }
.sm-nome { white-space: nowrap; font-size: 14px; font-weight: 800; letter-spacing: .4px; color: #fff; line-height: 1.1; }
.sm-nome b { color: var(--neon); }
.sm-sub { font-size: 10.5px; color: var(--txt3); letter-spacing: .6px; margin-top: 3px; text-transform: uppercase; font-weight: 700; }

.side-nav { flex: 1; overflow-y: auto; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.side-label { font-size: 10px; font-weight: 800; color: var(--txt3); letter-spacing: 1.8px; text-transform: uppercase; padding: 4px 12px 10px; }
.side-label + .side-label, .nav-item + .side-label { margin-top: 14px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px;
  color: var(--txt2); font-size: 14px; font-weight: 600; transition: .16s; border: 1px solid transparent;
}
.nav-item svg { width: 20px; height: 20px; }
.nav-item:hover { background: var(--card2); color: var(--txt); }
.nav-item.ativo {
  color: #fff; background: linear-gradient(135deg, rgba(22, 163, 74, .22), rgba(22, 163, 74, .06));
  border-color: rgba(34, 197, 94, .25); box-shadow: inset 3px 0 0 var(--neon);
}
.nav-item.ativo svg { color: var(--neon); }
.nav-badge {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #3a2c00; background: linear-gradient(160deg, var(--amarelo), var(--amarelo-esc));
  box-shadow: 0 3px 10px rgba(245, 197, 66, .3);
}
.nav-badge:empty { display: none; }
.nav-item .ponto-status { margin-left: auto; }

.side-rodape { padding: 14px 14px 18px; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 12px; flex: none; }
.side-status { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--txt2); padding: 0 4px; }
.ponto-status { width: 9px; height: 9px; border-radius: 50%; background: var(--txt3); flex: none; }
.ponto-status.st-ok { background: var(--verde-claro); box-shadow: 0 0 10px var(--verde-claro); animation: pulso 2.2s ease-in-out infinite; }
.ponto-status.st-alerta { background: var(--amarelo); box-shadow: 0 0 10px var(--amarelo); animation: pulso 1.4s ease-in-out infinite; }
.ponto-status.st-erro { background: var(--erro); box-shadow: 0 0 10px var(--erro); }
.perfil { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--linha); }
.perfil-info { min-width: 0; flex: 1; }
.perfil-nome { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-papel { font-size: 10.5px; font-weight: 700; color: var(--neon); letter-spacing: .5px; text-transform: uppercase; margin-top: 2px; }
.perfil .btn-icone { width: 36px; height: 36px; }
.perfil .btn-icone:hover { color: var(--erro-claro); border-color: var(--erro); }
.side-versao { font-size: 10px; color: var(--txt3); text-align: center; letter-spacing: .3px; }

.sidebar-fundo { display: none; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 14px; padding: 0 24px;
  background: linear-gradient(180deg, rgba(14, 22, 36, .92), rgba(10, 16, 27, .92)); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha); position: relative; z-index: 30;
}
.btn-menu { display: none !important; }
.topo-titulo { min-width: 0; }
.topo-titulo h1 { font-size: 18px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-titulo p { font-size: 12px; color: var(--txt2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chip-wpp {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--linha2); color: var(--txt2); font-size: 12.5px; font-weight: 700; transition: .15s;
}
a.chip-wpp:hover { border-color: var(--neon); color: var(--txt); }
.chip-wpp.st-ok { color: var(--menta); border-color: rgba(34, 197, 94, .35); background: rgba(22, 163, 74, .1); }
.chip-wpp.st-alerta { color: var(--amarelo); border-color: rgba(245, 197, 66, .35); background: rgba(245, 197, 66, .08); }
.chip-wpp.st-erro { color: #ff9aa3; border-color: rgba(239, 68, 85, .35); background: rgba(239, 68, 85, .08); }

.conteudo { flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.conteudo.cheio { overflow: hidden; }
.conteudo-pagina { padding: 28px; max-width: 1180px; width: 100%; margin: 0 auto; animation: lgSlide .45s cubic-bezier(.2, 1, .3, 1); }

.avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 14.5px; color: #fff; letter-spacing: .3px;
  background: linear-gradient(160deg, var(--verde-claro), var(--verde-esc)); box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.avatar-sm { width: 36px; height: 36px; font-size: 13px; border-radius: 11px; }
.avatar-lg { width: 64px; height: 64px; font-size: 22px; border-radius: 18px; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-105%); transition: transform .28s cubic-bezier(.2, 1, .3, 1); box-shadow: var(--sombra-lg); }
  .menu-aberto .sidebar { transform: none; }
  .sidebar-fundo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(2, 5, 10, .6); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .menu-aberto .sidebar-fundo { opacity: 1; pointer-events: auto; }
  .btn-menu { display: inline-grid !important; }
  .topbar { padding: 0 14px; gap: 10px; }
  .conteudo-pagina { padding: 18px 16px 28px; }
}
@media (max-width: 560px) {
  :root { --topbar-h: 62px; }
  .topo-titulo p { display: none; }
  .topo-titulo h1 { font-size: 16px; }
  .chip-wpp .chip-txt { display: none; }
  .chip-wpp { padding: 10px; }
}

/* =====================================================================
   PAINEL DE ATENDIMENTO
   ===================================================================== */
.atd { display: grid; grid-template-columns: 350px minmax(0, 1fr) 320px; height: 100%; min-height: 0; }
.atd:not(.com-cliente) { grid-template-columns: 350px minmax(0, 1fr); }
.atd:not(.com-cliente) .atd-cliente { display: none; }
.cli-fundo { display: none; }

/* lista */
.atd-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--linha); background: rgba(10, 16, 27, .6); }
.lista-topo { padding: 16px 16px 12px; display: flex; gap: 10px; }
.busca { position: relative; flex: 1; }
.busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--txt3); pointer-events: none; }
.busca input { width: 100%; height: 44px; padding: 0 12px 0 38px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--linha2); outline: none; transition: .15s; }
.busca input:focus { border-color: var(--neon); box-shadow: 0 0 0 4px rgba(22, 163, 74, .14); }
.busca input::placeholder { color: var(--txt3); }
.btn-nova { width: 44px; height: 44px; padding: 0; flex: none; }
.btn-nova svg { width: 21px; height: 21px; }

.abas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 16px 14px; border-bottom: 1px solid var(--linha); }
.aba {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px 8px;
  border-radius: 11px; border: 1px solid transparent; background: var(--card); color: var(--txt2);
  font-size: 11.5px; font-weight: 700; transition: .16s;
}
.aba svg { width: 17px; height: 17px; }
.aba:hover { color: var(--txt); border-color: var(--linha2); }
.aba.ativo { color: #fff; background: linear-gradient(135deg, rgba(22, 163, 74, .28), rgba(22, 163, 74, .08)); border-color: rgba(34, 197, 94, .35); }
.aba.ativo svg { color: var(--neon); }
.aba-cnt {
  position: absolute; top: -7px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #3a2c00;
  background: linear-gradient(160deg, var(--amarelo), var(--amarelo-esc)); box-shadow: 0 3px 10px rgba(245, 197, 66, .35);
}
.aba-cnt:empty { display: none; }

.conv-lista { list-style: none; flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.conv {
  display: flex; gap: 12px; padding: 12px; border-radius: 14px; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s; position: relative;
}
.conv:hover { background: var(--card); }
.conv.selecionada { background: linear-gradient(135deg, rgba(22, 163, 74, .16), rgba(22, 163, 74, .04)); border-color: rgba(34, 197, 94, .3); }
.conv.selecionada::before { content: ""; position: absolute; left: -10px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--neon); }
.conv-corpo { flex: 1; min-width: 0; }
.conv-linha { display: flex; align-items: baseline; gap: 8px; }
.conv-nome { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-hora { font-size: 11px; color: var(--txt3); flex: none; }
.conv-preview { font-size: 12.5px; color: var(--txt2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; min-width: 0; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tag-fila { color: var(--amarelo); border-color: rgba(245, 197, 66, .35); background: rgba(245, 197, 66, .08); }
.tag-atendimento { color: var(--menta); border-color: rgba(34, 197, 94, .35); background: rgba(22, 163, 74, .1); }
.tag-encerrada { color: var(--txt3); border-color: var(--linha2); background: var(--card); }
.lista-vazia { text-align: center; color: var(--txt3); padding: 42px 18px; font-size: 13px; line-height: 1.6; list-style: none; }
.lista-vazia svg { width: 38px; height: 38px; margin: 0 auto 12px; color: var(--linha2); }

/* chat */
.atd-chat { container-type: inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.atd-chat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 0); background-size: 26px 26px;
}
.chat-vazio { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; gap: 10px; }
.chat-vazio-logo { position: relative; width: 116px; height: 116px; margin-bottom: 12px; }
.chat-vazio-logo::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle, rgba(22, 163, 74, .32), transparent 65%); filter: blur(10px); }
.chat-vazio-logo img { position: relative; width: 100%; height: 100%; animation: flutuar 6s ease-in-out infinite; }
.chat-vazio h2 { font-size: 22px; font-weight: 800; }
.chat-vazio p { color: var(--txt2); max-width: 360px; line-height: 1.55; margin-bottom: 8px; }

.chat-ativo { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-topo {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-height: 70px; flex: none;
  background: rgba(12, 20, 33, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); position: relative; z-index: 2;
}
.btn-voltar { display: none !important; }
.chat-quem { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; }
.chat-quem-info { min-width: 0; }
.chat-nome { font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--txt2); min-width: 0; }
.chat-sub > span:first-child { white-space: nowrap; }
.chat-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.chat-acoes .btn { padding: 9px 13px; }

.chat-mensagens { position: relative; flex: 1; overflow-y: auto; padding: 22px clamp(14px, 3vw, 34px); display: flex; flex-direction: column; gap: 6px; }
.dia { align-self: center; margin: 12px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--txt2); padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--linha); }
.msg {
  position: relative; max-width: min(72%, 560px); padding: 10px 14px 21px; border-radius: 16px; font-size: 14.5px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; animation: entrarMsg .22s ease-out;
}
.msg .hora { position: absolute; right: 12px; bottom: 5px; font-size: 10.5px; opacity: .65; }
.msg-cliente { align-self: flex-start; background: var(--card2); border: 1px solid var(--linha2); border-bottom-left-radius: 5px; }
.msg-atendente { align-self: flex-end; background: linear-gradient(135deg, var(--verde), var(--verde-esc)); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 6px 18px rgba(22, 163, 74, .22); }
.msg-sistema {
  align-self: center; max-width: min(88%, 560px); text-align: center; font-size: 12.5px; color: var(--txt2);
  background: rgba(245, 197, 66, .06); border: 1px dashed rgba(245, 197, 66, .28); padding: 8px 14px 19px; border-radius: 12px;
}
.msg-sistema .hora { right: 50%; transform: translateX(50%); }

.chat-form {
  position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 10px; padding: 14px 18px; flex: none;
  background: rgba(12, 20, 33, .9); backdrop-filter: blur(10px); border-top: 1px solid var(--linha);
}
.chat-form textarea {
  flex: 1; resize: none; max-height: 160px; height: 48px; padding: 13px 16px; border-radius: 16px; line-height: 1.4;
  background: var(--card); border: 1.5px solid var(--linha2); outline: none; transition: border-color .15s, box-shadow .15s;
}
.chat-form textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 4px rgba(22, 163, 74, .14); }
.chat-form textarea::placeholder { color: var(--txt3); }
.btn-enviar { width: 48px; height: 48px; padding: 0; border-radius: 15px; flex: none; }
.btn-enviar svg { width: 21px; height: 21px; }

/* dados do cliente */
.atd-cliente { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--linha); background: rgba(10, 16, 27, .6); }
.cli-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 0; min-height: 58px; }
.cli-topo h3 { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--txt3); }
.cli-cartao { margin: 14px 18px 6px; padding: 18px; border-radius: var(--r-lg); text-align: center; background: linear-gradient(160deg, rgba(22, 163, 74, .14), rgba(22, 163, 74, .02)); border: 1px solid rgba(34, 197, 94, .2); }
.cli-cartao .avatar { margin: 0 auto 10px; }
.cli-cartao strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.cli-cartao .cli-tel { display: block; font-size: 12.5px; color: var(--txt2); margin-top: 3px; }
.cli-form { padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.btn-fechar-cli { display: none !important; }

@media (min-width: 1281px) {
  .btn-toggle-cli { display: none !important; }
}
@media (max-width: 1280px) {
  .atd, .atd:not(.com-cliente) { grid-template-columns: 330px minmax(0, 1fr); }
  .atd .atd-cliente {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); z-index: 70;
    background: var(--bg2); box-shadow: var(--sombra-lg); transform: translateX(105%); transition: transform .28s cubic-bezier(.2, 1, .3, 1);
  }
  .atd.cliente-aberto .atd-cliente { transform: none; }
  .btn-fechar-cli { display: inline-grid !important; }
  .cli-fundo { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(2, 5, 10, .55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: .25s; }
  .atd.cliente-aberto .cli-fundo { opacity: 1; pointer-events: auto; }
}
@media (max-width: 900px) {
  .atd, .atd:not(.com-cliente) { grid-template-columns: minmax(0, 1fr); }
  .atd-lista { border-right: none; }
  .atd-chat { display: none; }
  .atd.chat-aberto .atd-lista { display: none; }
  .atd.chat-aberto .atd-chat { display: flex; }
  .btn-voltar { display: inline-grid !important; }
  .chat-topo { padding: 10px 12px; gap: 10px; min-height: 64px; }
  .msg { max-width: 86%; }
  .chat-form { padding: 10px 12px; }
}
@media (max-width: 640px) {
  .chat-acoes .btn .btn-txt { display: none; }
  .chat-acoes .btn { padding: 0; width: 40px; height: 40px; }
  .chat-acoes { gap: 6px; }
  .chat-quem .avatar { display: none; }
}

/* =====================================================================
   MODAIS, CONFIRMAÇÃO E TOASTS
   ===================================================================== */
.modal-fundo {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(2, 5, 10, .66); backdrop-filter: blur(6px); animation: lgFade .18s ease;
}
.modal {
  width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--linha2);
  border-radius: var(--r-xl); box-shadow: var(--sombra-lg); padding: 24px; animation: lgSlide .3s cubic-bezier(.2, 1, .3, 1);
  display: flex; flex-direction: column; gap: 14px;
}
.modal-cabeca { display: flex; align-items: center; gap: 13px; margin-bottom: 2px; }
.modal-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, var(--neon), var(--verde)); box-shadow: 0 8px 22px rgba(22, 163, 74, .35); }
.modal-ic svg { width: 22px; height: 22px; }
.modal-ic.perigo { background: linear-gradient(135deg, #ff6b78, var(--erro)); box-shadow: 0 8px 22px rgba(239, 68, 85, .35); }
.modal h3 { font-size: 18px; font-weight: 800; }
.modal-sub { font-size: 13px; color: var(--txt2); margin-top: 3px; line-height: 1.45; }
.modal-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .modal-fundo { align-items: flex-end; padding: 0; }
  .modal { border-radius: 22px 22px 0 0; max-height: 92vh; padding: 22px 18px 26px; }
  .modal-botoes .btn { flex: 1; }
}

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 11px; min-width: 260px; max-width: 380px; padding: 13px 16px;
  border-radius: 14px; background: var(--card2); border: 1px solid var(--linha2); box-shadow: var(--sombra-lg);
  font-size: 13.5px; font-weight: 600; line-height: 1.4; animation: lgSlide .3s cubic-bezier(.2, 1, .3, 1); transition: opacity .3s, transform .3s;
}
.toast svg { width: 20px; height: 20px; }
.toast.ok { border-color: rgba(34, 197, 94, .4); } .toast.ok svg { color: var(--neon); }
.toast.erro { border-color: rgba(239, 68, 85, .45); } .toast.erro svg { color: var(--erro-claro); }
.toast.info { border-color: rgba(245, 197, 66, .4); cursor: pointer; } .toast.info svg { color: var(--amarelo); }
.toast.saindo { opacity: 0; transform: translateY(10px); }
@media (max-width: 560px) { .toasts { left: 12px; right: 12px; bottom: 12px; } .toast { min-width: 0; max-width: none; } }

/* =====================================================================
   PÁGINA DE ATENDENTES
   ===================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.stat {
  position: relative; overflow: hidden; padding: 20px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--card2), var(--card)); border: 1px solid var(--linha);
}
.stat::after { content: ""; position: absolute; width: 160px; height: 160px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(22, 163, 74, .22), transparent 65%); }
.stat.amarelo::after { background: radial-gradient(circle, rgba(245, 197, 66, .2), transparent 65%); }
.stat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; color: var(--neon); background: rgba(22, 163, 74, .12); border: 1px solid rgba(34, 197, 94, .25); }
.stat.amarelo .stat-ic { color: var(--amarelo); background: rgba(245, 197, 66, .1); border-color: rgba(245, 197, 66, .28); }
.stat-ic svg { width: 21px; height: 21px; }
.stat-num { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.stat-rot { font-size: 12.5px; color: var(--txt2); margin-top: 6px; font-weight: 600; }

.painel {
  background: linear-gradient(180deg, rgba(18, 29, 47, .9), rgba(14, 23, 37, .9)); border: 1px solid var(--linha);
  border-radius: var(--r-lg); margin-bottom: 22px; overflow: hidden;
}
.painel-cabeca { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--linha); }
.painel-cabeca-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--neon); background: rgba(22, 163, 74, .12); border: 1px solid rgba(34, 197, 94, .25); }
.painel-cabeca-ic.amarelo { color: var(--amarelo); background: rgba(245, 197, 66, .1); border-color: rgba(245, 197, 66, .28); }
.painel-cabeca-ic svg { width: 19px; height: 19px; }
.painel-cabeca h2 { font-size: 15px; font-weight: 800; }
.painel-cabeca p { font-size: 12px; color: var(--txt2); margin-top: 2px; }
.painel-cabeca .cnt { margin-left: auto; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: var(--neon); background: rgba(22, 163, 74, .12); border: 1px solid rgba(34, 197, 94, .28); }
.painel-cabeca .cnt.amarelo { color: var(--amarelo); background: rgba(245, 197, 66, .1); border-color: rgba(245, 197, 66, .3); }
.painel-corpo { padding: 18px 20px; }
.vazio { text-align: center; color: var(--txt3); padding: 18px 10px; font-size: 13px; }

.pendentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pendente { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid rgba(245, 197, 66, .22); }
.pendente .avatar { background: linear-gradient(160deg, var(--amarelo), var(--amarelo-esc)); color: #3a2c00; }
.pendente-info { flex: 1; min-width: 0; }
.pendente-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pendente-info small { display: block; color: var(--txt2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pendente .acoes { display: flex; gap: 8px; width: 100%; }
.pendente .acoes .btn-aprovar { flex: 1; }
.pendente .btn { padding: 8px 11px; }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt3); font-weight: 800; padding: 0 14px 12px; }
.tabela td { padding: 13px 14px; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:hover td { background: rgba(255, 255, 255, .015); }
.pessoa { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pessoa strong { display: block; }
.pessoa small { color: var(--txt2); font-size: 12px; }
.tabela .direita { text-align: right; }
.voce { font-size: 10px; font-weight: 800; color: var(--neon); margin-left: 6px; letter-spacing: .5px; text-transform: uppercase; }

.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; color: var(--txt2); font-weight: 600; font-size: 13.5px; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #33465f; display: grid; place-items: center; background: rgba(8, 13, 23, .5); transition: .18s; flex: none; }
.check .box::after { content: ""; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--neon), var(--verde)); transform: scale(0); transition: .18s; }
.check input:checked + .box { border-color: var(--neon); }
.check input:checked + .box::after { transform: scale(1); }

@media (max-width: 760px) {
  .stats { gap: 10px; }
  .stat { padding: 14px; }
  .stat-ic { width: 34px; height: 34px; margin-bottom: 10px; }
  .stat-ic svg { width: 18px; height: 18px; }
  .stat-num { font-size: 26px; }
  .stat-rot { font-size: 11px; }
  .form-grade { grid-template-columns: 1fr; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: 14px 0; border-top: 1px solid var(--linha); }
  .tabela tbody tr:first-child { border-top: none; padding-top: 0; }
  .tabela td { border: none; padding: 4px 0; }
  .tabela td[data-rot]::before { content: attr(data-rot) ": "; color: var(--txt3); font-size: 11.5px; font-weight: 700; }
  .tabela .direita { text-align: left; padding-top: 10px; }
  .painel-corpo { padding: 16px; }
  .painel-cabeca { padding: 16px; }
}
@media (max-width: 460px) {
  .stat-ic { display: none; }
  .pendente { flex-wrap: wrap; }
  .pendente .acoes { width: 100%; }
  .pendente .acoes .btn { flex: 1; }
  .form-rodape .btn { width: 100%; }
}

/* =====================================================================
   CONECTAR WHATSAPP
   ===================================================================== */
.wpp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.qr-caixa {
  position: relative; overflow: hidden; padding: 30px 28px; border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(180deg, rgba(18, 29, 47, .95), rgba(14, 23, 37, .95)); border: 1px solid var(--linha2);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.qr-caixa::before { content: ""; position: absolute; width: 460px; height: 460px; top: -230px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(22, 163, 74, .22), transparent 65%); pointer-events: none; }
.qr-caixa > * { position: relative; }
.qr-status { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--card); border: 1px solid var(--linha2); color: var(--txt2); max-width: 100%; text-align: left; }
.qr-status .ponto-status { background: var(--txt3); }
.qr-status.conectado { color: var(--menta); border-color: rgba(34, 197, 94, .35); }
.qr-status.conectado .ponto-status { background: var(--verde-claro); box-shadow: 0 0 10px var(--verde-claro); animation: pulso 2.2s infinite; }
.qr-status.aguardando { color: var(--amarelo); border-color: rgba(245, 197, 66, .35); }
.qr-status.aguardando .ponto-status { background: var(--amarelo); box-shadow: 0 0 10px var(--amarelo); animation: pulso 1.3s infinite; }
.qr-status.desconectado { color: #ff9aa3; border-color: rgba(239, 68, 85, .3); }
.qr-status.desconectado .ponto-status { background: var(--erro); }
.qr-moldura {
  width: min(280px, 100%); aspect-ratio: 1; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--linha2); padding: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.qr-moldura.com-qr { background: #fff; border-color: transparent; box-shadow: 0 0 0 1px rgba(34, 197, 94, .35), 0 0 0 8px rgba(22, 163, 74, .08), 0 20px 60px rgba(22, 163, 74, .22); }
.qr-moldura img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr-carregando { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--linha2); border-top-color: var(--neon); animation: girar .9s linear infinite; }
.qr-conectado-tela { flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 6px; }
.qr-conectado-icone { width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; color: #fff; margin-bottom: 10px; background: linear-gradient(135deg, var(--neon), var(--verde)); box-shadow: 0 16px 44px rgba(22, 163, 74, .45); animation: flutuar 4s ease-in-out infinite; }
.qr-conectado-icone svg { width: 42px; height: 42px; }
.qr-conectado-tela strong { font-size: 21px; }
.qr-conectado-tela span { color: var(--txt2); }
.qr-caixa .lf-btn { max-width: 340px; }
.qr-caixa .alerta { width: 100%; text-align: left; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; }
.passos { list-style: none; display: flex; flex-direction: column; gap: 12px; counter-reset: passo; }
.passo { display: flex; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--card2), var(--card)); border: 1px solid var(--linha); counter-increment: passo; transition: .2s; }
.passo:hover { border-color: rgba(34, 197, 94, .3); transform: translateX(4px); }
.passo::before {
  content: counter(passo); width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center;
  font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--neon), var(--verde)); box-shadow: 0 6px 16px rgba(22, 163, 74, .3);
}
.passo strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.passo span { color: var(--txt2); font-size: 13px; line-height: 1.5; }
.wpp-dica { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-lg); font-size: 13px; line-height: 1.55; color: var(--txt2); background: rgba(245, 197, 66, .06); border: 1px dashed rgba(245, 197, 66, .3); }
.wpp-dica b { color: var(--amarelo); }
@media (max-width: 900px) { .wpp { grid-template-columns: 1fr; } .qr-caixa { padding: 24px 16px; } }

/* cabecalho do chat: quando a coluna fica estreita, os botoes viram so icone */
@container (max-width: 680px) {
  .chat-acoes .btn .btn-txt { display: none; }
  .chat-acoes .btn { padding: 0; width: 40px; height: 40px; }
  .chat-acoes { gap: 6px; }
}
@container (max-width: 440px) {
  .chat-quem .avatar { display: none; }
  .chat-sub { flex-wrap: wrap; row-gap: 4px; }
}
.rot-curto { display: none; }
@media (max-width: 760px) { .rot-longo { display: none; } .rot-curto { display: inline; } }

/* nome de quem escreveu (varios atendentes no mesmo numero) */
.msg .autor { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; margin-bottom: 3px; opacity: .85; }
.msg-atendente .autor { color: #d1fae5; }

/* =====================================================================
   CHAT ESTILO WHATSAPP: anexos, áudio, responder, marcar
   ===================================================================== */
.rodape-chat { position: relative; z-index: 3; flex: none; background: rgba(12, 20, 33, .92); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); }
.rodape-chat .chat-form { background: none; border: none; backdrop-filter: none; padding: 12px 18px 14px; align-items: flex-end; }

.compositor {
  flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; padding: 4px 6px;
  background: var(--card); border: 1.5px solid var(--linha2); border-radius: 18px; transition: border-color .15s, box-shadow .15s;
}
.compositor:focus-within { border-color: var(--neon); box-shadow: 0 0 0 4px rgba(22, 163, 74, .14); }
.compositor textarea {
  flex: 1; min-width: 0; resize: none; border: none; outline: none; background: none; box-shadow: none !important;
  padding: 9px 4px; height: 24px; max-height: 140px; line-height: 1.4; box-sizing: content-box; font-size: 14.5px;
}
.compositor textarea::placeholder { color: var(--txt3); }
.btn-comp { width: 38px; height: 38px; flex: none; border: none; background: none; color: var(--txt3); border-radius: 12px; display: grid; place-items: center; transition: .15s; }
.btn-comp svg { width: 21px; height: 21px; }
.btn-comp:hover { color: var(--neon); background: rgba(52, 211, 153, .08); }
.btn-enviar { width: 48px; height: 48px; padding: 0; border-radius: 50%; flex: none; position: relative; }
.btn-enviar .ic-mic, .btn-enviar.modo-mic .ic-enviar { display: none; }
.btn-enviar.modo-mic .ic-mic { display: grid; }
.btn-enviar .ic-enviar, .btn-enviar .ic-mic { place-items: center; }
.btn-enviar .ic-enviar { display: grid; }
.btn-enviar svg { width: 21px; height: 21px; }

.menu-anexo, .emoji-pop {
  position: absolute; bottom: calc(100% - 4px); z-index: 20; background: var(--card2); border: 1px solid var(--linha2);
  border-radius: 16px; box-shadow: var(--sombra-lg); animation: lgSlide .18s cubic-bezier(.2, 1, .3, 1);
}
.menu-anexo { right: 76px; padding: 6px; display: flex; flex-direction: column; min-width: 200px; }
.menu-anexo button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: none; background: none; border-radius: 11px; font-weight: 600; text-align: left; }
.menu-anexo button:hover { background: var(--card3); }
.menu-anexo button svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.menu-anexo button:nth-child(2) svg { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
.menu-anexo button:nth-child(3) svg { background: linear-gradient(135deg, #f472b6, #be185d); }
.so-celular { display: none !important; }
@media (hover: none) and (pointer: coarse) { .so-celular { display: flex !important; } }
.emoji-pop { left: 18px; width: min(340px, calc(100vw - 36px)); padding: 10px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-pop button { border: none; background: none; font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 9px; transition: transform .12s, background .12s; }
.emoji-pop button:hover { background: var(--card3); transform: scale(1.15); }

/* responder */
.resposta-barra { display: flex; align-items: center; gap: 10px; padding: 10px 18px 0; animation: lgSlide .2s ease; }
.resposta-conteudo {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--card);
  border-left: 4px solid var(--neon); display: flex; flex-direction: column; gap: 2px;
}
.resposta-barra.de-cliente .resposta-conteudo { border-left-color: var(--amarelo); }
.resposta-conteudo strong { font-size: 12.5px; color: var(--neon); }
.resposta-barra.de-cliente strong { color: var(--amarelo); }
.resposta-conteudo span { font-size: 13px; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resposta-barra .btn-icone { width: 34px; height: 34px; }

/* gravando */
.gravando { display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px; }
.grav-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 24px; background: var(--card); border: 1.5px solid rgba(239, 68, 85, .35); }
.grav-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--erro); box-shadow: 0 0 10px var(--erro); animation: pulso 1s infinite; flex: none; }
.grav-tempo { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 40px; }
.grav-ondas { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; overflow: hidden; }
.grav-ondas i { flex: 1; max-width: 4px; min-width: 2px; height: 30%; border-radius: 2px; background: var(--neon); animation: onda 0.9s ease-in-out infinite; }
@keyframes onda { 0%, 100% { height: 20%; opacity: .5; } 50% { height: 100%; opacity: 1; } }
.btn-lixo:hover { color: var(--erro-claro) !important; border-color: var(--erro) !important; }

/* soltar arquivos */
.solte-aqui { position: absolute; inset: 12px; z-index: 30; display: grid; place-items: center; border-radius: 22px; background: rgba(6, 11, 19, .82); border: 2px dashed var(--neon); backdrop-filter: blur(4px); pointer-events: none; animation: lgFade .15s; }
.solte-aqui div { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.solte-aqui svg { width: 46px; height: 46px; color: var(--neon); }
.solte-aqui strong { font-size: 20px; }
.solte-aqui span { color: var(--txt2); }

.btn-descer { position: absolute; right: 22px; bottom: 96px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; box-shadow: var(--sombra-lg); }

/* balões: detalhes */
.msg { max-width: min(72%, 520px); }
.msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg { white-space: normal; }
.msg-texto a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.msg-cliente .msg-texto a { color: var(--neon); }
.msg .hora { display: inline-flex; align-items: center; gap: 4px; }
.msg-estrela svg { width: 11px; height: 11px; color: var(--amarelo); }
.msg-erro svg { width: 13px; height: 13px; color: #ffb4bb; }
.msg-atendente:has(.msg-erro) { background: linear-gradient(135deg, #7f1d1d, #4c1d24); box-shadow: none; }
.msg.piscar { animation: piscar 1.4s ease; }
@keyframes piscar { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0); } 25%, 60% { box-shadow: 0 0 0 4px rgba(245, 197, 66, .55); } }

.msg-mais {
  position: absolute; top: 5px; right: 5px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: none; display: grid; place-items: center;
  background: rgba(6, 11, 19, .55); color: #fff; opacity: 0; transform: scale(.85); transition: .15s;
}
.msg-mais svg { width: 16px; height: 16px; }
.msg:hover .msg-mais, .msg-mais:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .msg-mais { display: none; } }

.citacao {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; margin: 2px 0 6px; padding: 7px 10px;
  border: none; border-left: 4px solid var(--neon); border-radius: 9px; background: rgba(0, 0, 0, .22); color: inherit;
}
.citacao.de-cliente { border-left-color: var(--amarelo); }
.citacao strong { font-size: 12px; color: var(--menta); }
.citacao.de-cliente strong { color: var(--amarelo); }
.citacao span { font-size: 12.5px; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-cliente .citacao { background: rgba(255, 255, 255, .05); }

/* foto / figurinha / vídeo */
.msg.com-midia { padding: 5px 5px 22px; }
.msg.com-midia .msg-texto { padding: 6px 8px 0; }
.msg.com-midia .autor, .msg.com-midia .citacao { margin-left: 4px; margin-right: 4px; width: calc(100% - 8px); }
.msg.com-midia .autor { padding-top: 3px; }
.msg-foto { display: block; padding: 0; border: none; background: none; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.msg-foto img { display: block; width: 100%; max-width: 330px; max-height: 360px; min-width: 160px; object-fit: cover; background: rgba(0, 0, 0, .25); }
.msg.tipo-figurinha { background: none !important; border: none !important; box-shadow: none !important; }
.msg-foto.figurinha img { width: 150px; min-width: 0; height: 150px; object-fit: contain; background: none; }
.msg-video { display: block; width: 100%; max-width: 340px; max-height: 360px; border-radius: 12px; background: #000; }

/* áudio */
.audio { display: flex; align-items: center; gap: 10px; width: min(300px, 62vw); padding: 6px 8px 0 4px; }
.audio-play { width: 40px; height: 40px; flex: none; border-radius: 50%; border: none; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; transition: .15s; }
.msg-cliente .audio-play { background: linear-gradient(135deg, var(--verde), var(--verde-esc)); }
.audio-play:hover { transform: scale(1.06); }
.audio-play svg { width: 17px; height: 17px; }
.audio-meio { flex: 1; min-width: 0; }
.audio-barra { position: relative; height: 18px; cursor: pointer; }
.audio-barra::before, .audio-prog { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; }
.audio-barra::before { right: 0; background: rgba(255, 255, 255, .22); }
.audio-prog { width: 0; background: #fff; }
.msg-cliente .audio-prog { background: var(--neon); }
.audio-bolinha { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.msg-cliente .audio-bolinha { background: var(--neon); }
.audio-info { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font-size: 11px; opacity: .8; }
.audio-tempo { font-variant-numeric: tabular-nums; }
.audio-vel { border: none; background: rgba(255, 255, 255, .15); color: inherit; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 8px; }
.audio-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.audio-avatar svg { width: 18px; height: 18px; }
.audio.tocando .audio-avatar { animation: pulso 1.2s infinite; }

/* documento */
.doc { display: flex; align-items: center; gap: 11px; min-width: min(280px, 62vw); padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .2); color: inherit; text-decoration: none; transition: background .15s; }
.doc:hover { background: rgba(0, 0, 0, .3); color: inherit; }
.msg-cliente .doc { background: rgba(255, 255, 255, .05); }
.doc-ic { position: relative; width: 42px; height: 48px; flex: none; display: grid; place-items: center; color: #fff; border-radius: 9px; background: linear-gradient(160deg, #64748b, #334155); }
.doc-ic svg { width: 26px; height: 26px; opacity: .35; }
.doc-ic em { position: absolute; bottom: 7px; font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .4px; }
.doc-ic[data-ext="PDF"] { background: linear-gradient(160deg, #f87171, #b91c1c); }
.doc-ic[data-ext="DOC"], .doc-ic[data-ext="DOCX"] { background: linear-gradient(160deg, #60a5fa, #1d4ed8); }
.doc-ic[data-ext="XLS"], .doc-ic[data-ext="XLSX"], .doc-ic[data-ext="CSV"] { background: linear-gradient(160deg, #4ade80, #15803d); }
.doc-ic[data-ext="PPT"], .doc-ic[data-ext="PPTX"] { background: linear-gradient(160deg, #fb923c, #c2410c); }
.doc-ic[data-ext="ZIP"], .doc-ic[data-ext="RAR"] { background: linear-gradient(160deg, #facc15, #a16207); }
.doc-info { flex: 1; min-width: 0; }
.doc-info strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-info small { font-size: 11.5px; opacity: .75; }
.doc-baixar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; }
.doc-baixar svg { width: 16px; height: 16px; }

/* enviando (balão temporário) */
.msg.enviando { opacity: .85; min-width: 220px; }
.enviando-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.enviando-linha svg { width: 18px; height: 18px; flex: none; }
.enviando-linha span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enviando-barra { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); margin-top: 8px; overflow: hidden; }
.enviando-barra div { height: 100%; width: 0; background: #fff; transition: width .2s; }

.divisor-conversa { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; color: var(--txt3); font-size: 11.5px; font-weight: 700; }
.divisor-conversa::before, .divisor-conversa::after { content: ""; flex: 1; height: 1px; background: var(--linha2); }
.divisor-conversa span { padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--linha2); white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; }

/* menu da mensagem */
.menu-msg { position: fixed; z-index: 150; min-width: 190px; padding: 6px; background: var(--card2); border: 1px solid var(--linha2); border-radius: 14px; box-shadow: var(--sombra-lg); animation: lgFade .12s; }
.menu-msg button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: none; background: none; border-radius: 10px; font-weight: 600; text-align: left; }
.menu-msg button:hover { background: var(--card3); color: var(--neon); }
.menu-msg svg { width: 18px; height: 18px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 180; background: rgba(2, 5, 10, .94); display: flex; flex-direction: column; animation: lgFade .15s; }
.lightbox-topo { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.lightbox-topo span { flex: 1; min-width: 0; color: var(--txt2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox img { flex: 1; min-height: 0; width: 100%; object-fit: contain; padding: 0 18px 18px; }

/* prévia de anexo */
.modal-anexo { max-width: 520px; }
.anexo-previa { border-radius: 16px; overflow: hidden; background: #000; display: grid; place-items: center; max-height: 50vh; }
.anexo-previa img, .anexo-previa video { max-width: 100%; max-height: 50vh; display: block; object-fit: contain; }
.anexo-lista { display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; }
.anexo-item { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 12px; background: var(--card); border: 1px solid var(--linha); }
.anexo-item img { width: 42px; height: 48px; object-fit: cover; border-radius: 9px; flex: none; }
.anexo-item span:last-child { min-width: 0; }
.anexo-item strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anexo-item small { color: var(--txt2); font-size: 12px; }

/* marcadas na ficha do cliente */
.marcadas { margin: 12px 18px 0; padding: 14px; border-radius: var(--r-lg); background: rgba(245, 197, 66, .05); border: 1px solid rgba(245, 197, 66, .2); }
.marcadas-titulo { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--amarelo); }
.marcadas-titulo svg { width: 15px; height: 15px; }
.marcadas-cnt { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px; text-align: center; background: rgba(245, 197, 66, .15); }
.marcadas-cnt:empty { display: none; }
#lista-marcadas { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 240px; overflow-y: auto; }
#lista-marcadas li { padding: 9px 11px; border-radius: 11px; background: var(--card); border: 1px solid var(--linha); cursor: pointer; transition: .15s; }
#lista-marcadas li:hover { border-color: rgba(245, 197, 66, .45); transform: translateX(3px); }
#lista-marcadas li strong { display: block; font-size: 11.5px; color: var(--amarelo); }
#lista-marcadas li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; margin: 2px 0; }
#lista-marcadas li small { font-size: 11px; color: var(--txt3); }
#lista-marcadas .marcadas-vazio { cursor: default; font-size: 12.5px; color: var(--txt2); line-height: 1.5; background: none; border: 1px dashed var(--linha2); }
#lista-marcadas .marcadas-vazio:hover { transform: none; border-color: var(--linha2); }

@media (max-width: 900px) {
  .rodape-chat .chat-form { padding: 8px 10px 10px; gap: 8px; }
  .gravando { padding: 8px 10px 10px; }
  .resposta-barra { padding: 8px 10px 0; }
  .menu-anexo { right: 64px; }
  .emoji-pop { left: 10px; }
  .msg { max-width: 86%; }
  .btn-descer { bottom: 84px; right: 14px; }
}
@media (max-width: 520px) {
  .emoji-pop { grid-template-columns: repeat(7, 1fr); }
  .btn-comp { width: 34px; }
}

.msg-foto:focus:not(:focus-visible), .citacao:focus:not(:focus-visible), .audio button:focus:not(:focus-visible) { outline: none; }
.compositor textarea { white-space: pre-wrap; }

/* endereço de rede do computador principal */
.endereco-rede { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(22, 163, 74, .08); border: 1px solid rgba(34, 197, 94, .28); }
.endereco-rede span { flex: 1 1 200px; color: var(--txt2); font-size: 13px; line-height: 1.45; }
.endereco-rede strong { font-size: 20px; letter-spacing: .5px; color: var(--menta); font-variant-numeric: tabular-nums; }
.endereco-rede.topo { margin: 0 0 22px; }

/* =====================================================================
   GRUPOS DO WHATSAPP + NÃO LIDAS
   ===================================================================== */
.abas { grid-template-columns: repeat(5, 1fr); gap: 5px; padding-left: 12px; padding-right: 12px; }
.aba { font-size: 11px; padding-left: 2px; padding-right: 2px; }
.aba-cnt-verde { color: #04210f; background: linear-gradient(160deg, var(--neon), #16a34a); box-shadow: 0 3px 10px rgba(34, 197, 94, .35); }
.tag-grupo { color: #93c5fd; border-color: rgba(96, 165, 250, .35); background: rgba(59, 130, 246, .1); }
.tag-grupo svg { width: 12px; height: 12px; flex: none; }
.avatar.avatar-grupo { display: grid; place-items: center; }
.avatar.avatar-grupo svg { width: 52%; height: 52%; color: #fff; }
.conv-linha .conv-preview { flex: 1; min-width: 0; }
.nao-lidas {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; margin-top: 3px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #04210f;
  background: var(--neon); box-shadow: 0 2px 8px rgba(34, 197, 94, .35);
}
.conv.tem-nao-lidas .conv-nome { color: #fff; }
.conv.tem-nao-lidas .conv-hora { color: var(--neon); font-weight: 700; }
.conv.tem-nao-lidas .conv-preview { color: var(--txt); }
.msg .autor-grupo { opacity: 1; }
.msg .autor-celular { display: inline-flex; align-items: center; gap: 4px; color: #d1fae5; }
.msg .autor-celular svg { width: 12px; height: 12px; }
@media (max-width: 420px) { .aba { font-size: 10px; } .aba svg { width: 15px; height: 15px; } }
.wpp-sync { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.wpp-sync .btn { font-size: 12.5px; }

/* =====================================================================
   CADASTRO: FUNÇÃO
   ===================================================================== */
.lf-dica { display: block; margin-top: 8px; font-size: 12.5px; color: #6f809c; line-height: 1.45; }
.funcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.funcao { position: relative; cursor: pointer; }
.funcao input { position: absolute; opacity: 0; pointer-events: none; }
.funcao-cartao {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 14px; min-height: 54px;
  border: 1.5px solid #22314a; background: rgba(8, 13, 23, .55); color: #b7c4d8; transition: .18s;
}
.funcao-cartao svg { width: 22px; height: 22px; flex: none; color: #5b6b86; transition: .18s; }
.funcao-cartao b { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.funcao:hover .funcao-cartao { border-color: #33465f; color: #fff; }
.funcao input:checked + .funcao-cartao {
  border-color: var(--neon); color: #fff;
  background: linear-gradient(135deg, rgba(22, 163, 74, .25), rgba(22, 163, 74, .06));
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .12), 0 10px 30px rgba(22, 163, 74, .12);
}
.funcao input:checked + .funcao-cartao svg { color: var(--neon); }
.funcao input:focus-visible + .funcao-cartao { outline: 2px solid var(--neon); outline-offset: 2px; }
@media (max-width: 420px) { .funcoes { grid-template-columns: 1fr 1fr; } .funcao-cartao { padding: 11px; gap: 8px; } .funcao-cartao b { font-size: 12.5px; } }

/* =====================================================================
   v6 — NÃO LIDAS, FIXADAS, MENU DA CONVERSA
   ===================================================================== */
.conv { padding-right: 34px; }
.conv-preview b { font-weight: 700; color: var(--txt2); }
.conv.tem-nao-lidas .conv-preview b { color: var(--txt); }
.nao-lidas.ponto { min-width: 12px; width: 12px; height: 12px; padding: 0; margin-top: 5px; }
.conv-pino { flex: none; display: grid; place-items: center; color: var(--txt3); margin-top: 3px; }
.conv-pino svg { width: 14px; height: 14px; transform: rotate(35deg); }
.conv.fixada { background: rgba(255, 255, 255, .018); }
.conv-mais {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; border: none; background: var(--card3); color: var(--txt2);
  opacity: 0; transition: .15s;
}
.conv-mais svg { width: 16px; height: 16px; }
.conv:hover .conv-mais, .conv-mais:focus-visible { opacity: 1; }
.conv-mais:hover { color: var(--neon); }
@media (hover: none) { .conv { padding-right: 12px; } .conv-mais { display: none; } }
.menu-conv button span { white-space: nowrap; }

/* abas: 5 com contador verde */
.aba-cnt-verde:empty { display: none; }

/* sino de lembretes */
.btn-sino { position: relative; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--card); border: 1px solid var(--linha2); color: var(--txt2); }
.btn-sino svg { width: 20px; height: 20px; }
.btn-sino.tem { color: var(--amarelo); border-color: rgba(245, 197, 66, .35); }
.sino-cnt {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, #f87171, #dc2626); box-shadow: 0 3px 10px rgba(220, 38, 38, .45);
  animation: sinoPulso 1.6s infinite;
}
.sino-cnt:empty { display: none; }
@keyframes sinoPulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* =====================================================================
   CHAT: faixa de não lidas, carregar anteriores, marcador na fala
   ===================================================================== */
.faixa-nao-lidas { align-self: stretch; display: flex; justify-content: center; margin: 10px -4px; padding: 6px 0; background: rgba(52, 211, 153, .07); border-block: 1px solid rgba(52, 211, 153, .18); }
.faixa-nao-lidas span { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--neon); padding: 3px 12px; border-radius: 999px; background: rgba(4, 33, 15, .6); }
.carregar-topo { align-self: center; margin: 4px 0 10px; min-height: 34px; display: flex; align-items: center; }
.btn-topo {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(14, 23, 37, .85); border: 1px solid var(--linha2); color: var(--txt2); backdrop-filter: blur(6px); transition: .15s;
}
.btn-topo svg { width: 15px; height: 15px; }
.btn-topo:hover { color: var(--neon); border-color: rgba(52, 211, 153, .4); }
.topo-buscando { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--neon); padding: 8px 14px; border-radius: 999px; background: rgba(4, 33, 15, .55); border: 1px solid rgba(52, 211, 153, .3); }
.giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(52, 211, 153, .25); border-top-color: var(--neon); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.msg.com-marcador { box-shadow: inset 3px 0 0 var(--marc), 0 0 0 1px color-mix(in srgb, var(--marc) 35%, transparent); }
.msg-atendente.com-marcador { box-shadow: inset -3px 0 0 var(--marc), 0 0 0 1px color-mix(in srgb, var(--marc) 45%, transparent); }
.msg-marcador {
  display: flex; align-items: center; gap: 6px; max-width: 100%; margin: -2px 0 6px; padding: 4px 9px 4px 7px; border-radius: 8px;
  border: none; font-size: 11.5px; text-align: left; color: #fff; cursor: pointer;
  background: color-mix(in srgb, var(--marc) 22%, rgba(0, 0, 0, .25));
}
.msg-marcador svg { width: 12px; height: 12px; flex: none; color: var(--marc); fill: var(--marc); }
.msg-marcador b { font-weight: 800; color: var(--marc); letter-spacing: .2px; filter: brightness(1.15); }
.msg-marcador span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.msg-marcador span::before { content: "· "; opacity: .6; }

/* ficha: marcadores */
.marcadas { background: rgba(255, 255, 255, .02); border-color: var(--linha2); }
.marcadas-titulo { color: var(--txt); }
.marcadas-titulo svg { color: var(--amarelo); }
#lista-marcadas li { border-left: 3px solid var(--marc, var(--amarelo)); }
#lista-marcadas li:hover { border-color: var(--marc, var(--amarelo)); }
.marc-linha { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.marc-pilula { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--marc); }
.marc-pilula svg { width: 11px; height: 11px; fill: var(--marc); }
#lista-marcadas li em { display: block; font-style: normal; font-size: 12.5px; font-weight: 700; margin-top: 4px; }
#lista-marcadas li span b { color: var(--txt2); font-weight: 700; }

/* modal marcador */
.modal-marcador { max-width: 480px; }
#marc-ic { --marc: var(--neon); color: var(--marc); background: color-mix(in srgb, var(--marc) 16%, transparent); border-color: color-mix(in srgb, var(--marc) 40%, transparent); }
.marc-bloco { display: flex; flex-direction: column; gap: 9px; }
.marc-rotulo { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--txt2); }
.marc-rotulo svg { width: 14px; height: 14px; }
.marc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.marc-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 12px; font-weight: 700; font-size: 13px;
  border: 1.5px solid var(--linha2); background: var(--card); color: var(--txt2); transition: .15s;
}
.marc-chip svg { width: 14px; height: 14px; color: var(--marc); }
.marc-chip:hover { color: var(--txt); border-color: color-mix(in srgb, var(--marc) 55%, transparent); }
.marc-chip.ativo { color: #fff; border-color: var(--marc); background: color-mix(in srgb, var(--marc) 22%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marc) 18%, transparent); }
.marc-chip.ativo svg { fill: var(--marc); }
.marc-quando { display: flex; flex-wrap: wrap; gap: 7px; }
.marc-quando button { padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--linha2); background: var(--card); color: var(--txt2); transition: .15s; }
.marc-quando button:hover { color: var(--txt); }
.marc-quando button.ativo { color: #3a2c00; background: linear-gradient(160deg, var(--amarelo), var(--amarelo-esc)); border-color: transparent; }
#marc-data { background: var(--card); border: 1px solid var(--linha2); border-radius: 12px; padding: 11px 12px; color: var(--txt); color-scheme: dark; }
.modal-marcador .modal-botoes { flex-wrap: wrap; }

/* lista de lembretes */
.pop-lembretes {
  position: fixed; z-index: 160; width: min(380px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 90px)); display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--linha2); border-radius: 18px; box-shadow: var(--sombra-lg); animation: lgFade .15s;
}
.pop-cabeca { display: flex; align-items: center; gap: 9px; padding: 14px 14px 10px 16px; border-bottom: 1px solid var(--linha); }
.pop-cabeca > svg { width: 18px; height: 18px; color: var(--amarelo); }
.pop-cabeca strong { flex: 1; font-size: 14.5px; }
#lista-lembretes { list-style: none; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.lemb { padding: 11px 12px; border-radius: 13px; background: var(--card); border: 1px solid var(--linha); }
.lemb.vencido { border-color: rgba(245, 197, 66, .5); background: linear-gradient(135deg, rgba(245, 197, 66, .1), var(--card)); }
.lemb-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 11.5px; }
.lemb-hora { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--amarelo); }
.lemb-hora svg { width: 12px; height: 12px; }
.lemb-contato { display: inline-flex; align-items: center; gap: 4px; color: var(--txt2); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lemb-contato svg { width: 12px; height: 12px; }
.lemb-texto { font-weight: 700; font-size: 13.5px; margin-top: 6px; }
.lemb-trecho { font-size: 12.5px; color: var(--txt2); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lemb-acoes { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.lemb-acoes button, .alarme-acoes button {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 9px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--linha2); background: var(--card2); color: var(--txt2);
}
.lemb-acoes button:hover, .alarme-acoes button:hover { color: var(--txt); }
.lemb-acoes button svg, .alarme-acoes button svg { width: 13px; height: 13px; }
.lemb-acoes .ok { color: var(--neon); border-color: rgba(52, 211, 153, .35); }
.lemb-vazio { display: flex; gap: 12px; align-items: flex-start; color: var(--txt2); font-size: 13px; line-height: 1.5; padding: 10px 6px; }
.lemb-vazio svg { width: 22px; height: 22px; flex: none; color: var(--txt3); }

/* alarme na hora do lembrete */
.alarmes { position: fixed; z-index: 190; top: 16px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.alarme {
  pointer-events: auto; display: flex; gap: 13px; padding: 15px 16px; border-radius: 18px;
  background: linear-gradient(135deg, #2a2106, #111a28 70%); border: 1px solid rgba(245, 197, 66, .55);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 4px rgba(245, 197, 66, .1); animation: alarmeEntra .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes alarmeEntra { from { opacity: 0; transform: translateY(-24px) scale(.96); } }
.alarme-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #3a2c00; background: linear-gradient(160deg, var(--amarelo), var(--amarelo-esc)); animation: sinoBalanca 1.2s ease-in-out 3; }
.alarme-ic svg { width: 22px; height: 22px; }
@keyframes sinoBalanca { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.alarme-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alarme-corpo small { font-size: 11.5px; font-weight: 800; color: var(--amarelo); letter-spacing: .3px; }
.alarme-corpo strong { font-size: 15px; }
.alarme-corpo > span { font-size: 12.5px; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alarme-acoes { display: flex; gap: 6px; margin-top: 8px; }
.alarme-acoes .principal { color: #3a2c00; background: linear-gradient(160deg, var(--amarelo), var(--amarelo-esc)); border-color: transparent; }

@media (max-width: 560px) {
  .lista-topo { gap: 8px; }
  .btn-sino, .btn-nova { width: 42px; height: 42px; }
  .abas { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .aba { font-size: 10.5px; }
  .modal-marcador .marc-chip { padding: 8px 10px; font-size: 12.5px; }
}

.qr-ajuda { width: 100%; margin-top: 14px; padding: 14px; border-radius: 14px; background: rgba(245, 197, 66, .07); border: 1px solid rgba(245, 197, 66, .3); text-align: center; }
.qr-ajuda p { color: #fde68a; font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; }

/* usuário logado no topo (nome + função) */
.eu { position: relative; }
.eu-botao {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--linha2); color: var(--txt); transition: .15s; max-width: 260px;
}
.eu-botao:hover { border-color: rgba(52, 211, 153, .4); }
.eu-botao > svg { width: 15px; height: 15px; color: var(--txt3); flex: none; }
.eu-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, #22c55e, #0f7a37); border-radius: 50%; box-shadow: 0 4px 14px rgba(22, 163, 74, .3); }
.eu-info { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.2; }
.eu-info strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-info small { font-size: 11px; font-weight: 700; color: var(--neon); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; width: 250px; padding: 8px; border-radius: 16px;
  background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--linha2); box-shadow: var(--sombra-lg); animation: lgFade .12s;
}
.eu-menu-cab { display: flex; gap: 11px; align-items: center; padding: 8px 8px 12px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
.eu-menu-cab .eu-avatar { width: 42px; height: 42px; font-size: 17px; }
.eu-menu-cab div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eu-menu-cab strong { font-size: 14.5px; }
.eu-menu-cab small { font-size: 12px; font-weight: 700; color: var(--neon); }
.eu-menu-cab .eu-email { color: var(--txt3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-menu a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; font-weight: 700; color: var(--txt2); text-decoration: none; }
.eu-menu a:hover { background: var(--card3); color: #ff9aa3; }
.eu-menu a svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .eu-info, .eu-botao > svg { display: none; } .eu-botao { padding: 3px; } }

/* =====================================================================
   v8 — FUNDO DO CHAT (estilo WhatsApp, com a marca da Mais)
   ===================================================================== */
.atd-chat {
  background:
    radial-gradient(ellipse 70% 45% at 12% 0%, rgba(22, 163, 74, .12), transparent 62%),
    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(20, 184, 166, .09), transparent 60%),
    #070c15;
}
.atd-chat::before { opacity: 1; background-image: url("../img/fundo-chat.svg"); background-size: 420px 420px; background-position: center top; }

/* =====================================================================
   LISTA: lembrete e marcadores em cima do contato
   ===================================================================== */
.conv-lemb {
  display: flex; align-items: center; gap: 6px; min-width: 0; margin: -2px 0 5px; padding: 3px 8px 3px 6px; border-radius: 8px;
  font-size: 11px; line-height: 1.3; color: var(--txt2);
  background: color-mix(in srgb, var(--marc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--marc) 30%, transparent);
}
.conv-lemb svg { width: 12px; height: 12px; flex: none; color: var(--marc); }
.conv-lemb b { color: var(--marc); font-weight: 800; flex: none; }
.conv-lemb span { flex: none; font-weight: 700; color: var(--txt); }
.conv-lemb i { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-lemb i::before { content: "· "; opacity: .6; }
.conv-lemb.vencido { animation: lembPulsa 1.8s ease-in-out infinite; }
@keyframes lembPulsa { 50% { background: color-mix(in srgb, var(--marc) 26%, transparent); } }
.conv-marcs { display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 5px; }
.conv-marcs span {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 6px; font-size: 10.5px; font-weight: 800;
  color: var(--marc); background: color-mix(in srgb, var(--marc) 12%, transparent);
}
.conv-marcs svg { width: 10px; height: 10px; fill: var(--marc); }

/* =====================================================================
   TRANSFERIR
   ===================================================================== */
.modal-transferir { max-width: 500px; }
.transf-busca { display: flex; align-items: center; gap: 9px; padding: 0 13px; border-radius: 12px; background: var(--card); border: 1px solid var(--linha2); }
.transf-busca svg { width: 17px; height: 17px; color: var(--txt3); flex: none; }
.transf-busca input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--txt); padding: 11px 0; }
.transf-busca:focus-within { border-color: rgba(52, 211, 153, .5); }
.transf-lista { display: flex; flex-direction: column; gap: 7px; max-height: min(330px, 42vh); overflow-y: auto; padding: 2px; }
.transf-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; text-align: left;
  border: 1.5px solid var(--linha2); background: var(--card); color: var(--txt); transition: .15s;
}
.transf-item:hover { border-color: rgba(52, 211, 153, .35); background: var(--card2); }
.transf-item.ativo { border-color: var(--neon); background: linear-gradient(135deg, rgba(22, 163, 74, .2), rgba(22, 163, 74, .05)); box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }
.transf-item .avatar { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: #fff; }
.transf-item .avatar svg { width: 20px; height: 20px; }
.transf-item .avatar i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #56627a; border: 2.5px solid var(--card); }
.transf-item .avatar i.on { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .7); }
.transf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.transf-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transf-info strong em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--txt3); margin-left: 4px; text-transform: uppercase; }
.transf-info small { font-size: 12px; color: var(--neon); font-weight: 700; }
.transf-meta { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.transf-meta b { font-size: 11px; font-weight: 800; color: var(--txt3); }
.transf-meta b.on { color: #4ade80; }
.transf-meta small { font-size: 11px; color: var(--txt3); }
.transf-check { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--linha2); color: transparent; }
.transf-check svg { width: 13px; height: 13px; }
.transf-item.ativo .transf-check { background: var(--neon); border-color: var(--neon); color: #04210f; }
.transf-fila .avatar { background: linear-gradient(160deg, var(--amarelo), var(--amarelo-esc)); color: #3a2c00; }
.transf-fila .transf-info small { color: var(--amarelo); }
#transf-enviar:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 480px) { .transf-meta small { display: none; } }

.alarme-transf { background: linear-gradient(135deg, #062a17, #111a28 70%); border-color: rgba(52, 211, 153, .55); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 4px rgba(52, 211, 153, .1); }
.alarme-transf .alarme-ic { background: linear-gradient(160deg, #34d399, #16a34a); color: #04210f; animation: none; }
.alarme-transf .alarme-corpo small { color: #6ee7b7; }
.alarme-transf .alarme-acoes .principal { background: linear-gradient(160deg, #34d399, #16a34a); color: #04210f; }
.alarme-nota { white-space: normal !important; color: var(--txt) !important; background: rgba(255, 255, 255, .05); padding: 6px 9px; border-radius: 9px; margin-top: 3px; }

/* =====================================================================
   PAINEL DO CLIENTE (ao lado do chat)
   ===================================================================== */
.atd-cliente { background: linear-gradient(180deg, #0a111d, #080d17); gap: 0; padding-bottom: 18px; }
.cli-topo { padding: 16px 16px 0; min-height: 50px; }
.cli-hero {
  position: relative; margin: 10px 14px 4px; padding: 22px 16px 16px; border-radius: 20px; text-align: center; overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(34, 197, 94, .22), transparent 70%), linear-gradient(180deg, #0f1a2a, #0c1422);
  border: 1px solid rgba(52, 211, 153, .18);
}
.cli-hero::before { content: ""; position: absolute; inset: 0; background: url("../img/fundo-chat.svg") center / 300px; opacity: .8; pointer-events: none; }
.cli-hero > * { position: relative; }
.cli-avatar { width: 84px !important; height: 84px !important; margin: 0 auto 12px; border-radius: 26px !important; font-size: 30px !important; display: grid !important; place-items: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 255, 255, .05); }
.cli-avatar svg { width: 40px; height: 40px; }
.cli-hero strong { display: block; font-size: 18px; letter-spacing: -.2px; overflow-wrap: anywhere; }
.cli-tel {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--txt2); background: rgba(0, 0, 0, .25); border: 1px solid var(--linha2); transition: .15s;
}
.cli-tel svg { width: 13px; height: 13px; }
.cli-tel:not(:disabled):hover { color: var(--neon); border-color: rgba(52, 211, 153, .4); }
.cli-tel:disabled { cursor: default; }
.cli-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 12px; }
.cli-chip { font-size: 10.5px; font-weight: 800; letter-spacing: .2px; padding: 3px 9px; border-radius: 999px; color: var(--txt2); background: rgba(255, 255, 255, .05); border: 1px solid var(--linha2); }
.cli-chip.verde { color: #4ade80; border-color: rgba(74, 222, 128, .35); background: rgba(22, 163, 74, .12); }
.cli-chip.amarelo { color: var(--amarelo); border-color: rgba(245, 197, 66, .35); background: rgba(245, 197, 66, .08); }
.cli-chip.azul { color: #93c5fd; border-color: rgba(96, 165, 250, .35); background: rgba(59, 130, 246, .1); }

.cli-form { padding: 0; gap: 0; display: block; }
.cli-sec { margin: 12px 14px 0; padding: 13px 14px; border-radius: 16px; background: rgba(255, 255, 255, .025); border: 1px solid var(--linha); }
.cli-sec-tit { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--txt2); margin-bottom: 9px; }
.cli-sec-tit svg { width: 14px; height: 14px; color: var(--neon); }
.cli-salvo { margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none; color: #4ade80; opacity: 0; transition: .25s; }
.cli-salvo.on { opacity: 1; }
#cli-observacoes {
  width: 100%; min-height: 64px; resize: vertical; border-radius: 11px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--txt);
  background: rgba(245, 197, 66, .05); border: 1px dashed rgba(245, 197, 66, .28); outline: none; transition: .15s;
}
#cli-observacoes:focus { border-style: solid; border-color: rgba(245, 197, 66, .55); background: rgba(245, 197, 66, .08); }
.cli-campo { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .04); cursor: text; }
.cli-campo:first-of-type { border-top: none; }
.cli-campo span { font-size: 11.5px; font-weight: 700; color: var(--txt3); }
.cli-campo input { width: 100%; min-width: 0; background: none; border: 1px solid transparent; border-radius: 9px; padding: 8px 9px; color: var(--txt); font-size: 13.5px; outline: none; transition: .15s; }
.cli-campo input::placeholder { color: #4d5d78; }
.cli-campo input:hover { background: rgba(255, 255, 255, .03); }
.cli-campo input:focus { background: var(--card); border-color: rgba(52, 211, 153, .45); }
.marcadas.cli-sec { margin: 12px 14px 0; }
.cli-pessoas { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cli-pessoas li { display: flex; align-items: center; gap: 9px; }
.cli-pessoas .avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #fff; }
.cli-pessoas div { flex: 1; min-width: 0; }
.cli-pessoas strong { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-pessoas i { display: block; height: 3px; border-radius: 3px; margin-top: 4px; opacity: .7; }
.cli-pessoas small { font-size: 11px; font-weight: 800; color: var(--txt3); }
.cli-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.cli-fotos button { aspect-ratio: 1; border: none; border-radius: 10px; background: var(--card3) center / cover no-repeat; cursor: zoom-in; transition: .15s; display: grid; place-items: center; color: #fff; }
.cli-fotos button:hover { filter: brightness(1.15); transform: scale(1.03); }
.cli-fotos button.video svg { width: 22px; height: 22px; }
.cli-docs { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.cli-docs a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--linha); color: var(--txt); text-decoration: none; font-size: 12.5px; }
.cli-docs a:hover { border-color: rgba(52, 211, 153, .35); }
.cli-docs svg { width: 16px; height: 16px; color: #93c5fd; flex: none; }
.cli-docs span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-docs small { color: var(--txt3); font-size: 11px; flex: none; }
.cli-vazio { list-style: none; font-size: 12.5px; color: var(--txt3); line-height: 1.5; grid-column: 1 / -1; }
.atd-cliente > * { flex-shrink: 0; }

.lf-alerta { cursor: pointer; animation: lfAlertaEntra .35s ease; overflow: hidden; transition: opacity .35s, transform .35s, max-height .4s, margin .4s, padding .4s; }
.lf-alerta-sai { opacity: 0; transform: translateY(-6px); max-height: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; }
@keyframes lfAlertaEntra { from { opacity: 0; transform: translateY(-8px); } }

/* =====================================================================
   CHAT DA EQUIPE
   ===================================================================== */
.eq { display: grid; grid-template-columns: 350px minmax(0, 1fr); height: 100%; min-height: 0; }
.eq-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--linha); background: rgba(10, 16, 27, .6); }
.eq-pessoas { list-style: none; flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.eq-pessoa { padding-right: 12px; }
.eq-chat {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: radial-gradient(ellipse 70% 45% at 12% 0%, rgba(59, 130, 246, .10), transparent 62%),
              radial-gradient(ellipse 60% 45% at 100% 100%, rgba(22, 163, 74, .09), transparent 60%), #070c15;
}
.eq-chat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../img/fundo-chat.svg") center top / 420px 420px; }
.eq-ativo { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.eq-av { position: relative; display: grid !important; place-items: center; color: #fff; font-weight: 800; border-radius: 50%; }
.eq-av > i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #56627a; border: 2.5px solid #0b1220; }
.eq-av > i.on { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .7); }
.eq-av-geral { background: linear-gradient(160deg, #60a5fa, #1d4ed8) !important; border-radius: 14px !important; }
.eq-av-geral svg { width: 52%; height: 52%; }
.eq-func { font-size: 11.5px; color: var(--txt3); margin-top: 3px; }
.eq-on { color: #4ade80; font-weight: 800; }
.eq-dig { color: var(--neon); font-weight: 700; font-style: italic; }
.eq-adm { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--amarelo); border: 1px solid rgba(245, 197, 66, .35); border-radius: 5px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.eq-mensagens .msg .autor small { font-weight: 600; opacity: .7; }
.eq-visto { display: inline-flex; margin-left: 4px; color: rgba(255, 255, 255, .55); vertical-align: -3px; }
.eq-visto svg { width: 15px; height: 15px; }
.eq-visto.lida { color: #7dd3fc; }
.eq-arq { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin-bottom: 4px; border-radius: 11px; background: rgba(0, 0, 0, .22); color: inherit; text-decoration: none; min-width: 220px; }
.eq-arq > svg { width: 22px; height: 22px; flex: none; }
.eq-arq > svg:last-child { width: 18px; height: 18px; opacity: .8; }
.eq-arq span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eq-arq strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-arq small { font-size: 11px; opacity: .75; }
.eq-conv {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 5px; border-radius: 13px; min-width: 240px;
  text-decoration: none; color: inherit; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .1); transition: .15s;
}
.eq-conv:hover { border-color: rgba(52, 211, 153, .5); }
.eq-conv-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #34d399, #16a34a); color: #04210f; }
.eq-conv-ic svg { width: 19px; height: 19px; }
.eq-conv span:last-child { display: flex; flex-direction: column; min-width: 0; }
.eq-conv small { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; opacity: .7; }
.eq-conv strong { font-size: 14px; }
.eq-conv em { font-style: normal; font-size: 12px; font-weight: 700; color: #6ee7b7; }
.eq-conv[data-sem-acesso] em { color: var(--amarelo); }
.eq-inicio { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--txt2); padding: 30px; }
.eq-inicio svg { width: 44px; height: 44px; color: var(--neon); opacity: .8; margin-bottom: 6px; }
.eq-inicio strong { color: var(--txt); font-size: 16px; }
.nav-badge-verde { color: #04210f; background: linear-gradient(160deg, #4ade80, #16a34a); box-shadow: 0 3px 10px rgba(34, 197, 94, .35); }
.nav-badge:empty { display: none; }
@media (max-width: 900px) {
  .eq { grid-template-columns: minmax(0, 1fr); }
  .eq-lista { border-right: none; }
  .eq-chat { display: none; }
  .eq.chat-aberto .eq-lista { display: none; }
  .eq.chat-aberto .eq-chat { display: flex; }
}

/* =====================================================================
   EQUIPE — Geral com regras, aviso fixado, travado, apagadas
   ===================================================================== */
.eq-tag-modo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; border: 1px solid; white-space: nowrap; }
.eq-tag-modo svg { width: 12px; height: 12px; }
.eq-tag-modo.verde { color: #4ade80; border-color: rgba(74, 222, 128, .35); background: rgba(22, 163, 74, .1); }
.eq-tag-modo.azul { color: #93c5fd; border-color: rgba(96, 165, 250, .35); background: rgba(59, 130, 246, .1); }
.eq-tag-modo.vermelho { color: #fca5a5; border-color: rgba(248, 113, 113, .4); background: rgba(239, 68, 68, .1); }
.eq-modo { font-size: 11.5px; padding: 6px 11px; }

.eq-fixada {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 18px; text-align: left;
  border: none; border-bottom: 1px solid rgba(245, 197, 66, .25); color: var(--txt);
  background: linear-gradient(90deg, rgba(245, 197, 66, .14), rgba(245, 197, 66, .04)); backdrop-filter: blur(8px);
}
.eq-fixada > svg { width: 17px; height: 17px; color: var(--amarelo); flex: none; transform: rotate(35deg); }
.eq-fixada span { min-width: 0; display: flex; flex-direction: column; }
.eq-fixada small { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--amarelo); }
.eq-fixada b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-fixada:hover { background: linear-gradient(90deg, rgba(245, 197, 66, .2), rgba(245, 197, 66, .06)); }
.eq-msg-fixada { box-shadow: inset 3px 0 0 var(--amarelo); }
.eq-pino { display: inline-flex; margin-right: 4px; color: var(--amarelo); vertical-align: -2px; }
.eq-pino svg { width: 12px; height: 12px; transform: rotate(35deg); }

.eq-travado {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 16px; padding: 13px 16px; border-radius: 14px; text-align: center;
  font-size: 13px; font-weight: 600; color: #fecaca; background: rgba(239, 68, 68, .08); border: 1px dashed rgba(248, 113, 113, .4);
}
.eq-travado svg { width: 18px; height: 18px; flex: none; color: #f87171; }
.eq-aviso { max-width: 82% !important; font-weight: 600; }
.eq-apagada .msg-texto { display: flex; align-items: center; gap: 6px; font-style: italic; opacity: .6; }
.eq-apagada .msg-texto svg { width: 14px; height: 14px; }
.menu-msg button.perigo:hover { color: #f87171; }

.eq-modos { display: flex; flex-direction: column; gap: 8px; }
.eq-modo-op {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 14px; text-align: left;
  border: 1.5px solid var(--linha2); background: var(--card); color: var(--txt); transition: .15s;
}
.eq-modo-op:hover { border-color: rgba(52, 211, 153, .35); }
.eq-modo-op.ativo { border-color: var(--neon); background: linear-gradient(135deg, rgba(22, 163, 74, .18), rgba(22, 163, 74, .04)); box-shadow: 0 0 0 3px rgba(22, 163, 74, .1); }
.eq-modo-op > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.eq-modo-op strong { font-size: 14.5px; }
.eq-modo-op small { font-size: 12px; color: var(--txt2); }
.eq-modo-op.ativo .transf-check { background: var(--neon); border-color: var(--neon); color: #04210f; }
.eq-modo-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.eq-modo-ic svg { width: 20px; height: 20px; }
.eq-modo-ic.verde { background: linear-gradient(160deg, #34d399, #16a34a); }
.eq-modo-ic.azul { background: linear-gradient(160deg, #60a5fa, #1d4ed8); }
.eq-modo-ic.vermelho { background: linear-gradient(160deg, #f87171, #b91c1c); }
.eq-quem { display: flex; flex-direction: column; gap: 8px; }
.eq-quem-topo { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--txt2); }
.eq-link { background: none; border: none; color: var(--neon); font-weight: 700; font-size: 12px; text-transform: none; letter-spacing: 0; }
.transf-item.eq-sempre { opacity: .65; cursor: default; }
.eq-ativo .solte-aqui { position: absolute; }
@media (max-width: 560px) { .eq-modo { font-size: 0; gap: 0; padding: 7px; } .eq-modo svg { width: 15px; height: 15px; } }

/* =====================================================================
   v11 — botões do chat com nome (barra própria), lembrete inteiro,
   resumo do dia no menu lateral
   ===================================================================== */
.chat-topo { flex-wrap: wrap; row-gap: 10px; padding-bottom: 10px; }
.chat-acoes {
  order: 3; flex: 1 1 100%; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 2px;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.chat-acoes::-webkit-scrollbar { display: none; }
.chat-acoes .btn, .chat-acoes .btn-icone {
  display: inline-flex !important; align-items: center; gap: 7px; flex: none; width: auto !important; height: 34px !important;
  padding: 0 13px !important; border-radius: 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.chat-acoes .btn svg { width: 16px; height: 16px; }
.chat-acoes .btn .btn-txt { display: inline !important; }
.chat-acoes .btn.oculto { display: none !important; }
.chat-acoes .btn-secundario { background: rgba(255, 255, 255, .04); }
@media (min-width: 1281px) { .chat-acoes .btn-toggle-cli { display: none !important; } }
.eq .chat-acoes { order: 0; flex: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }

.conv-lemb { flex-wrap: wrap; align-items: center; row-gap: 3px; padding: 5px 9px 6px 7px; }
.conv-lemb i { flex: 1 1 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere; color: var(--txt); font-size: 12px; line-height: 1.4; }
.conv-lemb i::before { content: none; }

.side-rodape { gap: 10px; padding: 12px 12px 14px; }
.hoje { padding: 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(22, 163, 74, .1), rgba(255, 255, 255, .02)); border: 1px solid var(--linha); }
.hoje-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.hoje-topo span { font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--txt2); }
.hoje-topo small { font-size: 11px; color: var(--txt3); text-transform: capitalize; }
.hoje-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hoje-item {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 11px; text-decoration: none;
  background: rgba(0, 0, 0, .22); border: 1px solid transparent; transition: .15s;
}
.hoje-item:hover { border-color: var(--c); transform: translateY(-1px); }
.hoje-item b { font-size: 19px; line-height: 1.1; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.hoje-item span { font-size: 10.5px; font-weight: 700; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoje-item.amarelo { --c: var(--amarelo); }
.hoje-item.verde { --c: #4ade80; }
.hoje-item.azul { --c: #60a5fa; }
.hoje-item.roxo { --c: #c084fc; }
a.side-status { text-decoration: none; border-radius: 10px; padding: 7px 8px; transition: .15s; }
a.side-status:hover { background: rgba(255, 255, 255, .04); color: var(--txt); }
.side-versao { display: flex; align-items: center; justify-content: center; gap: 6px; opacity: .8; }
.side-versao img { width: 14px; height: 14px; }
@media (max-height: 700px) { .hoje-grade { grid-template-columns: repeat(4, 1fr); } .hoje-item span { display: none; } .hoje-item { align-items: center; padding: 6px; } }
.hoje-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hoje-item { min-width: 0; }
.chat-acoes { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 560px) { .chat-acoes .btn, .chat-acoes .btn-icone { height: 32px !important; padding: 0 10px !important; font-size: 12px; gap: 5px; } }

/* =====================================================================
   v12 — Dados do cliente: gaveta lateral (fechada por padrão) em
   qualquer tamanho de tela
   ===================================================================== */
.atd, .atd:not(.com-cliente) { grid-template-columns: 350px minmax(0, 1fr); }
@media (max-width: 1280px) { .atd, .atd:not(.com-cliente) { grid-template-columns: 330px minmax(0, 1fr); } }
@media (max-width: 900px) { .atd, .atd:not(.com-cliente) { grid-template-columns: minmax(0, 1fr); } }
.atd .atd-cliente {
  display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: min(410px, 94vw); z-index: 70;
  border-left: 1px solid rgba(52, 211, 153, .18); border-radius: 22px 0 0 22px;
  background: linear-gradient(180deg, #0c1422, #080d17); box-shadow: -30px 0 80px rgba(0, 0, 0, .55);
  transform: translateX(105%); transition: transform .32s cubic-bezier(.2, 1, .3, 1); overscroll-behavior: contain;
}
.atd.cliente-aberto .atd-cliente { transform: none; }
.cli-fundo { display: block !important; position: fixed; inset: 0; z-index: 65; background: rgba(2, 5, 10, .5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: .25s; }
.atd.cliente-aberto .cli-fundo { opacity: 1; pointer-events: auto; }
.atd:not(.com-cliente) .atd-cliente { visibility: hidden; }
.btn-toggle-cli, .chat-acoes .btn-toggle-cli { display: inline-flex !important; }
.chat-acoes .btn-toggle-cli.ativo { color: #04210f; background: var(--neon); border-color: var(--neon); }
.btn-fechar-cli { display: inline-grid !important; }
.cli-topo {
  position: sticky; top: 0; z-index: 3; padding: 14px 14px 12px 18px; min-height: 58px;
  background: linear-gradient(180deg, #0c1422 70%, rgba(12, 20, 34, 0)); 
}
.cli-topo h3 { font-size: 12px; color: var(--txt2); }
@media (max-width: 560px) { .atd .atd-cliente { width: 100vw; border-radius: 0; border-left: none; } }

.side-expediente { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 11px; font-size: 11.5px; color: var(--txt2); background: rgba(255, 255, 255, .03); border: 1px solid var(--linha); }
.side-expediente span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-expediente b { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }
.side-expediente.aberto b { color: #4ade80; background: rgba(74, 222, 128, .12); }
.side-expediente.fechado b { color: var(--amarelo); background: rgba(250, 204, 21, .12); }

.wpp-diag { width: 100%; margin-top: 16px; padding: 14px; border-radius: 16px; text-align: left; background: rgba(255, 255, 255, .03); border: 1px solid var(--linha); }
.wpp-diag-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.wpp-diag-topo small { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; }
.wpp-diag-topo small.ok { color: #4ade80; background: rgba(74, 222, 128, .12); }
.wpp-diag-topo small.alerta { color: var(--amarelo); background: rgba(250, 204, 21, .12); }
.wpp-diag-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wpp-diag-grade div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.wpp-diag-grade b { font-size: 20px; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; }
.wpp-diag-grade span { font-size: 11px; color: var(--txt2); }
.wpp-diag-aviso { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--txt2); }
.wpp-diag-aviso .btn { margin-top: 10px; display: flex; }

/* =====================================================================
   v13 — AVATARES (foto / figurinha), MEU PERFIL, SOM E APAGAR MENSAGEM
   ===================================================================== */
.avatar { position: relative; }
.avatar.av-foto > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar.av-foto { padding: 0; background: var(--card3) !important; }
.avatar.av-emoji { font-size: 1.35em; line-height: 1; letter-spacing: 0; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.eu-avatar.av-emoji { font-size: 19px; }
.eu-menu-cab .eu-avatar.av-emoji { font-size: 23px; }
.av-g0 { background: linear-gradient(160deg, #22c55e, #0f7a37) !important; } .av-g1 { background: linear-gradient(160deg, #34d399, #047857) !important; }
.av-g2 { background: linear-gradient(160deg, #60a5fa, #1d4ed8) !important; } .av-g3 { background: linear-gradient(160deg, #f5c542, #b45309) !important; }
.av-g4 { background: linear-gradient(160deg, #a78bfa, #6d28d9) !important; } .av-g5 { background: linear-gradient(160deg, #f472b6, #be185d) !important; }
.av-g6 { background: linear-gradient(160deg, #2dd4bf, #0f766e) !important; } .av-g7 { background: linear-gradient(160deg, #fb923c, #c2410c) !important; }
.av-g8 { background: linear-gradient(160deg, #f87171, #b91c1c) !important; } .av-g9 { background: linear-gradient(160deg, #94a3b8, #334155) !important; }
.av-g10 { background: linear-gradient(160deg, #38bdf8, #0369a1) !important; } .av-g11 { background: linear-gradient(160deg, #a3e635, #4d7c0f) !important; }

/* menu do usuário */
.eu-menu { width: 268px; }
.eu-menu button[data-perfil] {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 0; background: none;
  font: inherit; font-weight: 700; font-size: 13.5px; color: var(--txt2); cursor: pointer; text-align: left;
}
.eu-menu button[data-perfil]:hover { background: var(--card3); color: var(--txt); }
.eu-menu button[data-perfil] svg { width: 18px; height: 18px; flex: none; }
.eu-menu button[data-perfil] span { flex: 1; }
.eu-som-estado { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; }
.eu-som-estado.on { color: #4ade80; background: rgba(74, 222, 128, .12); }
.eu-som-estado.off { color: var(--txt3); background: rgba(255, 255, 255, .05); }
.eu-menu-sep { height: 1px; background: var(--linha); margin: 6px 4px; }

/* modal do perfil */
.modal-perfil { max-width: 520px; padding: 0; gap: 0; position: relative; overflow-x: hidden; }
.perfil-fechar { position: absolute; top: 14px; right: 14px; z-index: 2; }
.perfil-topo {
  display: flex; align-items: center; gap: 16px; padding: 26px 24px 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(34, 197, 94, .2), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
  border-bottom: 1px solid var(--linha);
}
.perfil-av-wrap { position: relative; flex: none; }
.perfil-av { width: 76px; height: 76px; border-radius: 50%; font-size: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 0 3px rgba(52, 211, 153, .35); }
.perfil-av.av-emoji { font-size: 40px; }
.perfil-av-cam {
  position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: #04210f; background: var(--neon); border: 3px solid var(--card2); cursor: pointer; transition: transform .15s;
}
.perfil-av-cam:hover { transform: scale(1.08); }
.perfil-av-cam svg { width: 14px; height: 14px; }
.perfil-quem { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 36px; }
.perfil-quem strong { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-quem small { font-size: 12.5px; font-weight: 700; color: var(--neon); }

.perfil-abas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--linha); }
.perfil-abas button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 11px; border: 0; background: none; cursor: pointer;
  color: var(--txt3); font: inherit; font-size: 12px; font-weight: 800; border-bottom: 2px solid transparent; transition: .15s; margin-bottom: -1px;
}
.perfil-abas button svg { width: 18px; height: 18px; }
.perfil-abas button:hover { color: var(--txt); }
.perfil-abas button.ativo { color: var(--neon); border-bottom-color: var(--neon); }
.perfil-painel { display: none; flex-direction: column; gap: 14px; padding: 20px 24px 24px; animation: lgFade .2s; }
.perfil-painel.ativo { display: flex; }
.perfil-dica { font-size: 12.5px; color: var(--txt2); line-height: 1.45; margin: -2px 0 2px; }

.av-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.av-acoes .btn { flex: 1 1 160px; justify-content: center; }
.av-enviar { cursor: pointer; }
#av-iniciais.ativo { border-color: var(--neon); color: var(--neon); }
.av-titulo { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--txt3); margin-top: 4px; }
.av-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.av-emoji-op {
  aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; cursor: pointer; font-size: 22px; display: grid; place-items: center;
  transition: transform .12s, border-color .12s; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.av-emoji-op:hover { transform: scale(1.1); }
.av-emoji-op.ativo { border-color: #fff; box-shadow: 0 0 0 3px var(--neon); }
.av-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 8px; }
.av-cor-op { aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .12s; }
.av-cor-op:hover { transform: scale(1.12); }
.av-cor-op.ativo { border-color: #fff; box-shadow: 0 0 0 3px var(--neon); }

/* som */
.som-liga {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--linha);
}
.som-liga > span { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.som-liga strong { font-size: 14px; }
.som-liga small { font-size: 12px; color: var(--txt2); }
.som-liga input { display: none; }
.chave { width: 46px; height: 26px; border-radius: 99px; background: var(--linha2); position: relative; flex: none; transition: .2s; }
.chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.som-liga input:checked + .chave { background: var(--verde-claro); }
.som-liga input:checked + .chave::after { left: 23px; }
.som-corpo { display: flex; flex-direction: column; gap: 12px; transition: opacity .2s; }
.som-corpo.desligado { opacity: .4; pointer-events: none; }
.som-volume { display: flex; align-items: center; gap: 12px; color: var(--txt2); }
.som-volume svg { width: 18px; height: 18px; flex: none; }
.som-volume input { flex: 1; accent-color: var(--neon); }
.som-volume b { width: 42px; text-align: right; font-size: 12.5px; color: var(--txt); font-variant-numeric: tabular-nums; }
.som-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.som-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 8px; border-radius: 12px; cursor: pointer; min-width: 0;
  background: rgba(0, 0, 0, .22); border: 1px solid var(--linha); font-size: 13px; font-weight: 700; transition: .15s;
}
.som-item:hover { border-color: var(--linha2); }
.som-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.som-item.ativo { border-color: var(--neon); background: rgba(52, 211, 153, .08); color: var(--neon); }
.som-play {
  width: 28px; height: 28px; border-radius: 50%; border: 0; flex: none; cursor: pointer; font-size: 11px; display: grid; place-items: center;
  color: #04210f; background: linear-gradient(160deg, var(--neon), var(--verde));
}
.som-check { font-style: normal; font-weight: 900; opacity: 0; }
.som-item.ativo .som-check { opacity: 1; }
.som-tirar { border: 0; background: none; color: var(--txt3); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.som-tirar:hover { color: var(--erro-claro); }
.som-anexar {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1px dashed rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .05); transition: .15s;
}
.som-anexar:hover { background: rgba(52, 211, 153, .1); }
.som-anexar svg { width: 20px; height: 20px; color: var(--neon); flex: none; }
.som-anexar span { display: flex; flex-direction: column; gap: 2px; }
.som-anexar strong { font-size: 13.5px; }
.som-anexar small { font-size: 11.5px; color: var(--txt2); }
.som-op { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; padding: 4px 0; }
.som-op input { width: 18px; height: 18px; accent-color: var(--verde-claro); flex: none; }
.som-op small { color: var(--txt3); }

/* senha */
.senha-caixa { position: relative; }
.senha-caixa input { width: 100%; padding-right: 46px !important; }
.btn-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--txt3); cursor: pointer; display: grid; place-items: center; }
.btn-ver:hover, .btn-ver.ativo { color: var(--neon); }
.btn-ver svg { width: 18px; height: 18px; }
.senha-forca { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 5px; align-items: center; margin-top: 2px; }
.senha-forca i { height: 4px; border-radius: 4px; background: var(--linha2); transition: .2s; }
.senha-forca span { font-size: 11.5px; font-weight: 700; color: var(--txt2); min-width: 44px; text-align: right; }
.senha-forca[data-n="1"] i:nth-child(-n+1) { background: var(--erro-claro); }
.senha-forca[data-n="2"] i:nth-child(-n+2) { background: var(--amarelo); }
.senha-forca[data-n="3"] i:nth-child(-n+3) { background: #4ade80; }
.senha-forca[data-n="4"] i:nth-child(-n+4) { background: var(--neon); }

@media (max-width: 520px) {
  .modal-perfil { padding: 0; }
  .perfil-topo { padding: 22px 18px 16px; }
  .perfil-av { width: 64px; height: 64px; font-size: 24px; }
  .perfil-quem strong { font-size: 18px; }
  .perfil-abas { padding: 6px 8px 0; }
  .perfil-abas button { font-size: 11px; }
  .perfil-painel { padding: 18px 16px 24px; }
  .som-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* apagar mensagem */
.modal-apagar { max-width: 420px; }
.apagar-opcoes { display: flex; flex-direction: column; gap: 8px; }
.apagar-op {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--linha2); background: rgba(255, 255, 255, .03); color: var(--txt); font: inherit; transition: .15s;
}
.apagar-op:hover { border-color: var(--neon); background: rgba(52, 211, 153, .06); }
.apagar-op.perigo:hover { border-color: var(--erro-claro); background: rgba(239, 68, 85, .08); }
.apagar-op > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.apagar-op strong { font-size: 14px; }
.apagar-op small { font-size: 12px; color: var(--txt2); line-height: 1.4; }
.apagar-op-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--card3); color: var(--txt2); }
.apagar-op.perigo .apagar-op-ic { color: var(--erro-claro); background: rgba(239, 68, 85, .12); }
.apagar-op-ic svg { width: 19px; height: 19px; }

/* bolha de mensagem apagada (chat do cliente e da equipe) */
.msg.apagada .msg-texto, .msg.eq-apagada .msg-texto { font-style: italic; color: var(--txt2); opacity: .85; }
.msg.apagada, .msg.eq-apagada { opacity: .82; }
.msg.sumindo { transition: opacity .2s, transform .2s; opacity: 0 !important; transform: scale(.96); }
.avatar.av-mini { width: 18px; height: 18px; border-radius: 50%; font-size: 8.5px; box-shadow: none; display: inline-grid; vertical-align: -4px; margin-right: 6px; }
.avatar.av-mini.av-emoji { font-size: 11px; }
.eq-autor { display: inline-flex !important; align-items: center; }
.txt-apagada { display: inline-flex; align-items: center; gap: 6px; }
.txt-apagada svg { width: 14px; height: 14px; flex: none; }
.menu-msg button.perigo, .menu-msg [data-acao="apagar"] { color: #ff9aa3; }
/* v13 ajustes finos */
.msg.msg-atendente.apagada, .msg.msg-atendente.eq-apagada {
  background: rgba(22, 163, 74, .14) !important; border: 1px dashed rgba(52, 211, 153, .3) !important; box-shadow: none !important; color: var(--txt2) !important;
}
.msg.msg-cliente.apagada, .msg.msg-cliente.eq-apagada { background: rgba(255, 255, 255, .03) !important; border: 1px dashed var(--linha2) !important; box-shadow: none !important; }
.msg.apagada .hora, .msg.eq-apagada .hora { color: var(--txt3) !important; }
.av-emojis { grid-template-columns: repeat(auto-fill, 44px); justify-content: space-between; gap: 8px 6px; }
.av-emoji-op { width: 44px; height: 44px; font-size: 21px; }
.av-cores { grid-template-columns: repeat(auto-fill, 32px); justify-content: space-between; gap: 10px 6px; }
.av-cor-op { width: 32px; height: 32px; }
.som-lista { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.eu-menu { width: min(282px, calc(100vw - 24px)); }
.eu-menu button[data-perfil] span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .av-emojis { grid-template-columns: repeat(auto-fill, 40px); }
  .av-emoji-op { width: 40px; height: 40px; font-size: 19px; }
  .som-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   v14 — MARCA "CAPIVARA" (capivara low-poly nas cores da Mais)
   ===================================================================== */
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("../fonts/Poppins-Light.ttf") format("truetype"); }

.wm { font-family: "Poppins", var(--fonte); display: inline-flex; align-items: baseline; line-height: 1; letter-spacing: -.035em; white-space: nowrap; text-transform: none; }
.wm b { font-weight: 700; color: #eef5e4; }
.wm i { font-style: normal; font-weight: 300; color: #9cc36a; letter-spacing: -.02em; }
/* o pingo do "i" é o cata-vento da Mais */
.wm-i { position: relative; display: inline-block; }
.wm-i::after {
  content: ""; position: absolute; left: 50%; bottom: .63em; width: .42em; height: .42em; margin-left: -.21em;
  background: url("../img/logo-marca.png") center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)) saturate(1.15) brightness(1.12);
  transition: transform 1.1s cubic-bezier(.2, 1, .3, 1);
}
.wm:hover .wm-i::after, a:hover .wm .wm-i::after { transform: rotate(-360deg); }

/* menu lateral */
.side-marca { gap: 11px; }
.side-marca img.sm-selo { width: 44px; height: 44px; border-radius: 13px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45)); }
.side-marca:hover img.sm-selo { transform: scale(1.06) rotate(-4deg); }
.sm-nome { font-size: 24px; letter-spacing: 0; }
.sm-nome .wm { font-size: 24px; }
.sm-sub { font-size: 9.5px; letter-spacing: 1.1px; margin-top: 4px; color: #7f95b5; }

/* telas de login / cadastro */
.marca-logo { border-radius: 18px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); }
.marca-nome .wm { font-size: 34px; }
.marca-sub { text-transform: uppercase; letter-spacing: 1.4px; font-size: 11px; color: #a7bf86; margin-top: 7px; }
.lh-capivara {
  display: block; width: min(330px, 70%); height: auto; margin: 6px 0 18px -8px;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .45)); animation: capPasseio 7s ease-in-out infinite;
}
@keyframes capPasseio { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.2deg); } }
@media (max-width: 760px) { .marca-nome .wm { font-size: 28px; } .lh-capivara { width: min(240px, 60%); } }

/* chat vazio: a capivara no lugar do logo */
.chat-vazio-logo { width: 210px; height: auto; }
.chat-vazio-logo img { height: auto; }
@media (max-width: 560px) { .chat-vazio-logo { width: 160px; } }
@media (prefers-reduced-motion: reduce) { .lh-capivara { animation: none; } .wm-i::after { transition: none; } }
/* v14 ajustes: capivara do login fora do fluxo (não empurra o texto) */
.auth-hero { position: relative; }
.lh-capivara {
  position: absolute; right: 5%; top: 9%; width: clamp(200px, 22vw, 320px); margin: 0; z-index: 1; pointer-events: none;
}
.sm-sub { text-transform: none; letter-spacing: .2px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.marca-sub { white-space: nowrap; }
@media (max-width: 1100px) { .lh-capivara { width: 200px; right: 3%; top: 6%; opacity: .9; } }
@media (max-width: 900px) { .lh-capivara { display: none; } }
.lf-capivara {
  display: block; width: 190px; height: auto; margin: 0 0 14px -6px;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45)); animation: capPasseio 7s ease-in-out infinite;
}
@media (max-width: 560px) { .lf-capivara { width: 150px; margin: 4px 0 10px -4px; } }
@media (max-height: 720px) and (min-width: 900px) { .lf-capivara { width: 140px; margin-bottom: 8px; } }
/* v14b — "capivara" é UMA palavra: mesmo peso, degradê contínuo */
.wm {
  background: linear-gradient(90deg, #f3f8ea 0%, #d6e8bb 45%, #a6cc72 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.03em;
}
.wm b, .wm i { font-weight: 700; color: transparent; -webkit-text-fill-color: transparent; letter-spacing: inherit; }
.wm .wm-i { color: #e2eecf; -webkit-text-fill-color: #e2eecf; }
.wm-i::after { width: .5em; height: .5em; margin-left: -.25em; bottom: .6em; }
.sm-sub { font-size: 10px; letter-spacing: 0; }
.wm-i::after { bottom: .55em; }

/* =====================================================================
   v15 — bolhas: hora nunca quebra, palavras não cortam no meio
   ===================================================================== */
.msg { min-width: 78px; }
.msg.msg-atendente { min-width: 92px; }          /* hora + ✓✓ */
.msg .hora { white-space: nowrap; flex-wrap: nowrap; line-height: 1; }
.msg .hora > * { flex: none; }
.msg-texto, .msg { overflow-wrap: break-word; word-break: normal; }
.msg-texto a { overflow-wrap: anywhere; }       /* só link enorme quebra em qualquer ponto */
/* texto curto: reserva espaço pra hora no fim da linha (igual WhatsApp) */
.msg-texto::after { content: ""; display: inline-block; width: 46px; height: 1px; }
.msg-atendente .msg-texto::after { width: 62px; }
.msg.com-midia .msg-texto::after, .msg.apagada .msg-texto::after { width: 0; }
.msg { padding-bottom: 18px; }
.chat-mensagens { overflow-x: hidden; }
.conv-nome, .conv-prev, .conv-ultima, .eq-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   v16 — ARQUIVADAS e EXCLUIR CONVERSA
   ===================================================================== */
.menu-sep { height: 1px; background: var(--linha); margin: 5px 6px; }
.arq-linha {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin: 4px 0 6px; border-radius: 14px; cursor: pointer; list-style: none;
  color: var(--txt2); font-weight: 700; font-size: 14px; transition: .15s; border: 1px solid transparent;
}
.arq-linha:hover { background: var(--card2); color: var(--txt); border-color: var(--linha); }
.arq-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--neon); background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .2); }
.arq-ic svg { width: 19px; height: 19px; }
.arq-txt { flex: 1; }
.arq-qtd { font-size: 12px; color: var(--txt3); font-weight: 800; }
.arq-barra {
  position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  list-style: none; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: var(--card2); border: 1px solid var(--linha2);
}
.arq-barra button { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--linha2); background: var(--card3); color: var(--txt); cursor: pointer; display: grid; place-items: center; }
.arq-barra button svg { width: 18px; height: 18px; }
.arq-barra b { font-size: 15px; }
.arq-barra small { font-size: 11.5px; color: var(--txt3); line-height: 1.3; }
.modal-apagar h3 { overflow-wrap: anywhere; }

/* =====================================================================
   v17 — ATUALIZAÇÕES (tela do admin + aviso "Atualizar agora")
   ===================================================================== */
.faixa-versao {
  position: fixed; left: 50%; top: 14px; z-index: 300; display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 24px));
  padding: 10px 12px 10px 16px; border-radius: 16px; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid rgba(52, 211, 153, .4);
  box-shadow: var(--sombra-lg); transform: translate(-50%, -140%); opacity: 0; transition: transform .35s cubic-bezier(.2, 1, .3, 1), opacity .25s;
}
.faixa-versao.on { transform: translate(-50%, 0); opacity: 1; }
.fv-ic { font-size: 22px; }
.fv-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.fv-txt small { color: var(--txt2); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fv-bt { flex: none; padding: 9px 14px; }
.fv-fechar { border: 0; background: none; color: var(--txt3); cursor: pointer; font-size: 14px; padding: 4px; }
.fv-reconectando { border-color: rgba(245, 197, 66, .45); font-weight: 700; font-size: 13.5px; padding: 11px 18px; }
.fv-gira { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--linha2); border-top-color: var(--amarelo); animation: g .8s linear infinite; flex: none; }
@keyframes g { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .faixa-versao { top: 8px; flex-wrap: wrap; } .fv-bt { width: 100%; } }

.atz { display: flex; flex-direction: column; gap: 18px; }
.atz-hero {
  display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--r-lg);
  background: radial-gradient(120% 160% at 0% 0%, rgba(34, 197, 94, .18), transparent 55%), linear-gradient(160deg, var(--card2), var(--card)); border: 1px solid var(--linha);
}
.atz-hero img { width: 64px; height: 64px; border-radius: 18px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .4)); flex: none; }
.atz-hero-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.atz-hero-txt small { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--txt3); }
.atz-hero-txt strong { font-size: 24px; font-weight: 800; }
.atz-hero-txt strong span { color: var(--neon); }
.atz-hero-txt > span { font-size: 13px; color: var(--txt2); overflow-wrap: anywhere; }
.atz-build { font-size: 11.5px; color: var(--txt3); padding: 6px 10px; border-radius: 99px; background: rgba(0, 0, 0, .25); border: 1px solid var(--linha); flex: none; }
.atz-build b { color: var(--txt2); font-family: ui-monospace, monospace; }
.atz-como { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.atz-como > div { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--linha); font-size: 13px; color: var(--txt2); line-height: 1.45; }
.atz-como b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #04210f; background: var(--neon); font-size: 13px; }
.atz-como code, .atz-pub code { font-size: 12px; color: var(--menta); }
.atz-pendente {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r-lg); flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(245, 197, 66, .12), rgba(245, 197, 66, .03)); border: 1px solid rgba(245, 197, 66, .4);
}
.atz-pend-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #3a2c00; background: var(--amarelo); flex: none; }
.atz-pend-ic svg { width: 22px; height: 22px; }
.atz-pend-txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.atz-pend-txt strong { font-size: 15px; }
.atz-pend-txt small { font-size: 12.5px; color: var(--txt2); }
.atz-pend-bt { display: flex; gap: 8px; flex-wrap: wrap; }
.atz-arqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.atz-drop {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 14px; border-radius: 16px; cursor: pointer;
  border: 1.5px dashed var(--linha2); background: rgba(0, 0, 0, .18); transition: .15s;
}
.atz-drop:hover, .atz-drop.arrastando { border-color: var(--neon); background: rgba(52, 211, 153, .06); }
.atz-drop.tem { border-style: solid; border-color: var(--neon); background: rgba(52, 211, 153, .08); }
.atz-drop-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--neon); background: rgba(52, 211, 153, .1); }
.atz-drop-ic svg { width: 22px; height: 22px; }
.atz-drop strong { font-size: 14.5px; }
.atz-drop-nome { font-size: 12px; color: var(--txt2); line-height: 1.45; overflow-wrap: anywhere; }
.atz-drop-nome em { color: var(--txt3); font-style: normal; }
.atz-progresso { position: relative; height: 30px; border-radius: 10px; background: rgba(0, 0, 0, .3); overflow: hidden; margin-top: 12px; border: 1px solid var(--linha); }
.atz-progresso i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--verde), var(--neon)); transition: width .2s; }
.atz-progresso span { position: relative; display: grid; place-items: center; height: 100%; font-size: 12.5px; font-weight: 800; }
.atz-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.atz-grade .painel { margin-bottom: 0; }
.atz-pub dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin: 10px 0; }
.atz-pub dt { color: var(--txt3); font-weight: 700; }
.atz-ok { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #4ade80; background: rgba(74, 222, 128, .12); padding: 3px 9px; border-radius: 99px; }
.atz-notas { font-size: 13px; color: var(--txt); background: rgba(255, 255, 255, .03); border-left: 3px solid var(--neon); padding: 8px 12px; border-radius: 8px; white-space: pre-wrap; margin-bottom: 10px; }
.atz-hist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.atz-hist li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--linha); font-size: 13px; }
.atz-hist li:last-child { border-bottom: 0; }
.atz-hist span { color: var(--txt2); font-size: 12px; }
.atz-hist p { color: var(--txt2); font-size: 12.5px; margin-top: 3px; white-space: pre-wrap; }
@media (max-width: 860px) { .atz-como, .atz-arqs, .atz-grade { grid-template-columns: minmax(0, 1fr); } .atz-hero { flex-wrap: wrap; } }

/* =====================================================================
   v18 — arquivos antigos, lembretes no chat, participantes, fotos
   ===================================================================== */
/* arquivo do histórico ainda não baixado */
.midia-pendente {
  display: flex; align-items: center; gap: 11px; min-width: min(260px, 60vw); padding: 10px 10px 10px 12px; margin: 2px 0 4px;
  border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px dashed rgba(255, 255, 255, .14);
}
.mp-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .06); color: var(--menta); }
.mp-ic svg { width: 20px; height: 20px; }
.mp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-info strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-info small { font-size: 11.5px; opacity: .7; }
.mp-bt { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 7px 11px; border-radius: 10px; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: #04210f; background: var(--neon); }
.mp-bt svg { width: 15px; height: 15px; }
.midia-pendente.baixando .mp-bt { pointer-events: none; opacity: .7; }
.midia-pendente.baixando .mp-bt span { display: none; }
.midia-pendente.baixando .mp-bt::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(4, 33, 15, .3); border-top-color: #04210f; animation: g .8s linear infinite; }
.midia-pendente.falhou { opacity: .75; }
.midia-pendente.falhou .mp-bt { background: rgba(255, 255, 255, .1); color: var(--txt); }
.midia-pendente.tp-imagem, .midia-pendente.tp-figurinha { min-height: 74px; }

/* lembretes da conversa (topo do chat) */
.chat-lembretes { display: flex; flex-direction: column; gap: 6px; padding: 8px clamp(12px, 3vw, 30px); border-bottom: 1px solid var(--linha); background: rgba(245, 197, 66, .05); max-height: 150px; overflow-y: auto; }
.cl-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(245, 197, 66, .25); }
.cl-item.vencido { border-color: rgba(245, 197, 66, .6); box-shadow: 0 0 0 2px rgba(245, 197, 66, .12); }
.cl-ic { color: var(--amarelo); display: grid; place-items: center; flex: none; }
.cl-ic svg { width: 17px; height: 17px; }
.cl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cl-txt b { font-size: 13px; overflow-wrap: anywhere; }
.cl-txt small { font-size: 11.5px; color: var(--txt2); }
.cl-bt { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--linha2); background: var(--card3); color: var(--txt); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.cl-bt.ok { color: #04210f; background: var(--neon); border-color: var(--neon); }
.cl-bt svg { width: 14px; height: 14px; }
.cl-dono { flex: none; font-size: 13px; opacity: .7; padding: 0 6px; }
@media (max-width: 560px) { .cl-bt span { display: none; } }

/* participantes */
.cli-sec-bt { margin-left: auto; border: 0; background: none; color: var(--neon); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; text-transform: none; letter-spacing: 0; }
.link-part { color: var(--neon); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.modal-participantes { max-width: 480px; }
.part-lista { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: min(56vh, 520px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.part-lista li { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 12px; }
.part-lista li:hover { background: rgba(255, 255, 255, .03); }
.part-lista .avatar { width: 38px; height: 38px; border-radius: 50%; font-size: 13px; flex: none; position: relative; }
.part-lista .avatar i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--txt3); border: 2px solid var(--card); }
.part-lista .avatar i.on { background: #22c55e; }
.part-lista li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.part-lista strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-lista small { font-size: 11.5px; color: var(--txt2); }
.part-adm, .part-mudo { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; flex: none; }
.part-adm { color: var(--neon); background: rgba(52, 211, 153, .12); }
.part-mudo { color: var(--txt3); background: rgba(255, 255, 255, .05); }
.part-copiar { width: 32px; height: 32px; flex: none; }
.part-copiar svg { width: 15px; height: 15px; }

/* foto de perfil dos contatos */
.conv .avatar.av-foto, #chat-avatar.av-foto, #cli-avatar.av-foto { padding: 0; overflow: hidden; }
.avatar.av-foto > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.atz-backup .painel-cabeca { flex-wrap: wrap; }
.bk-lista { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bk-lista li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .025); border: 1px solid var(--linha); }
.bk-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(52, 211, 153, .1); flex: none; font-size: 14px; }
.bk-lista li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.bk-lista small { color: var(--txt2); font-size: 11.5px; }
.bk-lista .btn { padding: 7px 12px; font-size: 12.5px; }

/* =====================================================================
   v19 — admin edita atendentes
   ===================================================================== */
.acoes-linha { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal-editar-at { max-width: 620px; }
.ed-topo { display: flex; align-items: center; gap: 14px; }
.ed-av { width: 58px; height: 58px; border-radius: 50%; font-size: 22px; flex: none; }
.ed-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ed-quem strong { font-size: 19px; font-weight: 800; }
.ed-quem small { font-size: 12.5px; color: var(--txt2); }
.ed-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ed-numeros div { padding: 9px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--linha); display: flex; flex-direction: column; }
.ed-numeros b { font-size: 18px; color: var(--neon); }
.ed-numeros span { font-size: 11px; color: var(--txt2); }
.modal-editar-at .form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-senha { display: flex; gap: 6px; }
.ed-senha input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }
.ed-senha .btn { padding: 0 11px; flex: none; }
.ed-chaves { display: flex; flex-direction: column; gap: 8px; }
.ed-chave { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--linha); cursor: pointer; }
.ed-chave input { display: none; }
.ed-chave input:checked + .chave { background: var(--verde-claro); }
.ed-chave input:checked + .chave::after { left: 23px; }
.ed-chave input:disabled + .chave { opacity: .45; }
.ed-chave span { display: flex; flex-direction: column; gap: 2px; }
.ed-chave b { font-size: 13.5px; }
.ed-chave small { font-size: 11.5px; color: var(--txt2); }
.ed-tirar-foto { align-self: flex-start; border: 0; background: none; color: #ff9aa3; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.ed-botoes { align-items: center; }
@media (max-width: 560px) {
  .modal-editar-at .form-grade { grid-template-columns: minmax(0, 1fr); }
  .ed-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed-botoes #ed-excluir { order: 9; width: 100%; }
  .acoes-linha .btn { flex: 1; }
}

/* =====================================================================
   v20 — NOTA INTERNA (amarela) e @MENÇÃO
   ===================================================================== */
.modo-envio { display: flex; gap: 6px; padding: 0 2px 8px; }
.modo-envio button {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--linha2);
  background: transparent; color: var(--txt2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s;
}
.modo-envio button svg { width: 15px; height: 15px; }
.modo-envio button em { font-style: normal; font-size: 10.5px; font-weight: 600; opacity: .75; }
.modo-envio button.ativo { color: #04210f; background: var(--neon); border-color: var(--neon); }
.modo-envio button[data-modo="nota"].ativo { color: #3a2c00; background: var(--amarelo); border-color: var(--amarelo); }
@media (max-width: 560px) { .modo-envio button em { display: none; } .modo-envio { padding-bottom: 6px; } }
.rodape-chat.modo-nota .compositor { border-color: rgba(245, 197, 66, .7) !important; background: rgba(245, 197, 66, .07) !important; box-shadow: 0 0 0 3px rgba(245, 197, 66, .12) !important; }
.rodape-chat.modo-nota .btn-enviar { background: linear-gradient(135deg, var(--amarelo), var(--amarelo-esc)) !important; color: #3a2c00; box-shadow: 0 8px 22px rgba(245, 197, 66, .3); }
.rodape-chat.modo-nota #btn-anexar { display: none; }

.msg.msg-nota {
  align-self: flex-end; max-width: min(78%, 560px); color: #3a2c00;
  background: linear-gradient(160deg, #fde68a, #f5c542); border: 1px solid #e0b030; border-bottom-right-radius: 5px;
  box-shadow: 0 8px 22px rgba(245, 197, 66, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.msg.msg-nota .hora { color: rgba(58, 44, 0, .7); opacity: 1; }
.msg.msg-nota .msg-mais { background: rgba(58, 44, 0, .18); color: #3a2c00; }
.nota-autor { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px !important; font-weight: 800; color: #6b4f00 !important; margin-bottom: 3px; }
.nota-autor svg { width: 13px; height: 13px; }
.nota-autor em { font-style: normal; font-weight: 700; font-size: 10px; padding: 1px 7px; border-radius: 99px; background: rgba(58, 44, 0, .12); }
.msg-nota .msg-texto a { color: #5b3d00; }
.mencao { display: inline-block; padding: 0 6px; border-radius: 6px; font-weight: 800; background: rgba(58, 44, 0, .14); color: #4a3400; }
.mencao.eu { background: #3a2c00; color: #fde68a; }
.msg.msg-nota.apagada { background: rgba(245, 197, 66, .1) !important; color: var(--txt2); border: 1px dashed rgba(245, 197, 66, .4) !important; box-shadow: none; }

.mencoes-pop {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: min(320px, calc(100vw - 32px)); padding: 6px; border-radius: 14px;
  background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid rgba(245, 197, 66, .5); box-shadow: var(--sombra-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.mencoes-pop button { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; border: 0; background: none; color: var(--txt); font: inherit; text-align: left; cursor: pointer; }
.mencoes-pop button.ativo, .mencoes-pop button:hover { background: rgba(245, 197, 66, .14); }
.mencoes-pop .avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; position: relative; }
.mencoes-pop .avatar i { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--txt3); border: 2px solid var(--card); }
.mencoes-pop .avatar i.on { background: #22c55e; }
.mencoes-pop span { display: flex; flex-direction: column; min-width: 0; }
.mencoes-pop b { font-size: 13px; }
.mencoes-pop small { font-size: 11px; color: var(--txt2); }
.chat-form { position: relative; }
.conv-mencao { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; font-size: 12px; font-weight: 900; color: #3a2c00; background: var(--amarelo); flex: none; }

/* =====================================================================
   v21 — ÁUDIO VIRANDO TEXTO + AJUSTES
   ===================================================================== */
.transc { margin: 6px 0 2px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .2); border-left: 3px solid var(--menta); font-size: 13.5px; line-height: 1.45; max-width: 420px; }
.msg-atendente .transc { background: rgba(0, 0, 0, .16); border-left-color: #fff; }
.transc-tit { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .75; margin-bottom: 3px; }
.transc-tit svg { width: 12px; height: 12px; }
.transc-txt { white-space: pre-wrap; overflow-wrap: break-word; font-style: italic; }
.transc.fazendo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: .85; }
.transc-gira { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--menta); animation: g .8s linear infinite; flex: none; }
.transc-bt { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; padding: 5px 10px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .18); color: inherit; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.transc-bt svg { width: 13px; height: 13px; }
.transc-bt:hover { border-color: var(--menta); }
.transc-bt.erro { border-color: rgba(239, 68, 85, .5); color: #ffb4bb; }

.ajs .painel-cabeca { flex-wrap: wrap; }
.ajs-liga { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; font-size: 13px; }
.ajs-liga input { display: none; }
.ajs-liga input:checked + .chave { background: var(--verde-claro); }
.ajs-liga input:checked + .chave::after { left: 23px; }
.ajs-demo { display: flex; flex-direction: column; gap: 6px; max-width: 380px; padding: 10px 12px; margin-bottom: 16px; border-radius: 14px; background: var(--card2); border: 1px solid var(--linha2); }
.ajs-demo-audio { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--txt2); }
.ajs-demo-audio span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--neon); color: #04210f; font-size: 11px; }
.ajs-demo-audio i { flex: 1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--neon) 30%, var(--linha2) 30%); }
.ajs-demo-txt { font-size: 13px; font-style: italic; border-left: 3px solid var(--menta); padding: 4px 9px; color: var(--txt); background: rgba(0, 0, 0, .2); border-radius: 8px; }
.ajs-ajuda { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(52, 211, 153, .06); border: 1px solid rgba(52, 211, 153, .25); font-size: 13px; line-height: 1.5; color: var(--txt2); }
.ajs-ajuda b { color: var(--txt); }
.ajs-ajuda ol { margin: 6px 0 6px 18px; }
.ajs-ajuda small { color: var(--txt3); }
.ajs-feitas { font-size: 12.5px; color: var(--txt2); }

/* =====================================================================
   v22 — FUNDOS DO CHAT (cada um escolhe o seu) + TEMA CLARO
   ===================================================================== */
/* ---- fundos: viram variáveis; servem pro chat e pras amostras ---- */
[data-fundo] {
  --chat-padrao: url("../img/fundo-mais.svg"); --chat-padrao-tam: 420px 420px; --chat-padrao-cor: #86efac; --chat-padrao-op: .075;
  --chat-bg: radial-gradient(ellipse 70% 45% at 12% 0%, rgba(22, 163, 74, .12), transparent 62%), radial-gradient(ellipse 60% 45% at 100% 100%, rgba(20, 184, 166, .09), transparent 60%), #070c15;
}
[data-fundo="mata"] {
  --chat-padrao: url("../img/fundo-mata.svg"); --chat-padrao-tam: 380px 380px; --chat-padrao-cor: #4ade80; --chat-padrao-op: .07;
  --chat-bg: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(74, 222, 128, .16), transparent 60%), radial-gradient(ellipse 70% 50% at 90% 95%, rgba(250, 204, 21, .08), transparent 60%), linear-gradient(165deg, #0b2416, #06150d 60%, #04100a);
}
[data-fundo="oceano"] {
  --chat-padrao: url("../img/fundo-ondas.svg"); --chat-padrao-tam: 400px 200px; --chat-padrao-cor: #67e8f9; --chat-padrao-op: .07;
  --chat-bg: radial-gradient(ellipse 80% 55% at 85% 0%, rgba(56, 189, 248, .2), transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(45, 212, 191, .14), transparent 60%), linear-gradient(180deg, #071a2b, #04101d 70%, #030b15);
}
[data-fundo="aurora"] {
  --chat-padrao: url("../img/fundo-estrelas.svg"); --chat-padrao-tam: 320px 320px; --chat-padrao-cor: #e0e7ff; --chat-padrao-op: .5;
  --chat-bg: radial-gradient(ellipse 60% 35% at 25% 0%, rgba(52, 211, 153, .32), transparent 70%), radial-gradient(ellipse 50% 30% at 75% 6%, rgba(139, 92, 246, .3), transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, rgba(59, 130, 246, .12), transparent 70%), linear-gradient(180deg, #0a0f24, #05070f);
}
[data-fundo="cerrado"] {
  --chat-padrao: none; --chat-padrao-op: 0;
  --chat-bg: url("../img/fundo-colinas.svg") center bottom / 100% 38% no-repeat, radial-gradient(circle at 70% 58%, rgba(254, 215, 170, .55) 0, rgba(251, 146, 60, .25) 9%, transparent 26%), linear-gradient(180deg, #1e1b4b 0%, #4c1d95 28%, #9d174d 55%, #ea580c 78%, #f59e0b 100%);
}
[data-fundo="capivara"] {
  --chat-padrao: url("../img/fundo-capivara.svg"); --chat-padrao-tam: 280px 280px; --chat-padrao-cor: #a3e635; --chat-padrao-op: .08;
  --chat-bg: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(132, 160, 92, .2), transparent 65%), linear-gradient(180deg, #12200f, #0a140a);
}
[data-fundo="liso"] { --chat-padrao: none; --chat-padrao-op: 0; --chat-bg: var(--bg); }
[data-fundo="foto"] {
  --chat-padrao: none; --chat-padrao-op: 0;
  --chat-bg: linear-gradient(rgba(5, 9, 16, var(--chat-esc, .45)), rgba(5, 9, 16, var(--chat-esc, .45))), var(--chat-foto, none) center / cover no-repeat, #070c15;
}

.atd-chat, .eq-chat { background: var(--chat-bg) !important; }
.atd-chat::before, .eq-chat::before {
  background: var(--chat-padrao-cor) !important; opacity: var(--chat-padrao-op) !important;
  -webkit-mask-image: var(--chat-padrao); mask-image: var(--chat-padrao);
  -webkit-mask-size: var(--chat-padrao-tam); mask-size: var(--chat-padrao-tam);
  -webkit-mask-position: center top; mask-position: center top;
}

/* ---- botão sol/lua no topo ---- */
.btn-tema {
  width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; cursor: pointer; position: relative; overflow: hidden;
  border: 1px solid var(--linha2); background: var(--card); color: var(--amarelo); transition: .2s;
}
.btn-tema:hover { border-color: var(--amarelo); transform: translateY(-1px); }
.btn-tema svg { width: 19px; height: 19px; position: absolute; transition: transform .45s cubic-bezier(.2, 1, .3, 1), opacity .3s; }
.btn-tema .ic-sol { transform: translateY(140%) rotate(-90deg); opacity: 0; }
.btn-tema .ic-lua { transform: none; opacity: 1; }
[data-tema="claro"] .btn-tema .ic-sol { transform: none; opacity: 1; }
[data-tema="claro"] .btn-tema .ic-lua { transform: translateY(-140%) rotate(90deg); opacity: 0; }
[data-tema="claro"] .btn-tema { color: #d97706; }
html.trocando-tema * { transition: background-color .35s, color .35s, border-color .35s !important; }

/* ---- aba Aparência (perfil) ---- */
.ap-temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ap-tema {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; cursor: pointer; border: 2px solid var(--linha2);
  background: var(--card2); color: var(--txt); font: inherit; font-weight: 800; font-size: 13px; text-align: left;
}
.ap-tema.ativo { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); }
.ap-mini { height: 62px; border-radius: 9px; display: grid; grid-template-columns: 26% 1fr; gap: 4px; padding: 5px; overflow: hidden; }
.ap-mini i { border-radius: 5px; }
.ap-mini.escuro { background: #0a111c; } .ap-mini.escuro i:first-child { background: #121d2f; } .ap-mini.escuro i:last-child { background: linear-gradient(135deg, #0e1725, #0b2416); }
.ap-mini.claro { background: #e9eef3; } .ap-mini.claro i:first-child { background: #ffffff; } .ap-mini.claro i:last-child { background: linear-gradient(135deg, #f7f9fb, #e7f6ec); }
.ap-fundos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ap-fundo {
  position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; cursor: pointer; border: 2px solid transparent;
  background: var(--chat-bg); padding: 0; font: inherit; transition: transform .15s;
}
.ap-fundo::before { content: ""; position: absolute; inset: 0; background: var(--chat-padrao-cor); opacity: calc(var(--chat-padrao-op) * 1.6); -webkit-mask-image: var(--chat-padrao); mask-image: var(--chat-padrao); -webkit-mask-size: 150px; mask-size: 150px; }
.ap-fundo:hover { transform: translateY(-2px); }
.ap-fundo.ativo { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); }
.ap-fundo span { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); text-align: center; }
.ap-fundo .ap-bolha { position: absolute; left: 10px; top: 14px; width: 55%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .85); }
.ap-fundo .ap-bolha.v { left: auto; right: 10px; top: 34px; width: 45%; background: #16a34a; }
.ap-fundo.ap-foto-vazio { border: 2px dashed var(--linha2); background: var(--card2); }
.ap-fundo.ap-foto-vazio::before { display: none; }
.ap-fundo.ap-foto-vazio b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: var(--txt3); }
.ap-esc { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--txt2); }
.ap-esc input { flex: 1; accent-color: var(--neon); }

/* =====================================================================
   TEMA CLARO
   ===================================================================== */
[data-tema="claro"] {
  --bg: #eef2f6; --bg2: #e6ebf1; --card: #ffffff; --card2: #f6f8fb; --card3: #edf1f6;
  --linha: #dfe5ed; --linha2: #cdd6e1;
  --txt: #0f1b2d; --txt2: #4b5b73; --txt3: #7b889c;
  --neon: #059669; --menta: #047857; --verde-claro: #16a34a;
  --sombra-lg: 0 24px 60px rgba(15, 27, 45, .16);
  color-scheme: light;
}
[data-tema="claro"] body { background: radial-gradient(1200px 600px at 8% -8%, rgba(59, 130, 246, .07), transparent), radial-gradient(1000px 500px at 108% 6%, rgba(22, 163, 74, .08), transparent) fixed, var(--bg); }
[data-tema="claro"] .sidebar { background: linear-gradient(180deg, #ffffff, #f4f7fa 65%); }
[data-tema="claro"] .topbar { background: rgba(255, 255, 255, .9); }
[data-tema="claro"] .atd-lista, [data-tema="claro"] .eq-lista { background: rgba(255, 255, 255, .75); }
[data-tema="claro"] .atd-cliente { background: linear-gradient(180deg, #ffffff, #f6f8fb) !important; }
[data-tema="claro"] .chat-topo { background: rgba(255, 255, 255, .9); }
[data-tema="claro"] .rodape-chat { background: rgba(255, 255, 255, .92); }
[data-tema="claro"] .nav-item.ativo, [data-tema="claro"] .aba.ativo { color: #065f46; }
[data-tema="claro"] .conv.tem-nao-lidas .conv-nome { color: var(--txt); }
[data-tema="claro"] .marc-chip.ativo { color: var(--txt); }
[data-tema="claro"] .wm { background: linear-gradient(90deg, #1f3d14 0%, #3b5f1c 45%, #5d8c34 100%); -webkit-background-clip: text; background-clip: text; }
[data-tema="claro"] .wm .wm-i { color: #2c4a16; -webkit-text-fill-color: #2c4a16; }
[data-tema="claro"] .msg-cliente { background: #ffffff; border-color: #dfe5ed; box-shadow: 0 1px 2px rgba(15, 27, 45, .06); }
[data-tema="claro"] .msg-sistema { background: rgba(245, 197, 66, .14); color: #5b4300; }
[data-tema="claro"] .dia { background: rgba(255, 255, 255, .9); }
[data-tema="claro"] .msg-mais { background: rgba(15, 27, 45, .12); color: var(--txt); }
[data-tema="claro"] .citacao { background: rgba(15, 27, 45, .06); }
[data-tema="claro"] .msg-atendente .citacao { background: rgba(0, 0, 0, .14); }
[data-tema="claro"] .modal-fundo { background: rgba(15, 27, 45, .35); }
[data-tema="claro"] .eu-menu, [data-tema="claro"] .menu-msg, [data-tema="claro"] .pop-lembretes { box-shadow: 0 18px 50px rgba(15, 27, 45, .18); }
[data-tema="claro"] .toast { background: #ffffff; }
[data-tema="claro"] .painel { background: linear-gradient(180deg, #ffffff, #fbfcfd); }
[data-tema="claro"] .tabela th { color: var(--txt3); }
[data-tema="claro"] .transc { background: rgba(15, 27, 45, .05); }
[data-tema="claro"] .midia-pendente { background: rgba(15, 27, 45, .04); border-color: rgba(15, 27, 45, .15); }
[data-tema="claro"] .chat-lembretes { background: rgba(245, 197, 66, .1); }
[data-tema="claro"] .cl-item { background: #fffdf5; }
[data-tema="claro"] .side-expediente { background: #f6f8fb; }
[data-tema="claro"] .compositor textarea { color: var(--txt); }
[data-tema="claro"] .audio-play { color: var(--txt); }
/* fundos no tema claro: versões claras */
[data-tema="claro"] [data-fundo], [data-tema="claro"][data-fundo] { --chat-padrao-cor: #15803d; --chat-padrao-op: .09; --chat-bg: radial-gradient(ellipse 70% 45% at 12% 0%, rgba(22, 163, 74, .08), transparent 62%), #efeae2; }
[data-tema="claro"] [data-fundo="mata"], [data-tema="claro"][data-fundo="mata"] { --chat-padrao-cor: #16a34a; --chat-padrao-op: .1; --chat-bg: radial-gradient(ellipse 70% 50% at 15% 5%, rgba(250, 204, 21, .12), transparent 60%), linear-gradient(165deg, #ecfdf3, #dcf5e5); }
[data-tema="claro"] [data-fundo="oceano"], [data-tema="claro"][data-fundo="oceano"] { --chat-padrao-cor: #0284c7; --chat-padrao-op: .09; --chat-bg: linear-gradient(180deg, #ecfeff, #dbeafe); }
[data-tema="claro"] [data-fundo="aurora"], [data-tema="claro"][data-fundo="aurora"] { --chat-padrao-cor: #6366f1; --chat-padrao-op: .25; --chat-bg: radial-gradient(ellipse 60% 35% at 25% 0%, rgba(52, 211, 153, .25), transparent 70%), radial-gradient(ellipse 50% 30% at 75% 6%, rgba(139, 92, 246, .2), transparent 70%), linear-gradient(180deg, #f5f3ff, #eef2ff); }
[data-tema="claro"] [data-fundo="cerrado"], [data-tema="claro"][data-fundo="cerrado"] { --chat-padrao-op: 0; --chat-bg: url("../img/fundo-colinas.svg") center bottom / 100% 34% no-repeat, radial-gradient(circle at 70% 58%, rgba(255, 255, 255, .8) 0, rgba(253, 186, 116, .4) 10%, transparent 28%), linear-gradient(180deg, #fde68a 0%, #fdba74 45%, #fca5a5 80%, #f9a8d4 100%); }
[data-tema="claro"] [data-fundo="capivara"], [data-tema="claro"][data-fundo="capivara"] { --chat-padrao-cor: #4d7c0f; --chat-padrao-op: .1; --chat-bg: linear-gradient(180deg, #f3f8e9, #e8f1d6); }
[data-tema="claro"] [data-fundo="liso"], [data-tema="claro"][data-fundo="liso"] { --chat-padrao-op: 0; --chat-bg: #eef2f6; }
[data-tema="claro"] [data-fundo="foto"], [data-tema="claro"][data-fundo="foto"] { --chat-padrao-op: 0; --chat-bg: linear-gradient(rgba(255, 255, 255, var(--chat-esc, .45)), rgba(255, 255, 255, var(--chat-esc, .45))), var(--chat-foto, none) center / cover no-repeat, #eef2f6; }
@media (max-width: 520px) { .ap-fundos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* v22 leitura em qualquer fundo */
.msg-sistema { background: rgba(14, 20, 32, .82) !important; backdrop-filter: blur(6px); color: #e7d7a8 !important; }
[data-tema="claro"] .msg-sistema { background: rgba(255, 251, 235, .92) !important; color: #6b4f00 !important; }
.dia { backdrop-filter: blur(6px); }
[data-tema="claro"] .topo-buscando { background: rgba(255, 255, 255, .92) !important; color: #047857 !important; border-color: rgba(5, 150, 105, .35) !important; }
[data-tema="claro"] .msg-cliente .audio-barra::before { background: rgba(15, 27, 45, .18); }
[data-tema="claro"] .msg-cliente .audio-info, [data-tema="claro"] .msg-cliente .audio-tempo { color: var(--txt2); }
[data-tema="claro"] .msg-cliente .audio-vel { background: rgba(15, 27, 45, .08); color: var(--txt); }
[data-tema="claro"] .btn-perigo { background: #fff1f2; }
/* v22 tema claro: formulários e painéis que tinham cor fixa escura */
[data-tema="claro"] .campo input, [data-tema="claro"] .campo textarea, [data-tema="claro"] .campo select { background: #ffffff; color: var(--txt); }
[data-tema="claro"] .campo input:focus, [data-tema="claro"] .campo textarea:focus, [data-tema="claro"] .campo select:focus { background: #ffffff; }
[data-tema="claro"] .check .box { border-color: #b6c2d1; background: #fff; }
[data-tema="claro"] .atd .atd-cliente { background: linear-gradient(180deg, #ffffff, #f6f8fb) !important; border-left-color: var(--linha); box-shadow: -30px 0 80px rgba(15, 27, 45, .18); }
[data-tema="claro"] .cli-topo { background: linear-gradient(180deg, #ffffff 70%, rgba(255, 255, 255, 0)); }
[data-tema="claro"] .ajs-demo-txt, [data-tema="claro"] .transc { background: rgba(15, 27, 45, .05); color: var(--txt); }
[data-tema="claro"] .cli-fundo { background: rgba(15, 27, 45, .25); }
[data-tema="claro"] .wpp-diag-grade div, [data-tema="claro"] .atz-progresso, [data-tema="claro"] .atz-drop { background: #f6f8fb; }
[data-tema="claro"] .faixa-versao { background: #ffffff; }
[data-tema="claro"] .emoji-pop, [data-tema="claro"] .menu-anexo, [data-tema="claro"] .mencoes-pop { background: #ffffff; }
[data-tema="claro"] .mp-ic { background: rgba(15, 27, 45, .06); }
[data-tema="claro"] .eq-aviso, [data-tema="claro"] .eq-fixada { background: rgba(255, 251, 235, .95); color: #6b4f00; }
[data-tema="claro"] .chat-form { background: rgba(255, 255, 255, .92); }
[data-tema="claro"] .cli-hero { background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(34, 197, 94, .16), transparent 70%), linear-gradient(180deg, #f2fbf5, #e9f6ee); border-color: rgba(5, 150, 105, .2); }
[data-tema="claro"] .cli-hero::before { opacity: .25; }
[data-tema="claro"] .qr-caixa { background: linear-gradient(180deg, #ffffff, #f6f8fb) !important; border-color: var(--linha) !important; box-shadow: 0 18px 50px rgba(15, 27, 45, .08) !important; }
[data-tema="claro"] .qr-conectado-tela strong { color: var(--txt); }
[data-tema="claro"] .wpp-dica b { color: #b45309; }
[data-tema="claro"] .wpp-diag { background: #f6f8fb; }
[data-tema="claro"] .wpp-diag-topo b { color: var(--txt); }
[data-tema="claro"] .qr-moldura { background: #ffffff; }
.end-obs { display: block; font-size: 11px; color: var(--txt3); font-weight: 600; margin-top: 2px; }

/* =====================================================================
   v23 — Status/presença, ausência automática, mensagens prontas e reações
   ===================================================================== */
.emj { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

/* pílula de status no topo */
.st-pill {
  --st: #22c55e;
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px 0 11px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--st) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--st) 45%, transparent);
  color: var(--txt); font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: .18s; max-width: 220px;
}
.st-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--st) 30%, transparent); }
.st-pill-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 25%, transparent); flex: none; animation: stPulso 2.4s ease-in-out infinite; }
.st-pill-emoji { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 15px; line-height: 1; }
.st-pill-emoji:empty { display: none; }
.st-pill:not([data-chave="disponivel"]) .st-pill-ponto { display: none; }
.st-pill-txt { overflow: hidden; text-overflow: ellipsis; }
@keyframes stPulso { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--st) 0%, transparent); } }
@media (max-width: 1100px) { .st-pill-txt { display: none; } .st-pill { padding: 0 11px; } .st-pill[data-chave="disponivel"] { padding: 0; width: 38px; justify-content: center; } }
@media (max-width: 480px) { .st-pill { height: 34px; } .st-pill[data-chave="disponivel"] { width: 34px; } }
.eu-botao .eu-avatar { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4.5px var(--st, #22c55e); }
.eu-status-item b.eu-som-estado { background: none !important; font-size: 14px; padding: 0 !important; }

/* selo "🦺 Em vistoria · volta às 15:00" */
.st-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
  color: color-mix(in srgb, var(--st) 75%, #fff); background: color-mix(in srgb, var(--st) 16%, transparent); border: 1px solid color-mix(in srgb, var(--st) 35%, transparent);
  font-family: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.st-selo.mini { padding: 1px 7px; font-size: 11px; }
.st-selo.st-offline { color: var(--txt3); }
.avatar > i.st-badge.st-badge {
  width: auto; height: auto; min-width: 19px; min-height: 19px; right: -5px; bottom: -5px; padding: 1px; display: grid; place-items: center;
  font-style: normal; font-size: 11px; line-height: 1; border-radius: 50%; background: var(--card2); border: 2px solid var(--st);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* modal Meu status */
.modal-status { max-width: 560px; padding: 0; gap: 0; position: relative; overflow-x: hidden; }
.st-hero {
  display: flex; align-items: center; gap: 18px; padding: 28px 26px 22px; border-bottom: 1px solid var(--linha);
  background: radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--st) 30%, transparent), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
  transition: background .3s;
}
.st-hero-av { position: relative; flex: none; }
.st-hero-av .avatar { width: 72px; height: 72px; font-size: 26px; border-radius: 50%; position: relative; z-index: 1; }
.st-hero-av .avatar.av-emoji { font-size: 38px; }
.st-anel { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--st); box-shadow: 0 0 22px color-mix(in srgb, var(--st) 55%, transparent); animation: stAnel 2.6s ease-in-out infinite; transition: border-color .3s; }
@keyframes stAnel { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .75; } }
.st-hero-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 30px; }
.st-hero-txt small { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--txt3); }
.st-hero-txt strong { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-hero-status { font-size: 14px; font-weight: 800; color: color-mix(in srgb, var(--st) 70%, #fff); font-family: inherit; }
.st-hero-txt em { font-size: 12.5px; color: var(--txt2); font-style: italic; }
.st-hero-txt em:empty { display: none; }
.st-corpo { padding: 18px 24px 6px; display: flex; flex-direction: column; gap: 14px; }
.st-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.st-op {
  --st: #22c55e; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 12px; cursor: pointer;
  border-radius: 16px; border: 1.5px solid var(--linha2); background: var(--card); color: var(--txt); font: inherit; transition: .16s;
}
.st-op:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--st) 60%, transparent); }
.st-op-emoji { font-size: 26px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transition: transform .2s; }
.st-op-nome { font-size: 12.5px; font-weight: 800; }
.st-op.ativo { border-color: var(--st); background: color-mix(in srgb, var(--st) 15%, var(--card)); box-shadow: 0 8px 22px color-mix(in srgb, var(--st) 28%, transparent), inset 0 0 0 1px var(--st); }
.st-op.ativo .st-op-emoji { transform: scale(1.18); }
.st-op.ativo::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--st); }
.st-detalhes { display: flex; flex-direction: column; gap: 14px; animation: lgFade .2s; }
.st-voltas { display: flex; flex-wrap: wrap; gap: 7px; }
.st-voltas > button, .st-hora-campo {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linha2);
  background: var(--card); color: var(--txt2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s;
}
.st-voltas > button:hover, .st-hora-campo:hover { color: var(--txt); border-color: var(--st); }
.st-voltas > button.ativo { color: #fff; background: var(--st); border-color: var(--st); }
.st-hora-campo svg { width: 15px; height: 15px; }
.st-hora-campo input { border: none; background: none; color: var(--txt); font: inherit; font-weight: 800; padding: 0; width: 104px; outline: none; color-scheme: dark; }
.st-ajuda { display: block; margin-top: 6px; font-size: 11.5px; color: var(--txt3); }
.st-auto { border-radius: 16px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .02); overflow: hidden; }
.st-auto .som-liga { border: none; border-radius: 0; background: none; }
.st-aus-corpo { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; transition: opacity .2s; }
.st-aus-corpo.desligado { opacity: .38; pointer-events: none; }
.st-aus-corpo textarea, .mp-bloco textarea {
  width: 100%; resize: vertical; min-height: 78px; padding: 11px 13px; border-radius: 13px; border: 1.5px solid var(--linha2); background: var(--card);
  color: var(--txt); font: inherit; font-size: 13.5px; line-height: 1.45; outline: none; transition: border-color .15s, box-shadow .15s;
}
.st-aus-corpo textarea:focus, .mp-bloco textarea:focus { border-color: var(--neon); box-shadow: 0 0 0 4px rgba(22, 163, 74, .14); }
.st-offline { padding: 2px 2px 4px; }
.modal-status .modal-botoes { padding: 14px 24px 22px; }
#st-salvar { min-width: 150px; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--st) 85%, #fff 0%), color-mix(in srgb, var(--st) 70%, #000)); border-color: transparent; box-shadow: 0 10px 26px color-mix(in srgb, var(--st) 35%, transparent); }

/* variáveis e prévia estilo WhatsApp */
.mp-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--txt3); }
.mp-vars > span { font-weight: 800; text-transform: uppercase; letter-spacing: .6px; font-size: 10.5px; }
.mp-vars button:not(.eq-link) { padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--linha2); background: none; color: var(--neon); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.mp-vars button:not(.eq-link):hover { background: rgba(52, 211, 153, .08); border-style: solid; }
.mp-vars .eq-link { margin-left: auto; }
.mp-previa {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px;
  background: #0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='4' cy='4' r='1.2' fill='%23ffffff' opacity='.05'/%3E%3C/svg%3E");
  border: 1px solid var(--linha);
}
.mp-previa > small { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #8696a0; display: flex; justify-content: space-between; align-items: center; }
.mp-bolha {
  align-self: flex-end; max-width: 92%; padding: 8px 11px 9px; border-radius: 11px 11px 3px 11px; background: #005c4b; color: #e9edef;
  font-size: 13.5px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
.mp-bolha:empty { display: none; }
.mp-bolha b { color: #e9edef; }
.mp-bolha em { color: #8696a0; }
.mp-bloco { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .02); }
.mp-cab { display: flex; align-items: center; gap: 11px; }
.mp-cab > div { flex: 1; display: flex; flex-direction: column; }
.mp-cab strong { font-size: 14.5px; }
.mp-cab small { font-size: 12px; color: var(--txt2); }
.mp-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(52, 211, 153, .1); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.perfil-dica.topo svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--amarelo); }
.mp-link-status { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--txt2); background: rgba(245, 158, 11, .07); border: 1px dashed rgba(245, 158, 11, .4); }
.mp-link-status:hover { color: var(--txt); background: rgba(245, 158, 11, .12); }
@media (max-width: 520px) {
  .perfil-abas { gap: 0; padding: 8px 6px 0; }
  .perfil-abas button { font-size: 10.5px; padding: 8px 2px 10px; }
  .st-hero { padding: 22px 18px 18px; gap: 14px; }
  .st-hero-av .avatar { width: 58px; height: 58px; }
  .st-corpo { padding: 16px 16px 4px; }
  .st-opcoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .st-op { padding: 11px 4px 10px; }
  .st-op-emoji { font-size: 22px; }
  .st-op-nome { font-size: 11.5px; }
  .modal-status .modal-botoes { padding: 12px 16px 18px; }
}

/* faixa "Santiago está em vistoria" no topo da conversa */
.chat-presenca {
  --st: #f59e0b; position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 9px clamp(12px, 2vw, 22px); flex: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--st) 20%, var(--bg2)), color-mix(in srgb, var(--st) 6%, var(--bg2)));
  border-bottom: 1px solid color-mix(in srgb, var(--st) 35%, transparent); animation: lgFade .25s;
}
.cp-emoji { font-size: 22px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; animation: cpBalanca 3s ease-in-out infinite; }
@keyframes cpBalanca { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(0); } }
.cp-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 1px; }
.cp-txt strong { font-size: 13.5px; color: color-mix(in srgb, var(--st) 55%, #fff); }
.cp-txt small { font-size: 12.5px; color: var(--txt2); font-style: italic; }
.cp-txt em { font-size: 11.5px; font-style: normal; color: var(--txt3); font-weight: 700; }
.cp-btn { padding: 6px 12px !important; font-size: 12.5px; flex: none; }
.cp-btn svg { width: 15px; height: 15px; }
@media (max-width: 600px) { .cp-txt em { display: none; } .chat-presenca { gap: 9px; } }

/* cartão de ausência no chat da equipe */
.eq-presenca {
  --st: #f59e0b; position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; margin: 12px clamp(12px, 3vw, 30px) 0; padding: 16px 18px;
  border-radius: 20px; flex: none; animation: lgSlide .35s cubic-bezier(.2, 1, .3, 1);
  background: radial-gradient(120% 180% at 0% 50%, color-mix(in srgb, var(--st) 26%, transparent), transparent 70%), color-mix(in srgb, var(--st) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--st) 40%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--st) 14%, transparent);
}
.eq-presenca.off { --st: #64748b; }
.ep-emoji { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 28px;
  background: color-mix(in srgb, var(--st) 22%, var(--card2)); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.ep-emoji i { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--st); animation: epOnda 2.2s ease-out infinite; }
@keyframes epOnda { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.ep-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ep-txt strong { font-size: 15px; color: color-mix(in srgb, var(--st) 50%, #fff); }
.ep-txt q { font-size: 13.5px; color: var(--txt); font-style: italic; }
.ep-txt q::before { content: "“"; } .ep-txt q::after { content: "”"; }
.ep-txt small { font-size: 12px; color: var(--txt2); }
@media (max-width: 600px) { .eq-presenca { gap: 12px; padding: 12px 14px; margin: 10px 10px 0; } .ep-emoji { width: 44px; height: 44px; font-size: 22px; } }

/* resposta automática (bolha) */
.msg.msg-auto {
  background: linear-gradient(135deg, #334155, #1e293b) !important; color: #e2e8f0 !important; border: 1px dashed rgba(148, 163, 184, .45) !important;
  box-shadow: 0 6px 18px rgba(2, 6, 23, .3) !important;
}
.msg-cliente.msg-auto { border-bottom-left-radius: 5px; }
.auto-autor { display: flex !important; align-items: center; gap: 6px; font-size: 11.5px !important; font-weight: 800; color: #93c5fd !important; margin-bottom: 3px; }
.auto-autor i { font-style: normal; font-size: 14px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

/* mensagens prontas no compositor */
.btn-rapidas svg { color: var(--amarelo); }
.btn-rapidas:hover svg { color: #fde68a; }
.rapidas-pop { left: 58px; right: auto; width: min(340px, calc(100vw - 30px)); padding: 8px; }
.rapidas-titulo { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--txt3); padding: 4px 8px 6px; }
.rapidas-pop button[data-pronta] { align-items: flex-start; }
.rapidas-pop button > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rapidas-pop button small { font-size: 12px; font-weight: 500; color: var(--txt2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: rgba(245, 197, 66, .12); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.rapidas-pop .rp-editar { margin-top: 4px; border-top: 1px solid var(--linha) !important; border-radius: 0 0 11px 11px; color: var(--txt2); font-size: 13px; }
.rapidas-pop .rp-editar svg { width: 30px !important; height: 30px !important; padding: 6px !important; background: var(--card3) !important; color: var(--txt2); }
@media (max-width: 900px) { .rapidas-pop { left: 10px; } }

/* encerrar com despedida */
.modal-encerrar { max-width: 480px; }
.enc-previa { animation: lgFade .2s; }

/* ---------- reações ---------- */
.msg.com-reacao { margin-bottom: 15px; }
.reacoes {
  position: absolute; bottom: -15px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 1px; height: 26px; padding: 0 7px;
  border-radius: 999px; border: 2px solid var(--bg2); background: var(--card3); color: var(--txt); cursor: pointer; font: inherit; font-size: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transition: transform .15s;
}
.msg-cliente .reacoes { right: auto; left: 10px; }
.reacoes:hover { transform: scale(1.08); }
.reacoes b { font-family: var(--fonte); font-size: 11.5px; font-weight: 800; margin-left: 4px; color: var(--txt2); }
.reacao { line-height: 1; }
.reacao.minha { filter: drop-shadow(0 0 4px rgba(52, 211, 153, .7)); }
.reacoes.pulo { animation: reacaoPulo .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes reacaoPulo { 0% { transform: scale(.3); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.msg-reagir {
  position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: none; display: grid; place-items: center; cursor: pointer;
  background: var(--card2); color: var(--txt2); box-shadow: 0 3px 10px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(-50%) scale(.7); transition: .15s;
}
.msg-reagir svg { width: 18px; height: 18px; }
.msg-reagir:hover { color: var(--amarelo); transform: translateY(-50%) scale(1.08); }
.msg-cliente .msg-reagir { right: -40px; }
.msg-atendente .msg-reagir, .msg-nota .msg-reagir { left: -40px; }
.msg:hover .msg-reagir, .msg-reagir:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
@media (hover: none) { .msg-reagir { display: none; } }

.reacao-pop {
  position: fixed; z-index: 200; padding: 6px; border-radius: 999px; background: var(--card2); border: 1px solid var(--linha2);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); animation: reacaoEntra .2s cubic-bezier(.2, 1.4, .4, 1);
}
.reacao-pop.aberta { border-radius: 20px; padding: 10px; width: min(352px, calc(100vw - 16px)); }
@keyframes reacaoEntra { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
.reacao-rapidas { display: flex; align-items: center; gap: 2px; }
.reacao-rapidas button, .reacao-todas button, .menu-reacoes button {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: none; cursor: pointer; font-size: 25px; line-height: 1; display: grid; place-items: center;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; transition: transform .14s, background .14s;
}
.reacao-rapidas button { animation: reacaoBotao .3s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes reacaoBotao { from { opacity: 0; transform: translateY(10px) scale(.4); } to { opacity: 1; transform: none; } }
.reacao-rapidas button:hover, .reacao-todas button:hover, .menu-reacoes button:hover { transform: scale(1.3) translateY(-3px); background: transparent; }
.reacao-rapidas button.ativo, .reacao-todas button.ativo, .menu-reacoes button.ativo { background: rgba(52, 211, 153, .18); box-shadow: inset 0 0 0 2px rgba(52, 211, 153, .5); }
.reacao-mais { font-size: 20px !important; color: var(--txt2); background: var(--card3) !important; font-family: var(--fonte) !important; font-weight: 700; }
.reacao-todas { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 260px; overflow-y: auto; }
.reacao-todas button { width: 100%; aspect-ratio: 1; height: auto; font-size: 23px; border-radius: 12px; }
.menu-reacoes { display: flex; justify-content: space-between; gap: 0; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--linha); }
.menu-reacoes button { width: 34px; height: 34px; font-size: 21px; padding: 0 !important; }
.menu-msg:has(.menu-reacoes:not(.oculto)) { min-width: 268px; }
.reacao-quem {
  position: fixed; z-index: 200; width: min(280px, calc(100vw - 16px)); max-height: 320px; overflow: auto; border-radius: 16px; padding: 6px;
  background: var(--card2); border: 1px solid var(--linha2); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); animation: reacaoEntra .18s ease-out;
}
.rq-topo { display: flex; gap: 12px; padding: 6px 10px 8px; border-bottom: 1px solid var(--linha); font-size: 16px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.rq-topo b { font-family: var(--fonte); font-size: 12px; color: var(--txt2); }
.reacao-quem ul { list-style: none; display: flex; flex-direction: column; padding-top: 4px; }
.reacao-quem li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.reacao-quem li.eu { cursor: pointer; }
.reacao-quem li.eu:hover { background: rgba(239, 68, 85, .1); }
.rq-emoji { font-size: 22px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.rq-nome { display: flex; flex-direction: column; min-width: 0; }
.rq-nome strong { font-size: 13.5px; }
.rq-nome small { font-size: 11.5px; color: var(--txt3); }
.reacao-quem li.eu small { color: #f87171; }

/* tema claro */
[data-tema="claro"] .st-pill { color: #0f172a; background: color-mix(in srgb, var(--st) 10%, #fff); }
[data-tema="claro"] .st-selo { color: color-mix(in srgb, var(--st) 75%, #000); }
[data-tema="claro"] .st-hero-status, [data-tema="claro"] .cp-txt strong, [data-tema="claro"] .ep-txt strong { color: color-mix(in srgb, var(--st) 70%, #000); }
[data-tema="claro"] .st-op { background: #fff; }
[data-tema="claro"] .st-op.ativo { background: color-mix(in srgb, var(--st) 10%, #fff); }
[data-tema="claro"] .st-hora-campo input { color-scheme: light; }
[data-tema="claro"] .mp-previa { background-color: #efeae2; background-image: none; }
[data-tema="claro"] .mp-previa > small { color: #667781; }
[data-tema="claro"] .mp-bolha { background: #d9fdd3; color: #111b21; }
[data-tema="claro"] .mp-bolha b { color: #111b21; }
[data-tema="claro"] .chat-presenca { background: linear-gradient(90deg, color-mix(in srgb, var(--st) 16%, #fff), color-mix(in srgb, var(--st) 4%, #fff)); }
[data-tema="claro"] .eq-presenca { background: radial-gradient(120% 180% at 0% 50%, color-mix(in srgb, var(--st) 18%, transparent), transparent 70%), #fff; }
[data-tema="claro"] .ep-emoji { background: color-mix(in srgb, var(--st) 14%, #fff); }
[data-tema="claro"] .msg.msg-auto { background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important; color: #1e293b !important; border-color: rgba(99, 102, 241, .35) !important; box-shadow: none !important; }
[data-tema="claro"] .auto-autor { color: #4f46e5 !important; }
[data-tema="claro"] .reacoes { background: #fff; border-color: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .18); }
[data-tema="claro"] .reacao-pop, [data-tema="claro"] .reacao-quem, [data-tema="claro"] .msg-reagir { background: #fff; }
[data-tema="claro"] .st-auto, [data-tema="claro"] .mp-bloco { background: #f8fafc; }
.msg-atendente .reacoes, .msg-nota .reacoes { right: auto; left: 10px; }
@media (max-width: 1100px) { .st-pill[data-chave="disponivel"] { display: none; } }
.modal-status { --st: #22c55e; }
.cp-volta { font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--st) 60%, #fff); }
[data-tema="claro"] .cp-volta { color: color-mix(in srgb, var(--st) 70%, #000); }
@media (max-width: 600px) {
  .chat-presenca { padding: 8px 12px; }
  .cp-emoji { font-size: 19px; }
  .cp-txt strong { font-size: 12.5px; }
  .cp-txt small { display: none; }
  .cp-btn { padding: 5px 10px !important; font-size: 12px; }
  .cp-btn-txt { display: none; }
}

/* =====================================================================
   v24 — chip do WhatsApp (topo) e status sem pílula
   ===================================================================== */
.chip-wpp {
  --cw: #64748b; position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 4px 14px 4px 4px;
  border-radius: 14px; text-decoration: none; color: var(--txt); overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cw) 16%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--cw) 38%, var(--linha2));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cw) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.chip-wpp::before {   /* brilho que passa */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--cw) 22%, transparent) 50%, transparent 65%);
  transform: translateX(-120%); animation: cwBrilho 5.5s ease-in-out infinite;
}
@keyframes cwBrilho { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
a.chip-wpp:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cw) 70%, transparent); box-shadow: 0 10px 26px color-mix(in srgb, var(--cw) 26%, transparent); }
.chip-wpp.st-ok { --cw: #22c55e; color: var(--txt); background: linear-gradient(135deg, color-mix(in srgb, var(--cw) 16%, var(--card)), var(--card)); }
.chip-wpp.st-alerta { --cw: #f5c542; color: var(--txt); background: linear-gradient(135deg, color-mix(in srgb, var(--cw) 16%, var(--card)), var(--card)); }
.chip-wpp.st-erro { --cw: #ef4455; color: var(--txt); background: linear-gradient(135deg, color-mix(in srgb, var(--cw) 16%, var(--card)), var(--card)); }
.cw-ic {
  position: relative; width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cw) 100%, #fff 12%), color-mix(in srgb, var(--cw) 70%, #000));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cw) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.cw-ic svg { width: 20px; height: 20px; }
.cw-ic .ponto-status { position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border: 2.5px solid var(--card); background: var(--cw); }
.cw-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cw-txt small { font-size: 9.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--txt3); }
.cw-txt .chip-txt { font-size: 13px; font-weight: 800; white-space: nowrap; color: color-mix(in srgb, var(--cw) 55%, #fff); }
.cw-sinal { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-left: 2px; }
.cw-sinal i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--cw) 30%, transparent); }
.cw-sinal i:nth-child(1) { height: 25%; } .cw-sinal i:nth-child(2) { height: 50%; } .cw-sinal i:nth-child(3) { height: 75%; } .cw-sinal i:nth-child(4) { height: 100%; }
.chip-wpp.st-ok .cw-sinal i { background: var(--cw); animation: cwSinal 2.4s ease-in-out infinite; }
.chip-wpp.st-ok .cw-sinal i:nth-child(2) { animation-delay: .15s; } .chip-wpp.st-ok .cw-sinal i:nth-child(3) { animation-delay: .3s; } .chip-wpp.st-ok .cw-sinal i:nth-child(4) { animation-delay: .45s; }
@keyframes cwSinal { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .35; } }
.chip-wpp.st-alerta .cw-sinal i:nth-child(-n+2) { background: var(--cw); animation: cwSinal 1.2s ease-in-out infinite; }
.chip-wpp.st-erro .cw-sinal i:nth-child(1) { background: var(--cw); }
.chip-wpp.st-alerta .cw-ic svg { animation: cwGira 1.6s ease-in-out infinite; }
@keyframes cwGira { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg) scale(.92); } }
@media (max-width: 1180px) { .cw-sinal { display: none; } }
@media (max-width: 760px) {
  .chip-wpp { padding: 3px; height: 42px; gap: 0; border-radius: 13px; }
  .chip-wpp .cw-txt { display: none; }
}
[data-tema="claro"] .chip-wpp { background: linear-gradient(135deg, color-mix(in srgb, var(--cw) 12%, #fff), #fff); box-shadow: 0 4px 14px color-mix(in srgb, var(--cw) 16%, transparent); }
[data-tema="claro"] .cw-txt .chip-txt { color: color-mix(in srgb, var(--cw) 70%, #000); }
[data-tema="claro"] .cw-ic .ponto-status { border-color: #fff; }

/* status no avatar do usuário (sem pílula) */
.eu-botao { position: relative; }
.eu-st-selo {
  position: absolute; left: 30px; bottom: 1px; min-width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 10.5px; line-height: 1; background: var(--card2); border: 2px solid var(--st, #f59e0b);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.eu-botao:not([data-st="disponivel"]) .eu-avatar { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4.5px var(--st); }
.eu-botao[data-st="disponivel"] .eu-avatar, .eu-botao:not([data-st]) .eu-avatar { box-shadow: 0 4px 14px rgba(22, 163, 74, .3); }

/* cartão "Meu status" no menu do usuário */
.eu-status-card {
  --st: #22c55e; display: flex; align-items: center; gap: 11px; width: 100%; margin: 2px 0 6px; padding: 10px 12px;
  border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: var(--txt);
  background: linear-gradient(135deg, color-mix(in srgb, var(--st) 16%, transparent), color-mix(in srgb, var(--st) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--st) 35%, transparent); transition: .16s;
}
.eu-status-card:hover { border-color: var(--st); box-shadow: 0 6px 18px color-mix(in srgb, var(--st) 22%, transparent); }
.esc-ic {
  width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 18px; line-height: 1;
  background: color-mix(in srgb, var(--st) 20%, var(--card2)); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.esc-ic i { width: 11px; height: 11px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 25%, transparent); animation: stPulso 2.4s ease-in-out infinite; }
.esc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.esc-txt small { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--txt3); }
.esc-txt strong { font-size: 14px; font-weight: 800; color: color-mix(in srgb, var(--st) 55%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-mudar { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 800; color: var(--txt2); }
.esc-mudar svg { width: 13px; height: 13px; transition: transform .15s; }
.eu-status-card:hover .esc-mudar { color: var(--txt); }
.eu-status-card:hover .esc-mudar svg { transform: translateX(2px); }
[data-tema="claro"] .esc-txt strong { color: color-mix(in srgb, var(--st) 70%, #000); }
[data-tema="claro"] .esc-ic { background: color-mix(in srgb, var(--st) 14%, #fff); }


/* =====================================================================
   v25 — barra de formatação · marcar várias pessoas na nota · abertura
   instantânea das conversas
   ===================================================================== */

/* ---- barra de formatação (em cima do campo de escrever) ---- */
.fmt-barra { display: flex; align-items: center; gap: 8px; margin: 10px 18px 0; padding: 4px; border: 1px solid var(--linha); border-radius: 14px; background: var(--card); animation: capSobe .18s ease; }
.fmt-barra.oculto { display: none; }
.rodape-chat .fmt-barra + .chat-form, .fmt-barra + .chat-form { padding-top: 8px; }
.fmt-grupo { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fmt-grupo::-webkit-scrollbar { display: none; }
.fmt-bt { width: 34px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--txt2); cursor: pointer; transition: background .14s, color .14s, transform .1s; }
.fmt-bt svg { width: 18px; height: 18px; }
.fmt-bt:hover { color: var(--neon); background: rgba(52, 211, 153, .1); }
.fmt-bt:active { transform: scale(.92); background: rgba(52, 211, 153, .18); }
.fmt-bt:focus-visible { outline: 2px solid var(--neon); outline-offset: 1px; }
.fmt-sep { width: 1px; height: 18px; flex: none; margin: 0 5px; background: var(--linha2); }
.fmt-fechar { color: var(--txt3); }
.btn-fmt.ativo { color: var(--neon); background: rgba(52, 211, 153, .1); }
.rodape-chat.modo-nota .fmt-barra { border-color: rgba(245, 197, 66, .35); background: rgba(245, 197, 66, .05); }
.rodape-chat.modo-nota .fmt-bt:hover, .rodape-chat.modo-nota .btn-fmt.ativo { color: var(--amarelo); background: rgba(245, 197, 66, .12); }
[data-tema="claro"] .fmt-barra { background: #f4f7fa; }

/* ---- o texto formatado dentro das mensagens ---- */
.msg-texto code, .msg code { display: inline-block; max-width: 100%; vertical-align: baseline; font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .92em; line-height: 1.35; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .22); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-cliente .msg-texto code, .msg-nota .msg-texto code { background: rgba(0, 0, 0, .1); }
.msg code.fmt-bloco { display: inline-block; width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 9px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fmt-li { display: flex; gap: 7px; align-items: baseline; }
.fmt-li > i { flex: none; min-width: 1.05em; font-style: normal; font-weight: 800; text-align: right; opacity: .75; font-variant-numeric: tabular-nums; }
.fmt-li > span { min-width: 0; }
.fmt-cit { display: block; margin: 2px 0; padding: 1px 0 1px 9px; border-left: 3px solid currentColor; border-radius: 2px; opacity: .82; }
.fmt-esp { display: block; height: .55em; }
/* mensagem que termina em lista/citação: o espaço da hora vai embaixo, não numa linha solta */
.msg-texto:has(> .fmt-li:last-child, > .fmt-cit:last-child, > .fmt-bloco:last-child) { padding-bottom: 13px; }
.msg-texto:has(> .fmt-li:last-child, > .fmt-cit:last-child, > .fmt-bloco:last-child)::after { display: none; }

/* ---- nota interna: quem vai ser avisado ---- */
.nota-avisar { display: flex; align-items: center; gap: 8px; margin: 10px 18px 0; padding: 6px 6px 6px 12px; border: 1px dashed rgba(245, 197, 66, .45); border-radius: 14px; background: rgba(245, 197, 66, .06); animation: capSobe .18s ease; }
.nota-avisar.oculto { display: none; }
.na-rot { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--amarelo); }
.na-rot svg { width: 14px; height: 14px; }
.na-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.na-chips em { font-style: normal; font-size: 12.5px; color: var(--txt3); }
.na-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 4px; border-radius: 999px; background: rgba(245, 197, 66, .16); color: var(--txt); font-size: 12.5px; animation: capSobe .16s ease; }
.na-chip .avatar { width: 20px; height: 20px; font-size: 9px; border-radius: 50%; }
.na-chip.na-todos { padding-left: 11px; }
.na-chip b { font-weight: 700; }
.na-chip button { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .22); color: inherit; font-size: 10px; line-height: 1; cursor: pointer; }
.na-chip button:hover { background: var(--erro); color: #fff; }
.na-add { flex: none; padding: 7px 12px; border: 0; border-radius: 10px; background: var(--amarelo); color: #3a2c00; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: filter .14s, transform .1s; }
.na-add:hover { filter: brightness(1.07); }
.na-add:active { transform: scale(.97); }
[data-tema="claro"] .na-chip button { background: rgba(0, 0, 0, .12); }

/* lista pra marcar várias pessoas */
.mencoes-pop.seletor { width: min(340px, calc(100% - 20px)); max-height: min(430px, 62vh); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.mencoes-pop.seletor.oculto { display: none; }
.mp-topo { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px; border-bottom: 1px solid var(--linha); }
.mp-topo b { font-size: 13.5px; }
.mp-topo small { font-size: 11.5px; line-height: 1.35; color: var(--txt2); }
.mp-lista { display: flex; flex-direction: column; padding: 4px 6px 6px; overflow-y: auto; min-height: 0; }
.mencoes-pop .mp-item { width: 100%; margin: 0; }
.mencoes-pop .mp-todos { width: calc(100% - 12px); margin: 6px 6px 0; border-bottom: 0; }
.mp-check { flex: none; width: 19px; height: 19px; display: grid !important; place-items: center; border: 2px solid var(--linha2); border-radius: 6px; transition: .14s; }
.mp-item.marcado .mp-check { border-color: var(--amarelo); background: var(--amarelo); }
.mp-item.marcado .mp-check::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2.2px solid #3a2c00; border-bottom: 2.2px solid #3a2c00; transform: rotate(-45deg); }
.mp-item.marcado { background: rgba(245, 197, 66, .1); }
.mp-eq { flex: none; width: 32px; height: 32px; display: grid !important; place-items: center; border-radius: 50%; background: rgba(245, 197, 66, .18); color: var(--amarelo); }
.mp-eq svg { width: 17px; height: 17px; }
.mp-fim { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 14px; border-top: 1px solid var(--linha); }
.mp-fim span { font-size: 12px; color: var(--txt2); }
.mencoes-pop .mp-fim .btn { display: inline-flex; padding: 7px 16px; color: #04210f; background: var(--neon); font-weight: 800; }
.mp-vazio { padding: 14px; font-size: 12.5px; color: var(--txt2); }
.mencoes-pop .mp-ja { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--amarelo); }
.mencao { white-space: nowrap; }
.mencoes-pop span.avatar { display: grid; place-items: center; flex: none; }   /* iniciais no meio da bolinha */

/* ---- conversa abrindo / aba carregando ---- */
@keyframes capSobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.atd.carregando-chat .atd-chat::after { content: ""; position: absolute; z-index: 6; top: 0; left: 0; height: 2px; width: 34%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--neon), transparent); animation: capCorre .85s linear infinite; }
@keyframes capCorre { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.conv-esqueleto { pointer-events: none; }
.conv-esqueleto .avatar { background: var(--card3); animation: capPulsa 1.1s ease-in-out infinite; }
.conv-esqueleto .conv-corpo { display: flex; flex-direction: column; gap: 9px; }
.conv-esqueleto .conv-corpo i { display: block; height: 10px; border-radius: 6px; background: var(--card3); animation: capPulsa 1.1s ease-in-out infinite; }
.conv-esqueleto .conv-corpo i:first-child { width: 55%; }
.conv-esqueleto .conv-corpo i:last-child { width: 82%; opacity: .6; }
@keyframes capPulsa { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (max-width: 760px) {
  .fmt-barra, .nota-avisar { margin: 8px 10px 0; }
  .na-add { padding: 7px 10px; }
  .na-rot { font-size: 0; gap: 0; }   /* no celular fica só o sininho */
}
@media (prefers-reduced-motion: reduce) {
  .fmt-barra, .nota-avisar, .na-chip, .conv-esqueleto .avatar, .conv-esqueleto .conv-corpo i, .atd.carregando-chat .atd-chat::after { animation: none; }
}


/* =====================================================================
   v26 — menu lateral recolhível: trilho de ícones que expande
   ===================================================================== */
.side-recolher { display: none; }
@media (min-width: 901px) {
  .sidebar { position: relative; transition: width .28s cubic-bezier(.2, 1, .3, 1); }
  .side-recolher {
    position: absolute; z-index: 5; top: calc(var(--topbar-h) - 13px); right: -13px; width: 26px; height: 26px; padding: 0;
    display: grid; place-items: center; border-radius: 50%; cursor: pointer;
    color: var(--txt2); background: var(--card2); border: 1px solid var(--linha2); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: color .16s, background .16s, border-color .16s, transform .16s, box-shadow .16s;
  }
  .side-recolher svg { width: 13px; height: 13px; transition: transform .28s cubic-bezier(.2, 1, .3, 1); }
  .side-recolher:hover { color: #04210f; background: var(--neon); border-color: var(--neon); transform: scale(1.12); box-shadow: 0 6px 18px rgba(52, 211, 153, .4); }
  .side-recolher:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
  [data-menu="aberto"] .side-recolher svg { transform: rotate(180deg); }

  [data-menu="recolhido"] .sidebar { width: 76px; }
  [data-menu="recolhido"] .side-marca { padding: 0; justify-content: center; }
  [data-menu="recolhido"] .side-marca > div { display: none; }
  [data-menu="recolhido"] .side-marca::after { left: 14px; right: 14px; }
  [data-menu="recolhido"] .side-nav { overflow: visible; padding: 16px 12px; gap: 6px; }
  /* os títulos das seções viram um risquinho */
  [data-menu="recolhido"] .side-label { height: 1px; margin: 10px 12px; padding: 0; font-size: 0; background: var(--linha2); }
  [data-menu="recolhido"] .side-label:first-child { display: none; }
  [data-menu="recolhido"] .nav-item { justify-content: center; padding: 0; height: 48px; gap: 0; }
  [data-menu="recolhido"] .nav-item > span:not([class]) { display: none; }
  [data-menu="recolhido"] .nav-item svg { width: 22px; height: 22px; transition: transform .18s; }
  [data-menu="recolhido"] .nav-item:hover svg { transform: scale(1.12); }
  [data-menu="recolhido"] .nav-item .nav-badge { position: absolute; top: -5px; right: -5px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; border-radius: 9px; border: 2px solid #0a121d; box-sizing: content-box; }
  [data-menu="recolhido"] .nav-item .ponto-status { position: absolute; top: 9px; right: 11px; margin: 0; }
  /* o nome aparece ao lado quando passa o mouse (ou navega pelo teclado) */
  [data-menu="recolhido"] .nav-item[data-dica]::after {
    content: attr(data-dica); position: absolute; left: calc(100% + 14px); top: 50%; z-index: 90; pointer-events: none;
    padding: 7px 12px; border-radius: 10px; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--txt);
    background: var(--card3); border: 1px solid var(--linha2); box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    opacity: 0; transform: translate(-6px, -50%); transition: opacity .14s, transform .14s;
  }
  [data-menu="recolhido"] .nav-item[data-dica]:hover::after, [data-menu="recolhido"] .nav-item[data-dica]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
  [data-menu="recolhido"] .side-rodape { padding: 12px 10px 14px; align-items: center; }
  [data-menu="recolhido"] .side-expediente { width: 44px; height: 40px; padding: 0; justify-content: center; position: relative; }
  [data-menu="recolhido"] .side-expediente span, [data-menu="recolhido"] .side-expediente b { display: none; }
  [data-menu="recolhido"] .side-expediente svg { width: 17px; height: 17px; }
  [data-menu="recolhido"] .side-expediente::after { content: ""; position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--amarelo); box-shadow: 0 0 0 2px #0a121d; }
  [data-menu="recolhido"] .side-expediente.aberto::after { background: #4ade80; }
  [data-menu="recolhido"] .side-versao { font-size: 0; gap: 0; }
  [data-menu="recolhido"] .side-versao img { width: 18px; height: 18px; }
  [data-tema="claro"][data-menu="recolhido"] .nav-item .nav-badge, [data-tema="claro"][data-menu="recolhido"] .side-expediente::after { border-color: #fff; box-shadow: 0 0 0 2px #fff; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .side-recolher, .side-recolher svg { transition: none; } }


/* =====================================================================
   v27 — coluna das conversas mais larga (proporção do WhatsApp) e ajustável
   ===================================================================== */
.lista-alca { display: none; }
@media (min-width: 901px) {
  /* 30% da tela, entre 340 e 480 px — ou a largura que a pessoa escolheu arrastando */
  .atd, .atd:not(.com-cliente), .eq { grid-template-columns: var(--lista-w, clamp(340px, 30vw, 480px)) minmax(0, 1fr); }
  .atd-lista, .eq-lista { position: relative; z-index: 2; container-type: inline-size; container-name: lista; }   /* z-index: o que abre da lista (sininho, divisória) fica por cima do chat */
  .lista-alca { display: block; position: absolute; z-index: 9; top: 0; bottom: 0; right: -5px; width: 10px; cursor: col-resize; touch-action: none; }
  .lista-alca::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; border-radius: 2px; background: var(--neon); opacity: 0; transition: opacity .15s; }
  .lista-alca:hover::after, .arrastando-lista .lista-alca::after { opacity: .85; }
  .arrastando-lista, .arrastando-lista * { cursor: col-resize !important; user-select: none !important; }
}
/* tela média com o menu aberto: a lista cede um pouco pro chat */
@media (min-width: 901px) and (max-width: 1180px) {
  [data-menu="aberto"] .atd, [data-menu="aberto"] .atd:not(.com-cliente), [data-menu="aberto"] .eq { grid-template-columns: var(--lista-w, 320px) minmax(0, 1fr); }
}
/* com a coluna larga, os itens respiram mais (como no WhatsApp) */
@container lista (min-width: 400px) {
  .lista-topo { padding: 16px 18px 12px; }
  .abas { gap: 7px; padding-left: 18px; padding-right: 18px; }
  .aba { font-size: 12px; padding-top: 10px; padding-bottom: 9px; }
  .aba svg { width: 18px; height: 18px; }
  .conv-lista, .eq-pessoas { padding: 10px 12px; }
  .conv { padding-top: 13px; padding-bottom: 13px; gap: 14px; }
  .conv > .avatar { width: 48px; height: 48px; border-radius: 15px; font-size: 16px; }
  .conv-nome { font-size: 15px; }
  .conv-preview { font-size: 13.5px; margin-top: 4px; }
  .conv-hora { font-size: 11.5px; }
}

/* v29 — sem a aba Fila: as 4 abas ocupam a largura toda */
.abas { grid-template-columns: repeat(4, 1fr); }
.aba { font-size: 12px; }


/* =====================================================================
   v40 — bolhas das mensagens (verde mais sóbrio), nota interna que abre e fecha,
   lembrete com "quem recebe", editar mensagem e fundos novos
   ===================================================================== */
/* ---- bolhas ---- */
.msg { border-radius: 16px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .28); }
.msg-cliente { background: #1a2532; border: 1px solid rgba(255, 255, 255, .07); color: #e9eef5; border-bottom-left-radius: 5px; }
.msg-atendente {
  background: linear-gradient(180deg, #0d6b55 0%, #0a5947 100%); border: 1px solid rgba(255, 255, 255, .08); color: #ecfbf5;
  border-bottom-right-radius: 5px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.msg-atendente .autor, .msg .autor-celular { color: #9fe8cd; }
.msg-atendente .hora { opacity: 1; color: rgba(236, 251, 245, .7); }
.msg-cliente .hora { opacity: 1; color: var(--txt3); }
.msg-atendente .msg-texto a { color: #c9f7e6; }
.msg-atendente .citacao { background: rgba(0, 0, 0, .2); border-left-color: #6ee7c0; }
.msg-atendente .transc { background: rgba(0, 0, 0, .2); border-left-color: #6ee7c0; }
.msg-atendente:has(.msg-erro) { border-color: rgba(255, 180, 187, .25); }
.msg + .msg-atendente, .msg + .msg-cliente { margin-top: 1px; }
.msg-editada { font-style: italic; font-weight: 500; opacity: .85; margin-right: 2px; }
[data-tema="claro"] .msg { box-shadow: 0 1px 1.5px rgba(15, 27, 45, .12); }
[data-tema="claro"] .msg-cliente { background: #ffffff; border-color: #e2e8ef; color: #111b21; }
[data-tema="claro"] .msg-atendente { background: linear-gradient(180deg, #118466 0%, #0e7459 100%); border-color: rgba(0, 0, 0, .06); color: #f3fffa; box-shadow: 0 1px 1.5px rgba(15, 27, 45, .16); }
[data-tema="claro"] .msg-atendente .autor, [data-tema="claro"] .msg .autor-celular { color: #c6f6e3; }
@media (max-width: 560px) { .msg { max-width: 86%; font-size: 14.5px; border-radius: 15px; } }

/* ---- nota interna: um botão que abre, uma faixa clara com "Fechar" ---- */
.modo-envio { align-items: center; padding-left: 18px; padding-right: 18px; }
@media (max-width: 900px) { .modo-envio { padding-left: 10px; padding-right: 10px; } }
.modo-envio button[data-modo="nota"] { border-style: dashed; }
.modo-envio button[data-modo="nota"]:hover { color: var(--amarelo); border-color: rgba(245, 197, 66, .6); background: rgba(245, 197, 66, .08); }
.nota-faixa {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 12px;
  color: #3a2c00; background: linear-gradient(135deg, var(--amarelo), var(--amarelo-esc)); box-shadow: 0 6px 18px rgba(245, 197, 66, .22);
  animation: capSobe .18s ease-out;
}
.nota-faixa-ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(58, 44, 0, .14); }
.nota-faixa-ic svg { width: 14px; height: 14px; }
.nota-faixa-txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.nota-faixa-txt b { font-size: 13px; font-weight: 800; }
.nota-faixa-txt i { font-style: normal; font-size: 11.5px; font-weight: 600; opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.modo-envio .nota-faixa button {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; font-size: 12px; font-weight: 800;
  color: #3a2c00; background: rgba(255, 255, 255, .55); border: 1px solid rgba(58, 44, 0, .18); cursor: pointer; transition: .15s;
}
.modo-envio .nota-faixa button:hover { background: #fff; transform: translateY(-1px); }
.modo-envio .nota-faixa button svg { width: 13px; height: 13px; }
@media (max-width: 560px) { .nota-faixa-txt i { display: none; } }

/* ---- lembrete: quem recebe ---- */
.marc-para { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.marc-para button {
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: 11px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--linha2); background: var(--card); color: var(--txt2); cursor: pointer; transition: .15s; min-width: 0;
}
.marc-para button svg { width: 15px; height: 15px; flex: none; }
.marc-para button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marc-para button:hover { color: var(--txt); border-color: var(--linha3, var(--linha2)); }
.marc-para button.ativo { color: #04210f; background: linear-gradient(160deg, var(--neon), var(--verde-claro, var(--neon))); border-color: transparent; box-shadow: 0 6px 16px rgba(52, 211, 153, .22); }
.marc-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; max-height: 196px; overflow-y: auto; padding: 2px; }
.marc-pessoa {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 12px; text-align: left; cursor: pointer; min-width: 0;
  border: 1px solid var(--linha2); background: var(--card); color: var(--txt); transition: .15s;
}
.marc-pessoa .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; flex: none; }
.marc-pessoa > span:not(.avatar) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.marc-pessoa b { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marc-pessoa small { font-size: 10.5px; color: var(--txt3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marc-pessoa i { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--linha2); color: transparent; transition: .15s; }
.marc-pessoa i svg { width: 12px; height: 12px; }
.marc-pessoa:hover { border-color: rgba(52, 211, 153, .45); }
.marc-pessoa.ativo { border-color: var(--neon); background: rgba(52, 211, 153, .1); }
.marc-pessoa.ativo i { background: var(--neon); border-color: var(--neon); color: #04210f; }
.marc-para-dica { margin: 0; font-size: 12px; color: var(--txt3); line-height: 1.4; }
.lemb-quem { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--txt3); }
.lemb-quem svg { width: 12px; height: 12px; flex: none; }
.lemb-quem.compartilhado { color: var(--neon); }
@media (max-width: 480px) { .marc-para { grid-template-columns: 1fr; } .marc-pessoas { grid-template-columns: 1fr; } }

/* ---- editar mensagem ---- */
.modal-editar { max-width: 520px; }
.modal-editar textarea { width: 100%; min-height: 108px; max-height: 46vh; resize: vertical; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 14.5px; line-height: 1.45; color: var(--txt); background: var(--card); border: 1px solid var(--linha2); }
.modal-editar textarea:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }
.editar-prazo { font-size: 11.5px; font-weight: 700; color: var(--txt3); }
.modal-editar .modal-botoes { flex-wrap: wrap; align-items: center; }

/* ---- fundos novos ---- */
[data-fundo="topografia"], [data-fundo="terra"] { --chat-padrao: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22480%22 height=%22480%22 viewBox=%220 0 480 480%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.15%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M126 340 122 341 118 342 114 344 110 347 107 350 104 353 101 356 98 360 96 364 94 368 92 372 91 376 90 381 89 386 89 392 89 398 90 404 91 408 93 412 95 416 98 419 102 422 106 424 110 425 114 426 120 426 124 425 128 424 132 422 136 420 140 416 142 414 146 410 148 406 150 403 152 399 154 395 156 390 157 386 158 381 159 376 159 370 159 364 158 360 156 355 154 351 152 348 148 344 144 342 140 340 136 340 130 339 126 340M120 324 116 325 112 327 108 328 104 331 100 333 96 336 94 338 90 342 88 344 85 348 82 352 80 356 78 360 76 364 75 368 73 372 72 376 71 382 70 386 69 392 68 398 68 402 68 407 69 412 70 418 71 422 73 426 76 430 78 432 82 436 85 438 89 440 93 442 98 444 102 444 108 445 114 445 120 445 124 444 129 442 134 440 137 438 140 436 144 433 147 430 150 427 153 424 156 420 158 416 160 413 162 409 164 405 166 400 167 396 169 392 170 387 171 382 172 378 173 372 173 366 173 360 172 354 171 350 170 346 168 342 166 338 162 334 160 332 156 329 152 327 148 325 144 324 138 323 132 322 126 323 120 324M122 310 118 310 112 312 108 313 104 314 100 316 96 318 92 320 88 323 84 326 81 328 78 331 75 334 72 338 70 341 68 344 65 348 63 352 61 356 59 360 58 364 56 369 54 374 53 378 52 382 50 388 49 392 48 397 47 402 46 407 45 412 45 418 45 424 46 430 47 434 50 438 52 441 55 444 58 446 62 449 66 451 70 453 74 455 78 456 84 458 88 458 94 459 99 460 104 460 110 460 114 460 120 459 124 458 130 456 134 455 138 453 142 450 146 448 148 446 152 443 155 440 158 436 160 434 163 430 165 426 168 422 170 418 172 414 173 410 175 406 176 402 178 397 179 392 181 388 182 382 183 378 184 372 184 368 185 362 184 356 184 351 183 346 182 341 180 336 178 332 176 329 174 326 170 322 167 320 164 318 160 315 156 314 152 312 146 311 142 310 136 309 130 309 124 310 122 310M480 440 478 443 476 447 475 452 476 458 478 460 480 462M0 462 4 463 8 464 14 465 20 466 24 466 30 467 36 467 42 468 46 468 52 469 58 470 62 470 68 471 74 472 78 472 84 473 90 473 96 473 102 473 108 473 114 473 118 472 124 471 128 470 133 468 138 466 142 464 145 462 148 460 152 457 156 454 158 452 162 448 164 446 167 442 170 438 172 434 174 431 176 427 178 423 180 418 182 414 183 410 185 406 186 402 188 396 189 392 190 388 192 382 192 378 194 372 194 368 195 362 195 356 195 350 194 344 194 340 192 334 191 330 189 326 186 322 184 319 181 316 178 313 174 310 171 308 168 306 164 304 159 302 154 300 150 299 144 298 140 298 134 297 128 297 122 298 118 298 112 299 106 300 102 301 98 302 92 304 88 306 84 307 80 309 76 312 72 314 69 316 66 319 62 322 60 324 57 328 54 332 52 334 50 338 47 342 45 346 44 350 42 354 40 358 38 364 36 368 35 372 33 376 32 380 30 385 28 389 26 394 24 398 22 402 20 406 18 410 16 414 14 418 12 421 10 424 8 428 5 432 2 436 0 440M410 0 412 4 416 8 419 10 422 12 426 14 432 16 436 17 441 18 446 19 452 19 458 19 464 19 470 19 474 18 480 17M0 17 4 16 10 15 14 14 20 12 24 11 30 10 34 9 40 8 44 8 50 7 56 7 62 7 68 6 74 6 80 6 86 6 92 6 96 6 102 6 108 5 114 4 118 4 124 2 128 1 132 0M480 393 478 396 475 400 472 404 470 406 466 410 464 412 460 416 458 418 454 422 452 424 448 427 445 430 442 433 438 436 436 438 432 442 430 444 426 448 424 450 420 454 418 457 416 460 413 464 411 468 410 472 410 478 410 480M132 480 138 478 142 476 146 474 150 472 153 470 156 468 160 465 163 462 166 459 169 456 172 452 174 449 176 446 179 442 181 438 183 434 185 430 187 426 188 422 190 418 192 412 193 408 195 404 196 400 198 394 199 390 200 385 201 380 202 376 203 370 204 365 205 360 205 354 205 348 205 342 204 336 203 332 202 327 200 322 198 319 196 315 193 312 190 308 188 306 184 303 180 300 177 298 173 296 168 294 164 292 160 291 156 290 150 288 146 288 140 287 134 286 128 286 122 286 116 286 110 287 104 287 100 288 94 289 88 290 84 291 80 292 74 293 70 295 66 296 61 298 56 300 52 302 49 304 46 306 42 309 39 312 36 316 34 318 32 322 29 326 27 330 26 334 24 338 22 343 20 348 19 352 18 356 16 360 14 366 12 370 11 374 9 378 7 382 4 386 2 390 0 393M367 0 366 4 364 10 365 16 366 20 370 24 373 26 377 28 382 30 386 31 390 32 396 34 400 34 406 36 410 36 416 38 420 38 426 39 430 40 436 41 442 41 448 42 452 42 458 42 462 42 468 41 474 40 478 39 480 39M0 39 4 38 10 36 14 35 18 33 22 32 27 30 32 29 36 27 40 26 46 25 50 24 56 22 60 22 66 21 72 20 76 20 82 19 88 19 94 18 98 18 104 17 110 16 114 16 120 15 124 14 130 12 134 11 138 10 142 8 146 6 150 4 154 2 157 0M480 318 479 324 478 330 477 334 476 340 475 344 474 350 473 354 472 358 470 363 468 368 466 372 464 376 462 380 460 383 458 386 455 390 452 394 450 397 447 400 444 403 442 406 438 409 435 412 432 415 429 418 426 420 422 424 420 426 416 429 413 432 410 434 406 438 403 440 400 443 396 446 394 448 390 452 388 454 384 458 382 460 378 464 376 467 373 470 371 474 368 478 367 480M157 480 160 478 164 475 167 472 170 469 173 466 176 463 178 460 181 456 184 452 186 448 188 445 190 441 192 437 194 432 196 428 197 424 199 420 200 416 202 410 203 406 204 402 206 396 207 392 208 388 210 382 211 378 212 372 213 368 214 362 215 358 215 352 216 346 216 340 215 334 214 328 213 324 212 320 210 315 208 312 205 308 202 304 200 302 196 298 194 296 190 293 186 291 182 289 178 287 174 285 170 283 166 282 160 280 156 279 151 278 146 277 140 276 136 276 130 275 124 275 118 275 112 274 106 274 100 274 94 274 88 274 82 274 76 274 71 274 66 274 60 273 54 272 50 271 44 270 40 269 34 268 30 268 24 268 20 269 17 272 14 275 12 278 10 282 8 287 6 292 5 296 4 300 2 306 2 310 0 316 0 318M336 0 334 3 332 6 330 10 328 14 326 18 324 24 323 28 323 34 323 40 325 44 327 48 330 51 334 54 338 55 344 56 349 56 352 56 358 56 364 56 370 55 376 55 382 55 388 55 394 55 400 56 404 56 410 57 416 58 420 59 426 60 430 61 436 62 440 63 446 64 450 65 456 65 462 66 468 66 474 65 478 64 480 64M0 64 4 62 9 60 13 58 17 56 21 54 25 52 29 50 33 48 37 46 41 44 46 42 50 40 54 39 58 38 64 36 68 35 72 34 78 33 83 32 88 31 94 30 98 30 104 29 109 28 114 27 120 26 124 25 128 24 134 22 138 21 142 20 146 18 151 16 155 14 158 12 162 10 166 7 170 4 172 2 175 0M480 141 476 144 474 147 472 150 470 154 468 160 467 164 466 168 464 174 464 178 463 184 463 190 462 196 462 202 462 208 462 214 462 220 462 226 462 230 462 236 461 242 461 248 461 254 460 260 460 264 459 270 458 276 458 280 457 286 456 292 456 296 455 302 455 308 454 314 454 319 454 324 453 330 453 336 452 340 451 346 450 351 449 356 448 360 446 364 444 369 442 373 440 377 438 380 436 384 433 388 430 392 428 394 425 398 422 401 419 404 416 407 413 410 410 412 406 416 404 418 400 421 397 424 394 426 390 429 387 432 384 434 380 438 377 440 374 443 370 446 367 448 364 451 361 454 358 456 354 460 352 462 348 466 346 468 343 472 340 475 338 478 336 480M175 480 178 477 181 474 184 470 186 467 188 464 191 460 193 456 196 452 198 448 199 444 201 440 203 436 204 432 206 427 208 422 209 418 210 414 212 408 213 404 214 400 216 394 217 390 218 386 220 380 221 376 222 370 223 366 224 362 225 356 226 351 227 346 227 340 227 334 227 328 226 323 225 318 223 314 222 310 219 306 217 302 214 299 212 296 208 292 205 290 202 288 198 285 194 282 190 280 186 278 182 276 178 275 174 273 170 272 164 270 160 269 155 268 150 267 146 266 140 265 134 264 130 264 124 263 118 262 114 262 108 261 102 260 98 259 92 258 88 257 84 256 79 254 75 252 72 250 68 247 64 244 62 241 60 238 57 234 56 230 54 225 53 220 52 216 51 210 50 204 50 200 49 194 48 188 47 184 46 178 45 174 44 170 42 165 40 161 38 157 36 154 33 150 30 147 27 144 24 142 20 139 16 138 10 137 5 138 1 140 0 141M312 0 309 4 306 8 304 12 302 15 300 19 298 24 296 28 295 32 294 36 292 42 292 46 291 52 290 58 290 64 291 70 292 76 293 80 295 84 297 88 300 91 304 94 308 95 314 95 319 94 324 93 328 91 332 90 337 88 342 86 346 85 350 83 354 82 360 80 364 79 368 78 374 77 380 76 384 76 390 76 396 76 400 76 406 77 412 78 416 79 420 80 424 82 428 84 432 86 436 88 440 91 443 94 446 98 448 101 450 106 451 110 451 116 451 122 450 128 450 132 449 138 448 144 448 148 447 154 446 160 446 164 445 170 445 176 445 182 445 188 445 194 444 200 444 206 444 212 444 218 444 222 444 228 443 234 443 240 442 246 442 250 441 256 440 262 439 266 439 272 438 276 437 282 436 288 436 292 435 298 434 304 434 308 433 314 433 320 432 326 432 330 431 336 430 342 430 346 428 352 427 356 426 360 424 365 422 370 420 374 418 377 416 380 413 384 410 388 408 391 406 394 402 398 400 400 396 404 394 406 390 409 387 412 384 415 380 418 378 420 374 423 370 426 368 428 364 431 360 434 358 436 354 439 350 442 348 444 344 447 341 450 338 452 334 456 332 458 328 462 326 464 322 468 320 470 317 474 314 477 312 480M191 480 194 476 196 473 198 470 201 466 203 462 205 458 207 454 208 450 210 446 212 440 213 436 215 432 216 428 218 422 219 418 220 414 222 408 223 404 224 399 226 394 227 390 228 385 230 380 231 376 232 371 234 366 235 362 236 357 237 352 238 348 239 342 240 336 240 332 240 326 240 321 239 316 238 311 236 306 234 302 232 299 230 296 227 292 224 289 221 286 218 284 214 281 210 278 207 276 203 274 200 272 196 270 191 268 186 266 182 264 178 263 174 262 169 260 164 259 160 258 154 256 150 255 145 254 140 253 135 252 130 251 126 250 120 249 116 248 111 246 106 244 102 243 98 241 94 238 91 236 88 234 84 230 82 227 80 224 78 220 76 215 74 210 73 206 72 200 72 196 71 190 70 186 69 180 68 176 67 170 66 166 64 160 63 156 61 152 59 148 57 144 55 140 53 136 51 132 49 128 46 124 44 121 42 118 40 114 37 110 35 106 34 102 32 96 31 92 32 86 33 82 35 78 38 74 40 71 43 68 46 65 50 62 52 60 56 58 60 55 64 53 68 52 72 50 78 48 82 47 86 46 92 44 96 43 102 42 106 41 112 40 116 39 121 38 126 37 130 36 136 34 140 33 144 31 148 30 152 28 157 26 161 24 164 22 168 20 172 17 176 14 179 12 182 9 185 6 188 3 191 0M289 0 286 3 284 6 281 10 279 14 277 18 275 22 273 26 272 30 270 35 269 40 268 44 266 50 266 54 265 60 264 66 264 70 263 76 263 82 263 88 263 94 263 100 264 106 264 110 266 116 268 120 270 124 272 127 275 130 278 133 282 135 286 136 292 137 298 136 302 135 306 134 311 132 315 130 319 128 322 126 326 124 330 121 334 119 338 116 341 114 344 112 348 110 352 108 356 106 360 104 365 102 370 100 374 99 380 98 384 98 390 98 394 98 400 99 404 101 408 102 412 105 416 108 418 111 421 114 423 118 424 122 426 128 427 132 428 138 428 142 429 148 429 154 429 160 429 166 429 172 429 178 429 184 429 190 429 196 429 202 429 208 429 214 429 220 428 226 428 230 427 236 427 242 426 246 425 252 424 258 423 262 422 267 421 272 420 277 419 282 418 286 417 292 416 296 415 302 414 307 413 312 412 318 412 322 411 328 410 334 410 338 409 344 408 348 406 354 405 358 403 362 402 366 400 370 398 374 395 378 393 382 390 385 388 388 384 392 382 395 379 398 376 401 373 404 370 406 366 410 364 412 360 415 356 418 354 420 350 423 347 426 344 428 340 431 337 434 334 436 330 440 327 442 324 445 320 448 318 450 314 453 311 456 308 459 305 462 302 465 299 468 296 471 293 474 290 478 289 480M209 480 211 476 214 472 216 468 217 464 219 460 220 456 222 450 223 446 224 442 226 436 227 432 228 427 229 422 230 418 232 412 233 408 234 403 235 398 236 394 238 389 239 384 241 380 242 376 244 370 245 366 247 362 248 358 250 353 251 348 253 344 254 339 255 334 256 330 257 324 257 318 257 312 256 308 254 302 252 298 250 294 248 291 246 288 242 284 240 282 236 278 233 276 230 274 226 271 222 269 218 266 214 264 210 262 206 260 202 259 198 257 194 255 190 254 184 252 180 251 176 249 172 248 166 246 162 245 158 244 152 242 148 241 144 240 138 238 134 237 130 235 126 234 122 232 118 230 114 228 110 225 107 222 104 219 102 216 99 212 97 208 95 204 94 200 92 194 91 190 90 184 89 180 88 174 87 170 86 165 85 160 84 156 82 151 80 146 79 142 77 138 76 134 74 130 72 125 70 120 68 116 67 112 65 108 64 102 63 98 63 92 64 88 66 83 68 79 70 76 74 72 76 70 80 67 84 65 88 63 92 61 96 60 101 58 106 56 110 55 114 54 120 52 124 51 128 50 134 48 138 47 142 46 147 44 152 42 156 41 160 39 164 37 168 35 172 33 176 30 180 28 183 26 186 24 190 21 193 18 196 15 199 12 202 9 205 6 208 2 209 0M224 26 230 24 234 26 236 30 237 36 238 42 238 48 238 52 238 58 238 62 238 68 237 74 237 80 237 86 236 92 236 98 236 102 236 108 236 112 236 118 237 124 238 128 240 134 241 138 243 142 245 146 248 150 250 153 252 156 256 159 259 162 262 164 266 166 271 168 276 169 282 170 288 170 294 168 298 167 302 166 306 164 310 162 314 160 318 157 322 155 326 152 329 150 332 148 336 145 340 142 343 140 346 138 350 135 354 133 358 131 362 129 366 127 371 126 376 125 382 125 388 126 392 127 396 130 398 132 402 136 404 140 406 144 408 148 409 152 410 157 411 162 412 168 413 172 413 178 414 184 414 188 414 194 414 200 414 206 414 212 414 217 414 222 413 228 412 234 411 238 410 244 409 248 408 253 407 258 406 262 404 267 402 272 401 276 400 280 398 285 396 290 395 294 394 298 392 304 391 308 390 312 389 318 388 322 387 328 386 334 385 338 384 344 383 348 382 353 380 358 379 362 377 366 375 370 373 374 370 378 368 381 366 384 363 388 360 391 357 394 354 397 351 400 348 403 345 406 342 409 338 412 336 414 332 417 329 420 326 422 322 426 319 428 316 430 312 434 309 436 306 438 302 442 299 444 296 446 292 449 289 452 286 454 282 457 278 460 275 462 272 464 268 467 264 470 261 472 257 474 253 476 248 477 244 474 243 470 242 464 242 460 241 454 241 448 242 442 242 436 242 432 243 426 244 420 244 416 246 410 246 406 248 400 249 396 250 392 252 387 254 382 255 378 257 374 259 370 260 366 262 362 264 358 266 354 268 350 270 346 272 342 274 338 276 333 278 328 279 324 281 320 282 314 282 308 281 302 280 297 278 292 276 288 274 285 272 282 268 278 266 275 262 272 260 270 256 267 252 264 248 262 245 260 241 258 237 256 233 254 229 252 224 250 220 248 216 247 212 246 208 244 202 242 198 241 194 239 190 238 184 236 180 235 176 234 171 232 166 230 162 229 158 228 154 226 149 224 145 222 141 220 137 218 134 216 130 213 127 210 124 206 122 204 120 200 118 196 116 192 114 186 113 182 112 178 110 172 109 168 108 162 107 158 106 154 104 148 103 144 102 140 100 134 99 130 98 126 96 121 95 116 94 112 93 106 93 100 94 96 96 91 98 87 101 84 104 81 108 78 111 76 115 74 119 72 123 70 128 68 132 67 136 65 140 64 145 62 150 60 154 59 158 57 162 56 166 54 171 52 175 50 180 48 184 46 188 44 192 42 196 40 200 38 204 36 207 34 211 32 215 30 219 28 223 26 224 26M180 80 185 80 190 81 194 84 196 86 199 90 200 95 201 100 202 106 202 112 202 116 203 122 203 128 204 134 205 138 206 143 208 148 209 152 211 156 213 160 215 164 217 168 220 172 222 175 224 178 227 182 230 186 232 189 234 192 237 196 240 200 242 203 244 206 246 211 246 214 242 217 238 218 232 219 226 219 220 219 214 219 209 218 204 217 199 216 194 215 190 214 184 212 180 210 176 209 172 207 168 205 164 202 161 200 158 198 154 194 152 191 150 188 148 184 146 180 144 175 143 170 142 166 140 160 139 156 138 150 137 146 136 140 135 136 134 131 133 126 132 120 132 114 133 108 135 104 137 100 140 97 143 94 146 92 150 90 154 87 158 86 162 84 168 82 172 81 178 80 180 80M362 160 368 158 374 159 378 160 382 162 386 166 388 169 390 173 392 177 393 182 395 186 396 192 396 196 397 202 397 208 397 214 396 220 396 224 395 230 394 234 392 240 391 244 389 248 388 252 386 256 384 260 382 264 379 268 376 272 374 275 372 278 368 282 366 284 362 288 359 290 356 292 352 295 348 296 342 297 338 296 334 294 330 291 327 288 324 285 321 282 318 279 315 276 312 272 310 270 306 266 304 264 301 260 298 257 295 254 292 250 290 248 286 244 284 241 281 238 278 234 276 230 274 227 273 222 276 218 278 216 282 213 286 211 290 208 293 206 296 204 300 201 304 198 307 196 310 194 314 191 318 188 320 186 324 183 328 180 331 178 334 176 338 173 342 170 345 168 348 166 352 164 356 162 361 160 362 160M322 338 328 336 334 337 337 340 340 344 342 348 342 352 343 358 342 363 341 368 339 372 337 376 335 380 333 384 330 388 328 390 325 394 322 397 319 400 316 403 313 406 310 408 306 411 302 414 299 416 296 418 292 420 288 422 282 424 276 424 272 421 270 418 268 412 268 408 268 404 269 398 270 394 272 389 274 384 276 380 278 376 280 373 282 370 285 366 288 363 290 360 294 356 296 354 300 351 304 348 306 346 310 344 314 341 318 339 322 338%22/%3E%3C/svg%3E"); --chat-padrao-tam: 480px 480px; }
[data-fundo="esmeralda"] {
  --chat-padrao: url("../img/fundo-mata.svg"); --chat-padrao-tam: 420px 420px; --chat-padrao-cor: #6ee7b7; --chat-padrao-op: .045;
  --chat-bg: radial-gradient(ellipse 90% 60% at 0% 0%, rgba(16, 185, 129, .26), transparent 60%), radial-gradient(ellipse 70% 55% at 100% 100%, rgba(13, 148, 136, .2), transparent 62%), linear-gradient(160deg, #06281f 0%, #041a15 55%, #030f0d 100%);
}
[data-fundo="grafite"] {
  --chat-padrao: none; --chat-padrao-op: 0;
  --chat-bg: repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 9px), radial-gradient(ellipse 80% 55% at 50% 0%, rgba(148, 163, 184, .13), transparent 65%), linear-gradient(180deg, #171b22 0%, #0f1217 100%);
}
[data-fundo="topografia"] {
  --chat-padrao-cor: #5eead4; --chat-padrao-op: .13;
  --chat-bg: radial-gradient(ellipse 75% 55% at 15% 0%, rgba(20, 184, 166, .16), transparent 62%), radial-gradient(ellipse 65% 50% at 95% 100%, rgba(34, 197, 94, .1), transparent 60%), linear-gradient(170deg, #0b1d22 0%, #07141a 60%, #050e13 100%);
}
[data-fundo="terra"] {
  --chat-padrao-cor: #fdba74; --chat-padrao-op: .11;
  --chat-bg: radial-gradient(ellipse 75% 55% at 85% 0%, rgba(234, 88, 12, .2), transparent 62%), radial-gradient(ellipse 65% 50% at 0% 100%, rgba(202, 138, 4, .12), transparent 60%), linear-gradient(170deg, #241610 0%, #17100c 60%, #0f0a08 100%);
}
[data-fundo="meianoite"] {
  --chat-padrao: none; --chat-padrao-op: 0;
  --chat-bg: radial-gradient(rgba(165, 180, 252, .13) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(ellipse 70% 50% at 80% 0%, rgba(99, 102, 241, .28), transparent 62%), radial-gradient(ellipse 60% 45% at 5% 100%, rgba(14, 165, 233, .16), transparent 60%), linear-gradient(180deg, #0b1030 0%, #070a1f 60%, #05071a 100%);
}
[data-fundo="planta"] {
  --chat-padrao: none; --chat-padrao-op: 0;
  --chat-bg: linear-gradient(rgba(125, 211, 252, .11) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(125, 211, 252, .11) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(rgba(125, 211, 252, .045) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px) 0 0 / 24px 24px, radial-gradient(ellipse 80% 55% at 50% 0%, rgba(56, 189, 248, .16), transparent 65%), linear-gradient(180deg, #0a2540 0%, #071a2e 100%);
}
[data-fundo="bruma"] {
  --chat-padrao: none; --chat-padrao-op: 0;
  --chat-bg: radial-gradient(circle at 18% 22%, rgba(45, 212, 191, .2), transparent 34%), radial-gradient(circle at 82% 30%, rgba(96, 165, 250, .16), transparent 36%), radial-gradient(circle at 60% 88%, rgba(52, 211, 153, .14), transparent 38%), radial-gradient(circle at 8% 90%, rgba(167, 139, 250, .1), transparent 30%), linear-gradient(180deg, #0f1f2a 0%, #0a151d 100%);
}
[data-tema="claro"] [data-fundo="esmeralda"], [data-tema="claro"][data-fundo="esmeralda"] { --chat-padrao-cor: #047857; --chat-padrao-op: .07; --chat-bg: radial-gradient(ellipse 90% 60% at 0% 0%, rgba(16, 185, 129, .2), transparent 60%), linear-gradient(160deg, #e7f8f0, #d6f0e4); }
[data-tema="claro"] [data-fundo="grafite"], [data-tema="claro"][data-fundo="grafite"] { --chat-padrao-op: 0; --chat-bg: repeating-linear-gradient(135deg, rgba(15, 23, 42, .028) 0 1px, transparent 1px 9px), linear-gradient(180deg, #f1f3f6, #e6e9ee); }
[data-tema="claro"] [data-fundo="topografia"], [data-tema="claro"][data-fundo="topografia"] { --chat-padrao-cor: #0f766e; --chat-padrao-op: .16; --chat-bg: linear-gradient(170deg, #eef8f6, #e0f0ee); }
[data-tema="claro"] [data-fundo="terra"], [data-tema="claro"][data-fundo="terra"] { --chat-padrao-cor: #b45309; --chat-padrao-op: .16; --chat-bg: linear-gradient(170deg, #fbf3e7, #f3e6d3); }
[data-tema="claro"] [data-fundo="meianoite"], [data-tema="claro"][data-fundo="meianoite"] { --chat-padrao-op: 0; --chat-bg: radial-gradient(rgba(79, 70, 229, .16) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(180deg, #eef0ff, #e2e6fb); }
[data-tema="claro"] [data-fundo="planta"], [data-tema="claro"][data-fundo="planta"] { --chat-padrao-op: 0; --chat-bg: linear-gradient(rgba(2, 132, 199, .14) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(2, 132, 199, .14) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(rgba(2, 132, 199, .06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(2, 132, 199, .06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(180deg, #f0f8ff, #e2f0fb); }
[data-tema="claro"] [data-fundo="bruma"], [data-tema="claro"][data-fundo="bruma"] { --chat-padrao-op: 0; --chat-bg: radial-gradient(circle at 18% 22%, rgba(45, 212, 191, .22), transparent 34%), radial-gradient(circle at 82% 30%, rgba(96, 165, 250, .2), transparent 36%), radial-gradient(circle at 60% 88%, rgba(52, 211, 153, .18), transparent 38%), linear-gradient(180deg, #f2f7f9, #e6eef2); }
.ap-fundos { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.msg:has(.msg-editada) .msg-texto::after { width: 96px; }

/* v41 — entrada com os dados já preenchidos + "Editar" visível fora do prazo */
.lf-lembrado { margin: -8px 0 18px; font-size: 12.5px; line-height: 1.5; color: #9fb0cc; }
.lf-lembrado b { color: #d0dbec; }
.lf-lembrado a { color: var(--neon, #34d399); font-weight: 700; text-decoration: none; white-space: nowrap; }
.lf-lembrado a:hover { text-decoration: underline; }
.menu-msg button.fora-do-prazo { opacity: .5; }
.menu-msg button.fora-do-prazo small { margin-left: auto; padding-left: 10px; font-size: 10.5px; font-weight: 700; opacity: .9; }

/* =====================================================================
   v42 — capivara animada (static/js/capivara.js separa o desenho em partes)
   ===================================================================== */
.cap { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cap-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chat-vazio-logo .cap { width: 100%; animation: flutuar 6s ease-in-out infinite; }
.lf-capivara.cap { animation: none; }
.cap-t { transform-origin: 300px 356px; animation: capRespira 4.4s ease-in-out infinite; }
.cap-cab { transform-origin: 398px 198px; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.cap-olho { transform-origin: 430px 144px; transition: transform .09s ease; }
.cap-orelha { transform-origin: 372px 117px; }
.cap-pf { transform-origin: 362px 293px; }
.cap-acena { transform-origin: 370px 291px; filter: brightness(1.14) saturate(1.08); }
.cap-pt { transform-origin: 140px 302px; }
.cap-acena { opacity: 0; }
@keyframes capRespira { 0%, 100% { transform: none; } 50% { transform: scale(1.012, .986); } }
.cap.pisca .cap-olho, .cap.nao .cap-olho, .cap.tampa .cap-olho { transform: scaleY(.1); }
.cap.orelha .cap-orelha { animation: capOrelha .6s ease 1; }
@keyframes capOrelha { 0%, 100% { transform: none; } 30% { transform: rotate(-16deg); } 60% { transform: rotate(9deg); } }

/* tchau: levanta o focinho, arregala o olho e acena com a pata da frente */
.cap.acena .cap-cab { animation: capOlha 2.7s ease-in-out 1; }
.cap.acena .cap-olho { animation: capOlhao 2.7s ease-in-out 1; }
.cap.acena .cap-acena { animation: capAcena 2.7s ease-in-out 1; }
@keyframes capOlha { 0%, 100% { transform: none; } 14%, 84% { transform: rotate(-11deg); } 49% { transform: rotate(-8deg); } }
@keyframes capOlhao { 0%, 100% { transform: none; } 14%, 84% { transform: scale(1.3); } }
@keyframes capAcena {
  0% { opacity: 0; transform: none; } 3% { opacity: 1; transform: none; }
  17% { transform: rotate(-118deg) scale(1.14); } 28% { transform: rotate(-152deg) scale(1.14); } 39% { transform: rotate(-112deg) scale(1.14); }
  50% { transform: rotate(-152deg) scale(1.14); } 61% { transform: rotate(-112deg) scale(1.14); } 72% { transform: rotate(-150deg) scale(1.14); }
  82% { transform: rotate(-118deg) scale(1.14); } 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; }
}
/* "agora não": fecha os olhos e balança a cabeça */
.cap.nao .cap-cab { animation: capNao 2.1s ease-in-out 1; }
@keyframes capNao {
  0%, 100% { transform: none; }
  10% { transform: rotate(-4deg) scaleX(.9); } 24% { transform: rotate(3deg) scaleX(1.03); }
  38% { transform: rotate(-4deg) scaleX(.9); } 52% { transform: rotate(3deg) scaleX(1.03); }
  66% { transform: rotate(-4deg) scaleX(.9); } 82% { transform: rotate(2deg) scaleX(1); }
}
/* balãozinho */
.cap-balao {
  position: absolute; left: 86%; top: -4%; z-index: 3; padding: 6px 11px; border-radius: 14px 14px 14px 4px; white-space: nowrap; pointer-events: none;
  font-size: 12.5px; font-weight: 800; color: #0b2a17; background: #eafff3; box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(6px) scale(.7); transform-origin: 0 100%; transition: opacity .18s, transform .28s cubic-bezier(.3, 1.6, .5, 1);
}
.cap-balao.vis { opacity: 1; transform: none; }
@media (max-width: 560px) { .cap-balao { left: 62%; top: -18%; font-size: 12px; } }

/* tela de entrada: chega andando, se apoia e acompanha os campos */
.lf-capivara.cap.anda { animation: capVem 2.7s cubic-bezier(.33, .08, .3, 1) 1 both; }
@keyframes capVem { 0% { transform: translateX(var(--cap-de, -560px)); } 100% { transform: none; } }
.cap.anda .cap-t { animation: capPasso .3s ease-in-out infinite alternate; }
.cap.anda .cap-pf { animation: capPerna .3s ease-in-out infinite alternate; }
.cap.anda .cap-pt { animation: capPerna .3s ease-in-out infinite alternate-reverse; }
@keyframes capPasso { from { transform: translateY(0) rotate(-1.4deg); } to { transform: translateY(-7px) rotate(1.4deg); } }
@keyframes capPerna { from { transform: rotate(-19deg); } to { transform: rotate(19deg); } }
.cap.apoia .cap-t { animation: capApoia 5s ease-in-out infinite; transform-origin: 140px 356px; }
@keyframes capApoia { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(7.4deg) scale(1.01, .99); } }
.cap.apoia .cap-pf { transform: rotate(-14deg); transition: transform .5s ease; }
.cap.espia .cap-cab { transform: rotate(13deg); }
.cap.tampa .cap-cab { transform: rotate(-12deg); }
.cap.pula { animation: capPula .5s ease 1; }
@keyframes capPula { 0%, 100% { transform: none; } 40% { transform: translateY(-14px); } 70% { transform: translateY(2px); } }
@media (max-width: 900px) { .lf-capivara.cap.anda { --cap-de: -110vw; } }
@media (prefers-reduced-motion: reduce) { .cap, .cap * { animation: none !important; transition: none !important; } }

/* v43 — transcrição que recolhe + duração do áudio */
button.transc-tit { width: 100%; padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .85; }
button.transc-tit > span { display: inline-flex; align-items: center; gap: 5px; }
button.transc-tit em { margin-left: auto; font-style: normal; font-size: 10.5px; letter-spacing: .2px; text-transform: none; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); transition: background .15s; }
button.transc-tit:hover em { background: rgba(255, 255, 255, .2); }
button.transc-tit i { display: inline-flex; transition: transform .2s; transform: rotate(180deg); }
button.transc-tit i svg { width: 12px; height: 12px; }
.transc.recolhida button.transc-tit i { transform: none; }
.transc.recolhida .transc-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; opacity: .9; }
.transc.recolhida { cursor: default; }
[data-tema="claro"] .msg-cliente button.transc-tit em { background: rgba(15, 27, 45, .08); }
.audio-tempo { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =====================================================================
   v44 — Capivara Run (o joguinho da hora do intervalo)
   ===================================================================== */
.jg { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; max-width: 1280px; }
.jg-palco { min-width: 0; }
.jg-tela {
  position: relative; width: 100%; aspect-ratio: 16 / 7.6; max-height: 68vh; border-radius: 22px; overflow: hidden; background: #0b1030;
  border: 1px solid var(--linha2); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(52, 211, 153, .08); touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer;
}
.jg-tela canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jg-hud { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; }
.jg-placa { display: flex; flex-direction: column; line-height: 1.05; padding: 7px 13px; border-radius: 14px; color: #fff; background: rgba(4, 12, 24, .5); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .14); }
.jg-placa.dir { text-align: right; margin-right: 84px; }
.jg-placa small { font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; opacity: .75; }
.jg-placa b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.jg-placa b.recorde { color: #fde047; text-shadow: 0 0 18px rgba(253, 224, 71, .55); }
.jg-combo { padding: 6px 13px; border-radius: 99px; font-size: 12.5px; font-weight: 800; color: #052e16; background: linear-gradient(135deg, #86efac, #34d399); box-shadow: 0 6px 18px rgba(52, 211, 153, .45); animation: jgPula .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes jgPula { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.jg-botoes { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.jg-botoes button { width: 36px; height: 36px; border-radius: 12px; font-size: 15px; color: #fff; background: rgba(4, 12, 24, .5); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; transition: .15s; }
.jg-botoes button:hover { background: rgba(4, 12, 24, .75); transform: translateY(-1px); }
.jg-capa { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; background: radial-gradient(ellipse at center, rgba(4, 10, 20, .5), rgba(4, 10, 20, .74)); backdrop-filter: blur(3px); cursor: default; animation: jgEntra .28s ease; }
.jg-capa.leve { background: rgba(4, 10, 20, .5); }
@keyframes jgEntra { from { opacity: 0; } to { opacity: 1; } }
.jg-cartao { width: min(420px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px; border-radius: 22px; text-align: center; color: #f1f5f9; background: linear-gradient(160deg, rgba(15, 30, 44, .94), rgba(8, 18, 28, .96)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: jgSobe .4s cubic-bezier(.2, 1.2, .3, 1); }
.jg-cartao.pequeno { width: min(260px, 100%); }
@keyframes jgSobe { from { transform: translateY(18px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.jg-selo { display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #86efac; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3); }
.jg-cartao h2 { margin: 10px 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; }
.jg-cartao h2 em { font-style: normal; background: linear-gradient(120deg, #4ade80, #facc15); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jg-cartao p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #b8c7da; }
.jg-como { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 5px; font-size: 12.5px; color: #cbd5e1; }
.jg-tela kbd, .jg-dica kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; font: inherit; font-size: 11px; font-weight: 800; color: #e2e8f0; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.jg-bt { width: 100%; justify-content: center; padding: 13px 18px; font-size: 15px; }
.jg-resultado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 10px; }
.jg-resultado > div { padding: 12px 8px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.jg-resultado small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; }
.jg-resultado b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
#jg-fim.recorde .jg-resultado > div:first-child { border-color: rgba(253, 224, 71, .5); background: rgba(253, 224, 71, .08); }
#jg-fim.recorde .jg-resultado > div:first-child b { color: #fde047; }
.jg-fim-pos { min-height: 20px; font-weight: 700; color: #86efac !important; }
.jg-dica { margin: 12px 4px 0; font-size: 12.5px; color: var(--txt3); text-align: center; }
[data-tema="claro"] .jg-dica kbd { color: #334155; background: rgba(15, 27, 45, .06); border-color: rgba(15, 27, 45, .14); }
/* ranking */
.jg-rank { border-radius: 22px; background: var(--card); border: 1px solid var(--linha2); overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .2); }
.jg-rank-topo { padding: 16px 16px 12px; border-bottom: 1px solid var(--linha); }
.jg-rank-topo h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15.5px; font-weight: 800; }
.jg-rank-topo h3 svg { width: 18px; height: 18px; color: #facc15; }
.jg-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: var(--card2); }
.jg-abas button { padding: 8px; border-radius: 9px; border: none; font-size: 12.5px; font-weight: 800; color: var(--txt2); background: none; cursor: pointer; transition: .15s; }
.jg-abas button.ativo { color: #04210f; background: var(--neon); box-shadow: 0 4px 12px rgba(52, 211, 153, .3); }
.jg-lista { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; max-height: 470px; overflow-y: auto; }
.jg-linha { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; transition: background .15s; animation: jgSobe .35s ease both; }
.jg-linha:hover { background: var(--card2); }
.jg-linha.eu { background: rgba(52, 211, 153, .1); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .4); }
.jg-pos { flex: none; width: 30px; text-align: center; font-size: 13px; font-weight: 800; color: var(--txt3); }
.jg-linha.top .jg-pos { font-size: 20px; }
.jg-linha .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 13px; flex: none; }
.jg-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.jg-nome b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-nome b em { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; color: #04210f; background: var(--neon); margin-left: 4px; vertical-align: 1px; }
.jg-nome small { font-size: 11px; color: var(--txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-pts { flex: none; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--txt); }
.jg-linha.top .jg-pts { color: #facc15; }
[data-tema="claro"] .jg-linha.top .jg-pts { color: #b45309; }
.jg-sep { text-align: center; color: var(--txt3); line-height: 1; padding: 2px 0; }
.jg-vazio { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--txt3); line-height: 1.5; }
.jg-rank-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px 14px; border-top: 1px solid var(--linha); font-size: 11.5px; color: var(--txt3); }
.jg-link { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--txt2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.jg-link:hover { color: var(--txt); }
.jg-desligado { grid-column: 1 / -1; text-align: center; padding: 60px 20px; }
.jg-desligado img { width: 200px; opacity: .8; }
@media (max-width: 1080px) { .jg { grid-template-columns: 1fr; } .jg-lista { max-height: none; } }
@media (max-width: 640px) {
  .jg.conteudo-pagina { padding: 12px; gap: 14px; }
  .jg-tela { aspect-ratio: 4 / 3.3; border-radius: 18px; max-height: none; }
  .jg-placa b { font-size: 19px; } .jg-placa { padding: 6px 10px; } .jg-placa.dir { margin-right: 80px; }
  .jg-cartao { padding: 16px 16px; } .jg-cartao h2 { font-size: 24px; } .jg-como { display: none; } .jg-resultado b { font-size: 24px; }
  .jg-dica { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) { .jg-tela { aspect-ratio: auto; height: 78vh; } }

/* =====================================================================
   v45 — Capivara Run: horário liberado, tela cheia, licenças, ajudas da equipe, conquistas
   ===================================================================== */
.nav-jogo svg { color: #facc15; filter: drop-shadow(0 0 7px rgba(250, 204, 21, .45)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.nav-jogo:hover svg { transform: rotate(-12deg) scale(1.15); }
.nav-jogo.ativo svg { color: #fde047; }
.nav-jogo.fechado svg { color: var(--txt3); filter: none; }
.nav-cadeado { margin-left: auto; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: #f59e0b; background: rgba(245, 158, 11, .14); }
.nav-jogo .nav-cadeado svg { width: 11px; height: 11px; color: #f59e0b; filter: none; }
[data-menu="recolhido"] .nav-jogo .nav-cadeado { position: absolute; top: 4px; right: 5px; width: 16px; height: 16px; margin: 0; }
[data-menu="recolhido"] .nav-jogo .nav-cadeado svg { width: 9px; height: 9px; }

.jg-hud { align-items: flex-start; }
.jg-esq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.jg-meio { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jg-placa.dir { margin-right: 126px; }
.jg-lic { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 12px; background: rgba(4, 12, 24, .5); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .14); }
.jg-lic span { min-width: 26px; padding: 3px 5px; border-radius: 7px; text-align: center; font-size: 10.5px; font-weight: 800; color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); transition: .25s; }
.jg-lic span.ok:nth-child(1) { color: #082f49; background: #38bdf8; box-shadow: 0 0 12px rgba(56, 189, 248, .6); }
.jg-lic span.ok:nth-child(2) { color: #422006; background: #facc15; box-shadow: 0 0 12px rgba(250, 204, 21, .6); }
.jg-lic span.ok:nth-child(3) { color: #052e16; background: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, .6); }
.jg-lic b { font-size: 11px; font-weight: 800; color: #fde047; }
.jg-condic { padding: 5px 9px; border-radius: 11px; font-size: 11.5px; font-weight: 800; color: #e2e8f0; background: rgba(4, 12, 24, .5); border: 1px solid rgba(255, 255, 255, .14); }
.jg-condic.ok { color: #052e16; background: #86efac; border-color: transparent; }
.jg-poderes { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.jg-poderes span { padding: 5px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; color: #0b1626; background: #fde68a; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); white-space: nowrap; animation: jgPula .3s cubic-bezier(.3, 1.6, .5, 1); }
.jg-cartao.largo { width: min(470px, 100%); }
.jg-cartao.largo p { margin-bottom: 10px; }
.jg-guia { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 10px; text-align: left; }
.jg-guia > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 7px 9px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.jg-guia i { grid-row: span 2; font-style: normal; font-size: 18px; }
.jg-guia b { font-size: 12px; font-weight: 800; color: #f1f5f9; line-height: 1.2; }
.jg-guia span { font-size: 10.5px; color: #94a3b8; line-height: 1.25; }
.jg-missoes-cx { text-align: left; margin-bottom: 10px; }
.jg-missoes-cx small, .jg-horas-cx small { display: block; margin-bottom: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; }
.jg-missoes { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; text-align: left; }
.jg-missoes li { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 10px; font-size: 12px; color: #cbd5e1; background: rgba(255, 255, 255, .04); }
.jg-missoes li i { font-style: normal; font-size: 12px; }
.jg-missoes li span { flex: 1; min-width: 0; }
.jg-missoes li b { font-size: 11px; font-variant-numeric: tabular-nums; color: #94a3b8; }
.jg-missoes li.ok { color: #bbf7d0; background: rgba(52, 211, 153, .1); }
.jg-missoes li.ok b { color: #86efac; }
.jg-teclas { margin: 9px 0 0 !important; font-size: 11.5px !important; color: #94a3b8 !important; }
.jg-admin-aviso { padding: 6px 10px; border-radius: 10px; font-size: 11.5px !important; color: #fde68a !important; background: rgba(250, 204, 21, .1); border: 1px solid rgba(250, 204, 21, .3); }
/* fora do horário */
.jg-capa.jg-bloq { background: radial-gradient(ellipse at 50% 30%, rgba(60, 40, 6, .55), rgba(4, 10, 20, .86)); }
.jg-cadeado { width: 76px; height: 76px; margin: 0 auto 4px; animation: jgCadeado 3.2s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgba(245, 158, 11, .45)); }
.jg-cadeado svg { width: 100%; height: 100%; }
@keyframes jgCadeado { 0%, 100% { transform: rotate(0) translateY(0); } 8% { transform: rotate(-9deg); } 16% { transform: rotate(8deg); } 24% { transform: rotate(-5deg); } 32% { transform: rotate(0); } 60% { transform: translateY(-5px); } }
.jg-conta { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin: 12px 0 10px; }
.jg-conta > div { padding: 10px 8px; border-radius: 14px; background: rgba(250, 204, 21, .08); border: 1px solid rgba(250, 204, 21, .28); }
.jg-conta small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fcd34d; }
.jg-conta b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fef3c7; letter-spacing: -.3px; }
.jg-horas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.jg-horas span { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #d1fae5; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3); white-space: nowrap; }
.jg-horas.pequeno { justify-content: flex-end; }
.jg-horas.pequeno span { font-size: 10.5px; padding: 2px 8px; color: var(--txt2); background: var(--card2); border-color: var(--linha2); }
/* fim de jogo */
.jg-resumo { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.jg-resumo span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; font-size: 11.5px; color: #cbd5e1; background: rgba(255, 255, 255, .06); }
.jg-resumo i { font-style: normal; } .jg-resumo b { color: #fff; }
.jg-novas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.jg-sabia { margin: 0 0 12px; padding: 9px 11px; border-radius: 12px; text-align: left; font-size: 12px; line-height: 1.45; color: #cbd5e1; background: rgba(56, 189, 248, .08); border: 1px solid rgba(56, 189, 248, .25); }
.jg-sabia b { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #7dd3fc; margin-bottom: 2px; }
/* conquistas */
.jg-conq-cx { margin-top: 18px; padding: 14px 16px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--linha2); }
.jg-conq-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jg-conq-topo h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
.jg-conq-topo span { font-size: 12px; font-weight: 800; color: var(--txt3); }
.jg-conq-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.jg-conq { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; font-size: 12px; color: var(--txt3); background: var(--card2); border: 1px solid var(--linha); filter: grayscale(1); opacity: .6; min-width: 0; }
.jg-conq i { font-style: normal; font-size: 17px; flex: none; }
.jg-conq b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg-conq.ok { filter: none; opacity: 1; color: var(--txt); border-color: rgba(250, 204, 21, .4); background: linear-gradient(135deg, rgba(250, 204, 21, .12), rgba(52, 211, 153, .08)); }
.jg-conq.nova { animation: jgNova 1s cubic-bezier(.3, 1.6, .5, 1) 2; box-shadow: 0 0 0 2px rgba(250, 204, 21, .5), 0 8px 22px rgba(250, 204, 21, .25); }
.jg-novas .jg-conq { color: #fef3c7; background: rgba(250, 204, 21, .14); }
@keyframes jgNova { 0%, 100% { transform: none; } 40% { transform: scale(1.07); } }
/* admin */
.jg-admin { border-top: 1px solid var(--linha); padding: 10px 16px 14px; font-size: 12.5px; }
.jg-admin summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 800; color: var(--txt2); list-style: none; }
.jg-admin summary::-webkit-details-marker { display: none; }
.jg-admin summary svg { width: 14px; height: 14px; }
.jg-admin form { display: grid; gap: 7px; margin: 10px 0 10px; }
.jg-admin label { font-size: 11px; font-weight: 800; color: var(--txt3); text-transform: uppercase; letter-spacing: .6px; }
.jg-admin input[type="text"] { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--linha2); background: var(--card2); color: var(--txt); font: inherit; font-size: 13px; }
.jg-admin .jg-check { display: flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12.5px; color: var(--txt2); }
/* tela cheia (a de verdade e a "de mentira", onde o navegador não deixa) */
.jg-tela:fullscreen, .jg-tela:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; border: none; }
.jg-tela.jg-cheia { position: fixed; inset: 0; z-index: 4000; width: 100vw; height: 100vh; height: 100dvh; max-height: none; aspect-ratio: auto; border-radius: 0; border: none; }
html.jg-sem-rolagem, html.jg-sem-rolagem body { overflow: hidden; }
@media (max-width: 760px) {
  .jg-placa.dir { margin-right: 0; margin-top: 44px; }
  .jg-botoes button { width: 34px; height: 34px; }
  .jg-guia { grid-template-columns: 1fr; } .jg-guia > div:nth-child(n+2) { display: none; }
  .jg-cartao.largo { padding: 14px 14px; }
  .jg-missoes li { font-size: 11.5px; padding: 4px 8px; }
  .jg-conta b { font-size: 19px; }
  .jg-tela { aspect-ratio: 4 / 4.6; }
  .jg-lic span { min-width: 22px; font-size: 10px; padding: 3px 4px; }
  .jg-teclas { display: none; }
}
@media (max-width: 760px) and (max-height: 620px) { .jg-missoes-cx, .jg-sabia { display: none; } }

/* cartões em duas colunas (cabem na tela do jogo sem cortar o botão) */
.jg-cartao.duplo { width: min(720px, 100%); display: grid; grid-template-columns: 1fr 1.12fr; gap: 20px; align-items: center; padding: 20px 22px; }
.jg-cartao.duplo .jg-col { min-width: 0; }
.jg-cartao.duplo .jg-missoes, .jg-cartao.duplo .jg-missoes-cx, .jg-cartao.duplo .jg-sabia, .jg-cartao.duplo .jg-guia { margin-bottom: 0; }
.jg-cartao.duplo .jg-col > * + * { margin-top: 9px; }
.jg-cartao.duplo .jg-col > h2 { margin-top: 8px; }
.jg-cartao.duplo .jg-col > p { margin-bottom: 0; }
.jg-cartao.duplo .jg-guia { margin-top: 0; }
#jg-fim .jg-missoes li { padding: 3px 9px; font-size: 11.5px; }
#jg-fim .jg-novas .jg-conq { padding: 4px 9px; font-size: 11px; gap: 5px; animation-iteration-count: 1; box-shadow: 0 0 0 1px rgba(250, 204, 21, .5); }
#jg-fim .jg-novas .jg-conq i { font-size: 13px; }
#jg-fim .jg-novas { margin-bottom: 0; gap: 5px; }
#jg-fim .jg-novas::before { content: "Conquistas novas"; flex: 0 0 100%; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fcd34d; }
.jg-capa.jg-bloq h2 { font-size: clamp(21px, 2.6vw, 27px); text-wrap: balance; }
.jg-conq { align-items: center; }
.jg-conq b { white-space: normal; line-height: 1.2; overflow: visible; }
.jg-conq-lista { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
@media (max-width: 1080px) {
  .jg { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
  .jg-palco { display: contents; }
  .jg-tela { order: 1; } .jg-dica { order: 2; margin-top: -6px; } .jg-rank { order: 3; } .jg-conq-cx { order: 4; margin-top: 0; }
}
@media (max-width: 760px) {
  .jg-cartao.duplo { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .jg-cartao.duplo .jg-col > p { font-size: 12.5px; line-height: 1.4; }
  #jg-fim .jg-missoes { display: none; }
  .jg-conq-lista { grid-template-columns: 1fr 1fr; }
  .jg-tela { aspect-ratio: 4 / 4.9; }
}

/* =====================================================================
   v46 — Capivara Run: a equipe no jogo, modos, rival, conquistas por nível e visuais
   ===================================================================== */
.jg-modo-hud { padding: 5px 9px; border-radius: 11px; font-size: 10.5px; font-weight: 900; letter-spacing: .6px; border: 1px solid transparent; }
.jg-modo-hud.fiscal { color: #431407; background: #fdba74; box-shadow: 0 0 14px rgba(249, 115, 22, .5); }
.jg-modo-hud.desafio { color: #172554; background: #93c5fd; }
.jg-poderes span.perigo { color: #fff; background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: 0 4px 16px rgba(239, 68, 68, .45); }
.jg-rival { padding: 4px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 800; color: #fef3c7; background: rgba(4, 12, 24, .55); border: 1px solid rgba(253, 224, 71, .4); white-space: nowrap; backdrop-filter: blur(6px); }
.jg-tela.fiscal { box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 2px rgba(249, 115, 22, .55); }
/* modos na capa */
.jg-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jg-modos button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; cursor: pointer; color: #cbd5e1; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font: inherit; transition: .15s; }
.jg-modos button b { font-size: 12px; font-weight: 800; color: #f1f5f9; }
.jg-modos button small { font-size: 9.5px; color: #94a3b8; line-height: 1.2; }
.jg-modos button:hover { background: rgba(255, 255, 255, .09); }
.jg-modos button.ativo { border-color: #34d399; background: rgba(52, 211, 153, .14); box-shadow: inset 0 0 0 1px #34d399; }
.jg-modos button[data-jg-modo="desafio"].ativo { border-color: #60a5fa; background: rgba(96, 165, 250, .14); box-shadow: inset 0 0 0 1px #60a5fa; }
.jg-modos button[data-jg-modo="fiscal"].ativo { border-color: #fb923c; background: rgba(249, 115, 22, .16); box-shadow: inset 0 0 0 1px #fb923c; }
.jg-modos button.trancado { opacity: .55; }
.jg-abas { grid-template-columns: 1fr 1fr 1fr; }
/* painéis abaixo do jogo */
.jg-extras { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 18px; }
.jg-cx { padding: 14px 16px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--linha2); min-width: 0; }
.jg-cx-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.jg-cx-topo h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
.jg-cx-topo small { font-size: 11px; color: var(--txt3); }
.jg-equipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.jg-pessoa { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px 8px; border-radius: 14px; background: var(--card2); border: 1px solid var(--linha); min-width: 0; }
.jg-pessoa.chefe { background: linear-gradient(180deg, rgba(249, 115, 22, .1), var(--card2)); }
.jg-pessoa canvas { width: 64px; height: 72px; }
.jg-pessoa b { font-size: 12.5px; font-weight: 800; }
.jg-pessoa small { font-size: 10px; line-height: 1.25; color: var(--txt3); }
.jg-ajudas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.jg-ajudas span { padding: 4px 9px; border-radius: 99px; font-size: 11px; color: var(--txt2); background: var(--card2); border: 1px solid var(--linha); }
.jg-visuais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.jg-visual { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--txt); background: var(--card2); border: 1px solid var(--linha); transition: .15s; min-width: 0; }
.jg-visual i { font-style: normal; font-size: 21px; line-height: 1.1; }
.jg-visual b { font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.jg-visual small { font-size: 9.5px; color: var(--txt3); line-height: 1.2; }
.jg-visual:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--linha2); }
.jg-visual.ativo { border-color: #34d399; box-shadow: inset 0 0 0 1px #34d399; background: rgba(52, 211, 153, .1); }
.jg-visual.trancado { cursor: not-allowed; opacity: .55; }
/* conquistas por nível */
.jg-conq-progresso { height: 6px; border-radius: 99px; background: var(--card2); overflow: hidden; margin-bottom: 11px; }
.jg-conq-progresso i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #34d399, #facc15, #f472b6); transition: width .6s ease; }
.jg-conq-lista { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.jg-conq b { display: flex; flex-direction: column; min-width: 0; }
.jg-conq b small { font-size: 10px; font-weight: 500; color: var(--txt3); line-height: 1.25; }
.jg-conq.ok.n1 { border-color: rgba(217, 119, 6, .45); }
.jg-conq.ok.n2 { border-color: rgba(148, 163, 184, .6); background: linear-gradient(135deg, rgba(148, 163, 184, .14), rgba(52, 211, 153, .06)); }
.jg-conq.ok.n3 { border-color: rgba(250, 204, 21, .6); background: linear-gradient(135deg, rgba(250, 204, 21, .16), rgba(52, 211, 153, .06)); }
.jg-conq.ok.n4 { border-color: rgba(244, 114, 182, .7); background: linear-gradient(135deg, rgba(244, 114, 182, .18), rgba(139, 92, 246, .14)); box-shadow: 0 0 18px rgba(244, 114, 182, .18); }
#jg-fim .jg-novas .jg-conq b small { display: none; }
@media (max-width: 1080px) { .jg-extras { order: 4; margin-top: 0; } .jg-conq-cx { order: 5; } }
@media (max-width: 760px) {
  .jg-extras { grid-template-columns: 1fr; }
  .jg-equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jg-modos button { padding: 7px 2px; } .jg-modos button small { font-size: 9px; }
  .jg-rival { font-size: 10.5px; }
  .jg-conq-lista { grid-template-columns: 1fr; }
}
.jg-modos.mini button { padding: 6px 4px; } .jg-modos.mini button small { display: none; } .jg-modos.mini button b { font-size: 11.5px; }
.jg-poderes span { animation: none; }

/* =====================================================================
   v47 — Capivara Run: liberar agora (admin), acessório + efeito
   ===================================================================== */
.jg-liberar { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--linha); background: linear-gradient(135deg, rgba(250, 204, 21, .1), rgba(52, 211, 153, .06)); }
.jg-liberar-topo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 9px; }
.jg-liberar-topo b { font-size: 13.5px; font-weight: 800; }
.jg-liberar-topo small { font-size: 11.5px; color: var(--txt3); line-height: 1.35; }
.jg-liberar-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jg-liberar-bts button { padding: 8px 6px; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; color: #422006; background: #fde047; border: none; transition: .15s; }
.jg-liberar-bts button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(250, 204, 21, .3); }
.jg-liberar.ativo { background: linear-gradient(135deg, rgba(52, 211, 153, .18), rgba(52, 211, 153, .05)); }
.jg-liberar.ativo .jg-liberar-topo small { color: #34d399; font-weight: 700; }
.jg-liberar.ativo .jg-liberar-bts button { color: var(--txt); background: var(--card2); border: 1px solid var(--linha2); }
.jg-liberar-parar { width: 100%; margin-top: 7px; padding: 8px; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; color: #fecaca; background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .4); }
.jg-selo.liberado { margin-left: 4px; color: #fde68a; background: rgba(250, 204, 21, .12); border-color: rgba(250, 204, 21, .35); }
.jg-liberado-aviso { font-size: 11px; font-weight: 700; color: #34d399; }
.jg-vis-titulo { margin: 2px 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--txt3); }
.jg-vis-titulo small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.jg-vis-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-bottom: 10px; }
.jg-visuais { display: block; }
.jg-visual.trancado i { filter: grayscale(1); }

/* =====================================================================
   v48 — Esqueci minha senha (entrada) + link de senha nova (admin)
   ===================================================================== */
.lf-esqueci { font-size: 13.5px; font-weight: 700; color: #6ee7b7; text-decoration: none; white-space: nowrap; }
.lf-esqueci:hover { color: #a7f3d0; text-decoration: underline; text-underline-offset: 3px; }
.lf-ok { text-align: left; animation: jgSobe .45s cubic-bezier(.2, 1.2, .3, 1); }
.lf-ok-ic { width: 64px; height: 64px; display: grid; place-items: center; font-size: 32px; border-radius: 20px; margin-bottom: 14px; background: linear-gradient(135deg, rgba(52, 211, 153, .2), rgba(56, 189, 248, .15)); border: 1px solid rgba(52, 211, 153, .35); box-shadow: 0 10px 30px rgba(52, 211, 153, .18); }
.lf-passos { margin: 4px 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; }
.lf-passos li { position: relative; padding: 10px 12px 10px 38px; border-radius: 12px; font-size: 14px; color: #c7d4e8; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); counter-increment: passo; }
.lf-passos { counter-reset: passo; }
.lf-passos li::before { content: counter(passo); position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; color: #04210f; background: #34d399; }
.lf-btn.lf-btn-sec { background: rgba(255, 255, 255, .06); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; text-decoration: none; }
a.lf-btn { text-decoration: none; }
.lf-forca { display: flex; align-items: center; gap: 8px; margin-top: 7px; height: 14px; }
.lf-forca i { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.lf-forca i::after { content: ""; position: absolute; inset: 0; width: 0; border-radius: 99px; transition: width .3s, background .3s; }
.lf-forca.n1 i::after { width: 25%; background: #f87171; } .lf-forca.n2 i::after { width: 50%; background: #fbbf24; }
.lf-forca.n3 i::after { width: 75%; background: #a3e635; } .lf-forca.n4 i::after { width: 100%; background: #34d399; }
.lf-forca span { min-width: 120px; font-size: 11.5px; font-weight: 700; color: #94a3b8; text-align: right; }
.lf-dica.ok { color: #34d399; font-weight: 700; } .lf-dica.erro { color: #fca5a5; font-weight: 700; }
/* admin */
.painel-cabeca-ic.rosa { color: #f472b6; background: rgba(244, 114, 182, .1); border-color: rgba(244, 114, 182, .3); }
.painel-cabeca .cnt.rosa { color: #f472b6; background: rgba(244, 114, 182, .1); border-color: rgba(244, 114, 182, .3); }
.painel-senha { border-color: rgba(244, 114, 182, .3); }
.ed-link-senha { margin-top: 7px; padding: 0; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--neon); cursor: pointer; text-align: left; }
.ed-link-senha:hover { text-decoration: underline; text-underline-offset: 3px; }
.modal-link-senha { width: min(520px, calc(100vw - 32px)); padding: 20px 22px 22px; }
.ls-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ls-topo > div { flex: 1; min-width: 0; }
.ls-topo h3 { margin: 0; font-size: 17px; font-weight: 800; }
.ls-topo small { font-size: 12.5px; color: var(--txt3); }
.ls-ic { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; border-radius: 14px; background: rgba(244, 114, 182, .12); border: 1px solid rgba(244, 114, 182, .3); }
.ls-link { display: flex; gap: 8px; }
.ls-link input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--linha2); background: var(--card2); color: var(--txt); font: inherit; font-size: 13px; }
.ls-dica { margin: 10px 0 16px; font-size: 13px; line-height: 1.5; color: var(--txt2); }
.ls-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-whats { justify-content: center; color: #fff; background: #25d366; border-color: transparent; text-decoration: none; }
.btn-whats:hover { background: #1ebe57; }
.btn-whats svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .ls-botoes { grid-template-columns: 1fr; } .ls-link { flex-direction: column; } .lf-linha { gap: 8px; } }
.modal.modal-link-senha { max-width: 520px; }