@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* =============================================================
   RAMBOO · AURUM DESIGN SYSTEM
   Obsidian glass + ouro champagne. Tudo deriva destes tokens.
============================================================= */

:root {
  /* ---- Superfícies base ---- */
  --bg: #06060a;
  --bg-deep: #030305;
  --bg-elev: #0b0b12;
  --surface: rgba(20, 20, 28, 0.62);
  --surface-solid: #12121a;
  --surface-2: rgba(255, 255, 255, 0.042);
  --surface-3: rgba(255, 255, 255, 0.075);
  --surface-4: rgba(255, 255, 255, 0.11);

  /* ---- Superfícies com cor própria (menu, topo, tabela, flutuantes) ---- */
  --nav-1: rgba(16, 16, 23, 0.82);
  --nav-2: rgba(9, 9, 14, 0.9);
  --topo-1: rgba(12, 12, 18, 0.72);
  --topo-2: rgba(12, 12, 18, 0.28);
  --cabecalho-tabela: rgba(12, 12, 18, 0.92);
  --painel: rgba(20, 20, 28, 0.86);
  --pop-1: rgba(24, 24, 33, 0.98);
  --pop-2: rgba(15, 15, 21, 0.98);
  --flutuante: rgba(14, 14, 20, 0.96);

  /* ---- Linhas ---- */
  --border: rgba(255, 255, 255, 0.085);
  --border-soft: rgba(255, 255, 255, 0.045);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Texto ---- */
  --text-strong: #ffffff;
  --text: #eeecf2;
  --text-dim: #a6a4b2;
  --text-faint: #74727f;
  --text-muted: #8d8b99;

  /* ---- Marca: ouro champagne ---- */
  --accent: #e9c07a;
  --accent-hi: #f8dfb0;
  --accent-2: #c9974d;
  --accent-dim: #a97f3e;
  --accent-rgb: 233, 192, 122;
  --accent-soft: rgba(233, 192, 122, 0.10);
  --accent-line: rgba(233, 192, 122, 0.28);
  --accent-ink: #2a1e07;

  /* ---- Secundária decorativa ---- */
  --iris: #9d8cf5;
  --iris-rgb: 157, 140, 245;

  /* ---- Semânticas ---- */
  --success: #5fe0a0;
  --success-rgb: 95, 224, 160;
  --success-soft: rgba(95, 224, 160, 0.10);
  --danger: #ff7d6e;
  --danger-rgb: 255, 125, 110;
  --danger-soft: rgba(255, 125, 110, 0.10);
  --warn: #f7c56b;
  --warn-rgb: 247, 197, 107;
  --warn-soft: rgba(247, 197, 107, 0.10);
  --info: #7fb0ff;
  --info-rgb: 127, 176, 255;
  --info-soft: rgba(127, 176, 255, 0.10);

  /* ---- Gradientes ---- */
  --grad-accent: linear-gradient(135deg, #f8dfb0 0%, #e9c07a 42%, #c9974d 100%);
  --grad-text: linear-gradient(160deg, #ffffff 0%, #ded9e6 60%, #a9a5b5 100%);
  --grad-gold-text: linear-gradient(140deg, #fbeacb 0%, #e9c07a 55%, #c9974d 100%);

  /* ---- Elevação ---- */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sh-sm: 0 2px 6px -2px rgba(0, 0, 0, 0.55), 0 8px 20px -14px rgba(0, 0, 0, 0.9);
  --sh-md: 0 4px 12px -4px rgba(0, 0, 0, 0.6), 0 22px 48px -26px rgba(0, 0, 0, 0.95);
  --sh-lg: 0 10px 26px -8px rgba(0, 0, 0, 0.7), 0 42px 90px -40px rgba(0, 0, 0, 1);
  --sh-gold: 0 6px 22px -8px rgba(233, 192, 122, 0.5);
  --sh-gold-lg: 0 12px 40px -12px rgba(233, 192, 122, 0.45);
  --ring: 0 0 0 3px rgba(233, 192, 122, 0.22);

  /* ---- Raios ---- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;
  --radius-sm: var(--r-sm);
  --radius: var(--r);
  --radius-lg: var(--r-lg);

  /* ---- Fontes ---- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --t-base: 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   RESET & BASE
============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: dark;
}

html, body {
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

body {
  display: flex;
  position: relative;
  background:
    radial-gradient(1200px 620px at 12% -12%, rgba(233, 192, 122, 0.11), transparent 62%),
    radial-gradient(980px 520px at 96% 4%, rgba(157, 140, 245, 0.09), transparent 60%),
    radial-gradient(900px 700px at 60% 108%, rgba(233, 192, 122, 0.05), transparent 65%),
    var(--bg);
}

/* Aurora ambiente + grão de filme — puramente decorativo */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 340px at 22% 18%, rgba(233, 192, 122, 0.10), transparent 68%),
    radial-gradient(520px 320px at 78% 72%, rgba(157, 140, 245, 0.08), transparent 68%);
  filter: blur(28px);
  opacity: 0.85;
  animation: auroraDrift 34s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

::selection { background: rgba(233, 192, 122, 0.28); color: #fff; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
img, svg, video { max-width: 100%; }
strong, b { font-weight: 700; color: var(--text-strong); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--text-strong); }

.hidden { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

/* ---- Barras de rolagem ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(233, 192, 122, 0.55), rgba(233, 192, 122, 0.25));
  background-clip: padding-box;
}

/* ---- Inputs de arquivo ---- */
input[type="file"] {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  width: 100%;
  transition: border-color var(--t-fast), background var(--t-fast);
}
input[type="file"]:hover { border-color: var(--accent-line); background: var(--surface-3); }
input[type="file"]::file-selector-button {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--accent);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 12px;
  transition: var(--transition);
}
input[type="file"]::file-selector-button:hover {
  background: rgba(233, 192, 122, 0.16);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}

option { background: #12121a; color: var(--text); }

/* =============================================================
   UTILITÁRIOS
============================================================= */
.text-accent { color: var(--accent) !important; }
.text-faint { color: var(--text-faint) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dim { color: var(--text-dim) !important; }
.text-yellow { color: var(--warn) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.accent { color: var(--accent) !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-xs { font-size: 11px !important; line-height: 1.55; }
.text-sm { font-size: 12.5px !important; }
.mono { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; color: var(--text-strong); }
.d-block { display: block !important; }
.w-100 { width: 100% !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 14px !important; }
.mb-4 { margin-bottom: 20px !important; }
.mb-5 { margin-bottom: 28px !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 14px !important; }
.mt-4 { margin-top: 20px !important; }
.mt-5 { margin-top: 28px !important; }
.p-2 { padding: 10px !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 22px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 14px !important; padding-bottom: 14px !important; }
.py-4 { padding-top: 22px !important; padding-bottom: 22px !important; }
.py-5 { padding-top: 34px !important; padding-bottom: 34px !important; }

/* =============================================================
   ESTRUTURA DO APP
============================================================= */
.app-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ---------------- SIDEBAR ---------------- */
.sidebar {
  width: 268px;
  min-width: 268px;
  height: 100vh;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--nav-1), var(--nav-2));
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px 14px;
  z-index: 100;
  transition: width 0.3s var(--ease), min-width 0.3s var(--ease), padding 0.3s var(--ease), transform 0.28s var(--ease);
}

.sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(233, 192, 122, 0.28) 22%, rgba(233, 192, 122, 0.05) 65%, transparent);
  pointer-events: none;
}

.app-layout.sidebar-collapsed .sidebar { width: 76px; min-width: 76px; padding: 20px 10px 16px 10px; }
.app-layout.sidebar-collapsed .brand { padding: 4px 0 20px 0; justify-content: center; }
.app-layout.sidebar-collapsed .brand-text,
.app-layout.sidebar-collapsed .nav-label,
.app-layout.sidebar-collapsed .nav-item span,
.app-layout.sidebar-collapsed .op-info { display: none !important; }
.app-layout.sidebar-collapsed .nav-item { justify-content: center; padding: 11px 0; }
.app-layout.sidebar-collapsed .nav-item::before { left: 50%; top: auto; bottom: 3px; transform: translateX(-50%) scaleX(0); width: 18px; height: 2px; border-radius: 8px; }
.app-layout.sidebar-collapsed .nav-item.active::before { transform: translateX(-50%) scaleX(1); }
.app-layout.sidebar-collapsed .sidebar-footer { justify-content: center; padding-left: 0; }
.app-layout.sidebar-collapsed .sidebar-footer #btnLogout { display: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 20px 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 18px;
  position: relative;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: var(--sh-gold), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.brand-mark svg, .brand-mark i { font-size: 17px; color: var(--accent-ink); }

.brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-text .name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-text .tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding-right: 2px;
}

.nav-group { display: flex; flex-direction: column; gap: 3px; }

.nav-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 12px 8px 12px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  cursor: pointer;
}
.nav-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(233, 192, 122, 0.65);
  transition: transform 0.28s var(--ease);
}
.nav-item i, .nav-item svg {
  width: 17px;
  height: 17px;
  font-size: 14px;
  stroke: currentColor;
  flex-shrink: 0;
  opacity: 0.8;
  transition: color var(--t-fast), opacity var(--t-fast);
}
.nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.nav-item:hover i, .nav-item:hover svg { opacity: 1; }

.nav-item.active {
  background: linear-gradient(90deg, rgba(233, 192, 122, 0.15), rgba(233, 192, 122, 0.03));
  color: var(--text-strong);
  font-weight: 600;
}
.nav-item.active::before { transform: translateY(-50%) scaleY(1); }
.nav-item.active i, .nav-item.active svg { color: var(--accent); opacity: 1; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 6px 0 6px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(233, 192, 122, 0.22), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--accent-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.op-info { display: flex; flex-direction: column; overflow: hidden; }
.op-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-mail { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#btnLogout {
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  transition: var(--transition);
}
#btnLogout:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------------- ÁREA PRINCIPAL ---------------- */
.main, .main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.topbar, .top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 34px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--topo-1), var(--topo-2));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  flex-shrink: 0;
  z-index: 20;
}

.topbar h1, .header-title-area h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar p, .header-title-area p { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }

.topbar-actions, .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.content-body {
  flex: 1;
  padding: 26px 34px 70px 34px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 80px);
  scroll-behavior: smooth;
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: rise 0.45s var(--ease) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================
   BOTÕES, PÍLULAS, SELOS
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  height: 38px;
  white-space: nowrap;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform 0.12s var(--ease), box-shadow var(--t-fast);
}
.btn i, .btn svg {
  font-size: 12.5px;
  width: 14px; height: 14px;
  stroke-width: 1.8;
  flex-shrink: 0;
  display: inline-block;
}
.btn:hover { border-color: var(--border-strong); background: var(--surface-3); color: var(--text-strong); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--accent-ink);
  font-weight: 700;
  box-shadow: var(--sh-gold), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out);
}
.btn-primary:hover { color: var(--accent-ink); box-shadow: var(--sh-gold-lg), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.btn-primary:hover::after { left: 130%; }

.btn-secondary { background: var(--surface-3); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--accent-line); color: var(--accent-hi); background: rgba(233, 192, 122, 0.10); }

.btn-danger { background: var(--danger-soft); border-color: rgba(255, 125, 110, 0.32); color: var(--danger); }
.btn-danger:hover { background: rgba(255, 125, 110, 0.18); border-color: var(--danger); color: #fff; }

.btn-block { width: 100%; justify-content: center; height: 44px; }
.btn-lg { height: 46px; font-size: 14px; padding: 0 22px; }
.btn-sm { height: 31px; padding: 0 12px; font-size: 11px; border-radius: var(--r-xs); }
.btn-sm i, .btn-sm svg { font-size: 11px; width: 12px; height: 12px; }

.btn-icon {
  width: 34px; height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  transition: var(--transition);
}
.btn-icon:hover { background: var(--surface-3); color: var(--text-strong); border-color: var(--border); }

#btnRefreshStats { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
#btnRefreshStats i { color: var(--accent); }
#btnRefreshStats:hover { border-color: var(--accent-line); background: rgba(233, 192, 122, 0.10); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.pill i, .pill svg { font-size: 12.5px; color: var(--accent); }

/* Pontos de status */
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot.on { background: var(--success); box-shadow: 0 0 0 3px rgba(95, 224, 160, 0.16), 0 0 10px rgba(95, 224, 160, 0.7); }
.dot.off { background: var(--danger); box-shadow: 0 0 0 3px rgba(255, 125, 110, 0.16); }
.dot.pending { background: var(--accent); box-shadow: 0 0 0 3px rgba(233, 192, 122, 0.16); animation: pulse 1.8s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.86); }
}

/* Selos */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap !important;
  line-height: 1.35;
  color: var(--text-dim);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.badge.engine, .badge-engine { color: var(--success); background: rgba(95, 224, 160, 0.10); border-color: rgba(95, 224, 160, 0.28); }
.badge-meta { color: var(--info); background: rgba(127, 176, 255, 0.10); border-color: rgba(127, 176, 255, 0.28); }
.badge.paused { color: var(--text-dim); border-color: var(--border); background: var(--surface-3); }
.badge.active, .badge-positive { color: var(--success); border-color: rgba(95, 224, 160, 0.3); background: rgba(95, 224, 160, 0.10); }
.badge.warn { color: var(--warn); border-color: rgba(247, 197, 107, 0.3); background: rgba(247, 197, 107, 0.10); }
.badge.danger { color: var(--danger); border-color: rgba(255, 125, 110, 0.3); background: rgba(255, 125, 110, 0.10); }
.badge-mono { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

/* =============================================================
   CARDS & PAINÉIS
============================================================= */
.card, .obsidian-panel, .obsidian-card {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--sh-sm);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.card::before, .obsidian-panel::before, .obsidian-card::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
}
.card:hover, .obsidian-panel:hover, .obsidian-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); }

.card-title, .panel-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-strong);
  margin-bottom: 5px;
}
.card-title i, .card-title svg, .panel-header h3 i { color: var(--accent); font-size: 14px; }

.card-sub, .panel-desc {
  font-size: 12.5px;
  color: var(--text-faint);
  margin-bottom: 18px;
  line-height: 1.6;
  max-width: 72ch;
}

.panel-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 20px 0; border: none; }

/* =============================================================
   HERO / GAMIFICAÇÃO
============================================================= */
.hero-card, .gamification-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  position: relative;
  background:
    radial-gradient(620px 260px at 8% -30%, rgba(233, 192, 122, 0.16), transparent 70%),
    radial-gradient(480px 240px at 92% 130%, rgba(157, 140, 245, 0.12), transparent 70%),
    var(--surface);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px;
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 192, 122, 0.5), transparent);
}

.hero-left { display: flex; align-items: center; gap: 20px; }

.ring-wrap { position: relative; width: 82px; height: 82px; flex-shrink: 0; }
.ring-wrap svg { width: 82px; height: 82px; transform: rotate(-90deg); overflow: visible; }
.ring-wrap .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 5; }
.ring-wrap .ring-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(233, 192, 122, 0.6));
  transition: stroke-dashoffset 1.1s var(--ease);
}
.ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.hero-id h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.hero-id .role { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }

.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.2), rgba(233, 192, 122, 0.06));
  border: 1px solid var(--accent-line);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.hero-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stat {
  min-width: 118px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.hero-stat .label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 8px;
  font-weight: 600;
}
.hero-stat .value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.hero-stat .value.good { color: var(--success); }

.xp-bar-wrap { margin-top: 2px; }
.xp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.xp-track, .xp-progress-bar-bg {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-full);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.xp-fill, .xp-progress-fill {
  height: 100%;
  background: var(--grad-accent);
  border-radius: var(--r-full);
  box-shadow: 0 0 14px rgba(233, 192, 122, 0.55);
  transition: width 0.8s var(--ease);
  position: relative;
  overflow: hidden;
}
.xp-fill::after, .xp-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 2.8s var(--ease) infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(220%); }
}

/* =============================================================
   GRADE DE KPIs
============================================================= */
.kpi-grid, .metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.kpi, .metric-card {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.kpi::after, .metric-card::after {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 192, 122, 0.14), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.kpi:hover, .metric-card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--sh-md); }
.kpi:hover::after, .metric-card:hover::after { opacity: 1; }

.kpi-top, .metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.kpi-top i, .kpi-top svg, .metric-header i {
  font-size: 12.5px;
  color: var(--accent);
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  background: rgba(233, 192, 122, 0.10);
  border: 1px solid var(--accent-line);
  flex-shrink: 0;
}
.kpi-top .kpi-label, .metric-title {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.kpi-value, .metric-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}

.kpi-foot, .metric-badge {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-foot.accent { color: var(--success); }

/* =============================================================
   TABELAS
============================================================= */
table, .data-table { width: 100%; border-collapse: separate; border-spacing: 0; }

thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 12px 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--cabecalho-tabela);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
  white-space: nowrap;
}

tbody td {
  padding: 13px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim);
  vertical-align: middle;
  transition: background var(--t-fast), color var(--t-fast);
}
tbody tr { position: relative; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.028); color: var(--text); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
td.strong { color: var(--text-strong); font-weight: 600; }
td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.collapsible-table-wrap {
  max-height: 300px;
  overflow-y: auto;
  border-radius: var(--r);
  border: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, 0.16);
}

/* =============================================================
   KANBAN / PIPELINES
============================================================= */
.kanban, .kanban-board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}

.kan-col, .kanban-column {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.kanban-column:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); }
.kanban-column::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-accent);
  opacity: 0.8;
}
.kanban-column:nth-child(2)::before { background: linear-gradient(90deg, #7fb0ff, #5f8fe0); }
.kanban-column:nth-child(3)::before { background: linear-gradient(90deg, #c4a3ff, #9d8cf5); }
.kanban-column:nth-child(4)::before { background: linear-gradient(90deg, #7ff0b4, #3fbc84); }
.kanban-column:nth-child(5)::before { background: linear-gradient(90deg, #ffb59c, #ff7d6e); }

.kan-head, .kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.022);
}

.kan-head-title, .kanban-column-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.kan-count, .kanban-count-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(233, 192, 122, 0.12);
  border: 1px solid var(--accent-line);
  padding: 2px 9px;
  border-radius: var(--r-full);
}

.kan-body, .kanban-cards-list {
  padding: 14px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: 62vh;
  overflow-y: auto;
}

.kan-empty { font-size: 12.5px; color: var(--text-faint); text-align: center; margin: auto; }

.kanban-card {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  padding: 14px;
  transition: var(--transition);
}
.kanban-card:hover {
  border-color: var(--accent-line);
  background: var(--surface-3);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.kanban-card-name { font-size: 14px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.kanban-card-phone { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-bottom: 10px; }
.kanban-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.kanban-tag-business { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: rgba(233, 192, 122, 0.12); color: var(--accent); border: 1px solid var(--accent-line); }
.kanban-tag-region { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border); }

.kanban-move-btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
}
.kanban-move-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(233, 192, 122, 0.10); }

/* =============================================================
   GRIDS & FORMULÁRIOS
============================================================= */
.grid-2, .two-columns-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 18px; }

.field, .form-group { margin-bottom: 16px; }
.field label, .form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.field label i { color: var(--accent); margin-right: 2px; }

.field input, .field textarea, .field select, .form-control {
  width: 100%;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  color: var(--text-strong);
  font-size: 12.5px;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.field textarea, textarea.form-control { min-height: 96px; resize: vertical; line-height: 1.6; }
.field select, select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23e9c07a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder, .form-control::placeholder { color: var(--text-faint); }
.field input:hover, .field textarea:hover, .form-control:hover { border-color: var(--border-strong); }
.field input:focus, .field textarea:focus, .field select:focus, .form-control:focus {
  border-color: var(--accent);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: var(--ring), inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.field-row, .input-action-row { display: flex; gap: 10px; align-items: center; }
.input-action-row input { flex: 1; }

.segment-pills-container { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.segment-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
.segment-pill i { font-size: 11px; opacity: 0.8; }
.segment-pill:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.segment-pill.active {
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.22), rgba(233, 192, 122, 0.08));
  border-color: var(--accent);
  color: var(--accent-hi);
  font-weight: 600;
  box-shadow: 0 4px 14px -6px rgba(233, 192, 122, 0.6);
}
.segment-pill.active i { opacity: 1; }

.ddd-region-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-full);
  background: rgba(233, 192, 122, 0.12);
  border: 1px solid var(--accent-line);
  color: var(--accent-hi);
  font-size: 11px;
  font-weight: 600;
  animation: rise 0.3s var(--ease);
}

.dropzone {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  padding: 32px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.018);
  transition: var(--transition);
  margin-bottom: 16px;
}
.dropzone:hover { border-color: var(--accent); background: rgba(233, 192, 122, 0.05); }
.dropzone i, .dropzone svg { font-size: 30px; color: var(--accent); margin-bottom: 12px; opacity: 0.85; }
.dropzone .dz-title { font-size: 12.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.dropzone .dz-sub { font-size: 11px; color: var(--text-faint); margin-bottom: 16px; }

.empty-state { padding: 52px 20px; text-align: center; }
.empty-state i, .empty-state svg { font-size: 30px; color: var(--text-faint); margin-bottom: 14px; opacity: 0.6; }
.empty-state p { font-size: 12.5px; color: var(--text-faint); }

.metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.metric-box {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  padding: 15px 16px;
  transition: var(--transition);
}
.metric-box:hover { border-color: var(--border-strong); background: var(--surface-3); }
.metric-box .m-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.metric-box .m-value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.risk-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(95, 224, 160, 0.12), rgba(95, 224, 160, 0.03));
  border: 1px solid rgba(95, 224, 160, 0.26);
}
.risk-banner .r-label { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.risk-banner .r-level { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--success); }
.risk-note { font-size: 11px; color: var(--text-faint); margin-top: 12px; line-height: 1.7; }

.vendor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  background: var(--surface-2);
  margin-bottom: 10px;
  transition: var(--transition);
}
.vendor-card:hover { border-color: var(--accent-line); background: var(--surface-3); }
.vendor-info .v-name { font-size: 12.5px; font-weight: 700; color: var(--text-strong); margin-bottom: 5px; }
.vendor-info .v-status { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-faint); }
.vendor-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Caixas de seleção premium */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent-line); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--grad-accent);
  border-color: transparent;
  box-shadow: 0 2px 10px -3px rgba(233, 192, 122, 0.75);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 2px;
  width: 4px; height: 8px;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent-ink);
}

/* Linha de opção com rótulo (label.switch-toggle) */
.switch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.switch-toggle:hover { border-color: var(--accent-line); background: var(--surface-3); }
.switch-toggle:has(input:checked) {
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.16), rgba(233, 192, 122, 0.05));
  border-color: var(--accent-line);
}

/* Cards com tabelas largas rolam na horizontal em vez de vazar */
.card:has(> table), .obsidian-card:has(> table), .obsidian-panel:has(> table) { overflow-x: auto; }

/* Templates */
.template-card {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
  transition: var(--transition);
}
.template-card:hover { border-color: var(--accent-line); background: var(--surface-3); transform: translateY(-2px); }
.template-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.template-name { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--text-strong); }
.template-body {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.65;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--accent-line);
  border-radius: var(--r-xs);
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =============================================================
   ÁREA DE CONVERSAS
============================================================= */
.chat-workspace, .chat-shell {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 18px;
  height: calc(100vh - 150px);
  margin-bottom: 0;
}

.chat-sidebar, .chat-list {
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--sh-sm);
}

.search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 10px 15px;
  margin-bottom: 14px;
  transition: var(--transition);
}
.search-input:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.search-input i, .search-input svg { font-size: 12.5px; color: var(--text-faint); flex-shrink: 0; }
.search-input input { background: none; border: none; outline: none; color: var(--text-strong); font-size: 12.5px; width: 100%; }

.chat-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
}
.chat-item:hover { background: var(--surface-2); border-color: var(--border-soft); }
.chat-item.active {
  background: linear-gradient(90deg, rgba(233, 192, 122, 0.14), rgba(233, 192, 122, 0.03));
  border-color: var(--accent-line);
}

.chat-main {
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-shadow: var(--sh-sm);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.022);
  flex-shrink: 0;
}

