/* ==========================================================================
   CHATFOR KANBAN — design system de APP
   Derivado de marca/design-system.css (grid + grain + glow, verde #99ea48,
   Plus Jakarta Sans 800, radius 14/24). Dark-first, com modo claro.

   DOIS TEMAS, UM SÓ CONJUNTO DE REGRAS
   -------------------------------------
   Nenhuma regra abaixo do bloco de tokens sabe qual tema está ativo: toda cor
   passa por uma variável. O modo claro é só a redefinição dos tokens em
   `html[data-theme="light"]`. Se você escrever uma cor literal numa regra nova,
   ela vaza no outro tema — use os tokens:

     --cf-ink        canal RGB das sobreposições neutras (hover, borda, texto
                     secundário). Escuro = branco; claro = quase-preto. Use como
                     rgba(var(--cf-ink), .05), NUNCA rgba(255,255,255,.05).
     --cf-shade      canal RGB do que escurece (sombra, scrim de modal).
     --cf-green      o verde de PREENCHIMENTO (fundo, borda de destaque).
     --cf-green-ink  o verde de TEXTO/ícone — no claro ele escurece, senão some.
     --cf-on-green   a cor do texto POR CIMA de um preenchimento verde.
     --cf-dark…4     as superfícies, da mais funda (dark) à mais alta (dark4).
                     No claro elas invertem de ordem visual, não de nome.
   ========================================================================== */

:root {
  /* canais RGB — a chave da troca de tema */
  --cf-ink: 255, 255, 255;
  --cf-shade: 0, 0, 0;
  --cf-green-rgb: 153, 234, 72;
  --cf-blue-rgb: 74, 134, 224;
  --cf-amber-rgb: 184, 124, 10;
  --cf-red-rgb: 224, 92, 114;
  --cf-okgreen-rgb: 93, 164, 40;

  --cf-green: #99ea48;
  --cf-green-ink: #99ea48;
  --cf-green-hover: #a8f25c;
  --cf-on-green: #0d0d0d;
  --cf-green-dim: rgba(var(--cf-green-rgb), 0.12);
  --cf-green-glow: rgba(var(--cf-green-rgb), 0.3);
  --cf-dark: #0d0d0d;
  --cf-dark2: #111;
  --cf-dark3: #1a1a1a;
  --cf-dark4: #222;
  --cf-border-d: rgba(var(--cf-ink), 0.08);
  --cf-border-d2: rgba(var(--cf-ink), 0.14);
  --cf-text-hi: #fafafa;
  --cf-text-mid: rgba(var(--cf-ink), 0.64);
  --cf-text-low: rgba(var(--cf-ink), 0.38);

  --cf-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --cf-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  --cf-radius: 14px;
  --cf-radius-lg: 24px;
  --cf-radius-full: 99px;

  --cf-shadow-md: 0 8px 28px rgba(var(--cf-shade), 0.32);
  --cf-shadow-lg: 0 24px 72px rgba(var(--cf-shade), 0.45);
  --cf-shadow-green: 0 8px 28px rgba(var(--cf-green-rgb), 0.25);
  --cf-shadow-green-glow: 0 0 0 3px rgba(var(--cf-green-rgb), 0.25), 0 10px 36px rgba(var(--cf-green-rgb), 0.38);

  --cf-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --cf-ease-smooth: cubic-bezier(.4, 0, .2, 1);

  /* paleta categórica de dados — validada (dataviz, modo dark) */
  --dv-1: #5da428;
  --dv-2: #4a86e0;
  --dv-3: #b87c0a;
  --dv-4: #e05c72;
  --dv-5: #9a66e8;

  /* status */
  --st-ok: #5da428;
  --st-warn: #b87c0a;
  --st-danger: #e05c72;

  /* prioridades */
  --pr-baixa: rgba(var(--cf-ink), 0.35);
  --pr-media: #4a86e0;
  --pr-alta: #b87c0a;
  --pr-urgente: #e05c72;
  --cf-prio-baixa-dot: #6b7f5a;

  /* acentos de TEXTO (versão clara de cada status, para ler sobre fundo escuro) */
  --cf-blue-ink: #8fb4ef;
  --cf-amber-ink: #d9a13d;
  --cf-red-ink: #e88296;
  --cf-diff-add-ink: #cdf0a8;

  /* superfícies especiais */
  --cf-code-bg: #0a0f08;
  --cf-code-fg: #c8e6b0;
  --cf-input-bg: #181818;      /* campo opaco da topbar (passa por cima do título) */
  --cf-knob: #fff;             /* bolinha do interruptor */
  --cf-sunken: rgba(var(--cf-shade), 0.28);  /* caixa rebaixada (fio da timeline) */
  --cf-on-green-rgb: 13, 13, 13;
  --cf-surf-col: rgba(26, 26, 26, 0.72);     /* coluna do quadro e moldura da tabela */
  --cf-surf-barra: rgba(13, 13, 13, 0.6);    /* barra de filtros, nav da API */
  --cf-logo-clara: block;      /* qual logo aparece — ver .sidebar .logo img */
  --cf-logo-escura: none;
  color-scheme: dark;
}

/* ==========================================================================
   MODO CLARO
   Só tokens. O fundo é um off-white levemente quente (#f7f8f4) em vez de branco
   puro: o verde da marca e o grid signature somem no branco absoluto.
   A escada de superfícies inverte — dark (a mais funda) vira a mais clara —
   para que "card sobre fundo" continue lendo como camada.
   ========================================================================== */

html[data-theme="light"] {
  --cf-ink: 17, 24, 16;
  --cf-shade: 22, 32, 14;
  --cf-green-rgb: 90, 152, 20;      /* o verde tinge borda/fundo sem clarear demais */
  --cf-blue-rgb: 40, 94, 180;
  --cf-amber-rgb: 150, 100, 8;
  --cf-red-rgb: 196, 54, 79;
  --cf-okgreen-rgb: 72, 132, 28;

  --cf-green: #86d92c;              /* preenchimento: brand, um passo mais denso */
  --cf-green-ink: #47800d;          /* texto/ícone verde: legível sobre claro */
  --cf-green-hover: #96e63c;
  --cf-on-green: #0d1a02;

  --cf-dark:  #f7f8f4;              /* fundo da página */
  --cf-dark2: #ffffff;              /* sidebar / modal / painel */
  --cf-dark3: #f1f3ec;              /* campo, célula, superfície intermediária */
  --cf-dark4: #e7eade;              /* superfície alta (popover, chip preenchido) */

  --cf-text-hi: #161c12;

  --cf-shadow-md: 0 8px 24px rgba(var(--cf-shade), 0.10);
  --cf-shadow-lg: 0 24px 64px rgba(var(--cf-shade), 0.16);
  --cf-shadow-green: 0 8px 24px rgba(var(--cf-green-rgb), 0.28);
  --cf-shadow-green-glow: 0 0 0 3px rgba(var(--cf-green-rgb), 0.22), 0 10px 30px rgba(var(--cf-green-rgb), 0.30);

  /* dataviz e status: as mesmas famílias, escurecidas para ler sobre claro */
  --dv-1: #4d8a20; --dv-2: #2d6cc4; --dv-3: #9a6608; --dv-4: #c4364f; --dv-5: #7b47cc;
  --st-ok: #4d8a20; --st-warn: #9a6608; --st-danger: #c4364f;

  --pr-baixa: rgba(var(--cf-ink), 0.42);
  --pr-media: #2d6cc4;
  --pr-alta: #9a6608;
  --pr-urgente: #c4364f;
  --cf-prio-baixa-dot: #8a9c78;

  --cf-blue-ink: #23558f;
  --cf-amber-ink: #8a5c07;
  --cf-red-ink: #b32f48;
  --cf-diff-add-ink: #2f5c12;

  --cf-code-bg: #f0f4ea;
  --cf-code-fg: #2c4a16;
  --cf-input-bg: #ffffff;
  --cf-knob: #fff;
  --cf-sunken: rgba(var(--cf-shade), 0.045);
  --cf-on-green-rgb: 13, 26, 2;
  --cf-surf-col: rgba(225, 230, 216, 0.60);
  --cf-surf-barra: rgba(236, 240, 230, 0.75);
  --cf-logo-clara: none;
  --cf-logo-escura: block;
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--cf-font);
  background: var(--cf-dark);
  color: var(--cf-text-hi);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* fundo signature: grid sutil (1 camada só — grain/blend removidos por performance) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--cf-green-rgb), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cf-green-rgb), .035) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
  z-index: 0;
}

::selection { background: rgba(var(--cf-green-rgb), 0.3); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--cf-ink), 0.12);
  border-radius: 99px;
  border: 2px solid var(--cf-dark);
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--cf-green-rgb), 0.35); }

/* ---------- layout raiz: sidebar + main ---------- */

.app {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100vh;
}

.sidebar {
  background: var(--cf-dark2);
  border-right: 1px solid var(--cf-border-d);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 22px;
  overflow-y: auto;
}

.sidebar .logo { display: flex; align-items: center; gap: 10px; padding: 2px 8px; }
/* duas logos no HTML, uma visível por tema: a clara some no fundo branco e a
   escura some no preto, então quem escolhe é o token, não o JS. */
.sidebar .logo img { height: 26px; }
.sidebar .logo img.logo-clara { display: var(--cf-logo-clara); }
.sidebar .logo img.logo-escura { display: var(--cf-logo-escura); }
.sidebar .logo .logo-app {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cf-green-ink);
  background: var(--cf-green-dim);
  border: 1px solid rgba(var(--cf-green-rgb), 0.25);
  border-radius: var(--cf-radius-full);
  padding: 3px 9px;
}

.nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  padding: 0 10px;
  margin-bottom: 6px;
}

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

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--cf-text-mid);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  transition: color 0.12s, background 0.12s;
  border: 1px solid transparent;
}
.nav a:hover { color: var(--cf-text-hi); background: rgba(var(--cf-ink), 0.04); }
.nav a.active {
  color: var(--cf-green-ink);
  background: var(--cf-green-dim);
  border-color: rgba(var(--cf-green-rgb), 0.22);
}
.nav a svg { width: 16px; height: 16px; flex-shrink: 0; }

.board-list { display: flex; flex-direction: column; gap: 2px; }
.board-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: none;
  border: 1px solid transparent;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: color 0.12s, background 0.12s;
}
.board-list button:hover { color: var(--cf-text-hi); background: rgba(var(--cf-ink), 0.04); }
.board-list button.active { color: var(--cf-text-hi); background: rgba(var(--cf-ink), 0.06); border-color: var(--cf-border-d2); }
.board-list .count {
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-text-low);
  background: rgba(var(--cf-ink), 0.06);
  padding: 1px 8px;
  border-radius: 99px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 10px 10px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* ---------- notificações (sino no rodapé da sidebar) ---------- */

.notif-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1.5px solid var(--cf-border-d2);
  border-radius: var(--cf-radius);
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.notif-btn:hover { color: var(--cf-text-hi); border-color: rgba(var(--cf-green-rgb), 0.5); }
.notif-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.notif-btn.tem-nova { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.5); background: var(--cf-green-dim); }
.notif-btn.tem-nova svg { animation: cf-sino 2.4s ease-in-out infinite; transform-origin: 50% 15%; }
@keyframes cf-sino {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(11deg); }
  94% { transform: rotate(-9deg); }
  97% { transform: rotate(5deg); }
}
.notif-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--cf-green);
  color: var(--cf-on-green);
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}

.notif-panel {
  position: fixed;
  z-index: 210;
  width: 372px;
  max-width: calc(100vw - 32px);
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  overflow: hidden;
}
.notif-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cf-border-d);
  font-size: 13px;
}
.notif-head .muted { font-size: 11.5px; }
.notif-todas {
  border: none;
  background: none;
  color: var(--cf-green-ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.notif-todas:hover { text-decoration: underline; }

.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid var(--cf-border-d);
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.notif-item:hover { background: rgba(var(--cf-ink), 0.04); }
.notif-item.lida { opacity: 0.55; }
.notif-item:last-child { border-bottom: none; }
.notif-item .ni-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-item .ni-top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.notif-item .ni-top b { color: var(--cf-text-hi); }
.notif-item .ni-time { font-size: 10.5px; color: var(--cf-text-low); white-space: nowrap; }
.notif-item .ni-card {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cf-text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-item .ni-card i { font-weight: 600; color: var(--cf-text-low); }
.notif-item .ni-trecho { font-size: 11.5px; color: var(--cf-text-low); line-height: 1.4; }
.notif-item .ni-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cf-green);
  margin-top: 6px;
  flex-shrink: 0;
}
.notif-vazio { padding: 22px 16px; font-size: 12px; color: var(--cf-text-low); line-height: 1.5; }

/* ---------- seletor de tema (rodapé da sidebar) ----------
   Dois botões num trilho, no mesmo desenho do .view-switch da topbar: o estado
   ativo é visível sem hover, porque a pessoa precisa saber em que tema está. */

.tema-switch {
  display: flex;
  width: 100%;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  background: var(--cf-dark3);
}
.tema-switch button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 8px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--cf-text-low);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.tema-switch button svg { width: 13px; height: 13px; flex-shrink: 0; }
.tema-switch button:hover { color: var(--cf-text-hi); }
.tema-switch button.on {
  color: var(--cf-on-green);
  background: var(--cf-green);
}

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-green-ink);
}
.live-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cf-green);
  box-shadow: 0 0 6px var(--cf-green);
  animation: cf-blink 1.8s ease-in-out infinite;
}
@keyframes cf-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

/* ---------- topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px 14px;
  border-bottom: 1px solid var(--cf-border-d);
  background: var(--cf-dark);
  flex-wrap: wrap;
  row-gap: 10px;
  /* As faixas de adaptação medem A BARRA, não a janela: com o card aberto ao
     lado a janela continua de 1920 e a barra fica com 1168, e media query
     nenhuma enxerga isso. */
  container-type: inline-size;
}

/* O título é quem absorve a sobra (por isso o .spacer some) e quem cede espaço
   primeiro: base zero + reticências, então crescer a busca nunca empurra botão. */
.topbar h1 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-right: 4px;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar h1 .thin { font-weight: 400; color: var(--cf-text-low); }

.spacer { flex: 1; }
.topbar .spacer { display: none; }

#btn-new-card { gap: 5px; }

/* Faixas de aperto, na ordem do que se pode perder primeiro: os rótulos dos
   botões (o ícone e a dica ficam), depois o texto do "+ Novo card", por último
   o título (que segue visível na lista de quadros da barra lateral). Os limites
   foram medidos em 11/09/2026 com o PIOR rótulo possível (nome de grupo e de
   ordenação no teto, contador e ponto de rascunho acesos). */
@container (max-width: 1150px) {
  .topbar #grupo-rot,
  .topbar #btn-filtros > span:not(.tool-badge),
  .topbar #sort-rot { display: none; }
}
@container (max-width: 900px) { .topbar .novo-rot { display: none; } }
@container (max-width: 790px) { .topbar h1 { visibility: hidden; } }

/* ---------- controles ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  font-family: var(--cf-font);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.btn-green { background: var(--cf-green); color: var(--cf-on-green); box-shadow: 0 2px 0 rgba(var(--cf-shade), .15) inset; }
.btn-green:hover { box-shadow: var(--cf-shadow-green-glow); }
.btn-green .muted { color: rgba(var(--cf-on-green-rgb), 0.5); }
.btn-ghost {
  background: transparent;
  color: var(--cf-text-mid);
  border: 1.5px solid var(--cf-border-d2);
}
.btn-ghost:hover { border-color: var(--cf-green-ink); color: var(--cf-green-ink); }
.btn-danger { background: transparent; color: var(--st-danger); border: 1.5px solid rgba(var(--cf-red-rgb), 0.4); }
.btn-danger:hover { background: rgba(var(--cf-red-rgb), 0.12); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.input, .select, textarea.input {
  font-family: var(--cf-font);
  font-size: 13px;
  color: var(--cf-text-hi);
  background: rgba(var(--cf-ink), 0.05);
  border: 1.5px solid var(--cf-border-d2);
  border-radius: 10px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: var(--cf-text-low); }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--cf-green-ink);
  box-shadow: 0 0 0 3px rgba(var(--cf-green-rgb), 0.15);
}
.select { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.select option { background: var(--cf-dark3); color: var(--cf-text-hi); }
.input-sm { padding: 6px 9px; font-size: 12px; border-radius: 8px; }
textarea.input { resize: vertical; min-height: 74px; line-height: 1.5; }

.search-wrap { position: relative; }
.search-wrap svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--cf-text-low); pointer-events: none;
}
.search-wrap .input { padding-left: 32px; width: 168px; }

/* Na barra do topo ela cresce para a ESQUERDA, por cima do título: a margem
   negativa devolve exatamente os 72px que a largura ganhou, então a caixa
   continua ocupando o mesmo lugar e nenhum botão anda (era isso que jogava o
   "+ Novo card" para a linha de baixo). O fundo é opaco porque o campo passa
   por cima do título, e a lupa anda junto para não ficar no meio do campo. */
.topbar .search-wrap { flex: none; }
.topbar .search-wrap .input {
  position: relative;
  z-index: 1;
  background-color: var(--cf-input-bg);
  transition: width 0.16s ease, margin-left 0.16s ease;
}
.topbar .search-wrap .input:focus { width: 240px; margin-left: -72px; }
.topbar .search-wrap svg { z-index: 2; transition: left 0.16s ease; }
.topbar .search-wrap:focus-within svg { left: -61px; }

/* ---------- caixa de marcar (uma só, para o app inteiro) ----------
   A nativa é desenho do sistema: desmarcada vira um quadrado branco que
   destoa de tudo aqui. Esta é da casa, e vale para a seleção da tabela, o
   campo sim/não do card e o checklist do markdown (que é `disabled`). */

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  display: inline-grid;
  place-content: center;
  border: 1.5px solid var(--cf-border-d2);
  border-radius: 5px;
  background: rgba(var(--cf-ink), 0.04);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
input[type="checkbox"]:hover:not(:disabled) { border-color: rgba(var(--cf-green-rgb), 0.55); }
input[type="checkbox"]::after {
  content: '';
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid var(--cf-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.12s ease-out;
}
input[type="checkbox"]:checked {
  background: var(--cf-green);
  border-color: var(--cf-green-ink);
}
input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
/* "marcar tudo" parcial: traço, não check */
input[type="checkbox"]:indeterminate {
  background: var(--cf-green);
  border-color: var(--cf-green-ink);
}
input[type="checkbox"]:indeterminate::after {
  width: 8px; height: 0; margin: 0;
  border-width: 0 0 2px 0;
  transform: none;
}
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--cf-green-rgb), 0.2);
}
input[type="checkbox"]:disabled { cursor: default; }
input[type="checkbox"]:disabled:not(:checked) { background: rgba(var(--cf-ink), 0.02); }

