:root {
  /* Paleta oficial Ao Norte (mesmos valores do site aonorterh.com) */
  --navy: #0f2b48;
  --navy-2: #1e4d6b;
  --navy-deep: #0b1f3a;
  --cyan-brand: #00a8cc;
  --cyan-bright: #00d4ff;

  /* Tema claro (padrão): fundos cinza-azulados em camadas, cartões brancos só no conteúdo */
  --cyan: #007f9c;              /* destaque gráfico: anel, sublinhado, bordas */
  --on-accent: #ffffff;         /* texto sobre ciano */
  --cyan-soft: #d6eef5;
  --panel: #dfe5ec;
  --field: #ffffff;
  --ink: #0f2b48;
  --ink-soft: #2f4256;
  --muted: #4b5e71;
  --bg: #e9edf2;
  --surface: #f7f9fb;
  --line: #cfd7e0;
  --bubble-in: #ffffff;
  --bubble-out: #d3edf5;
  --open: #0095b6;
  --low: #ffc107;
  --low-text: #8a5a00;
  --low-bg: #fff8e1;
  --closed: #e53e3e;
  --closed-text: #a02020;
  --closed-bg: #fff5f5;
  --ok-text: #17693a;
  --ok-bg: #e6f6ec;
  --roxo-text: #5b3a9a;
  --roxo-bg: #f1ebfb;
  --track: #cfd7e0;
  --avatar: #d6e7f0;
  --btn: #0f2b48;
  --btn-ink: #ffffff;
  --btn-hover: #007f9c;
  --btn-hover-ink: #ffffff;
  --login-a: #0f2b48;
  --login-b: #1e4d6b;
  --shadow: rgba(15, 43, 72, 0.12);
  --backdrop: rgba(11, 31, 58, 0.6);
  --radius: 6px;
  --font: 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

/* Tema escuro: azuis sóbrios em camadas (fundo < lista < painel) e ciano só para destaque */
:root[data-theme="dark"] {
  --cyan: #4fc3e0;
  --on-accent: #0b131d;
  --cyan-soft: #16384c;
  --panel: #1b2a3d;
  --field: #0e1824;
  --ink: #eef3f8;
  --ink-soft: #c5d2df;
  --muted: #93a7bb;
  --bg: #0b131d;
  --surface: #131f2e;
  --line: #26384d;
  --bubble-in: #1a2838;
  --bubble-out: #123f55;
  --open: #4fc3e0;
  --low: #ffc107;
  --low-text: #ffd666;
  --low-bg: #3a3217;
  --closed: #ff6b6b;
  --closed-text: #ff8a8a;
  --closed-bg: #3a1f2b;
  --ok-text: #7ddca2;
  --ok-bg: #153b2b;
  --roxo-text: #c9b6f7;
  --roxo-bg: #2e2552;
  --track: #26384d;
  --avatar: #1f3350;
  --btn: #4fc3e0;
  --btn-ink: #0b131d;
  --btn-hover: #8adcf0;
  --btn-hover-ink: #0b131d;
  --login-a: #0b131d;
  --login-b: #16304a;
  --shadow: rgba(0, 0, 0, 0.45);
  --backdrop: rgba(3, 8, 14, 0.72);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cyan: #4fc3e0;
    --on-accent: #0b131d;
    --cyan-soft: #16384c;
    --panel: #1b2a3d;
    --field: #0e1824;
    --ink: #eef3f8;
    --ink-soft: #c5d2df;
    --muted: #93a7bb;
    --bg: #0b131d;
    --surface: #131f2e;
    --line: #26384d;
    --bubble-in: #1a2838;
    --bubble-out: #123f55;
    --open: #4fc3e0;
    --low: #ffc107;
    --low-text: #ffd666;
    --low-bg: #3a3217;
    --closed: #ff6b6b;
    --closed-text: #ff8a8a;
    --closed-bg: #3a1f2b;
    --ok-text: #7ddca2;
    --ok-bg: #153b2b;
    --roxo-text: #c9b6f7;
    --roxo-bg: #2e2552;
    --track: #26384d;
    --avatar: #1f3350;
    --btn: #4fc3e0;
    --btn-ink: #0b131d;
    --btn-hover: #8adcf0;
    --btn-hover-ink: #0b131d;
    --login-a: #0b131d;
    --login-b: #16304a;
    --shadow: rgba(0, 0, 0, 0.45);
    --backdrop: rgba(3, 8, 14, 0.72);
    color-scheme: dark;
}
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#app { height: 100%; }

/* ---------- Login ---------- */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--login-a) 0%, var(--login-b) 100%);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: 12px;
  padding: 32px 28px;
  display: grid;
  gap: 16px;
  box-shadow: 0 15px 40px var(--shadow);
  border: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.logo svg { width: 40px; height: 40px; flex: none; }
.logo-text { display: grid; line-height: 1.05; }
.logo-name { font-size: 1.3rem; font-weight: 400; letter-spacing: 0.02em; }
.logo-sub { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.login-card .logo { margin-bottom: 8px; }
.pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  background: var(--cyan-soft);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pill svg { width: 14px; height: 14px; color: var(--cyan); }
.login-title { margin: 0 0 4px; font-size: 1.45rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }

.login-card label,
.tpl-form label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.login-card input,
.search input,
.tpl-form input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  font-size: 16px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  transition: border-color 0.3s, background 0.3s;
}
.login-card input:focus,
.search input:focus,
.tpl-form input:focus,
.compose textarea:focus { outline: none; border-color: var(--cyan); background: var(--surface); }
.btn-primary {
  border: 0;
  border-radius: var(--radius);
  padding: 13px 20px;
  background: var(--btn);
  color: var(--btn-ink);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}
.btn-primary:hover, .send:hover { background: var(--btn-hover); color: var(--btn-hover-ink); }
.btn-primary:disabled { opacity: 0.6; cursor: progress; }
.form-error {
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--closed-bg);
  color: var(--closed-text);
  border-left: 4px solid var(--closed);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.form-error[hidden] { display: none; }
.hint { margin: 0; color: var(--muted); font-size: 0.82rem; text-align: center; }

/* ---------- Estrutura ---------- */
.shell { height: 100dvh; display: grid; grid-template-columns: 1fr; overflow: hidden; }
.pane-list, .pane-chat { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.shell[data-view="list"] .pane-chat,
.shell[data-view="chat"] .pane-list { display: none; }

/* ---------- Lista ---------- */
.pane-list { background: var(--surface); }
.list-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-head .logo svg { width: 34px; height: 34px; }
.list-head .logo-name { font-size: 1.12rem; }
.me {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.search { padding: 12px 16px 6px; }
.search input { border-color: var(--line); }

.tabs { display: flex; gap: 0; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button {
  position: relative;
  border: 0;
  background: none;
  padding: 12px 7px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--cyan);
}
.count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--cyan);
  color: var(--on-accent);
  font-size: 0.72rem;
  letter-spacing: 0;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  flex: none;
}

.conv-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 calc(8px + env(safe-area-inset-bottom));
  overflow-y: auto;
  flex: 1;
}
.conv {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.conv:hover { background: var(--panel); }
.conv[aria-current="true"] { background: var(--cyan-soft); box-shadow: inset 4px 0 0 var(--cyan); }
.conv-main { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.conv-top, .conv-bottom { display: flex; align-items: center; gap: 8px; }
.conv-top strong { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-top time { font-size: 0.76rem; color: var(--muted); flex: none; }
.conv.unread .conv-top time { color: var(--ink); font-weight: 700; }
.preview { flex: 1; min-width: 0; color: var(--muted); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.unread .preview { color: var(--ink); font-weight: 500; }
.conv-owner { font-size: 0.76rem; color: var(--muted); }
.list-empty { padding: 32px 24px; color: var(--muted); text-align: center; }

/* Anel da janela de 24h: o arco mostra quanto tempo resta para responder livremente */
.ring {
  --c: var(--open);
  width: 48px; height: 48px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1turn), var(--track) 0);
}
.ring-pouco { --c: var(--low); }
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--avatar);
  border: 2px solid var(--surface);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--ink);
  font-weight: 700;
}
.ring-lg { width: 42px; height: 42px; }
.ring-lg .avatar { width: 36px; height: 36px; font-size: 0.78rem; }

/* ---------- Conversa ---------- */
.pane-chat { background: var(--bg); }
.chat-empty {
  margin: auto;
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
  max-width: 280px;
}
.chat-empty svg { width: 44px; height: 44px; color: var(--cyan); }