.chat-header-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-header-title .ch-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: linear-gradient(150deg, rgba(233, 192, 122, 0.24), rgba(255, 255, 255, 0.05));
  border: 1px solid var(--accent-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.chat-header-title h3 { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.chat-header-title p { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.chat-header-badges { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.chat-feed-box {
  flex: 1;
  padding: 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(233, 192, 122, 0.04), transparent 70%),
    rgba(0, 0, 0, 0.28);
}

/* --- Balões de mensagem --- */
.msg-row { display: flex; justify-content: flex-start; margin-bottom: 12px; animation: bubbleIn 0.3s var(--ease) both; }
.msg-row.out { justify-content: flex-end; }

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.bubble {
  max-width: 72%;
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 18px 18px 18px 5px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--sh-sm);
  word-break: break-word;
}
.bubble.out {
  border-radius: 18px 18px 5px 18px;
  background: linear-gradient(140deg, rgba(233, 192, 122, 0.26), rgba(233, 192, 122, 0.09));
  border-color: var(--accent-line);
  color: #fdf3e0;
  box-shadow: 0 6px 22px -12px rgba(233, 192, 122, 0.7);
}
.bubble-sender {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.bubble-media { margin-bottom: 7px; }
.bubble-media img, .bubble-media video { max-width: 100%; max-height: 260px; border-radius: var(--r-xs); display: block; cursor: pointer; }
.bubble-media audio { max-width: 100%; height: 36px; }
.bubble-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.6;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.chat-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.022);
  flex-shrink: 0;
}

.quick-scripts { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.quick-scripts .qs, .quick-reply-btn {
  font-size: 11px;
  padding: 7px 13px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.quick-scripts .qs:hover, .quick-reply-btn:hover {
  border-color: var(--accent-line);
  color: var(--accent-hi);
  background: rgba(233, 192, 122, 0.1);
  transform: translateY(-1px);
}

.chat-input-row { display: flex; gap: 10px; align-items: center; }
.chat-input-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 12px 18px;
  color: var(--text-strong);
  font-size: 12.5px;
  outline: none;
  transition: var(--transition);
}
.chat-input-row input:focus { border-color: var(--accent); box-shadow: var(--ring); }
.chat-input-row .btn { width: 42px; height: 42px; padding: 0; border-radius: 50%; flex-shrink: 0; }
.chat-input-row .btn i { width: auto; height: auto; font-size: 14px; }

/* =============================================================
   CONFIGURAÇÕES / MOTORES / QR
============================================================= */
.engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.engine-card { min-height: 380px; }

.engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

.qr-box, .qr-card-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  padding: 34px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(233, 192, 122, 0.09), transparent 70%),
    rgba(0, 0, 0, 0.25);
}

.qr-img-responsive {
  width: 220px;
  height: 220px;
  border-radius: var(--r);
  border: 2px solid var(--accent);
  padding: 6px;
  background: #fff;
  box-shadow: 0 0 34px -6px rgba(233, 192, 122, 0.55);
}

.pairing-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent-line);
  background: linear-gradient(140deg, rgba(233, 192, 122, 0.12), rgba(233, 192, 122, 0.03));
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-hi);
  text-align: center;
  text-shadow: 0 0 18px rgba(233, 192, 122, 0.5);
}

.engine-toggle-group { display: flex; gap: 10px; margin-top: 6px; }
.btn-engine {
  flex: 1;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.btn-engine:hover { border-color: var(--border-strong); color: var(--text); }
.btn-engine.active {
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.2), rgba(233, 192, 122, 0.06));
  border-color: var(--accent);
  color: var(--accent-hi);
  box-shadow: 0 4px 16px -8px rgba(233, 192, 122, 0.7);
}

/* =============================================================
   MODAIS
============================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 7, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: fadeIn 0.22s var(--ease);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(24, 24, 33, 0.96), rgba(15, 15, 21, 0.97));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(233, 192, 122, 0.08);
  position: relative;
  animation: modalIn 0.32s var(--ease) both;
}
.modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233, 192, 122, 0.65), transparent);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.obsidian-modal-card {
  background: linear-gradient(180deg, rgba(24, 24, 33, 0.97), rgba(14, 14, 20, 0.98)) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-xl) !important;
  padding: 24px !important;
  box-shadow: var(--sh-lg), 0 0 60px -20px rgba(233, 192, 122, 0.35) !important;
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
}

.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.modal-title i { color: var(--accent); }

.modal-close-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  font-size: 14px;
  cursor: pointer;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  transition: var(--transition);
}
.modal-close-btn:hover { color: var(--text-strong); background: var(--surface-3); border-color: var(--border); }

.modal-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.65; margin-bottom: 14px; }
.modal-actions-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Autenticação */
.auth-tab-toggle {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  gap: 4px;
}
.auth-tab-btn {
  flex: 1;
  padding: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  border-radius: var(--r-xs);
  transition: var(--transition);
}
.auth-tab-btn:hover { color: var(--text); }
.auth-tab-btn.active {
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.2), rgba(233, 192, 122, 0.07));
  color: var(--accent-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* =============================================================
   DROPDOWN CÁPSULA
============================================================= */
.custom-capsule-selector { position: relative; width: 100%; margin-bottom: 14px; }

.capsule-btn {
  width: 100%;
  padding: 11px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.capsule-btn:hover { border-color: var(--accent-line); background: rgba(233, 192, 122, 0.07); }
.capsule-btn.open { border-color: var(--accent); box-shadow: var(--ring); }

.capsule-icon { color: var(--accent); font-size: 12.5px; display: flex; align-items: center; }
.capsule-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.capsule-arrow { color: var(--text-faint); font-size: 11px; transition: transform var(--t-base); }
.capsule-btn.open .capsule-arrow { transform: rotate(180deg); color: var(--accent); }

.capsule-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 1050;
  background: linear-gradient(180deg, var(--pop-1), var(--pop-2));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 8px;
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  max-height: 280px;
  overflow-y: auto;
  animation: popIn 0.2s var(--ease) both;
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.capsule-menu-header {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 10px 9px 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 6px;
}
.capsule-menu-items { display: flex; flex-direction: column; gap: 2px; }

.capsule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-xs);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.capsule-item:hover { background: rgba(233, 192, 122, 0.12); color: var(--text-strong); }
.capsule-item.active {
  background: linear-gradient(90deg, rgba(233, 192, 122, 0.2), rgba(233, 192, 122, 0.06));
  border-color: var(--accent-line);
  color: var(--accent-hi);
  font-weight: 700;
}

/* =============================================================
   MENU DE 3 PONTOS
============================================================= */
.btn-3dots {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 34px; height: 34px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.btn-3dots:hover { background: rgba(233, 192, 122, 0.14); border-color: var(--accent-line); color: var(--accent); }

.menu-3dots-popup {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 232px;
  background: linear-gradient(180deg, var(--pop-1), var(--pop-2));
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 6px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  animation: popIn 0.18s var(--ease) both;
}
.menu-3dots-popup.hidden { display: none !important; }

.menu-3dots-header {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding: 7px 10px 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 3px;
}

.menu-3dots-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.menu-3dots-item:hover { background: rgba(233, 192, 122, 0.13); color: var(--text-strong); }
.menu-3dots-item.danger { color: var(--danger); }
.menu-3dots-item.danger:hover { background: rgba(255, 125, 110, 0.15); color: #ffb3a9; }

/* =============================================================
   NOTIFICAÇÃO TOAST
============================================================= */
.toast-premium {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 99999;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 14px 18px;
  border-radius: var(--r);
  background: linear-gradient(140deg, rgba(26, 26, 36, 0.97), rgba(14, 14, 20, 0.97));
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: var(--sh-lg), 0 0 40px -18px rgba(233, 192, 122, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: toastIn 0.36s var(--ease) both;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(28px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* =============================================================
   LOADER
============================================================= */
.loader-wrapper { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0; }
.loader-label { font-size: 12.5px; color: var(--text-faint); letter-spacing: 0.04em; }

.loader {
  --color-one: #e9c07a;
  --color-two: #c9974d;
  --color-three: rgba(233, 192, 122, 0.5);
  --color-four: rgba(233, 192, 122, 0.28);
  --color-five: rgba(233, 192, 122, 0.16);
  --time-animation: 2s;
  --size: 0.7;

  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: scale(var(--size));
  box-shadow: 0 0 25px 0 var(--color-three), 0 20px 50px 0 var(--color-four);
  animation: colorize calc(var(--time-animation) * 3) ease-in-out infinite;
}
.loader::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100px; height: 100px;
  border-radius: 50%;
  border-top: solid 1px var(--color-one);
  border-bottom: solid 1px var(--color-two);
  background: linear-gradient(180deg, var(--color-five), var(--color-four));
  box-shadow: inset 0 10px 10px 0 var(--color-three), inset 0 -10px 10px 0 var(--color-four);
}
.loader .box {
  position: absolute;
  top: 0; left: 0;
  width: 100px; height: 100px;
  border-radius: 50%;
  box-shadow: inset 0 0 20px 0 var(--color-one);
  animation: roundness var(--time-animation) ease-in-out infinite;
}
.loader svg { width: 100px; height: 100px; }
.loader svg #clipping polygon { fill: var(--color-one); }
.loader svg #clipping polygon:nth-child(1) { transform-origin: 50% 50%; animation: rotation var(--time-animation) linear infinite; }
.loader svg #clipping polygon:nth-child(2) { transform-origin: 40% 50%; animation: rotation var(--time-animation) linear infinite; animation-delay: calc(var(--time-animation) / -2); }

@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes roundness { 0%, 60%, 100% { filter: contrast(15); } 20%, 40% { filter: contrast(3); } }
@keyframes colorize { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(-25deg); } }

/* =============================================================
   GRÁFICO DE BARRAS DO DASHBOARD
============================================================= */
#containerDailyChart { border-bottom: 1px solid var(--border-soft) !important; }

/* =============================================================
   RESPONSIVO — TABLET
============================================================= */
@media (max-width: 1180px) {
  .kpi-grid, .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .two-columns-layout, .engine-grid, .grid-3 { grid-template-columns: 1fr; }
  .chat-workspace, .chat-shell { grid-template-columns: 1fr; height: auto; }
  .kanban, .kanban-board-grid { grid-template-columns: repeat(2, 1fr); }
  .content-body { padding: 22px 22px 60px 22px; }
  .topbar { padding: 16px 22px; }
}

@media (max-width: 980px) {
  .hero-card { padding: 20px; }
  .hero-stats { width: 100%; }
  .hero-stat { flex: 1; }
}

/* =============================================================
   RESPONSIVO — APP MOBILE
============================================================= */

/* iOS exige 16px em inputs para não dar auto-zoom */
@media screen and (max-width: 780px) {
  input, textarea, select,
  .field input, .field select, .field textarea,
  .search-input input, .chat-footer input { font-size: 17px !important; }
}

@media (max-width: 780px) {
  *, *::before, *::after { max-width: 100% !important; box-sizing: border-box !important; }

  html, body {
    overflow-x: hidden !important;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    height: 100dvh;
    margin: 0 !important;
    padding: 0 !important;
  }

  body::before { filter: blur(40px); opacity: 0.6; }

  .app-layout {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  /* Menu lateral off-canvas */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 288px !important;
    max-width: 82% !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 10000 !important;
    background: linear-gradient(180deg, rgba(15, 15, 22, 0.98), rgba(8, 8, 13, 0.99)) !important;
    border-right: 1px solid var(--border) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s var(--ease) !important;
    box-shadow: 14px 0 44px rgba(0, 0, 0, 0.85) !important;
  }
  .sidebar.open { transform: translateX(0) !important; }

  .sidebar-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.68) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 9999 !important;
  }
  .sidebar-overlay.active { display: block !important; animation: fadeIn 0.2s var(--ease); }

  .mobile-only { display: inline-flex !important; }

  .main {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* No celular a topbar dá lugar à navbar inferior */
  header.topbar, .topbar { display: none !important; }

  .content-body {
    padding: 12px 12px 90px 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .grid-2, .grid-3, .engine-grid, .metric-row {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; width: 100% !important; }
  .kpi { padding: 14px !important; }
  .kpi-value { font-size: 22px !important; }
  .kpi-top { margin-bottom: 10px !important; }
  .kpi-top i { width: 26px !important; height: 26px !important; font-size: 11px !important; }

  .card, .hero-card, .obsidian-card, .obsidian-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 16px 14px !important;
    border-radius: var(--r-lg) !important;
  }

  .hero-card { flex-direction: column !important; gap: 16px !important; text-align: center !important; }
  .hero-left { flex-direction: column !important; align-items: center !important; }
  .hero-stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    border-top: 1px solid var(--border-soft) !important;
    padding-top: 14px !important;
  }
  .hero-stat { min-width: 0 !important; padding: 10px 8px !important; text-align: center; }
  .hero-stat .value { font-size: 14px !important; }

  /* Tabelas viram cards */
  table, .responsive-card-table { display: block !important; width: 100% !important; min-width: 100% !important; }
  table thead, .responsive-card-table thead { display: none !important; }
  table tbody, .responsive-card-table tbody { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; }

  table tr, .responsive-card-table tr {
    display: flex !important;
    flex-direction: column !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r) !important;
    padding: 14px !important;
    gap: 8px !important;
    width: 100% !important;
  }

  table td, .responsive-card-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 0 !important;
    border: none !important;
    font-size: 12.5px !important;
    width: 100% !important;
    white-space: normal !important;
  }
  tbody tr:hover td { background: transparent !important; box-shadow: none !important; }

  table td[data-label]::before, .responsive-card-table td[data-label]::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 8px;
  }

  table td[data-label="Ação"], .responsive-card-table td[data-label="Ação"] {
    margin-top: 6px;
    padding-top: 10px !important;
    border-top: 1px solid var(--border-soft) !important;
    justify-content: flex-end !important;
  }

  /* Kanban vira carrossel */
  .kanban-board-grid, .kanban {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 12px;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-column { min-width: 82% !important; max-width: 85% !important; scroll-snap-align: center; flex-shrink: 0; }

  /* Conversas */
  .chat-workspace, .chat-shell {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 84px) !important;
    height: calc(100dvh - 84px) !important;
    gap: 0 !important;
    position: relative !important;
    width: 100% !important;
  }
  .chat-sidebar { display: flex !important; width: 100% !important; height: 100% !important; }

  body.mobile-chat-active .topbar,
  body.mobile-chat-active header { display: none !important; }

  .chat-main { display: none !important; }
  .chat-main.mobile-chat-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 99999 !important;
    background:
      radial-gradient(700px 400px at 50% 0%, rgba(233, 192, 122, 0.07), transparent 70%),
      var(--bg) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .chat-main.mobile-chat-open .chat-header {
    height: 62px !important;
    min-height: 62px !important;
    padding: 8px 12px !important;
    background: rgba(14, 14, 20, 0.94) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  .mobile-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--accent);
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .chat-header-title { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
  .chat-header-title > div { min-width: 0; overflow: hidden; }
  .chat-header-title h3 { font-size: 14px !important; font-weight: 700 !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .chat-header-title p { font-size: 11px !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .chat-header-badges { flex-shrink: 0 !important; max-width: 50% !important; }
  #chatHeaderStatus { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-header-title .ch-icon { width: 34px !important; height: 34px !important; }

  .bubble { max-width: 82% !important; font-size: 14px !important; }
  .chart-bar { max-width: 46px !important; }
  .chart-bar-col { max-width: 100% !important; }

  /* O menu tem 16 itens. Sem altura maxima ele passa do fim da tela
     no celular, e popup nao rola: os ultimos itens simplesmente nao
     existiam para quem usa o telefone. */
  .menu-3dots-popup {
    position: absolute !important;
    right: 12px !important;
    top: 56px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 100000 !important;
  }
  /* Sem nowrap: item de texto longo era cortado na largura fixa, e nao
     havia como rolar para o lado para ler o resto. */
  .menu-3dots-item {
    padding: 11px 12px !important;
    font-size: 12.5px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  .chat-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 12px !important;
    background: var(--flutuante) !important;
    border-top: 1px solid var(--border) !important;
  }

  .quick-scripts, .quick-reply-btn-wrap {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  .quick-scripts::-webkit-scrollbar { display: none; }
  .quick-scripts .qs { white-space: nowrap !important; flex-shrink: 0 !important; font-size: 11px !important; padding: 7px 13px !important; }

  .chat-input-row { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; }
  .chat-input-row #inputChatMessageText {
    flex: 1 !important;
    height: 46px !important;
    border-radius: 23px !important;
    padding: 0 18px !important;
    font-size: 17px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--border) !important;
    color: #fff !important;
  }
  .chat-input-row #btnChatAttachMedia {
    width: 46px !important; height: 46px !important; min-width: 46px !important;
    border-radius: 50% !important;
    background: var(--surface-3) !important;
    border: 1px solid var(--border) !important;
    color: var(--accent) !important;
    padding: 0 !important;
  }
  .chat-input-row #btnSendChatMessage {
    width: 46px !important; height: 46px !important; min-width: 46px !important;
    border-radius: 50% !important;
    background: var(--grad-accent) !important;
    border: none !important;
    color: var(--accent-ink) !important;
    padding: 0 !important;
    font-size: 14px !important;
    box-shadow: var(--sh-gold) !important;
  }

  /* Navbar inferior flutuante */
  body.mobile-chat-active .mobile-bottom-nav { display: none !important; }

  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important;
    padding: 0 8px env(safe-area-inset-bottom) 8px !important;
    background: rgba(12, 12, 18, 0.82) !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(34px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(180%) !important;
    border-radius: 22px 22px 0 0 !important;
    z-index: 9000 !important;
    align-items: center !important;
    justify-content: space-around !important;
  }

  .mobile-bottom-nav .mn-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-faint) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    gap: 4px !important;
    cursor: pointer !important;
    flex: 1 !important;
    padding: 4px 0 !important;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease) !important;
  }
  .mobile-bottom-nav .mn-item i { font-size: 17px !important; }
  .mobile-bottom-nav .mn-item:active { transform: scale(0.92) !important; }
  .mobile-bottom-nav .mn-item.active { color: var(--accent) !important; }
  .mobile-bottom-nav .mn-item.active i { filter: drop-shadow(0 0 8px rgba(233, 192, 122, 0.6)); }

  .mobile-bottom-nav .mn-center-btn {
    position: relative !important;
    top: -16px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 19px !important;
    background: var(--grad-accent) !important;
    box-shadow: 0 10px 26px -8px rgba(233, 192, 122, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    border: 3px solid #0b0b12 !important;
    color: var(--accent-ink) !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }
  .mobile-bottom-nav .mn-center-btn i { color: var(--accent-ink) !important; }
  .mobile-bottom-nav .mn-center-btn:active { transform: scale(0.9) !important; }

  .tab-content { padding-bottom: 20px !important; }

  /* Bottom sheet */
  .mobile-menu-sheet-overlay {
    display: flex !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100000;
    align-items: flex-end;
    transition: opacity 0.25s var(--ease);
  }
  .mobile-menu-sheet-overlay.hidden { display: none !important; }

  .mobile-menu-sheet {
    width: 100%;
    max-height: 86vh;
    max-height: 86dvh;
    background: linear-gradient(180deg, rgba(22, 22, 31, 0.98), rgba(11, 11, 17, 0.99));
    border-top: 1px solid var(--border-strong);
    border-radius: 26px 26px 0 0;
    padding: 12px 18px calc(30px + env(safe-area-inset-bottom)) 18px;
    box-shadow: 0 -14px 50px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    animation: sheetSlideUp 0.32s var(--ease);
  }

  @keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .sheet-handle-bar { width: 44px; height: 4px; background: var(--surface-4); border-radius: var(--r-full); margin: 0 auto 14px auto; }

  .sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 14px;
  }

  .sheet-content { display: flex; flex-direction: column; }

  .sheet-group-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 16px 0 10px 0;
  }

  .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .sheet-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .sheet-card:active {
    background: rgba(233, 192, 122, 0.15);
    border-color: var(--accent);
    transform: scale(0.96);
  }
  .sheet-card i { font-size: 17px; }
  .sheet-card span { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.25; }

  .modal-card, .obsidian-modal-card, #loginModal .modal-card {
    width: 92% !important;
    max-width: 92% !important;
    margin: auto !important;
    padding: 20px 16px !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    border-radius: var(--r-lg) !important;
  }

  .toast-premium { left: 14px; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; }
}

@media (max-width: 480px) {
  .btn { padding: 0 12px !important; font-size: 12.5px !important; }
  .card-title { font-size: 14px !important; }
  .card-sub { font-size: 11px !important; }
  #chatHeaderStatus { font-size: 11px !important; padding: 3px 9px !important; max-width: 140px; }
  .sheet-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   ACESSIBILIDADE
============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   LISTA DE CONVERSAS (linhas)
============================================================= */
#tblChatList { display: block; }
#tblChatList tr { display: block; }
#tblChatList td { padding: 0 !important; border: none !important; background: transparent !important; display: block; }
#tblChatList tr:hover td { background: transparent !important; box-shadow: none !important; }

.chat-item { margin-bottom: 4px; }
.ci-avatar { width: 34px !important; height: 34px !important; font-size: 11px !important; }
.ci-body { flex: 1; overflow: hidden; }
.ci-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ci-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.ci-preview { font-size: 11px; color: var(--text-faint); margin: 3px 0 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.active .ci-name { color: var(--accent-hi); }

/* =============================================================
   GRÁFICO DE BARRAS & PERFORMANCE POR CHIP
============================================================= */
.chart-bar-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  animation: rise 0.5s var(--ease) both;
}

.chart-bar {
  width: 100%;
  max-width: 42px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, rgba(233, 192, 122, 0.95), rgba(201, 151, 77, 0.35));
  box-shadow: 0 -2px 18px -6px rgba(233, 192, 122, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: height 0.7s var(--ease), filter var(--t-fast);
  min-height: 4px;
}
.chart-bar-col:hover .chart-bar { filter: brightness(1.18); }

.chart-bar-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.chart-bar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}

.chart-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-faint);
  font-size: 12.5px;
  text-align: center;
}
.chart-empty i { font-size: 22px; opacity: 0.45; }

.chip-perf-row {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  padding: 12px 14px;
  transition: var(--transition);
}
.chip-perf-row:hover { border-color: var(--accent-line); background: var(--surface-3); }
.chip-perf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.chip-perf-name { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.chip-perf-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.chip-perf-track { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: var(--r-full); overflow: hidden; }
.chip-perf-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--grad-accent);
  box-shadow: 0 0 10px rgba(233, 192, 122, 0.5);
  transition: width 0.7s var(--ease);
}

/* =============================================================
   AJUSTES FINOS DE ELEMENTOS DINÂMICOS
============================================================= */
/* Selects nativos dentro de cards do Kanban e listas */
.kanban-card select, .kanban-card .form-control { font-size: 11px; padding: 7px 10px; }

/* Barra de progresso genérica usada em campanhas */
progress { width: 100%; height: 6px; border: none; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.06); }
progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.06); border-radius: var(--r-full); }
progress::-webkit-progress-value { background: var(--grad-accent); border-radius: var(--r-full); }

/* Áudio embutido nas bolhas e scripts */
audio { filter: invert(0.92) hue-rotate(180deg) saturate(0.6); border-radius: var(--r-full); }

/* Emojis usados como ícones ganham alinhamento consistente */
.sheet-group-label, .capsule-item, .menu-3dots-item { font-variant-emoji: text; }

/* Linhas de tabela dentro de wrappers roláveis não colam na borda */
.collapsible-table-wrap table { padding: 0 2px; }

/* Nenhum texto de placeholder fica sem tratamento */
.text-faint em, .text-muted em { font-style: normal; color: var(--text-dim); }

/* =============================================================
   ELEMENTOS EXCLUSIVOS DE CELULAR — ocultos no desktop
============================================================= */
.mobile-bottom-nav { display: none; }
.mobile-menu-sheet-overlay { display: none; }
.mobile-only { display: none; }
.mobile-back-btn { display: none; }
.sidebar-overlay { display: none; }