/* ---------- select da casa (no lugar do <select> nativo) ---------- */

.select-pop-box { display: flex; }
.select-pop {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--cf-font);
  font-size: 13px;
  color: var(--cf-text-hi);
  background: rgba(var(--cf-ink), 0.05);
  border: 1.5px solid var(--cf-border-d2);
  border-radius: 10px;
  padding: 8px 10px 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s;
}
.select-pop:hover { border-color: rgba(var(--cf-green-rgb), 0.5); }
.sp-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.sp-rot { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-rot.vazio { color: var(--cf-text-low); }
.sp-chevron { width: 13px; height: 13px; color: var(--cf-text-low); flex-shrink: 0; }
/* o "escrevendo como" do chat é compacto e não estica */
.c-me-box { width: auto; }
.c-me-box .select-pop { width: auto; padding: 4px 8px 4px 6px; font-size: 12px; border-radius: 8px; }
.c-me-box .avatar { width: 20px; height: 20px; font-size: 8.5px; }

/* bolinha da prioridade dentro do seletor */
.prio-ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--cf-text-low); }
.prio-ponto.prio-baixa { background: var(--cf-prio-baixa-dot); }
.prio-ponto.prio-media { background: var(--pr-media); }
.prio-ponto.prio-alta { background: var(--cf-amber-ink); }
.prio-ponto.prio-urgente { background: var(--st-danger); }

/* ---------- botão de ferramenta da barra (Filtros, Ordenar) ---------- */

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 10px;
  background: rgba(var(--cf-ink), 0.05);
  border: 1.5px solid var(--cf-border-d2);
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.tool-btn svg { width: 14px; height: 14px; }
.tool-btn:has(> svg:only-child) { padding: 8px 10px; }   /* só ícone, sem rótulo */

/* o refresh gira enquanto busca: sem isso, num quadro rápido, clicar não dá sinal nenhum */
.tool-btn.girando svg { animation: cf-girar 0.7s linear infinite; }
.tool-btn.girando { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.5); }
@keyframes cf-girar { to { transform: rotate(360deg); } }

/* ---------- referência a card (#123) e link do card ---------- */

.card-ref {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  border-radius: 6px;
  font-family: var(--cf-mono);
  font-size: 0.92em;
  font-weight: 700;
  color: var(--cf-green-ink);
  background: var(--cf-green-dim);
  border: 1px solid rgba(var(--cf-green-rgb), 0.25);
  text-decoration: none;
  cursor: pointer;
}
.card-ref:hover { background: rgba(var(--cf-green-rgb), 0.2); border-color: rgba(var(--cf-green-rgb), 0.55); }

/* o #id no topo do card vira botão de copiar link */
.badge-link { cursor: pointer; border: none; font: inherit; transition: color 0.12s, background 0.12s; }
.badge-link:hover { color: var(--cf-green-ink); background: var(--cf-green-dim); }

/* sugestão de card no autocomplete */
.mention-item .mi-card-id {
  font-family: var(--cf-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-green-ink);
  flex-shrink: 0;
}
.tool-btn:hover { border-color: rgba(var(--cf-green-rgb), 0.5); color: var(--cf-text-hi); }
.tool-btn.on { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.5); background: var(--cf-green-dim); }
.tool-badge {
  display: inline-grid;
  place-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--cf-radius-full);
  background: var(--cf-green);
  color: var(--cf-on-green);
  font-size: 10.5px;
  font-weight: 800;
}

/* ---------- grupos de filtros (o recorte salvo, no botão da barra) ---------- */

/* O nome do grupo VIRA o rótulo do botão: assim o recorte aplicado se lê sem
   abrir nada. Trunca porque nome comprido empurraria a barra (que tem
   flex-wrap) para uma segunda linha. */
#grupo-rot { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O rótulo da ordenação pode vir de campo personalizado (nome livre): sem teto,
   ele sozinho decidiria se a barra cabe ou não numa linha. */
#sort-rot { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ponto = tem filtro mexido POR CIMA do grupo, ou seja o nome já não descreve
   o recorte. Cor de aviso e não verde: no estado `on` o botão inteiro é verde,
   e um ponto verde sumiria dentro dele. */
.grupo-alt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-warn);
  box-shadow: 0 0 0 2px rgba(var(--cf-amber-rgb), 0.25);
  flex-shrink: 0;
}

/* seção do grupo no topo do painel de Filtros: já vem depois da borda do
   cabeçalho, então a borda própria viraria linha dupla */
.pop-secao-topo { border-top: none; }
.pop-acao {
  background: none; border: none; cursor: pointer;
  color: var(--cf-green-ink); font: inherit; font-size: 11px; font-weight: 700;
  padding: 3px 7px; border-radius: 7px;
}
.pop-acao:hover { background: var(--cf-green-dim); }
.pop-secao-topo .pop-linha { padding-left: 0; padding-right: 6px; }
.pop-secao-topo .cfil-add { margin-top: 6px; }
.pop-acoes { display: inline-flex; gap: 2px; }
.pop-acao.ok { color: var(--cf-on-green); background: var(--cf-green); }
.pop-acao.ok:hover { background: var(--cf-green-hover); }

/* aviso de RASCUNHO: o que se mexeu por cima do grupo vale agora e some no F5.
   Cor de aviso (a mesma do ponto no botão), com o Salvar ali do lado — o
   estado é reversível, então avisar sem oferecer a saída seria só ansiedade. */
.fchip-rascunho {
  border-color: rgba(var(--cf-amber-rgb), 0.55);
  background: rgba(var(--cf-amber-rgb), 0.12);
  padding-right: 5px;
  max-width: none;   /* são três partes: o teto de 220px quebraria o rótulo em duas linhas */
}
.fchip-rascunho .fchip-rot { color: var(--st-warn); font-weight: 700; white-space: nowrap; }
.fchip-acao {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-mid); font: inherit; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--cf-radius-full);
}
.fchip-acao:hover { color: var(--cf-text-hi); background: rgba(var(--cf-ink), 0.08); }
.fchip-acao.ok { color: var(--cf-on-green); background: var(--cf-green); }
.fchip-acao.ok:hover { background: var(--cf-green-hover); }

/* ---------- chips do que está filtrando ---------- */

.filtros-ativos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Linha própria, e só quando há filtro: chip é conteúdo que cresce sem limite,
   então misturado aos botões ele empurrava a barra para a segunda linha. */
.topbar .filtros-ativos { order: 1; flex-basis: 100%; }
.topbar .filtros-ativos:empty { display: none; }
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: var(--cf-radius-full);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cf-text-mid);
  background: rgba(var(--cf-ink), 0.05);
  border: 1px solid var(--cf-border-d2);
  max-width: 220px;
}
.fchip-rot { color: var(--cf-text-low); }
.fchip b { color: var(--cf-text-hi); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip-x {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low); font-size: 9.5px; line-height: 1;
  padding: 4px; border-radius: 50%;
}
.fchip-x:hover { color: var(--st-danger); background: rgba(var(--cf-red-rgb), 0.15); }
.fchip-limpar {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low); font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 4px 6px; border-radius: 7px;
}
.fchip-limpar:hover { color: var(--cf-green-ink); background: var(--cf-green-dim); }

/* ---------- popover (painel ancorado, irmão do popmenu) ---------- */

.popover {
  position: fixed;
  z-index: 200;
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: 14px;
  box-shadow: var(--cf-shadow-lg);
  overflow: hidden;
}
.pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--cf-border-d);
  font-size: 12.5px;
  color: var(--cf-text-hi);
}
.pop-voltar {
  background: none; border: none; cursor: pointer; color: var(--cf-text-low);
  display: inline-flex; padding: 2px; border-radius: 6px; margin-left: -4px;
}
.pop-voltar svg { width: 15px; height: 15px; }
.pop-voltar:hover { color: var(--cf-green-ink); background: var(--cf-green-dim); }
.pop-limpar {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low); font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 3px 7px; border-radius: 7px;
}
.pop-limpar:hover { color: var(--st-danger); background: rgba(var(--cf-red-rgb), 0.12); }
.pop-lista { padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.pop-rolagem { max-height: 264px; overflow-y: auto; }
.pop-busca { padding: 8px 8px 2px; }
.pop-busca .input { width: 100%; }
.pop-vazio { padding: 14px 10px; font-size: 12px; color: var(--cf-text-low); text-align: center; }

/* linha da raiz: rótulo + valor atual + seta (navega para a lista) */
.pop-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.pop-linha:hover { background: rgba(var(--cf-ink), 0.05); }
.pl-rot { flex-shrink: 0; }
.pl-val {
  margin-left: auto;
  color: var(--cf-text-low);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-val.tem { color: var(--cf-green-ink); font-weight: 600; }
.pl-chevron { width: 13px; height: 13px; color: var(--cf-text-low); flex-shrink: 0; }

/* opção dentro da lista, com marca de escolhida */
.pop-opcao {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.pop-opcao:hover { background: rgba(var(--cf-ink), 0.05); color: var(--cf-text-hi); }
.pop-opcao.on { color: var(--cf-green-ink); background: rgba(var(--cf-green-rgb), 0.07); }
.pop-op-icon { display: inline-flex; width: 20px; justify-content: center; flex-shrink: 0; }
.pop-op-icon .avatar { width: 20px; height: 20px; font-size: 8.5px; }
.pop-op-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-check { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; }
/* bolinha da coluna na lista do filtro (cheia = coluna de conclusão) */
.col-ponto {
  width: 8px; height: 8px; border-radius: 3px;
  border: 1.5px solid var(--cf-text-low);
  display: inline-block;
}
.col-ponto.feita { background: var(--cf-green); border-color: var(--cf-green-ink); }

.tag-ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cf-text-low); display: inline-block;
}

.pop-secao { padding: 10px 14px 12px; border-top: 1px solid var(--cf-border-d); }
.pop-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  margin-bottom: 8px;
}
.pop-switches { display: flex; flex-direction: column; gap: 10px; }
.pop-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--cf-text-mid);
  cursor: pointer;
}

/* construtor de condições de campo personalizado (mesma ideia do builder das
   Automações): uma condição por bloco, ligadas por "e"/"ou" */
.cfil-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cfil-topo .pop-label { margin: 0; }
.seg-mini { gap: 2px; }
.seg-mini .seg-btn { padding: 3px 9px; font-size: 10.5px; letter-spacing: 0.04em; }

.cfil-cond {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px 10px;
  border-radius: var(--cf-radius);
  background: rgba(var(--cf-ink), 0.03);
  border: 1px solid var(--cf-border-d);
}
.cfil-linha { display: flex; align-items: center; gap: 6px; }
.cfil-linha .cfil-campo { flex: 1; min-width: 0; }
.cfil-cond .select-pop { padding: 6px 8px 6px 10px; font-size: 12px; border-radius: 8px; }
.cfil-cond .input-sm { width: 100%; }
.cfil-x { flex-shrink: 0; opacity: 0.55; }
.cfil-cond:hover .cfil-x { opacity: 1; }

/* a palavra que liga duas condições, para a leitura ficar óbvia */
.cfil-juncao {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-green-ink);
  padding: 6px 0 5px 4px;
}

.cfil-valores { display: flex; flex-wrap: wrap; gap: 5px; }

/* valor é PÍLULA (redonda) e operador é seletor: dá para diferenciar de relance */
.val-pill {
  padding: 4px 11px;
  border-radius: var(--cf-radius-full);
  border: 1px dashed var(--cf-border-d2);
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.val-pill:hover { color: var(--cf-text-hi); border-color: var(--cf-text-low); }
.val-pill.on {
  border-style: solid;
  color: var(--cf-on-green);
  background: var(--cf-green);
  border-color: var(--cf-green-ink);
}

.cfil-add {
  align-self: flex-start;
  margin-top: 8px;
  background: none;
  border: 1px dashed var(--cf-border-d2);
  border-radius: 8px;
  color: var(--cf-text-low);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  cursor: pointer;
}
.cfil-add:hover { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.5); background: var(--cf-green-dim); }

/* marca de escolhido nos menus de marcar (cliente, tag, responsável) */
.pm-check { width: 13px; height: 13px; margin-left: auto; flex-shrink: 0; color: var(--cf-green-ink); }
.popmenu-item .pm-hint + .pm-check { margin-left: 6px; }

/* segmentado da prioridade: escolher sem abrir outra lista */
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg-btn {
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--cf-border-d);
  background: rgba(var(--cf-ink), 0.03);
  color: var(--cf-text-low);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.seg-btn:hover { color: var(--cf-text-hi); border-color: var(--cf-border-d2); }
.seg-btn.on { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.5); background: var(--cf-green-dim); }
.seg-btn.seg-alta.on { color: var(--cf-amber-ink); border-color: rgba(var(--cf-amber-rgb), 0.5); background: rgba(var(--cf-amber-rgb), 0.12); }
.seg-btn.seg-urgente.on { color: var(--st-danger); border-color: rgba(var(--cf-red-rgb), 0.5); background: rgba(var(--cf-red-rgb), 0.12); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-text-low);
}

/* toggle switch */
.switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0;
  background: rgba(var(--cf-ink), 0.12);
  border-radius: 99px;
  transition: background 0.25s;
}
.switch .track::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cf-knob);
  /* a sombra é o que separa a bolinha BRANCA do trilho claro no modo claro —
     sem ela o interruptor desligado some no fundo */
  box-shadow: 0 1px 2px rgba(var(--cf-shade), 0.28);
  top: 3px; left: 3px;
  transition: transform 0.25s var(--cf-ease-bounce);
}
.switch input:checked + .track { background: var(--cf-green); }
.switch input:checked + .track::after { transform: translateX(16px); background: var(--cf-on-green); }

/* chips de filtro (toggle) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--cf-radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--cf-text-mid);
  background: rgba(var(--cf-ink), 0.05);
  border: 1.5px solid var(--cf-border-d2);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  user-select: none;
}
.chip:hover { border-color: rgba(var(--cf-green-rgb), 0.5); color: var(--cf-text-hi); }
.chip.on {
  background: var(--cf-green-dim);
  border-color: rgba(var(--cf-green-rgb), 0.5);
  color: var(--cf-green-ink);
}

/* ---------- badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--cf-radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-green { background: var(--cf-green-dim); color: var(--cf-green-ink); border: 1px solid rgba(var(--cf-green-rgb), 0.25); }
.badge-dim { background: rgba(var(--cf-ink), 0.06); color: var(--cf-text-mid); border: 1px solid var(--cf-border-d); }

.prio { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.prio::before { content: ''; width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.prio-baixa { color: var(--pr-baixa); } .prio-baixa::before { background: var(--pr-baixa); }
.prio-media { color: var(--cf-blue-ink); } .prio-media::before { background: var(--pr-media); }
.prio-alta { color: var(--cf-amber-ink); } .prio-alta::before { background: var(--pr-alta); }
.prio-urgente { color: var(--cf-red-ink); } .prio-urgente::before { background: var(--pr-urgente); }

.tag-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(var(--cf-ink), 0.07);
  border: 1px solid var(--cf-border-d);
  color: var(--cf-text-mid);
  white-space: nowrap;
}
.tag-chip.tag-cliente { background: rgba(var(--cf-blue-rgb), 0.13); border-color: rgba(var(--cf-blue-rgb), 0.3); color: var(--cf-blue-ink); }
.tag-chip.tag-auto { background: var(--cf-green-dim); border-color: rgba(var(--cf-green-rgb), 0.3); color: var(--cf-green-ink); }

.avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--cf-on-green);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.due-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cf-text-mid);
}
.due-chip svg { width: 12px; height: 12px; }
.due-chip.overdue { color: var(--st-danger); font-weight: 700; }
.due-chip.today { color: var(--st-warn); font-weight: 700; }

/* ---------- KANBAN ---------- */

.board-wrap {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 26px 24px;
}

.board {
  display: flex;
  gap: 16px;
  height: 100%;
  align-items: stretch;
}

.col {
  width: 296px;
  min-width: 296px;
  display: flex;
  flex-direction: column;
  background: var(--cf-surf-col);
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius-lg);
  max-height: 100%;
  transition: border-color 0.2s;
}
.col.drag-over { border-color: rgba(var(--cf-green-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--cf-green-rgb), 0.12); }

.col-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 16px 11px;
}
.col-head .col-name { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }
.col-head .col-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-text-mid);
  background: rgba(var(--cf-ink), 0.07);
  border-radius: 99px;
  padding: 1px 9px;
}
.col-head .done-flag { color: var(--cf-green-ink); display: inline-flex; }
.col-head .done-flag svg { width: 13px; height: 13px; }

.col-cards {
  flex: 1;
  overflow-y: auto;
  padding: 2px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 60px;
}

.kcard {
  background: var(--cf-dark3);
  border: 1.5px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  padding: 12px 14px;
  flex-shrink: 0; /* nunca comprimir para caber na coluna — a coluna rola */
  cursor: grab;
  position: relative;
  transition: border-color 0.12s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kcard:hover { border-color: var(--cf-green-glow); }
.kcard.dragging { opacity: 0.35; cursor: grabbing; }

.kcard .kcard-title { font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; padding-right: 20px; }
.kcard .kcard-datas {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--cf-text-low);
}
.kcard .kcard-datas-sep { opacity: 0.5; }
.kcard .kcard-id {
  font-family: var(--cf-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cf-text-low);
  margin-bottom: 3px;
}

/* 3 pontos do card: arquivar/excluir sem abrir o card */
.kcard .kcard-menu-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--cf-text-low);
  cursor: pointer;
  opacity: 0;
  transition: all 0.12s;
}
.kcard:hover .kcard-menu-btn, .kcard .kcard-menu-btn:focus-visible { opacity: 1; }
.kcard .kcard-menu-btn:hover { color: var(--cf-green-ink); background: rgba(var(--cf-green-rgb), 0.12); }
.kcard .kcard-menu-btn svg { width: 14px; height: 14px; }
.kcard .kcard-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.kcard .kcard-cliente { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kcard .kcard-cliente .kc-agente {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cf-text-low);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcard .kcard-foot { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.kcard .kcard-foot-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.drop-slot {
  height: 3px;
  border-radius: 99px;
  background: transparent;
  transition: all 0.15s;
  margin: -3px 4px;
}
.drop-slot.active {
  height: 42px;
  margin: 0 2px;
  background: var(--cf-green-dim);
  border: 1.5px dashed rgba(var(--cf-green-rgb), 0.5);
}

.add-card-btn {
  margin: 0 10px 12px;
  padding: 8px;
  border-radius: 10px;
  border: 1.5px dashed var(--cf-border-d2);
  background: none;
  color: var(--cf-text-low);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.add-card-btn:hover { border-color: rgba(var(--cf-green-rgb), 0.5); color: var(--cf-green-ink); background: var(--cf-green-dim); }

.col-add {
  min-width: 260px;
  width: 260px;
  border: 1.5px dashed var(--cf-border-d2);
  border-radius: var(--cf-radius-lg);
  background: none;
  color: var(--cf-text-low);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
  padding: 16px;
}
.col-add:hover { border-color: rgba(var(--cf-green-rgb), 0.5); color: var(--cf-green-ink); }

/* ---------- modal ---------- */

/* sem blur nem animação: abrir card é instantâneo */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--cf-shade), 0.72);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.modal {
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cf-green) 30%, rgba(var(--cf-green-rgb), .4) 60%, transparent);
}
.modal.modal-lg { max-width: 780px; }