.chat-head { background: var(--surface); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.head-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px 6px; }
.icon-btn {
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  flex: none;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--panel); }
.who { flex: 1; min-width: 0; display: grid; }
.who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who span { font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner { display: flex; gap: 8px; align-items: center; flex: none; }
.owner select {
  max-width: 11rem;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.85rem;
}
.btn-take {
  border: 0;
  border-radius: var(--radius);
  padding: 9px 16px;
  background: var(--cyan);
  color: var(--on-accent);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.btn-take:hover { background: var(--ink); color: var(--surface); }

.window { margin: 0; padding: 0 16px 9px; font-size: 0.8rem; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.window::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.window-pouco::before { background: var(--low); }
.window-nunca::before { background: var(--track); }
.window-fechada::before { background: var(--closed); }
.window { color: var(--ink); }
.window-aberta { color: var(--ink); }
.window-aberta::before { background: var(--cyan); }
.window-pouco { color: var(--low-text); }
.window-fechada { color: var(--closed-text); }
.window-nunca { color: var(--muted); }

.messages { flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.day {
  align-self: center;
  margin: 10px 0 4px;
  font-size: 0.76rem;
  color: var(--muted);
  background: var(--surface);
  padding: 3px 10px;
  border-radius: 999px;
}
.msg { max-width: min(82%, 34rem); padding: 8px 12px 6px; border-radius: 10px; display: grid; gap: 2px; }
.msg.in { align-self: flex-start; background: var(--bubble-in); border-bottom-left-radius: 4px; box-shadow: 0 1px 0 var(--line); }
.msg.out { align-self: flex-end; background: var(--bubble-out); border-bottom-right-radius: 4px; }
.msg p { margin: 0; overflow-wrap: anywhere; }
.msg-tag { display: flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--muted); font-weight: 500; }
.msg-tag svg { width: 14px; height: 14px; }
.msg-meta { justify-self: end; display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--muted); }
.st svg { width: 16px; height: 16px; }
.st-read { color: var(--cyan); }
.st-failed { color: var(--closed); }
.msg-error { font-size: 0.78rem; color: var(--closed-text); }
.loading { margin: auto; color: var(--muted); text-align: center; }

.composer { background: var(--surface); border-top: 1px solid var(--line); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
.compose { display: flex; align-items: flex-end; gap: 6px; }
.compose textarea {
  flex: 1;
  resize: none;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  background: var(--field);
  font-size: 16px;
  line-height: 1.35;
  max-height: 160px;
}
.send {
  width: 42px; height: 42px;
  border-radius: var(--radius);
  border: 0;
  background: var(--btn);
  color: var(--btn-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.send svg { width: 20px; height: 20px; }
.closed-note {
  display: grid;
  gap: 12px;
  padding: 1rem 1.5rem;
  background: var(--panel);
  border-left: 4px solid var(--cyan);
  border-radius: 8px;
}
.closed-note p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Modelos ---------- */
.sheet {
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  border-radius: 12px 12px 0 0;
  margin: auto auto 0;
  background: var(--surface);
  color: var(--ink);
}
.sheet::backdrop { background: var(--backdrop); }
.sheet-body { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.sheet-sub { margin: 0; color: var(--muted); font-size: 0.86rem; }
.tpl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tpl {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  cursor: pointer;
}
.tpl { border-width: 2px; transition: border-color 0.3s, box-shadow 0.3s; }
.tpl:hover { border-color: var(--cyan); box-shadow: 0 15px 35px var(--shadow); }
.tpl-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.cat { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; flex: none; }
.cat { text-transform: uppercase; letter-spacing: 0.05em; }
.cat-marketing { background: var(--low-bg); color: var(--low-text); }
.cat-utility, .cat-authentication { background: var(--cyan-soft); color: var(--ink); }
.tpl-text {
  font-size: 0.86rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tpl-preview { background: var(--panel); border-left: 4px solid var(--cyan); border-radius: var(--radius); padding: 12px; font-size: 0.92rem; }
.tpl-preview mark { background: var(--cyan-soft); color: var(--ink); font-weight: 600; border-radius: 3px; padding: 0 2px; }
.tpl-preview mark.vazio { font-style: italic; opacity: 0.75; }
.tpl-area { display: grid; gap: 14px; }
.tpl-form { display: grid; gap: 12px; }
.link {
  border: 0;
  background: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
  font-weight: 500;
  justify-self: start;
}
.link svg { width: 18px; height: 18px; color: var(--cyan); }
.link:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 3px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(90px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--surface);
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  max-width: 90vw;
  z-index: 10;
}
.toast[hidden] { display: none; }

/* ---------- Telas maiores ---------- */
@media (min-width: 600px) {
  .closed-note { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 700px) {
  .sheet { margin: auto; border-radius: 12px; }
}
@media (min-width: 900px) {
  .shell { grid-template-columns: 72px var(--lista-largura, 380px) minmax(0, 1fr); }
  .shell[data-view] .pane-list,
  .shell[data-view] .pane-chat { display: flex; }
  .pane-list { border-right: 1px solid var(--line); }
  .back { display: none; }
  .messages { padding: 20px 24px; }
}
@media (max-width: 899px) {
  .owner:has(.btn-take) select { display: none; }
  .owner select { max-width: 8.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sobe 0.2s ease-out; }
  @keyframes sobe { from { transform: translateY(16px); opacity: 0; } }
}

/* ---------- Menu da conta e aparência ---------- */
.list-head { position: relative; }
.menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 12px;
  z-index: 20;
  width: min(300px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 15px 40px var(--shadow);
  padding: 16px;
  display: grid;
  gap: 16px;
}
.menu[hidden] { display: none; }
.menu-user { display: grid; line-height: 1.35; }
.menu-user strong { color: var(--ink); }
.menu-user span { font-size: 0.85rem; color: var(--muted); }
.theme-switch { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.theme-switch legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--panel); border-radius: 8px; }
.theme-options label {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.theme-options label svg { width: 18px; height: 18px; }
.theme-options input { position: absolute; opacity: 0; pointer-events: none; }
.theme-options label:has(input:checked) {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 3px var(--shadow), inset 0 -2px 0 var(--cyan);
}
.theme-options label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.menu-sair {
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  padding: 12px 0 0;
  text-align: left;
  color: var(--closed-text);
  font-weight: 600;
  cursor: pointer;
}
.menu-sair:hover { text-decoration: underline; }

/* =====================================================================
   Acesso: primeiro acesso, verificação pelo celular, códigos
   ===================================================================== */
.login { padding: 24px 16px; }
.login-card { max-width: 420px; }
.auth-form { display: grid; gap: 16px; }
.auth-text { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.field-hint { margin: -8px 0 0; font-size: 0.82rem; color: var(--muted); }
.auth-links { display: grid; gap: 10px; justify-items: start; }

.otp {
  font-size: 1.6rem !important;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.otp-rec { font-size: 1.25rem !important; letter-spacing: 0.15em; text-transform: uppercase; }

/* Passos da configuração: é uma sequência, por isso numerada */
.mfa-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 20px; counter-reset: passo; }
.mfa-steps > li {
  counter-increment: passo;
  position: relative;
  display: grid;
  gap: 4px;
  padding-left: 44px;
  min-height: 32px;
}
.mfa-steps > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -4px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cyan-soft);
  color: var(--ink);
  font-weight: 700;
  display: grid;
  place-items: center;
}
.mfa-steps strong { color: var(--ink); }
.mfa-steps > li > span { color: var(--ink-soft); font-size: 0.9rem; }
.mfa-add { display: grid; gap: 12px; justify-items: start; margin-top: 8px; }
.qr-box {
  background: #ffffff;              /* QR precisa de fundo claro para ser lido, mesmo no tema escuro */
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  line-height: 0;
}
.qr-box img { width: 180px; height: 180px; image-rendering: pixelated; }
.manual { margin-top: 4px; font-size: 0.88rem; color: var(--ink-soft); }
.manual summary { cursor: pointer; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 3px; }
.manual p { margin: 8px 0 6px; }
.secret, .codes code, .senha-valor {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  user-select: all;
}
.secret {
  display: block;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  word-break: break-all;
  margin-bottom: 6px;
}

.codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codes code {
  display: block;
  text-align: center;
  padding: 10px 8px;
  background: var(--panel);
  border-radius: 6px;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: 0.08em;
}
.codes-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.btn-secondary:hover { background: var(--ink); color: var(--surface); }
.abrir-app { width: 100%; }

.login-card label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}
.check input { width: 20px; height: 20px; accent-color: var(--cyan); flex: none; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* =====================================================================
   Menu da conta: item de administração
   ===================================================================== */
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  padding: 12px 0 0;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.menu-item svg { width: 20px; height: 20px; color: var(--cyan); }
.menu-item:hover { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 3px; }
.menu-item + .menu-sair { border-top: 0; padding-top: 0; }

/* =====================================================================
   Administração de usuários
   ===================================================================== */
.admin {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.admin[hidden] { display: none; }
.admin-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  /* alinha o conteúdo do cabeçalho com a lista centralizada (860px) */
  padding: calc(12px + env(safe-area-inset-top)) max(16px, calc((100% - 860px) / 2 + 16px)) 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.admin-title { flex: 1; min-width: 0; }
.admin-title h1 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.admin-title p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.novo-usuario { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; }
.novo-usuario svg { width: 18px; height: 18px; }
.admin-body { width: 100%; max-width: 860px; margin: 0 auto; padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
.admin-resumo { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.92rem; }

.user-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.user {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0 4px 15px var(--shadow);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s;
}
.user:hover { border-color: var(--cyan); }
.user.inativo { opacity: 0.6; }
.user-av { width: 44px; height: 44px; border: 0; flex: none; }
.user-info { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.user-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.user-top strong { color: var(--ink); margin-right: 2px; }
.user-email { color: var(--muted); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta { color: var(--muted); font-size: 0.82rem; }
.user-seta { color: var(--muted); transform: rotate(180deg); flex: none; }
.user-seta svg { width: 18px; height: 18px; }
.tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--panel);
  color: var(--ink-soft);
}
.tag-admin { background: var(--cyan-soft); color: var(--ink); }

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; color: var(--ink-soft); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--track); }
.status-ok::before { background: var(--cyan); }
.status-pendente::before { background: var(--low); }
.status-alerta::before { background: var(--closed); }
.status-alerta { color: var(--closed-text); }

/* Detalhe do usuário e ações */
.user-detalhe { display: grid; gap: 4px; padding: 12px 16px; background: var(--panel); border-left: 4px solid var(--cyan); border-radius: 8px; color: var(--ink); }
.acoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acao {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  background: none;
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s;
}
.acao strong { color: var(--ink); }
.acao span { color: var(--muted); font-size: 0.86rem; }
.acao:hover { border-color: var(--cyan); }
.acao.perigo strong { color: var(--closed-text); }
.acao.perigo:hover { border-color: var(--closed); }

.confirmar-texto { margin: 0; color: var(--ink); }
.confirmar-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confirmar-acoes .form-error { grid-column: 1 / -1; }
.btn-perigo { background: var(--closed-text); color: #ffffff; }
.btn-perigo:hover { background: var(--closed); color: #ffffff; }

/* Formulário de novo usuário */
.perfil-opcoes { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.perfil-opcoes legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.tpl-form .perfil-opcoes label.opcao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.opcao input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--cyan); flex: none; }
.opcao > span { display: grid; gap: 2px; }
.opcao strong { color: var(--ink); }
.opcao > span > span { color: var(--muted); font-size: 0.86rem; }
.tpl-form .perfil-opcoes label.opcao:has(input:checked) { border-color: var(--cyan); background: var(--cyan-soft); }

/* Senha temporária */
.senha-valor {
  display: block;
  text-align: center;
  padding: 16px;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--panel);
  border-left: 4px solid var(--cyan);
  border-radius: 8px;
}
.passos-entrega { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; color: var(--ink-soft); font-size: 0.9rem; }
.aviso-unico { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.aviso-unico svg { width: 18px; height: 18px; color: var(--cyan); }

.toast { z-index: 50; }
.rotulo-botao { white-space: nowrap; }
@media (max-width: 599px) {
  .rotulo-botao { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .novo-usuario { padding: 10px 12px; }
  .admin-title p { display: none; }
}

/* =====================================================================
   Envio de mensagens: botão, formulários, importação e acompanhamento
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search { display: flex; gap: 8px; align-items: stretch; }
.search input { flex: 1; min-width: 0; }
.btn-nova { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; }
.btn-nova svg, .nova-dentro svg { width: 18px; height: 18px; }
.nova-dentro { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; }

/* Selects e caixas de seleção nos formulários */
.tpl-form select, .passo-corpo select, .var-linha input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.tpl-form select:focus, .passo-corpo select:focus, .var-linha input:focus { outline: none; border-color: var(--cyan); background: var(--surface); }
.tpl-form label.check, .passo-corpo label.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}
.tpl-form .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--cyan); flex: none; }
.acao strong { display: inline-flex; align-items: center; gap: 8px; }
.acao strong svg { width: 18px; height: 18px; color: var(--cyan); }
.acao-destaque { border-color: var(--cyan); }

/* Prévia da mensagem, no formato de uma mensagem do WhatsApp */
.bolha-previa { display: grid; gap: 6px; }
.bolha-previa p {
  margin: 0;
  padding: 12px 14px;
  background: var(--bubble-out);
  border-radius: 10px 10px 4px 10px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.bolha-previa mark, .previa-envio mark { background: transparent; color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--cyan); }
.bolha-previa mark.vazio { color: var(--closed-text); border-bottom-color: var(--closed); font-weight: 600; }
.previa-rotulo { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); }

/* Etapas da importação: é uma sequência, por isso numerada */
.passos { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 6px; }
.passos li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}
.passos li.feito { border-bottom-color: var(--cyan); color: var(--ink-soft); }
.passos li.atual { border-bottom-color: var(--ink); color: var(--ink); }
.passo-num {
  width: 26px; height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
  font-size: 0.8rem;
}
.passos li.atual .passo-num { background: var(--ink); color: var(--surface); }
.passos li.feito .passo-num { background: var(--cyan-soft); color: var(--ink); }
.passo-num svg { width: 14px; height: 14px; }
@media (max-width: 599px) {
  .passos li:not(.atual) .passo-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .passos li:not(.atual) { flex: 0 0 auto; }
}

.passo-corpo { display: grid; gap: 18px; }
.passo-titulo { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.passo-texto { margin: -8px 0 0; color: var(--ink-soft); max-width: 68ch; }
.sub-titulo { margin: 0 0 4px; font-size: 1rem; color: var(--ink); }
.passo-acoes { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.passo-acoes .btn-primary { min-width: 180px; }
.passo-corpo label.campo {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.opcional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.colunas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }

/* Área de importação (mesmo estilo do envio de currículo do site) */
.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 32px 20px;
  text-align: center;
  border: 2px dashed var(--track);
  border-radius: 10px;
  background: var(--field);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.dropzone > svg { width: 34px; height: 34px; color: var(--cyan); }
.dropzone strong { font-size: 1.05rem; color: var(--ink); }
.dropzone-texto { color: var(--muted); font-size: 0.9rem; max-width: 46ch; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:hover, .dropzone.arrastando { border-color: var(--cyan); background: var(--cyan-soft); }
.dropzone:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.dropzone.lendo { pointer-events: none; opacity: 0.7; }
.modelo-planilha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--panel); border-radius: 8px; }
.modelo-planilha p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.modelo-planilha .btn-secondary svg, .link svg { width: 18px; height: 18px; }

/* Tabelas de prévia */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.tabela-rolagem table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela-rolagem th, .tabela-rolagem td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela-rolagem th { background: var(--panel); color: var(--ink); font-weight: 600; }
.tabela-rolagem td { color: var(--ink-soft); }
.tabela-rolagem tr:last-child td { border-bottom: 0; }
.tabela-rolagem td:first-child, .tabela-rolagem th:first-child { color: var(--muted); width: 1%; }
.tabela-mais { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
.tabela-previa { display: grid; gap: 6px; }

/* Escolha do modelo e preenchimento */
.modelos-opcoes { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.modelos-opcoes label.opcao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.modelos-opcoes label.opcao:has(input:checked) { border-color: var(--cyan); background: var(--cyan-soft); }
.modelos-opcoes .opcao > span { display: grid; gap: 4px; }
.modelos-opcoes .opcao strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink); }
.modelos-opcoes .opcao > span > span { color: var(--ink-soft); font-size: 0.9rem; }
.tag-mkt { background: var(--low-bg); color: var(--low-text); }
.mapa-vars { display: grid; gap: 10px; }
.var-linha { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.3fr); gap: 8px 12px; align-items: center; }
.var-linha input { grid-column: 2; }
.var-nome { display: grid; color: var(--ink); font-weight: 600; font-size: 0.92rem; }
.var-nome code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--muted); font-weight: 400; margin-right: 8px; }
.var-nome small { color: var(--muted); font-weight: 400; }
@media (max-width: 599px) {
  .var-linha { grid-template-columns: 1fr; }
  .var-linha input { grid-column: 1; }
}
.previa-envio { display: grid; gap: 8px; }
.previa-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.previa-nav { display: inline-flex; align-items: center; gap: 4px; font-size: 0.88rem; color: var(--muted); }
.previa-nav .prox svg { transform: rotate(180deg); }
.previa-nav .icon-btn:disabled { opacity: 0.35; cursor: default; }

/* Revisão */
.revisao-card { display: grid; gap: 6px; padding: 1rem 1.5rem; background: var(--panel); border-left: 4px solid var(--cyan); border-radius: 8px; color: var(--ink); }
.revisao-card p { margin: 0; }
.aviso-limite, .aviso-simulacao { margin-top: 6px !important; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-soft); }
.problemas { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--surface); display: grid; gap: 10px; }
.problemas[open] { gap: 12px; }
.problemas summary { cursor: pointer; font-weight: 600; color: var(--closed-text); }
.problemas .tabela-rolagem { border: 0; }
.problemas td:last-child { white-space: normal; min-width: 220px; color: var(--ink); }

