/* ===========================================================================
   whatsapp.css — estilos do módulo de atendimento WhatsApp (E13).
   PORTADO da plataforma Atende (web/css/whatsapp.css) e ISOLADO sob `.wa-root`
   para não colidir com estilos de outras páginas. ENXUGADO para a onda 1
   (sem bot/campanha/IA/SLA/CSAT/custom-fields/flow-editor) e re-ancorado na
   paleta do painel da agência (teal #0c8a99) — o chat mantém a ambiência
   WhatsApp (fundo bege, balão outbound verde), que é semântica da conversa.
   ÚNICO CSS do módulo: as views montam DENTRO do painel (agencia.html carrega
   este arquivo; tokens.css/base.css do antigo shell standalone morreram —
   todas as variáveis vivem em `.wa-root`).
   =========================================================================== */

.wa-root {
  color-scheme: light;

  /* Brand (teal do painel) */
  --brand-25: #f2fbfc;
  --brand-50: #e3f4f6;
  --brand-100: #cdeaed;
  --brand-200: #a7dde1;
  --brand-300: #6fc9cf;
  --brand-400: #2fb0bb;
  --brand-500: #0c8a99;
  --brand-600: #0a6f7c;
  --brand-700: #0a5b66;
  --brand-800: #0a4551;
  --brand-900: #08323b;

  /* Neutral (alinhado a ink/muted/line do painel) */
  --neutral-0: #ffffff;
  --neutral-25: #fcfcfd;
  --neutral-50: #f4f6fb;
  --neutral-100: #eef0f7;
  --neutral-150: #e8ebf3;
  --neutral-200: #e3e8f2;
  --neutral-300: #cbd2e0;
  --neutral-400: #98a2b3;
  --neutral-500: #667085;
  --neutral-600: #475467;
  --neutral-700: #344054;
  --neutral-800: #1f2940;
  --neutral-900: #131b2c;

  /* Semantic (mesmos do painel) */
  --success-50: #e8f7ef;
  --success-500: #168a60;
  --success-700: #0f6b4a;
  --warning-50: #fff1df;
  --warning-500: #c97714;
  --warning-700: #9a5a0d;
  --danger-50: #ffe8e8;
  --danger-500: #c73e3e;
  --danger-700: #a53030;
  --info-50: #eaf2ff;
  --info-500: #2f6dd9;
  --info-700: #2456ab;
  --purple-50: #eef2f7;
  --purple-500: #5b6b8c;
  --purple-700: #3a4a63;

  /* Surfaces (chat mantém a ambiência WhatsApp) */
  --app-bg: #f4f6fb;
  --surface: #ffffff;
  --surface-subtle: #f8f9fc;
  --chat-bg: #efeae2;
  --chat-pattern: rgba(78, 93, 83, 0.055);
  --overlay: rgba(20, 24, 40, 0.48);

  /* Text */
  --text-primary: #1f2940;
  --text-secondary: #667085;
  --text-tertiary: #98a2b3;
  --text-inverse: #ffffff;
  --text-link: var(--brand-700);

  /* Borders */
  --border-subtle: #eef0f7;
  --border-default: #e3e8f2;
  --border-strong: #cbd2e0;
  --focus-ring: rgba(95, 92, 230, 0.22);

  /* Typography */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.375rem;

  /* Spacing: 4px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Radius */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(24, 34, 48, 0.05);
  --shadow-sm: 0 2px 8px rgba(24, 34, 48, 0.08);
  --shadow-md: 0 10px 24px rgba(24, 34, 48, 0.12);
  --shadow-lg: 0 20px 48px rgba(24, 34, 48, 0.18);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;

  /* Layout dos 3 painéis */
  --sidebar-width: 344px;
  --details-width: 332px;
  --header-height: 64px;

  box-sizing: border-box;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
}