.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 14px;
}
.modal-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; flex: 1; }
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low);
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 17px;
  transition: all 0.15s;
}
.modal-close:hover { color: var(--cf-text-hi); background: rgba(var(--cf-ink), 0.07); }

/* botão de ícone no cabeçalho do modal (hoje: mandar o card para a lateral).
   Classe própria, e não .modal-close, porque o openModal liga o PRIMEIRO
   .modal-close que encontra ao fechar, e ele seria este. */
.modal-icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low);
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.modal-icon-btn svg { width: 16px; height: 16px; }
.modal-icon-btn:hover { color: var(--cf-text-hi); background: rgba(var(--cf-ink), 0.07); }
.modal-icon-btn.on { color: var(--cf-green-ink); background: var(--cf-green-dim); }

.modal-body { padding: 6px 24px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px 20px;
  border-top: 1px solid var(--cf-border-d);
}

/* ---------- painel lateral (o card ao lado do quadro) ---------- */

/* O quadro ENCOLHE em vez de ficar coberto: com o painel por cima, a última
   coluna ficaria escondida e arrastar card para ela seria impossível. */
:root { --cf-drawer-w: 520px; }

body.com-drawer .app { padding-right: var(--cf-drawer-w); }
body.com-drawer .toasts { right: calc(22px + var(--cf-drawer-w)); }
body.redimensionando { cursor: col-resize; user-select: none; }

.card-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--cf-drawer-w);
  /* abaixo do .modal-overlay (60): abrir um modal por cima do painel tem que
     escurecer o painel também, senão ele parece clicável e não é */
  z-index: 55;
  display: flex;
  background: var(--cf-dark2);
  border-left: 1px solid var(--cf-border-d2);
  box-shadow: -20px 0 44px rgba(var(--cf-shade), 0.45);
}

.drawer-grip {
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 1;
}
.drawer-grip:hover { background: rgba(var(--cf-green-rgb), 0.35); }

.card-drawer .modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.card-drawer .modal.modal-xl { height: 100%; }
.card-drawer .modal-head { padding: 16px 16px 12px; }
.card-drawer .modal-body { padding: 6px 16px 14px; }
.card-drawer .modal-foot { padding: 12px 16px 16px; flex-wrap: wrap; }

/* estreito: as duas colunas do card não cabem lado a lado, então a lateral do
   card desce e rola sozinha, sem roubar a altura do que se lê (descrição/chat) */
.card-drawer.estreito .card-layout { display: flex; flex-direction: column; gap: 14px; }
.card-drawer.estreito .card-main { flex: 1; min-height: 0; }
.card-drawer.estreito .card-side {
  flex: 0 0 auto;
  align-self: stretch;
  /* teto baixo de propósito: empilhada, a lateral rouba altura justo da conversa,
     que é o que se lê no painel. O resto dos campos rola dentro dela. */
  max-height: 32%;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* atividade no modal */
.activity-list { display: flex; flex-direction: column; gap: 0; }
.activity-item {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--cf-ink), 0.05);
  font-size: 12.5px;
}
.activity-item:last-child { border-bottom: none; }
.activity-item .act-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  background: rgba(var(--cf-ink), 0.2);
}
.activity-item.act-auto .act-dot { background: var(--cf-green); box-shadow: 0 0 6px rgba(var(--cf-green-rgb), 0.5); }
.activity-item .act-body { flex: 1; color: var(--cf-text-mid); }
.activity-item .act-body b { color: var(--cf-text-hi); font-weight: 700; }
.activity-item .act-time { color: var(--cf-text-low); font-size: 11px; white-space: nowrap; }
/* todo item da trilha abre o detalhe: o hover é o que anuncia isso, senão
   ninguém descobre que dá para clicar */
.activity-item { cursor: pointer; border-radius: 8px; padding-left: 8px; padding-right: 8px;
  margin-left: -8px; margin-right: -8px; transition: background 0.12s; }
.activity-item:hover { background: rgba(var(--cf-ink), 0.045); }
.activity-item .act-quem { color: var(--cf-text-hi); font-weight: 700; }
.activity-item .act-lupa { color: var(--cf-text-low); font-size: 11px; opacity: 0; transition: opacity .12s; }
.activity-item:hover .act-lupa { opacity: 1; }

/* ---- detalhe da atividade: SEGUNDA camada -------------------------------
   Overlay próprio, e não openModal, porque openModal começa fechando o
   overlay que estiver aberto: clicar numa atividade fecharia o card e jogaria
   fora a edição não salva. Z-index acima do modal (60) e do painel (55). */
.rev-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--cf-shade), 0.78);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.rev-modal {
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  width: 100%;
  max-width: 860px;
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.rev-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cf-green) 30%, rgba(var(--cf-green-rgb), .4) 60%, transparent);
}
.rev-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 12px; }
.rev-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.rev-head .rev-sub { font-size: 11.5px; color: var(--cf-text-low); margin-top: 3px; }
.rev-body { padding: 4px 24px 20px; overflow-y: auto; }
.rev-foot {
  padding: 12px 24px 18px;
  display: flex; gap: 10px; align-items: center;
  border-top: 1px solid var(--cf-border-d);
}
.rev-foot .rev-nota { flex: 1; font-size: 11.5px; color: var(--cf-text-low); }

.rev-quem {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 9px; border-radius: var(--cf-radius-full);
  background: rgba(var(--cf-ink), 0.07); color: var(--cf-text-hi);
}
.rev-quem.quem-radar { background: rgba(var(--cf-blue-rgb), 0.18); color: var(--cf-blue-ink); }
.rev-quem.quem-claude { background: var(--cf-green-dim); color: var(--cf-green-ink); }
.rev-quem.quem-automacao { background: rgba(var(--cf-amber-rgb), 0.18); color: var(--cf-amber-ink); }

.rev-campo { margin: 16px 0 0; }
.rev-campo-nome {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cf-text-low); margin-bottom: 7px;
}
/* valor curto: antes e depois lado a lado, que é como se lê "trocou X por Y" */
.rev-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rev-lado {
  border: 1px solid var(--cf-border-d);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12.5px;
  line-height: 1.5;
  word-break: break-word;
}
.rev-lado .rev-tag {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 4px; color: var(--cf-text-low);
}
.rev-lado.antes { background: rgba(var(--cf-red-rgb), 0.06); border-color: rgba(var(--cf-red-rgb), 0.22); }
.rev-lado.depois { background: rgba(var(--cf-okgreen-rgb), 0.08); border-color: rgba(var(--cf-okgreen-rgb), 0.3); }
.rev-vazio { color: var(--cf-text-low); font-style: italic; }

/* texto longo (a descrição): diff linha a linha, que é o caso que motivou a tela */
.rev-diff {
  border: 1px solid var(--cf-border-d);
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--cf-mono);
  font-size: 11.5px;
  line-height: 1.65;
  max-height: 460px;
  overflow-y: auto;
}
.rev-diff .dl { display: flex; gap: 8px; padding: 1px 10px; white-space: pre-wrap; word-break: break-word; }
.rev-diff .dl .sinal { flex-shrink: 0; width: 10px; opacity: .55; user-select: none; }
.rev-diff .dl.igual { color: var(--cf-text-low); }
.rev-diff .dl.add { background: rgba(var(--cf-okgreen-rgb), 0.14); color: var(--cf-diff-add-ink); }
.rev-diff .dl.del { background: rgba(var(--cf-red-rgb), 0.12); color: var(--cf-red-ink); }
.rev-diff .pulo {
  padding: 3px 10px; font-size: 10.5px; letter-spacing: .05em;
  color: var(--cf-text-low); background: rgba(var(--cf-ink), 0.03);
  border-top: 1px solid var(--cf-border-d); border-bottom: 1px solid var(--cf-border-d);
}
.rev-diff-vazio { padding: 10px; color: var(--cf-text-low); font-size: 12px; }

.rev-bruto { margin-top: 18px; }
.rev-bruto summary { cursor: pointer; font-size: 11.5px; color: var(--cf-text-low); }
.rev-bruto pre {
  margin-top: 8px; padding: 10px 12px;
  background: var(--cf-dark); border: 1px solid var(--cf-border-d); border-radius: 10px;
  font-family: var(--cf-mono); font-size: 11px; color: var(--cf-text-mid);
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto;
}

.section-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--cf-border-d); }

/* Cabeçalho de seção do card: Descrição, Comentários e Atividade usam o MESMO
   desenho (rótulo, fio até a borda, ações à direita). O `.section-label` acima
   não serve aqui porque o fio dele é um ::after, então cairia depois das ações;
   aqui o fio é um elemento no meio. */
.section-head { display: flex; align-items: center; gap: 8px; }
.section-head .section-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-text-low);
}
.section-head .section-rule { flex: 1; height: 1px; background: var(--cf-border-d); }
.section-head .desc-hint { font-size: 11px; color: var(--cf-text-low); font-weight: 500; }

/* ---------- toast ---------- */

.toasts {
  position: fixed;
  bottom: 86px;   /* acima do botão do assistente, que ocupa o canto (48px + 22px) */
  right: 22px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-left: 3px solid var(--cf-green);
  border-radius: var(--cf-radius);
  box-shadow: var(--cf-shadow-lg);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  max-width: 380px;
  animation: toast-in 0.35s var(--cf-ease-bounce) both;
}
.toast.toast-auto { border-left-color: var(--dv-5); }
.toast.toast-err { border-left-color: var(--st-danger); }
.toast .toast-sub { font-size: 11.5px; color: var(--cf-text-mid); font-weight: 500; margin-top: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.toast.leaving { transition: all 0.3s; opacity: 0; transform: translateY(8px); }

/* ---------- AUTOMAÇÕES ---------- */

.page-scroll { flex: 1; overflow-y: auto; padding: 24px 26px 40px; }
.page-inner { max-width: 1060px; }

.rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px; margin-top: 18px; }

.rule-card {
  background: var(--cf-dark3);
  border: 1.5px solid var(--cf-border-d);
  border-radius: var(--cf-radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color 0.12s;
}
.rule-card:hover { border-color: var(--cf-green-glow); }
.rule-card.off { opacity: 0.55; }
.rule-card .rule-top { display: flex; align-items: flex-start; gap: 12px; }
.rule-card .rule-name { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; flex: 1; line-height: 1.3; }

.rule-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.rule-flow .flow-arrow { color: var(--cf-text-low); font-size: 13px; }
.rule-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(var(--cf-ink), 0.05);
  border: 1px solid var(--cf-border-d);
  color: var(--cf-text-mid);
}
.rule-pill.pill-trigger { background: var(--cf-green-dim); border-color: rgba(var(--cf-green-rgb), 0.3); color: var(--cf-green-ink); }
.rule-pill.pill-cond { background: rgba(var(--cf-blue-rgb), 0.12); border-color: rgba(var(--cf-blue-rgb), 0.3); color: var(--cf-blue-ink); }

.rule-meta { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--cf-text-low); }
.rule-meta b { color: var(--cf-text-mid); }
.rule-actions-row { display: flex; gap: 8px; margin-left: auto; }

/* builder de regra */
.builder-block {
  background: rgba(var(--cf-ink), 0.03);
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.builder-row .select, .builder-row .input { flex: 1; min-width: 130px; }
.builder-row .remove-row {
  background: none; border: none;
  color: var(--cf-text-low); cursor: pointer;
  font-size: 15px; padding: 4px 8px; border-radius: 6px;
}
.builder-row .remove-row:hover { color: var(--st-danger); background: rgba(var(--cf-red-rgb), 0.1); }

.rule-preview {
  background: var(--cf-green-dim);
  border: 1px solid rgba(var(--cf-green-rgb), 0.25);
  border-radius: var(--cf-radius);
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--cf-text-hi);
  line-height: 1.6;
}
.rule-preview b { color: var(--cf-green-ink); }

/* ---------- DASHBOARD ---------- */

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 16px 26px;
  border-bottom: 1px solid var(--cf-border-d);
  background: var(--cf-surf-barra);
}
.filters-bar .field { min-width: 130px; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kpi {
  background: var(--cf-dark3);
  border: 1.5px solid var(--cf-border-d);
  border-radius: var(--cf-radius-lg);
  padding: 16px 18px 14px;
  position: relative;
}
.kpi .kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  margin-bottom: 7px;
  white-space: nowrap;
}
.kpi .kpi-value {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.kpi .kpi-sub { font-size: 11px; color: var(--cf-text-mid); margin-top: 6px; font-weight: 500; }
.kpi.kpi-hero .kpi-value { color: var(--cf-green-ink); text-shadow: 0 0 28px rgba(var(--cf-green-rgb), .25); }
.kpi.kpi-danger .kpi-value { color: var(--st-danger); }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.chart-card {
  background: var(--cf-dark3);
  border: 1.5px solid var(--cf-border-d);
  border-radius: var(--cf-radius-lg);
  padding: 18px 20px 14px;
  min-width: 0;
}
.chart-card h3 { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 3px; }
.chart-card .chart-sub { font-size: 11.5px; color: var(--cf-text-low); margin-bottom: 12px; }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
@media (max-width: 1180px) { .span-8, .span-6, .span-4 { grid-column: span 12; } }

.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.legend .lg-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--cf-text-mid); }
.legend .lg-swatch { width: 10px; height: 10px; border-radius: 3px; }

.chart-svg-wrap { position: relative; width: 100%; }
.chart-svg-wrap svg { display: block; width: 100%; height: auto; }

.chart-tooltip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: 10px;
  box-shadow: var(--cf-shadow-lg);
  padding: 9px 13px;
  font-size: 12px;
  min-width: 120px;
  opacity: 0;
  transition: opacity 0.12s;
}
.chart-tooltip.show { opacity: 1; }
.chart-tooltip .tt-title { font-weight: 700; margin-bottom: 4px; font-size: 11.5px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 7px; color: var(--cf-text-mid); padding: 1px 0; }
.chart-tooltip .tt-row .lg-swatch { width: 8px; height: 8px; border-radius: 2px; }
.chart-tooltip .tt-row b { color: var(--cf-text-hi); margin-left: auto; padding-left: 12px; }

/* tabela */
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  padding: 8px 12px;
  border-bottom: 1px solid var(--cf-border-d2);
  white-space: nowrap;
}
.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(var(--cf-ink), 0.05);
  color: var(--cf-text-mid);
  vertical-align: middle;
}
.data-table tr:hover td { background: rgba(var(--cf-ink), 0.025); }
.data-table td.td-title { color: var(--cf-text-hi); font-weight: 600; max-width: 340px; }
.data-table .row-link { cursor: pointer; }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--cf-text-low);
}
.empty-state .big { font-size: 15px; font-weight: 700; color: var(--cf-text-mid); margin-bottom: 6px; }

/* ---------- DOCS ---------- */

.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 34px; max-width: 1120px; }
.docs-toc { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.docs-toc a {
  color: var(--cf-text-mid);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.15s;
}
.docs-toc a:hover { color: var(--cf-green-ink); background: var(--cf-green-dim); }
.docs-toc .toc-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-text-low); padding: 14px 10px 4px; }

.docs-content { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-bottom: 60px; }
.docs-content h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 26px;
  scroll-margin-top: 20px;
}
.docs-content h2:first-child { margin-top: 0; }
.docs-content p { color: var(--cf-text-mid); font-size: 13.5px; max-width: 72ch; }
.docs-content p code, .docs-content td code, .docs-content li code {
  font-family: var(--cf-mono);
  font-size: 12px;
  background: rgba(var(--cf-ink), 0.07);
  border: 1px solid var(--cf-border-d);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--cf-green-ink);
}

.endpoint {
  background: var(--cf-dark3);
  border: 1.5px solid var(--cf-border-d);
  border-radius: var(--cf-radius-lg);
  overflow: hidden;
}
.endpoint-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.endpoint-head:hover { background: rgba(var(--cf-ink), 0.025); }
.endpoint-head .path { font-family: var(--cf-mono); font-size: 13px; font-weight: 600; color: var(--cf-text-hi); }
.endpoint-head .summary { font-size: 12px; color: var(--cf-text-low); margin-left: auto; text-align: right; }
.endpoint-body { display: none; padding: 4px 20px 18px; border-top: 1px solid var(--cf-border-d); }
.endpoint.open .endpoint-body { display: block; }

.method {
  font-family: var(--cf-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.method-get { background: rgba(var(--cf-blue-rgb), 0.16); color: var(--cf-blue-ink); border: 1px solid rgba(var(--cf-blue-rgb), 0.35); }
.method-post { background: var(--cf-green-dim); color: var(--cf-green-ink); border: 1px solid rgba(var(--cf-green-rgb), 0.35); }
.method-patch { background: rgba(var(--cf-amber-rgb), 0.16); color: var(--cf-amber-ink); border: 1px solid rgba(var(--cf-amber-rgb), 0.4); }
.method-delete { background: rgba(var(--cf-red-rgb), 0.14); color: var(--cf-red-ink); border: 1px solid rgba(var(--cf-red-rgb), 0.35); }

pre.code {
  font-family: var(--cf-mono);
  font-size: 12px;
  line-height: 1.65;
  background: var(--cf-code-bg);
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--cf-code-fg);
  position: relative;
  margin: 10px 0;
}
pre.code .cm { color: rgba(var(--cf-ink), 0.42); }
pre.code .kw { color: var(--cf-green-ink); font-weight: 600; }
pre.code .st { color: var(--cf-blue-ink); }

.copy-btn {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(var(--cf-ink), 0.06);
  border: 1px solid var(--cf-border-d2);
  color: var(--cf-text-mid);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--cf-font);
  transition: all 0.15s;
}
.copy-btn:hover { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.4); }

.doc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 10px 0; }
.doc-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  padding: 7px 12px;
  border-bottom: 1px solid var(--cf-border-d2);
}
.doc-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(var(--cf-ink), 0.05);
  color: var(--cf-text-mid);
  vertical-align: top;
}
.doc-table td:first-child { white-space: nowrap; }