/* Histórico */
.envio-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.envio-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 14px 16px;
  text-align: left;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0 4px 15px var(--shadow);
  cursor: pointer;
  transition: border-color 0.3s;
}
.envio-item:hover { border-color: var(--cyan); }
.envio-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.envio-top strong { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envio-meta, .envio-nums { color: var(--muted); font-size: 0.86rem; }
.estado { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--track); }
.estado-enviando::before, .estado-na_fila::before { background: var(--cyan); }
.estado-concluido::before { background: var(--ink); }
.estado-aguardando_limite::before, .estado-pausado::before { background: var(--low); }
.estado-interrompido::before { background: var(--closed); }
.estado-interrompido { color: var(--closed-text); }
.barra { display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--cyan); border-radius: 3px; transition: width 0.6s ease; }
.barra.grande { height: 10px; border-radius: 5px; }

/* Detalhe de um envio */
.detalhe-envio { display: grid; gap: 16px; }
.estado-envio { display: grid; gap: 10px; padding: 1rem 1.5rem; background: var(--surface); border-left: 4px solid var(--cyan); border-radius: 8px; box-shadow: 0 4px 15px var(--shadow); }
.estado-envio p { margin: 0; color: var(--ink); }
.estado-envio.estado-aguardando_limite, .estado-envio.estado-pausado { border-left-color: var(--low); }
.estado-envio.estado-interrompido { border-left-color: var(--closed); }
.estado-envio.estado-cancelado, .estado-envio.estado-concluido { border-left-color: var(--ink); }
.estado-nums { font-size: 0.88rem; color: var(--muted) !important; }
.estado-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-sec-perigo { border-color: var(--closed-text); color: var(--closed-text); }
.btn-sec-perigo:hover { background: var(--closed-text); color: #ffffff; }

.contadores { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.contadores div { padding: 10px 12px; background: var(--surface); border-radius: 8px; border: 1px solid var(--line); }
.contadores dt { font-size: 0.78rem; color: var(--muted); }
.contadores dd { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.contadores .destaque { border: 2px solid var(--cyan); background: var(--cyan-soft); }
@media (max-width: 599px) { .contadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros button {
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.filtros button span { color: var(--muted); font-weight: 500; }
.filtros button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--cyan-soft); }

.dest-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dest { display: grid; gap: 3px; padding: 12px 14px; background: var(--surface); }
.dest-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dest-top strong { color: var(--ink); }
.dest-meta { font-size: 0.86rem; color: var(--muted); }
.dest-resposta { margin: 4px 0 0; padding: 8px 12px; background: var(--bubble-in); border: 1px solid var(--line); border-radius: 10px 10px 10px 4px; color: var(--ink); font-size: 0.92rem; justify-self: start; max-width: 60ch; }
.dest-erro { margin: 2px 0 0; font-size: 0.86rem; color: var(--closed-text); }
.estado-dest { flex: none; font-size: 0.76rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--panel); color: var(--ink-soft); }
.dest-entregue, .dest-lida { background: var(--cyan-soft); color: var(--ink); }
.dest-respondeu { background: var(--cyan); color: var(--on-accent); }
.dest-falhou { background: var(--closed-bg); color: var(--closed-text); }
.dest-cancelada { background: var(--panel); color: var(--muted); }
.dest-lista .list-empty { background: var(--surface); }

/* O logo nunca quebra em várias linhas */
.logo-text { white-space: nowrap; }
.dest, .detalhe-envio, .passo-corpo { min-width: 0; }
.dest { grid-template-columns: minmax(0, 1fr); }

/* =====================================================================
   Logo oficial
   ===================================================================== */
.logo-img { display: block; width: auto; max-width: 100%; }
.login-card .logo-img { height: 64px; margin-bottom: 8px; }
.list-head .logo-img { height: 40px; }
/* No tema escuro o logo fica branco, como no rodapé do site */
:root[data-theme="dark"] .logo-img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img { filter: brightness(0) invert(1); }
}

/* =====================================================================
   Divisória para ajustar a largura da lista de conversas
   ===================================================================== */
.divisor { display: none; }
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .pane-list { position: relative; }
  .divisor {
    display: block;
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    z-index: 5;
    cursor: col-resize;
    touch-action: none;
  }
  /* A linha aparece ao passar o mouse, ao arrastar e ao focar pelo teclado */
  .divisor::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 2px;
    background: transparent;
    transition: background 0.2s, width 0.2s, left 0.2s;
  }
  .divisor:hover::after,
  .shell.redimensionando .divisor::after { background: var(--cyan); }
  .divisor:focus-visible { outline: none; }
  .divisor:focus-visible::after { background: var(--cyan); width: 4px; left: 4px; }
  .shell.redimensionando { cursor: col-resize; user-select: none; }
  .shell.redimensionando .pane-chat { pointer-events: none; }
}