/* =============================================================
   REDE DE SEGURANÇA DE LAYOUT
   Linhas de cabeçalho com estilo inline não colidem em telas
   estreitas — quebram em várias linhas com respiro.
============================================================= */
@media (max-width: 980px) {
  div[style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* DDD reconhecido: o selo de região confirma em verde */
.ddd-region-badge.detected {
  background: linear-gradient(135deg, rgba(95, 224, 160, 0.16), rgba(95, 224, 160, 0.05));
  border-color: rgba(95, 224, 160, 0.35);
  color: var(--success);
  box-shadow: 0 4px 16px -8px rgba(95, 224, 160, 0.7);
}

/* =============================================================
   CENTRAL DE ANÁLISE — barra de período
============================================================= */
.analytics-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.analytics-bar-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.analytics-bar-title > i {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(233, 192, 122, 0.1);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 14px;
}
.analytics-bar-title strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.analytics-bar-title span { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.range-switch {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.range-opt {
  min-width: 46px;
  padding: 7px 12px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  transition: var(--transition);
}
.range-opt:hover { color: var(--text); }
.range-opt.active {
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 14px -6px rgba(233, 192, 122, 0.8);
}

.chart-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(233, 192, 122, 0.1);
  border: 1px solid var(--accent-line);
  padding: 5px 11px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

/* =============================================================
   GRÁFICOS
============================================================= */
.chart-host { position: relative; margin-top: 16px; min-height: 120px; }
.chart-host-lg { min-height: 200px; }

.chart-skeleton {
  height: 180px;
  border-radius: var(--r);
  background: linear-gradient(100deg, rgba(255,255,255,0.03) 20%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 80%);
  background-size: 220% 100%;
  animation: skeletonSweep 1.5s var(--ease) infinite;
}
@keyframes skeletonSweep {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.rb-svg { overflow: visible; }
.rb-grid { stroke: rgba(255, 255, 255, 0.055); stroke-width: 1; }
.rb-axis { fill: var(--text-faint); font-family: var(--font-mono); font-size: 11px; }
.rb-axis-y { text-anchor: end; }
.rb-line { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.rb-dot { opacity: 0.9; }
.rb-cursor { stroke: rgba(233, 192, 122, 0.55); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity 0.15s ease; }
.rb-band { cursor: crosshair; }

.rb-tooltip {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
  min-width: 132px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--flutuante);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 11px;
  transition: opacity 0.15s ease, left 0.12s ease;
}
.rb-tooltip strong {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 6px;
}
.rb-tooltip span { display: flex; align-items: center; gap: 7px; color: var(--text-dim); margin-top: 3px; }
.rb-tooltip span b { margin-left: auto; font-family: var(--font-mono); color: var(--text-strong); }
.rb-tooltip i, .rb-legend i, .rb-legend-row i {
  width: 8px; height: 8px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-block;
}

.rb-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.rb-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-dim); font-weight: 500; }

/* ---- Rosca ---- */
.rb-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rb-donut-chart { width: 168px; flex-shrink: 0; }
.rb-donut-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.rb-slice { transition: opacity 0.2s ease; cursor: default; }
.rb-donut-wrap:hover .rb-slice { opacity: 0.55; }
.rb-donut-wrap .rb-slice:hover { opacity: 1; }
.rb-donut-value {
  fill: var(--text-strong);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.rb-donut-label {
  fill: var(--text-faint);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rb-legend-row { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.rb-legend-name { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-legend-val { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-strong); display: inline-flex; align-items: baseline; gap: 6px; }
.rb-legend-val em { font-style: normal; font-size: 11px; color: var(--text-faint); }

/* ---- Barras horizontais ---- */
.rb-bar-row { margin-bottom: 13px; animation: rise 0.45s var(--ease) both; }
.rb-bar-row:last-child { margin-bottom: 0; }
.rb-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.rb-bar-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-bar-label i { font-size: 11px; color: var(--text-faint); }
.rb-bar-value { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; }
.rb-bar-track { height: 7px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.055); overflow: hidden; }
.rb-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.8s var(--ease);
}

/* ---- Colunas ---- */
.rb-col { transition: opacity 0.2s ease; }
.rb-columns:hover .rb-col { opacity: 0.5; }
.rb-columns .rb-col:hover { opacity: 1; }

/* ---- Funil ---- */
.rb-funnel-step { margin-bottom: 15px; animation: rise 0.45s var(--ease) both; }
.rb-funnel-step:last-child { margin-bottom: 0; }
.rb-funnel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.rb-funnel-name { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.rb-funnel-num { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-strong); display: inline-flex; align-items: baseline; gap: 7px; }
.rb-funnel-num em { font-style: normal; font-size: 11px; color: var(--text-faint); }
.rb-funnel-track { height: 10px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.055); overflow: hidden; }
.rb-funnel-fill { height: 100%; border-radius: var(--r-full); transition: width 0.8s var(--ease); }
.rb-funnel-drop { display: block; font-size: 11px; color: var(--danger); margin-top: 6px; font-weight: 500; }

/* ---- Anel de progresso ---- */
.rb-gauge-value { fill: var(--text-strong); font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.rb-gauge-label { fill: var(--text-faint); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Grade de KPIs com 4 colunas no desktop largo */
.kpi-grid-wide { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1180px) {
  .kpi-grid-wide { grid-template-columns: repeat(2, 1fr); }
  .rb-donut-wrap { gap: 16px; }
  .rb-donut-chart { width: 148px; }
}

/* =============================================================
   INTERRUPTOR NO PADRÃO iOS
   Um único componente para qualquer liga/desliga do painel.
============================================================= */
.ios-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.ios-switch-label { font-size: 12.5px; font-weight: 500; color: var(--text-dim); }

.ios-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.ios-switch-track {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.ios-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #d9d7de);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1), width 0.18s var(--ease);
}

.ios-switch-input:checked + .ios-switch-track {
  background: var(--grad-accent);
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 16px -4px rgba(233, 192, 122, 0.8);
}
.ios-switch-input:checked + .ios-switch-track .ios-switch-knob { transform: translateX(20px); }

.ios-switch:active .ios-switch-knob { width: 28px; }
.ios-switch-input:checked + .ios-switch-track .ios-switch-knob { }
.ios-switch:active .ios-switch-input:checked + .ios-switch-track .ios-switch-knob { transform: translateX(16px); }

.ios-switch-input:focus-visible + .ios-switch-track { box-shadow: var(--ring); }
.ios-switch-input:disabled + .ios-switch-track { opacity: 0.4; cursor: not-allowed; }

/* Linha de chip selecionável no disparo */
.chip-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.chip-switch:hover { border-color: var(--accent-line); background: rgba(0, 0, 0, 0.36); }
.chip-switch.is-offline { opacity: 0.55; }
.chip-switch-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chip-switch-text { display: flex; flex-direction: column; min-width: 0; }
.chip-switch-text strong { font-size: 12.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-switch-text em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* =============================================================
   SELETOR DE MOTOR DE ENVIO
============================================================= */
.engine-toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }

.engine-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 15px 16px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
}
.engine-option:hover { border-color: var(--border-strong); background: var(--surface-3); }

.engine-option-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  transition: var(--transition);
}
.engine-option-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.engine-option-text strong { font-size: 12.5px; font-weight: 700; color: var(--text-strong); }
.engine-option-text em { font-style: normal; font-size: 11px; line-height: 1.5; color: var(--text-faint); }

.engine-option-check {
  position: absolute;
  top: 12px; right: 12px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-accent);
  color: var(--accent-ink);
  font-size: 11px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s var(--ease), transform 0.24s var(--ease);
}

.engine-option.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.14), rgba(233, 192, 122, 0.04));
  box-shadow: 0 6px 22px -12px rgba(233, 192, 122, 0.9);
}
.engine-option.active .engine-option-icon {
  background: rgba(233, 192, 122, 0.16);
  border-color: var(--accent-line);
  color: var(--accent);
}
.engine-option.active .engine-option-check { opacity: 1; transform: scale(1); }
.engine-option.active .engine-option-text strong { color: var(--accent-hi); }

/* =============================================================
   LISTA DE CONVERSAS NO PADRÃO WHATSAPP
============================================================= */
.chat-list-ul {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.chat-item:hover { background: var(--surface-2); }
.chat-item.active {
  background: linear-gradient(90deg, rgba(233, 192, 122, 0.14), rgba(233, 192, 122, 0.03));
  border-color: var(--accent-line);
}

.ci-avatar { width: 44px !important; height: 44px !important; font-size: 12.5px !important; border-radius: 50% !important; }
.ci-body { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ci-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.ci-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-time { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.ci-preview {
  margin: 3px 0 0 0;
  max-width: 100%;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-preview i { margin-right: 4px; font-size: 11px; }
.chat-item.active .ci-name { color: var(--accent-hi); }

.chat-list-empty {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 40px 18px;
  color: var(--text-faint);
}
.chat-list-empty i { font-size: 30px; opacity: 0.5; }
.chat-list-empty strong { font-size: 12.5px; color: var(--text); }
.chat-list-empty p { font-size: 11px; line-height: 1.55; max-width: 34ch; }
.chat-list-empty .btn { margin-top: 6px; }

/* =============================================================
   INDICADOR DE CONEXÕES NO CABEÇALHO DO CHAT
============================================================= */
.conn-wrap { position: relative; flex-shrink: 0; }

.conn-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  transition: var(--transition);
}
.conn-chip:hover { border-color: var(--border-strong); background: var(--surface-3); color: var(--text-strong); }
.conn-chip.is-online { border-color: rgba(95, 224, 160, 0.3); color: var(--success); background: rgba(95, 224, 160, 0.08); }
.conn-chip.is-offline { border-color: rgba(255, 125, 110, 0.3); color: var(--danger); background: rgba(255, 125, 110, 0.08); }
.conn-chip-count { line-height: 1; }

.conn-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: 264px;
  padding: 8px;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--pop-1), var(--pop-2));
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: popIn 0.18s var(--ease) both;
}
.conn-popover.hidden { display: none !important; }

.conn-popover-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding: 7px 10px 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 5px;
}
.conn-popover-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }

.conn-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r-xs);
  font-size: 12.5px;
  transition: background var(--t-fast);
}
.conn-row:hover { background: rgba(255, 255, 255, 0.04); }
.conn-row-name { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-row-state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.conn-row-state.on { color: var(--success); }
.conn-row-state.pending { color: var(--warn); }
.conn-row-state.off { color: var(--text-faint); }
.conn-empty { padding: 14px 10px; text-align: center; font-size: 11px; color: var(--text-faint); }

.conn-popover-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border-radius: var(--r-xs);
  border: 1px dashed var(--accent-line);
  background: rgba(233, 192, 122, 0.06);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.conn-popover-action:hover { background: rgba(233, 192, 122, 0.14); border-style: solid; }

/* =============================================================
   AJUSTES ORGANIZADOS EM BLOCOS
============================================================= */
.settings-group { margin-bottom: 30px; }
.settings-group:last-child { margin-bottom: 0; }

.settings-group-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.settings-group-index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(233, 192, 122, 0.1);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  padding: 5px 9px;
  flex-shrink: 0;
  line-height: 1;
}
.settings-group-head > div { flex: 1; min-width: 200px; }
.settings-group-head h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.settings-group-head p { font-size: 12.5px; color: var(--text-faint); line-height: 1.6; max-width: 70ch; }
.settings-group-head .btn { flex-shrink: 0; }

.sellers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 auto; min-width: 160px; }

.account-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.account-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.account-meta { display: flex; flex-direction: column; min-width: 0; }
.account-meta strong { font-size: 12.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-meta span { font-size: 11px; color: var(--text-faint); }

#pairingCodeValue {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-hi);
  letter-spacing: 0.18em;
  margin: 8px 0;
}

/* =============================================================
   BOTTOM SHEET — identidade e linhas de ação
============================================================= */
.sheet-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sheet-identity-text { display: flex; flex-direction: column; min-width: 0; }
.sheet-identity-text strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-identity-text span { font-size: 11px; color: var(--text-faint); }

.sheet-stack { display: flex; flex-direction: column; gap: 8px; }

.sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.sheet-row:active { transform: scale(0.985); background: var(--surface-3); }
.sheet-row-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
  background: rgba(233, 192, 122, 0.12);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 14px;
}
.sheet-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-row-text strong { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.sheet-row-text em { font-style: normal; font-size: 11px; color: var(--text-faint); }
.sheet-row > .fa-chevron-right { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.sheet-row.danger .sheet-row-icon { background: rgba(255, 125, 110, 0.12); border-color: rgba(255, 125, 110, 0.3); color: var(--danger); }
.sheet-row.danger .sheet-row-text strong { color: var(--danger); }


/* =============================================================
   CHAT NO CELULAR — sem cantos soltos, respiro correto
============================================================= */
@media (max-width: 780px) {
  /* A lista ocupa a tela inteira, sem moldura de card */
  .chat-workspace, .chat-shell {
    height: calc(100dvh - 66px - env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
  }

  .chat-sidebar {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .chat-sidebar > .card-title,
  .chat-sidebar > div:first-child { padding: 0 2px; }

  .chat-list-ul { gap: 0 !important; padding: 0 !important; }
  .chat-item {
    padding: 10px 10px !important;
    border-radius: var(--r) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-soft) !important;
  }
  .chat-item:last-child { border-bottom: none !important; }
  .chat-item.active { border-bottom-color: transparent !important; }
  .ci-avatar { width: 46px !important; height: 46px !important; }
  .ci-name { font-size: 14px !important; }
  .ci-preview { font-size: 12.5px !important; }

  /* Conversa aberta: tela cheia de verdade */
  .chat-main.mobile-chat-open {
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .chat-main.mobile-chat-open .chat-header {
    padding: 8px 10px calc(8px) 10px !important;
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
    height: auto !important;
    min-height: calc(58px + env(safe-area-inset-top)) !important;
  }
  .chat-main.mobile-chat-open .chat-feed-box {
    padding: 14px 12px !important;
    background: transparent !important;
  }

  /* Balões com o arredondamento de app nativo */
  .bubble {
    max-width: 84% !important;
    border-radius: 20px 20px 20px 7px !important;
    padding: 10px 14px !important;
    box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.8) !important;
  }
  .bubble.out { border-radius: 20px 20px 7px 20px !important; }
  .msg-row { margin-bottom: 8px !important; }
  /* Mensagens seguidas do mesmo lado ficam mais juntas e com canto contínuo */
  .msg-row + .msg-row.out .bubble.out { border-top-right-radius: 9px !important; }
  .msg-row + .msg-row:not(.out) .bubble:not(.out) { border-top-left-radius: 9px !important; }

  .conn-popover {
    right: 4px !important;
    width: min(280px, calc(100vw - 24px)) !important;
    z-index: 100001 !important;
  }
}

/* =============================================================
   AJUSTES FINOS DE CELULAR
============================================================= */
@media (max-width: 780px) {
  .analytics-bar { padding: 12px 14px !important; }
  .range-switch { width: 100%; justify-content: space-between; }
  .range-opt { flex: 1; min-width: 0; }

  .settings-group-head { gap: 10px !important; }
  .settings-group-head h3 { font-size: 14px !important; }
  .settings-group-head .btn { width: 100%; }
  .sellers-grid { grid-template-columns: 1fr !important; }
  .btn-row .btn { min-width: 0; width: 100%; }
  .account-card { flex-direction: column; align-items: stretch; }
  .account-card .btn { width: 100%; }

  .engine-toggle-group { grid-template-columns: 1fr !important; }

  .kpi-grid-wide { grid-template-columns: repeat(2, 1fr) !important; }
  .chart-host { margin-top: 12px; }
  .rb-donut-wrap { flex-direction: column; align-items: stretch; gap: 14px; }
  .rb-donut-chart { width: 150px; margin: 0 auto; }
  .rb-tooltip { min-width: 118px; font-size: 11px; }

  .chip-switch { padding: 10px 12px !important; }
  .ios-switch-track { width: 46px; height: 28px; }
  .ios-switch-knob { width: 22px; height: 22px; }
  .ios-switch-input:checked + .ios-switch-track .ios-switch-knob { transform: translateX(18px); }
  .ios-switch:active .ios-switch-input:checked + .ios-switch-track .ios-switch-knob { transform: translateX(14px); }
}

/* Telas muito estreitas */
@media (max-width: 380px) {
  .kpi-grid, .kpi-grid-wide { grid-template-columns: 1fr !important; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .mobile-bottom-nav .mn-item span { font-size: 11px !important; }
}

/* =============================================================
   CORREÇÃO DE CORTE HORIZONTAL
   Itens de grid/flex têm min-width auto por padrão, e um filho
   com texto sem quebra estica a coluna inteira. Zeramos isso em
   toda a cadeia do chat.
============================================================= */
.chat-workspace > *, .chat-shell > * { min-width: 0; }
.chat-sidebar, .chat-list, .chat-main { min-width: 0; max-width: 100%; }
.custom-capsule-selector, .capsule-btn, .search-input, .chat-list-ul { min-width: 0; max-width: 100%; }
.capsule-label, .search-input input { min-width: 0; }
.chat-item, .ci-body, .ci-top, .ci-bottom { min-width: 0; max-width: 100%; }
.chat-header, .chat-header-title, .chat-header-title > div { min-width: 0; }
.chat-footer, .chat-input-row { min-width: 0; max-width: 100%; }
.chat-feed-box { min-width: 0; }

/* =============================================================
   AVATAR COM FOTO DE PERFIL DO WHATSAPP
============================================================= */
.avatar.has-photo, .ch-icon.has-photo {
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}
.avatar.has-photo img, .ch-icon.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.ci-avatar { border-radius: 50% !important; overflow: hidden; }
.ch-icon { overflow: hidden; }
.ch-icon.has-photo { border-color: var(--accent-line); }

/* =============================================================
   NÃO LIDAS NO PADRÃO WHATSAPP
============================================================= */
.ci-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.ci-bottom .ci-preview { flex: 1 1 auto; margin: 0; }

.ci-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--grad-accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 10px -3px rgba(233, 192, 122, 0.9);
  animation: badgePop 0.32s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes badgePop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.chat-item.unread .ci-name { color: var(--text-strong); font-weight: 700; }
.chat-item.unread .ci-preview { color: var(--text-dim); font-weight: 500; }
.chat-item.unread .ci-time { color: var(--accent); font-weight: 600; }

/* =============================================================
   BARRA DE ROLAGEM DA LISTA DE CONVERSAS NO CELULAR
============================================================= */
@media (max-width: 780px) {
  .chat-list-ul::-webkit-scrollbar { width: 0; }
  .chat-list-ul { scrollbar-width: none; }
  .ci-badge { min-width: 21px; height: 21px; font-size: 11px; }
}

/* =============================================================
   NAVBAR DO CELULAR — REDESENHO
   A barra em si fica transparente; todo o vidro e o berço do
   botão central vivem numa camada de fundo (::before). Assim o
   recorte não engole os botões — só o fundo é mascarado.
============================================================= */
@media (max-width: 780px) {

  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(70px + env(safe-area-inset-bottom)) !important;
    padding: 0 6px env(safe-area-inset-bottom) 6px !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 0 !important;
    z-index: 9000 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
  }

  /* Camada de vidro com o berço recortado para o botão central */
  .mobile-bottom-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 1.5px),
      linear-gradient(180deg, rgba(18, 18, 26, 0.78), rgba(7, 7, 11, 0.94));
    backdrop-filter: blur(34px) saturate(200%);
    -webkit-backdrop-filter: blur(34px) saturate(200%);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.8);

    /* O recorte acompanha a silhueta do botão: quadrado de cantos
       arredondados, com folga uniforme de 7px em toda a volta. */
    -webkit-mask-image:
      linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74'%3E%3Crect width='74' height='74' rx='28' ry='28' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-position: 0 0, 50% -22px;
    -webkit-mask-size: 100% 100%, 74px 74px;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: xor;

    mask-image:
      linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74'%3E%3Crect width='74' height='74' rx='28' ry='28' fill='%23000'/%3E%3C/svg%3E");
    mask-position: 0 0, 50% -22px;
    mask-size: 100% 100%, 74px 74px;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: exclude;
  }

  /* ---------------- Indicador deslizante ---------------- */
  .mn-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 24px;
    border-radius: 0 0 4px 4px;
    background: var(--grad-accent);
    box-shadow: 0 0 14px rgba(233, 192, 122, 0.9), 0 0 4px rgba(233, 192, 122, 0.7);
    opacity: 0;
    transform: translateX(-120px);
    transition:
      transform 0.46s cubic-bezier(0.32, 1.35, 0.4, 1),
      width 0.34s cubic-bezier(0.32, 1.35, 0.4, 1),
      opacity 0.22s ease;
    pointer-events: none;
    z-index: 3;
  }
  .mn-indicator.visible { opacity: 1; }

  /* ---------------- Itens ---------------- */
  .mobile-bottom-nav .mn-item {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 5px !important;
    padding: 12px 2px 10px 2px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-faint) !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.015em !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.26s ease, transform 0.18s ease !important;
  }

  .mobile-bottom-nav .mn-item i,
  .mobile-bottom-nav .mn-item span {
    position: relative;
    z-index: 1;
  }

  .mobile-bottom-nav .mn-item i {
    font-size: 17px !important;
    line-height: 1;
    transition:
      transform 0.4s cubic-bezier(0.32, 1.45, 0.4, 1),
      color 0.26s ease,
      filter 0.3s ease !important;
  }

  .mobile-bottom-nav .mn-item span {
    opacity: 0.72;
    transition: opacity 0.26s ease, transform 0.3s var(--ease);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-bottom-nav .mn-item:active { transform: scale(0.92) !important; }

  /* ---------------- Estado ativo ---------------- */
  .mobile-bottom-nav .mn-item.active { color: var(--accent-hi) !important; }
  .mobile-bottom-nav .mn-item.active i {
    color: var(--accent) !important;
    transform: translateY(-2px) scale(1.1);
    filter: drop-shadow(0 5px 12px rgba(233, 192, 122, 0.5));
  }
  .mobile-bottom-nav .mn-item.active span {
    opacity: 1;
    font-weight: 700;
    transform: translateY(-1px);
  }

  /* ---------------- Botão central ---------------- */
  .mobile-bottom-nav .mn-center-btn {
    position: relative !important;
    top: -20px !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    flex: 0 0 60px !important;
    border-radius: 21px !important;
    border: none !important;
    background: var(--grad-accent) !important;
    color: var(--accent-ink) !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 4 !important;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
      0 10px 26px -6px rgba(233, 192, 122, 0.55),
      0 20px 44px -14px rgba(0, 0, 0, 0.95),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
      inset 0 -2px 6px rgba(120, 84, 20, 0.35) !important;
    transition:
      transform 0.3s cubic-bezier(0.32, 1.45, 0.4, 1),
      box-shadow 0.3s ease !important;
  }

  .mobile-bottom-nav .mn-center-btn i {
    color: var(--accent-ink) !important;
    transition: transform 0.34s cubic-bezier(0.32, 1.45, 0.4, 1);
  }

  .mobile-bottom-nav .mn-center-btn:active {
    transform: scale(0.9) !important;
    box-shadow:
      0 5px 14px -4px rgba(233, 192, 122, 0.5),
      0 10px 24px -10px rgba(0, 0, 0, 0.9),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.55) !important;
  }
  .mobile-bottom-nav .mn-center-btn:active i { transform: rotate(90deg) scale(0.92); }

  body.sheet-open .mobile-bottom-nav .mn-center-btn i { transform: rotate(90deg); }
}

@media (max-width: 380px) {
  .mobile-bottom-nav .mn-item span { font-size: 11px !important; }
  .mobile-bottom-nav .mn-item i { font-size: 17px !important; }
  .mobile-bottom-nav .mn-center-btn {
    width: 56px !important; height: 56px !important;
    min-width: 56px !important; flex-basis: 56px !important;
  }
}

/* =============================================================
   MARCA DO APP
   A arte oficial já traz o próprio quadro escuro de cantos
   arredondados, então o contêiner é só um suporte transparente.
============================================================= */
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.75));
}

/* Halo sutil para a marca não sumir sobre o fundo escuro */
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(233, 192, 122, 0.14), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.brand-mark-lg {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px auto;
}
.brand-mark-lg::after { inset: -9px; border-radius: 20px; }

/* Sidebar recolhida: a marca continua centralizada */
.app-layout.sidebar-collapsed .brand-mark { margin: 0 auto; }

/* Na tela de login não existe navegação: a barra inferior sai de cena */
body:has(#loginModal:not(.hidden)) .mobile-bottom-nav { display: none !important; }

/* =============================================================
   RESUMO ANTES DE DISPARAR
============================================================= */
.ds-card {
  max-width: 620px !important;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.ds-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px 14px -4px;
  padding: 0 4px;
}
.ds-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 50px 0; color: var(--text-faint); font-size: 12.5px;
}