.callout {
  border: 1px solid rgba(var(--cf-green-rgb), 0.25);
  background: var(--cf-green-dim);
  border-radius: var(--cf-radius);
  padding: 13px 17px;
  font-size: 13px;
  color: var(--cf-text-hi);
  max-width: 76ch;
}
.callout b { color: var(--cf-green-ink); }

/* ---------- tag picker ---------- */

.tag-picker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(var(--cf-ink), 0.05);
  border: 1.5px solid var(--cf-border-d2);
  border-radius: 10px;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tag-picker:focus-within {
  border-color: var(--cf-green-ink);
  box-shadow: 0 0 0 3px rgba(var(--cf-green-rgb), 0.15);
}
.tp-chips { display: contents; }
/* a tag é um rótulo, então tem forma de rótulo (pílula) e um ponto de cor à
   esquerda, igual ao chip que aparece na face do card */
.tp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 9px;
  border-radius: var(--cf-radius-full);
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(var(--cf-ink), 0.07);
  border: 1px solid var(--cf-border-d2);
  color: var(--cf-text-hi);
  white-space: nowrap;
}
.tp-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cf-text-low);
  flex-shrink: 0;
}
.tp-chip.tag-cliente::before { background: var(--cf-blue-ink); }
.tp-chip.tag-cliente { background: rgba(var(--cf-blue-rgb), 0.14); border-color: rgba(var(--cf-blue-rgb), 0.35); color: var(--cf-blue-ink); }
.tp-chip .tp-x {
  background: none;
  border: none;
  color: var(--cf-text-low);
  font-size: 10px;
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 4px;
  line-height: 1;
}
.tp-chip .tp-x:hover { color: var(--st-danger); background: rgba(var(--cf-red-rgb), 0.15); }
.tp-input {
  flex: 1;
  min-width: 110px;
  background: none;
  border: none;
  outline: none;
  color: var(--cf-text-hi);
  font: inherit;
  font-size: 13px;
  padding: 3px 2px;
}
.tp-input::placeholder { color: var(--cf-text-low); }

.tag-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: 12px;
  box-shadow: var(--cf-shadow-lg);
  padding: 6px;
  z-index: 80;
  display: none;
  max-height: 220px;
  overflow-y: auto;
}
.tag-picker.open .tag-menu { display: block; }
.tag-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cf-text-mid);
  cursor: pointer;
}
.tag-menu-item::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cf-text-low);
  flex-shrink: 0;
}
.tag-menu-item:hover { background: var(--cf-green-dim); color: var(--cf-green-ink); }
.tag-menu-item:hover::before { background: var(--cf-green); }
.tag-menu-new { color: var(--cf-green-ink); }
.tag-menu-new::before { content: '+'; background: none; width: auto; height: auto; font-size: 13px; line-height: 1; }
.tag-menu-empty { padding: 8px 11px; font-size: 12px; color: var(--cf-text-low); }

/* ---------- calendário da casa (troca o input[type=date]) ---------- */

.datepop-box { display: flex; }
.date-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--cf-font);
  font-size: 13px;
  color: var(--cf-text-hi);
  background: rgba(var(--cf-ink), 0.05);
  border: 1.5px solid var(--cf-border-d2);
  border-radius: 10px;
  padding: 8px 10px 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s;
}
.date-pick:hover { border-color: rgba(var(--cf-green-rgb), 0.5); }
.date-pick-sm { padding: 6px 8px 6px 9px; font-size: 12px; border-radius: 8px; }
.dp-icon { width: 14px; height: 14px; color: var(--cf-text-low); flex-shrink: 0; }
.dp-rot { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-rot.vazio { color: var(--cf-text-low); }
.dp-x { color: var(--cf-text-low); font-size: 10px; padding: 3px; border-radius: 50%; flex-shrink: 0; }
.dp-x:hover { color: var(--st-danger); background: rgba(var(--cf-red-rgb), 0.15); }

.datepop {
  position: fixed;
  z-index: 240;
  width: 254px;
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: 14px;
  box-shadow: var(--cf-shadow-lg);
  padding: 10px;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
.dp-head b { font-size: 12.5px; text-transform: capitalize; }
.dp-nav {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low); font-size: 17px; line-height: 1;
  padding: 2px 8px; border-radius: 7px;
}
.dp-nav:hover { color: var(--cf-green-ink); background: var(--cf-green-dim); }
.dp-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-sem span {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cf-text-low);
  padding: 4px 0;
}
.dp-dia {
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 0;
  cursor: pointer;
}
.dp-dia:hover { background: rgba(var(--cf-ink), 0.07); color: var(--cf-text-hi); }
.dp-dia.hoje { color: var(--cf-green-ink); }
.dp-dia.on { background: var(--cf-green); color: var(--cf-on-green); font-weight: 800; }
.dp-pe { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cf-border-d); }
.dp-atalho {
  flex: 1;
  background: none;
  border: 1px solid var(--cf-border-d);
  border-radius: 8px;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 0;
  cursor: pointer;
}
.dp-atalho:hover { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.5); background: var(--cf-green-dim); }

/* janela de datas no painel de filtros */
.pop-datas { display: flex; align-items: center; gap: 6px; }
.pop-datas > div { flex: 1; min-width: 0; }
.pop-ate { font-size: 11px; color: var(--cf-text-low); flex-shrink: 0; }

/* ---------- sugestões de um input (troca o <datalist>) ---------- */

.sug-wrap { position: relative; }
.sug-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: 12px;
  box-shadow: var(--cf-shadow-lg);
  padding: 6px;
  z-index: 90;
  display: none;
  max-height: 220px;
  overflow-y: auto;
}
.sug-menu.open { display: block; }
.sug-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.sug-item:hover { background: var(--cf-green-dim); color: var(--cf-green-ink); }
.sug-item .avatar { width: 20px; height: 20px; font-size: 8.5px; }
/* espaço do ícone nas listas onde só alguns itens têm imagem */
.pm-vazio { display: inline-block; width: 20px; }

/* ---------- menu flutuante dos 3 pontos ---------- */

.popmenu {
  position: fixed;
  z-index: 200;
  min-width: 168px;
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: 12px;
  box-shadow: var(--cf-shadow-lg);
  padding: 6px;
}
.popmenu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.popmenu-item:hover { background: var(--cf-green-dim); color: var(--cf-green-ink); }
.popmenu-item.danger:hover { background: rgba(var(--cf-red-rgb), 0.14); color: var(--st-danger); }
.popmenu-item .pm-icon { display: inline-flex; opacity: 0.9; flex-shrink: 0; }
.popmenu-item > svg, .popmenu-item .pm-icon > svg { width: 14px; height: 14px; }
.popmenu-item .pm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popmenu-item .pm-hint {
  margin-left: auto;
  padding-left: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cf-text-low);
  flex-shrink: 0;
}
.popmenu-item.ativo { color: var(--cf-green-ink); background: rgba(var(--cf-green-rgb), 0.07); }
.popmenu-item .avatar { width: 20px; height: 20px; font-size: 8.5px; }

/* menu com busca (seletor de cliente: 66 opções não se navega sem filtro) */
.popmenu-busca { padding: 0; display: flex; flex-direction: column; max-height: min(384px, 70vh); }
.popmenu-head { padding: 8px 8px 6px; border-bottom: 1px solid var(--cf-border-d); }
.popmenu-head .input { width: 100%; }
.popmenu-busca .popmenu-lista { overflow-y: auto; padding: 6px; }
.popmenu-vazio { padding: 12px 10px; font-size: 12px; color: var(--cf-text-low); text-align: center; }

/* ---------- modal de card XL ---------- */

/* Altura estável (não pula ao trocar de aba) e com respiro: numa tela FHD o
   modal ocupava 1016 de 1080px, praticamente a tela inteira. O teto de 940px
   dá margem em volta sem tirar área útil, e o `calc` continua mandando em
   notebook, onde a tela é o limite. */
.modal.modal-xl {
  max-width: 1060px;
  height: min(940px, calc(100vh - 64px));
  max-height: calc(100vh - 64px);
}
/* O modal do card é um painel de altura fixa cujas seções PREENCHEM o espaço,
   em vez de um documento rolante. Antes o `.modal-body` inteiro rolava e as
   seções tinham altura de gaveta (comentários travados em 320px, descrição em
   190px), então numa tela grande dava para rolar com o painel meio vazio.
   Agora: o body não rola; quem rola é só o painel da aba ativa (e a lateral),
   e apenas quando o conteúdo realmente não cabe. */
.modal.modal-xl .modal-body { flex: 1; min-height: 0; overflow: hidden; }

.card-layout {
  display: grid;
  grid-template-columns: 1fr 292px;
  gap: 26px;
  align-items: stretch;   /* a coluna principal ocupa a altura toda do painel */
  height: 100%;
  min-height: 0;
}
.card-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; }

/* título, cliente e abas ficam parados; só o conteúdo da aba se move */
.card-main > .aba-painel:not(.hidden) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.card-main > .aba-painel:not(.hidden)[data-painel="ativ"] { overflow-y: auto; }
.card-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(var(--cf-ink), 0.025);
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  padding: 16px;
  /* a lateral tem a altura do próprio conteúdo (não estica à toa) e rola
     sozinha quando os campos personalizados passam da altura do painel */
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.card-side .side-meta { font-size: 11.5px; color: var(--cf-text-low); display: flex; flex-direction: column; gap: 4px; }
.card-side .side-meta b { color: var(--cf-text-mid); font-weight: 600; }

/* Novo card, modo Inteligente (21/09/2026): a tela inteira é a frase. A lateral
   some porque coluna, prioridade e campos são justamente o que o normalizador
   preenche; o que fica é o pedido e o pill de cliente, que é opcional.
   O alternador mora no CABEÇALHO do modal e não no corpo: no corpo ele empurrava
   o formulário para baixo e estragava a tela Manual, que tem que continuar sendo
   exatamente a de antes. */
.modal-head h2.h2-modo { flex: 0 0 auto; }
.modal-head .modo-novo { flex: 1; }
.card-layout.so-texto { grid-template-columns: 1fr; }
.card-layout.so-texto .desc-area { min-height: 180px; }
.foot-switch { font-size: 12px; gap: 8px; }

/* espera do modo Inteligente: chip no canto inferior ESQUERDO (a direita é dos
   toasts e do assistente), para o modal fechar na hora e dar para criar vários
   pedidos seguidos. Pronto = clique abre o card. */
.prep-fila {
  position: fixed;
  left: 252px; bottom: 22px;
  z-index: 100;
  display: flex; flex-direction: column-reverse; gap: 8px;
}
.prep-chip {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 240px; max-width: 340px;
  padding: 11px 14px 12px;
  border-radius: var(--cf-radius);
  border: 1px solid var(--cf-border-d2);
  background: var(--cf-dark2);
  box-shadow: var(--cf-shadow-lg);
  animation: toast-in 0.2s ease;
}
.prep-chip-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prep-chip-txt b { font-size: 12.5px; font-weight: 700; color: var(--cf-text-hi); }
.prep-chip-txt span {
  font-size: 11.5px; color: var(--cf-text-low);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prep-chip .radar-barra { width: 100%; }
.prep-chip.pronto { border-color: var(--cf-green); cursor: pointer; }
.prep-chip.lento { border-color: var(--cf-border-d2); cursor: pointer; }

/* Card novo no modo Inteligente é FORMULÁRIO, não painel: o tamanho é o do que
   se digita. (Renan, 21/09/2026, com o "New issue" do Linear como referência:
   "não precisa de tela cheia e uma caixa de texto gigante pra eu digitar".) A
   caixa nasce com 3 linhas e cresce com o texto até 40% da tela; o cliente e o
   agente descem para uma linha de chips embaixo, como no Linear. A classe é
   trocada pelo próprio seletor Inteligente/Manual: o Manual continua sendo o
   formulário inteiro, com campos e lateral. */
.modal.modal-novo { max-width: 600px; height: auto; }
.modal.modal-novo .modal-head { padding: 16px 20px 4px; }
.modal.modal-novo .modal-head h2 { font-size: 13px; font-weight: 700; color: var(--cf-text-mid); }
.modal.modal-novo .modal-body { padding: 4px 20px 8px; gap: 12px; overflow: visible; }
.modal.modal-novo .card-layout { height: auto; }
.modal.modal-novo .card-main { gap: 12px; }
.modal.modal-novo .card-main > .aba-painel:not(.hidden) { flex: none; order: 2; }
.modal.modal-novo .card-cliente-row { order: 3; }
.modal.modal-novo .desc-block { flex: none; gap: 0; }
.modal.modal-novo .desc-block .section-head { display: none; }
.modal.modal-novo .desc-area { min-height: 0; }
.modal.modal-novo .desc-area textarea.input {
  min-height: 72px;
  max-height: 40vh;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-family: var(--cf-font);
  font-size: 14.5px;
  line-height: 1.55;
  resize: none;
}
.modal.modal-novo .desc-area textarea.input:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.modal.modal-novo .modal-foot { border-top: none; padding: 4px 20px 16px; }

.title-input {
  font-family: var(--cf-font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cf-text-hi);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 6px 10px;
  margin-left: -10px;
  outline: none;
  width: calc(100% + 10px);
  transition: border-color 0.2s, background 0.2s;
}
.title-input:hover { background: rgba(var(--cf-ink), 0.03); }
.title-input:focus { border-color: var(--cf-green-ink); background: rgba(var(--cf-ink), 0.04); }

/* cliente + agente logo abaixo do título, em pílula com foto (28/07/2026) */
.card-cliente-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.pill-grupo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pill-rot {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-text-low);
}
.pill-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--cf-border-d);
  border-radius: 999px;
  background: rgba(var(--cf-ink), 0.03);
  color: var(--cf-text-hi);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.pill-pick:hover:not(:disabled) { border-color: var(--cf-green-ink); background: var(--cf-green-dim); }
.pill-pick:disabled { cursor: default; opacity: 0.55; }
.pill-pick.vazio { color: var(--cf-text-low); font-weight: 600; }
.pill-pick .pill-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-pick .pill-chevron { width: 13px; height: 13px; opacity: 0.55; flex-shrink: 0; }
.pill-pick .avatar { width: 20px; height: 20px; font-size: 8.5px; }
/* espaço do avatar quando não há nada escolhido: sem isso a pílula "pula" de
   largura ao escolher o cliente */
.pill-sem-foto {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px dashed var(--cf-border-d2);
  flex-shrink: 0;
}
/* Dois modos, porque são duas fontes: a foto de perfil do CRM é recorte quadrado
   (preencher a moldura redonda importa mais), a logo do acervo é contida (logo
   cortada no meio descaracteriza a marca). */
.avatar.avatar-foto { background: rgba(var(--cf-ink), 0.07); overflow: hidden; }
.avatar.avatar-foto img { width: 100%; height: 100%; display: block; }
.avatar.foto-cover img { object-fit: cover; }
.avatar.foto-contain img { object-fit: contain; }

/* abas do card: uma seção por vez */
.card-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  /* com 8 abas a fila passa da largura do modal e invadia a coluna da direita:
     quebra em duas linhas em vez de esconder aba (1.26) */
  flex-wrap: wrap;
  border-bottom: 1px solid var(--cf-border-d);
  margin: 2px 0 0;
}
.card-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 13px;
  border: none;
  background: none;
  color: var(--cf-text-low);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.card-tab svg { width: 14px; height: 14px; }
.card-tab:hover { color: var(--cf-text-mid); }
.card-tab.on { color: var(--cf-text-hi); border-bottom-color: var(--cf-green-ink); }
.card-tab .tab-num {
  font-size: 10px;
  font-weight: 800;
  background: rgba(var(--cf-ink), 0.09);
  color: var(--cf-text-mid);
  border-radius: 999px;
  padding: 1px 6px;
}
.card-tab.on .tab-num { background: var(--cf-green-dim); color: var(--cf-green-ink); }
.aba-painel { min-width: 0; }

/* a caixa da descrição ocupa a altura da aba e rola por dentro: nada de um
   retângulo de 190px com espaço morto embaixo numa tela de 1080p */
.desc-block { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.desc-area { flex: 1; min-height: 0; display: flex; }
.desc-area > .md-preview, .desc-area > textarea.input { flex: 1; overflow-y: auto; }
.desc-tabs { display: inline-flex; gap: 2px; background: rgba(var(--cf-ink), 0.05); border: 1px solid var(--cf-border-d); border-radius: 9px; padding: 3px; }
.desc-tab {
  border: none;
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
}
.desc-tab.on { background: var(--cf-green); color: var(--cf-on-green); }
.desc-expand-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--cf-border-d2);
  color: var(--cf-text-mid);
  border-radius: 8px;
  padding: 4px 11px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.desc-expand-btn:hover { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.45); }

.desc-area textarea.input {
  width: 100%;
  min-height: 190px;
  font-family: var(--cf-mono);
  font-size: 12.5px;
  line-height: 1.7;
}
.md-preview {
  background: rgba(var(--cf-ink), 0.03);
  border: 1.5px solid var(--cf-border-d);
  border-radius: 10px;
  padding: 14px 18px;
  min-height: 190px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--cf-text-mid);
  overflow-y: auto;
}
.md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6 {
  color: var(--cf-text-hi);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 14px 0 6px;
}
.md-preview h3:first-child, .md-preview h4:first-child, .md-preview p:first-child { margin-top: 0; }
.md-preview h3 { font-size: 16px; } .md-preview h4 { font-size: 14.5px; }
.md-preview h5 { font-size: 13.5px; } .md-preview h6 { font-size: 12.5px; }
.md-preview p { margin: 7px 0; }
.md-preview strong { color: var(--cf-text-hi); }
.md-preview a { color: var(--cf-green-ink); }
.md-preview code {
  font-family: var(--cf-mono);
  font-size: 11.5px;
  background: rgba(var(--cf-ink), 0.07);
  border: 1px solid var(--cf-border-d);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--cf-green-ink);
}
.md-preview pre {
  background: var(--cf-code-bg);
  border: 1px solid var(--cf-border-d);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 10px 0;
}
.md-preview pre code { background: none; border: none; padding: 0; color: var(--cf-code-fg); }
.md-preview ul, .md-preview ol { margin: 7px 0; padding-left: 22px; }
.md-preview li { margin: 3px 0; }
.md-preview blockquote {
  border-left: 3px solid var(--cf-green);
  padding: 2px 0 2px 14px;
  margin: 10px 0;
  color: var(--cf-text-mid);
  font-style: italic;
}
.md-preview hr { border: none; border-top: 1px solid var(--cf-border-d2); margin: 14px 0; }

