/* ============================================================
   TELA · JORDÃO IA (/mentor)
   ============================================================
   Recriação da rota real. Toda regra abaixo é conversão direta de
   src/app/(app)/mentor/mentor.css, com as medidas px traduzidas pra
   cqw na escala de referência de 1600px (1cqw = 16px).

   Só existe aqui o que existe lá. Onde uma regra foi acrescentada por
   necessidade da demonstração (troca de estado, por exemplo), está
   marcada com /* DEMO */ /* e não representa o produto.
   ============================================================ */

/* ─── Página do mentor · mentor.css → .mentor-page ─────────── */
.mentor {
  position: absolute;
  inset: 0;
  background: var(--m-bg);
  color: var(--m-ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875cqw;              /* 14px */
  line-height: 1.55;
}
/* Textura de papel · dois radial-gradient quase invisíveis */
.mentor::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(245, 197, 24, 0.03) 0%, transparent 35%),
    radial-gradient(circle at 86% 78%, rgba(0, 0, 0, 0.015) 0%, transparent 40%);
  z-index: 0;
}
.mentor > * { position: relative; z-index: 1; }
.mentor button { font-family: inherit; cursor: pointer; }

/* ─── Raiz de duas colunas · .mt-root ──────────────────────── */
.mt-root { display: flex; height: 100%; }

/* ============================================================
   LISTA DE CONVERSAS · .mt-sidebar (260px)
   ============================================================ */