/* Previsão de término em destaque */
.ds-eta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(233, 192, 122, 0.16), transparent 70%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid var(--accent-line);
}
.ds-eta-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds-eta-label {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
}
.ds-eta-value {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent-hi);
}
.ds-eta-sub { font-size: 11px; color: var(--text-dim); }
.ds-eta-ring {
  width: 48px; height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(233, 192, 122, 0.12);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 17px;
}

/* Seções */
.ds-section { margin-bottom: 18px; }
.ds-section:last-child { margin-bottom: 0; }
.ds-section-title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.ds-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.ds-row:last-child { border-bottom: none; }
.ds-row > i { width: 15px; text-align: center; color: var(--text-faint); font-size: 12.5px; flex-shrink: 0; }
.ds-row-label { color: var(--text-dim); flex-shrink: 0; }
.ds-row-value {
  margin-left: auto; text-align: right;
  color: var(--text-strong); font-weight: 500;
  min-width: 0; overflow-wrap: anywhere;
}
.ds-row-value em { font-style: normal; color: var(--text-faint); font-size: 11px; }
.ds-row.warn > i, .ds-row.warn .ds-row-value { color: var(--warn); }

/* Chips */
.ds-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.ds-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: rgba(95, 224, 160, 0.08);
  border: 1px solid rgba(95, 224, 160, 0.28);
  font-size: 11px; font-weight: 600; color: var(--success);
}
.ds-chip.off { background: var(--surface-2); border-color: var(--border); color: var(--text-faint); }

.ds-warn {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(247, 197, 107, 0.09);
  border: 1px solid rgba(247, 197, 107, 0.28);
  color: var(--warn);
  font-size: 11px; line-height: 1.55;
}

.ds-clean {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 13px;
  border-radius: var(--r-sm);
  background: rgba(95, 224, 160, 0.08);
  border: 1px solid rgba(95, 224, 160, 0.24);
  color: var(--success);
  font-size: 12.5px;
}

/* Duplicados */
.ds-dupe-head { margin-bottom: 10px; }
.ds-dupe-head strong { display: block; font-size: 12.5px; color: var(--warn); margin-bottom: 3px; }
.ds-dupe-head span { font-size: 11px; color: var(--text-faint); }

.ds-dupe-list {
  max-height: 150px; overflow-y: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, 0.22);
  margin-bottom: 12px;
}
.ds-dupe-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
}
.ds-dupe-item:last-child { border-bottom: none; }
.ds-dupe-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-dupe-meta { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; }
.ds-dupe-more { padding: 8px 12px; font-size: 11px; color: var(--text-faint); text-align: center; }

/* Política de reenvio */
.ds-policy { display: flex; flex-direction: column; gap: 8px; }
.ds-policy-opt {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: var(--transition);
}
.ds-policy-opt:hover { border-color: var(--border-strong); background: var(--surface-3); }
.ds-policy-opt strong { font-size: 12.5px; font-weight: 700; color: var(--text-strong); }
.ds-policy-opt em { font-style: normal; font-size: 11px; line-height: 1.5; color: var(--text-faint); }
.ds-policy-opt.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.14), rgba(233, 192, 122, 0.04));
}
.ds-policy-opt.active strong { color: var(--accent-hi); }

.ds-actions { flex-shrink: 0; padding-top: 14px; border-top: 1px solid var(--border-soft); }

@media (max-width: 780px) {
  .ds-card { max-height: 92vh; max-height: 92dvh; }
  .ds-eta { flex-direction: column; align-items: flex-start; gap: 12px; padding: 15px 16px; }
  .ds-eta-value { font-size: 17px; }
  .ds-row { flex-wrap: wrap; }
  .ds-row-value { margin-left: 0; text-align: left; width: 100%; padding-left: 25px; }
  .ds-actions .btn { flex: 1; }
}

/* =============================================================
   SELO DO CHIP NO BALÃO
============================================================= */
.bubble-meta { gap: 6px; }
.bubble-time { opacity: 0.85; }

.bubble-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bubble-chip i { font-size: 11px; opacity: 0.8; }
.bubble.out .bubble-chip {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(233, 192, 122, 0.28);
  color: rgba(253, 243, 224, 0.85);
}

/* =============================================================
   LINHA DO TEMPO DO CONTATO
============================================================= */
.hist-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.hist-stat {
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  text-align: center;
}
.hist-stat.wide { grid-column: 1 / -1; text-align: left; }
.hist-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.hist-stat.wide strong { font-family: var(--font-mono); font-size: 12.5px; }
.hist-stat span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}
.hist-stat.danger strong { color: var(--danger); }

.hist-timeline { position: relative; padding-left: 6px; }
.hist-timeline::before {
  content: "";
  position: absolute;
  left: 20px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border), transparent);
}

.hist-item { display: flex; gap: 14px; padding: 10px 0; position: relative; }
.hist-dot {
  width: 29px; height: 29px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
  z-index: 1;
}
.hist-item.gold .hist-dot { background: rgba(233, 192, 122, 0.14); border-color: var(--accent-line); color: var(--accent); }
.hist-item.iris .hist-dot { background: rgba(157, 140, 245, 0.14); border-color: rgba(157, 140, 245, 0.3); color: var(--iris); }
.hist-item.info .hist-dot { background: rgba(127, 176, 255, 0.14); border-color: rgba(127, 176, 255, 0.3); color: var(--info); }
.hist-item.success .hist-dot { background: rgba(95, 224, 160, 0.14); border-color: rgba(95, 224, 160, 0.3); color: var(--success); }
.hist-item.danger .hist-dot { background: rgba(255, 125, 110, 0.14); border-color: rgba(255, 125, 110, 0.3); color: var(--danger); }

.hist-content { flex: 1; min-width: 0; padding-top: 1px; }
.hist-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hist-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hist-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.hist-title { font-size: 12.5px; font-weight: 600; color: var(--text-strong); margin-top: 3px; overflow-wrap: anywhere; }
.hist-detail { font-size: 11px; color: var(--text-dim); margin-top: 3px; line-height: 1.55; overflow-wrap: anywhere; }
.hist-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px; padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

.hist-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 46px 20px; text-align: center;
}
.hist-empty i { font-size: 30px; color: var(--text-faint); opacity: 0.5; }
.hist-empty strong { font-size: 14px; color: var(--text); }
.hist-empty p { font-size: 12.5px; color: var(--text-faint); max-width: 36ch; line-height: 1.6; }

/* =============================================================
   REENVIOS EM ESPERA
============================================================= */
.pend-all {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.pend-list {
  max-height: 300px;
  overflow-y: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, 0.2);
}
.pend-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: background var(--t-fast);
}
.pend-item:last-child { border-bottom: none; }
.pend-item:hover { background: rgba(255, 255, 255, 0.03); }
.pend-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pend-info strong { font-size: 12.5px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pend-info em { font-style: normal; font-size: 11px; color: var(--text-faint); }
.pend-phone { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex-shrink: 0; }

.pend-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(247, 197, 107, 0.12), rgba(247, 197, 107, 0.03));
  border: 1px solid rgba(247, 197, 107, 0.28);
}
.pend-banner-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(247, 197, 107, 0.16);
  border: 1px solid rgba(247, 197, 107, 0.3);
  color: var(--warn);
  font-size: 14px;
}
.pend-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pend-banner-text strong { font-size: 12.5px; color: var(--warn); }
.pend-banner-text em { font-style: normal; font-size: 11px; color: var(--text-faint); line-height: 1.5; }

/* Destino no funil: dois selects lado a lado */
.move-target-row { align-items: stretch; }
.move-target-row select { flex: 1; min-width: 0; }

@media (max-width: 780px) {
  .hist-summary { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hist-stat { padding: 10px 8px; }
  .hist-stat strong { font-size: 17px; }
  .pend-banner { flex-wrap: wrap; }
  .pend-banner .btn { width: 100%; }
  .move-target-row { flex-direction: column; }
  .bubble-chip { max-width: 100px; }
}

/* =============================================================
   FOTO DO GRUPO
============================================================= */
.group-photo-row { display: flex; align-items: center; gap: 16px; }

.group-photo-preview {
  width: 76px; height: 76px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  color: var(--text-faint);
  font-size: 22px;
  overflow: hidden;
  transition: var(--transition);
}
.group-photo-preview.has-photo { border-style: solid; border-color: var(--accent-line); padding: 0; }
.group-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.group-photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.group-photo-actions .btn { flex-shrink: 0; }

/* =============================================================
   AJUSTES DE CELULAR — TELA CHEIA, SAFE AREA E NAVBAR
============================================================= */
@media (max-width: 780px) {

  /* ---- 1. Conversa ocupando a tela inteira ----
     A animação de entrada da aba deixa um transform residual no
     .tab-content, e qualquer transform vira bloco de contenção
     para position: fixed — era isso que prendia o chat dentro da
     moldura com 12px de recuo. Com a conversa aberta, zeramos. */
  body.mobile-chat-active .tab-content,
  body.mobile-chat-active .tab-content.active {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
  }

  .chat-main.mobile-chat-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Sem barra de rolagem do container por baixo da conversa */
  body.mobile-chat-active .content-body { overflow: hidden !important; }

  /* ---- 2. Espaço da barra de status (bateria, wi-fi, sinal) ----
     Em PWA instalado o conteúdo sobe até o topo da tela. Esta
     faixa opaca fica acima de tudo para nada rolar por trás dos
     ícones do sistema. */
  .app-layout::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: rgba(6, 6, 10, 0.92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    z-index: 100003;
    pointer-events: none;
  }

  .content-body {
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
  }

  .sidebar {
    padding-top: calc(20px + env(safe-area-inset-top)) !important;
  }

  .modal-backdrop {
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .mobile-menu-sheet-overlay { padding-top: env(safe-area-inset-top); }

  /* ---- 3. Navbar mais baixa ---- */
  .mobile-bottom-nav {
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    padding: 0 6px env(safe-area-inset-bottom) 6px !important;
    border-radius: 20px 24px 0 0 !important;
  }

  .mobile-bottom-nav::before {
    border-radius: 20px 24px 0 0;
    /* Recorte acompanhando a nova altura e o botão menor */
    -webkit-mask-image:
      linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68'%3E%3Crect width='68' height='68' rx='25' ry='25' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-position: 0 0, 50% -21px;
    -webkit-mask-size: 100% 100%, 68px 68px;
    mask-image:
      linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='68'%3E%3Crect width='68' height='68' rx='25' ry='25' fill='%23000'/%3E%3C/svg%3E");
    mask-position: 0 0, 50% -21px;
    mask-size: 100% 100%, 68px 68px;
  }

  .mobile-bottom-nav .mn-item {
    padding: 7px 2px 5px 2px !important;
    gap: 3px !important;
    font-size: 11px !important;
  }
  .mobile-bottom-nav .mn-item i { font-size: 17px !important; }

  .mobile-bottom-nav .mn-center-btn {
    top: -16px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 18px !important;
    font-size: 17px !important;
  }

  /* O conteúdo respira acima da navbar mais baixa */
  .content-body { padding-bottom: 78px !important; }
  .chat-workspace, .chat-shell {
    height: calc(100dvh - 58px - env(safe-area-inset-bottom) - env(safe-area-inset-top)) !important;
  }
}

/* =============================================================
   EQUIPE, CARGOS E PERMISSÕES
============================================================= */
.team-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  margin-bottom: 10px;
  transition: var(--transition);
  flex-wrap: wrap;
}
.team-row:last-child { margin-bottom: 0; }
.team-row:hover { border-color: var(--border-strong); background: var(--surface-3); }
.team-row.inactive { opacity: 0.55; }

.team-avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; }
.team-info { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.team-info strong { font-size: 12.5px; color: var(--text-strong); }
.team-info em { font-style: normal; font-size: 11px; color: var(--text-faint); overflow-wrap: anywhere; }
.team-you {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); background: rgba(233, 192, 122, 0.12);
  border: 1px solid var(--accent-line); border-radius: var(--r-full);
  padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.team-role { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.team-actions { flex-shrink: 0; }

/* Cargos */
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }

.role-card {
  padding: 16px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--transition);
}
.role-card:hover { border-color: var(--accent-line); background: var(--surface-3); }
.role-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.role-head strong { font-family: var(--font-display); font-size: 14px; color: var(--text-strong); }
.role-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.role-desc { font-size: 11px; color: var(--text-faint); line-height: 1.55; }
.role-perms { display: flex; flex-wrap: wrap; gap: 5px; }
.role-perm {
  font-size: 11px; font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
}
.role-actions { display: flex; gap: 8px; margin-top: 2px; }

/* Interruptores de permissão */
.perm-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 8px;
  margin: 20px 0 8px 0;
  border-bottom: 1px solid var(--border-soft);
}

.perm-group { margin-bottom: 16px; }
.perm-group:last-child { margin-bottom: 0; }
.perm-group-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 7px;
}

.perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  margin-bottom: 7px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: var(--transition);
}
.perm-row:last-child { margin-bottom: 0; }
.perm-row:hover { border-color: var(--border-strong); background: var(--surface-3); }
.perm-row:has(input:checked) {
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.1), rgba(233, 192, 122, 0.03));
  border-color: var(--accent-line);
}
.perm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm-text strong { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.perm-text em { font-style: normal; font-size: 11px; color: var(--text-faint); line-height: 1.5; }

.perm-row.danger-row:has(input:checked) {
  background: linear-gradient(135deg, rgba(95, 224, 160, 0.1), rgba(95, 224, 160, 0.03));
  border-color: rgba(95, 224, 160, 0.28);
}

@media (max-width: 780px) {
  .team-row { gap: 10px; }
  .team-actions, .team-role { width: 100%; }
  .team-actions .btn { width: 100%; }
  .roles-grid { grid-template-columns: 1fr; }
  .perm-row { padding: 10px 12px; }
}

/* =============================================================
   MENSAGEM APAGADA PELO REMETENTE
   Guardamos o conteúdo: ele fica embaçado, com um "ver" que revela.
============================================================= */
.bubble-content { transition: filter 0.28s var(--ease), opacity 0.28s var(--ease); }

.bubble.is-deleted .bubble-content {
  filter: blur(7px);
  opacity: 0.75;
  user-select: none;
  pointer-events: none;
}
.bubble.is-deleted.revealed .bubble-content {
  filter: none;
  opacity: 1;
  user-select: text;
  pointer-events: auto;
}

.bubble-deleted-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-style: italic;
  color: var(--text-faint);
}
.bubble-deleted-note i { font-size: 11px; opacity: 0.8; }

.bubble-reveal {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.bubble-reveal:hover {
  background: rgba(233, 192, 122, 0.16);
  border-color: var(--accent-line);
  color: var(--accent-hi);
}
.bubble-reveal:active { transform: scale(0.94); }

.bubble.out .bubble-deleted-note { border-top-color: rgba(233, 192, 122, 0.28); color: rgba(253, 243, 224, 0.7); }
.bubble.out .bubble-reveal { background: rgba(0, 0, 0, 0.24); border-color: rgba(233, 192, 122, 0.32); }

/* =============================================================
   SELO DO CHIP NA LISTA DE CONVERSAS
   Só aparece quando há mais de um WhatsApp conectado — com um só,
   dizer "por qual chip" seria ruído.
============================================================= */
.ci-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 8px;
  max-width: 100%;
  border-radius: var(--r-full);
  background: rgba(233, 192, 122, 0.1);
  border: 1px solid var(--accent-line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-chip i { font-size: 11px; opacity: 0.85; flex-shrink: 0; }

.chat-item.active .ci-chip {
  background: rgba(233, 192, 122, 0.18);
  color: var(--accent-hi);
}

@media (max-width: 780px) {
  .ci-chip { font-size: 11px; padding: 3px 9px; }
}

/* =============================================================
   LISTA DE CONEXÕES NO CELULAR
   O painel era filho de um botão de 40px, e a regra global
   `max-width: 100%` do mobile o espremia até virar uma tira.
   No celular ele passa a se ancorar na tela, não no botão.
============================================================= */
@media (max-width: 780px) {
  .conn-wrap { position: static; }

  .conn-popover {
    position: fixed !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 0;
    padding: 10px;
    border-radius: var(--r-lg);
    z-index: 100002 !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.9);
  }

  /* Abaixo do cabeçalho da conversa, respeitando o topo da tela */
  .chat-main.mobile-chat-open .conn-popover {
    top: calc(60px + env(safe-area-inset-top)) !important;
  }

  /* Fora da conversa aberta, o cabeçalho do chat fica mais alto */
  .conn-popover { top: calc(74px + env(safe-area-inset-top)) !important; }

  .conn-popover-head {
    font-size: 11px;
    padding: 8px 10px 10px 10px;
    margin-bottom: 6px;
  }

  .conn-popover-list { max-height: 46vh; }

  .conn-row {
    padding: 12px 12px;
    font-size: 12.5px;
    gap: 11px;
  }
  .conn-row-name { font-size: 12.5px; }
  .conn-row-state { font-size: 11px; }

  .conn-popover-action {
    padding: 13px;
    font-size: 12.5px;
    margin-top: 8px;
  }

  /* O chip do cabeçalho também ganha alvo de toque decente */
  .conn-chip { height: 32px; padding: 0 11px; }
}

/* Telas bem estreitas: nada de texto espremido */
@media (max-width: 380px) {
  .conn-popover { left: 8px !important; right: 8px !important; }
  .conn-row { padding: 11px 10px; }
  .conn-row-state { font-size: 11px; }
}

/* =============================================================
   SELETOR DE CONTAS
   Aparece só quando existe mais de uma conta para alternar.
============================================================= */
.account-switcher {
  position: relative;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.acct-current {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.acct-current:hover { border-color: var(--accent-line); background: var(--surface-3); }
.acct-current > .fa-chevron-down { font-size: 11px; color: var(--text-faint); margin-left: auto; flex-shrink: 0; }

.acct-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
  flex-shrink: 0;
}

.acct-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acct-text strong {
  font-size: 12.5px; font-weight: 600; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-text em {
  font-style: normal; font-size: 11px; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.acct-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1100;
  padding: 8px;
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--pop-1), var(--pop-2));
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: popIn 0.18s var(--ease) both;
}
.acct-menu.hidden { display: none !important; }

.acct-menu-head {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  padding: 6px 8px 8px 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 5px;
}

.acct-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border-radius: var(--r-xs);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
}
.acct-item:hover { background: rgba(255, 255, 255, 0.04); }
.acct-item.active {
  background: linear-gradient(90deg, rgba(233, 192, 122, 0.14), rgba(233, 192, 122, 0.03));
  border-color: var(--accent-line);
}
.acct-item > .fa-check { margin-left: auto; font-size: 11px; color: var(--accent); flex-shrink: 0; }

/* Sidebar recolhida: só o avatar */
.app-layout.sidebar-collapsed .acct-text,
.app-layout.sidebar-collapsed .acct-current > .fa-chevron-down { display: none; }
.app-layout.sidebar-collapsed .acct-current { justify-content: center; padding: 9px 4px; }
.app-layout.sidebar-collapsed .acct-menu { left: -6px; right: auto; width: 230px; }

/* =============================================================
   CONVITE PARA UMA CONTA
============================================================= */
.invite-card { max-width: 460px !important; text-align: center; }

.invite-icon {
  width: 62px; height: 62px;
  margin: 4px auto 16px auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(233, 192, 122, 0.22), rgba(233, 192, 122, 0.06));
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 22px;
  box-shadow: 0 10px 30px -12px rgba(233, 192, 122, 0.7);
}

.invite-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.invite-sub { font-size: 12.5px; line-height: 1.65; color: var(--text-dim); margin-bottom: 12px; }
.invite-sub strong { color: var(--accent-hi); }

.invite-role-desc {
  font-size: 11px; color: var(--text-faint);
  line-height: 1.6; margin-bottom: 14px;
}

.invite-perms {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--border-soft);
}
.invite-perms-title {
  width: 100%;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.invite-perm {
  font-size: 11px; font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(233, 192, 122, 0.1);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

.invite-note {
  font-size: 11px; line-height: 1.6;
  color: var(--text-faint);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  margin-bottom: 8px;
}
.invite-more { font-size: 11px; color: var(--accent); margin-bottom: 6px; }
.invite-actions { justify-content: center; margin-top: 14px; }
.invite-actions .btn { flex: 1; }

/* =============================================================
   RITMO DE ENTRADA EM GRUPOS
============================================================= */
.pacing-card {
  border: 1px solid var(--accent-line) !important;
  background: rgba(233, 192, 122, 0.04) !important;
}

.pacing-toggle {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.pacing-toggle:hover { background: transparent !important; }
.pacing-toggle-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pacing-toggle-text strong { font-size: 12.5px; font-weight: 700; color: var(--text-strong); }
.pacing-toggle-text em { font-style: normal; font-size: 11px; line-height: 1.55; color: var(--text-faint); }

.pacing-estimate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--text-dim);
}
.pacing-estimate i { color: var(--accent); font-size: 12.5px; flex-shrink: 0; }
.pacing-estimate strong { color: var(--text-strong); }

@media (max-width: 780px) {
  .invite-card { max-width: 92% !important; }
  .invite-actions { flex-direction: column-reverse; }
  .invite-actions .btn { width: 100%; }
  .pacing-toggle { flex-direction: row; align-items: center; }
  .account-switcher { padding-top: 10px; }
}

/* =============================================================
   SELETOR DE CONTA NO MENU DO CELULAR
   A sidebar fica fora da tela no celular; o menu do botão de três
   traços é onde a pessoa procura a própria conta.
============================================================= */
.sheet-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}
.sheet-identity:active { transform: scale(0.985); background: var(--surface-3); }
.sheet-identity.static { cursor: default; background: transparent; border-color: transparent; padding-left: 0; }
.sheet-identity.static:active { transform: none; }

.sheet-identity-chevron {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-faint);
  transition: transform 0.28s var(--ease);
}
.sheet-identity-chevron.open { transform: rotate(180deg); color: var(--accent); }

.sheet-accounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px 0;
  padding: 8px;
  border-radius: var(--r);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--border-soft);
  animation: rise 0.26s var(--ease) both;
}
.sheet-accounts.hidden { display: none !important; }

.sheet-account {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}
.sheet-account:active { transform: scale(0.98); background: var(--surface-2); }
.sheet-account.active {
  background: linear-gradient(90deg, rgba(233, 192, 122, 0.16), rgba(233, 192, 122, 0.04));
  border-color: var(--accent-line);
}
.sheet-account > .fa-check { margin-left: auto; color: var(--accent); font-size: 12.5px; flex-shrink: 0; }
.sheet-account .acct-avatar { width: 38px !important; height: 38px !important; font-size: 11px !important; }
.sheet-account .acct-text strong { font-size: 12.5px; }
.sheet-account .acct-text em { font-size: 11px; }

/* Aviso de convite dentro do menu */
.sheet-invite-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
  padding: 13px 14px;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(233, 192, 122, 0.16), rgba(233, 192, 122, 0.04));
  border: 1px solid var(--accent-line);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  animation: badgePop 0.4s var(--ease) both;
}
.sheet-invite-banner:active { transform: scale(0.985); }
.sheet-invite-banner.hidden { display: none !important; }

.sheet-invite-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: rgba(233, 192, 122, 0.18);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 14px;
}
.sheet-invite-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-invite-text strong { font-size: 12.5px; color: var(--accent-hi); }
.sheet-invite-text em { font-style: normal; font-size: 11px; color: var(--text-faint); }
.sheet-invite-banner > .fa-chevron-right { font-size: 11px; color: var(--accent); flex-shrink: 0; }

/* No desktop o seletor da sidebar já resolve */
@media (min-width: 781px) {
  .sheet-accounts, .sheet-invite-banner { display: none !important; }
}

/* Destaque momentâneo ao chegar por atalho */
.highlight-pulse { animation: highlightPulse 1.6s var(--ease); }
@keyframes highlightPulse {
  0%, 100% { box-shadow: none; }
  25%, 60% { box-shadow: 0 0 0 2px var(--accent-line), 0 0 40px -8px rgba(233, 192, 122, 0.6); border-radius: var(--r-lg); }
}