/* ---- Zen: descrição e comentários em tela cheia --------------------------
   Antes o "Expandir" só escondia a lateral dentro do card, e a caixa continuava
   presa à largura do modal. Agora ela vira uma camada por cima, com fundo
   escuro, na mesma linguagem do detalhe da Atividade (.rev-overlay): z-index
   abaixo do rev (120) e acima do modal (60) e do painel (55). */
.zen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--cf-shade), 0.78);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.zen-modal {
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  width: 100%;
  max-width: 1080px;
  height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.zen-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cf-green) 30%, rgba(var(--cf-green-rgb), .4) 60%, transparent);
}
.zen-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px 10px; }
.zen-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.zen-head .zen-sub {
  font-size: 11.5px; color: var(--cf-text-low); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* o corpo é flex: a caixa que veio do card já é `flex:1; min-height:0`, então
   ela preenche a altura toda sem cálculo nenhum */
.zen-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 24px 20px;
}
.zen-body > .desc-block, .zen-body > .chat-box { flex: 1; min-height: 0; }
/* o cabeçalho "Descrição" do card seria eco do título da camada */
.zen-body .section-head { display: none; }
/* linha mais confortável: quem expandiu quer ler, não espiar */
.zen-body .md-preview { font-size: 14.5px; line-height: 1.75; padding: 18px 24px; }
.zen-body .desc-area textarea.input { font-size: 13.5px; line-height: 1.8; }

/* botão de expandir que mora na barra de abas */
.tab-max {
  background: none;
  border: 1px solid var(--cf-border-d);
  border-radius: 8px;
  color: var(--cf-text-low);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  margin-bottom: 6px;
  cursor: pointer;
}
.tab-max:hover { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.5); }

/* referência a card: botão com número e título */
.card-ref .cr-id { font-family: var(--cf-mono); }
.card-ref .cr-tit { font-family: var(--cf-font); font-weight: 600; opacity: 0.92; }

/* campo personalizado na face do card */
.kcard .kcard-cf {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--cf-text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kcard .kcard-cf > span {
  color: var(--cf-text-low);
  flex-shrink: 0;
}
.kcard .kcard-cf > span::after { content: ':'; }

/* campo de texto personalizado: leitura vira clicável, clique entra na edição */
.cf-render {
  font-size: 13px;
  color: var(--cf-text-hi);
  background: rgba(var(--cf-ink), 0.05);
  border: 1.5px solid var(--cf-border-d2);
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 36px;
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
}
.cf-render:hover { border-color: rgba(var(--cf-green-rgb), 0.4); }
.cf-render .vazio { color: var(--cf-text-low); }

/* ---------- API docs (estilo referência) ---------- */

.api-layout {
  display: grid;
  grid-template-columns: 252px 1fr;
  height: 100%;
  min-height: 0;
}
.api-nav {
  border-right: 1px solid var(--cf-border-d);
  overflow-y: auto;
  padding: 18px 12px 40px;
  background: var(--cf-surf-barra);
}
.api-nav .api-group {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  padding: 16px 10px 6px;
}
.api-nav .api-group:first-child { padding-top: 0; }
.api-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--cf-text-mid);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  transition: all 0.14s;
  border: 1px solid transparent;
}
.api-nav a:hover { color: var(--cf-text-hi); background: rgba(var(--cf-ink), 0.04); }
.api-nav a.active { color: var(--cf-green-ink); background: var(--cf-green-dim); border-color: rgba(var(--cf-green-rgb), 0.2); }
.api-nav .m {
  font-family: var(--cf-mono);
  font-size: 9px;
  font-weight: 700;
  width: 38px;
  text-align: center;
  padding: 2px 0;
  border-radius: 5px;
  flex-shrink: 0;
}
.api-nav .m-get { background: rgba(var(--cf-blue-rgb), 0.16); color: var(--cf-blue-ink); }
.api-nav .m-post { background: var(--cf-green-dim); color: var(--cf-green-ink); }
.api-nav .m-patch { background: rgba(var(--cf-amber-rgb), 0.2); color: var(--cf-amber-ink); }
.api-nav .m-delete { background: rgba(var(--cf-red-rgb), 0.16); color: var(--cf-red-ink); }
.api-nav .m-doc { background: rgba(var(--cf-ink), 0.07); color: var(--cf-text-low); }

.api-page { overflow-y: auto; padding: 30px 34px 70px; min-width: 0; }
.api-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 34px;
  max-width: 1200px;
  align-items: start;
}
@media (max-width: 1240px) { .api-page-grid { grid-template-columns: 1fr; } }

.api-main { min-width: 0; }
.api-main .crumb {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-green-ink);
  margin-bottom: 8px;
}
.api-main h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.api-main .endpoint-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--cf-ink), 0.04);
  border: 1px solid var(--cf-border-d2);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 16px;
  font-family: var(--cf-mono);
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
}
.api-main .lead { color: var(--cf-text-mid); font-size: 13.5px; line-height: 1.65; max-width: 72ch; margin-bottom: 8px; }
.api-main .lead code, .param-desc code {
  font-family: var(--cf-mono);
  font-size: 11.5px;
  background: rgba(var(--cf-ink), 0.07);
  border: 1px solid var(--cf-border-d);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--cf-green-ink);
}

.param-section {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-text-hi);
  margin: 26px 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cf-border-d2);
}
.param-row {
  padding: 13px 2px;
  border-bottom: 1px solid rgba(var(--cf-ink), 0.055);
}
.param-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.param-name { font-family: var(--cf-mono); font-size: 13px; font-weight: 700; color: var(--cf-text-hi); }
.param-type { font-family: var(--cf-mono); font-size: 11px; color: var(--cf-text-low); }
.req-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cf-red-ink);
  background: rgba(var(--cf-red-rgb), 0.12);
  border: 1px solid rgba(var(--cf-red-rgb), 0.3);
  padding: 1px 8px;
  border-radius: 99px;
}
.opt-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  background: rgba(var(--cf-ink), 0.05);
  border: 1px solid var(--cf-border-d);
  padding: 1px 8px;
  border-radius: 99px;
}
.param-default { font-size: 11px; color: var(--cf-text-low); font-family: var(--cf-mono); }
.param-desc { font-size: 12.5px; color: var(--cf-text-mid); margin-top: 5px; line-height: 1.6; max-width: 66ch; }
.param-children { margin: 10px 0 0 16px; padding-left: 14px; border-left: 1.5px solid var(--cf-border-d2); }

.api-code { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.code-block {
  background: var(--cf-code-bg);
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  overflow: hidden;
}
.code-block .code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--cf-border-d);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  background: rgba(var(--cf-ink), 0.025);
}
.code-block .code-head .copy-btn { position: static; margin-left: auto; }
.code-block pre {
  font-family: var(--cf-mono);
  font-size: 11.5px;
  line-height: 1.7;
  padding: 13px 16px;
  overflow-x: auto;
  color: var(--cf-code-fg);
  max-height: 420px;
  overflow-y: auto;
}

/* ---------- util ---------- */
.muted { color: var(--cf-text-low); }
.mono { font-family: var(--cf-mono); }
.hidden { display: none !important; }

/* ---------- v1.2: quadros na sidebar, colunas, arquivados, conversa ---------- */

/* nav-label com botão de ação (+ novo quadro) */
.nav-label { display: flex; align-items: center; gap: 6px; }
.nav-label .nav-label-btn {
  margin-left: auto;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--cf-border-d2);
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: all 0.12s;
}
.nav-label .nav-label-btn:hover { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.5); }

/* linha do quadro: escolher + engrenagem de editar */
.board-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.board-row:hover { background: rgba(var(--cf-ink), 0.04); }
.board-row.active { background: rgba(var(--cf-ink), 0.06); border-color: var(--cf-border-d2); }
.board-row.active .board-pick { color: var(--cf-text-hi); }
.board-row .board-pick { flex: 1; min-width: 0; background: none; border: none; }
.board-row .board-pick span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .board-edit {
  flex-shrink: 0;
  width: 26px; height: 26px;
  margin-right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  border-radius: 7px;
  color: var(--cf-text-low);
  cursor: pointer;
  opacity: 0;
  transition: all 0.12s;
}
.board-row:hover .board-edit, .board-row.active .board-edit { opacity: 1; }
.board-row .board-edit:hover { color: var(--cf-green-ink); background: rgba(var(--cf-green-rgb), 0.12); }
.board-row .board-edit svg { width: 14px; height: 14px; }

/* menu da coluna */
.col-head .col-menu-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--cf-text-low);
  cursor: pointer;
  opacity: 0;
  transition: all 0.12s;
}
.col:hover .col-head .col-menu-btn { opacity: 1; }
.col-head .col-menu-btn:hover { color: var(--cf-green-ink); background: rgba(var(--cf-green-rgb), 0.12); }
.col-head .col-menu-btn svg { width: 14px; height: 14px; }

/* checkbox em linha (modal de coluna) */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cf-text-mid);
  cursor: pointer;
}
.check-row input[type="checkbox"] { margin-top: 1px; }

/* card arquivado */
.kcard-arch { opacity: 0.72; border-style: dashed; cursor: pointer; }
.kcard-arch .arch-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-text-low);
}
.board-wrap.showing-archived .col-cards { min-height: 40px; }

/* ---------- alternador quadro/tabela ---------- */

.view-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--cf-radius-full);
  background: rgba(var(--cf-ink), 0.05);
  border: 1.5px solid var(--cf-border-d2);
}
.view-switch button {
  padding: 4px 12px;
  border: none;
  border-radius: var(--cf-radius-full);
  background: none;
  color: var(--cf-text-mid);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.view-switch button:hover { color: var(--cf-text-hi); }
.view-switch button.on { background: var(--cf-green-dim); color: var(--cf-green-ink); }

/* ---------- visão de tabela ---------- */

.table-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.tb-scroll {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius-lg);
  background: var(--cf-surf-col);
}

.tb { width: 100%; border-collapse: separate; border-spacing: 0; }
.tb thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--cf-dark2);
  text-align: left;
  padding: 11px 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  border-bottom: 1px solid var(--cf-border-d);
  white-space: nowrap;
}
.tb th.tb-sortable { cursor: pointer; user-select: none; }
.tb th.tb-sortable:hover { color: var(--cf-green-ink); }
.tb .tb-seta { margin-left: 5px; font-size: 9px; color: var(--cf-green-ink); }

.tb tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cf-border-d);
  font-size: 12.5px;
  color: var(--cf-text-mid);
  vertical-align: middle;
  white-space: nowrap;  /* só a coluna do card quebra linha */
}
/* o título é o que interessa: fica com a folga, o resto se ajusta */
.tb th:nth-child(2), .tb td:nth-child(2) { width: 40%; min-width: 280px; white-space: normal; }
.tb tbody tr { cursor: pointer; transition: background 0.1s; }
.tb tbody tr:hover td { background: rgba(var(--cf-ink), 0.03); }
.tb tbody tr.on td { background: var(--cf-green-dim); }
.tb tbody tr.tb-arch td { opacity: 0.6; }
.tb tbody tr:last-child td { border-bottom: none; }

.tb .tb-check { width: 38px; text-align: center; cursor: default; }
.tb .tb-check input { width: 15px; height: 15px; }
.tb .tb-title { font-weight: 700; color: var(--cf-text-hi); font-size: 13px; }
.tb .tb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tb .tb-col { font-weight: 700; color: var(--cf-text-mid); white-space: nowrap; }
.tb .tb-quem { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tb .tb-vazio { color: var(--cf-text-low); }
/* valor de campo personalizado virado coluna: não pode empurrar a tabela,
   então trunca com reticências e mostra o texto inteiro no title */
.tb .tb-cf {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cf-text-mid);
}
.pop-head .pop-hint { font-size: 10.5px; color: var(--cf-text-low); font-weight: 600; }
.tb .tb-empty { text-align: center; padding: 40px; color: var(--cf-text-low); }

/* barra de ação em lote */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--cf-radius);
  border: 1.5px solid rgba(var(--cf-green-rgb), 0.4);
  background: var(--cf-green-dim);
  font-size: 12.5px;
  color: var(--cf-text-hi);
  flex-shrink: 0;
}
.bulk-bar b { color: var(--cf-green-ink); font-size: 14px; }
.bulk-bar.bulk-idle {
  border-color: var(--cf-border-d);
  border-style: dashed;
  background: none;
}
.bulk-bar.bulk-idle .muted { font-size: 12px; }

/* chip de mensagens no card */
.msg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cf-text-low);
}
.msg-chip svg { width: 12px; height: 12px; }

/* descrição clicável (visualizar por padrão, clique edita) */
.md-preview.desc-click {
  cursor: text;
  border: 1px solid transparent;
  border-radius: var(--cf-radius);
  transition: background 0.12s, border-color 0.12s;
}
.md-preview.desc-click:hover { background: rgba(var(--cf-ink), 0.03); border-color: var(--cf-border-d); }

/* ---------- conversa do card ---------- */

/* a conversa ocupa a aba inteira: a lista rola e o campo de escrever fica
   ancorado embaixo, sempre visível (antes a lista era uma gaveta de 320px que
   rolava mesmo sobrando espaço em branco no painel) */
.chat-box { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.chat-empty { font-size: 12.5px; color: var(--cf-text-low); padding: 6px 0; }
.chat-empty b { color: var(--cf-text-mid); }

.chat-msg { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(var(--cf-ink), 0.05); }
.chat-msg:last-child { border-bottom: none; }
.chat-msg .avatar { flex-shrink: 0; margin-top: 1px; }
.chat-msg-body { flex: 1; min-width: 0; }
.chat-msg-head { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.chat-msg-head b { color: var(--cf-text-hi); font-weight: 800; }
.chat-msg-head .chat-handle { color: var(--cf-text-low); font-size: 11px; }
.chat-msg-head .chat-time { color: var(--cf-text-low); font-size: 11px; white-space: nowrap; }
.chat-msg-head .chat-ia-tag { font-size: 9px; padding: 1px 6px; }
.chat-text { font-size: 13px; color: var(--cf-text-mid); line-height: 1.5; margin-top: 3px; word-wrap: break-word; }
.chat-text code {
  font-family: var(--cf-mono);
  font-size: 12px;
  background: rgba(var(--cf-ink), 0.07);
  padding: 1px 5px;
  border-radius: 5px;
}
.chat-text a { color: var(--cf-green-ink); }
.chat-text strong { color: var(--cf-text-hi); }
.chat-msg-ia .chat-text { color: var(--cf-text-mid); }
.chat-msg-ia { background: rgba(var(--cf-green-rgb), 0.035); border-radius: 10px; padding: 9px 10px; }

.mention {
  font-weight: 700;
  color: var(--cf-text-hi);
  background: rgba(var(--cf-ink), 0.08);
  padding: 0 4px;
  border-radius: 5px;
}
.mention-ia { color: var(--cf-green-ink); background: var(--cf-green-dim); }

.chat-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--cf-dark3);
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  padding: 12px;
}
.chat-as { display: flex; align-items: center; gap: 8px; }
.chat-as .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.select-sm { padding: 4px 26px 4px 9px; font-size: 12px; border-radius: 8px; }
.chat-input-wrap { position: relative; }
.chat-input-wrap textarea.input { width: 100%; min-height: 58px; resize: vertical; display: block; }
.chat-actions { display: flex; align-items: center; gap: 10px; }

/* menu de @menção */
/* o menu vive no BODY em posição fixa (o JS calcula onde o cursor está):
   dentro do campo ele era cortado pela rolagem da lateral e sumia na descrição */
.mention-menu {
  display: none;
  position: fixed;
  z-index: 260;
  min-width: 250px;
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: var(--cf-radius);
  box-shadow: var(--cf-shadow-lg);
  padding: 5px;
  overflow: hidden;
}
.mention-menu.open { display: block; }
.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
}
.mention-item .avatar { width: 22px; height: 22px; font-size: 9.5px; }
.mention-item .mi-name { font-weight: 700; color: var(--cf-text-hi); }
.mention-item .mi-handle { color: var(--cf-text-low); font-size: 11.5px; }
.mention-item.on, .mention-item:hover { background: rgba(var(--cf-green-rgb), 0.12); }

/* ---------- anexos do card ---------- */

.anexos-box { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.anexos-lista { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; }

.anexo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  background: rgba(var(--cf-ink), 0.025);
}
.anexo-item.indisponivel { opacity: 0.6; }
.anexo-capa {
  width: 54px; height: 54px;
  flex-shrink: 0;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(var(--cf-ink), 0.05);
  display: flex; align-items: center; justify-content: center;
}
.anexo-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anexo-icone { font-size: 22px; }
.anexo-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.anexo-nome {
  font-size: 13px; font-weight: 700; color: var(--cf-text-hi);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anexo-nome:hover { color: var(--cf-green-ink); }
.anexo-sub { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--cf-text-low); }
.anexo-origem { color: var(--cf-green-ink); font-weight: 600; }
.anexo-off { color: var(--cf-amber-ink); }
.anexo-nota { font-size: 12px; color: var(--cf-text-mid); }
.anexo-x {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low); font-size: 14px;
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
}
.anexo-x:hover { color: var(--cf-red-ink); background: rgba(var(--cf-red-rgb), 0.12); }

.anexo-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 16px;
  border: 1.5px dashed var(--cf-border-d2);
  border-radius: var(--cf-radius);
  color: var(--cf-text-mid);
  font-size: 12.5px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.anexo-drop:hover, .anexo-drop.sobre {
  border-color: var(--cf-green-ink);
  background: var(--cf-green-dim);
}

/* notas do card: lembrete pessoal, fora da conversa */
.notas-box { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.notas-lista { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; }
.nota-composer { display: flex; flex-direction: column; gap: 8px; }
.nota-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--cf-border-d);
  border-left: 3px solid var(--cf-amber-ink);
  border-radius: var(--cf-radius);
}
.nota-texto { font-size: 13px; color: var(--cf-text-hi); overflow-wrap: anywhere; }
.nota-rodape { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--cf-text-low); }
.nota-acao {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low); font-size: 11.5px;
  padding: 4px 6px; border-radius: 6px;
}
.nota-acao:hover { color: var(--cf-green-ink); background: var(--cf-green-dim); }

/* menu de comando ("/" no começo da mensagem) */
.cmd-item { justify-content: flex-start; gap: 10px; }
.cmd-nome {
  font-family: var(--cf-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--cf-green-ink);
  flex-shrink: 0;
}
.cmd-ajuda { color: var(--cf-text-mid); font-size: 12px; }