/* A lista se adapta à própria largura (ajustada pela divisória) */
@media (min-width: 900px) {
  .pane-list { container: lista / inline-size; }
}
@container lista (max-width: 379px) {
  .btn-nova { padding: 0 12px; }
  .btn-nova span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabs { padding: 0 6px; }
  .tabs button { padding: 12px 5px; font-size: 0.72rem; }
}
/* =====================================================================
   Filtros, arquivadas, etiquetas, responsável e notas privadas
   ===================================================================== */
/* Filtros em pílulas numa linha só, com arraste para o lado (ver ligarArrasteAbas) */
.tabs {
  flex-wrap: nowrap;
  gap: 6px;
  padding: 4px 16px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 16px;
  cursor: grab;
  --fade-esq: 0px;
  --fade-dir: 0px;
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent);
}
.tabs.mais-esq { --fade-esq: 28px; }
.tabs.mais-dir { --fade-dir: 28px; }
.tabs.arrastando { cursor: grabbing; user-select: none; }
.tabs.arrastando button { pointer-events: none; }
.tabs button { flex: none; }
.tabs[hidden] { display: none; }
.tabs button {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: 0;
}
.tabs button[aria-selected="true"],
.tabs button[aria-selected="true"]:hover { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.tabs button[aria-selected="true"]::after { content: none; }
.tabs .count { min-width: 18px; height: 18px; font-size: 0.68rem; }
.tabs button[aria-selected="true"] .count { background: var(--surface); color: var(--ink); }
@container lista (max-width: 379px) {
  .tabs { padding: 4px 12px 10px; }
  .tabs button { padding: 5px 9px; font-size: 0.76rem; }
}

.arquivo-head { display: flex; align-items: center; gap: 8px; padding: 6px 16px 10px; border-bottom: 1px solid var(--line); }
.arquivo-head[hidden] { display: none; }
.arquivo-head .link { font-weight: 700; }
.arquivo-head p { margin: 0 0 0 auto; font-size: 0.8rem; color: var(--muted); text-align: right; }

.arquivo-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.arquivo-row:hover { background: var(--panel); }
.arquivo-ico { width: 48px; display: grid; place-items: center; flex: none; color: var(--cyan); }
.arquivo-ico svg { width: 22px; height: 22px; }
.arquivo-nome { flex: 1; font-weight: 600; }
.arquivo-n { font-size: 0.8rem; color: var(--muted); }

.etq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.etq svg { width: 13px; height: 13px; }
.etq-verde { background: var(--ok-bg); color: var(--ok-text); }
.etq-vermelho { background: var(--closed-bg); color: var(--closed-text); }
.etq-amarelo { background: var(--low-bg); color: var(--low-text); }
.etq-azul { background: var(--cyan-soft); color: var(--ink); }
.etq-roxo { background: var(--roxo-bg); color: var(--roxo-text); }
.etq-cinza { background: var(--panel); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
.conv-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; }
.conv-extra .conv-owner { margin-right: 2px; }

.head-actions { display: flex; gap: 2px; flex: none; }
.head-actions .icon-btn[aria-pressed="true"] { color: var(--cyan); }
.head-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 16px 8px; }
.head-bar .btn-take { padding: 6px 12px; font-size: 0.85rem; }
.owner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.owner-btn:hover { border-color: var(--cyan); }
.owner-btn svg, .owner-fixo svg { width: 16px; height: 16px; flex: none; }
.owner-btn .chev { display: grid; color: var(--muted); }
.owner-fixo { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.head-tags { display: flex; flex-wrap: wrap; gap: 4px; border: 0; background: none; padding: 2px; border-radius: var(--radius); cursor: pointer; }
.head-tags:hover .etq { box-shadow: inset 0 0 0 1px currentColor; }

.pick-grupo { margin: 4px 0 -4px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pick {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pick:hover { border-color: var(--cyan); }
.pick[aria-pressed="true"] { border-color: var(--cyan); background: var(--cyan-soft); }
.pick .avatar { width: 32px; height: 32px; font-size: 0.72rem; border: 0; flex: none; }
.pick-nome { flex: 1; font-weight: 600; }
.pick > svg { width: 20px; height: 20px; color: var(--cyan); flex: none; }

.tag-opcoes { display: grid; gap: 6px; }
.tag-opcao { display: flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; border: 2px solid var(--line); border-radius: 8px; }
.tag-opcao:hover, .tag-opcao:has(input:checked) { border-color: var(--cyan); }
.tag-opcao label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; }
.tag-opcao input { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); }
.tag-opcao .etq { font-size: 0.85rem; padding: 3px 10px; }
.tag-excluir {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.tag-excluir svg { width: 16px; height: 16px; }
.tag-excluir:hover { background: var(--panel); color: var(--closed-text); }
.tag-excluir[data-confirmar] { background: var(--closed-bg); color: var(--closed-text); }

.tag-nova { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.tag-nova-linha { display: flex; gap: 8px; }
.tag-nova-linha input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
}
.tag-nova-linha input:focus { outline: none; border-color: var(--cyan); background: var(--surface); }
.tag-nova-linha .btn-secondary { padding: 8px 14px; flex: none; }
.tag-nova-linha .btn-secondary svg { width: 18px; height: 18px; }
.tag-cores { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.tag-cores legend { padding: 0; margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.cor { cursor: pointer; }
.cor input { position: absolute; opacity: 0; pointer-events: none; }
.cor .etq { padding: 4px 11px; font-size: 0.8rem; outline: 2px solid transparent; outline-offset: 1px; }
.cor input:checked + .etq { outline-color: var(--cyan); }
.cor input:focus-visible + .etq { outline: 2px dashed var(--cyan); }

/* Nota privada: amarela e tracejada para nunca parecer mensagem enviada ao candidato */
.msg.note { align-self: center; width: min(92%, 36rem); max-width: none; background: var(--low-bg); border: 1px dashed var(--low); }
.msg.note .msg-tag { color: var(--low-text); font-weight: 600; }

.modo { display: flex; gap: 4px; margin-bottom: 8px; }
.modo button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.modo button svg { width: 14px; height: 14px; }
.modo button:hover { color: var(--ink); }
.modo button[aria-selected="true"] { background: var(--cyan-soft); color: var(--ink); }
.modo button[data-modo="nota"][aria-selected="true"] { background: var(--low-bg); color: var(--low-text); }
.compose-nota textarea,
.compose-nota textarea:focus { background: var(--low-bg); border-color: var(--low); color: var(--ink); }

/* =====================================================================
   Status da equipe (presença) e notificações de atribuição
   ===================================================================== */
.pres { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: var(--track); }
.pres-online { background: #22a55a; }
.pres-almoco { background: var(--low); }
.pres-indisponivel { background: var(--closed); }
.pres-offline { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }

.me { position: relative; }
.me .pres { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 2px solid var(--surface); box-sizing: content-box; }
.me .pres-offline { box-shadow: inset 0 0 0 2px var(--muted); background: var(--surface); }

.status-switch .theme-options label { grid-auto-flow: row; text-align: center; line-height: 1.2; }
.status-switch .pres { width: 12px; height: 12px; margin: 3px 0; }

.pick-nome { display: grid; gap: 1px; }
.pick-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 500; color: var(--muted); }
.pick-status .pres { width: 8px; height: 8px; }
.owner-btn .pres, .owner-fixo .pres { width: 9px; height: 9px; margin: 0 3px; }

.count-nova { padding: 0 7px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }

.notifs {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  left: 12px;
  z-index: 20;
  display: grid;
  justify-items: end;
  gap: 8px;
  pointer-events: none;
}
.notif {
  pointer-events: auto;
  width: min(100%, 380px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 10px 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan);
  border-radius: 10px;
  box-shadow: 0 15px 35px var(--shadow);
}
.notif-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cyan-soft); color: var(--ink); flex: none; }
.notif-ico svg { width: 18px; height: 18px; }
.notif-texto { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 0.85rem; }
.notif-texto span { color: var(--ink-soft); }
.notif-abrir {
  border: 0;
  border-radius: var(--radius);
  padding: 7px 12px;
  background: var(--btn);
  color: var(--btn-ink);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  flex: none;
}
.notif-abrir:hover { background: var(--btn-hover); color: var(--btn-hover-ink); }
.notif .notif-fechar { width: 32px; height: 32px; }
.notif .notif-fechar svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .notif { animation: notif-entra 0.25s ease-out; }
  @keyframes notif-entra { from { transform: translateY(-8px); opacity: 0; } }
}

/* =====================================================================
   Estilo WhatsApp: filtros reordenáveis, menus, dados do contato,
   balões, citações, reações, busca, emojis e respostas rápidas
   ===================================================================== */
/* Filtros: segurar e arrastar muda a ordem */
.tabs { touch-action: pan-x; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tabs button { transition: transform 0.15s, box-shadow 0.15s; }
.tabs.ordenando { cursor: grabbing; }
.tabs button.levantada {
  transform: scale(1.08);
  box-shadow: 0 6px 16px var(--shadow);
  border-color: var(--cyan);
  z-index: 1;
  position: relative;
}
.tabs.ordenando button:not(.levantada) { opacity: 0.75; }

/* Lista: botão de setinha (aparece ao passar o mouse), fixadas e ponto de não lida */
.conv-item { position: relative; }
.conv-mais {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 1px 4px var(--shadow);
  transition: opacity 0.15s;
}
.conv-mais svg { width: 18px; height: 18px; }
.conv-item:hover .conv-mais, .conv-mais:focus-visible, .conv-mais[aria-expanded="true"] { opacity: 1; }
@media (pointer: coarse) { .conv-mais { display: none; } }
.conv-pin { display: grid; color: var(--muted); flex: none; }
.conv-pin svg { width: 16px; height: 16px; }
.count-ponto { min-width: 12px; width: 12px; height: 12px; padding: 0; }

/* Menu flutuante */
.ctx {
  position: fixed;
  z-index: 40;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  padding: 6px 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 15px 35px var(--shadow);
  display: grid;
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}
.ctx-item svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ctx-item:hover, .ctx-item:focus-visible { background: var(--panel); outline: none; }
.ctx-perigo { color: var(--closed-text); }
.ctx-reacoes { display: flex; gap: 2px; padding: 2px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ctx-reacoes button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
}
.ctx-reacoes button:hover, .ctx-reacoes button:focus-visible { background: var(--panel); transform: scale(1.15); outline: none; }
.ctx-reacoes button[aria-pressed="true"] { background: var(--cyan-soft); }

/* Cabeçalho da conversa: nome clicável abre os dados do contato */
.pane-chat { position: relative; }
.perfil-abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 2px 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.perfil-abrir:hover { background: var(--panel); }
.head-notas {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--low-bg);
  color: var(--low-text);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.head-notas svg { width: 13px; height: 13px; }

/* Busca na conversa */
.busca-conversa { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.busca-conversa[hidden] { display: none; }
.busca-conversa input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
}
.busca-conversa input:focus { outline: none; border-color: var(--cyan); }
.busca-n { font-size: 0.8rem; color: var(--muted); white-space: nowrap; padding: 0 4px; }
.busca-conversa .icon-btn { width: 36px; height: 36px; }
.msg mark { background: var(--low); color: #0f2b48; border-radius: 2px; padding: 0 1px; }
.msg.busca-atual { box-shadow: 0 0 0 2px var(--cyan); }

/* Fundo e balões como no WhatsApp */
.messages {
  position: relative;
  background-color: var(--bg);
  background-image: radial-gradient(var(--line) 1px, transparent 1.2px);
  background-size: 22px 22px;
  gap: 2px;
}
.msg { position: relative; margin-top: 6px; box-shadow: 0 1px 0.5px var(--shadow); }
.msg.seq { margin-top: 0; }
.msg.in:not(.seq) { border-top-left-radius: 0; }
.msg.out:not(.seq) { border-top-right-radius: 0; }
.msg.in, .msg.out { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.msg:not(.seq)::before {
  content: "";
  position: absolute;
  top: 0;
  width: 9px;
  height: 13px;
}
.msg.in:not(.seq)::before { left: -8px; background: var(--bubble-in); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.msg.out:not(.seq)::before { right: -8px; background: var(--bubble-out); clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg.com-reacao { margin-bottom: 14px; }
.msg-mais {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 26px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: inherit;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.msg-mais svg { width: 18px; height: 18px; }
.msg:hover .msg-mais, .msg-mais:focus-visible { opacity: 1; }
@media (pointer: coarse) { .msg-mais { display: none; } }
.msg-citacao {
  display: grid;
  gap: 1px;
  margin: 2px 0 4px;
  padding: 6px 10px;
  border: 0;
  border-left: 4px solid var(--cyan);
  border-radius: 6px;
  background: rgba(15, 43, 72, 0.06);
  color: var(--ink);
  text-align: left;
  font-size: 0.84rem;
  cursor: pointer;
}
:root[data-theme="dark"] .msg-citacao { background: rgba(255, 255, 255, 0.07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg-citacao { background: rgba(255, 255, 255, 0.07); } }
.msg-citacao.cit-in { border-left-color: var(--low); }
.msg-citacao strong { font-size: 0.8rem; color: var(--cyan); }
.msg-citacao.cit-in strong { color: var(--low-text); }
.msg-citacao span { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-reacoes {
  position: absolute;
  bottom: -14px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 1px 3px var(--shadow);
}
.msg.in .msg-reacoes { left: 8px; }
.msg.out .msg-reacoes { right: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .msg.piscar { animation: piscar 1.4s ease-out; }
  @keyframes piscar { 0%, 40% { box-shadow: 0 0 0 3px var(--cyan); } 100% { box-shadow: 0 1px 0.5px var(--shadow); } }
}
@media (prefers-reduced-motion: reduce) { .msg.piscar { box-shadow: 0 0 0 3px var(--cyan); } }
.divisor-nl { align-self: stretch; text-align: center; margin: 10px -12px 4px; padding: 5px 0; background: rgba(0, 168, 204, 0.12); }
.divisor-nl span { font-size: 0.78rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; }

.msgs-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.ir-fim {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  box-shadow: 0 2px 8px var(--shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ir-fim[hidden] { display: none; }
.ir-fim svg { width: 22px; height: 22px; }
.ir-fim .count { position: absolute; top: -6px; right: -4px; }
.ir-fim .count[hidden] { display: none; }

/* Campo de mensagem */
.compose { align-items: flex-end; }
.compose-campo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 4px;
  border: 2px solid var(--line);
  border-radius: 24px;
  background: var(--field);
}
.compose-campo:focus-within { border-color: var(--cyan); background: var(--surface); }
.compose-campo textarea,
.compose-campo textarea:focus { border: 0; background: transparent; padding: 10px 4px; border-radius: 0; }
.compose-campo .icon-btn { width: 38px; height: 42px; }
.compose .send { border-radius: 50%; width: 46px; height: 46px; }
.resp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 6px 6px 6px 12px;
  border-left: 4px solid var(--cyan);
  border-radius: 8px;
  background: var(--panel);
}
.resp-bar.cit-in { border-left-color: var(--low); }
.resp-bar div { flex: 1; min-width: 0; display: grid; font-size: 0.84rem; }
.resp-bar strong { color: var(--cyan); font-size: 0.8rem; }
.resp-bar.cit-in strong { color: var(--low-text); }
.resp-bar span { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emojis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  max-height: 200px;
  overflow-y: auto;
  margin: 0 0 8px;
  padding: 6px;
  border-radius: 10px;
  background: var(--panel);
}
.emojis[hidden] { display: none; }
.emojis button { height: 40px; border: 0; border-radius: 8px; background: none; font-size: 1.4rem; cursor: pointer; }
.emojis button:hover, .emojis button:focus-visible { background: var(--surface); outline: none; }
.atalhos {
  display: grid;
  margin: 0 0 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px var(--shadow);
}
.atalhos[hidden] { display: none; }
.atalhos button {
  display: grid;
  gap: 2px;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.atalhos button:last-child { border-bottom: 0; }
.atalhos button[aria-selected="true"], .atalhos button:hover { background: var(--cyan-soft); }
.atalhos strong { font-size: 0.86rem; color: var(--ink); }
.atalhos span { font-size: 0.82rem; color: var(--muted); }
.atalhos-vazio { margin: 0; padding: 12px 14px; font-size: 0.86rem; color: var(--muted); display: grid; gap: 6px; }

/* Dados do contato */
.perfil {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(100%, 400px);
  z-index: 8;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px var(--shadow);
}
.perfil:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .perfil { animation: perfil-entra 0.2s ease-out; }
  @keyframes perfil-entra { from { transform: translateX(24px); opacity: 0; } }
}
.perfil-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.perfil-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.perfil-corpo { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 8px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.perfil-sec, .perfil-topo, .perfil-acoes { background: var(--surface); padding: 14px 20px; }
.perfil-info { display: grid; gap: 8px; }
.perfil-topo { display: grid; justify-items: center; gap: 6px; padding-top: 22px; text-align: center; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.8rem; border: 0; }
.perfil-topo h3 { margin: 6px 0 0; font-size: 1.25rem; }
.perfil-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.perfil-tel svg { width: 15px; height: 15px; }
.perfil-tel:hover { background: var(--panel); color: var(--ink); }
.perfil-topo .window { padding: 0; justify-content: center; }
.perfil-sec { display: grid; gap: 8px; }
.perfil-sec h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.perfil-sec h4 svg { width: 15px; height: 15px; }
.perfil-sec-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.perfil-sec-top .link { font-size: 0.86rem; }
.perfil-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-tags .etq { font-size: 0.82rem; padding: 3px 10px; }
.perfil-vazio { margin: 0; color: var(--muted); font-size: 0.86rem; list-style: none; }
.perfil-dica { margin: -4px 0 0; font-size: 0.8rem; color: var(--muted); }
.perfil-notas h4 { color: var(--low-text); }
.nota-form { display: grid; gap: 8px; }
.nota-form textarea {
  resize: vertical;
  min-height: 70px;
  padding: 10px 12px;
  border: 2px solid var(--low);
  border-radius: 8px;
  background: var(--low-bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.nota-form textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--low); }
.nota-form-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.nota-form-acoes .form-error { margin: 0 auto 0 0; }
.nota-form-acoes .btn-primary { width: auto; padding: 9px 16px; }
.notas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nota { padding: 10px 12px; border-radius: 8px; background: var(--low-bg); border-left: 3px solid var(--low); }
.nota-pendente { opacity: 0.65; }
.nota-top { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.nota-top strong { color: var(--low-text); }
.nota-top time { color: var(--muted); margin-right: auto; }
.nota p { margin: 4px 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.nota-apagar {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.nota-apagar svg { width: 16px; height: 16px; }
.nota-apagar:hover, .nota-apagar[data-confirmar] { color: var(--closed-text); background: var(--closed-bg); }
.perfil-acoes { display: grid; gap: 2px; padding: 8px 8px; }
.perfil-acao {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.perfil-acao svg { width: 20px; height: 20px; color: var(--muted); }
.perfil-acao:hover { background: var(--panel); }
.perfil-acao[data-acao="arquivar"] { color: var(--closed-text); }
.perfil-acao[data-acao="arquivar"] svg { color: currentColor; }

/* Respostas rápidas (gerenciar) */
.respostas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 40dvh; overflow-y: auto; }
.resposta { display: flex; gap: 8px; align-items: flex-start; padding: 10px 8px 10px 12px; border: 2px solid var(--line); border-radius: 8px; }
.resposta > div { flex: 1; min-width: 0; }
.resposta strong { font-size: 0.9rem; }
.resposta p { margin: 2px 0 0; font-size: 0.86rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.resposta-nova { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.campo-rotulo { display: grid; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.campo-rotulo textarea, .atalho-campo input {
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.campo-rotulo textarea { resize: vertical; }
.campo-rotulo textarea:focus, .atalho-campo:focus-within { outline: none; border-color: var(--cyan); }
.atalho-campo { display: flex; align-items: center; border: 2px solid var(--line); border-radius: var(--radius); background: var(--field); }
.atalho-campo > span { padding-left: 12px; color: var(--muted); font-size: 16px; font-weight: 700; }
.atalho-campo input { flex: 1; min-width: 0; border: 0; padding-left: 2px; background: transparent; }
.atalho-campo input:focus { outline: none; }

/* =====================================================================
   Arquivos, fotos, vídeos, áudios e gravação de voz
   ===================================================================== */
.msg-midia { padding: 4px 4px 6px; }
.msg-midia > p, .msg-midia .msg-meta, .msg-midia .msg-tag, .msg-midia .msg-error { padding: 0 8px; }
.msg-midia .msg-citacao { margin: 2px 4px 4px; }
.msg-image, .msg-video { width: min(330px, 82%); }
.msg-sticker { background: transparent !important; box-shadow: none; }
.msg-sticker::before { display: none; }
.midia-foto { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--panel); cursor: zoom-in; }
.midia-foto img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.msg-sticker .midia-foto { width: 160px; background: none; }
.msg-sticker .midia-foto img { object-fit: contain; }
.midia-video { position: relative; }
.midia-video video { display: block; width: 100%; max-height: 340px; border-radius: 8px; background: #000; }
.midia-progresso {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11, 31, 58, 0.78);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.midia-indisponivel { display: block; padding: 8px; font-size: 0.86rem; font-style: italic; color: var(--muted); }

/* Player de áudio como o do WhatsApp */
.msg-audio { width: min(340px, 86%); }
.audio {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 6px 8px 0;
}
.audio-quem { grid-row: 1 / 3; position: relative; display: grid; place-items: center; width: 46px; height: 46px; color: var(--muted); }
.audio-quem > svg { width: 30px; height: 30px; }
.audio-quem .avatar { width: 46px; height: 46px; border: 0; font-size: 0.85rem; }
.audio-mic { position: absolute; right: -4px; bottom: -2px; display: grid; color: var(--cyan); }
.audio-mic svg { width: 18px; height: 18px; }
.audio-play {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.audio-play svg { width: 26px; height: 26px; }
.audio-play:hover { color: var(--cyan); }
.audio-barra { width: 100%; margin: 14px 0 0; accent-color: var(--cyan); cursor: pointer; }
.audio-rodape { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--muted); }
.audio-vel {
  border: 0;
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.audio .midia-progresso { left: auto; right: 8px; top: 8px; transform: none; }

/* Documento */
.msg-document { width: min(340px, 86%); }
.midia-doc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(15, 43, 72, 0.06);
  color: var(--ink);
  text-decoration: none;
}
:root[data-theme="dark"] .midia-doc { background: rgba(255, 255, 255, 0.07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .midia-doc { background: rgba(255, 255, 255, 0.07); } }
.midia-doc:hover .doc-baixar { color: var(--cyan); }
.doc-ico { position: relative; display: grid; place-items: center; width: 40px; height: 48px; flex: none; color: #e53e3e; }
.doc-ico svg { width: 40px; height: 48px; }
.doc-ico small { position: absolute; bottom: 7px; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.02em; }
.doc-doc, .doc-docx { color: #2b6cb0; }
.doc-xls, .doc-xlsx { color: #22a55a; }
.doc-ppt, .doc-pptx { color: #dd6b20; }
.doc-txt { color: var(--muted); }
.doc-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.doc-info strong { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-info small { font-size: 0.74rem; color: var(--muted); }
.doc-baixar { display: grid; color: var(--muted); flex: none; }
.doc-baixar svg { width: 22px; height: 22px; }
.midia-doc .midia-progresso { left: auto; right: 44px; transform: translateY(-50%); }

/* Microfone no lugar do enviar e gravação */
.send.send-mic { background: var(--btn); }
.gravando { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.grav-cancelar { color: var(--closed-text); }
.grav-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--closed); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .grav-ponto { animation: grav-pisca 1s ease-in-out infinite; }
  @keyframes grav-pisca { 50% { opacity: 0.25; } }
}
.grav-tempo { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; }
.grav-texto { flex: 1; min-width: 0; color: var(--muted); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gravando .send { border-radius: 50%; width: 46px; height: 46px; }

/* Prévia antes de enviar */
.arq-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 52dvh; overflow-y: auto; }
.arq-item { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.arq-previa { display: grid; place-items: center; border-radius: 8px; background: var(--panel); overflow: hidden; min-height: 70px; }
.arq-previa img, .arq-previa video { display: block; max-width: 100%; max-height: 42dvh; }
.arq-previa audio { width: 100%; }
.arq-document { grid-template-columns: auto 1fr; align-items: center; }
.arq-document .arq-previa { min-height: 0; background: none; }
.arq-info { display: grid; gap: 2px; min-width: 0; }
.arq-info strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arq-info small { color: var(--muted); font-size: 0.78rem; }
.arq-form { display: flex; gap: 8px; align-items: center; }
.arq-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 2px solid var(--line);
  border-radius: 24px;
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
}
.arq-form input:focus { outline: none; border-color: var(--cyan); }
.arq-form .send { margin-left: auto; border-radius: 50%; width: 48px; height: 48px; }

/* Arrastar arquivos para a conversa */
.pane-chat.soltar-aqui::after {
  content: "Solte para enviar ao candidato";
  position: absolute;
  inset: 10px;
  z-index: 20;
  display: grid;
  place-items: center;
  border: 3px dashed var(--cyan);
  border-radius: 14px;
  background: rgba(0, 168, 204, 0.12);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  pointer-events: none;
}

/* Visualizador de fotos */
.visor {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(4, 12, 24, 0.94);
  color: #fff;
}
.visor[open] { display: grid; grid-template-rows: auto 1fr; }
.visor::backdrop { background: rgba(4, 12, 24, 0.94); }
.visor-barra { display: flex; justify-content: flex-end; gap: 4px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
.visor-barra .icon-btn { color: #fff; }
.visor-barra .icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.visor img { place-self: center; max-width: 94vw; max-height: calc(100dvh - 80px); object-fit: contain; cursor: zoom-out; }

/* =====================================================================
   Ferramentas do WhatsApp Business: menu, seleção, etiquetas, favoritas,
   respostas automáticas e ligações
   ===================================================================== */
.menu { max-height: calc(100dvh - 90px); overflow-y: auto; gap: 12px; }
.menu-titulo { margin: 4px 0 -4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Seleção de conversas */
.selecao-barra {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--cyan-soft);
  border-bottom: 1px solid var(--line);
}
.selecao-barra[hidden] { display: none; }
.sel-n { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.sel-todas { margin-left: 6px; font-size: 0.84rem; white-space: nowrap; }
.sel-acoes { margin-left: auto; display: flex; gap: 0; }
.sel-acoes .icon-btn { width: 36px; height: 36px; }
.sel-acoes .icon-btn svg { width: 20px; height: 20px; }
.sel-acoes .icon-btn:disabled { opacity: 0.35; cursor: default; }
.conv.selecionando { padding-left: 12px; }
.sel-marca {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--on-accent);
}
.sel-marca svg { width: 15px; height: 15px; }
.conv[aria-pressed="true"] { background: var(--cyan-soft); }
.conv[aria-pressed="true"] .sel-marca { background: var(--cyan); border-color: var(--cyan); }
@container lista (max-width: 379px) { .sel-todas { display: none; } }

/* Filtro por etiqueta */
.filtro-etq { display: flex; align-items: center; gap: 8px; padding: 6px 16px 8px; font-size: 0.84rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.filtro-etq[hidden] { display: none; }
.filtro-etq .etq { font-size: 0.8rem; padding: 2px 10px; }
.filtro-etq .link { margin-left: auto; font-size: 0.82rem; }
.filtro-etq .link svg { width: 14px; height: 14px; }
.etq-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 44dvh; overflow-y: auto; }
.etq-linha { display: flex; align-items: center; gap: 4px; }
.etq-filtrar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.etq-filtrar:hover, .etq-filtrar[aria-pressed="true"] { border-color: var(--cyan); }
.etq-bolinha { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.etq-bolinha svg { width: 18px; height: 18px; }
.etq-nome { display: grid; }
.etq-nome small { color: var(--muted); font-size: 0.78rem; }
.tag-escolher { width: 100%; background: none; cursor: pointer; padding: 9px 12px; }

/* Blocos de aviso nas janelas */
.aviso-bloco { padding: 12px 14px; border-radius: 8px; background: var(--low-bg); border-left: 4px solid var(--low); color: var(--ink); font-size: 0.9rem; display: grid; gap: 6px; }
.aviso-bloco p { margin: 0; }
.aviso-ok { background: var(--ok-bg); border-left-color: #22a55a; }
.grupo-transmissao, .ligar-agora, .pedir-perm { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.grupo-transmissao svg, .ligar-agora svg, .pedir-perm svg { width: 20px; height: 20px; }
.perm-texto {
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  resize: vertical;
}

/* Favoritas */
.msg-estrela { display: grid; color: var(--low); }
.msg-estrela svg { width: 13px; height: 13px; }
.fav-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 62dvh; overflow-y: auto; }
.fav {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.fav:hover { border-color: var(--cyan); }
.fav-top { display: flex; gap: 8px; align-items: baseline; font-size: 0.8rem; }
.fav-conv { color: var(--muted); }
.fav-top time { margin-left: auto; color: var(--muted); }
.fav-texto { font-size: 0.9rem; }

/* Saudação e ausência */
.auto-form { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.auto-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.auto-top h3 { margin: 0 0 2px; font-size: 1rem; }
.auto-form textarea {
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.auto-form textarea:focus { outline: none; border-color: var(--cyan); }
.auto-form .btn-primary { justify-self: end; width: auto; padding: 9px 18px; }
.chave { position: relative; flex: none; cursor: pointer; }
.chave input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chave span { display: block; width: 46px; height: 26px; border-radius: 999px; background: var(--track); transition: background 0.2s; }
.chave span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.chave input:checked + span { background: var(--cyan); }
.chave input:checked + span::after { transform: translateX(20px); }
.chave input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.chave input:disabled + span { opacity: 0.5; }
.horario { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.horario legend { margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.horario-dia { display: grid; grid-template-columns: 7.5rem auto auto auto; align-items: center; gap: 8px; font-size: 0.88rem; }
.horario-dia .check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.horario-dia input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cyan); }
.horario-dia input[type="time"] {
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
}
.horario-dia input[type="time"]:disabled { opacity: 0.45; }
@media (max-width: 420px) { .horario-dia { grid-template-columns: 6.2rem auto auto auto; gap: 4px; font-size: 0.82rem; } }

/* Tela da ligação */
.chamada {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: min(320px, calc(100vw - 32px));
  padding: 22px 18px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, #0f2b48, #1e4d6b);
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 18px;
}
.ch-topo { display: grid; justify-items: center; gap: 6px; text-align: center; }
.ch-topo .avatar-xl { width: 78px; height: 78px; font-size: 1.5rem; background: rgba(255, 255, 255, 0.12); color: #fff; }
.ch-topo strong { font-size: 1.15rem; }
.ch-status { font-size: 0.9rem; color: #d0e6f0; font-variant-numeric: tabular-nums; }
.ch-demo { font-size: 0.74rem; color: #ffd666; }
.ch-botoes { display: flex; justify-content: center; gap: 18px; }
.ch-btn {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}
.ch-btn svg { width: 24px; height: 24px; }
.ch-btn:hover { background: rgba(255, 255, 255, 0.24); }
.ch-btn[aria-pressed="true"] { background: #fff; color: #0f2b48; }
.ch-desligar, .ch-recusar { background: #e53e3e; }
.ch-desligar:hover, .ch-recusar:hover { background: #c53030; }
.ch-atender { background: #22a55a; }
.ch-atender:hover { background: #1c8a4b; }
.chamada[data-status="tocando"] .ch-topo .avatar-xl { box-shadow: 0 0 0 0 rgba(34, 165, 90, 0.7); }
@media (prefers-reduced-motion: no-preference) {
  .chamada[data-status="tocando"] .ch-topo .avatar-xl,
  .chamada[data-status="chamando"] .ch-topo .avatar-xl { animation: chama 1.4s ease-out infinite; }
  @keyframes chama { 0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.55); } 100% { box-shadow: 0 0 0 22px rgba(0, 212, 255, 0); } }
}

/* =====================================================================
   Perfil da empresa (como o candidato vê no WhatsApp)
   ===================================================================== */
.pe-previa { display: grid; justify-items: center; padding: 14px; border-radius: 12px; background: var(--bg); }
.pe-cartao { width: min(100%, 340px); display: grid; justify-items: center; gap: 4px; padding: 20px 18px 14px; border-radius: 12px; background: var(--surface); box-shadow: 0 2px 10px var(--shadow); text-align: center; }
.pe-foto { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--avatar); color: var(--ink); font-size: 2rem; font-weight: 700; margin-bottom: 6px; }
.pe-foto img { width: 100%; height: 100%; object-fit: cover; }
.pe-nome { font-size: 1.15rem; }
.pe-selo { font-size: 0.78rem; color: var(--muted); }
.pe-recado { margin: 6px 0 2px; font-size: 0.9rem; color: var(--ink-soft); }
.pe-dados { width: 100%; margin: 8px 0 0; display: grid; gap: 8px; text-align: left; border-top: 1px solid var(--line); padding-top: 10px; }
.pe-dados div { display: grid; gap: 1px; }
.pe-dados dt { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pe-dados dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.pe-form { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pe-form input, .pe-form select {
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.pe-form input:focus, .pe-form select:focus { outline: none; border-color: var(--cyan); }
.pe-foto-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pe-foto-linha small { flex: 1 1 200px; color: var(--muted); font-size: 0.8rem; }
.pe-trocar-foto svg { width: 18px; height: 18px; }
.pe-cont { float: right; font-weight: 400; }
.pe-form .btn-primary { justify-self: end; width: auto; padding: 10px 20px; }

/* =====================================================================
   Entrevistas: Google Agenda + Meet
   ===================================================================== */
.faixa-entrevista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 12px 8px;
  padding: 7px 8px 7px 12px;
  border-radius: 8px;
  background: var(--cyan-soft);
  color: var(--ink);
  font-size: 0.86rem;
}
.faixa-texto { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 200px; font-weight: 600; }
.faixa-texto svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }
.faixa-resultado { background: var(--low-bg); }
.faixa-resultado .faixa-texto svg { color: var(--low-text); }
.faixa-botoes { display: flex; flex-wrap: wrap; gap: 4px; }
.faixa-local { font-size: 0.8rem; color: var(--muted); }
.btn-meet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
}
.btn-meet svg { width: 16px; height: 16px; }
.btn-meet:hover { background: var(--btn-hover); color: var(--btn-hover-ink); }
.chip-res {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.chip-res:hover { border-color: currentColor; }
.res-aprovado { color: var(--ok-text); }
.res-reprovado { color: var(--closed-text); }
.res-em_analise { color: var(--low-text); }
.res-faltou { color: var(--muted); }

/* Painel do contato */
.perfil-entrevistas h4 svg { width: 15px; height: 15px; }
.entrevistas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.entrevista { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.entrevista small { color: var(--muted); font-size: 0.8rem; }
.ent-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.ent-situ { font-size: 0.76rem; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.ent-cancelada { opacity: 0.6; }
.ent-cancelada .ent-situ, .ent-faltou .ent-situ { color: var(--muted); }
.ent-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; }
.ent-acoes .link { font-size: 0.84rem; }
.ent-acoes .link svg { width: 15px; height: 15px; }
.ent-cancelar { color: var(--closed-text); }

/* Formulário de agendar */
.agendar-form { display: grid; gap: 12px; }
.agendar-form input, .agendar-form select {
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.agendar-form input:focus, .agendar-form select:focus { outline: none; border-color: var(--cyan); }
.agendar-linha { display: grid; grid-template-columns: 1fr 9rem; gap: 10px; }
.modo-entrevista { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modo-entrevista legend { padding: 0; margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.opcao { cursor: pointer; }
.opcao input { position: absolute; opacity: 0; pointer-events: none; }
.opcao span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}
.opcao span svg { width: 20px; height: 20px; color: var(--muted); }
.opcao input:checked + span { border-color: var(--cyan); background: var(--cyan-soft); }
.opcao input:checked + span svg { color: var(--cyan); }
.opcao input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.horarios-livres { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; font-weight: 400; }
.slot {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.slot:hover { border-color: var(--cyan); }
.slot[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); font-weight: 700; }
.check-linha { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; cursor: pointer; }
.check-linha input { width: 18px; height: 18px; accent-color: var(--cyan); flex: none; }
.agendar-form .btn-primary, .cancel-ok { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.agendar-form .btn-primary svg { width: 20px; height: 20px; }
.btn-perigo { background: var(--closed-text); color: #fff; }
.btn-perigo:hover { background: var(--closed); color: #fff; }

/* Agenda da equipe */
.google-bloco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.google-conectar { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 9px 16px; text-decoration: none; }
.google-conectar svg { width: 18px; height: 18px; }
.agenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 55dvh; overflow-y: auto; }
.agenda-dia { margin-top: 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.agenda-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.agenda-item:hover { border-color: var(--cyan); }
.agenda-item time { font-weight: 700; font-variant-numeric: tabular-nums; width: 3.2rem; flex: none; }
.agenda-info { flex: 1; min-width: 0; display: grid; }
.agenda-info small { color: var(--muted); font-size: 0.8rem; }
@media (max-width: 420px) { .agendar-linha { grid-template-columns: 1fr; } .modo-entrevista { grid-template-columns: 1fr; } }

/* =====================================================================
   O candidato escolhe o horário (lista interativa do WhatsApp)
   ===================================================================== */
.msg-lista { display: grid; gap: 6px; margin-top: 4px; }
.lista-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  border-top: 1px solid var(--line);
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.9rem;
}
.lista-botao svg { width: 16px; height: 16px; transform: rotate(90deg); }
.msg-lista details { font-size: 0.8rem; color: var(--muted); }
.msg-lista summary { cursor: pointer; }
.msg-lista ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 2px; }
.msg-lista li strong { color: var(--ink-soft); }
.previa-horarios { display: grid; gap: 6px; font-weight: 400; }
.previa-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.previa-dia strong { min-width: 6.5rem; font-size: 0.84rem; color: var(--ink); text-transform: capitalize; }
.slot-previa { cursor: default; }
.slot-previa:hover { border-color: var(--line); }
.faixa-convite { background: var(--panel); }
.quem-escolhe .opcao span { font-size: 0.86rem; }

/* =====================================================================
   Barra lateral (como no Teams) e alfinete no menu
   ===================================================================== */
.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: calc(10px + env(safe-area-inset-top)) 6px 10px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-btn {
  position: relative;
  width: 60px;
  padding: 8px 2px 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink-soft);
  display: grid;
  justify-items: center;
  gap: 3px;
  cursor: pointer;
}
.rail-btn:hover { background: var(--panel); color: var(--ink); }
.rail-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.rail-btn[aria-current="page"] { color: var(--cyan); }
.rail-btn[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cyan);
}
.rail-ico { position: relative; display: grid; place-items: center; }
.rail-ico svg { width: 24px; height: 24px; }
.rail-txt { font-size: 0.66rem; font-weight: 600; line-height: 1.1; text-align: center; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-count { position: absolute; top: -7px; right: -12px; min-width: 18px; height: 18px; font-size: 0.64rem; padding: 0 5px; }
.rail-sep { width: 32px; height: 1px; margin: 6px 0; background: var(--line); }
.rail-espaco { flex: 1; min-height: 8px; }
.rail-btn[data-rail="mais"] { color: var(--muted); }

/* Celular: a barra fica embaixo da lista (some quando uma conversa está aberta) */
@media (max-width: 899px) {
  .rail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    flex-direction: row;
    justify-content: space-around;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line);
    background: var(--surface);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rail-sep, .rail-espaco { display: none; }
  .rail-btn { width: auto; min-width: 58px; flex: 0 0 auto; }
  .rail-btn[aria-current="page"]::before { left: 12px; right: 12px; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .shell[data-view="chat"] .rail { display: none; }
  .shell[data-view="list"] .conv-list { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Alfinete ao lado de cada opção do menu */
.menu-dica { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.menu-dica svg { width: 14px; height: 14px; flex: none; }
.menu-linha { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 4px; }
.menu-linha .menu-item { flex: 1; border-top: 0; padding: 8px 0; }
.menu-fixar {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  opacity: 0.55;
}
.menu-fixar svg { width: 17px; height: 17px; }
.menu-fixar:hover, .menu-fixar:focus-visible { opacity: 1; background: var(--panel); }
.menu-fixar[aria-pressed="true"] { opacity: 1; color: var(--cyan); background: var(--cyan-soft); }

/* =====================================================================
   Modelos de mensagem (gestão e criação)
   ===================================================================== */
.modelos-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.modelos-acoes .btn-primary { width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; }
.modelos-acoes svg { width: 18px; height: 18px; }
.modelos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 58dvh; overflow-y: auto; }
.modelo-item { position: relative; display: grid; gap: 4px; padding: 12px 44px 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.modelo-item .mod-apagar { position: absolute; top: 8px; right: 6px; }
.modelo-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modelo-top strong { font-size: 0.95rem; }
.modelo-meta { color: var(--muted); font-size: 0.78rem; }
.modelo-meta code { font-size: 0.78rem; }
.modelo-texto { margin: 2px 0 0; font-size: 0.88rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.modelo-recusa { margin: 0; font-size: 0.82rem; color: var(--closed-text); }
.modelo-dica { margin: 0; font-size: 0.8rem; color: var(--muted); }
.mod-titulo { margin: 0; font-size: 1.15rem; }
.mod-prontos { display: flex; flex-wrap: wrap; gap: 6px; font-weight: 400; }
.mod-prontos .slot:disabled { opacity: 0.55; cursor: default; }
.mod-form { display: grid; gap: 12px; }
.mod-form input, .mod-form select, .mod-form textarea {
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.mod-form textarea { resize: vertical; }
.mod-form input:focus, .mod-form select:focus, .mod-form textarea:focus { outline: none; border-color: var(--cyan); }
.mod-form .opcao span { display: grid; gap: 2px; }
.mod-form .opcao small { font-weight: 400; font-size: 0.76rem; color: var(--muted); }
.mod-corpo-acoes { display: flex; justify-content: space-between; align-items: center; font-weight: 400; }
.mod-corpo-acoes .link svg { width: 16px; height: 16px; }
.mod-cont { font-size: 0.76rem; color: var(--muted); }
.mod-ajuda { font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.mod-vars { display: grid; gap: 6px; }
.mod-vars-titulo { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.mod-var-linha { display: grid; grid-template-columns: 3rem 1fr 1fr; gap: 6px; align-items: center; }
.mod-var-linha code { font-weight: 700; color: var(--cyan); }
.mod-botoes { display: grid; gap: 6px; font-weight: 400; }
.mod-botao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.mod-botao input { flex: 1 1 140px; min-width: 0; }
.mod-botao-tipo { width: 100%; font-size: 0.74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mod-botao .bt-remover { width: 32px; height: 32px; }
.mod-add-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-previa { padding: 14px; border-radius: 10px; background-color: var(--bg); background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 22px 22px; display: grid; font-weight: 400; }
.mod-balao { max-width: 100%; justify-self: end; width: min(100%, 340px); margin: 0; }
.mod-balao p { color: var(--ink); }
.mod-balao mark { background: var(--low-bg); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.mod-balao mark.vazio { opacity: 0.7; }
.mod-cab { font-size: 0.95rem; color: var(--ink); }
.mod-rod { color: var(--muted); font-size: 0.78rem; }
.mod-bts { display: grid; margin: 6px -12px -6px; border-top: 1px solid var(--line); }
.mod-bts span { padding: 8px; text-align: center; color: var(--cyan); font-weight: 600; font-size: 0.88rem; border-top: 1px solid var(--line); }
.mod-bts span:first-child { border-top: 0; }
.mod-erros { margin: 0; padding: 10px 12px 10px 28px; border-radius: 8px; background: var(--closed-bg); color: var(--closed-text); font-size: 0.86rem; display: grid; gap: 4px; }
.mod-erros[hidden] { display: none; }
.mod-form > .btn-primary { justify-self: end; width: auto; padding: 10px 20px; }
@media (max-width: 480px) { .mod-var-linha { grid-template-columns: 2.6rem 1fr; } .mod-var-linha .var-exemplo { grid-column: 2; } }
.mod-var-linha input, .mod-form input, .mod-form select { min-width: 0; width: 100%; }
.mod-botao input { width: auto; }
#dlg .sheet-body { overflow-x: hidden; }

/* =====================================================================
   Anúncios (Clique para o WhatsApp)
   ===================================================================== */
.perfil-origem h4 svg { width: 15px; height: 15px; }
.origem-cartao { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--cyan-soft); }
.origem-cartao small { color: var(--ink-soft); font-size: 0.8rem; }
.origem-cartao a { color: var(--cyan); }
.origem-dica { color: var(--muted) !important; }
.head-anuncio { background: var(--cyan-soft); color: var(--ink); }
.ads-periodo { display: flex; gap: 6px; }
.ads-total { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ads-total div { display: grid; padding: 10px; border-radius: 10px; background: var(--panel); text-align: center; }
.ads-total strong { font-size: 1.2rem; }
.ads-total small { font-size: 0.74rem; color: var(--muted); }
.ads-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 50dvh; overflow-y: auto; }
.ad-item { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.ad-inativo { opacity: 0.65; }
.ad-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ad-top > div { display: grid; gap: 2px; }
.ad-top small { color: var(--muted); font-size: 0.78rem; }
.ad-top a, .ad-config a { color: var(--cyan); }
.ad-funil { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.84rem; color: var(--ink-soft); }
.ad-config { color: var(--muted); font-size: 0.8rem; }
.ad-editar summary { cursor: pointer; color: var(--cyan); font-weight: 600; font-size: 0.86rem; }
.ad-form { display: grid; gap: 10px; margin-top: 10px; }
.ad-form input, .ad-form select {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.ad-form input:focus, .ad-form select:focus { outline: none; border-color: var(--cyan); }
.ad-form .btn-primary { justify-self: end; width: auto; padding: 9px 18px; }

/* Transcrição do áudio */
.transcricao {
  margin: 6px 8px 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(15, 43, 72, 0.06);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
:root[data-theme="dark"] .transcricao { background: rgba(255, 255, 255, 0.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .transcricao { background: rgba(255, 255, 255, 0.06); } }
.transcricao p { margin: 3px 0 0; color: var(--ink); line-height: 1.4; }
.trans-rotulo { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.trans-rotulo svg { width: 13px; height: 13px; }
.trans-andamento { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.trans-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
@media (prefers-reduced-motion: no-preference) {
  .trans-ponto { animation: grav-pisca 1s ease-in-out infinite; }
}
.trans-vazia { color: var(--muted); font-style: italic; }
.trans-vazia .link { font-style: normal; font-size: 0.84rem; }
.trans-pedir { margin: 4px 8px 0; font-size: 0.82rem; }
.trans-pedir svg { width: 14px; height: 14px; }