.wa-root *, .wa-root *::before, .wa-root *::after { box-sizing: border-box; }
.wa-root button, .wa-root input, .wa-root textarea, .wa-root select { font: inherit; }
.wa-root button { color: inherit; }
.wa-root a { color: inherit; text-decoration: none; }
.wa-root img, .wa-root svg { display: block; }
.wa-root svg { flex: 0 0 auto; }
.wa-root h1, .wa-root h2, .wa-root h3, .wa-root h4, .wa-root p { margin: 0; }
.wa-root ul, .wa-root ol { margin: 0; padding: 0; list-style: none; }
.wa-root :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.wa-root ::selection { background: var(--brand-100); color: var(--brand-900); }
.wa-root ::-webkit-scrollbar { width: 10px; height: 10px; }
.wa-root ::-webkit-scrollbar-track { background: transparent; }
.wa-root ::-webkit-scrollbar-thumb { background: #c9d0dc; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
.wa-root ::-webkit-scrollbar-thumb:hover { background: #aeb7c6; border: 2px solid transparent; background-clip: content-box; }
.wa-root .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-root .muted { color: var(--text-secondary); }
.wa-root .subtle { color: var(--text-tertiary); }
.wa-root .text-danger { color: var(--danger-700); }
.wa-root .text-success { color: var(--success-700); }
.wa-root .text-warning { color: var(--warning-700); }

/* ── Páginas internas (filas, config) ─────────────────────────── */
.wa-root .page { height: 100%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.wa-root .page-scroll { flex: 1; overflow: auto; padding: var(--space-6); }
.wa-root .page-header {
  min-height: var(--header-height);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
}
.wa-root .page-title-wrap { min-width: 0; }
.wa-root .page-title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.015em; }
.wa-root .page-subtitle { margin-top: 3px; color: var(--text-secondary); font-size: var(--text-sm); }
.wa-root .page-actions { display: flex; align-items: center; gap: var(--space-2); }
.wa-root .section-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.wa-root .section-subtitle { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); }
.wa-root .grid { display: grid; gap: var(--space-4); }
.wa-root .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-root .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wa-root .stack { display: flex; flex-direction: column; gap: var(--space-4); }
.wa-root .row { display: flex; align-items: center; gap: var(--space-3); }
.wa-root .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ── Botões ───────────────────────────────────────────────────── */
.wa-root .btn {
  min-height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 650;
  font-size: var(--text-md);
  transition: background var(--duration-base), border-color var(--duration-base), box-shadow var(--duration-base), transform var(--duration-fast);
}
.wa-root .btn:hover { box-shadow: var(--shadow-xs); }
.wa-root .btn:active { transform: translateY(1px); }
.wa-root .btn-primary { color: #fff; background: var(--brand-500); border-color: var(--brand-500); }
.wa-root .btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.wa-root .btn-secondary { color: var(--text-primary); background: var(--surface); border-color: var(--border-default); }
.wa-root .btn-secondary:hover { background: var(--neutral-50); border-color: var(--border-strong); }
.wa-root .btn-danger { color: var(--danger-700); background: var(--danger-50); border-color: #f2c8c2; }
.wa-root .btn-ghost { min-height: 34px; padding: 0 9px; background: transparent; border-color: transparent; color: var(--text-secondary); }
.wa-root .btn-ghost:hover { background: var(--neutral-100); color: var(--text-primary); box-shadow: none; }
.wa-root .btn-icon { width: 38px; padding: 0; }
.wa-root .btn-sm { min-height: 32px; padding: 0 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.wa-root .btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }

/* ── Formulários ──────────────────────────────────────────────── */
.wa-root .field { display: flex; flex-direction: column; gap: 6px; }
.wa-root .field-label { font-size: var(--text-sm); font-weight: 650; color: var(--text-secondary); }
.wa-root .input, .wa-root .select, .wa-root .textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  background: var(--surface);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.wa-root .input, .wa-root .select { min-height: 40px; padding: 0 12px; }
.wa-root select.input { padding: 0 12px; }
.wa-root .textarea, .wa-root textarea.input { min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.wa-root .input:hover, .wa-root .select:hover, .wa-root .textarea:hover { border-color: var(--border-strong); }
.wa-root .input:focus, .wa-root .select:focus, .wa-root .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.wa-root .input::placeholder, .wa-root .textarea::placeholder { color: var(--neutral-400); }
.wa-root .input-icon-wrap { position: relative; }
.wa-root .input-icon-wrap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--neutral-400); }
.wa-root .input-icon-wrap .input { padding-left: 38px; }
.wa-root .search-input { background: var(--neutral-50); border-color: transparent; }
.wa-root .search-input:focus { background: #fff; }
.wa-root .checkbox { display: inline-flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.wa-root .checkbox input, .wa-root input[type="checkbox"] { accent-color: var(--brand-500); width: 16px; height: 16px; margin-top: 1px; }

/* ── Cartões ──────────────────────────────────────────────────── */
.wa-root .card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.wa-root .card-body { padding: 18px; }

/* ── Badges e chips ───────────────────────────────────────────── */
.wa-root .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.wa-root .badge-neutral { background: var(--neutral-100); color: var(--neutral-700); }
.wa-root .badge-brand { background: var(--brand-50); color: var(--brand-700); }
.wa-root .badge-success { background: var(--success-50); color: var(--success-700); }
.wa-root .badge-warning { background: var(--warning-50); color: var(--warning-700); }
.wa-root .badge-danger { background: var(--danger-50); color: var(--danger-700); }
.wa-root .badge-info { background: var(--info-50); color: var(--info-700); }
.wa-root .status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wa-root .chip {
  min-height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--surface);
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.wa-root .chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.wa-root .chip.active { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); font-weight: 700; }
.wa-root .chip.chip-queue:not(.active) { color: var(--brand-700); }

/* ── Avatar ───────────────────────────────────────────────────── */
.wa-root .avatar {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 750;
  color: #2b3350;
  background: #e2e3f7;
  overflow: hidden;
}
.wa-root .avatar-sm { width: 30px; height: 30px; font-size: var(--text-sm); }
.wa-root .avatar-lg { width: 56px; height: 56px; font-size: var(--text-lg); }
.wa-root .avatar-xl { width: 76px; height: 76px; font-size: var(--text-xl); }

/* ── Tabela (templates) ───────────────────────────────────────── */
.wa-root .table-wrap { overflow: auto; }
.wa-root .table { width: 100%; border-collapse: collapse; }
.wa-root .table th { height: 42px; padding: 0 14px; text-align: left; background: var(--neutral-50); color: var(--text-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 750; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.wa-root .table td { height: 54px; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.wa-root .table tr:last-child td { border-bottom: 0; }
.wa-root .table tbody tr:hover { background: var(--neutral-25); }
.wa-root .template-name { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; }

/* ── Segmentado (destino da transferência) ────────────────────── */
.wa-root .seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--neutral-100); border-radius: 9px; }
.wa-root .seg-btn { border: 0; background: transparent; padding: 6px 14px; border-radius: 7px; font: inherit; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.wa-root .seg-btn.active { background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px rgba(24, 34, 48, 0.12); }

/* ── Alertas ──────────────────────────────────────────────────── */
.wa-root .alert { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px; border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--text-sm); line-height: 1.45; }
.wa-root .alert-info { color: var(--info-700); background: var(--info-50); border-color: #d3e4fb; }
.wa-root .alert-warning { color: var(--warning-700); background: var(--warning-50); border-color: #f6dfba; }
.wa-root .alert-danger { color: var(--danger-700); background: var(--danger-50); border-color: #f2c8c2; }
.wa-root .alert-success { color: var(--success-700); background: var(--success-50); border-color: #cdeddd; }

/* ── Modal ────────────────────────────────────────────────────── */
.wa-root .modal-backdrop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--overlay); backdrop-filter: blur(2px); padding: 22px; }
.wa-root .modal { width: min(560px, 100%); max-width: none; max-height: calc(100vh - 44px); overflow: auto; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); animation: wa-modal-in var(--duration-slow) var(--ease-standard); }
.wa-root .modal-lg { width: min(900px, 100%); }
.wa-root .modal-header { padding: 19px 20px 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border-subtle); }
.wa-root .modal-title { font-size: var(--text-xl); font-weight: 750; }
.wa-root .modal-subtitle { margin-top: 4px; color: var(--text-secondary); font-size: var(--text-sm); }
.wa-root .modal-body { padding: 20px; }
.wa-root .modal-footer { padding: 14px 20px 18px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--border-subtle); }
@keyframes wa-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }

/* ── Toast ────────────────────────────────────────────────────── */
.wa-root.toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 500; display: flex; flex-direction: column; gap: 9px; pointer-events: none; }
.wa-root .toast { pointer-events: auto; min-width: 290px; max-width: 420px; padding: 12px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); background: #1c2035; color: #fff; display: flex; align-items: center; gap: 10px; animation: wa-toast-in var(--duration-slow) var(--ease-standard); cursor: pointer; }
.wa-root .toast.success svg { color: #6fe0b0; }
.wa-root .toast.error svg { color: #ff9a9a; }
.wa-root .toast.info svg { color: #9fb7ff; }
@keyframes wa-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── Estado vazio ─────────────────────────────────────────────── */
.wa-root .empty-state { min-height: 280px; display: grid; place-items: center; text-align: center; padding: 32px; }
.wa-root .empty-illustration { width: 80px; height: 80px; border-radius: 22px; background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; margin: 0 auto 15px; }
.wa-root .empty-title { font-weight: 750; font-size: var(--text-lg); }
.wa-root .empty-text { margin-top: 6px; color: var(--text-secondary); max-width: 400px; line-height: 1.5; }

/* ── Tooltip ──────────────────────────────────────────────────── */
.wa-root .has-tooltip { position: relative; }
.wa-root .has-tooltip::after { content: attr(data-tooltip); opacity: 0; pointer-events: none; position: absolute; z-index: 90; left: 50%; bottom: calc(100% + 7px); transform: translate(-50%, 3px); padding: 6px 8px; border-radius: 6px; background: #1c2035; color: #fff; font-size: var(--text-xs); white-space: nowrap; transition: opacity var(--duration-fast), transform var(--duration-fast); }
.wa-root .has-tooltip:hover::after { opacity: 1; transform: translate(-50%, 0); }
.wa-root .has-tooltip.tip-down::after { bottom: auto; top: calc(100% + 7px); transform: translate(-50%, -3px); z-index: 200; }
.wa-root .has-tooltip.tip-down:hover::after { transform: translate(-50%, 0); }

/* ── Inbox: 3 painéis ─────────────────────────────────────────── */
.wa-root .inbox-layout { height: 100%; display: grid; grid-template-columns: var(--sidebar-width) minmax(360px, 1fr) var(--details-width); overflow: hidden; background: var(--surface); }
.wa-root .inbox-sidebar { min-width: 0; border-right: 1px solid var(--border-default); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.wa-root .sidebar-head { padding: 14px 14px 12px; border-bottom: 1px solid var(--border-subtle); }
.wa-root .sidebar-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wa-root .sidebar-title { font-size: var(--text-xl); font-weight: 750; }
.wa-root .sidebar-actions { display: flex; gap: 3px; }
.wa-root .sidebar-search { margin-top: 12px; }
.wa-root .filter-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.wa-root .filter-chips > * { flex: none; }
.wa-root .filter-chips::-webkit-scrollbar { display: none; }
.wa-root .conversation-list { flex: 1; overflow-y: auto; }
.wa-root .conversation-item { position: relative; min-height: 76px; padding: 11px 12px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; border-bottom: 1px solid var(--border-subtle); transition: background var(--duration-fast); }
.wa-root .conversation-item:hover { background: var(--neutral-50); }
.wa-root .conversation-item.active { background: var(--brand-50); }
.wa-root .conversation-item.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--brand-500); border-radius: 0 3px 3px 0; }
.wa-root .conversation-main { min-width: 0; }
.wa-root .conversation-top, .wa-root .conversation-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-root .conversation-name { font-weight: 700; min-width: 0; }
.wa-root .conversation-time { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.wa-root .conversation-preview { margin-top: 5px; display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: var(--text-sm); min-width: 0; }
.wa-root .unread-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--brand-500); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.wa-root .channel-icon { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700); flex: 0 0 auto; }
.wa-root .conv-tag { font-size: 10px; color: var(--purple-700); background: var(--purple-50); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.wa-root .conv-tag.conv-queue { color: var(--brand-700); background: var(--brand-50); font-weight: 650; }
.wa-root .conv-bottom-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.wa-root .conversation-item.unread .conversation-name { font-weight: 800; }
.wa-root .conversation-item.unread .conversation-time { color: var(--brand-700); font-weight: 750; }
/* "Aguardando resposta" — a bola está com o atendente (cliente falou por último
   ou transferência do bot/IA, não encerrada). Destaque para saltar aos olhos. */
.wa-root .conversation-item.aguardando:not(.active) { background: var(--warning-50); }
.wa-root .conversation-item.aguardando:not(.active)::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--warning-700); border-radius: 0 3px 3px 0; }
.wa-root .conversation-item.aguardando .conversation-name { font-weight: 800; }
.wa-root .aguard-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warning-700); margin-right: 6px; vertical-align: middle; }
.wa-root .conv-tag.conv-aguardando { color: var(--warning-700); background: var(--warning-50); font-weight: 700; }
/* SLA: aguardando há muito tempo (>= 10 min) escala p/ VERMELHO (urgente) */
.wa-root .conversation-item.aguardando.urgente:not(.active) { background: var(--danger-50); }
.wa-root .conversation-item.aguardando.urgente:not(.active)::before { background: var(--danger-700); }
.wa-root .conversation-item.aguardando.urgente .aguard-dot { background: var(--danger-700); }
.wa-root .conv-tag.conv-aguardando.urgente { color: var(--danger-700); background: var(--danger-50); }
.wa-root .conv-prio-alta { color: var(--danger-700); background: var(--danger-50); font-weight: 600; }
.wa-root .conv-prio-baixa { color: var(--text-secondary); background: var(--neutral-100); }
.wa-root .wa-tag { border: 1px solid transparent; }
.wa-root .wa-tag-toggle.on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.wa-root .wa-tag-toggle.on:hover { background: var(--brand-600); color: #fff; }

/* ── Chat ─────────────────────────────────────────────────────── */
.wa-root .chat-panel { min-width: 0; display: flex; flex-direction: column; background: var(--chat-bg); overflow: hidden; }
.wa-root .chat-header { height: var(--header-height); flex: 0 0 auto; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wa-root .chat-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.wa-root .chat-name { font-weight: 720; }
.wa-root .chat-meta { margin-top: 3px; display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--text-xs); flex-wrap: wrap; }
.wa-root .chat-actions { display: flex; align-items: center; gap: 2px; }
.wa-root .window-banner { min-height: 42px; flex: 0 0 auto; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #fff8e8; color: #8c5d00; border-bottom: 1px solid #f8df9d; font-size: var(--text-sm); }
.wa-root .window-banner.open { background: #eef9f4; color: #176541; border-color: #d3eddf; }
.wa-root .chat-scroll { position: relative; flex: 1; overflow-y: auto; padding: 20px 6.5% 16px; background-color: var(--chat-bg); background-image: radial-gradient(var(--chat-pattern) 1px, transparent 1px), radial-gradient(var(--chat-pattern) 1px, transparent 1px); background-position: 0 0, 12px 12px; background-size: 24px 24px; }
.wa-root .day-separator { display: flex; justify-content: center; margin: 4px 0 18px; }
.wa-root .day-separator span { padding: 6px 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.9); color: var(--text-secondary); font-size: var(--text-xs); box-shadow: var(--shadow-xs); }
.wa-root .system-message { margin: 10px auto 16px; width: fit-content; max-width: 80%; padding: 7px 10px; border-radius: 7px; background: #fff5c7; color: #6e5c12; font-size: var(--text-xs); text-align: center; box-shadow: var(--shadow-xs); }
.wa-root .message-row { display: flex; margin: 4px 0; }
.wa-root .message-row.inbound { justify-content: flex-start; }
.wa-root .message-row.outbound { justify-content: flex-end; }
.wa-root .message-row.note { justify-content: center; }
.wa-root .message-bubble { position: relative; max-width: min(68%, 620px); padding: 8px 10px 6px; border-radius: 9px; box-shadow: 0 1px 1px rgba(24, 34, 48, 0.08); line-height: 1.42; overflow-wrap: anywhere; }
.wa-root .message-row.inbound .message-bubble { background: #fff; border-top-left-radius: 3px; }
.wa-root .message-row.outbound .message-bubble { background: #d9fdd3; border-top-right-radius: 3px; }
.wa-root .message-row.note .message-bubble { max-width: min(80%, 560px); background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #f59e0b; color: #713f12; border-radius: 10px; padding: 9px 12px 7px; box-shadow: 0 1px 2px rgba(180, 120, 10, 0.12); }
.wa-root .note-head { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 750; color: #b45309; margin-bottom: 4px; }
.wa-root .note-head .note-author { margin-left: auto; font-weight: 600; color: #92400e; opacity: 0.85; }
.wa-root .message-author { color: var(--brand-700); font-size: var(--text-xs); font-weight: 750; margin-bottom: 3px; }
.wa-root .message-text { padding-right: 48px; white-space: pre-wrap; }
.wa-root .message-meta { position: absolute; right: 8px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; color: #718078; font-size: 10px; }
.wa-root .message-status.read { color: #3a91df; }
.wa-root .message-status.failed { color: var(--danger-700); }

/* Mídia no balão */
.wa-root .wa-file-input { display: none; }
.wa-root .msg-media-img { display: block; max-width: 260px; max-height: 320px; border-radius: 8px; cursor: pointer; object-fit: cover; background: rgba(0, 0, 0, 0.05); min-width: 80px; min-height: 40px; }
.wa-root .msg-media-video { display: block; max-width: 280px; border-radius: 8px; background: #000; }
.wa-root .msg-media-audio { display: block; width: 244px; max-width: 60vw; height: 40px; margin: 2px 0; }
.wa-root .msg-media-doc { display: flex; align-items: center; gap: 9px; min-width: 200px; max-width: 280px; padding: 8px 10px; margin-bottom: 2px; border-radius: 8px; background: rgba(0, 0, 0, 0.05); color: inherit; text-decoration: none; }
.wa-root .msg-media-doc:hover { background: rgba(0, 0, 0, 0.09); }
.wa-root .msg-media-doc .doc-ic { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: var(--danger-50); color: var(--danger-700); }
.wa-root .msg-media-doc .doc-meta { display: flex; flex-direction: column; min-width: 0; }
.wa-root .msg-media-doc .doc-name { font-weight: 650; font-size: var(--text-sm); }
.wa-root .msg-media-doc .doc-size { font-size: 11px; color: var(--text-tertiary); }
.wa-root [data-media].media-failed { opacity: 0.55; }
.wa-root .message-row.outbound .msg-media-doc { background: rgba(0, 0, 0, 0.06); }

/* Cartão de localização no thread */
.wa-root .wa-card { display: flex; flex-direction: column; gap: 3px; }
.wa-root .wa-card-head { font-weight: 600; }
.wa-root .wa-card-title { font-weight: 600; }
.wa-root .wa-card-sub { font-size: 12px; color: var(--text-secondary); }
.wa-root .wa-card-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--brand-700); font-weight: 600; text-decoration: none; }
.wa-root .wa-card-link:hover { text-decoration: underline; }

/* ── Composer ─────────────────────────────────────────────────── */
.wa-root .chat-composer-wrap { flex: 0 0 auto; background: #f0f2f5; border-top: 1px solid rgba(0, 0, 0, 0.05); position: relative; }
.wa-root .composer-mode { height: 34px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; background: #fff6cf; color: #6b5810; font-size: var(--text-xs); }
.wa-root .composer-mode.note-mode { background: #fff0b8; }
.wa-root .chat-composer { min-height: 62px; padding: 9px 10px; display: flex; align-items: flex-end; gap: 6px; }
.wa-root .composer-input { flex: 1; min-height: 42px; max-height: 120px; resize: none; border: 0; outline: 0; padding: 11px 13px; border-radius: 10px; background: #fff; color: var(--text-primary); box-shadow: var(--shadow-xs); line-height: 1.4; }
.wa-root .send-btn { width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--brand-500); color: #fff; transition: background var(--duration-base), transform var(--duration-fast); }
.wa-root .send-btn:hover { background: var(--brand-600); }
.wa-root .send-btn:active { transform: scale(0.96); }
.wa-root .send-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.wa-root .template-composer { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Autocomplete @ inline (menção na nota) */
.wa-root .wa-mention-pop { position: absolute; left: 12px; right: 12px; bottom: 100%; margin-bottom: 6px; background: var(--surface); border: 1px solid var(--border-default); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); padding: 4px; max-height: 220px; overflow-y: auto; z-index: 30; display: flex; flex-direction: column; gap: 2px; }
.wa-root .wa-mention-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text-primary); }
.wa-root .wa-mention-opt:hover { background: var(--brand-50); }

/* ── Respostas rápidas (modal ⚡) ─────────────────────────────── */
.wa-root .qr-form { display: grid; gap: 8px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border-default); }
.wa-root .qr-form textarea { resize: vertical; min-height: 60px; }
.wa-root .qr-list { display: grid; gap: 8px; }
.wa-root .qr-item { display: flex; align-items: stretch; gap: 6px; }
.wa-root .qr-pick { flex: 1; display: grid; gap: 3px; text-align: left; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.wa-root .qr-pick:hover { border-color: var(--brand-400); background: var(--brand-25); }
.wa-root .qr-title { font-weight: 700; font-size: var(--text-sm); color: var(--text-primary); }
.wa-root .qr-text { font-size: var(--text-xs); color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa-root .qr-actions { display: flex; flex-direction: column; justify-content: center; gap: 2px; }

/* ── Sino de notificações ─────────────────────────────────────── */
.wa-root .notif-bell { position: relative; }
.wa-root .notif-badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; background: var(--danger-500); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; }
.wa-root .notif-list { display: flex; flex-direction: column; }
.wa-root .notif-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; text-align: left; padding: 9px 8px; border: 0; background: transparent; border-bottom: 1px solid var(--neutral-100); cursor: pointer; font-size: 13px; color: var(--text-primary); }
.wa-root .notif-item:hover { background: var(--neutral-50); }
.wa-root .notif-item.unread { font-weight: 650; }
.wa-root .notif-item.unread::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); flex: 0 0 7px; }
.wa-root .notif-time { color: var(--text-secondary); font-size: 11px; font-weight: 400; white-space: nowrap; }

/* ── Painel do contato ────────────────────────────────────────── */
.wa-root .contact-panel { min-width: 0; background: var(--surface); border-left: 1px solid var(--border-default); display: flex; flex-direction: column; overflow: hidden; }
.wa-root .contact-panel-head { height: var(--header-height); padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
.wa-root .contact-panel-title { font-weight: 720; }
.wa-root .contact-scroll { flex: 1; overflow-y: auto; }
.wa-root .contact-profile { padding: 22px 18px 18px; text-align: center; border-bottom: 1px solid var(--border-subtle); }
.wa-root .contact-profile .avatar { margin: 0 auto; }
.wa-root .contact-profile-name { margin-top: 10px; font-size: var(--text-lg); font-weight: 750; }
.wa-root .contact-profile-phone { margin-top: 3px; color: var(--text-secondary); }
.wa-root .contact-section { padding: 16px 17px; border-bottom: 1px solid var(--border-subtle); }
.wa-root .contact-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 700; font-size: var(--text-sm); }
.wa-root .info-list { display: grid; gap: 12px; }
.wa-root .info-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.wa-root .info-label { color: var(--text-tertiary); font-size: var(--text-xs); }
.wa-root .info-value { margin-top: 2px; font-size: var(--text-sm); font-weight: 550; }

/* ── Utilidades compartilhadas dos modais ─────────────────────── */
.wa-root .fe-var-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 4px; }
.wa-root .fe-var-chip { background: var(--neutral-100); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12px; cursor: pointer; }
.wa-root .fe-var-chip:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); }
.wa-root .fe-test-bar { display: flex; gap: 8px; align-items: center; }
.wa-root .fe-test-bar .input { flex: 1; }

/* ── Config: hub de abas + catálogos ──────────────────────────── */
.config-hub { display: flex; flex-direction: column; }
.config-tabbar { flex: 0 0 auto; display: flex; gap: 2px; padding: 0 var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--surface); overflow-x: auto; }
.config-tabbar .tab { padding: 13px 14px; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.config-tabbar .tab:hover { color: var(--text-primary); }
.config-tabbar .tab.active { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.config-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.config-panel .wa-fullscreen { height: 100%; min-height: 0; }
.config-hub .cfg-section-title { font-size: var(--text-md); font-weight: 700; margin: 0 0 4px; }
.config-hub .cfg-hint { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 10px; }
.config-hub .cfg-cat-grid { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 920px; }
.config-hub .cfg-card { border: 1px solid var(--border-subtle); border-radius: 10px; padding: 14px 16px; background: var(--surface); }
.config-hub .cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.config-hub .cfg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: 6px; font-size: var(--text-sm); }
.config-hub .cfg-chip.inativo { opacity: 0.55; }
.config-hub .cfg-list { display: flex; flex-direction: column; gap: 4px; }
.config-hub .cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.config-hub .cfg-x { border: none; background: none; cursor: pointer; color: var(--text-secondary); font-size: 16px; line-height: 1; padding: 0 4px; }
.config-hub .cfg-x:hover { color: var(--danger-500); }

/* ── Integração no painel (agencia.html) ──────────────────────
   A view ocupa a área de conteúdo inteira: viewport menos o topbar do
   painel. --topbar-h vem do host (.content-wa do agencia.html define 62px);
   o fallback cobre montagens fora dele. Um único scroll: o interno da view. */
.wa-fullscreen { height: calc(100vh - var(--topbar-h, 62px)); min-height: 520px; background: var(--surface); overflow: hidden; }
.wa-root .wa-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--neutral-200); border-top-color: var(--brand-500); animation: wa-spin 0.7s linear infinite; }
@keyframes wa-spin { to { transform: rotate(360deg); } }
.wa-root .wa-center { height: 100%; display: grid; place-items: center; text-align: center; padding: 32px; }

/* ===================== Editor visual de fluxos (E13 onda 2) ==========
   Portado do Atende (flow_editor) e re-ancorado nos tokens deste painel.
   Tudo sob .wa-root e prefixo fe- (sem colisão com o resto do módulo). */
.wa-root .fe { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.wa-root .fe-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border-default); background: var(--surface); flex-wrap: wrap; }
.wa-root .fe-top-left, .wa-root .fe-top-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-root .fe-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-root .fe-name { font-weight: 750; padding: 2px 4px; border-radius: 6px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-root .fe-save { font-size: var(--text-xs); min-width: 64px; text-align: right; }
.wa-root .fe-save-wait { color: var(--text-secondary); }
.wa-root .fe-save-ok { color: var(--success-700); }
.wa-root .fe-save-err { color: var(--danger-700); }

.wa-root .fe-banner { padding: 8px 14px; font-size: var(--text-sm); border-bottom: 1px solid var(--border-default); }
.wa-root .fe-banner-info { background: var(--brand-50); color: var(--brand-700); }
.wa-root .fe-banner-error { background: var(--danger-50); color: var(--danger-700); }

.wa-root .fe-main { flex: 1; display: flex; min-height: 0; }
.wa-root .fe-palette { width: 184px; flex: 0 0 184px; border-right: 1px solid var(--border-default); padding: 12px; overflow: auto; background: var(--surface); }
.wa-root .fe-pal-title { font-size: var(--text-xs); font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 8px; }
.wa-root .fe-pal-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border-default); border-left: 3px solid var(--neutral-300); border-radius: 8px; background: #fff; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.wa-root .fe-pal-item:hover { background: var(--neutral-50); }
.wa-root .fe-pal-item:disabled { opacity: 0.5; cursor: not-allowed; }
.wa-root .fe-pal-hint { margin-top: 10px; font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.5; }

.wa-root .fe-canvas { flex: 1; position: relative; overflow: hidden; background: var(--neutral-50); background-image: radial-gradient(var(--border-default) 1px, transparent 1px); background-size: 22px 22px; cursor: grab; }
.wa-root .fe-canvas:active { cursor: grabbing; }
.wa-root .fe-world { position: absolute; top: 0; left: 0; width: 4000px; height: 3000px; transform-origin: 0 0; }
.wa-root .fe-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.wa-root .fe-edge { fill: none; stroke: var(--neutral-400); stroke-width: 2; marker-end: url(#fe-arrow); pointer-events: stroke; cursor: pointer; }
.wa-root .fe-edge:hover { stroke: var(--danger-500); }
.wa-root .fe-edge-err { stroke: var(--danger-500); stroke-dasharray: 5 4; opacity: 0.7; }
.wa-root .fe-arrow-h { fill: var(--neutral-400); }

.wa-root .fe-node { position: absolute; width: 188px; background: #fff; border: 1px solid var(--border-default); border-left: 4px solid var(--neutral-400); border-radius: 10px; box-shadow: var(--shadow-sm); user-select: none; }
.wa-root .fe-node.is-selected { box-shadow: 0 0 0 2px var(--brand-400); z-index: 5; }
.wa-root .fe-node.is-target { outline: 2px dashed var(--brand-400); outline-offset: 2px; cursor: pointer; }
.wa-root .fe-node.has-error { border-color: var(--danger-500); border-left-color: var(--danger-500); background: var(--danger-50); box-shadow: 0 0 0 2px #f1a9a0, var(--shadow-sm); }
.wa-root .fe-node.has-error.is-selected { box-shadow: 0 0 0 3px var(--danger-500); z-index: 5; }
.wa-root .fe-node.has-error .fe-node-head { color: var(--danger-700); border-bottom-color: #f5c6c0; }
.wa-root .fe-node-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid var(--border-subtle); cursor: grab; font-size: var(--text-xs); font-weight: 700; }
.wa-root .fe-node-head:active { cursor: grabbing; }
.wa-root .fe-node-type { flex: 1; }
.wa-root .fe-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-pill); background: var(--brand-50); color: var(--brand-700); text-transform: uppercase; }
.wa-root .fe-tag-warn { background: var(--warning-50); color: var(--warning-700); }
.wa-root .fe-tag-error { background: var(--danger-50); color: var(--danger-700); }
.wa-root .fe-node-body { padding: 8px 9px; font-size: var(--text-xs); color: var(--text-secondary); max-height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-root .fe-ports { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 8px; }
.wa-root .fe-ports-terminal { font-size: 10px; color: var(--text-tertiary); padding: 6px 9px; }
.wa-root .fe-port { display: flex; align-items: center; gap: 6px; justify-content: flex-end; background: none; border: none; cursor: pointer; font-size: 10px; color: var(--text-secondary); padding: 1px 2px; }
.wa-root .fe-port-lbl { order: 1; }
.wa-root .fe-port-dot { order: 2; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--neutral-400); background: #fff; }
.wa-root .fe-port.is-on .fe-port-dot { background: var(--brand-500); border-color: var(--brand-500); }
.wa-root .fe-port:hover .fe-port-dot { border-color: var(--brand-500); }
.wa-root .fe-in { position: absolute; left: -6px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--neutral-400); }

/* cores por tipo de nó (borda esquerda do nó, da paleta e do painel de props) */
.wa-root .fe-start { border-left-color: #6c7a89; }
.wa-root .fe-msg { border-left-color: #2d9cdb; }
.wa-root .fe-ask { border-left-color: #d6609b; }
.wa-root .fe-list { border-left-color: #b84a86; }
.wa-root .fe-confirm { border-left-color: #00897b; }
.wa-root .fe-media { border-left-color: #d97706; }
.wa-root .fe-cond { border-left-color: #f2994a; }
.wa-root .fe-xform { border-left-color: #0277bd; }
.wa-root .fe-hand { border-left-color: #eb5757; }
.wa-root .fe-end { border-left-color: #27ae60; }
.wa-root .fe-dot.fe-start { background: #6c7a89; }
.wa-root .fe-dot.fe-msg { background: #2d9cdb; }
.wa-root .fe-dot.fe-ask { background: #d6609b; }
.wa-root .fe-dot.fe-list { background: #b84a86; }
.wa-root .fe-dot.fe-confirm { background: #00897b; }
.wa-root .fe-dot.fe-media { background: #d97706; }
.wa-root .fe-dot.fe-cond { background: #f2994a; }
.wa-root .fe-dot.fe-xform { background: #0277bd; }
.wa-root .fe-dot.fe-hand { background: #eb5757; }
.wa-root .fe-dot.fe-end { background: #27ae60; }

.wa-root .fe-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 4px; background: #fff; border: 1px solid var(--border-default); border-radius: 8px; padding: 3px; box-shadow: var(--shadow-sm); }

.wa-root .fe-props { width: 308px; flex: 0 0 308px; border-left: 1px solid var(--border-default); overflow: auto; background: var(--surface); }
.wa-root .fe-props-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--border-default); border-left: 4px solid var(--neutral-400); }
.wa-root .fe-props-title { font-weight: 750; display: flex; align-items: center; gap: 7px; }
.wa-root .fe-props-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.wa-root .fe-props-body .field-hint { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.wa-root .fe-prop-errors { background: var(--danger-50); color: var(--danger-700); border-radius: 8px; padding: 8px 10px; font-size: var(--text-xs); display: flex; flex-direction: column; gap: 4px; }
.wa-root .fe-btns { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.wa-root .fe-btn-row { display: flex; gap: 6px; }
.wa-root .fe-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.wa-root .fe-item-row { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 6px; }
.wa-root .fe-map-row { display: grid; grid-template-columns: 1fr 1fr 32px; gap: 6px; margin-bottom: 6px; }
.wa-root .fe-vars { border-top: 1px dashed var(--border-default); padding-top: 10px; }
.wa-root .fe-nodelist { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow: auto; }
.wa-root .fe-nodelist-item { display: flex; align-items: center; gap: 7px; text-align: left; background: none; border: 1px solid transparent; border-radius: 7px; padding: 5px 7px; font-size: var(--text-sm); cursor: pointer; }
.wa-root .fe-nodelist-item:hover { background: var(--neutral-100); }
.wa-root .fe-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-400); flex: 0 0 auto; }

/* lista de fluxos: nome clicável */
.wa-root .fe-flow-name { background: none; border: none; padding: 0; cursor: pointer; font-weight: 700; color: var(--text-link); font-size: var(--text-md); }
.wa-root .fe-flow-name:hover { text-decoration: underline; }

/* rotas do canal (modal) */
.wa-root .fe-rules { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.wa-root .fe-rule { display: grid; grid-template-columns: 150px 1fr 1fr 32px; gap: 8px; align-items: center; }

/* teste (dry-run): telefone simulado */
.wa-root .phone-frame { width: 286px; height: 540px; margin: 0 auto; padding: 10px; border-radius: 32px; background: #18201e; box-shadow: var(--shadow-md); }
.wa-root .phone-screen { height: 100%; border-radius: 24px; overflow: hidden; background: var(--chat-bg); display: flex; flex-direction: column; }
.wa-root .phone-header { height: 54px; flex: 0 0 auto; padding: 0 11px; background: #0b6d5f; color: #fff; display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 650; }
.wa-root .phone-chat { flex: 1; padding: 14px 10px; background-image: radial-gradient(var(--chat-pattern) 1px, transparent 1px); background-size: 20px 20px; }
.wa-root .phone-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-root .phone-template-btn { margin-top: 8px; padding: 7px; padding-top: 7px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; gap: 5px; background: #fff; border-radius: 7px; font-size: 11px; font-weight: 700; color: var(--brand-700); text-align: center; }
.wa-root .fe-testp { display: flex; justify-content: center; }
.wa-root .fe-phone { width: 330px; height: 560px; }
.wa-root .fe-phone .phone-screen { height: 100%; }
.wa-root .fe-phone .phone-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.wa-root .fe-tp-bubble { max-width: 82%; padding: 8px 10px; border-radius: 9px; box-shadow: var(--shadow-xs); font-size: var(--text-xs); line-height: 1.45; }
.wa-root .fe-tp-bot { align-self: flex-start; background: #fff; }
.wa-root .fe-tp-user { align-self: flex-end; background: #d9fdd3; }
.wa-root .fe-tp-sys { align-self: center; display: flex; align-items: center; gap: 5px; background: var(--danger-50); color: var(--danger-700); border-radius: 8px; padding: 5px 9px; font-size: 10px; }
.wa-root .fe-tp-foot { flex: 0 0 auto; border-top: 1px solid var(--border-subtle); padding: 8px; background: #f5f6f6; }
.wa-root .fe-tp-opt { display: block; width: 100%; margin-top: 6px; padding: 8px; border: none; border-top: 1px solid var(--border-subtle); background: transparent; color: var(--brand-700); font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; border-radius: 0; }
.wa-root .fe-tp-opt:hover { background: var(--brand-50); }
.wa-root .fe-tp-opt-done { opacity: 0.5; cursor: default; }
.wa-root .fe-tp-input { display: flex; gap: 6px; align-items: center; }
.wa-root .fe-tp-input .input { border-radius: var(--radius-pill); }
.wa-root .fe-tp-end { text-align: center; font-size: 11px; color: var(--text-secondary); padding: 6px; }
.wa-root .fe-tp-typing { display: inline-flex; gap: 4px; align-items: center; width: auto; padding: 11px 13px; }
.wa-root .fe-tp-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); animation: fe-typing 1.1s infinite ease-in-out; }
.wa-root .fe-tp-typing span:nth-child(2) { animation-delay: 0.18s; }
.wa-root .fe-tp-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes fe-typing { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

/* editor responsivo: telas estreitas escondem a paleta primeiro */
@media (max-width: 1100px) {
  .wa-root .fe-props { width: 272px; flex-basis: 272px; }
}
@media (max-width: 940px) {
  .wa-root .fe-palette { width: 150px; flex-basis: 150px; }
}

/* ── Config (onda 2): automação e disparos ────────────────────── */
.config-hub .cfg-evento { display: grid; grid-template-columns: 26px minmax(140px, 200px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.config-hub .cfg-evento:last-child { border-bottom: 0; }
.config-hub .cfg-evento-nome { font-weight: 650; font-size: var(--text-sm); min-width: 0; }
.config-hub .cfg-evento-hint { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 400; margin-top: 2px; }
.config-hub .cfg-evento-extra { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--text-xs); color: var(--text-secondary); }
.config-hub .cfg-evento-extra .input { width: 90px; min-height: 34px; }
.config-hub .cfg-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.config-hub .cfg-filtros .input { width: auto; min-width: 160px; }
.wa-root .disparo-erro { font-size: var(--text-xs); color: var(--danger-700); max-width: 320px; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .config-hub .cfg-evento { grid-template-columns: 26px minmax(0, 1fr); }
  .config-hub .cfg-evento .input, .config-hub .cfg-evento-extra { grid-column: 2; }
}

/* ── E13 onda 3: supervisão / relatórios / QA ─────────────────── */
.wa-root .wa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.wa-root .wa-kpi { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.wa-root .wa-kpi-num { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.wa-root .wa-kpi-lbl { margin-top: 4px; font-size: var(--text-sm); color: var(--text-secondary); }
.wa-root .wa-kpi-hint { margin-top: 2px; font-size: var(--text-xs); color: var(--text-tertiary); }
.wa-root .wa-kpi-brand { border-left-color: var(--brand-500); }
.wa-root .wa-kpi-info { border-left-color: var(--info-500); }
.wa-root .wa-kpi-success { border-left-color: var(--success-500); }
.wa-root .wa-kpi-warning { border-left-color: var(--warning-500); }
.wa-root .wa-kpi-danger { border-left-color: var(--danger-500); }
.wa-root .wa-kpi-danger .wa-kpi-num { color: var(--danger-700); }

.wa-root .wa-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-secondary); }
.wa-root .wa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-400); display: inline-block; }
.wa-root .wa-dot-on { background: var(--success-500); box-shadow: 0 0 0 3px var(--success-50); }
.wa-root .wa-dot-err { background: var(--danger-500); box-shadow: 0 0 0 3px var(--danger-50); }

.wa-root .wa-crit-list { display: flex; flex-direction: column; gap: 10px; }
.wa-root .wa-crit { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.wa-root .wa-crit-lbl { font-weight: 600; color: var(--text-primary); }
.wa-root .wa-nota-grp { display: inline-flex; gap: 4px; }
.wa-root .wa-nota { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--surface); color: var(--text-secondary); font-weight: 600; cursor: pointer; }
.wa-root .wa-nota:hover { border-color: var(--brand-400); color: var(--text-primary); }
.wa-root .wa-nota.ativa { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.wa-root .wa-crit-total { padding-top: 6px; }

.wa-root .wa-exp-grade { display: flex; flex-direction: column; gap: 6px; }
.wa-root .wa-exp-dia { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.wa-root .wa-exp-dia:last-child { border-bottom: none; }
.wa-root .wa-exp-dia-nome { font-weight: 600; color: var(--text-primary); }
.wa-root .wa-exp-janelas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wa-root .wa-exp-jan { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 4px 6px; }
.wa-root .wa-exp-jan .input { min-height: 32px; width: 110px; }
.wa-root .wa-exp-fechado { font-style: italic; }
@media (max-width: 720px) {
  .wa-root .wa-exp-dia { grid-template-columns: 1fr; }
}

/* ── Onda 4: campanhas, campos personalizados, webhooks ───────── */
.wa-root .cmp-card .section-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-root .cmp-card code { background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
.wa-root .cmp-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wa-root .cmp-metric { display: inline-flex; flex-direction: column; gap: 1px; min-width: 74px; padding: 6px 10px; background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.wa-root .cmp-metric em { font-style: normal; font-size: 11px; color: var(--text-secondary); }
.wa-root .cmp-metric b { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); }
.wa-root .cmp-token { display: inline-block; padding: 0 5px; border-radius: 5px; background: var(--brand-50); color: var(--brand-700); font-weight: 650; font-size: 0.92em; }
.wa-root .cmp-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.wa-root .cmp-preview { position: sticky; top: 0; }
.wa-root .cmp-fieldset { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 14px; }
.wa-root .cmp-fieldset legend { font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary); padding: 0 6px; }
.wa-root .cmp-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); cursor: pointer; }
.wa-root .cmp-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.wa-root .cmp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: 6px; font-size: var(--text-sm); }
.wa-root .cmp-sample, .wa-root .cmp-erros { margin: 8px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; }
.wa-root .cmp-sample li, .wa-root .cmp-erros li { margin: 2px 0; font-size: var(--text-sm); }
.wa-root .wh-secret { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-subtle); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); font-family: ui-monospace, monospace; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .wa-root .cmp-form-grid { grid-template-columns: 1fr; }
  .wa-root .cmp-preview { position: static; }
}

/* ── Responsivo ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .wa-root { --sidebar-width: 320px; }
  .wa-root .contact-panel { display: none; }
  .wa-root .inbox-layout { grid-template-columns: var(--sidebar-width) minmax(360px, 1fr); }
  .wa-root .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .wa-root .inbox-layout { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .wa-root .inbox-layout { grid-template-columns: 1fr; }
  .wa-root .inbox-sidebar.has-selection { display: none; }
  .wa-root .grid-3, .wa-root .grid-2 { grid-template-columns: 1fr; }
}

/* ── IA (onda 5): barra do copiloto, chips e transcrição ──────── */
.wa-root .wa-ia-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 6.5%; background: #f0f2f5; border-top: 1px solid rgba(0, 0, 0, 0.05); }
.wa-root .wa-ia-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-700); }
.wa-root .wa-ia-btn { color: var(--brand-700); }
.wa-root .wa-ia-btn:hover { background: var(--brand-50); color: var(--brand-800); }
.wa-root .wa-ia-btn.is-loading { opacity: 0.55; }
.wa-root .wa-ia-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.wa-root .wa-ia-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--brand-50); color: var(--brand-700); font-size: var(--text-xs); font-weight: 650; }
.wa-root .wa-ia-chip-x { display: inline-flex; align-items: center; justify-content: center; padding: 3px; border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-xs); }
.wa-root .wa-ia-chip-x:hover { background: var(--neutral-100); color: var(--text-primary); }
.wa-root .wa-ia-transcribe { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 9px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface); color: var(--brand-700); font-size: var(--text-xs); font-weight: 650; cursor: pointer; }
.wa-root .wa-ia-transcribe:hover { background: var(--brand-50); border-color: var(--brand-200); }
.wa-root .wa-ia-transcribe:disabled { opacity: 0.55; cursor: default; }
.wa-root .wa-ia-transcricao { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 6px 9px; background: rgba(255, 255, 255, 0.65); border-left: 2px solid var(--brand-300); border-radius: var(--radius-xs); font-size: var(--text-sm); line-height: 1.4; color: var(--text-primary); font-style: italic; }
.wa-root .wa-ia-transcricao svg { flex: 0 0 auto; color: var(--brand-500); margin-top: 2px; }
.wa-root .wa-ia-out { white-space: pre-wrap; line-height: 1.6; font-size: var(--text-md); color: var(--text-primary); }

/* reação do cliente (👍❤️…) — estilo WhatsApp: pílula sobreposta na borda
   INFERIOR do balão (canto direito no enviado, esquerdo no recebido). */
.wa-root .message-reaction { position: absolute; bottom: -18px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2, #fff); border: 1px solid var(--border-subtle); font-size: 15px; line-height: 1.5; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); z-index: 1; white-space: nowrap; }
.wa-root .message-row.outbound .message-reaction { right: 8px; }
.wa-root .message-row.inbound .message-reaction { left: 8px; }
/* espaço extra abaixo do balão que tem reação, p/ a pílula não colar na próxima */
.wa-root .message-row:has(.message-reaction) { margin-bottom: 20px; }