/* "@claude ••• respondendo…" abaixo da mensagem que chamou (uma por mensagem) */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0 10px 38px;   /* alinha com o texto, depois do avatar */
  font-size: 12.5px;
  color: var(--cf-text-low);
}
.chat-typing .dots { display: inline-flex; gap: 3px; }
.chat-typing .dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cf-green);
  animation: chat-dot 1.1s infinite ease-in-out;
}
.chat-typing .dots i:nth-child(2) { animation-delay: 0.18s; }
.chat-typing .dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* "▬▬ rodando o ciclo…": abaixo do /radar no chat e no status do assistente */
.radar-barra {
  position: relative;
  flex-shrink: 0;
  width: 140px; height: 5px;
  border-radius: 3px;
  background: var(--cf-border-d2);
  overflow: hidden;
}
.radar-barra i {
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  border-radius: 3px;
  background: var(--cf-green);
  animation: radar-barra 1.3s infinite ease-in-out;
}
@keyframes radar-barra { from { left: -40%; } to { left: 100%; } }

/* ---------- assistente (canto inferior direito, toda página) ----------
   Abaixo do .modal-overlay (60): com card aberto no centro o assistente escurece
   junto, como o painel lateral (55). Acompanha o painel lateral igual aos toasts. */
.assist-btn {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 57;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--cf-border-d2);
  background: var(--cf-dark2);
  color: var(--cf-green-ink);
  box-shadow: var(--cf-shadow-lg);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.assist-btn:hover { border-color: rgba(var(--cf-green-rgb), 0.5); transform: translateY(-1px); }
.assist-btn svg { width: 22px; height: 22px; }
.assist-dot {
  position: absolute; top: 2px; right: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--cf-dark2);
  background: var(--cf-text-low);
}
.assist-btn.s-ok .assist-dot, .assist-btn.s-rodando .assist-dot { background: var(--cf-green); }
.assist-btn.s-parado .assist-dot { background: var(--st-warn); }
.assist-btn.s-erro .assist-dot { background: var(--st-danger); }
.assist-btn.s-rodando::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--cf-green);
  animation: assist-pulso 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes assist-pulso { from { opacity: 0.7; transform: scale(0.9); } to { opacity: 0; transform: scale(1.25); } }
body.com-drawer .assist-btn, body.com-drawer .assist-panel { right: calc(22px + var(--cf-drawer-w)); }

.assist-panel {
  position: fixed;
  right: 22px; bottom: 82px;
  z-index: 58;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: min(600px, calc(100vh - 170px));   /* não cobre a barra do topo do quadro */
  display: flex; flex-direction: column;
  background: var(--cf-dark2);
  border: 1px solid var(--cf-border-d2);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  overflow: hidden;
}
.assist-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cf-border-d);
  font-size: 13px;
}
.assist-x {
  border: none; background: none;
  color: var(--cf-text-low);
  font: inherit; cursor: pointer;
  padding: 2px 7px; border-radius: 6px;
}
.assist-x:hover { color: var(--cf-text-hi); background: rgba(var(--cf-ink), 0.06); }
.assist-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 14px; }
.assist-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.assist-rot {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cf-text-low);
}
.assist-alvo { max-width: 172px; }   /* pílula com a foto do cliente, igual à do card */
.assist-status {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  font-size: 12.5px;
  color: var(--cf-text-mid);
}
.assist-status.s-parado { color: var(--st-warn); }
.assist-status.s-erro { color: var(--st-danger); }
.assist-resumo {
  margin-top: 8px;
  padding: 8px 11px;
  border-left: 2px solid var(--cf-green);
  font-size: 12px;
  color: var(--cf-text-mid);
}
.assist-quando { display: block; margin-top: 4px; font-size: 10.5px; color: var(--cf-text-low); }
.assist-sub { margin: 14px 0 4px; font-size: 11.5px; font-weight: 700; color: var(--cf-text-mid); }
.assist-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--cf-text-hi);
  text-decoration: none;
}
.assist-card:hover { background: rgba(var(--cf-ink), 0.04); }
.assist-card .ac-tit {
  font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.assist-card .ac-tit b { color: var(--cf-green-ink); margin-right: 6px; }
.assist-card .ac-sub { font-size: 11.5px; color: var(--cf-text-low); }
.assist-vazio { padding: 4px 2px; font-size: 12px; color: var(--cf-text-low); }
.assist-foot { padding: 10px 12px; border-top: 1px solid var(--cf-border-d); }
.assist-input { width: 100%; }
.assist-dica { margin-top: 6px; font-size: 11.5px; color: var(--st-warn); }

/* ---------- markdown: tudo o que o renderizador (mdToHtml) produz ----------
   A classe .md-body vale para os DOIS lugares que mostram texto do usuário: a
   descrição do card (.md-preview) e a conversa (.chat-text). Antes a tabela não
   tinha estilo em lugar nenhum (não existia no renderizador) e a conversa não
   tinha estilo de markdown nenhum, então título e lista saíam como texto solto. */

.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }

/* tabela. O wrapper existe porque tabela larga não pode empurrar o card:
   ela rola dentro do próprio bloco. */
.md-table-wrap { overflow-x: auto; margin: 10px 0; border-radius: var(--cf-radius); }
.md-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  background: rgba(var(--cf-ink), 0.015);
}
.md-body th, .md-body td {
  border: 1px solid var(--cf-border-d2);
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
}
.md-body th {
  background: rgba(var(--cf-ink), 0.045);
  color: var(--cf-text-hi);
  font-weight: 600;
  white-space: nowrap;
}
.md-body tbody tr:hover td { background: rgba(var(--cf-ink), 0.022); }
.md-body td code, .md-body th code { white-space: nowrap; }

/* lista de tarefa: sem o marcador do <li>, o checkbox é o marcador */
.md-body li.md-task { list-style: none; margin-left: -18px; }
.md-body li.md-task input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  vertical-align: -3px;
}

.md-body del { opacity: 0.55; }
.md-body img { max-width: 100%; border-radius: var(--cf-radius); display: block; margin: 8px 0; }
.md-body ul ul, .md-body ol ol, .md-body ul ol, .md-body ol ul { margin: 3px 0; }
.md-body blockquote > :first-child { margin-top: 0; }
.md-body blockquote > :last-child { margin-bottom: 0; }
.md-body pre { max-width: 100%; overflow-x: auto; }

/* A conversa não herdava nada disto: só tinha cor e tamanho de fonte.
   Escala menor que a descrição, porque a mensagem vive dentro de uma bolha. */
.chat-text.md-body h3, .chat-text.md-body h4,
.chat-text.md-body h5, .chat-text.md-body h6 {
  color: var(--cf-text-hi);
  margin: 10px 0 4px;
  line-height: 1.3;
}
.chat-text.md-body h3 { font-size: 14px; }
.chat-text.md-body h4 { font-size: 13.5px; }
.chat-text.md-body h5, .chat-text.md-body h6 { font-size: 13px; }
.chat-text.md-body p { margin: 6px 0; }
.chat-text.md-body strong { color: var(--cf-text-hi); }
.chat-text.md-body a { color: var(--cf-green-ink); }
.chat-text.md-body ul, .chat-text.md-body ol { margin: 6px 0; padding-left: 20px; }
.chat-text.md-body li { margin: 2px 0; }
.chat-text.md-body code {
  font-family: var(--cf-mono);
  font-size: 12px;
  background: rgba(var(--cf-ink), 0.07);
  border: 1px solid var(--cf-border-d2);
  border-radius: 4px;
  padding: 1px 4px;
}
.chat-text.md-body pre {
  background: var(--cf-dark);
  border: 1px solid var(--cf-border-d2);
  border-radius: var(--cf-radius);
  padding: 9px 11px;
  margin: 8px 0;
  font-size: 12px;
}
.chat-text.md-body pre code { background: none; border: none; padding: 0; color: var(--cf-code-fg); }
.chat-text.md-body blockquote {
  border-left: 2px solid var(--cf-border-d);
  margin: 8px 0;
  padding: 2px 0 2px 10px;
  color: var(--cf-text-mid);
}
.chat-text.md-body hr { border: none; border-top: 1px solid var(--cf-border-d2); margin: 10px 0; }
.chat-text.md-body table { font-size: 12px; }

/* ---------- campos personalizados ---------- */

/* bloco do grupo na lateral do modal do card */
.cf-bloco { margin-top: 16px; }
.cf-bloco .field { margin-top: 10px; }
.cf-grupo-nome {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf-grupo-nome::after { content: ''; flex: 1; height: 1px; background: var(--cf-border-d2); }

/* página de Configurações */
.config-inner { max-width: 760px; }
.config-section-head { display: flex; align-items: flex-start; gap: 18px; }
.config-section-head > div { flex: 1; }
.config-section-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.config-section-head .muted { font-size: 12.5px; margin-top: 5px; max-width: 58ch; line-height: 1.55; }
.config-section-head .btn { flex-shrink: 0; }

/* painel de um grupo de campos (mesma família visual do card de automação) */
.fg-card {
  background: var(--cf-dark3);
  border: 1.5px solid var(--cf-border-d);
  border-radius: var(--cf-radius-lg);
  margin-top: 16px;
  overflow: hidden;
  transition: border-color 0.12s;
}
.fg-card:hover { border-color: var(--cf-green-glow); }
.fg-card.off .fg-rows, .fg-card.off .fg-add { opacity: 0.45; }

.fg-head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; }
.fg-nome {
  background: none;
  border: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cf-text-hi);
  cursor: text;
  padding: 3px 7px;
  margin-left: -7px;
  border-radius: 7px;
  text-align: left;
}
.fg-nome:hover { background: rgba(var(--cf-ink), 0.06); }
.fg-count {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cf-text-low);
  background: rgba(var(--cf-ink), 0.05);
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius-full);
  padding: 2px 9px;
  white-space: nowrap;
}
.fg-estado { font-size: 11.5px; font-weight: 700; color: var(--cf-text-low); }
.fg-estado.on { color: var(--cf-green-ink); }

/* botão de ícone discreto (lixeira): aparece de leve, acende no hover */
.icon-btn {
  background: none;
  border: none;
  color: var(--cf-text-low);
  cursor: pointer;
  padding: 6px;
  border-radius: 7px;
  display: inline-flex;
  opacity: 0.6;
  transition: opacity 0.1s, color 0.1s, background 0.1s;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { opacity: 1; color: var(--cf-green-ink); background: rgba(var(--cf-green-rgb), 0.1); }
.icon-btn-danger:hover, .fg-del:hover { color: var(--st-danger); background: rgba(var(--cf-red-rgb), 0.1); }

/* linhas de campo, estilo tabela de propriedades */
.fg-rows { border-top: 1px solid var(--cf-border-d); }
.fg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  border-bottom: 1px solid rgba(var(--cf-ink), 0.05);
}
.fg-row:hover { background: rgba(var(--cf-ink), 0.03); }
.fg-row.dragging { opacity: 0.35; }
.fg-row .icon-btn { opacity: 0; }
.fg-row:hover .icon-btn { opacity: 0.7; }
.fg-row .icon-btn:hover { opacity: 1; }
.fg-grip { color: var(--cf-text-low); cursor: grab; display: inline-flex; opacity: 0; }
.fg-grip svg { width: 14px; height: 14px; }
.fg-row:hover .fg-grip { opacity: 0.7; }
.fg-tipo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--cf-text-low);
  background: rgba(var(--cf-ink), 0.05);
  border: 1px solid var(--cf-border-d);
  border-radius: 7px;
}
.fg-tipo-icon svg { width: 13px; height: 13px; }
.fg-tipo-rot { font-size: 11.5px; color: var(--cf-text-low); white-space: nowrap; }
.fg-campo-nome {
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cf-text-hi);
  cursor: text;
  padding: 5px 8px;
  border-radius: 7px;
  text-align: left;
  min-width: 0;
}
.fg-campo-nome:hover { background: rgba(var(--cf-ink), 0.06); }
.fg-vazio { padding: 14px 20px; font-size: 12.5px; color: var(--cf-text-low); }

/* rodapé do painel: abre o diálogo de campo */
.fg-add-btn {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid rgba(var(--cf-ink), 0.05);
  color: var(--cf-text-low);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  padding: 12px 20px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}
.fg-add-btn:hover { color: var(--cf-green-ink); background: rgba(var(--cf-green-rgb), 0.05); }

/* renomear grupo no lugar */
.fg-edit-input {
  background: var(--cf-dark2);
  border: 1.5px solid var(--cf-green);
  border-radius: 7px;
  color: var(--cf-text-hi);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
  outline: none;
  min-width: 260px;
}

/* diálogo de campo: grid de tipos (padrão seletor de propriedade de CRM) */
.modal-head h2 .thin { font-weight: 400; color: var(--cf-text-low); }
.tipo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tipo-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--cf-radius);
  background: rgba(var(--cf-ink), 0.03);
  border: 1.5px solid var(--cf-border-d);
  color: var(--cf-text-mid);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.tipo-card:hover { border-color: var(--cf-border-d2); background: rgba(var(--cf-ink), 0.055); }
.tipo-card.on { border-color: var(--cf-green-ink); background: var(--cf-green-dim); }
.ti-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(var(--cf-ink), 0.05);
  border: 1px solid var(--cf-border-d);
  color: var(--cf-text-mid);
}
.ti-icon svg { width: 15px; height: 15px; }
.tipo-card.on .ti-icon { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.35); background: rgba(var(--cf-green-rgb), 0.1); }
.ti-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-rot { font-size: 12.5px; font-weight: 700; color: var(--cf-text-hi); }
.ti-desc { font-size: 11px; color: var(--cf-text-low); line-height: 1.35; }

/* editor de opções do tipo Seleção */
.cf-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 22px; align-items: center; }
.cf-opt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: var(--cf-radius-full);
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(var(--cf-ink), 0.06);
  border: 1px solid var(--cf-border-d2);
  color: var(--cf-text-hi);
}
.cf-opt-x {
  background: none;
  border: none;
  color: var(--cf-text-low);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 3px;
  border-radius: 50%;
}
.cf-opt-x:hover { color: var(--st-danger); background: rgba(var(--cf-red-rgb), 0.15); }

/* campos no modal do card, por tipo */
/* sim/não: a marca é o controle e o rótulo segue a mesma tipografia dos outros
   labels da lateral (senão o campo booleano grita no meio da coluna). Marcado
   fica verde, que é o retorno de estado sem precisar de texto "Sim". */
.cf-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 4px 0 2px;
}
.cf-check-row input[type="checkbox"] { width: 15px; height: 15px; }
.cf-check-row span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cf-text-low);
}
.cf-check-row input:checked + span { color: var(--cf-green-ink); }
.cf-url-wrap { display: flex; align-items: center; gap: 6px; }
.cf-url-wrap .input { flex: 1; min-width: 0; }
.cf-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--cf-border-d);
  color: var(--cf-text-low);
  background: rgba(var(--cf-ink), 0.03);
}
.cf-open:hover { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.4); }
.cf-open svg { width: 14px; height: 14px; }
textarea.cf-input { resize: vertical; min-height: 62px; }

/* ==========================================================================
   TELA CONTEXTO — o que o @claude executor enxerga num card de cliente
   3 colunas: clientes | arquivos na ordem em que ele lê | o conteúdo.
   ========================================================================== */

.ctx-global {
  padding: 10px 26px 12px;
  border-bottom: 1px solid var(--cf-border-d);
  background: linear-gradient(180deg, rgba(var(--cf-green-rgb), 0.05), transparent);
}
.ctx-global-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ctx-global-txt { font-size: 12.5px; color: var(--cf-text-mid); }
.ctx-global-txt b { color: var(--cf-text-hi); }
.ctx-global-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ctx-chip-arq {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 11px; border-radius: 10px; cursor: pointer;
  background: rgba(var(--cf-ink), 0.04); border: 1.5px solid var(--cf-border-d2);
  font-family: var(--cf-font); color: var(--cf-text-mid); text-align: left;
  transition: border-color 0.18s, color 0.18s;
}
.ctx-chip-arq:hover { border-color: rgba(var(--cf-green-rgb), 0.45); color: var(--cf-text-hi); }
.ctx-chip-arq b { font-size: 12px; font-weight: 700; color: var(--cf-text-hi); }
.ctx-chip-arq span { font-size: 10.5px; color: var(--cf-text-low); }

.ctx-wrap {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 288px 336px 1fr;
}
.ctx-col { display: flex; flex-direction: column; min-width: 0; min-height: 0;
           border-right: 1px solid var(--cf-border-d); }
.ctx-col-leitor { border-right: none; }
.ctx-col-head {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
  padding: 12px 14px 8px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-text-low);
}
.ctx-col-head span:first-child { color: var(--cf-text-hi); }
.ctx-col-head .muted { font-size: 10.5px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.ctx-busca { margin: 0 12px 8px; }
.ctx-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 24px; }
.ctx-vazio { padding: 14px 2px; font-size: 12.5px; }

/* --- coluna 1: clientes --- */
.ctx-cliente {
  display: flex; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 10px; margin-bottom: 4px; border-radius: 12px;
  background: transparent; border: 1.5px solid transparent;
  font-family: var(--cf-font); transition: background 0.16s, border-color 0.16s;
}
.ctx-cliente:hover { background: rgba(var(--cf-ink), 0.04); }
.ctx-cliente.sel { background: var(--cf-green-dim); border-color: rgba(var(--cf-green-rgb), 0.4); }
.ctx-logo { flex: 0 0 26px; height: 26px; display: grid; place-items: center; }
.ctx-logo img { max-width: 26px; max-height: 26px; object-fit: contain; }
.ctx-ini {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: var(--cf-on-green); background: var(--cf-green);
}
.ctx-cliente-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ctx-cliente-nome { font-size: 13px; font-weight: 700; color: var(--cf-text-hi); }
.ctx-cliente-meta { font-size: 10.5px; color: var(--cf-text-low); }
.ctx-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1px; }
.ctx-b {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 6px; border-radius: var(--cf-radius-full); white-space: nowrap;
}
.ctx-b.ok { color: var(--cf-green-ink); background: var(--cf-green-dim); }
.ctx-b.off { color: var(--cf-text-low); background: rgba(var(--cf-ink), 0.05); }
.ctx-b.warn { color: var(--st-warn); background: rgba(var(--cf-amber-rgb), 0.14); }

/* --- coluna 2: arquivos, na ordem em que o executor consulta --- */
.ctx-grupo { margin-bottom: 16px; }
.ctx-grupo-head { display: flex; align-items: center; gap: 7px; margin: 4px 0 2px; }
.ctx-grupo-n {
  flex: 0 0 17px; height: 17px; border-radius: 6px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: var(--cf-on-green); background: var(--cf-green);
}
.ctx-grupo-t { font-size: 11.5px; font-weight: 800; color: var(--cf-text-hi);
               text-transform: uppercase; letter-spacing: 0.05em; }