.mt-sidebar {
  width: 16.25cqw;
  flex-shrink: 0;
  border-right: 0.0625cqw solid var(--m-rule);
  background: var(--m-bg-soft);
  display: flex;
  flex-direction: column;
}
.mt-sidebar-head {
  padding: 0.875cqw 1cqw;
  border-bottom: 0.0625cqw solid var(--m-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5cqw;
}
.mt-sidebar-title {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  font-size: 0.875cqw;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.mt-sidebar-title svg { width: 1cqw; height: 1cqw; color: var(--m-yellow); }
.mt-sidebar-new {
  display: inline-flex;
  align-items: center;
  gap: 0.25cqw;
  background: var(--m-yellow);
  color: var(--m-ink);
  border: 0;
  padding: 0.375cqw 0.625cqw;
  border-radius: 0.5cqw;
  font-size: 0.719cqw;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.12s, box-shadow 0.12s;
}
.mt-sidebar-new:hover {
  background: var(--m-yellow-deep);
  box-shadow: 0 0.125cqw 0.5cqw var(--m-glow);
}
.mt-sidebar-new svg { width: 0.75cqw; height: 0.75cqw; }

.mt-sidebar-list { flex: 1; overflow-y: auto; padding: 0.5cqw 0; }
.mt-sidebar-empty {
  padding: 1.5cqw 1cqw;
  font-size: 0.75cqw;
  color: var(--m-ink-mute);
  line-height: 1.5;
}
.mt-sidebar-group h4 {
  font-size: 0.594cqw;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
  padding: 0.75cqw 1cqw 0.25cqw;
  margin: 0;
}
.mt-sidebar-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.375cqw;
  padding: 0.563cqw 1cqw;
  cursor: pointer;
  transition: background 0.1s;
  border-left: 0.125cqw solid transparent;
}
.mt-sidebar-row:hover { background: var(--m-bg); }
.mt-sidebar-row.active {
  background: var(--m-bg);
  border-left-color: var(--m-yellow);
}
.mt-sidebar-row .row-body { flex: 1; min-width: 0; }
.mt-sidebar-row .row-title {
  font-size: 0.8125cqw;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mt-sidebar-row.active .row-title { font-weight: 700; }
.mt-sidebar-row .row-time {
  font-size: 0.656cqw;
  color: var(--m-ink-dim);
  margin-top: 0.125cqw;
}
.mt-sidebar-row .row-menu-btn {
  opacity: 0;
  background: transparent;
  border: 0;
  padding: 0.25cqw;
  border-radius: 0.25cqw;
  color: var(--m-ink-dim);
  transition: opacity 0.1s, background 0.1s;
}
.mt-sidebar-row:hover .row-menu-btn { opacity: 1; }
.mt-sidebar-row .row-menu-btn:hover { background: var(--m-rule); color: var(--m-ink); }
.mt-sidebar-row .row-menu-btn svg { width: 0.875cqw; height: 0.875cqw; display: block; }

/* Menu de contexto da conversa · abre no clique dos três pontos */
.mt-sidebar-menu {
  position: absolute;
  top: 2cqw;
  right: 0.5cqw;
  z-index: 10;
  background: var(--m-bg);
  border: 0.0625cqw solid var(--m-rule);
  border-radius: 0.5cqw;
  padding: 0.25cqw;
  box-shadow: var(--sombra-menu);
  min-width: 8.75cqw;
}
.mt-sidebar-menu button {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.375cqw 0.625cqw;
  font-size: 0.75cqw;
  color: var(--m-ink-soft);
  border-radius: 0.31cqw;
  text-align: left;
  transition: background 0.1s;
}
.mt-sidebar-menu button:hover { background: var(--m-bg-soft); color: var(--m-ink); }
.mt-sidebar-menu button.danger { color: var(--m-danger); }
.mt-sidebar-menu button.danger:hover { background: rgba(220, 38, 38, 0.06); }
.mt-sidebar-menu svg { width: 0.75cqw; height: 0.75cqw; }

.mt-sidebar-foot { border-top: 0.0625cqw solid var(--m-rule); padding: 0.5cqw; }
.mt-sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 0.375cqw;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.375cqw 0.625cqw;
  font-size: 0.719cqw;
  color: var(--m-ink-mute);
  border-radius: 0.375cqw;
  transition: background 0.1s;
}
.mt-sidebar-toggle:hover { background: var(--m-bg); color: var(--m-ink); }
.mt-sidebar-toggle svg { width: 0.75cqw; height: 0.75cqw; }
.mt-sidebar-toggle.perigo { color: var(--m-danger); margin-top: 0.125cqw; }

/* ============================================================
   PALCO · .mt-stage-wrap (auto / 1fr / auto)
   ============================================================ */
.mt-stage-wrap {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  min-width: 0;
}
.mt-header {
  padding: 0.75cqw 1.5cqw;
  border-bottom: 0.0625cqw solid var(--m-rule);
  background: var(--m-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75cqw;
}
.mt-header-meta {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  font-size: 0.719cqw;
  color: var(--m-ink-mute);
}
.mt-header-meta .star { color: var(--m-yellow); width: 0.75cqw; height: 0.75cqw; }
.mt-header-meta strong { color: var(--m-ink); font-weight: 700; }
.mt-header-meta .scope-badge {
  background: var(--m-bg-soft);
  border: 0.0625cqw solid var(--m-rule);
  color: var(--m-ink-mute);
  font-size: 0.656cqw;
  font-weight: 600;
  padding: 0.125cqw 0.5cqw;
  border-radius: 999px;
}
.mt-header-title {
  font-size: 0.8125cqw;
  font-weight: 700;
  color: var(--m-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.125cqw;
}

.mt-stage {
  overflow-y: auto;                 /* o palco rola no produto */
  min-height: 0;
  padding: 1.75cqw 1.5cqw 0.75cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mt-thread {
  width: 100%;
  max-width: 47.5cqw;               /* 760px */
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
}

/* ============================================================
   ESTADO VAZIO · saudação + insights + chips
   ============================================================ */
.mt-greet { display: flex; gap: 1cqw; align-items: flex-start; }
.mt-greet .photo {
  width: 5.25cqw;                   /* 84px */
  height: 5.25cqw;
  border-radius: 50%;
  background: var(--m-bg-soft);
  border: 0.1875cqw solid var(--m-yellow);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0.25cqw 1.125cqw rgba(245, 197, 24, 0.25);
}
.mt-greet .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Bolinha verde de status · pseudo-elemento no produto */
.mt-greet .photo::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 0.875cqw;
  height: 0.875cqw;
  background: var(--m-success);
  border: 0.1875cqw solid var(--m-bg);
  border-radius: 50%;
}
.mt-greet .text { flex: 1; padding-top: 0.125cqw; min-width: 0; }
.mt-greet .name { font-size: 0.8125cqw; font-weight: 700; margin-bottom: 0.125cqw; }
.mt-greet .name .sub { font-weight: 500; color: var(--m-ink-mute); font-size: 0.75cqw; margin-left: 0.25cqw; }
.mt-greet h1 {
  font-weight: 700;
  font-size: 1.375cqw;              /* 22px */
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0.25cqw 0 0.375cqw;
}
.mt-greet .body { font-size: 0.906cqw; color: var(--m-ink-soft); line-height: 1.55; }
.mt-greet .body b { color: var(--m-ink); font-weight: 600; }
.mt-greet .dica-escopo { margin-top: 0.75cqw; font-size: 0.719cqw; color: var(--m-ink-mute); }
.mt-greet .dica-escopo strong { color: var(--m-ink); }

.mt-insight-list { margin-left: 6.25cqw; display: grid; gap: 0.5cqw; }
.mt-insight {
  display: flex;
  align-items: flex-start;
  gap: 0.625cqw;
  background: var(--m-bg-card);
  border: 0.0625cqw solid var(--m-rule);
  padding: 0.75cqw 0.875cqw;
  border-radius: 0.625cqw;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
  color: var(--m-ink);
  width: 100%;
}
.mt-insight:hover {
  border-color: var(--m-yellow);
  background: var(--m-bg-tint);
  transform: translateY(-0.0625cqw);
}
.mt-insight .icon {
  width: 1.875cqw;
  height: 1.875cqw;
  border-radius: 0.44cqw;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mt-insight .icon svg { width: 0.875cqw; height: 0.875cqw; }
.mt-insight .icon.kind-replied { background: var(--m-kind-replied-bg); color: var(--m-kind-replied-fg); }
.mt-insight .icon.kind-meeting { background: var(--m-kind-meeting-bg); color: var(--m-kind-meeting-fg); }
.mt-insight .icon.kind-cooling { background: var(--m-kind-cooling-bg); color: var(--m-kind-cooling-fg); }
.mt-insight .icon.kind-overdue { background: var(--m-kind-overdue-bg); color: var(--m-kind-overdue-fg); }
/* display:block porque no produto estes três são <div>; aqui são <span>
   dentro de um <button> (evita aninhar div em button). */
.mt-insight .text { flex: 1; min-width: 0; display: block; }
.mt-insight .title-row { display: block; font-size: 0.8125cqw; font-weight: 600; line-height: 1.35; }
.mt-insight .sub { display: block; font-size: 0.719cqw; color: var(--m-ink-mute); margin-top: 0.125cqw; line-height: 1.4; }
.mt-insight .cta {
  font-size: 0.688cqw;
  font-weight: 700;
  color: var(--m-ink-mute);
  flex-shrink: 0;
  align-self: center;
  letter-spacing: 0.01em;
}
.mt-insight:hover .cta { color: var(--m-ink); }

.mt-quickprompts { margin-left: 6.25cqw; margin-top: 0.25cqw; }
.mt-quickprompts-label {
  font-size: 0.625cqw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
  margin-bottom: 0.375cqw;
}
.mt-quickprompts-chips { display: flex; flex-wrap: wrap; gap: 0.375cqw; }

/* ============================================================
   MENSAGENS
   ============================================================ */
.mt-says { display: flex; gap: 0.875cqw; align-items: flex-start; }
.mt-says .photo {
  width: 3cqw;                      /* 48px */
  height: 3cqw;
  border-radius: 50%;
  background: var(--m-bg-soft);
  border: 0.125cqw solid var(--m-yellow);
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 0.125cqw;
}
.mt-says .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mt-says-body { flex: 1; font-size: 0.906cqw; line-height: 1.6; min-width: 0; }
.mt-says-body .meta {
  font-size: 0.719cqw;
  color: var(--m-ink-mute);
  margin-bottom: 0.375cqw;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.375cqw;
}
.mt-says-body .meta .nome { color: var(--m-ink); font-weight: 700; }

/* Markdown renderizado · .mt-md */
.mt-md p { margin: 0 0 0.625cqw; }
.mt-md p:last-child { margin-bottom: 0; }
.mt-md b {
  color: var(--m-ink);
  font-weight: 700;
  /* Grifo amarelo por gradiente · marca registrada da resposta do Jordão */
  background: linear-gradient(180deg, transparent 65%, var(--m-yellow-soft) 65%);
  padding: 0 0.0625cqw;
}
.mt-md .deal-mention {
  display: inline;
  background: var(--m-yellow-soft);
  color: var(--m-ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.0625cqw 0.375cqw;
  border-radius: 0.25cqw;
  transition: background 0.12s;
}
.mt-md .deal-mention:hover { background: var(--m-yellow); }
.mt-md .stream-caret {
  display: inline-block;
  width: 0.125cqw;
  height: 0.875cqw;
  background: var(--m-ink-mute);
  animation: mt-caret 1s steps(1) infinite;
  vertical-align: middle;
  margin-left: 0.0625cqw;
}

/* Bolha do usuário · raio 14/14/4/14, encostada à direita */
.mt-user {
  align-self: flex-end;
  max-width: 80%;
  background: var(--m-bg-soft);
  border: 0.0625cqw solid var(--m-rule);
  padding: 0.625cqw 0.875cqw;
  border-radius: 0.875cqw 0.875cqw 0.25cqw 0.875cqw;
  font-size: 0.875cqw;
  line-height: 1.5;
}

/* ============================================================
   TYPING · 3 pontos
   ============================================================ */
.mt-typing { display: flex; gap: 0.875cqw; align-items: flex-start; }
.mt-typing .photo {
  width: 3cqw; height: 3cqw;
  border-radius: 50%;
  border: 0.125cqw solid var(--m-yellow);
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 0.125cqw;
}
.mt-typing .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mt-typing .col { display: flex; flex-direction: column; gap: 0.25cqw; }
.mt-typing .dots {
  display: inline-flex;
  align-items: center;
  gap: 0.25cqw;
  background: var(--m-bg-soft);
  border-radius: 0.875cqw;
  padding: 0.625cqw 0.875cqw;
  margin-top: 0.125cqw;
  width: fit-content;
}
.mt-typing .dots span {
  width: 0.375cqw;
  height: 0.375cqw;
  background: var(--m-ink-mute);
  border-radius: 50%;
  animation: mt-typing-anim 1.4s infinite ease-in-out;
}
.mt-typing .dots span:nth-child(2) { animation-delay: 0.15s; }
.mt-typing .dots span:nth-child(3) { animation-delay: 0.3s; }
.mt-typing .hint {
  font-size: 0.688cqw;
  color: var(--m-ink-mute);
  font-style: italic;
  margin-left: 0.25cqw;
}

/* ============================================================
   FEEDBACK 👍/👎 e CONFIRMAÇÃO
   ============================================================ */
.mt-feedback { display: flex; gap: 0.25cqw; margin-top: -0.375cqw; opacity: 0.5; transition: opacity 0.15s; }
.mt-feedback:hover { opacity: 1; }
.mt-feedback-btn {
  background: transparent;
  border: 0.0625cqw solid var(--m-rule);
  color: var(--m-ink-mute);
  width: 1.5cqw; height: 1.5cqw;
  display: grid; place-items: center;
  border-radius: 0.375cqw;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mt-feedback-btn svg { width: 0.75cqw; height: 0.75cqw; }
.mt-feedback-btn:hover { background: var(--m-bg-soft); color: var(--m-ink); border-color: var(--m-ink); }
.mt-feedback-btn.ativo {
  background: var(--m-success-soft);
  color: var(--m-success);
  border-color: var(--m-success);
  opacity: 1;
}

.mt-confirm {
  margin-left: 2.5cqw;
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0.44cqw 0.875cqw;
  background: var(--m-success-soft);
  color: var(--m-success);
  font-size: 0.781cqw;
  font-weight: 600;
  border-radius: 999px;
  width: fit-content;
}
.mt-confirm svg { width: 0.75cqw; height: 0.75cqw; }

/* ============================================================
   ARTIFACT · card de ação inline
   ============================================================ */
.mt-artifact {
  margin-left: 2.5cqw;
  background: var(--m-bg-card);
  border: 0.0625cqw solid var(--m-rule);
  border-radius: 0.75cqw;
  overflow: hidden;
  box-shadow: var(--sombra-card);
  animation: mt-card-in 0.22s ease-out;
}
.mt-art-head {
  display: flex;
  align-items: center;
  gap: 0.625cqw;
  padding: 0.625cqw 0.875cqw;
  border-bottom: 0.0625cqw solid var(--m-rule-soft);
}
.mt-art-pin {
  width: 1.5cqw; height: 1.5cqw;
  border-radius: 0.44cqw;
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--m-yellow);
  color: var(--m-ink);
}
/* Variantes por tipo de tool · mentor.css:819-821 */
.mt-art-pin.note     { background: var(--m-yellow-soft); color: var(--m-yellow-deep); }
.mt-art-pin.activity { background: rgba(37, 99, 235, 0.10); color: #1D4ED8; }
.mt-art-pin.whats    { background: var(--m-yellow); color: var(--m-ink); }

/* Corpo e rodapé do card · mentor.css:853-938 */
.mt-art-body { padding: 0.75cqw 0.875cqw; }
.mt-art-body .field { display: flex; flex-direction: column; gap: 0.25cqw; }
.mt-art-body .field + .field { margin-top: 0.625cqw; }
.mt-art-body .field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.625cqw; margin-top: 0.625cqw;
}
.mt-art-body .field-row .field { margin-top: 0; }
.mt-art-body .field-label {
  font-size: 0.625cqw; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--m-ink-dim);
}
.mt-art-body .campo {
  font-size: 0.8125cqw; color: var(--m-ink);
  background: var(--m-bg);
  border: 0.0625cqw solid var(--m-rule);
  border-radius: 0.5cqw;
  padding: 0.5cqw 0.625cqw;
}
.mt-art-foot {
  display: flex; align-items: center; gap: 0.5cqw;
  padding: 0.625cqw 0.875cqw;
  border-top: 0.0625cqw solid var(--m-rule-soft);
  background: var(--m-bg-soft);
}
.mt-art-foot .grow { flex: 1; }
.mt-art-pin svg { width: 0.688cqw; height: 0.688cqw; }
.mt-art-titles { flex: 1; min-width: 0; }
.mt-art-titles .t { font-weight: 700; font-size: 0.8125cqw; letter-spacing: -0.005em; }
.mt-art-titles .s { font-size: 0.688cqw; color: var(--m-ink-mute); margin-top: 0.06cqw; }
.mt-art-status-msg { padding: 0 0.875cqw 0.75cqw; font-size: 0.719cqw; font-weight: 600; }
.mt-art-status-msg.erro { color: var(--m-danger); }

/* Aviso de lead divergente · bloqueia o envio */
.mt-art-alerta {
  margin: 0 0.875cqw 0.5cqw;
  padding: 0.5cqw 0.625cqw;
  border-radius: 0.5cqw;
  background: rgba(220, 38, 38, 0.08);
  border: 0.0625cqw solid rgba(220, 38, 38, 0.35);
  font-size: 0.75cqw;
  line-height: 1.45;
  color: #b91c1c;
}

/* WhatsApp em 2 colunas · .mt-wa-art */
.mt-wa-art { display: grid; grid-template-columns: 1fr 13.75cqw; }
.mt-wa-main { border-right: 0.0625cqw solid var(--m-rule); min-width: 0; display: flex; flex-direction: column; }
.mt-wa {
  background: var(--m-bg-tint);
  padding: 0.875cqw;
  display: flex;
  flex-direction: column;
  gap: 0.31cqw;
  max-height: 11.25cqw;             /* 180px · tool-cards.css do produto */
  overflow-y: auto;
  flex: 1;
  min-height: 5.25cqw;
}
.mt-wa-day {
  align-self: center;
  background: var(--m-bg-card);
  font-size: 0.594cqw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-ink-mute);
  padding: 0.125cqw 0.563cqw;
  border-radius: 999px;
  border: 0.0625cqw solid var(--m-rule-soft);
  margin: 0.125cqw 0;
}
.mt-bubble {
  max-width: 78%;
  padding: 0.44cqw 0.688cqw 0.31cqw;
  font-size: 0.781cqw;
  line-height: 1.4;
  border-radius: 0.688cqw;
}
.mt-bubble.in {
  background: var(--m-bg-card);
  border: 0.0625cqw solid var(--m-rule-soft);
  align-self: flex-start;
  border-bottom-left-radius: 0.19cqw;
}
.mt-bubble.out {
  background: var(--m-wa-out);
  align-self: flex-end;
  border-bottom-right-radius: 0.19cqw;
}
.mt-bubble.suggested {
  background: var(--m-yellow-soft);
  border: 0.094cqw dashed var(--m-yellow-deep);
  align-self: flex-end;
  position: relative;
  margin-top: 0.75cqw;
}
/* Etiqueta fixa no CSS do produto · texto literal, não parametrizado */
.mt-bubble.suggested::before {
  content: "PROPOSTA DO JORDÃO";
  position: absolute;
  top: -0.563cqw;
  right: 0.5cqw;
  background: var(--m-ink);
  color: var(--m-yellow);
  font-size: 0.5cqw;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 0.125cqw 0.44cqw;
  border-radius: 0.25cqw;
}
.mt-bubble .time { font-size: 0.563cqw; color: var(--m-ink-mute); margin-left: 0.375cqw; }

.mt-wa-side {
  background: var(--m-bg-soft);
  padding: 0.875cqw;
  display: flex;
  flex-direction: column;
  gap: 0.75cqw;
  font-size: 0.75cqw;
}
.mt-wa-side .lbl {
  display: block;
  font-size: 0.594cqw;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
  margin-bottom: 0.25cqw;
}
.mt-wa-side .ctx-block .val { font-weight: 700; font-size: 0.875cqw; }
.mt-wa-side .ctx-deal-value { display: block; margin-top: 0.25cqw; font-size: 0.688cqw; color: var(--m-ink-mute); font-weight: 600; }
.mt-wa-side .ctx-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5cqw;
  padding: 0.625cqw 0;
  border-top: 0.0625cqw solid var(--m-rule);
  border-bottom: 0.0625cqw solid var(--m-rule);
}
.mt-wa-side .ctx-stats .lbl { font-size: 0.563cqw; letter-spacing: 0.08em; margin-bottom: 0.125cqw; }
.mt-wa-side .ctx-stats .val { font-weight: 700; font-size: 0.8125cqw; }
.mt-wa-side .ctx-tone { font-size: 0.719cqw; color: var(--m-ink-soft); line-height: 1.4; }
.mt-wa-side .ctx-tone b { color: var(--m-ink); font-weight: 700; }
.mt-wa-side .ctx-actions { display: flex; flex-direction: column; gap: 0.375cqw; margin-top: auto; }
.mt-wa-side .ui-btn { justify-content: center; }
.mt-wa-side .ui-btn svg { width: 0.688cqw; height: 0.688cqw; }

.mt-wa-composer { padding: 0.75cqw 0.875cqw; background: var(--m-bg); border-top: 0.0625cqw solid var(--m-rule-soft); }
.mt-wa-composer .variations { display: flex; flex-wrap: wrap; gap: 0.31cqw; margin-bottom: 0.5cqw; }
.mt-wa-composer .var-chip {
  background: var(--m-bg-card);
  border: 0.0625cqw solid var(--m-rule);
  color: var(--m-ink-soft);
  padding: 0.25cqw 0.625cqw;
  border-radius: 999px;
  font-size: 0.688cqw;
  font-weight: 600;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mt-wa-composer .var-chip:hover { background: var(--m-yellow-soft); border-color: var(--m-yellow); color: var(--m-ink); }
.mt-wa-composer .var-chip.active { background: var(--m-yellow); border-color: var(--m-yellow); color: var(--m-ink); }
.mt-wa-composer .caixa {
  width: 100%;
  font-family: inherit;
  font-size: 0.8125cqw;
  color: var(--m-ink);
  background: var(--m-bg);
  border: 0.0625cqw solid var(--m-rule);
  border-radius: 0.5cqw;
  padding: 0.5cqw 0.625cqw;
  line-height: 1.45;
  min-height: 3.4cqw;
}

/* Gravação de áudio */
.mt-wa-rec {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  background: rgba(220, 38, 38, 0.08);
  border-radius: 0.5cqw;
  padding: 0.5cqw 0.75cqw;
  font-size: 0.75cqw;
  color: var(--m-danger);
  font-weight: 600;
  margin: 0.625cqw 0.875cqw;
}
.mt-wa-rec .pulse {
  width: 0.5cqw; height: 0.5cqw;
  background: var(--m-danger);
  border-radius: 50%;
  animation: mt-pulse 1.2s infinite;
}

/* ============================================================
   TOAST DESFAZER
   ============================================================ */
.mt-undo-toast {
  margin: 0 auto 0.5cqw;
  display: flex;
  align-items: center;
  gap: 0.75cqw;
  background: var(--m-ink);
  color: var(--m-bg);
  padding: 0.375cqw 0.875cqw;
  border-radius: 999px;
  font-size: 0.75cqw;
  font-weight: 500;
  width: fit-content;
  animation: mt-undo-in 0.2s ease-out;
}
.mt-undo-btn {
  background: transparent;
  border: 0;
  color: var(--m-yellow);
  font-size: 0.75cqw;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.125cqw;
}

/* ============================================================
   COMPOSER PRINCIPAL
   ============================================================ */
.mt-input {
  padding: 0.75cqw 1.5cqw 1cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  background: var(--m-bg);
  border-top: 0.0625cqw solid var(--m-rule);
}
.mt-input-inner { width: 100%; max-width: 47.5cqw; position: relative; }
.mt-input-box {
  display: flex;
  align-items: flex-end;
  gap: 0.5cqw;
  background: var(--m-bg-soft);
  border: 0.094cqw solid var(--m-rule);
  border-radius: 0.875cqw;
  padding: 0.625cqw 0.75cqw;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.mt-input-box:focus-within,
.mt-input-box.focado {
  border-color: var(--m-ink);
  background: var(--m-bg);
  box-shadow: 0 0 0 0.25cqw rgba(245, 197, 24, 0.18);
}
.mt-input-box .campo {
  flex: 1;
  color: var(--m-ink-mute);
  font-size: 0.875cqw;
  line-height: 1.5;
  padding: 0.125cqw 0;
  min-height: 1.375cqw;
}
.mt-input-box .campo.preenchido { color: var(--m-ink); }
.mt-input-send {
  width: 2.125cqw; height: 2.125cqw;
  border-radius: 0.563cqw;
  background: var(--m-yellow);
  color: var(--m-ink);
  border: 0;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0.19cqw 0.625cqw var(--m-glow);
  transition: background 0.12s;
}
.mt-input-send:hover { background: var(--m-yellow-deep); }
.mt-input-send svg { width: 0.875cqw; height: 0.875cqw; }
.mt-input-send.desabilitado {
  background: var(--m-rule);
  color: var(--m-ink-dim);
  box-shadow: none;
  cursor: not-allowed;
}
.mt-input-foot { margin-top: 0.5cqw; font-size: 0.656cqw; color: var(--m-ink-dim); text-align: center; }
.mt-input-foot b { color: var(--m-ink-mute); font-weight: 600; }

/* Popover de menção · abre acima do composer quando digita @ */
.mt-mention-pop {
  position: absolute;
  bottom: calc(100% + 0.5cqw);
  left: 0;
  z-index: 30;
  width: 20cqw;
  background: var(--m-bg);
  border: 0.0625cqw solid var(--m-rule);
  border-radius: 0.75cqw;
  box-shadow: var(--sombra-popover);
  overflow: hidden;
}
.mt-mention-pop .cabecalho {
  padding: 0.375cqw 0.75cqw;
  border-bottom: 0.0625cqw solid var(--m-rule);
  font-size: 0.594cqw;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
}
.mt-mention-pop .item {
  display: flex;
  gap: 0.5cqw;
  align-items: flex-start;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.5cqw 0.75cqw;
  text-align: left;
  transition: background 0.1s;
}
.mt-mention-pop .item:hover,
.mt-mention-pop .item.ativo { background: var(--m-yellow-soft); }
.mt-mention-pop .item .at { color: var(--m-ink-dim); margin-top: 0.125cqw; }
.mt-mention-pop .item .rotulo { display: block; font-size: 0.8125cqw; font-weight: 600; }
.mt-mention-pop .item .sub { display: block; font-size: 0.688cqw; color: var(--m-ink-mute); margin-top: 0.06cqw; }
.mt-scope .menu button .rotulo,
.mt-scope .menu button .dica { display: block; }
.mt-mention-pop .rodape {
  padding: 0.375cqw 0.75cqw;
  border-top: 0.0625cqw solid var(--m-rule);
  font-size: 0.594cqw;
  color: var(--m-ink-dim);
}

/* ============================================================
   SELETOR DE ESCOPO
   ============================================================ */
.mt-scope { position: relative; }
.mt-scope .trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25cqw;
  background: var(--m-bg);
  border: 0.0625cqw solid var(--m-rule);
  padding: 0.31cqw 0.625cqw;
  border-radius: 0.5cqw;
  font-size: 0.719cqw;
  color: var(--m-ink-soft);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.mt-scope .trigger:hover { background: var(--m-bg-soft); border-color: var(--m-ink); color: var(--m-ink); }
.mt-scope .trigger svg { width: 0.75cqw; height: 0.75cqw; }
.mt-scope .menu {
  position: absolute;
  top: calc(100% + 0.375cqw);
  right: 0;
  z-index: 20;
  background: var(--m-bg);
  border: 0.0625cqw solid var(--m-rule);
  border-radius: 0.625cqw;
  padding: 0.375cqw;
  box-shadow: 0 0.375cqw 1.125cqw rgba(0, 0, 0, 0.08);
  min-width: 15cqw;
}
.mt-scope .menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.06cqw;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.5cqw 0.625cqw;
  border-radius: 0.375cqw;
  text-align: left;
  transition: background 0.1s;
}
.mt-scope .menu button:hover { background: var(--m-bg-soft); }
.mt-scope .menu button.ativo { background: var(--m-yellow-soft); }
.mt-scope .menu button .rotulo { font-size: 0.781cqw; font-weight: 700; color: var(--m-ink); }
.mt-scope .menu button .dica { font-size: 0.656cqw; color: var(--m-ink-mute); }

/* ============================================================
   DEMO · troca de estado
   ============================================================
   Nada abaixo existe no produto. É o mecanismo que permite ver cada
   estado da tela sem backend. O produto troca de estado por dado real.
   ------------------------------------------------------------ */
/* Esconde tudo que declara data-estado e NÃO está marcado como visível.
   O script põe/tira a classe .mostrar conforme o estado ativo.
   Feito assim (e não com display:revert) porque revert devolveria o
   valor do navegador, quebrando os elementos que são flex ou grid. */
[data-estado]:not(.mostrar) { display: none; }

/* A lista de conversas só fica vazia no primeiro acesso */
.tela:not([data-estado-ativo="vazio-limpo"]) .mt-sidebar-empty { display: none; }
.tela[data-estado-ativo="vazio-limpo"] .mt-sidebar-group { display: none; }

/* Cascata de revelação · só no estado loop */
.tela[data-estado-ativo="loop"] [data-passo] { opacity: 0; }
.tela[data-estado-ativo="loop"] [data-passo="rA"] { animation: jia-rA 4.5s infinite; }
.tela[data-estado-ativo="loop"] [data-passo="rB"] { animation: jia-rB 4.5s infinite; }
.tela[data-estado-ativo="loop"] [data-passo="rC"] { animation: jia-rC 4.5s infinite; }
.tela[data-estado-ativo="loop"] [data-passo="rD"] { animation: jia-rD 4.5s infinite; }
.tela[data-estado-ativo="loop"] [data-passo="rE"] { animation: jia-rE 4.5s infinite; }
.tela[data-estado-ativo="loop"] [data-passo="rF"] { animation: jia-rF 4.5s infinite; }
.tela[data-estado-ativo="loop"] [data-passo="rG"] { animation: jia-rG 4.5s infinite; }
.tela[data-estado-ativo="loop"] .jia-typedots { animation: jia-typedots 4.5s infinite; }
/* Fora do loop, os blocos ficam parados e visíveis */
.tela:not([data-estado-ativo="loop"]) [data-passo] { opacity: 1; }
.tela[data-estado-ativo="loop"] .stream-caret { display: none; }

/* Os 3 pontinhos de "digitando" da vitrine · só existem no loop.
   No produto esse indicador é o .mt-typing separado, com a mesma função. */
.jia-typedots { display: none; gap: 0.1cqw; align-items: center; }
.jia-typedots span {
  width: 0.3cqw; height: 0.3cqw;
  border-radius: 50%;
  background: var(--m-yellow-deep);
}
.tela[data-estado-ativo="loop"] .jia-typedots { display: inline-flex; }

/* Sobreposições · ligadas por clique no script.js */
.oculto { display: none !important; }