.team-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 34px 20px; text-align: center;
}
.team-empty i { font-size: 30px; color: var(--text-faint); opacity: 0.5; }
.team-empty strong { font-size: 12.5px; color: var(--text); }
.team-empty p { font-size: 11px; color: var(--text-faint); max-width: 34ch; line-height: 1.6; }


/* =============================================================
   PLAYER DE ÁUDIO DAS CONVERSAS
   Substitui o <audio controls> cinza do navegador por um player
   próprio: onda desenhada, agulha, tempo e velocidade.
============================================================= */
.aud {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 226px;
    max-width: 300px;
    padding: 2px 0;
}

.aud-play {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--grad-accent, var(--accent, #e9c07a));
    color: var(--accent-ink, #2a1e07);
    font-size: 12.5px;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    transition: transform .15s ease, box-shadow .2s ease;
}
.aud-play:hover  { transform: scale(1.07); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.aud-play:active { transform: scale(.93); }

.aud-corpo { flex: 1 1 auto; min-width: 0; }

/* ---- A onda ---- */
.aud-onda {
    position: relative;
    height: 28px;
    cursor: pointer;
    touch-action: none;
}

.aud-barras {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.aud-barras i {
    flex: 1 1 0;
    min-width: 2px;
    height: var(--h, 50%);
    border-radius: 8px;
    background: currentColor;
    opacity: .3;
    transform-origin: center;
}

/* A parte já tocada fica por cima, recortada até a posição atual.
   Recortar (e não estreitar) mantém as barras alinhadas com as de baixo. */
.aud-prog {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
}
.aud-prog i {
    opacity: 1;
    background: var(--accent, #e9c07a);
}

.aud-agulha {
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--accent, #e9c07a);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.aud.tocando .aud-agulha,
.aud-onda:hover .aud-agulha { opacity: 1; }

/* ---- Rodapé: tempo e velocidade ---- */
.aud-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 1px;
}

.aud-tempo {
    font-size: 11px;
    opacity: .68;
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

.aud-vel {
    border: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s ease, background .15s ease;
}
.aud-vel:hover { opacity: 1; background: rgba(255, 255, 255, .2); }

/* ---- Vida durante a reprodução ---- */
@keyframes audPulso {
    0%, 100% { transform: scaleY(.82); }
    50%      { transform: scaleY(1.4); }
}
.aud.tocando .aud-barras i {
    animation: audPulso 1.05s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -47ms);
}

.aud-erro .aud-play { opacity: .45; pointer-events: none; }
.aud-erro .aud-tempo { opacity: .55; font-style: italic; }

/* Bolha enviada: a onda herda a cor da tinta sobre o dourado */
.msg-bubble.out .aud-prog i { background: currentColor; }
.msg-bubble.out .aud-agulha { background: currentColor; }
.msg-bubble.out .aud-vel    { background: rgba(0, 0, 0, .14); }

@media (max-width: 640px) {
    .aud { min-width: 0; width: 100%; max-width: 260px; gap: 8px; }
    .aud-play { flex-basis: 34px; width: 34px; height: 34px; font-size: 12.5px; }
    .aud-onda { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .aud.tocando .aud-barras i { animation: none; }
}


/* =============================================================
   TIQUES DE ENTREGA E LEITURA
   Um tique: saiu daqui. Dois: chegou no aparelho. Dois azuis:
   foi aberta. A cor é o sinal — por isso o azul destoa de propósito.
============================================================= */
.mb-check {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.mb-tique {
    font-size: 11px;
    line-height: 1;
    transition: color .25s ease, opacity .25s ease;
}

.mb-tique-enviado,
.mb-tique-entregue {
    color: currentColor;
    opacity: .5;
}

.mb-tique-lido {
    color: #53bdeb;
    opacity: 1;
    animation: tiqueLido .32s ease;
}

.mb-tique-falhou {
    color: #ff6b6b;
    opacity: 1;
}

@keyframes tiqueLido {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mb-tique-lido { animation: none; }
}


/* =============================================================
   CHIPS DE FILTRO DA FILA DE ATENDIMENTO
   Rolam na horizontal em vez de quebrar linha — no celular a
   lista de conversas não pode perder altura para os filtros.
============================================================= */
.cf-chips {
    display: flex;
    gap: 6px;
    padding: 2px 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.cf-chips::-webkit-scrollbar { display: none; }

.cf-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-dim);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.cf-chip:hover {
    color: var(--text);
    background: var(--surface-3);
    border-color: var(--border-strong);
}
.cf-chip:active { transform: scale(.96); }

.cf-chip.is-on {
    background: var(--grad-accent, var(--accent, #e9c07a));
    border-color: transparent;
    color: var(--accent-ink, #2a1e07);
    box-shadow: 0 3px 12px rgba(233, 192, 122, .22);
}

.cf-num {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--surface-4);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cf-chip.is-on .cf-num { background: rgba(0, 0, 0, .17); }

/* Filtro sem nada dentro fica discreto, mas continua clicável */
.cf-chip.is-vazio:not(.is-on)          { opacity: .45; }
.cf-chip.is-vazio:not(.is-on):hover    { opacity: .8; }

@media (max-width: 640px) {
    .cf-chips { gap: 5px; padding-bottom: 8px; }
    .cf-chip  { padding: 5px 9px; font-size: 11px; }
    .cf-num   { min-width: 16px; height: 15px; font-size: 11px; }
}


/* =============================================================
   CABEÇALHO DA LISTA DE CONVERSAS
   O seletor de WhatsApp virou um botão de ícone: a largura toda
   pertence à lista de conversas, não ao filtro.
============================================================= */
.chat-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.chat-scope-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    height: 32px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 10px);
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.chat-scope-btn:hover,
.chat-scope-btn.open {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text);
}
.chat-scope-btn .fa-ellipsis-vertical { font-size: 11px; opacity: .7; }

/* Avisa que a lista está recortada por um WhatsApp específico */
.chat-scope-dot {
    position: absolute;
    top: -3px; right: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent, #e9c07a);
    box-shadow: 0 0 0 2px var(--bg-elev, #0b0b12);
}
.chat-scope-dot[hidden] { display: none; }

/* O menu ancora no botão, que agora é estreito */
.chat-side-head .custom-capsule-selector { position: relative; }
.chat-side-head .capsule-dropdown-menu {
    right: 0;
    left: auto;
    min-width: 244px;
    max-width: min(300px, calc(100vw - 32px));
}

/* Separador entre os filtros de situação e os do funil */
.cf-sep {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 16px;
    margin: 0 3px;
    background: var(--border-strong);
}

/* =============================================================
   AÇÕES NA BOLHA: EDITAR E APAGAR
============================================================= */
.bubble { position: relative; }

.bubble-menu-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .16s ease, background .16s ease;
}
.bubble:hover .bubble-menu-btn { opacity: .6; }
.bubble-menu-btn:hover { opacity: 1 !important; background: rgba(0, 0, 0, .18); }

/* No toque não existe hover: o botão fica discreto porém visível */
@media (hover: none) {
    .bubble-menu-btn { opacity: .38; }
}

.bubble-menu {
    position: fixed;
    z-index: 4000;
    min-width: 208px;
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md, 12px);
    background: var(--surface-solid, #12121a);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
    animation: bubbleMenuIn .14s ease;
}

@keyframes bubbleMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bubble-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease;
}
.bubble-menu button:hover { background: var(--surface-3); }
.bubble-menu button i { width: 14px; opacity: .75; font-size: 11px; }

.bubble-menu button.perigo { color: #ff8080; }
.bubble-menu button.perigo:hover { background: rgba(255, 107, 107, .12); }

.bubble-menu-nota {
    padding: 7px 11px 4px;
    color: var(--text-faint);
    font-size: 11px;
    line-height: 1.4;
}

.bubble-edited {
    margin-right: 6px;
    font-size: 11px;
    font-style: italic;
    opacity: .55;
}

/* =============================================================
   TRAVA DA META (OPCIONAL)
============================================================= */
.trava-nota {
    margin: 0 0 10px;
    padding: 7px 9px;
    border-left: 2px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}
.trava-nota.is-travado {
    border-left-color: var(--accent, #e9c07a);
    color: var(--text-dim);
}

@media (max-width: 640px) {
    .chat-scope-btn { height: 30px; padding: 0 7px 0 9px; }
    .bubble-menu { min-width: 190px; }
}


/* =============================================================
   RESPOSTAS RAPIDAS (SCRIPTS REAIS)
   Os botões deixaram de ser <span> decorativo e viraram <button>
   que dispara de verdade — daí o reset de fonte e os estados.
============================================================= */
.quick-scripts .qs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    line-height: 1.4;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-scripts .qs:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}
.quick-scripts .qs:disabled:hover {
    border-color: var(--border);
    color: var(--text-dim);
    background: var(--surface-2);
    transform: none;
}

.quick-scripts .qs:active:not(:disabled) { transform: scale(.96); }

/* Sequência de várias mensagens: o número avisa quantas saem */
.quick-scripts .qs-seq {
    border-style: dashed;
}
.qs-passos {
    display: inline-grid;
    place-items: center;
    min-width: 16px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--surface-4);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.quick-scripts .qs.is-enviando {
    opacity: .6;
    animation: qsPulso 1s ease-in-out infinite;
}
@keyframes qsPulso {
    0%, 100% { opacity: .6; }
    50%      { opacity: .95; }
}

.qs-vazio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-faint);
    font-size: 11px;
}
.qs-vazio button {
    border: 0;
    padding: 0;
    background: none;
    color: var(--accent, #e9c07a);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 640px) {
    .quick-scripts .qs { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
    .quick-scripts .qs.is-enviando { animation: none; }
}


/* =============================================================
   AJUSTES DO BOTAO DE ESCOPO E DAS COLUNAS DO FUNIL
============================================================= */

/* O botão estava colado no título e menor que o resto dos
   controles da barra lateral. Agora tem folga e a mesma altura
   do campo de busca e dos chips. */
.chat-side-head {
    gap: 14px;
    padding-right: 2px;
}

.chat-side-head .card-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-scope-btn {
    height: 36px;
    min-width: 46px;
    padding: 0 10px;
    gap: 5px;
    justify-content: center;
    border-radius: var(--r-md, 12px);
    background: var(--surface-3);
    color: var(--text-dim);
    font-size: 12.5px;
}
.chat-scope-btn .fa-user { font-size: 12.5px; }
.chat-scope-btn .fa-ellipsis-vertical { font-size: 12.5px; opacity: .55; }

.chat-scope-btn:hover,
.chat-scope-btn.open {
    background: var(--surface-4);
    border-color: var(--accent-line, var(--border-strong));
    color: var(--text-strong);
}
.chat-scope-btn:active { transform: scale(.95); }

.chat-scope-dot {
    top: -4px;
    right: -4px;
    width: 9px;
    height: 9px;
}

@media (max-width: 640px) {
    .chat-side-head { gap: 10px; }
    .chat-scope-btn { height: 34px; min-width: 42px; padding: 0 9px; }
}

/* ---- Cabeçalho das colunas do funil: renomear e excluir ---- */
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kanban-column-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.kcol-btn {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-faint);
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .16s ease, background .16s ease, color .16s ease;
}
.kanban-column:hover .kcol-btn { opacity: .75; }
.kcol-btn:hover {
    opacity: 1 !important;
    background: var(--surface-3);
    color: var(--text);
}
.kcol-btn-danger:hover { background: rgba(255, 107, 107, .14); color: #ff8080; }

.kcol-btn:disabled {
    opacity: .25 !important;
    cursor: not-allowed;
    background: transparent;
    color: var(--text-faint);
}

/* Sem hover no toque: os controles ficam sempre visíveis */
@media (hover: none) {
    .kanban-column .kcol-btn { opacity: .6; }
}


/* =============================================================
   CORRECAO: LARGURA DO SELETOR DE ESCOPO
   O wrapper do seletor é bloco e esticava até 265px, espremendo o
   título em "Conver". O menu é posicionado de forma absoluta, então
   o wrapper só precisa da largura do próprio botão.
============================================================= */
.chat-side-head .custom-capsule-selector {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.chat-side-head .card-title {
    flex: 1 1 auto;
}


/* =============================================================
   CORRECAO: CONTROLES DA COLUNA SEMPRE VISIVEIS
   Esconder até o hover é confortável no desktop, mas no celular
   não existe hover — e renomear/excluir coluna é função, não
   enfeite. Ficam discretos e acendem ao passar o mouse.
============================================================= */
.kcol-btn { opacity: .42; }
.kanban-column:hover .kcol-btn { opacity: .72; }
.kcol-btn:hover { opacity: 1 !important; }

@media (hover: none) {
    .kanban-column .kcol-btn { opacity: .55; }
}


/* =============================================================
   BOTAO DE ACOES DA MENSAGEM (REFEITO)
   Antes ficava dentro da bolha, por cima do texto. Agora vive na
   linha, ao lado dela: não cobre nada e some quando não é preciso.
============================================================= */
.msg-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.msg-row.out { justify-content: flex-end; }
.msg-row.in  { justify-content: flex-start; }

.msg-actions {
    flex: 0 0 auto;
    order: -1;                 /* fica antes da bolha nas minhas mensagens */
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-faint);
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .16s ease, transform .16s ease,
                background .16s ease, color .16s ease, border-color .16s ease;
}

.msg-row:hover .msg-actions { opacity: 1; transform: scale(1); }

.msg-actions:hover {
    background: var(--surface-4);
    border-color: var(--border-strong);
    color: var(--text-strong);
}
.msg-actions:active { transform: scale(.9); }

/* No toque não há hover: fica discreto, mas alcançável */
@media (hover: none) {
    .msg-actions { opacity: .5; transform: scale(1); }
}

/* =============================================================
   MENSAGEM EM EDICAO
============================================================= */
.bubble.em-edicao {
    outline: 2px solid var(--accent, #e9c07a);
    outline-offset: 2px;
    animation: bolhaEditando .4s ease;
}
@keyframes bolhaEditando {
    from { outline-color: transparent; }
    to   { outline-color: var(--accent, #e9c07a); }
}

.edicao-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-left: 3px solid var(--accent, #e9c07a);
    border-radius: 0 8px 8px 0;
    background: rgba(233, 192, 122, .09);
    color: var(--text-dim);
    font-size: 12.5px;
}
.edicao-aviso.hidden { display: none; }
.edicao-aviso > i { color: var(--accent, #e9c07a); font-size: 11px; }
.edicao-aviso > span { flex: 1 1 auto; min-width: 0; }

.edicao-aviso button {
    flex: 0 0 auto;
    border: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-dim);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.edicao-aviso button:hover { background: var(--surface-4); color: var(--text-strong); }

.chat-input-row input.is-editando {
    border-color: var(--accent, #e9c07a);
    box-shadow: 0 0 0 3px rgba(233, 192, 122, .12);
}

@media (max-width: 640px) {
    .msg-actions { width: 26px; height: 26px; font-size: 11px; }
    .msg-row { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .bubble.em-edicao { animation: none; }
}


/* =============================================================
   POPUPS ACIMA DE TUDO E SEMPRE ALCANCAVEIS
   -------------------------------------------------------------
   Dois problemas somados deixavam o botão de confirmar fora de
   alcance no celular:

   1. A navbar inferior tem z-index 9000 e os modais tinham 1000.
      A barra ficava POR CIMA do popup, cobrindo os botões.

   2. Nenhum modal tinha altura máxima nem rolagem própria. Um
      formulário alto simplesmente transbordava a tela, e o rodapé
      com o botão caía fora — sem como rolar até ele.

   Aqui o modal sobe acima de qualquer barra e passa a rolar por
   dentro, respeitando a área segura do aparelho.
============================================================= */
.modal-backdrop {
    z-index: 200000;

    /* dvh acompanha a barra do navegador que aparece e some no celular */
    height: 100vh;
    height: 100dvh;

    /* Rolagem no fundo, para cartões maiores que a tela inteira */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    padding: max(16px, env(safe-area-inset-top))
             max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom))
             max(16px, env(safe-area-inset-left));
}

/* O cartão rola por dentro: o rodapé com os botões sempre chega */
.modal-card,
.obsidian-modal-card,
.ds-card {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Menus flutuantes também precisam vencer a navbar */
.bubble-menu { z-index: 200001; }
.toast-premium { z-index: 200010; }

@media (max-width: 900px) {
    /* Cartão alinhado ao topo: começa onde dá para ler, não centralizado
       pela metade fora da tela */
    .modal-backdrop {
        align-items: flex-start;
        padding-top: max(14px, env(safe-area-inset-top));
        /* Folga extra embaixo: o polegar precisa alcançar o botão sem
           esbarrar na borda inferior do aparelho */
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .modal-card,
    .obsidian-modal-card,
    .ds-card {
        max-height: none;   /* quem rola é o fundo, em tela pequena */
        margin: auto 0;
    }

    /* Modal aberto: a navbar fica atrás do escurecimento e some do caminho */
    .mobile-bottom-nav { z-index: 9000 !important; }
}

/* Telas muito baixas (celular deitado): nada de cartão gigante */
@media (max-height: 520px) {
    .modal-backdrop { align-items: flex-start; }
    .modal-card,
    .obsidian-modal-card,
    .ds-card { padding: 18px !important; }
}


/* =============================================================
   CAPTACAO PELO INSTAGRAM
============================================================= */
.ig-status {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ig-status.on  { border-color: rgba(95,224,160,.35); background: rgba(95,224,160,.12); color: var(--success, #5fe0a0); }
.ig-status.off { border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.12); color: #ff8080; }

.ig-opt { font-weight: 400; color: var(--text-faint); font-size: 11px; }

.ig-aviso {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.ig-conectado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(95,224,160,.25);
    border-radius: var(--r-md, 12px);
    background: rgba(95,224,160,.07);
}
.ig-conectado strong { display: block; color: var(--text-strong); font-size: 14px; }
.ig-conectado span   { color: var(--text-muted); font-size: 11px; }

/* ---- Listas de perfis ---- */
.ig-lista { margin-top: 12px; max-height: 340px; overflow-y: auto; }
.ig-lista-topo { padding: 6px 2px 10px; color: var(--text-faint); font-size: 11px; }

.ig-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md, 10px);
    background: var(--surface-2);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.ig-item:hover { background: var(--surface-3); border-color: var(--border-strong); }
.ig-item:active { transform: scale(.99); }

.ig-item-foto {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--surface-4);
    font-size: 11px; font-weight: 800;
    color: var(--text-dim);
}
.ig-item-foto img { width: 100%; height: 100%; object-fit: cover; }

.ig-item-txt { flex: 1 1 auto; min-width: 0; }
.ig-item-txt strong { display: block; font-size: 12.5px; color: var(--text-strong); }
.ig-item-txt em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); }
.ig-item > .fa-chevron-right { color: var(--text-faint); font-size: 11px; }

.ig-carregando, .ig-vazio {
    padding: 16px 4px;
    color: var(--text-faint);
    font-size: 12.5px;
    text-align: center;
}
.ig-vazio.erro { color: #ff8080; }

/* ---- Dossiê ---- */
.ig-dossie-vazio {
    padding: 28px 16px;
    color: var(--text-faint);
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}

.ig-perfil-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ig-perfil-topo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ig-perfil-topo strong { display: block; font-size: 14px; color: var(--text-strong); }
.ig-perfil-topo em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }

.ig-tag {
    display: inline-block;
    margin-right: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
}

.ig-numeros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.ig-numeros > div {
    padding: 9px 6px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    text-align: center;
}
.ig-numeros b { display: block; font-size: 14px; color: var(--accent, #e9c07a); }
.ig-numeros span { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px; }

.ig-bio {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-left: 2px solid var(--border-strong);
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.ig-link { display: block; margin-bottom: 10px; color: var(--accent, #e9c07a); font-size: 12.5px; word-break: break-all; }
.ig-extra { margin-bottom: 10px; color: var(--text-muted); font-size: 11px; }

/* ---- Resultado do resolvedor ---- */
.ig-contato {
    padding: 12px 14px;
    border-radius: var(--r-md, 12px);
    font-size: 12.5px;
}
.ig-contato > div { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ig-contato strong { font-size: 14px; letter-spacing: .3px; }
.ig-contato > span { display: block; color: var(--text-muted); font-size: 11px; }

.ig-contato.ok {
    border: 1px solid rgba(95,224,160,.3);
    background: rgba(95,224,160,.09);
    color: var(--success, #5fe0a0);
}
.ig-contato.falhou {
    border: 1px solid rgba(233,192,122,.28);
    background: rgba(233,192,122,.07);
    color: var(--text-dim);
}

.ig-trilha { margin-top: 8px; }
.ig-trilha summary { cursor: pointer; color: var(--text-muted); font-size: 11px; }
.ig-trilha ol { margin: 8px 0 0; padding-left: 18px; }
.ig-trilha li { color: var(--text-faint); font-size: 11px; line-height: 1.6; word-break: break-all; }
.ig-trilha em { font-style: normal; color: var(--text-muted); }

/* ---- Publicações ---- */
.ig-posts-titulo {
    margin: 16px 0 8px;
    color: var(--text-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ig-posts { display: grid; gap: 6px; }
.ig-post {
    display: block;
    padding: 9px 11px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-2);
    text-decoration: none;
    transition: background .15s ease;
}
.ig-post:hover { background: var(--surface-3); }
.ig-post-txt { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.ig-post-nums { display: block; margin-top: 4px; color: var(--text-faint); font-size: 11px; }

@media (max-width: 640px) {
    .ig-numeros { grid-template-columns: repeat(2, 1fr); }
    .ig-lista { max-height: 300px; }
}


/* =============================================================
   CAPTACAO INSTAGRAM — LAYOUT
   -------------------------------------------------------------
   A gramática visual é a do Instagram (anel no avatar, números em
   linha, grade de publicações 3x), mas com a paleta e os raios da
   Ramboo. Familiar de imediato, sem parecer um app estranho colado
   dentro do painel.
============================================================= */

/* ---- Barra da conta ---- */
.igx-conta {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 16px);
    background: var(--surface);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.igx-conta-linha { display: flex; align-items: center; gap: 12px; }

/* O anel gradiente é a assinatura visual do Instagram */
.igx-avatar-conta {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-elev, #0b0b12);
    box-shadow: 0 0 0 2px var(--bg-elev, #0b0b12), 0 0 0 4px transparent;
    background-clip: padding-box;
    color: var(--accent, #e9c07a);
    font-size: 17px;
    position: relative;
}
.igx-avatar-conta::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #e9c07a, #b98b3d, #f3d9a4, #e9c07a);
    z-index: -1;
}

.igx-conta-txt { flex: 1 1 auto; min-width: 0; }
.igx-conta-txt strong {
    display: block;
    font-size: 14px;
    color: var(--text-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.igx-conta-txt span { font-size: 11px; color: var(--text-muted); }

.igx-btn-sair {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.igx-btn-sair:hover { background: rgba(255,107,107,.12); color: #ff8080; border-color: rgba(255,107,107,.3); }

/* ---- Formulário de login ---- */
.igx-login { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }

.igx-login-campos { display: flex; flex-wrap: wrap; gap: 8px; }
.igx-login-campos input {
    flex: 1 1 150px;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-full, 999px);
    background: rgba(0,0,0,.32);
    color: var(--text-strong);
    font-size: 12.5px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.igx-login-campos input:focus {
    border-color: var(--accent, #e9c07a);
    box-shadow: 0 0 0 3px rgba(233,192,122,.12);
}
.igx-login-campos input.hidden { display: none; }
.igx-login-campos .btn { flex: 0 0 auto; height: 40px; border-radius: var(--r-full, 999px); padding: 0 22px; }

.igx-avancado { margin-top: 10px; }
.igx-avancado summary { cursor: pointer; color: var(--text-faint); font-size: 11px; }
.igx-avancado input {
    width: 100%;
    margin-top: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0,0,0,.32);
    color: var(--text);
    font-size: 12.5px;
    outline: none;
}

/* ---- Grade principal ---- */
.igx-grade {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.igx-coluna,
.igx-perfil {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 16px);
    background: var(--surface);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

/* ---- Busca ---- */
.igx-busca {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-full, 999px);
    background: rgba(0,0,0,.32);
}
.igx-busca i { color: var(--text-faint); font-size: 12.5px; }
.igx-busca input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--text-strong);
    font-size: 12.5px;
    outline: none;
}

/* ---- Abas Perfis / Seguidores ---- */
.igx-abas {
    display: flex;
    gap: 4px;
    margin: 14px 0 10px;
    padding: 3px;
    border-radius: var(--r-full, 999px);
    background: rgba(0,0,0,.3);
}
.igx-aba {
    flex: 1 1 0;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--r-full, 999px);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.igx-aba.is-on {
    background: var(--grad-accent, var(--accent, #e9c07a));
    color: var(--accent-ink, #2a1e07);
}

.igx-seg-form { display: flex; gap: 8px; margin-bottom: 4px; }
.igx-seg-form input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0,0,0,.32);
    color: var(--text-strong);
    font-size: 12.5px;
    outline: none;
}
.igx-seg-form input:first-child { flex: 1 1 auto; min-width: 0; }
.igx-seg-form input[type="number"] { width: 68px; flex: 0 0 68px; text-align: center; }
.igx-seg-form .btn { flex: 0 0 auto; height: 36px; padding: 0 14px; font-size: 12.5px; }

/* ---- Lista de perfis ---- */
.igx-lista { max-height: 420px; overflow-y: auto; margin-top: 6px; }
.igx-lista-topo { padding: 4px 2px 8px; color: var(--text-faint); font-size: 11px; }

.igx-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease;
}
.igx-item:hover { background: var(--surface-3); }
.igx-item.is-aberto { background: rgba(233,192,122,.1); }

.igx-item-foto {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--surface-4);
    color: var(--text-dim);
    font-size: 12.5px; font-weight: 800;
}
.igx-item-foto img { width: 100%; height: 100%; object-fit: cover; }

.igx-item-txt { flex: 1 1 auto; min-width: 0; }
.igx-item-txt strong {
    display: block; font-size: 12.5px; color: var(--text-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.igx-item-txt em {
    display: block; font-style: normal; font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.igx-selo {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-4);
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
}

.igx-vazio, .igx-carregando {
    padding: 26px 10px;
    color: var(--text-faint);
    font-size: 12.5px;
    text-align: center;
    line-height: 1.6;
}
.igx-vazio.erro { color: #ff8080; }

/* ---- Perfil aberto ---- */
.igx-perfil-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 54px 24px;
    text-align: center;
}
.igx-perfil-vazio i { font-size: 30px; color: var(--accent, #e9c07a); opacity: .35; }
.igx-perfil-vazio strong { font-size: 14px; color: var(--text-dim); }
.igx-perfil-vazio span { font-size: 12.5px; color: var(--text-faint); line-height: 1.6; max-width: 320px; }

/* Cabeçalho no formato do Instagram: avatar com anel + números em linha */
.igx-cabecalho { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }

.igx-foto-ring {
    flex: 0 0 84px;
    width: 84px; height: 84px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 210deg, #e9c07a, #b98b3d, #f3d9a4, #e9c07a);
}
.igx-foto-ring img,
.igx-foto-ring span {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg-elev, #0b0b12);
    background: var(--surface-4);
    color: var(--text-dim);
    font-size: 22px; font-weight: 800;
}

.igx-cab-dados { flex: 1 1 auto; min-width: 0; }
.igx-cab-nome { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; }
.igx-cab-nome strong { font-size: 17px; color: var(--text-strong); }
.igx-cab-nome .fa-circle-check { color: var(--accent, #e9c07a); font-size: 12.5px; }
.igx-cab-user { display: block; margin-bottom: 10px; color: var(--text-muted); font-size: 12.5px; }

.igx-numeros { display: flex; gap: 22px; flex-wrap: wrap; }
.igx-numeros > div { line-height: 1.25; }
.igx-numeros b { display: block; font-size: 14px; color: var(--text-strong); }
.igx-numeros span { font-size: 11px; color: var(--text-faint); }

.igx-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.igx-tag {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
}

.igx-bio {
    margin: 0 0 10px;
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
}
.igx-linkbio {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
    color: var(--accent, #e9c07a);
    font-size: 12.5px;
    font-weight: 600;
    word-break: break-all;
}

/* ---- Resultado do resolvedor ---- */
.igx-contato {
    padding: 13px 15px;
    border-radius: var(--r-md, 12px);
    margin-bottom: 12px;
}
.igx-contato.ok     { border: 1px solid rgba(95,224,160,.3);  background: rgba(95,224,160,.08); }
.igx-contato.falhou { border: 1px solid rgba(233,192,122,.26); background: rgba(233,192,122,.06); }

.igx-contato-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.igx-contato-topo i { font-size: 14px; }
.igx-contato.ok .igx-contato-topo i { color: var(--success, #5fe0a0); }
.igx-contato.falhou .igx-contato-topo i { color: var(--accent, #e9c07a); }
.igx-contato-topo strong { font-size: 17px; letter-spacing: .4px; color: var(--text-strong); }
.igx-contato-sub { color: var(--text-muted); font-size: 11px; }

.igx-trilha { margin-top: 9px; }
.igx-trilha summary { cursor: pointer; color: var(--text-muted); font-size: 11px; }
.igx-trilha ol { margin: 8px 0 0; padding-left: 18px; }
.igx-trilha li { color: var(--text-faint); font-size: 11px; line-height: 1.65; word-break: break-all; }
.igx-trilha em { font-style: normal; color: var(--text-muted); }

/* ---- Grade de publicações, como no Instagram ---- */
.igx-secao-titulo {
    margin: 18px 0 9px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.igx-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.igx-post {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-2);
    overflow: hidden;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.igx-post:hover { background: var(--surface-3); border-color: var(--border-strong); transform: translateY(-2px); }

.igx-post-txt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
}
.igx-post-nums {
    position: absolute;
    left: 10px; right: 10px; bottom: 8px;
    color: var(--text-faint);
    font-size: 11px;
}

/* ---- Celular ---- */
@media (max-width: 900px) {
    .igx-grade { grid-template-columns: 1fr; }
    .igx-lista { max-height: 320px; }
}

@media (max-width: 640px) {
    .igx-conta, .igx-coluna, .igx-perfil { padding: 13px; border-radius: var(--r-md, 14px); }

    .igx-cabecalho { gap: 14px; }
    .igx-foto-ring { flex-basis: 68px; width: 68px; height: 68px; }
    .igx-numeros { gap: 16px; }
    .igx-numeros b { font-size: 14px; }

    .igx-login-campos input { flex-basis: 100%; }
    .igx-login-campos .btn { width: 100%; }

    .igx-seg-form { flex-wrap: wrap; }
    .igx-seg-form input:first-child { flex-basis: 100%; }

    .igx-posts { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================
   AJUSTE: BARRA DA CONTA EM TELA ESTREITA
   O nome, o selo de estado e o botão de sair brigavam pela mesma
   linha e o texto virava reticências. Em tela estreita o selo
   desce para baixo do nome.
============================================================= */
@media (max-width: 560px) {
    .igx-conta-linha {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .igx-conta-txt {
        flex: 1 1 calc(100% - 100px);
        order: 2;
    }
    .igx-conta-txt strong { white-space: normal; }

    .igx-avatar-conta { order: 1; }

    .igx-conta .ig-status {
        order: 4;
        flex: 0 0 auto;
    }
    /* O menu de 3 pontos substituiu o antigo botão de sair. Sem ordem
       própria ele caía na frente do avatar, à esquerda de tudo. */
    .igx-conta-menu { order: 3; margin-left: auto; }
}


/* =============================================================
   FICHA EM TELA CHEIA NO CELULAR + AJUSTES DE LARGURA
   -------------------------------------------------------------
   Antes o perfil abria empilhado no fim da página: quem clicava
   não via nada acontecer. Agora ele cobre a tela, com voltar.
============================================================= */
.igx-ficha-overlay {
    position: fixed;
    inset: 0;
    z-index: 150000;   /* acima da navbar inferior */
    display: flex;
    flex-direction: column;
    background: var(--bg, #06060a);
}
.igx-ficha-overlay.hidden { display: none; }

.igx-ficha-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev, #0b0b12);
}
.igx-ficha-topo strong {
    font-size: 14px;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.igx-voltar {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12.5px;
    cursor: pointer;
}
.igx-voltar:active { transform: scale(.94); }

.igx-ficha-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
}

/* A navbar inferior não faz sentido com a ficha aberta */
body.ig-ficha-aberta .mobile-bottom-nav { display: none !important; }

/* ---- Seguidores clicáveis a partir do perfil ---- */
.igx-num-btn {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: opacity .15s ease;
}
.igx-num-btn b { display: block; font-size: 14px; color: var(--accent, #e9c07a); }
.igx-num-btn span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--accent, #e9c07a);
    opacity: .85;
}
.igx-num-btn span i { font-size: 11px; }
.igx-num-btn:hover { opacity: .75; }

/* ---- Nada pode estourar a largura ---- */
.igx-grade, .igx-coluna, .igx-perfil, .igx-conta { min-width: 0; max-width: 100%; }
.igx-cabecalho, .igx-cab-dados, .igx-item, .igx-item-txt { min-width: 0; }

.igx-numeros {
    flex-wrap: wrap;
    row-gap: 10px;
}

.igx-bio, .igx-linkbio, .igx-contato, .igx-trilha li {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.igx-contato-topo strong { overflow-wrap: anywhere; }

.igx-secao-titulo { overflow-wrap: anywhere; }

@media (max-width: 640px) {
    /* Quatro números em uma linha não cabem; viram dois por linha */
    .igx-numeros { gap: 12px 18px; }
    .igx-cabecalho { flex-direction: column; align-items: flex-start; gap: 12px; }
    .igx-foto-ring { flex-basis: 76px; width: 76px; height: 76px; }
    .igx-cab-dados { width: 100%; }
}


/* =============================================================
   FOLHA DESLIZANTE, PUBLICACAO E FILTROS
   -------------------------------------------------------------
   No celular a ficha deixa de ser um retângulo colado na tela e
   passa a subir de baixo, com puxador e cantos arredondados —
   o gesto que todo app tem.
============================================================= */
.igx-ficha-overlay {
    position: fixed;
    inset: 0;
    z-index: 150000;
    display: flex;
    align-items: flex-end;
    background: rgba(4, 4, 7, .62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: igFundo .2s ease;
}
.igx-ficha-overlay.hidden { display: none; }

@keyframes igFundo { from { opacity: 0; } to { opacity: 1; } }

.igx-folha {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--border-strong);
    border-bottom: 0;
    background: var(--bg-elev, #0b0b12);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .7);
    animation: igSubir .3s cubic-bezier(.22, 1, .36, 1);
    overflow: hidden;
}

@keyframes igSubir {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Puxador: o convite visual para arrastar/fechar */
.igx-puxador {
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 9px auto 3px;
    border-radius: 999px;
    background: var(--border-strong);
    cursor: pointer;
}

.igx-ficha-topo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
    padding: 6px 16px 11px;
    border-bottom: 1px solid var(--border-soft);
}
.igx-ficha-topo strong {
    font-size: 14px;
    color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.igx-voltar {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12.5px;
    cursor: pointer;
}
.igx-voltar:active { transform: scale(.94); }

.igx-ficha-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px calc(22px + env(safe-area-inset-bottom));
}

body.ig-ficha-aberta { overflow: hidden; }
body.ig-ficha-aberta .mobile-bottom-nav { display: none !important; }

/* ---- Publicação vista aqui dentro ---- */
.igx-post-overlay {
    position: fixed;
    inset: 0;
    z-index: 160000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: rgba(2, 2, 4, .84);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow-y: auto;
}
.igx-post-overlay.hidden { display: none; }

.igx-post-caixa {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 100%;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg, 18px);
    background: var(--surface-solid, #12121a);
    animation: igSubir .26s cubic-bezier(.22, 1, .36, 1);
}

.igx-post-fechar {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12.5px;
    cursor: pointer;
}

.igx-post-imagem {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--surface-3);
}

.igx-post-info { padding: 14px 16px 18px; }

.igx-post-metricas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 11px;
}
.igx-post-metricas b { color: var(--accent, #e9c07a); font-size: 12.5px; }

.igx-post-legenda {
    margin: 0 0 14px;
    color: var(--text-dim);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.igx-post-externo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent, #e9c07a);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

/* ---- Miniaturas na grade ---- */
.igx-post {
    position: relative;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.igx-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.igx-post .igx-post-txt { padding: 10px; }

.igx-post-tipo {
    position: absolute;
    top: 7px; right: 8px;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.igx-post-nums {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 8px 6px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
    color: #fff;
    font-size: 11px;
    text-align: center;
}

/* ---- Filtros ---- */
.igx-filtros {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.igx-filtros-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.igx-chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.igx-chip:hover { background: var(--surface-3); color: var(--text); }
.igx-chip.is-on {
    background: var(--grad-accent, var(--accent, #e9c07a));
    border-color: transparent;
    color: var(--accent-ink, #2a1e07);
}

.igx-filtros-avancado { margin-top: 4px; }
.igx-filtros-avancado summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}
.igx-filtros-avancado input {
    flex: 1 1 110px;
    min-width: 0;
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, .32);
    color: var(--text-strong);
    font-size: 12.5px;
    outline: none;
}
.igx-filtros-avancado .btn { flex: 0 0 auto; height: 34px; padding: 0 14px; font-size: 12.5px; }

.igx-analise-estado {
    color: var(--text-faint);
    font-size: 11px;
    line-height: 1.5;
    min-height: 16px;
}

.igx-busca-interna { margin: 10px 0 4px; height: 36px; }
.igx-busca-interna input { font-size: 12.5px; }

.igx-contato.buscando {
    border: 1px dashed var(--border-strong);
    background: var(--surface-2);
}
.igx-contato.buscando .igx-contato-topo i { color: var(--text-muted); }
.igx-contato.buscando strong { font-size: 12.5px; color: var(--text-dim); }

/* No computador a ficha continua na coluna, sem folha */
@media (min-width: 901px) {
    .igx-ficha-overlay { display: none !important; }
}


/* =============================================================
   CORRECAO: A FOLHA TEM QUE ENCOSTAR NO RODAPE
   O bloco anterior deixou flex-direction:column no overlay. Em
   coluna, quem manda no eixo vertical é justify-content — o
   align-items:flex-end não tinha efeito e a folha subia para o topo.
============================================================= */
.igx-ficha-overlay {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: center;
}


/* =============================================================
   PROSPECCAO NO PADRAO DA LISTA DE CONVERSAS
   -------------------------------------------------------------
   A coluna reaproveita .chat-sidebar, .chat-list-ul, .chat-item e
   .cf-chip. O que existe aqui é só o que a lista de conversas não
   tem: critérios, progresso da varredura e seleção em lote.
============================================================= */
.igx-coluna.chat-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100dvh - 150px);
}

/* ---- Critérios ---- */
.igx-criterios {
    display: grid;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 12px);
    background: rgba(0, 0, 0, .26);
    animation: igAbrirCriterios .22s var(--ease, ease);
}
.igx-criterios.hidden { display: none; }

@keyframes igAbrirCriterios {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.igx-criterio label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.igx-criterio input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, .35);
    color: var(--text-strong);
    font-size: 12.5px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.igx-criterio input:focus {
    border-color: var(--accent, #e9c07a);
    box-shadow: 0 0 0 3px rgba(233, 192, 122, .1);
}

.igx-criterio-par { display: flex; align-items: center; gap: 8px; }
.igx-criterio-par span { color: var(--text-faint); font-size: 11px; }

.igx-criterios .ig-aviso { margin-top: 6px; }

/* ---- Progresso da varredura ---- */
.igx-progresso {
    margin: 10px 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--accent-line, rgba(233, 192, 122, .3));
    border-radius: var(--r-md, 12px);
    background: rgba(233, 192, 122, .07);
}
.igx-progresso.hidden { display: none; }

.igx-progresso-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text-dim);
    font-size: 11px;
}

.igx-parar {
    flex: 0 0 auto;
    border: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.igx-parar:hover { background: rgba(255, 107, 107, .16); color: #ff8080; }

.igx-barra {
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    overflow: hidden;
}
.igx-barra > div {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--grad-accent, var(--accent, #e9c07a));
    transition: width .3s ease;
}

/* ---- Seleção em lote ---- */
.igx-selecao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 12px);
    background: var(--surface-2);
}
.igx-selecao.hidden { display: none; }

.igx-sel-todos {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-dim);
    font-size: 12.5px;
    cursor: pointer;
}
.igx-selecao .btn { flex: 0 0 auto; }

/* Caixa de seleção no padrão dourado */
.igx-check input,
.igx-sel-todos input {
    appearance: none;
    -webkit-appearance: none;
    width: 17px; height: 17px;
    margin: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 8px;
    background: rgba(0, 0, 0, .4);
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    transition: background .15s ease, border-color .15s ease;
}
.igx-check input:checked,
.igx-sel-todos input:checked,
.igx-sel-todos input:indeterminate {
    background: var(--grad-accent, var(--accent, #e9c07a));
    border-color: transparent;
}
.igx-check input:checked::after,
.igx-sel-todos input:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 4px; height: 9px;
    border: solid var(--accent-ink, #2a1e07);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.igx-sel-todos input:indeterminate::after {
    content: "";
    position: absolute;
    left: 3px; top: 6px;
    width: 9px; height: 2px;
    background: var(--accent-ink, #2a1e07);
    border-radius: 8px;
}
.igx-check input:disabled { opacity: .3; cursor: not-allowed; }

/* ---- Linha de perfil na lista ---- */
.igx-linha { align-items: flex-start; }
.igx-linha .igx-check { padding-top: 11px; }
.igx-linha .ci-avatar,
.igx-linha .ci-body { cursor: pointer; }
.igx-linha.sem-whats { opacity: .62; }
.igx-linha.sem-whats:hover { opacity: 1; }

.igx-chip-whats {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    border-color: rgba(95, 224, 160, .32) !important;
    background: rgba(95, 224, 160, .12) !important;
    color: var(--success, #5fe0a0) !important;
    font-variant-numeric: tabular-nums;
}
.igx-chip-sem {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    border-color: var(--border) !important;
    background: var(--surface-2) !important;
    color: var(--text-faint) !important;
}

@media (max-width: 900px) {
    .igx-coluna.chat-sidebar { max-height: none; }
}


/* =============================================================
   BARRA DA CONTA COM FOTO REAL
   O ícone genérico e o botão de sair solto pareciam rascunho.
   Agora é foto real com anel, nome, @ e um menu de 3 pontos —
   o mesmo vocabulário do resto da Ramboo.
============================================================= */
.igx-avatar-conta {
    overflow: hidden;
    padding: 0;
}
.igx-avatar-conta img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-elev, #0b0b12);
}

.igx-conta-menu { position: relative; flex: 0 0 auto; }
.igx-conta-menu.hidden { display: none; }

.igx-conta-3p {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-faint);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.igx-conta-3p:hover { background: var(--surface-3); color: var(--text); }

.igx-conta-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 190px;
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md, 12px);
    background: var(--surface-solid, #12121a);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.igx-conta-pop.hidden { display: none; }

.igx-conta-pop button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ff8080;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.igx-conta-pop button:hover { background: rgba(255, 107, 107, .12); }

/* O nome fica em destaque e o @ vira apoio */
.igx-conta-txt strong { font-size: 14px; }
.igx-conta-txt span { font-variant-numeric: tabular-nums; }


/* =============================================================
   AUTOMACOES E DIRECT
============================================================= */
.igx-modulos { margin-bottom: 14px; }

.igx-select,
#igRegraMensagem {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, .35);
    color: var(--text-strong);
    font: inherit;
    font-size: 12.5px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.igx-select { height: 36px; cursor: pointer; }
#igRegraMensagem { resize: vertical; line-height: 1.55; min-height: 96px; }

.igx-select:focus,
#igRegraMensagem:focus {
    border-color: var(--accent, #e9c07a);
    box-shadow: 0 0 0 3px rgba(233, 192, 122, .1);
}

.igx-acoes-regra { display: flex; gap: 8px; margin: 14px 0 4px; }
.igx-acoes-regra .btn { flex: 1 1 auto; }

/* ---- Regra na lista ---- */
.igx-regra { align-items: center; }
.igx-regra.is-ativa {
    background: linear-gradient(90deg, rgba(95, 224, 160, .1), transparent);
    border-color: rgba(95, 224, 160, .22);
}
.igx-regra-previa { opacity: .65; font-style: italic; }

.igx-regra-acoes {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.igx-regra-acoes .ios-switch { margin: 0; }
.igx-regra-acoes .kcol-btn { opacity: .5; }
.igx-regra:hover .kcol-btn { opacity: .85; }

/* ---- Histórico dos envios ---- */
.igx-historico { display: grid; gap: 4px; }

.igx-hist-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 11px;
}
.igx-hist-linha.falhou { border-color: rgba(255, 107, 107, .25); background: rgba(255, 107, 107, .07); }

.igx-hist-user { color: var(--text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igx-hist-regra { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igx-hist-estado { color: var(--text-faint); font-size: 11px; text-align: right; }
.igx-hist-linha.falhou .igx-hist-estado { color: #ff8080; }

/* ---- Caixa de direct ---- */
.igx-dm {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    max-height: calc(100dvh - 200px);
    padding: 0;
    overflow: hidden;
}

.igx-dm-topo {
    flex: 0 0 auto;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.igx-dm-topo strong { font-size: 14px; color: var(--text-strong); }
.igx-dm-vazio { color: var(--text-faint); font-size: 12.5px; }

.igx-dm-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
}

.igx-dm-envio {
    flex: 0 0 auto;
    display: flex;
    gap: 9px;
    padding: 12px 14px;
    border-top: 1px solid var(--border-soft);
}
.igx-dm-envio.hidden { display: none; }

.igx-dm-envio input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-full, 999px);
    background: rgba(0, 0, 0, .32);
    color: var(--text-strong);
    font-size: 12.5px;
    outline: none;
}
.igx-dm-envio input:focus { border-color: var(--accent, #e9c07a); }
.igx-dm-envio .btn { flex: 0 0 auto; width: 44px; height: 40px; border-radius: 50%; padding: 0; }

@media (max-width: 900px) {
    .igx-dm { max-height: none; min-height: 340px; }
}


/* =============================================================
   ACOES DA FICHA E COMPOSITOR DE DIRECT
============================================================= */
.igx-acoes-perfil { display: flex; gap: 8px; }
.igx-acoes-perfil .btn { flex: 1 1 0; min-width: 0; }

#igDMTexto {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, .35);
    color: var(--text-strong);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    resize: vertical;
    outline: none;
}
#igDMTexto:focus {
    border-color: var(--accent, #e9c07a);
    box-shadow: 0 0 0 3px rgba(233, 192, 122, .1);
}

.igx-dm-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.igx-dm-atalhos-titulo {
    width: 100%;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}

@media (max-width: 520px) {
    .igx-acoes-perfil { flex-direction: column; }
}


/* =============================================================
   CONVERSA NA FOLHA DESLIZANTE (CELULAR)
   No celular a coluna da conversa ficava abaixo da lista e o
   clique parecia não fazer nada. Aqui ela ocupa a folha inteira,
   com a caixa de resposta colada no rodapé.
============================================================= */
.igx-dm-sheet {
    display: flex;
    flex-direction: column;
    min-height: 58dvh;
}

.igx-dm-sheet-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 8px;
}

.igx-dm-sheet .igx-dm-envio {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 9px;
    padding: 10px 0 0;
    margin-top: auto;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-elev, #0b0b12);
}

.igx-anexo {
    font-style: italic;
    opacity: .7;
    font-size: 12.5px;
}


/* =============================================================
   CORRECAO: A ULTIMA MENSAGEM FICAVA ATRAS DA CAIXA DE RESPOSTA
============================================================= */
.igx-dm-sheet .igx-dm-envio {
    padding: 10px 0 calc(6px + env(safe-area-inset-bottom));
    /* Cobre a largura toda da folha, sem deixar conteúdo aparecendo
       pelas beiradas quando a conversa rola por baixo */
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 -10px 20px -12px rgba(0, 0, 0, .9);
}

.igx-dm-sheet-corpo { padding-bottom: 4px; }


/* =============================================================
   PRESENCA NO CABECALHO DA CONVERSA
   Uma linha discreta abaixo do numero: online, digitando, ou a
   hora do ultimo acesso. Some quando o contato nao permite ver.
============================================================= */
.ch-presenca {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-faint);
    transition: color .2s ease;
}
.ch-presenca.hidden { display: none; }

.ch-presenca.esta-online {
    color: var(--success, #5fe0a0);
    font-weight: 600;
}
.ch-presenca.esta-online::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

/* Digitando e gravando piscam de leve, como no aplicativo */
.ch-presenca.esta-ativo {
    color: var(--accent, #e9c07a);
    font-weight: 600;
    animation: presencaPulso 1.4s ease-in-out infinite;
}

@keyframes presencaPulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .ch-presenca.esta-ativo { animation: none; }
}


/* =============================================================
   SAUDE DOS CHIPS
   Um cartao por numero. Pensado para o celular primeiro: os
   cartoes empilham, os numeros ficam grandes e legiveis, e os
   controles tem area de toque confortavel.
============================================================= */
.chip-saude { margin-bottom: 16px; }

.chip-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 6px;
}
.chip-acoes .btn { flex: 1 1 auto; min-width: 150px; }

.chip-estado {
    min-height: 18px;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-faint);
}
.chip-estado.ok      { color: var(--success, #5fe0a0); }
.chip-estado.aviso   { color: var(--accent, #e9c07a); }
.chip-estado.erro    { color: #ff8080; }
.chip-estado.rodando { color: var(--text-dim); }

/* ---- Lista de cartões ---- */
.chip-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.chip-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--r-md, 12px);
    background: var(--surface-2);
}
.chip-card.risco-baixo { border-left-color: var(--success, #5fe0a0); }
.chip-card.risco-médio { border-left-color: var(--accent, #e9c07a); }
.chip-card.risco-alto  { border-left-color: #ff6b6b; }

.chip-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.chip-nome { min-width: 0; }
.chip-nome strong {
    display: block;
    font-size: 14px;
    color: var(--text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-nome span {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.chip-nota {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .32);
    border: 1px solid var(--border-strong);
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}
.risco-baixo .chip-nota { color: var(--success, #5fe0a0); border-color: rgba(95,224,160,.4); }
.risco-médio .chip-nota { color: var(--accent, #e9c07a); border-color: rgba(233,192,122,.4); }
.risco-alto  .chip-nota { color: #ff8080; border-color: rgba(255,107,107,.4); }

/* ---- Selos de estado ---- */
.chip-linha-estado {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.chip-pill {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .25);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}
.chip-pill.on  { border-color: rgba(95,224,160,.35); color: var(--success, #5fe0a0); }
.chip-pill.off { border-color: rgba(255,107,107,.3); color: #ff8080; }

.chip-pill.estado-trabalhando { border-color: rgba(95,224,160,.3); color: var(--success, #5fe0a0); }
.chip-pill.estado-descansando { color: var(--text-faint); }
.chip-pill.estado-pausado     { border-color: rgba(255,107,107,.4); color: #ff8080; }

/* ---- Números ---- */
.chip-numeros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.chip-numeros > div {
    padding: 8px 4px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
    text-align: center;
}
.chip-numeros b {
    display: block;
    font-size: 14px;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.chip-numeros span {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.chip-barra {
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    overflow: hidden;
    margin-bottom: 10px;
}
.chip-barra > div {
    height: 100%;
    border-radius: 999px;
    background: var(--grad-accent, var(--accent, #e9c07a));
    transition: width .4s ease;
}
.risco-alto .chip-barra > div { background: #ff6b6b; }

.chip-motivos {
    margin: 0 0 10px;
    padding-left: 16px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
}
.chip-motivos li::marker { color: var(--accent, #e9c07a); }

/* ---- Controles ---- */
.chip-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}
.chip-controles .ios-switch { margin: 0; }

.chip-ritmo { margin-top: 10px; }
.chip-ritmo summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 0;
}

.chip-ritmo-campos { display: grid; gap: 10px; padding-top: 8px; }
.chip-ritmo-campos label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.chip-ritmo-campos input {
    width: 100%;
    height: 36px;
    margin-top: 4px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, .35);
    color: var(--text-strong);
    font-size: 12.5px;
    outline: none;
}
.chip-ritmo-campos input:focus { border-color: var(--accent, #e9c07a); }

.chip-par { display: flex; align-items: center; gap: 8px; }
.chip-par em { font-style: normal; color: var(--text-faint); font-size: 11px; padding-top: 4px; }

/* ---- Histórico ---- */
.chip-historico { margin-top: 14px; }

.chip-historico > div { margin-top: 8px; display: grid; gap: 4px; }

.chip-hist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 11px;
}
.chip-hist > span:first-child {
    color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip-hist em { font-style: normal; color: var(--accent, #e9c07a); font-weight: 600; }
.chip-hist-quando { color: var(--text-faint); font-size: 11px; }

.chip-vazio {
    padding: 22px 12px;
    text-align: center;
    color: var(--text-faint);
    font-size: 12.5px;
    line-height: 1.6;
}
.chip-vazio.erro { color: #ff8080; }
.chip-vazio strong { display: block; color: var(--text-dim); margin-bottom: 4px; }

/* ---- Celular ---- */
@media (max-width: 640px) {
    .chip-lista { grid-template-columns: 1fr; }
    .chip-acoes .btn { min-width: 0; flex-basis: 100%; }
    .chip-card { padding: 13px; }
    .chip-numeros b { font-size: 14px; }
    .chip-controles { flex-wrap: wrap; }
    .chip-hist { grid-template-columns: 1fr auto; }
    .chip-hist-quando { grid-column: 1 / -1; text-align: right; }
}

/* ---- Barra de exportação da base de contatos ---- */
.export-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.export-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* No celular os botões ocupam a linha inteira: alvo de toque decente */
@media (max-width: 640px) {
    .export-bar { flex-direction: column; align-items: stretch; }
    .export-acoes { width: 100%; }
    .export-acoes .btn { flex: 1; justify-content: center; }
}

/* ---- Travas de segurança da conta ---- */
.chip-travas { margin-top: 16px; }

.chip-travas-nota {
    margin: 8px 0 12px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-faint);
}

.trava-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    margin-bottom: 8px;
}
.trava-texto { min-width: 0; }
.trava-texto strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}
.trava-texto span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-faint);
}

.trava-num {
    flex: 0 0 auto;
    width: 76px;
    height: 34px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
}
.trava-num:focus { outline: none; border-color: var(--accent); }

/* Chave liga/desliga */
.trava-switch { flex: 0 0 auto; position: relative; width: 42px; height: 24px; cursor: pointer; }
.trava-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.trava-switch span {
    position: absolute;
    inset: 0;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: background .18s ease, border-color .18s ease;
}
.trava-switch span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform .18s ease, background .18s ease;
}
.trava-switch input:checked + span { background: var(--grad-accent); border-color: transparent; }
.trava-switch input:checked + span::after { transform: translateX(18px); background: var(--accent-ink); }

.trava-salvar { margin-top: 4px; }

/* No celular o texto ocupa a linha e o controle desce para a direita */
@media (max-width: 640px) {
    .trava-linha { flex-wrap: wrap; }
    .trava-texto { flex: 1 1 100%; }
    .trava-linha .trava-num,
    .trava-linha .trava-switch { margin-left: auto; }
    .trava-salvar { width: 100%; justify-content: center; height: 40px; }
}

/* Piscada rápida ao chegar pelo atalho, para o olho achar o painel */
.chip-saude.destacado {
    animation: destacaPainel 1.6s ease;
}
@keyframes destacaPainel {
    0%, 100% { box-shadow: none; }
    25%, 60% { box-shadow: 0 0 0 2px var(--accent); }
}

/* ---- Linhas expansíveis (travas, histórico) ----
   Antes era texto pequeno com a setinha nativa do navegador, que não
   parece botão nenhum. Agora é uma linha de verdade, com alvo de toque
   grande o bastante para o dedo. */
.chip-travas > summary,
.chip-historico > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    transition: border-color .18s ease, background .18s ease;
}
.chip-travas > summary::-webkit-details-marker,
.chip-historico > summary::-webkit-details-marker { display: none; }

.chip-travas > summary:hover,
.chip-historico > summary:hover { border-color: var(--border); background: var(--surface-3); }

.chip-travas > summary > i:first-child,
.chip-historico > summary > i:first-child {
    font-size: 12.5px;
    color: var(--accent);
    width: 16px;
    text-align: center;
    flex: 0 0 auto;
}
.chip-travas > summary > span,
.chip-historico > summary > span { flex: 1; min-width: 0; }

/* Chevron que gira ao abrir */
.chip-travas > summary::after,
.chip-historico > summary::after {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-right: 1.8px solid var(--text-muted);
    border-bottom: 1.8px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.chip-travas[open] > summary::after,
.chip-historico[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.chip-travas[open] > summary,
.chip-historico[open] > summary {
    border-color: var(--accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Corpo aberto encosta na cabeça, virando um bloco só */
.chip-travas > #travasConta,
.chip-historico > div {
    padding: 14px;
    border: 1px solid var(--accent);
    border-top: none;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    background: var(--surface-1);
}
.chip-historico > div { margin-top: 0; display: grid; gap: 4px; }

/* =============================================================
   CASOS DE ESTUDO
============================================================= */

.caso-resumo { padding: 18px; }

.caso-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    margin-bottom: 16px;
    border: 1px solid rgba(233, 192, 122, 0.3);
    border-radius: var(--r-sm);
    background: rgba(233, 192, 122, 0.07);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.caso-aviso i { color: var(--accent); margin-top: 2px; }

.caso-numeros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.caso-num {
    padding: 13px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    text-align: center;
}
.caso-num strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}
.caso-num span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-faint);
}

.caso-leituras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.caso-leitura {
    padding: 12px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.cl-rotulo {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-faint);
}
.cl-valor {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
}
.cl-base {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-3);
    font-size: 11px;
    color: var(--text-muted);
}
.cl-dica {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.45;
    font-style: normal;
    color: var(--text-faint);
}

.caso-aberturas { margin-top: 18px; }
.caso-abertura {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-top: 7px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.ca-vezes {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--grad-accent);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
}
.ca-texto { font-size: 11px; line-height: 1.5; color: var(--text-muted); }

/* ---- Lista de casos ---- */
.casos-lista { display: grid; gap: 9px; margin-top: 13px; }

.caso-item {
    padding: 13px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.caso-item-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.caso-item-nome { min-width: 0; }
.caso-item-nome strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-strong);
}
.caso-item-nome span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-faint);
}
.caso-item-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.caso-valor {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(233, 192, 122, 0.12);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.caso-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.caso-item-tags span {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    font-size: 11px;
    color: var(--text-muted);
}
.caso-item-nota {
    margin-top: 10px;
    padding: 9px 11px;
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    background: var(--surface-1);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ---- Modais ---- */
.caso-modal {
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-solid);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .8);
}
.caso-modal-larga { max-width: 620px; }

.caso-modal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}
.caso-modal-titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-strong);
}
.caso-modal-titulo i { color: var(--accent); }

.caso-modal-sub {
    margin-bottom: 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
.caso-modal-sub strong { color: var(--text); }

.caso-modal-acoes {
    display: flex;
    gap: 9px;
    margin-top: 18px;
}
.caso-modal-acoes .btn { flex: 1; justify-content: center; }

/* ---- Conversa arquivada ---- */
.caso-transcricao {
    display: grid;
    gap: 8px;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
}
.caso-msg {
    max-width: 82%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.5;
}
.caso-msg.minha {
    justify-self: end;
    background: var(--grad-accent);
    color: var(--accent-ink);
    border-bottom-right-radius: 4px;
}
.caso-msg.dele {
    justify-self: start;
    background: var(--surface-3);
    color: var(--text);
    border-bottom-left-radius: 4px;
}
.caso-msg-texto { white-space: pre-wrap; word-break: break-word; }
.caso-msg-hora { margin-top: 4px; font-size: 11px; opacity: .65; text-align: right; }

/* ---- Celular ---- */
@media (max-width: 640px) {
    .caso-numeros { grid-template-columns: 1fr; }
    .caso-leituras { grid-template-columns: 1fr; }

    .caso-item-topo { flex-direction: column; }
    .caso-item-acoes { width: 100%; justify-content: flex-end; }

    /* O modal vira folha colada embaixo, longe da navbar flutuante */
    .caso-modal {
        max-width: 100%;
        max-height: 84vh;
        border-radius: 18px 18px 0 0;
        margin-top: auto;
        padding-bottom: calc(18px + env(safe-area-inset-bottom));
    }
    .caso-modal-acoes { flex-direction: column-reverse; }
    .caso-modal-acoes .btn { height: 44px; }
    .caso-msg { max-width: 88%; }
}

/* Reação grudada na bolha, como no WhatsApp */
.bubble-reacao {
    position: absolute;
    bottom: -11px;
    right: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-solid);
    border: 1px solid var(--border-soft);
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.bubble { position: relative; }
.msg-row { padding-bottom: 6px; }

/* Ações do cartão de grupo */
.grupo-acoes { display: flex; gap: 7px; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 640px) {
    .grupo-acoes { width: 100%; }
    .grupo-acoes .btn { flex: 1; justify-content: center; }
}

/* Escolha do modo da automação do Instagram */
.igx-modos { display: flex; gap: 8px; flex-wrap: wrap; }
.igx-modo {
    flex: 1 1 160px;
    padding: 11px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.igx-modo:hover { border-color: var(--border); color: var(--text); }
.igx-modo.is-ativo {
    border-color: var(--accent);
    background: rgba(233, 192, 122, .1);
    color: var(--text-strong);
}
.ig-aviso.perigo { color: var(--danger); }

/* Selo de estado da regra */
.igx-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
}
.igx-selo.ok { border-color: rgba(233, 192, 122, .35); color: var(--accent); }
.igx-selo.perigo { border-color: rgba(255, 125, 110, .35); color: var(--danger); }

/* =============================================================
   TROCA RÁPIDA DE MUNDO (WhatsApp / Instagram) — só no celular
   -------------------------------------------------------------
   Atalho por cima do que já existe: a navbar de baixo continua
   igual. Aqui é só para pular de um lado para o outro sem abrir
   menu nenhum.
============================================================= */

/* No computador não aparece: lá o menu lateral já mostra tudo de uma vez */
.mundo-switch { display: none; }

@media (max-width: 900px) {
    .mundo-switch {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 8500;          /* abaixo dos modais, acima do conteúdo */

        display: flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border-radius: 999px;
        border: 1px solid var(--border-soft);
        background: rgba(16, 16, 22, .82);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
    }

    /* A pastilha que desliza por baixo do rótulo escolhido */
    .mundo-thumb {
        position: absolute;
        top: 3px;
        left: 3px;
        width: calc(50% - 3px);
        height: calc(100% - 6px);
        border-radius: 999px;
        background: var(--grad-accent);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
        transition: transform .32s cubic-bezier(.32, 1.4, .5, 1);
    }
    .mundo-switch[data-mundo="instagram"] .mundo-thumb { transform: translateX(100%); }

    .mundo-op {
        position: relative;     /* fica por cima da pastilha */
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 32px;
        border: none;
        background: transparent;
        border-radius: 999px;
        color: var(--text-muted);
        cursor: pointer;
        transition: color .22s ease, transform .22s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mundo-op i { font-size: 17px; }
    .mundo-op.is-ativo { color: var(--accent-ink); }

    /* O ícone escolhido cresce um tico — dá o "clique" visual */
    .mundo-op.is-ativo i { transform: scale(1.08); }

    /* Área de toque maior que o desenho, sem ocupar espaço na tela */
    .mundo-op::after {
        content: '';
        position: absolute;
        inset: -7px -3px;
    }

    /* Espaço no topo para a pastilha não cobrir o conteúdo */
    .content-body {
        padding-top: calc(env(safe-area-inset-top, 0px) + 58px) !important;
    }

    /* ---- Onde a pastilha tem que sumir ----
       Tela cheia e tela focada não são lugar de atalho: ali o topo é
       da informação que você abriu, não de um botão de navegação. */
    body.mobile-chat-active .mundo-switch,          /* conversa do WhatsApp */
    body.ig-ficha-aberta .mundo-switch,             /* perfil ou direct do Instagram */
    body:has(#mobileMenuSheetOverlay:not(.hidden)) .mundo-switch,
    body:has(.modal-backdrop:not(.hidden)) .mundo-switch {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(-140%);
    }

    /* O sino some nos MESMOS lugares. Ele mora na mesma faixa do topo:
       um sumindo e o outro ficando deixa a faixa torta, e o sino
       sozinho no canto perde a referencia de onde pertence.
       O deslocamento e sem o translateX porque ele nao e centralizado. */
    body.mobile-chat-active .sino-avisos,
    body.ig-ficha-aberta .sino-avisos,
    body:has(#mobileMenuSheetOverlay:not(.hidden)) .sino-avisos,
    body:has(.modal-backdrop:not(.hidden)) .sino-avisos {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-140%);
    }

    /* E o espaço do topo volta para o conteúdo */
    body.mobile-chat-active .content-body,
    body.ig-ficha-aberta .content-body {
        padding-top: 0 !important;
    }

    /* Sumindo enquanto você desce a tela: quem está lendo não quer
       um botão flutuando por cima. Volta assim que você sobe. */
    .mundo-switch.escondida {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(-140%);
    }

    .sino-avisos.escondida {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-140%);
    }

    .mundo-switch,
    .sino-avisos {
        transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
    }
}

/* Quem prefere menos movimento não ganha o deslize */
@media (prefers-reduced-motion: reduce) {
    .mundo-thumb { transition: none; }
}

/* =============================================================
   TEMA CLARO
   -------------------------------------------------------------
   Só troca de tokens. O escuro empilha branco por cima do fundo
   (rgba branca) para criar profundidade; no claro isso some, então
   as mesmas camadas viram preto transparente. Sem inverter isso,
   card, borda e divisória ficam invisíveis.

   O dourado também muda: #e9c07a é bonito no preto e ilegível no
   branco. Aqui ele escurece e a tinta de cima passa a ser branca.
============================================================= */

:root[data-tema="claro"] {
  /* ---- Superfícies ---- */
  --bg: #f4f4f7;
  --bg-deep: #ebebf0;
  --bg-elev: #ffffff;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-1: #ffffff;
  --surface-2: rgba(15, 15, 25, 0.035);
  --surface-3: rgba(15, 15, 25, 0.062);
  --surface-4: rgba(15, 15, 25, 0.095);

  /* ---- Linhas ---- */
  --border: rgba(15, 15, 25, 0.115);
  --border-soft: rgba(15, 15, 25, 0.07);
  --border-strong: rgba(15, 15, 25, 0.2);

  /* ---- Texto ---- */
  --text-strong: #14141c;
  --text: #26262f;
  --text-dim: #52525e;
  --text-faint: #5f5f6b;
  --text-muted: #5d5d69;

  /* ---- Marca ---- */
  --accent: #8a6120;
  --accent-hi: #6f4d18;
  --accent-2: #8a6120;
  --accent-dim: #6f4d18;
  --accent-rgb: 164, 118, 42;
  --accent-soft: rgba(164, 118, 42, 0.10);
  --accent-line: rgba(164, 118, 42, 0.3);
  /* No claro a tinta sobre o dourado é branca, não marrom */
  --accent-ink: #ffffff;

  --iris: #6b56d6;
  --iris-rgb: 107, 86, 214;

  /* ---- Semânticas: as do escuro somem no branco ---- */
  --success: #0e6b49;
  --success-rgb: 18, 133, 90;
  --success-soft: rgba(18, 133, 90, 0.10);
  --danger: #c33726;
  --danger-rgb: 195, 55, 38;
  --danger-soft: rgba(195, 55, 38, 0.09);
  --warn: #9a6c12;
  --warn-rgb: 154, 108, 18;
  --warn-soft: rgba(154, 108, 18, 0.11);
  --info: #1f63c4;
  --info-rgb: 31, 99, 196;
  --info-soft: rgba(31, 99, 196, 0.09);

  /* ---- Gradientes ---- */
  --grad-accent: linear-gradient(135deg, #96691f 0%, #7d5518 45%, #63430f 100%);
  --grad-text: linear-gradient(160deg, #14141c 0%, #3a3a46 60%, #5d5d69 100%);
  --grad-gold-text: linear-gradient(140deg, #a4762a 0%, #8a6120 55%, #6f4d18 100%);

  /* ---- Sombras: no branco, sombra pesada vira sujeira ---- */
  --sh-xs: 0 1px 2px rgba(15, 15, 25, 0.06);
  --sh-sm: 0 1px 3px rgba(15, 15, 25, 0.07), 0 4px 12px -6px rgba(15, 15, 25, 0.1);
  --sh-md: 0 2px 6px -2px rgba(15, 15, 25, 0.08), 0 12px 28px -16px rgba(15, 15, 25, 0.18);
  --sh-lg: 0 6px 16px -6px rgba(15, 15, 25, 0.12), 0 28px 56px -28px rgba(15, 15, 25, 0.24);
  --sh-gold: 0 4px 14px -6px rgba(164, 118, 42, 0.4);
  --sh-gold-lg: 0 10px 30px -12px rgba(164, 118, 42, 0.35);
  --ring: 0 0 0 3px rgba(164, 118, 42, 0.25);

  /* Menu, topo e flutuantes eram cor fixa preta: no claro sumiam
     como um bloco escuro no meio da tela. */
  --nav-1: rgba(255, 255, 255, 0.92);
  --nav-2: rgba(246, 246, 250, 0.96);
  --topo-1: rgba(255, 255, 255, 0.86);
  --topo-2: rgba(255, 255, 255, 0.5);
  --cabecalho-tabela: #eeeef3;
  --painel: #ffffff;
  --pop-1: #ffffff;
  --pop-2: #fafafc;
  --flutuante: #ffffff;

  color-scheme: light;
}

/* =============================================================
   AVISO DE QUEM PEDIU PARA PARAR
   -------------------------------------------------------------
   Precisa chamar atenção de verdade — é o aviso que evita uma
   denúncia — sem virar um bloco vermelho estranho no meio do
   painel. O tom âmbar puxa o olho e continua da casa.
============================================================= */

.avisos-recusa { display: grid; gap: 10px; margin-bottom: 12px; }

.aviso-recusa {
    position: relative;
    padding: 13px 14px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(247, 197, 107, .35);
    background:
        linear-gradient(180deg, rgba(247, 197, 107, .09), rgba(247, 197, 107, .03)),
        var(--surface-2);
    animation: avisoEntra .3s ease;
}
.aviso-recusa.grave {
    border-color: rgba(255, 125, 110, .42);
    background:
        linear-gradient(180deg, rgba(255, 125, 110, .1), rgba(255, 125, 110, .03)),
        var(--surface-2);
}
.aviso-recusa.saindo { opacity: .35; transform: scale(.985); transition: all .25s ease; }

@keyframes avisoEntra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.ar-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.ar-selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--warn);
}
.aviso-recusa.grave .ar-selo { color: var(--danger); }

.ar-fechar {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: none;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}
.ar-fechar:hover { background: var(--surface-3); color: var(--text); }

.ar-quem { font-size: 14px; font-weight: 700; color: var(--text-strong); }

.ar-frase {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.5;
    font-style: italic;
    color: var(--text-muted);
}

.ar-acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }

.ar-bloquear {
    background: var(--danger-soft);
    border: 1px solid rgba(255, 125, 110, .35);
    color: var(--danger);
}
.ar-bloquear:hover { background: rgba(255, 125, 110, .18); }

.ar-nota {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border-soft);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-faint);
}

/* ---- Filtro de período ---- */

.cf-periodos { margin-bottom: 7px; }
.cf-chip-periodo { font-size: 11px; padding: 5px 12px; opacity: .82; }
.cf-chip-periodo.is-on { opacity: 1; }

/* ---- Soneca ---- */

.soneca-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.soneca-op {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 14px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, background .18s ease;
}
.soneca-op:hover { border-color: var(--accent); background: var(--surface-3); }
.soneca-op strong { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.soneca-op span { font-size: 11px; color: var(--text-faint); }

/* ---- Perfil do contato ---- */

.pc-topo { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }

.pc-foto {
    width: 62px; height: 62px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex: 0 0 auto;
}
.pc-sem {
    display: grid; place-items: center;
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 22px;
}
.pc-id strong { display: block; font-size: 14px; color: var(--text-strong); }
.pc-selo {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
}

.pc-rotulo {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.pc-sobre {
    padding: 12px 13px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}
.pc-sobre p { font-size: 12.5px; line-height: 1.55; color: var(--text); }

.pc-vazio {
    padding: 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-faint);
    background: var(--surface-2);
    border-radius: var(--r-sm);
}

.pc-alerta {
    display: flex; gap: 9px; align-items: flex-start;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(247, 197, 107, .35);
    background: rgba(247, 197, 107, .08);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.pc-alerta i { color: var(--warn); margin-top: 2px; }

.pc-pistas { margin-top: 16px; }
.pc-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    margin-top: 6px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
}
.pc-linha i { color: var(--accent); width: 15px; text-align: center; flex: 0 0 auto; }
.pc-linha-rot { font-size: 11px; color: var(--text-faint); flex: 0 0 auto; }
.pc-linha-val {
    font-size: 12.5px;
    color: var(--text);
    margin-left: auto;
    text-align: right;
    word-break: break-word;
    min-width: 0;
}

/* ---- Histórico e leads esquecidos ---- */

.hist-janelas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
    margin-top: 14px;
}
.hist-janela {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, background .18s ease;
}
.hist-janela:hover { border-color: var(--accent); background: var(--surface-3); }
.hist-janela strong { font-size: 12.5px; color: var(--text-strong); }
.hist-janela span { font-size: 11px; line-height: 1.45; color: var(--text-faint); }

.hist-estado {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 12px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-soft);
    background: var(--surface-2);
}
.hist-estado.pronto { border-color: rgba(95, 224, 160, .35); }
.hist-estado > i { color: var(--accent); font-size: 14px; }
.hist-estado.pronto > i { color: var(--success); }
.he-texto strong { display: block; font-size: 12.5px; color: var(--text-strong); }
.he-texto span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-faint); }

.esq-resumo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px;
    margin-bottom: 14px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--accent-line);
}
.esq-resumo strong { font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1; }
.esq-resumo span { font-size: 12.5px; color: var(--text-muted); }

.esq-grupo { margin-bottom: 10px; }
.esq-grupo > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
    user-select: none;
}
.esq-grupo > summary::-webkit-details-marker { display: none; }
.esq-grupo.urgente > summary { border-color: rgba(247, 197, 107, .3); }
.esq-grupo > summary > i { color: var(--accent); font-size: 14px; }
.eg-titulo { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.eg-num {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--grad-accent);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
}
.eg-explica {
    margin: 9px 2px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-faint);
}
.eg-lista { display: grid; gap: 8px; }

.esq-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.ei-corpo { flex: 1; min-width: 0; cursor: pointer; }
.ei-topo { display: flex; align-items: baseline; gap: 9px; }
.ei-topo strong { font-size: 12.5px; color: var(--text-strong); }
.ei-tempo { font-size: 11px; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.ei-fala {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.45;
    font-style: italic;
    color: var(--text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ei-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.ei-tags span {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--surface-1);
    font-size: 11px;
    color: var(--text-muted);
}
.ei-abrir { flex: 0 0 auto; }

/* ---- Celular ---- */

@media (max-width: 640px) {
    .ar-acoes { flex-direction: column; }
    .ar-acoes .btn { width: 100%; justify-content: center; height: 40px; }

    .soneca-opcoes { grid-template-columns: 1fr; }
    .hist-janelas { grid-template-columns: 1fr; }

    /* O botão desce: lado a lado espreme os dois */
    .esq-item { flex-direction: column; align-items: stretch; }
    .ei-abrir { width: 100%; justify-content: center; height: 40px; }

    .pc-linha { flex-wrap: wrap; }
    .pc-linha-val { width: 100%; margin-left: 25px; text-align: left; }

    .esq-resumo strong { font-size: 22px; }
}

/* ---- Barra de citação, acima do campo de texto ---- */

.barra-citacao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    margin-bottom: 8px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    animation: citacaoEntra .18s ease;
}
@keyframes citacaoEntra {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.bc-marca {
    flex: 0 0 auto;
    width: 3px;
    align-self: stretch;
    min-height: 26px;
    border-radius: 999px;
    background: var(--grad-accent);
}
.bc-corpo { flex: 1; min-width: 0; }
.bc-quem {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}
.bc-texto {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bc-fechar {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: none;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
}
.bc-fechar:hover { background: var(--surface-3); color: var(--text); }

/* Mensagem recebida também tem o botão de ações agora, e ele fica do
   lado de fora da bolha — do lado oposto ao das minhas. */
.msg-row.in .msg-actions { order: 2; }

/* ---- Identidade do chip ---- */

.persona-dica {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.persona-dica i { color: var(--accent); margin-top: 2px; }

.persona-quando {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-faint);
    text-align: center;
}

/* =============================================================
   GESTOS — arrastar a conversa e a mensagem
============================================================= */

/* O cartão precisa de posição e fundo próprio: as ações ficam
   ATRÁS dele, e sem fundo opaco elas apareceriam por baixo. */
.chat-item { position: relative; touch-action: pan-y; }

/* O conteudo desliza POR CIMA das acoes, que ja estao la atras.
   Precisa de fundo opaco proprio, senao as acoes aparecem por baixo
   do texto o tempo todo. */
.ci-desliza {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -10px -12px -10px -10px;
    padding: 10px 12px 10px 10px;
    background: var(--bg-elev, #0b0b12);
    transition: transform .24s cubic-bezier(.2, .8, .3, 1);
    will-change: transform;
}

.chat-item.arrastando .ci-desliza { transition: none; }

.ci-acoes {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    align-items: stretch;
    z-index: 0;
    visibility: hidden;
}
.chat-item.arrastando .ci-acoes,
.chat-item.aberta .ci-acoes { visibility: visible; }

.cia {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
}
.cia i { font-size: 14px; }

/* Cada ação com sua cor, para o dedo aprender sem ler */
.cia-fixar    { background: linear-gradient(160deg, #c9974d, #a97f3e); }
.cia-caso     { background: linear-gradient(160deg, #6f5bc4, #52439a); }
.cia-arquivar { background: linear-gradient(160deg, #4a4a55, #34343d); }

.cia:active { filter: brightness(1.12); }

/* Some deslizando quando arquiva */
.chat-item.sumindo {
    transform: translateX(-110%);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
}

/* No computador as ações aparecem ao passar o mouse */
@media (hover: hover) and (min-width: 901px) {
    .chat-item:hover .ci-desliza { transform: translateX(-192px); }
    .chat-item:hover .ci-acoes { visibility: visible; }
    
    .cia { width: 54px; font-size: 11px; }
    .cia i { font-size: 12.5px; }
}

/* ---- Desfazer ---- */

.aviso-desfazer {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    transform: translateX(-50%) translateY(20px);
    z-index: 9500;

    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--flutuante, rgba(14, 14, 20, .96));
    box-shadow: 0 10px 32px rgba(0, 0, 0, .5);

    font-size: 12.5px;
    color: var(--text);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    max-width: calc(100vw - 28px);
}
.aviso-desfazer.mostrando { opacity: 1; transform: translateX(-50%) translateY(0); }

.aviso-desfazer button {
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    white-space: nowrap;
}

/* ---- Arrastar a mensagem para citar ---- */

.msg-row { position: relative; touch-action: pan-y; }
.msg-row .bubble { will-change: transform; }

.msg-cita-marca {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-faint);
    font-size: 12.5px;
    opacity: 0;
    pointer-events: none;
    transition: background .16s ease, color .16s ease, scale .16s ease;
}
.msg-cita-marca.pronto {
    background: var(--grad-accent);
    color: var(--accent-ink);
    scale: 1.12;
}

/* ---- Citação dentro do balão ---- */

.bubble-cita {
    display: block;
    margin-bottom: 6px;
    padding: 7px 10px 7px 11px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .22);
    border-left: 3px solid var(--accent);
    cursor: pointer;
    transition: background .16s ease;
}
.bubble-cita:hover { background: rgba(0, 0, 0, .3); }

.bubble.out .bubble-cita {
    background: rgba(0, 0, 0, .42);
    border-left-color: rgba(255, 255, 255, .55);
}
.bubble.out .bc-autor  { color: #fbeacb; opacity: 1; }
.bubble.out .bc-trecho { color: #f3e6cd; opacity: .92; }

.bc-autor {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 2px;
}


.bc-trecho {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.4;
    opacity: .8;
}

/* Pisca quando você chega nela pela citação */
.bubble.piscando { animation: piscaBolha 1.4s ease; }
@keyframes piscaBolha {
    0%, 100% { box-shadow: none; }
    18%, 55% { box-shadow: 0 0 0 2px var(--accent), 0 0 22px -4px var(--accent); }
}

/* ---- Nome do contato abre o perfil ---- */

.abre-perfil { cursor: pointer; transition: color .16s ease; }
.abre-perfil:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .chat-item, .aviso-desfazer, .msg-cita-marca { transition: none; }
    .bubble.piscando { animation: none; box-shadow: 0 0 0 2px var(--accent); }
}

/* Botão em modo inverso: o mesmo lugar, o sentido contrário.
   Fica esmaecido e com traço, para a mão perceber que ali agora
   desfaz em vez de fazer. */
.cia.invertida {
    background: var(--surface-4, rgba(255,255,255,.11));
    color: var(--text-dim);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* Aviso de IP de datacenter na tela do Instagram.
   Cor de alerta, nao de erro: nao e um impedimento, e uma escolha. */
.ig-aviso-nuvem {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .10);
    color: var(--text-primary, #e8e8ea);
    font-size: 12.5px;
    line-height: 1.5;
}
.ig-aviso-nuvem i { color: #f59e0b; margin-top: 2px; flex-shrink: 0; }
.ig-aviso-nuvem strong { display: block; margin-bottom: 3px; color: #f59e0b; }
.ig-aviso-nuvem span { display: block; opacity: .85; }

/* Motivo de voltar para o login. Sem isso a volta parece um loop
   sem explicacao e a pessoa fica tentando a senha certa varias vezes. */
.login-aviso-servidor {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .10);
    color: #f59e0b;
    font-size: 12.5px;
    line-height: 1.5;
}

/* =============================================================
   BOTÃO LARGO NÃO PODE SER BAIXO
   -------------------------------------------------------------
   .btn-sm tinha altura FIXA de 31px. No celular ele nunca estica,
   então fica ótimo. No computador, o mesmo botão dentro de um flex
   com "flex: 1" vira 460px de largura por 31 de altura — fino e
   largo, com cara de faixa em vez de botão.

   Altura fixa é a causa: um botão que estica na horizontal precisa
   crescer um pouco na vertical, senão a proporção quebra. Aqui a
   altura vira mínima em vez de exata, e cresce quando o botão ocupa
   a linha inteira.

   No celular nada muda — é onde já estava certo.
============================================================= */

@media (min-width: 901px) {
    .btn-sm {
        height: auto;
        min-height: 32px;
        padding-top: 7px;
        padding-bottom: 7px;
        line-height: 1.25;
    }

    /* Ocupou a linha toda: deixou de ser um botão pequeno. */
    .btn-sm.btn-block,
    .btn-sm[style*="flex: 1"],
    .btn-sm[style*="flex:1"] {
        min-height: 40px;
    }

    /* .btn-block vinha ANTES de .btn-sm no arquivo, então a altura de
       44px era sobrescrita pela de 31px e o botão de largura cheia
       ficava raso. */
    .btn.btn-block { height: auto; min-height: 42px; }

    /* Grupo de botões que dividem a linha: mesma altura entre si,
       senão a fileira fica em degrau. */
    .btn-group .btn, .fin-form-acoes .btn { min-height: 38px; }
}

/* O "Abrir o financeiro" é um link, mas continua sendo algo que se
   toca: 15px de altura é menos que a ponta de um dedo. */
.dh-abrir {
    min-height: 30px;
    align-items: center;
}

/* =============================================================
   PASTILHA DE FILTRO PRECISA CABER O DEDO
   -------------------------------------------------------------
   As pastilhas de período e de filtro estavam em 26-28px de altura.
   No mouse funciona; no polegar, não — a ponta de um dedo cobre uns
   9 mm, e abaixo de ~32px o toque erra a vizinha com frequência.

   Só no celular: no computador elas ficam elegantes como estão, e
   engordá-las lá só ocuparia espaço à toa.
============================================================= */

@media (max-width: 900px) {
    .cf-chip,
    .fin-per,
    .fin-aba {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
    }

    /* O respiro entre elas conta tanto quanto o tamanho: pastilhas
       coladas fazem o dedo acertar a errada mesmo sendo grandes. */
    .fin-abas { gap: 8px; }
    .fin-topo-per { gap: 8px; }
}

/* =============================================================
   PRÉVIA DO CARGO NO CONVITE
   -------------------------------------------------------------
   Permissão que você não consegue conferir de relance é permissão
   que vai ficar errada. As que doem se forem dadas sem querer —
   painel, financeiro, conversas dos colegas — aparecem marcadas,
   não escondidas no meio.
============================================================= */

.previa-cargo {
    margin: -4px 0 14px;
    padding: 13px 14px; border-radius: 12px;
    border: 1px solid var(--border-soft); background: var(--bg-elev);
}
.previa-cargo:empty { display: none; }

.previa-titulo {
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.previa-lista { list-style: none; margin: 0; padding: 0; }
.previa-lista li {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 3px 0; font-size: 11px; line-height: 1.5; color: var(--text-dim);
}
.previa-lista li i { font-size: 11px; margin-top: 4px; color: var(--success); }
.previa-lista li.delicada { color: var(--text); }
.previa-lista li.delicada i { color: var(--warn); }

.previa-nota {
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--border-soft);
    font-size: 11px; line-height: 1.55; color: var(--text-faint);
}
.previa-vazia { font-size: 11px; color: var(--text-faint); }

/* =============================================================
   A FAIXA DO CABEÇALHO DO CHAT
   -------------------------------------------------------------
   Estava com três alturas (30, 34, 34), três cantos (pílula,
   quadrado de 8px, nenhum) e três pesos, um do lado do outro. O olho
   percebe o desalinhamento antes de ler qualquer coisa — é por isso
   que a faixa parecia inacabada mesmo cada botão sendo bonito
   sozinho.

   A regra aqui é: UMA forma, TRÊS pesos.

     Fechou            → o único preenchido. É a ação.
     Contador de chips → contorno fino, com o ponto de estado.
     Quem atendeu      → fantasma, só o ícone.

   E um preenchido por faixa. Se dois competem, nenhum ganha.
============================================================= */

.chat-header-badges {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

/* Informação e ação são coisas diferentes, então respiram diferente:
   o que informa fica junto, a ação fica separada por um vão maior. */
.chat-header-badges .vr-botao { margin-left: 6px; }

/* --- Mesma altura e mesmo canto para os três --- */
.chat-header-badges .vr-botao,
.chat-header-badges .conn-chip,
.chat-header-badges > .btn-icon,
#qaBotao {
    height: 34px;
    min-height: 34px;
    border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
}

.chat-header-badges > .btn-icon,
#qaBotao {
    width: 34px; padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.chat-header-badges > .btn-icon:hover,
#qaBotao:hover {
    color: var(--text-strong);
    background: rgba(255, 255, 255, .05);
}

/* --- O contador de chips --- */
.conn-chip { gap: 8px; padding: 0 13px; font-family: inherit; font-size: 11px; font-weight: 600; }

/* Três estados, não dois. "Parte conectada" é a situação mais comum de
   quem tem vários chips, e ela não é nem sucesso nem falha — pintá-la
   de vermelho assusta à toa, de verde esconde o problema. */
.conn-chip.is-meio {
    border-color: rgba(var(--warn-rgb), .32);
    color: var(--warn);
    background: rgba(var(--warn-rgb), .07);
}
.conn-chip .dot.meio { background: var(--warn); box-shadow: 0 0 6px rgba(var(--warn-rgb), .6); }

/* Filtrando por um chip: a pastilha mostra o NOME dele. Filtro que não
   aparece na tela é filtro que a pessoa esquece que ligou — e aí ela
   acha que perdeu conversa. */
.conn-chip.filtrando {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(233, 192, 122, .1);
    max-width: 190px;
}
.conn-chip.filtrando .conn-chip-count {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Apagado quando não há o que fazer ---
   Botão que só serve para dizer que não serve é pior que botão
   ausente: gasta um toque para não acontecer nada. */
.vr-botao.apagado, #qaBotao.apagado {
    opacity: .32;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- As linhas do painel agora são botões de filtro --- */
.conn-row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 10px; border-radius: 8px;
    border: 0; background: none; cursor: pointer; text-align: left;
    transition: background .14s ease;
}
.conn-row:hover { background: rgba(255, 255, 255, .05); }
.conn-row.escolhido { background: rgba(233, 192, 122, .12); }
.conn-row.escolhido .conn-row-name { color: var(--accent); font-weight: 600; }
.conn-row i { margin-left: auto; font-size: 11px; color: var(--accent); }

.conn-todos {
    border-bottom: 1px solid var(--border-soft);
    border-radius: 20px 20px 0 0; margin-bottom: 4px; padding-bottom: 11px;
}

@media (max-width: 520px) {
    .chat-header-badges { gap: 5px; }
    .conn-chip { padding: 0 11px; }
    .conn-chip.filtrando { max-width: 120px; }
}

/* =============================================================
   A FAIXA DO CHAT — correção
   -------------------------------------------------------------
   Eu errei na primeira tentativa: deixei DOIS preenchidos, o verde do
   "Fechou" e o dourado do filtro. Dois cheios lado a lado é
   exatamente o que faz uma faixa destoar — cada um puxa o olho para
   um lado e nenhum vence.

   A regra certa: NENHUM preenchido. Todos com o mesmo vidro neutro e
   a mesma borda fina. A cor aparece só no ponto e no ícone — que são
   pequenos, então informam sem gritar.

   Assim os quatro viram um controle só, e o que diferencia é o
   conteúdo, não a tinta.
============================================================= */

.chat-header-badges > *,
.chat-header-badges .vr-botao,
.chat-header-badges .conn-chip,
#qaBotao,
#btnChatHeader3Dots {
    height: 34px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .035);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.chat-header-badges > .conn-wrap { border: 0; background: none; height: auto; }

#qaBotao, #btnChatHeader3Dots { width: 34px; padding: 0; }

.chat-header-badges > *:hover,
.chat-header-badges .vr-botao:hover,
.chat-header-badges .conn-chip:hover,
#qaBotao:hover,
#btnChatHeader3Dots:hover {
    background: rgba(255, 255, 255, .07);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

/* O "Fechou" continua sendo a ação, mas em traço, não em bloco: o
   ícone verde já basta para achá-lo de relance. */
.chat-header-badges .vr-botao {
    gap: 8px; padding: 0 14px;
    color: var(--text-dim); font-weight: 600; font-size: 11px;
}
.chat-header-badges .vr-botao i { color: var(--success); font-size: 12.5px; }
.chat-header-badges .vr-botao:hover {
    border-color: rgba(95, 224, 160, .35);
    background: rgba(95, 224, 160, .08);
    color: var(--success);
}

/* O contador: vidro neutro, e o ponto carrega o estado. */
.chat-header-badges .conn-chip {
    gap: 8px; padding: 0 13px;
    font-family: inherit; font-size: 11px; font-weight: 600;
    color: var(--text-dim);
}
.chat-header-badges .conn-chip.is-online,
.chat-header-badges .conn-chip.is-meio,
.chat-header-badges .conn-chip.is-offline,
.chat-header-badges .conn-chip.filtrando {
    background: rgba(255, 255, 255, .035);
    border-color: var(--border-soft);
    color: var(--text-dim);
}
.chat-header-badges .conn-chip.filtrando {
    color: var(--text-strong);
    border-color: rgba(233, 192, 122, .3);
    max-width: 170px;
}
.chat-header-badges .conn-chip.filtrando .dot { background: var(--accent); box-shadow: none; }

.chat-header-badges .conn-chip .dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.chat-header-badges .conn-chip .dot.on { background: var(--success); }
.chat-header-badges .conn-chip .dot.meio { background: var(--warn); box-shadow: none; }
.chat-header-badges .conn-chip .dot.off { background: var(--danger); }

/* Os três pontos: mesma forma dos outros. Ele já existia e continuou
   quadrado enquanto o resto virou pílula — era o que mais destoava. */
#btnChatHeader3Dots { font-size: 12.5px; }
#chatHeader3DotsWrap.apagado { opacity: .32; pointer-events: none; }

.vr-botao.apagado, #qaBotao.apagado { opacity: .32; pointer-events: none; }

@media (max-width: 560px) {
    .chat-header-badges { gap: 5px; }
    .chat-header-badges .vr-botao { width: 34px; padding: 0; }
    .chat-header-badges .vr-botao span { display: none; }
    .chat-header-badges .conn-chip { padding: 0 11px; }
    .chat-header-badges .conn-chip.filtrando { max-width: 108px; }
}

/* =============================================================
   O "FECHOU" VIRA SÓ ÍCONE
   -------------------------------------------------------------
   Igual aos outros. O verde fazia dele o único colorido da faixa, e
   um colorido no meio de três neutros não é destaque — é destoe.
   Se todos são iguais, a faixa some da vista e sobra a conversa,
   que é o que importa ali.
============================================================= */

.chat-header-badges .vr-botao {
    width: 34px;
    padding: 0;
    gap: 0;
}
.chat-header-badges .vr-botao span { display: none; }
.chat-header-badges .vr-botao i { color: inherit; font-size: 12.5px; }
.chat-header-badges .vr-botao:hover {
    background: rgba(255, 255, 255, .07);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

/* =============================================================
   O FILTRO DA LISTA DE CONVERSAS
   -------------------------------------------------------------
   Eram DOIS ícones colados dentro de um quadrado — boneco e três
   pontinhos, sem nada entre eles. Dois ícones sem separação o olho
   lê como falha de renderização, não como um botão.

   Agora é um ícone e uma setinha discreta, que é como o mundo
   inteiro diz "isto abre uma lista". E a mesma pílula da faixa do
   chat, porque fazem a mesma coisa: escolher por qual WhatsApp você
   está olhando.
============================================================= */

.chat-scope-btn {
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .035);
    color: var(--text-muted);
}
.chat-scope-btn i:first-child { font-size: 12.5px; }
.chat-scope-btn .seta {
    font-size: 11px;
    opacity: .5;
    transition: transform .2s ease;
}
.chat-scope-btn.open .seta { transform: rotate(180deg); }

.chat-scope-btn:hover,
.chat-scope-btn.open {
    background: rgba(255, 255, 255, .07);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

/* O ponto de "estou filtrando" fica no canto, pequeno: é aviso, não
   decoração. */
.chat-scope-dot {
    position: absolute;
    top: 6px; right: 8px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--bg-elev);
}

/* =============================================================
   O DESLIZAR DA CONVERSA — correção
   -------------------------------------------------------------
   Dois problemas somados, e os dois invisíveis no código de quem
   olhou só um arquivo.

   1. ESPAÇO COMIDO DUAS VEZES. O cartão tem padding de 12px, e o
      deslizante que passou a envolver o conteúdo ganhou outros 12.
      Resultado: 24 de cada lado. O nome do contato ficou com menos
      espaço e começou a cortar antes da hora — era isso que dava a
      sensação de "ficou mais curto".

      Quem carrega o respiro agora é o deslizante, sozinho.

   2. A ROLAGEM DISPUTADA. Sem touch-action, o navegador precisa
      esperar a gente decidir se aquele toque é rolagem ou arrasto
      antes de rolar qualquer coisa. Essa espera é o engasgo.

      Com pan-y ele já sabe: vertical é dele e sai na hora; horizontal
      é nosso. Ninguém espera ninguém.
============================================================= */

.chat-item:has(.ci-desliza) { padding: 0; }
.chat-item .ci-desliza { padding: 11px 12px; }

.chat-item {
    touch-action: pan-y;
}

/* Arrasto curto revela só o primeiro botão. É o gesto mais comum, e
   quase sempre quer a mesma coisa — os outros dois ficam a um dedo. */
.chat-item.meia .cia:not(:first-child) {
    opacity: .35;
    transform: scale(.94);
}
.cia {
    transition: opacity .18s ease, transform .18s cubic-bezier(.3, 1.3, .4, 1);
}

/* A conversa aberta ganha um relevo: sem ele, o cartão deslizado
   parece ter escorregado por acidente em vez de ter sido aberto. */
.chat-item.aberta .ci-desliza {
    box-shadow: -8px 0 18px -6px rgba(0, 0, 0, .55);
}