.ctx-grupo-nota { font-size: 10.5px; color: var(--cf-text-low); margin: 0 0 7px 24px; line-height: 1.45; }
.ctx-arq {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 7px 10px; margin-bottom: 3px; border-radius: 10px; cursor: pointer;
  background: rgba(var(--cf-ink), 0.03); border: 1.5px solid transparent;
  font-family: var(--cf-font); transition: background 0.16s, border-color 0.16s;
}
.ctx-arq:hover { background: rgba(var(--cf-ink), 0.07); }
.ctx-arq.sel { background: var(--cf-green-dim); border-color: rgba(var(--cf-green-rgb), 0.4); }
.ctx-arq.sub { margin-left: 10px; background: transparent; }
.ctx-arq.sub:hover { background: rgba(var(--cf-ink), 0.05); }
.ctx-arq-nome { font-size: 12.5px; font-weight: 700; color: var(--cf-text-hi);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-arq-meta { font-size: 10px; color: var(--cf-text-low); display: flex; gap: 5px; align-items: center; }
.ctx-arq.ausente { cursor: default; background: transparent; border: 1.5px dashed rgba(var(--cf-red-rgb), 0.3); }
.ctx-arq.ausente .ctx-arq-nome { color: var(--cf-text-low); text-decoration: line-through; }
.ctx-arq.ausente .ctx-arq-meta { color: var(--st-danger); font-weight: 700; }

.ctx-pasta { margin-bottom: 3px; }
.ctx-pasta > summary {
  display: flex; flex-direction: column; gap: 2px; cursor: pointer; list-style: none;
  padding: 7px 10px; border-radius: 10px; background: rgba(var(--cf-ink), 0.03);
}
.ctx-pasta > summary::-webkit-details-marker { display: none; }
.ctx-pasta > summary:hover { background: rgba(var(--cf-ink), 0.07); }
.ctx-pasta[open] > summary { background: rgba(var(--cf-ink), 0.06); margin-bottom: 3px; }
.ctx-pasta-nota { font-size: 10.5px; color: var(--cf-text-low); margin: 3px 0 5px 10px; line-height: 1.45; }

/* --- coluna 3: o leitor --- */
.ctx-col-leitor { background: rgba(var(--cf-ink), 0.012); }
.ctx-leitor-head { padding: 12px 22px 11px; border-bottom: 1px solid var(--cf-border-d); }
.ctx-leitor-head:empty { display: none; }
.ctx-leitor-t { font-size: 15px; font-weight: 800; color: var(--cf-text-hi); }
.ctx-leitor-sub { font-size: 11px; color: var(--cf-text-low); margin-top: 3px; }
.ctx-leitor-sub code { font-family: var(--cf-mono); font-size: 10.5px; color: var(--cf-text-mid); }
.ctx-leitor-papel {
  font-size: 12px; color: var(--cf-text-mid); margin-top: 7px; padding-left: 9px;
  border-left: 2px solid var(--cf-green); line-height: 1.5;
}
.ctx-leitor-fonte { font-size: 10.5px; color: var(--cf-text-low); margin-top: 5px; }
.ctx-leitor-fonte code { font-family: var(--cf-mono); font-size: 10px; }
/* o .md-preview é desenhado para caber dentro de um card (moldura + fundo + altura
   mínima). Aqui ele é a página inteira, então a moldura sai e só o tipo fica. */
.ctx-md {
  max-width: 900px; padding: 18px 22px 40px;
  background: none; border: none; border-radius: 0; min-height: 0; overflow: visible;
}
/* mdToHtml rebaixa os títulos em 2 (o `#` do texto vira h3, porque num card o h1 é o
   título). Aqui o arquivo É a página, então h3/h4 voltam a ter peso de título. */
.ctx-md h3 { font-size: 18px; font-weight: 800; color: var(--cf-text-hi); margin: 0 0 10px; }
.ctx-md h4 {
  font-size: 15px; font-weight: 800; color: var(--cf-text-hi);
  margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--cf-border-d);
}
.ctx-md h5 { font-size: 13.5px; font-weight: 800; color: var(--cf-text-hi); margin: 18px 0 6px; }
.ctx-md table { font-size: 12px; }
.ctx-md pre { font-size: 11.5px; }
.ctx-alerta {
  display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: var(--cf-radius-full);
  font-size: 10.5px; font-weight: 700; color: var(--st-warn); background: rgba(var(--cf-amber-rgb), 0.14);
}

@media (max-width: 1180px) {
  .ctx-wrap { grid-template-columns: 236px 290px 1fr; }
}


/* ==========================================================================
   TERMINAL DO CARD — o Claude Code do card ao vivo (js/term.js + termpty.py)
   Tela cheia de propósito: acompanhar trabalho é ler linha após linha, e um
   modalzinho de 640px transformaria a TUI num acordeão de quebra de linha.
   z-index acima do modal do card (60) e do painel lateral: ele nasce de lá.
   ========================================================================== */

.term-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--cf-shade), 0.82);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.term-panel {
  width: 100%;
  height: 100%;
  max-width: 1520px;
  background: var(--cf-dark);
  border: 1px solid var(--cf-border-d2);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.term-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--cf-border-d);
  background: var(--cf-dark2);
  flex: none;
}
.term-head .term-titulo { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.term-head .spacer { flex: 1; }
/* pontinho verde = tem processo de pé; o estado detalhado fica no rodapé */
.term-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cf-green); box-shadow: 0 0 0 3px var(--cf-green-dim);
  flex: none;
}
.term-card-nome {
  font-size: 12.5px; color: var(--cf-text-mid);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.term-sessao { font-size: 11px; color: var(--cf-text-low); }

/* o host do xterm. `overflow: hidden` porque quem rola é o .xterm-viewport de
   dentro; sem isto o painel inteiro ganha barra e o fit mede errado. */
/* O TERMINAL FICA ESCURO NOS DOIS TEMAS — e não é esquecimento.
   A maior parte do que o Claude Code pinta é truecolor (ESC[38;2;R;G;Bm),
   escolhida por ele para fundo escuro: ela não passa pela paleta do xterm, então
   nenhum tema claro nosso a corrige. Com fundo claro o texto dele fica ilegível.
   O painel em volta (cabeçalho, rodapé, botões) segue o tema; só a superfície do
   terminal e a barra de rolagem dela ficam fixas no escuro. */
html[data-theme="light"] .term-host { background: #0d0d0d; }
html[data-theme="light"] .term-polegar { background: rgba(255, 255, 255, 0.22); }
html[data-theme="light"] .term-polegar:hover { background: rgba(255, 255, 255, 0.34); }

.term-host {
  flex: 1;
  min-height: 0;
  /* o padding da direita é a CALHA da barra de rolagem (ver .term-barra); o
     FitAddon desconta padding ao medir, então o texto não passa por baixo dela */
  padding: 8px 20px 8px 12px;
  overflow: hidden;
  background: var(--cf-dark);
  position: relative;
}
.term-host .xterm { height: 100%; }
.term-host .xterm-viewport { background: transparent !important; }

/* A BARRA NATIVA SAI DE CENA, e o motivo é medido (08/09/2026): no Chrome ela é
   *overlay* — `offsetWidth - clientWidth` dá **0**, ou seja ela não ocupa lugar
   nenhum no layout, flutua por cima do texto, e o clique nela cai no terminal.
   O xterm então trata aquilo como início de SELEÇÃO e chama `preventDefault`,
   que é o que mata o arrasto: a barra some da mão e o que se ganha é texto
   selecionado. `::-webkit-scrollbar { width: 10px }` não resolve — a regra até
   se aplica (o computed diz 10px), mas em modo overlay ela continua sem calha. */
.term-host .xterm-viewport { scrollbar-width: none; }
.term-host .xterm-viewport::-webkit-scrollbar { width: 0; height: 0; }

/* ...e no lugar dela entra a nossa, na calha reservada pelo padding — fora do
   texto, como a do VS Code, e sob controle nosso: quem recebe o ponteiro é este
   div, não o terminal, então arrastar rola e nunca seleciona. */
.term-barra {
  position: absolute;
  top: 8px; right: 5px; bottom: 8px;
  width: 10px;
  border-radius: 99px;
  opacity: 0;
  transition: opacity 0.15s var(--cf-ease-smooth);
  cursor: default;
}
.term-barra.tem-scroll { opacity: 0.75; }         /* só existe se houver o que rolar */
.term-host:hover .term-barra.tem-scroll,
.term-barra.arrastando { opacity: 1; }
.term-polegar {
  position: absolute;
  left: 1px; right: 1px;
  min-height: 26px;
  border-radius: 99px;
  background: rgba(var(--cf-ink), 0.22);
  transition: background 0.15s var(--cf-ease-smooth);
}
.term-polegar:hover { background: rgba(var(--cf-ink), 0.34); }
.term-barra.arrastando .term-polegar { background: var(--cf-green); }
/* durante o arrasto o cursor não pode virar "texto" ao passar sobre o terminal */
.term-panel.arrastando-barra, .term-panel.arrastando-barra * { cursor: default !important; }

.term-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-top: 1px solid var(--cf-border-d);
  background: var(--cf-dark2);
  font-size: 11.5px;
  color: var(--cf-text-low);
  flex: none;
}
.term-foot .spacer { flex: 1; }
.term-foot b { color: var(--cf-text-mid); font-weight: 800; }
.term-status { font-weight: 700; color: var(--cf-text-mid); }
.term-status.on { color: var(--cf-green-ink); }
.term-status.off { color: var(--st-danger); }
.term-status.wait { color: var(--st-warn); }

@media (max-width: 900px) {
  .term-overlay { padding: 0; }
  .term-panel { border-radius: 0; border: none; }
  .term-card-nome, .term-dica { display: none; }
}

/* ===========================================================================
   Tela Timeline — o dia a dia de um cliente (js/timeline.js)
   Uma coluna estreita para escolher o cliente, o resto é o feed de dias.
   =========================================================================== */

.tl-check { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
            color: var(--cf-text-mid); cursor: pointer; white-space: nowrap; }
.tl-check input { accent-color: var(--cf-green-ink); }
.tl-select { width: 108px; padding: 5px 8px; font-size: 11.5px; }

.tl-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 288px 1fr; }
.tl-col { display: flex; flex-direction: column; min-width: 0; min-height: 0;
          border-right: 1px solid var(--cf-border-d); }
.tl-col-head {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
  padding: 12px 14px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-text-low);
}
.tl-col-head span:first-child { color: var(--cf-text-hi); }
.tl-col-nota { margin: 0 14px 8px; font-size: 10.5px; color: var(--cf-text-low); line-height: 1.4; }
.tl-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 28px; }
.tl-vazio { padding: 18px 6px; font-size: 12.5px; }

.tl-cliente {
  display: flex; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 10px; margin-bottom: 4px; border-radius: 12px;
  background: transparent; border: 1.5px solid transparent;
  font-family: var(--cf-font); transition: background 0.16s, border-color 0.16s;
}
.tl-cliente:hover { background: rgba(var(--cf-ink), 0.04); }
.tl-cliente.sel { background: var(--cf-green-dim); border-color: rgba(var(--cf-green-rgb), 0.4); }
.tl-logo { flex: 0 0 26px; height: 26px; display: grid; place-items: center; }
.tl-logo img { max-width: 26px; max-height: 26px; object-fit: contain; }
.tl-ini { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
          font-size: 10px; font-weight: 800; color: var(--cf-on-green); }
.tl-cliente-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-cliente-nome { font-size: 13px; font-weight: 700; color: var(--cf-text-hi); }
.tl-cliente-meta { font-size: 10.5px; color: var(--cf-text-low); }
.tl-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 1px; }
.tl-b { font-size: 9.5px; font-weight: 700; padding: 2px 6px;
        border-radius: var(--cf-radius-full); white-space: nowrap; }
.tl-b.ok { color: var(--cf-green-ink); background: var(--cf-green-dim); }
.tl-b.off { color: var(--cf-text-low); background: rgba(var(--cf-ink), 0.05); }

/* --- cabeçalho do feed --- */
.tl-feed-col { display: flex; flex-direction: column; min-width: 0; min-height: 0;
               background: rgba(var(--cf-ink), 0.012); }
.tl-feed-head { padding: 12px 24px 11px; border-bottom: 1px solid var(--cf-border-d); }
.tl-feed-head:empty { display: none; }
.tl-feed-t { font-size: 15px; font-weight: 800; color: var(--cf-text-hi); }
.tl-feed-sub { font-size: 11px; color: var(--cf-text-low); margin-top: 3px; }
.tl-feed-sub code { font-family: var(--cf-mono); font-size: 10.5px; color: var(--cf-text-mid); }
.tl-alerta { color: var(--st-warn); font-weight: 700; }

/* --- um bloco por dia --- */
.tl-feed { padding: 16px 24px 40px; max-width: 980px; }
.tl-bloco {
  position: relative; margin-bottom: 10px; padding: 11px 14px 12px;
  border-radius: var(--cf-radius); background: rgba(var(--cf-ink), 0.03);
  border: 1.5px solid var(--cf-border-d);
}
/* dia sem nada não some: vira linha fina, porque o SILÊNCIO é informação */
.tl-bloco.fino { padding: 7px 14px; background: transparent; border-style: dashed;
                 border-color: rgba(var(--cf-ink), 0.06); }
.tl-bloco.sem-coleta { border-color: rgba(var(--cf-amber-rgb), 0.28); }
.tl-bloco-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tl-data { font-size: 12.5px; color: var(--cf-text-mid); white-space: nowrap; }
.tl-data b { font-size: 13.5px; font-weight: 800; color: var(--cf-text-hi); }
.tl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-chip { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--cf-radius-full);
           color: var(--cf-text-mid); background: rgba(var(--cf-ink), 0.06); white-space: nowrap; }
.tl-chip.ok { color: var(--cf-green-ink); background: var(--cf-green-dim); }
.tl-chip.neutro { color: var(--cf-text-low); }
.tl-chip.vazio { color: var(--cf-text-low); background: transparent;
                 border: 1px solid var(--cf-border-d); }
.tl-sem { font-size: 11px; color: var(--cf-text-low); padding-left: 2px; }

.tl-bloco-linha { display: grid; grid-template-columns: 62px 1fr; gap: 10px; margin-top: 9px; }
.tl-rotulo { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
             color: var(--cf-text-low); padding-top: 4px; }
.tl-conteudo { min-width: 0; }
.tl-grupos { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-grupo-nome { font-size: 11px; color: var(--cf-text-mid); }
.tl-resumo { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--cf-text-mid);
             padding-left: 9px; border-left: 2px solid var(--cf-green); }
.tl-abrir {
  margin-top: 6px; padding: 3px 9px; border-radius: var(--cf-radius-full); cursor: pointer;
  font-family: var(--cf-font); font-size: 10.5px; font-weight: 700; color: var(--cf-text-mid);
  background: transparent; border: 1.5px solid var(--cf-border-d2);
}
.tl-abrir:hover { border-color: rgba(var(--cf-green-rgb), 0.45); color: var(--cf-text-hi); }

.tl-item {
  display: flex; gap: 9px; align-items: baseline; padding: 4px 0; text-decoration: none;
  border-bottom: 1px solid rgba(var(--cf-ink), 0.04);
}
.tl-item:last-child { border-bottom: none; }
.tl-item.card:hover b { color: var(--cf-green-ink); }
.tl-hora { flex: 0 0 34px; font-family: var(--cf-mono); font-size: 10.5px; color: var(--cf-text-low); }
.tl-item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl-item-txt b { font-size: 12.5px; font-weight: 700; color: var(--cf-text-hi); }
.tl-item-txt span { font-size: 10.5px; color: var(--cf-text-low); }

/* --- o fio das mensagens do dia --- */
.tl-fio:not(:empty) { margin-top: 8px; padding: 9px 11px; border-radius: 10px;
                      background: var(--cf-sunken); }
.tl-fio-grupo + .tl-fio-grupo { margin-top: 10px; padding-top: 8px;
                                border-top: 1px solid var(--cf-border-d); }
.tl-fio-titulo { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
                 color: var(--cf-text-low); margin-bottom: 5px; }
.tl-msg { display: flex; gap: 8px; padding: 2px 0; font-size: 12px; line-height: 1.5; }
.tl-msg-h { flex: 0 0 34px; font-family: var(--cf-mono); font-size: 10px; color: var(--cf-text-low); }
.tl-msg-b { color: var(--cf-text-mid); min-width: 0; overflow-wrap: anywhere; }
.tl-msg-b b { font-weight: 700; color: var(--cf-text-low); }
.tl-msg.cli .tl-msg-b { color: var(--cf-text-hi); }
.tl-msg.cli .tl-msg-b b { color: var(--cf-green-ink); }
.tl-msg-corte { font-size: 10.5px; margin-top: 4px; }

/* ==========================================================================
   SUBTAREFAS — o card filho (cards.parent_id)
   Um nível só. Na face do card: o ↳#pai no topo e o progresso no rodapé.
   Na aba: lista de CARDS (cada linha abre o card dela), e o estado que se
   mostra é a COLUNA, porque é ela que diz o que acabou neste quadro.
   ========================================================================== */

/* ↳ na face do card: pequeno e discreto, mas clicável — é atalho pro pai */
.kcard-pai {
  display: inline-flex;
  align-items: center;
  /* o card é uma coluna flex: sem isto o chip esticaria de ponta a ponta */
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 4px;
  padding: 1px 7px;
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius-full);
  background: rgba(var(--cf-ink), 0.04);
  color: var(--cf-text-low);
  font-family: var(--cf-mono);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.kcard-pai:hover { color: var(--cf-green-ink); border-color: var(--cf-green-ink); }
/* tudo feito: o chip vira verde, que é o "pode fechar" visto de longe */
.msg-chip.sub-chip-ok { color: var(--cf-green-ink); }
.tb-pai { font-family: var(--cf-mono); font-size: 10.5px; color: var(--cf-text-low); }

.subs-box { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.subs-lista { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; }
.subs-add { display: flex; gap: 8px; align-items: center; }
.subs-add .input { flex: 1; }

.subs-head { display: flex; align-items: center; gap: 10px; }
.subs-prog {
  flex: 1;
  height: 6px;
  border-radius: var(--cf-radius-full);
  background: rgba(var(--cf-ink), 0.07);
  overflow: hidden;
}
.subs-prog-bar {
  height: 100%;
  border-radius: var(--cf-radius-full);
  background: var(--cf-green);
  box-shadow: 0 0 10px var(--cf-green-glow);
  transition: width 0.25s var(--cf-ease-smooth);
}
.subs-res { font-size: 11.5px; font-weight: 700; color: var(--cf-text-mid); white-space: nowrap; }

.sub-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
  background: rgba(var(--cf-ink), 0.025);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.sub-linha:hover { border-color: var(--cf-border-d2); background: rgba(var(--cf-ink), 0.05); }
.sub-mark {
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--cf-border-d2);
  border-radius: 5px;
  font-size: 11px; font-weight: 800; line-height: 1;
  color: var(--cf-on-green);
}
.sub-feita .sub-mark { background: var(--cf-green); border-color: var(--cf-green-ink); }
/* concluída fica legível, não apagada: ela é a prova do que já andou */
.sub-feita .sub-titulo { color: var(--cf-text-mid); text-decoration: line-through; }
.sub-arq { opacity: 0.55; }
.sub-id { font-size: 11px; color: var(--cf-text-low); flex-shrink: 0; }
.sub-titulo {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--cf-text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-col {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--cf-radius-full);
  background: rgba(var(--cf-ink), 0.06);
  font-size: 10.5px; font-weight: 700; color: var(--cf-text-mid);
}
.sub-col-arq { color: var(--cf-amber-ink); }
.sub-x {
  background: none; border: none; cursor: pointer;
  color: var(--cf-text-low); font-size: 13px;
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
}
.sub-x:hover { color: var(--cf-red-ink); background: rgba(var(--cf-red-rgb), 0.12); }

/* de quem este card é filho — na aba e logo abaixo do título */
.sub-pai-box {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--cf-border-d);
  border-left: 2px solid var(--cf-green);
  border-radius: var(--cf-radius);
  background: var(--cf-green-dim);
}
.sub-pai-rot {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cf-text-low);
}
.sub-pai-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--cf-font); font-size: 13px; font-weight: 700;
  color: var(--cf-text-hi); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-pai-link:hover { color: var(--cf-green-ink); }
.card-pai-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ---------- evidência: a prova de que o card funciona (1.25) ---------- */
/* Faixa na face do card, não um chip no meio do rodapé: a prova é o que se
   procura num card em Revisão, então ela tem que ser lida de longe, na varredura
   do quadro. Verde = algum link é de lead real; âmbar = ainda só simulação. */
.kcard-ev {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: var(--cf-radius-full);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
}
.kcard-ev.ev-real { background: rgba(var(--cf-green-rgb), 0.12); border-color: rgba(var(--cf-green-rgb), 0.35); }
.kcard-ev.ev-sim { background: rgba(var(--cf-amber-rgb), 0.12); border-color: rgba(var(--cf-amber-rgb), 0.35); }
.kcard-ev .ev-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--cf-radius-full);
  background: rgba(var(--cf-ink), 0.06);
}
.kcard-ev .ev-chip svg { width: 12px; height: 12px; }
.kcard-ev.ev-real .ev-chip { color: var(--cf-green-ink); }
.kcard-ev.ev-sim .ev-chip { color: var(--cf-amber-ink); }
.kcard-ev .ev-tipo {
  margin-left: auto;
  color: var(--cf-text-low);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9.5px;
}

/* a aba Evidência do card */
.ev-box { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.ev-composer { display: flex; flex-direction: column; gap: 8px; }
.ev-composer-linha { display: flex; gap: 8px; align-items: center; }
.ev-composer-linha .input { flex: 1; }
.ev-sel { flex: 0 0 auto; }
.ev-lista { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; }

.ev-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cf-border-d);
  border-left: 3px solid rgba(var(--cf-amber-rgb), 0.6);
  border-radius: var(--cf-radius);
  background: rgba(var(--cf-ink), 0.03);
}
.ev-item.ev-item-real { border-left-color: rgba(var(--cf-green-rgb), 0.75); }
.ev-item-ico { color: var(--cf-amber-ink); display: flex; padding-top: 2px; }
.ev-item-ico svg { width: 15px; height: 15px; }
.ev-item.ev-item-real .ev-item-ico { color: var(--cf-green-ink); }
.ev-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-item-url {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cf-text-hi);
  text-decoration: none;
  word-break: break-all;
}
.ev-item-url:hover { color: var(--cf-green-ink); text-decoration: underline; }
.ev-item-nota { font-size: 12px; color: var(--cf-text-mid); }
.ev-item-meta { font-size: 11px; color: var(--cf-text-low); }
.ev-selo {
  flex: 0 0 auto;
  border: 1px solid var(--cf-border-d);
  background: transparent;
  color: var(--cf-text-low);
  border-radius: var(--cf-radius-full);
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--cf-font);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.ev-selo:hover { border-color: rgba(var(--cf-ink), 0.28); color: var(--cf-text-hi); }
.ev-item.ev-item-real .ev-selo { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.45); }

/* ---------- entregável: o que o card PRODUZIU (1.26) ---------- */
/* A lista fica leve de propósito (título, tipo, uma frase): o peso está na tela
   que abre POR CIMA dela, com o antes e o depois lado a lado. Ver o diff não pode
   custar uma guia nova, senão a revisão não acontece. */
.deliv-box { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.deliv-lista { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow-y: auto; }

.deliv-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cf-border-d);
  border-left: 3px solid rgba(var(--cf-green-rgb), 0.55);
  border-radius: var(--cf-radius);
  background: rgba(var(--cf-ink), 0.03);
  cursor: pointer;
}
.deliv-item:hover { border-color: rgba(var(--cf-green-rgb), 0.45); background: rgba(var(--cf-green-rgb), 0.06); }
.deliv-ico { color: var(--cf-green-ink); display: flex; padding-top: 2px; }
.deliv-ico svg { width: 15px; height: 15px; }
.deliv-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.deliv-tit { font-size: 13px; font-weight: 700; color: var(--cf-text-hi); }
.deliv-nota { font-size: 12px; color: var(--cf-text-mid); }
.deliv-meta { font-size: 11px; color: var(--cf-text-low); }
.deliv-ver, .deliv-abrir {
  flex: 0 0 auto;
  border: 1px solid var(--cf-border-d);
  background: transparent;
  color: var(--cf-text-low);
  border-radius: var(--cf-radius-full);
  padding: 2px 10px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--cf-font);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.deliv-ver:hover, .deliv-abrir:hover { color: var(--cf-green-ink); border-color: rgba(var(--cf-green-rgb), 0.45); }

.deliv-novo { border: 1px dashed var(--cf-border-d); border-radius: var(--cf-radius); padding: 8px 12px; }
.deliv-novo summary { cursor: pointer; font-size: 11.5px; color: var(--cf-text-low); font-weight: 700; }
.deliv-form { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.deliv-form-linha { display: flex; gap: 8px; }
.deliv-form-linha > * { flex: 1; min-width: 0; }
.deliv-form textarea.mono { font-family: var(--cf-mono); font-size: 11.5px; }

/* a tela do antes/depois: `.rev-modal.deliv-modal` (overlay em tela cheia,
   igual ao detalhe da Atividade). Mais largo que o rev-modal padrão porque
   diff lado a lado pede espaço. */
.rev-modal.deliv-modal { max-width: 1080px; }
.deliv-view-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--cf-border-d);
  background: rgba(var(--cf-ink), 0.04);
}
.deliv-view-tit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.deliv-view-tit b { font-size: 13px; color: var(--cf-text-hi); }
.deliv-view-sub { font-size: 11px; color: var(--cf-text-low); }
.deliv-view-corpo { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; }

/* entregável de UMA versão só: leitura, não diff. Modal mais estreito (linha
   curta lê melhor), texto corrido com respiro, e a barra de rolagem sempre no
   lugar (`scrollbar-gutter`) — sem ela o texto parecia cortado sem saída. */
.rev-modal.deliv-modal.deliv-leitura { max-width: 720px; }
.deliv-leitura-corpo { padding: 14px 18px 18px; }
/* a barra genérica (12% de opacidade) some no fundo escuro do modal e dá a
   impressão de que o texto acabou: aqui ela aparece */
.deliv-view-corpo::-webkit-scrollbar-thumb { background: rgba(var(--cf-ink), 0.3); }
.deliv-view-corpo::-webkit-scrollbar-thumb:hover { background: rgba(var(--cf-green-rgb), 0.45); }
.deliv-desc {
  font-size: 12.5px; line-height: 1.6; color: var(--cf-text-mid);
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--cf-border-d);
}
.deliv-rot {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cf-text-low); margin-bottom: 6px;
}
.deliv-texto {
  margin: 0; padding: 14px 16px;
  font-family: var(--cf-mono); font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  color: var(--cf-text-hi);
  background: rgba(var(--cf-ink), 0.05);
  border: 1px solid var(--cf-border-d);
  border-radius: var(--cf-radius);
}

.dl-cab {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cf-text-low);
  background: rgba(var(--cf-ink), 0.05);
  border-bottom: 1px solid var(--cf-border-d);
}
.dl-cab span { padding: 4px 12px; }
.dl-cab span + span { border-left: 1px solid var(--cf-border-d); }

.dl-grid {
  display: grid;
  grid-template-columns: 44px 1fr 44px 1fr;
  font-family: var(--cf-mono);
  font-size: 11.5px;
  line-height: 1.55;
}
.dl-n {
  padding: 0 6px;
  text-align: right;
  color: var(--cf-text-low);
  opacity: 0.6;
  user-select: none;
  border-right: 1px solid var(--cf-border-d);
}
.dl-cel { padding: 0 10px; white-space: pre-wrap; word-break: break-word; color: var(--cf-text-mid); }
.dl-rem { background: rgba(var(--cf-red-rgb), 0.14); color: var(--cf-text-hi); }
.dl-add { background: rgba(var(--cf-green-rgb), 0.14); color: var(--cf-text-hi); }
.dl-nada { background: rgba(var(--cf-ink), 0.05); }
.dl-vazia { display: block; min-height: 1em; }
.dl-dobra {
  grid-column: 1 / -1;
  padding: 3px 12px;
  font-family: var(--cf-font);
  font-size: 11px;
  color: var(--cf-text-low);
  background: rgba(var(--cf-ink), 0.05);
  border-top: 1px solid var(--cf-border-d);
  border-bottom: 1px solid var(--cf-border-d);
  cursor: pointer;
}
.dl-dobra:hover { color: var(--cf-green-ink); }

.dl-uni { font-family: var(--cf-mono); font-size: 11.5px; line-height: 1.55; }
.dl-uni-l { padding: 0 10px; white-space: pre-wrap; word-break: break-word; color: var(--cf-text-mid); }
.dl-sig { display: inline-block; width: 12px; color: var(--cf-text-low); }

/* ==========================================================================
   Conversa da simulação em tela cheia (evidência de ajuste de prompt, 23/09/2026)
   Chat na linguagem da Chatfor: fundo com grid + glow verde, lead à esquerda,
   agente à direita em verde, e o que o painel esconde (trigger, tag, tool com
   parâmetros e retorno) no meio da conversa, onde aconteceu.
   ========================================================================== */
.ev-conv-btn { align-self: flex-start; margin-top: 6px; gap: 6px; }
.ev-conv-btn svg { width: 13px; height: 13px; }
.rev-modal.cv-modal { max-width: 820px; height: calc(100vh - 56px); }
.cv-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cf-border-d);
  background: rgba(var(--cf-ink), 0.04);
}
.cv-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cf-green); color: var(--cf-on-green);
  font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.cv-head-tit { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-head-tit b { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: var(--cf-text-hi); }
.cv-tel { font-weight: 500; font-size: 11.5px; color: var(--cf-text-low); margin-left: 6px; }
.cv-selo { cursor: default; }
.cv-nota {
  padding: 9px 18px; font-size: 12.5px; color: var(--cf-text-mid);
  border-bottom: 1px solid var(--cf-border-d);
  background: var(--cf-green-dim);
}
.cv-corpo {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
  padding: 18px 22px 26px;
  display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(ellipse 60% 40% at 85% 0%, rgba(var(--cf-green-rgb), 0.10), transparent 70%),
    linear-gradient(rgba(var(--cf-ink), 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(var(--cf-ink), 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--cf-dark);
}
.cv-corpo::-webkit-scrollbar-thumb { background: rgba(var(--cf-ink), 0.3); }
.cv-dia { display: flex; justify-content: center; margin: 6px 0; }
.cv-dia span {
  font-size: 11px; color: var(--cf-text-mid); padding: 3px 12px;
  border-radius: var(--cf-radius-full); background: rgba(var(--cf-ink), 0.07);
}
.cv-linha { display: flex; }
.cv-linha.cv-agente { justify-content: flex-end; }
.cv-bolha {
  max-width: 72%;
  padding: 9px 12px 6px;
  border-radius: var(--cf-radius);
  font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 2px 8px rgba(var(--cf-shade), 0.18);
}
.cv-lead .cv-bolha {
  background: var(--cf-dark4); color: var(--cf-text-hi);
  border: 1px solid var(--cf-border-d2);
  border-bottom-left-radius: 4px;
}
.cv-agente .cv-bolha {
  background: rgba(var(--cf-green-rgb), 0.16); color: var(--cf-text-hi);
  border: 1px solid rgba(var(--cf-green-rgb), 0.38);
  border-bottom-right-radius: 4px;
}
.cv-txt { white-space: normal; overflow-wrap: anywhere; }
.cv-rodape {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  font-size: 10.5px; color: var(--cf-text-low); margin-top: 3px;
}
.cv-rag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: var(--cf-radius-full);
  border: 1px solid rgba(var(--cf-blue-rgb), 0.5); color: rgb(var(--cf-blue-rgb));
}
.cv-evento { align-self: center; max-width: 86%; }
.cv-ev-hora { font-size: 10.5px; color: var(--cf-text-low); margin-left: auto; padding-left: 10px; }
/* trigger/tag: aviso de sistema no meio do chat, sem contorno (o tracejado
   incomodava, Renan 23/09/2026): texto discreto entre dois fios, com um ponto
   de cor que diz o que é */
.cv-pill {
  align-self: stretch; max-width: none;
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--cf-text-mid);
  margin: 2px 0;
}
.cv-pill::before, .cv-pill::after {
  content: ''; flex: 1; height: 1px; background: rgba(var(--cf-ink), 0.10);
}
.cv-pill-rot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cf-amber-ink);
}
.cv-pill-rot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.cv-tag .cv-pill-rot { color: rgb(var(--cf-blue-rgb)); }
.cv-pill .cv-ev-hora { margin-left: 0; padding-left: 0; }
.cv-tool {
  width: 86%;
  border: 1px solid rgba(var(--cf-ink), 0.14);
  border-left: 3px solid var(--cf-green);
  border-radius: var(--cf-radius);
  background: var(--cf-dark3);
  padding: 9px 12px 10px;
  font-size: 12px;
}
.cv-tool-cab { display: flex; align-items: center; gap: 7px; color: var(--cf-text-mid); }
.cv-tool-cab svg { width: 13px; height: 13px; color: var(--cf-green-ink); }
.cv-tool-cab span:first-of-type { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cf-green-ink); }
.cv-tool-cab b { font-family: var(--cf-mono); font-size: 12px; color: var(--cf-text-hi); }
.cv-tool-rot { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--cf-text-low); margin: 8px 0 3px; }
.cv-args { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; }
.cv-args dt { font-family: var(--cf-mono); font-size: 11px; color: var(--cf-green-ink); }
.cv-args dd { margin: 0; font-size: 12px; color: var(--cf-text-hi); overflow-wrap: anywhere; }
.cv-pre {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--cf-mono); font-size: 11.5px; line-height: 1.45;
  color: var(--cf-text-mid);
  background: rgba(var(--cf-shade), 0.22);
  border-radius: 8px; padding: 7px 9px;
}
.cv-pre.cv-corta { max-height: 150px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.cv-mais {
  margin-left: 8px; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--cf-green-ink);
}
@media (max-width: 640px) {
  .cv-bolha { max-width: 88%; }
  .cv-tool, .cv-evento { width: 100%; max-width: 100%; }
}

/* evidência de conversa: o item é uma prévia clicável do chat (23/09/2026) */
.ev-item.ev-conv {
  flex-direction: column; gap: 7px; cursor: pointer;
  border-left-color: var(--cf-green);
  transition: border-color .15s var(--cf-ease-smooth), background .15s var(--cf-ease-smooth);
}
.ev-item.ev-conv:hover { background: var(--cf-green-dim); border-color: rgba(var(--cf-green-rgb), 0.45); }
.ev-conv-cab { display: flex; align-items: center; gap: 8px; width: 100%; }
.ev-conv-cab svg { width: 15px; height: 15px; color: var(--cf-green-ink); }
.ev-conv-cab b { font-size: 13px; color: var(--cf-text-hi); }
.ev-conv-n { font-size: 11px; color: var(--cf-text-low); }
.ev-conv-previa {
  display: flex; flex-direction: column; gap: 5px; width: 100%;
  padding: 9px 10px; border-radius: 10px;
  background:
    linear-gradient(rgba(var(--cf-ink), 0.035) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(var(--cf-ink), 0.035) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--cf-dark);
}
.ev-pv { display: flex; }
.ev-pv span {
  max-width: 78%; font-size: 12px; line-height: 1.4; padding: 5px 9px; border-radius: 10px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ev-pv-lead span { background: var(--cf-dark4); color: var(--cf-text-hi); border: 1px solid var(--cf-border-d2); }
.ev-pv-agente { justify-content: flex-end; }
.ev-pv-agente span { background: rgba(var(--cf-green-rgb), 0.16); color: var(--cf-text-hi); border: 1px solid rgba(var(--cf-green-rgb), 0.38); }
.ev-conv-abrir { color: var(--cf-green-ink); font-weight: 700; }
.ev-conv .ev-item-meta a { color: var(--cf-text-mid); }
.ev-conv .ev-item-meta a:hover { color: var(--cf-green-ink); }

/* entregável de disparo: o hash à vista, para copiar (23/09/2026) */
.deliv-hash { display: inline-block; margin: 4px 0 2px; padding: 3px 8px; border-radius: 8px;
  font-size: 12.5px; background: var(--cf-surface-2, rgba(127,127,127,.12)); user-select: all;
  word-break: break-all; }

/* Copiar confirmado no próprio botão (23/09/2026) */
.copiado { background: var(--cf-green, #99ea48) !important; color: #0b0f0a !important;
  border-color: transparent !important; transition: background .15s; }

/* ---------- abas de Configurações (ver ABAS_CONFIG em shared.js) ---------- */
.config-tabs {
  display: flex; gap: 4px; padding: 0 26px; overflow-x: auto;
  border-bottom: 1px solid var(--cf-border-d); background: var(--cf-dark);
  scrollbar-width: none;
}
.config-tabs a {
  padding: 11px 12px 10px; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: var(--cf-text-mid); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.config-tabs a:hover { color: var(--cf-text-hi); }
.config-tabs a.on { color: var(--cf-green-ink); border-bottom-color: var(--cf-green); }