/* Seletor de usuário atual (simula multiusuário: Ediel / Luan / Luca) */
.role-switcher{margin-top:auto; margin-bottom:6px;}
.role-switcher .form-label{color:#9A957D;}
.sidebar .form-select{background:#20221A; color:#EDEAD9; border-color:#4A4636;}

/* Badge de notificação no menu */
.notif-badge{
  margin-left:auto; background:var(--red); color:#fff; font-family:'Space Mono';
  font-size:10px; min-width:16px; height:16px; border-radius:8px; display:none;
  align-items:center; justify-content:center; padding:0 4px;
}

/* Configurações (colunas) e Clientes: linhas de lista */
.settings-row{display:flex; align-items:center; gap:10px; min-width:0; max-width:100%; margin-bottom:10px;}
.settings-row > *{min-width:0;}
.settings-row .form-input{flex:1 1 0;}
.settings-row .form-select{min-width:0;}
.settings-row .form-btn{min-height:38px;margin:0;}
.settings-color-input{flex:0 0 38px; width:38px; height:38px; max-width:38px; padding:0;}

/* Trilha (timeline) dentro do card */
.timeline-block{margin:16px 0; padding-top:14px; border-top:1.5px solid var(--paper-line);}
.timeline-block h4{font-family:'Space Grotesk'; font-size:13.5px; display:flex; justify-content:space-between; margin-bottom:10px;}
.timeline-progress{font-family:'Space Mono'; font-size:11px; color:var(--muted);}
.timeline-list{display:flex; flex-direction:column; gap:8px;}
.timeline-step{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer;}
.timeline-step.done{color:var(--muted); text-decoration:line-through;}
.timeline-step input{width:16px; height:16px; accent-color:var(--lime);}

/* Comentários (chat da campanha) */
.comments-block{margin:16px 0; padding-top:14px; border-top:1.5px solid var(--paper-line);}
.comments-block h4{font-family:'Space Grotesk'; font-size:13.5px; margin-bottom:10px;}
.comments-list{display:flex; flex-direction:column; gap:8px; margin-bottom:12px; max-height:180px; overflow-y:auto;}
.comment-row{background:#fff; border:1.5px solid var(--ink); border-radius:8px; padding:8px 10px; font-size:12.5px;}
.comment-row b{font-family:'Space Grotesk'; font-size:12.5px;}
/* Header do comentário: nome à esquerda, timestamp à direita */
.comment-header{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:3px;}
.comment-time{font-family:'Space Mono'; font-size:9.5px; color:var(--muted); white-space:nowrap; flex-shrink:0;}
.comment-row p{margin-top:2px; line-height:1.4;}
.mention{background:var(--lime); padding:0 3px; border-radius:3px; font-weight:600;}
.comment-attachment{
  display:inline-block; margin-top:6px; font-family:'Space Mono'; font-size:11px;
  color:var(--ink); text-decoration:none; font-weight:600;
}
.comment-attachment:hover{text-decoration:underline;}

/* Status parcial no financeiro (metade lima, metade branco) */
.status-pill.parcial{background:linear-gradient(90deg, var(--lime) 50%, #fff 50%);}

/* ===== Prioridade Alta: badge "!" laranja + pulsa igual à Urgente ===== */
.card.priority-alta{
  box-shadow:5px 5px 0 #E08A1E;
  border:2px solid #E08A1E !important;
}
.card.priority-alta::after{
  content:"!"; position:absolute; top:-10px; right:-10px; width:24px; height:24px;
  background:#E08A1E; color:#fff; border:2px solid var(--ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  box-shadow:2px 2px 0 var(--ink);
  animation: pulse-alta 1.3s ease-in-out infinite;
}
@keyframes pulse-alta {
  0%, 100% { box-shadow: 2px 2px 0 var(--ink); }
  50% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 5px rgba(224,138,30,.28); }
}

/* ===== Prioridade Normal: bolinha azul pulsando ===== */
.card.priority-normal::before{
  /* já existe a barra lateral; adiciona bolinha no canto */
}
.card.priority-normal::after{
  content:""; position:absolute; top:-7px; right:-7px; width:14px; height:14px;
  background:#002df9; border:2px solid var(--ink); border-radius:50%;
  box-shadow:2px 2px 0 var(--ink);
  animation: pulse-normal 1.8s ease-in-out infinite;
}
@keyframes pulse-normal {
  0%, 100% { box-shadow: 2px 2px 0 var(--ink); }
  50% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 5px rgba(0,45,249,.22); }
}

/* ===== Prioridade Baixa: bolinha verde estática ===== */
.card.priority-baixa::after{
  content:""; position:absolute; top:-7px; right:-7px; width:14px; height:14px;
  background:#25C26E; border:2px solid var(--ink); border-radius:50%;
  box-shadow:2px 2px 0 var(--ink);
}

/* Anexos */
.attachment-row{display:flex; justify-content:space-between; align-items:center;}
.attachment-row a{color:var(--ink); font-size:12.5px; text-decoration:none; font-weight:600;}
.attachment-row a:hover{text-decoration:underline;}
.attachment-form-row{align-items:stretch;}
.attachment-form-row .form-btn{margin:0; flex:0 0 auto; white-space:nowrap;}

/* Respostas em thread */
.comment-reply{
  margin:8px 0 0 16px; padding:6px 10px; background:var(--paper);
  border-left:2.5px solid var(--lime-dark); border-radius:0 6px 6px 0; font-size:12px;
}
.comment-reply b{font-family:'Space Grotesk'; font-size:12px;}
.comment-reply p{margin-top:2px; line-height:1.4;}
.comment-reply .comment-header{margin-bottom:2px;}
.reply-slot{margin-top:6px;}
.reply-link{
  font-family:'Space Mono'; font-size:10.5px; color:var(--muted);
  text-decoration:underline; cursor:pointer;
}
.reply-link:hover{color:var(--ink);}

/* Badges de rede social no card do Kanban */
.card-networks{display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap;}
.net-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:5px;
  border:1.5px solid var(--ink); background:#fff;
  color:var(--ink); flex-shrink:0;
}
.net-badge svg{ display:block; }
.net-badge.net-instagram{background:#F6E9FF;}
.net-badge.net-instagram-stories{background:#EFE3FF;}
.net-badge.net-tiktok{background:#E9FFF9;}
.net-badge.net-youtube{background:#FFE9E9;}
.net-badge.net-kwai{background:#FFF6D9;}
.net-badge.net-facebook{background:#E9F0FF;}
.net-badge.net-yt-dedicado{background:#FFD9D9;}
.net-badge.net-insercao{background:#FFEBC2;}
.edit-net, .new-net{width:16px; height:16px; accent-color:var(--lime);}
/* Dark mode: mantém texto dos badges escuro (ícones também ficam escuros, legível em fundo claro) */

/* Prazo vencido */
.deadline.overdue-text{color:var(--red); font-weight:700;}

/* Painel de campanhas arquivadas (fechado por padrão) */
.archived-list{display:none;}
.archived-list.open{display:block;}

/* Mini-modal (cadastro rápido de cliente) fica por cima do modal principal */
.modal-overlay.mini{z-index:90;}

/* ══════════════════════════════════════════════════════════════
   Hambúrguer + sidebar off-canvas (mobile)
   ══════════════════════════════════════════════════════════════ */

/* Botão hambúrguer — só aparece em telas ≤ 640px */
.ham-btn{
  display:none;
  position:fixed; top:14px; left:14px; z-index:120;
  width:40px; height:40px; border-radius:8px;
  background:var(--sidebar-bg,#16140F); border:2px solid #4A4636;
  cursor:pointer; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  padding:0; box-shadow:2px 2px 0 rgba(0,0,0,.3);
}
.ham-btn span{
  display:block; width:18px; height:2px;
  background:#EDEAD9; border-radius:2px;
  transition:transform .2s, opacity .2s;
}
/* X quando aberto */
.ham-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ham-btn.open span:nth-child(2){ opacity:0; }
.ham-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Overlay escuro atrás da sidebar */
.sidebar-overlay{
  display:none; position:fixed; inset:0; z-index:109;
  background:rgba(22,20,15,.55);
}
.sidebar-overlay.active{ display:block; }

/* Celular: board mais estreito, sidebar off-canvas, dashboard em coluna única */
@media (max-width:640px){
  /* Hambúrguer visível */
  .ham-btn{ display:flex; }

  /* Sidebar some do fluxo normal e se torna overlay deslizante */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:110;
    width:240px; padding:22px 16px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    overflow-y:auto;
  }
  .sidebar.open{ transform:translateX(0); }

  /* Main ocupa tela inteira */
  .main{ padding:60px 14px 18px; }

  h1{font-size:22px;}
  /* A rolagem horizontal do board era do .main inteiro (herdado do desktop) —
     arrastar os cards de lado também arrastava o cabeçalho (título, busca,
     estatísticas) pra fora da tela, deixando um vão em branco no topo até
     rolar de volta. Trava o .main na largura da tela e isola a rolagem
     horizontal só dentro do próprio board — cabeçalho fica sempre parado. */
  .main{ overflow-x:hidden; }
  .board{
    gap:12px; scroll-snap-type:x mandatory; padding-bottom:10px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:0 -14px; padding-left:14px; padding-right:14px;
  }
  .column{width:82vw; flex:0 0 82vw; scroll-snap-align:start;}
  .stat{min-width:66px; padding:6px 9px;}
  .stat b{font-size:15px;}
  .dash-grid{grid-template-columns:1fr;}
  /* O modal ocupa somente a área útil e nunca vira uma faixa horizontal.
     Isso também evita o "samba" lateral do formulário no Safari mobile. */
  .modal-overlay{
    padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .modal{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:16px 14px;
    max-height:92vh;
    resize:none;
  }
  #modal-body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  body.modal-open{overflow:hidden; overscroll-behavior:none;}
  #kanban-search{max-width:100%;}
  .fab{width:50px; height:50px; bottom:16px; right:16px; font-size:26px;}
  .topbar{margin-bottom:14px;}

  /* O FAB global não pode cobrir os controles fixos do chat. */
  body[data-active-view="mensagens"] .fab,
  body[data-active-view="admin"] .fab{ display:none !important; }

  /* Cartões da administração: texto e ações em linhas separadas. */
  #admin-users-list .attention-row{ flex-wrap:wrap; align-items:flex-start; }
  #admin-users-list .attention-row > div:first-child{
    flex:1 0 100% !important; min-width:0; overflow-wrap:anywhere;
  }
  #admin-users-list .attention-row .form-input{ max-width:calc(100% - 96px); }

  /* ── Card modal: ajustes de conteúdo no mobile ────────────────────────── */

  /* Seções do card: padding menor */
  .card-section{ padding:10px 10px; margin:10px 0; }

  /* Botões de ação (Editar/Clonar/Arquivar/Salvar etc.) quebram em nova linha */
  .form-btn{
    display:inline-block;
    margin-right:6px;
    margin-bottom:6px;
    padding:8px 12px;
    font-size:11px;
  }

  /* Botão "Enviar" do comentário: largura total para fácil toque */
  .btn-send-comment{
    display:block;
    width:100%;
    margin-right:0;
    margin-top:8px;
    padding:11px;
    font-size:12px;
    text-align:center;
  }

  /* Modal row: permite quebra para valores longos */
  .modal-row{ flex-wrap:wrap; gap:4px; }
  .modal-row b{ text-align:right; }

  /* Tabela financeira no modal: scroll horizontal */
  .fin-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .fin-table{ min-width:480px; }

  /* Campo de anexo no comentário: empilha botão + input */
  .comment-attach-row{ flex-direction:column; align-items:stretch; }
  .comment-attach-row .form-btn{ flex-shrink:unset; width:100%; margin:0 0 6px; }

  /* Modal h2 um pouco menor */
  .modal h2{ font-size:19px; }

  /* Controles com altura e tipografia estáveis: evita zoom e diferenças entre
     os componentes nativos do Safari, especialmente data e select. */
  .form-input, .form-textarea, .form-select{ font-size:16px; }
  .form-input, .form-select{min-height:44px;}
  .form-inline-row > .form-btn{min-height:44px;}
  .form-input[type="date"]{
    width:100%; min-width:0; max-width:100%; min-height:44px;
    overflow:hidden; padding-inline:10px; text-align:left;
  }
  .form-input[type="date"]::-webkit-date-and-time-value{
    width:100%; min-width:0; margin:0; text-align:left;
  }

  /* Linhas compostas precisam poder encolher dentro do modal. */
  .form-inline-row{width:100%;}
  .form-client-row > .form-btn{flex:0 0 auto;}
  .form-value-row > .form-select{flex:0 0 92px; max-width:92px !important;}
  .form-file-row{flex-direction:column; align-items:stretch;}
  .form-file-row > .form-btn{width:100%; white-space:normal;}

  /* Linhas auxiliares deixam de espremer campos em telas estreitas. */
  .attachment-form-row,
  .form-actions-row{flex-direction:column;align-items:stretch;}
  .attachment-form-row .form-btn,
  .form-actions-row .form-btn{width:100%;min-height:44px;margin:0;white-space:normal;}

  .settings-row{align-items:stretch;flex-wrap:wrap;}
  .settings-row .form-input{flex:1 1 170px;}
  .settings-row .form-select{flex:1 1 160px;max-width:none !important;}
  .settings-row .form-btn{margin:0;}
  .settings-color-input{flex-basis:44px;width:44px;height:44px;max-width:44px;}
  .settings-row.theme-row{align-items:center;flex-wrap:nowrap;}
  .settings-row.appearance-row{align-items:flex-start;}
  .settings-row.appearance-row > :last-child{flex:1 1 190px;min-width:0 !important;}
  .settings-new-stage{align-items:flex-end !important;}
  .settings-new-stage > :first-child{flex:1 1 180px !important;}

}

/* O iOS aplica uma largura intrínseca ao date picker. Remover somente a
   aparência nativa visual mantém o seletor por toque e impede a faixa que
   ultrapassava a borda direita do modal. */
@supports (-webkit-touch-callout:none){
  @media (max-width:640px){
    .form-input[type="date"]{-webkit-appearance:none;appearance:none;}
  }
}

/* ===== Glass sutil nas colunas do Kanban ===== */
.column{
  background: rgba(251,248,238,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 10px 8px 14px;
  border: 1.5px solid rgba(22,20,15,0.08);
}
body.dark .column{
  background: rgba(34,31,22,0.6);
  border-color: rgba(237,234,217,0.07);
}

/* ===== Badge urgente pulsando ===== */
@keyframes pulse-urgent {
  0%, 100% { box-shadow: 2px 2px 0 var(--ink); }
  50% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 5px rgba(196,39,27,.25); }
}
.card.urgent::after{
  animation: pulse-urgent 1.3s ease-in-out infinite;
}

/* ===== Badge de notificações: pulsa quando há mensagens novas ===== */
@keyframes pulse-notif {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.notif-badge[style*="flex"]{
  animation: pulse-notif 1.8s ease-in-out infinite;
}

/* ===== Card de alerta urgente: borda vermelha ===== */
.card.urgent{
  border: 2px solid var(--red) !important;
}

/* ===== Bloco de nota de correção (O que ajustar) ===== */
.correction-note-block{
  background:#FFF8EC; border:2px solid #E08A1E; border-radius:10px;
  padding:12px 14px; margin-bottom:14px;
}
.correction-note-label{
  font-family:'Space Mono'; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#A05A10;
  display:flex; align-items:center; gap:5px; margin-bottom:6px;
}
.correction-note-text{
  font-size:13px; line-height:1.5; color:var(--ink); white-space:pre-wrap;
}
body.dark .correction-note-block{background:#2C1E00; border-color:#A05A10;}
body.dark .correction-note-label{color:#F0A832;}

/* ===== Histórico permanente de ajustes ===== */
.correction-history-section{border-color:rgba(229,57,61,.28);}
.correction-current-title{
  color:var(--red);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin:2px 0 8px;
}
.correction-round{
  border:1px solid var(--paper-line);border-radius:9px;padding:12px 14px;
  margin-bottom:10px;background:var(--card);
}
.correction-round.is-current{
  border:1.5px solid rgba(229,57,61,.72);
  box-shadow:inset 4px 0 0 var(--red);
}
.correction-round.is-past{opacity:.64;background:transparent;}
.correction-round-head,.correction-author-row,.correction-live-actions{
  display:flex;align-items:center;gap:8px;
}
.correction-round-head{justify-content:space-between;margin-bottom:9px;font-size:12px;}
.correction-status{
  display:inline-flex;padding:3px 7px;border-radius:5px;background:rgba(229,57,61,.11);
  color:var(--red);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.correction-round.is-past .correction-status{background:var(--paper);color:var(--muted);}
.correction-author-row{justify-content:space-between;color:var(--muted);font-size:10.5px;margin-bottom:5px;}
.correction-author-row strong{color:var(--ink);font-weight:600;}
.correction-round-note{font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
.correction-message{
  border-top:1px solid var(--paper-line);margin-top:10px;padding-top:10px;
  font-size:12.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
}
.correction-live-composer{border-top:1px solid var(--paper-line);margin-top:12px;padding-top:10px;}
.correction-live-composer .form-textarea{min-height:64px;margin:0 0 7px;}
.correction-live-actions{flex-wrap:wrap;}
.correction-live-actions .form-btn{margin:0;}
.correction-done-btn{margin-left:auto !important;}
.correction-completed-meta{font-size:10.5px;color:var(--muted);margin-top:9px;}
.correction-past-list{border-top:1px solid var(--paper-line);padding-top:10px;margin-top:12px;}
.correction-past-list summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:600;margin-bottom:9px;}
.correction-empty{margin:0;}
.correction-source-preview{
  border:1px solid rgba(229,57,61,.35);border-radius:8px;background:rgba(229,57,61,.07);
  padding:10px 12px;margin:12px 0;font-size:13px;line-height:1.5;white-space:pre-wrap;
}
.correction-source-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--red);margin-bottom:4px;}
.correction-entry-error{display:none;color:var(--red);font-size:11px;font-weight:600;margin-top:5px;}
.correction-entry-error.visible{display:block;}
.form-textarea.field-error{border-color:var(--red) !important;box-shadow:0 0 0 3px rgba(229,57,61,.12) !important;}
.correction-badge{
  display:flex;align-items:center;gap:4px;width:max-content;max-width:100%;
  margin:6px 0 2px;padding:3px 7px;border-radius:5px;
  background:rgba(229,57,61,.11);border:1px solid rgba(229,57,61,.28);
  color:var(--red);font-size:9.5px;font-weight:700;
}
body.dark .correction-round{background:#1B1E22;}
body.dark .correction-round.is-past{background:transparent;}
body.dark .correction-round.is-current{border-color:rgba(255,107,107,.62);}
body.dark .correction-status,body.dark .correction-source-label,body.dark .correction-current-title,
body.dark .correction-badge{color:#ff7373;}
body.dark .correction-source-preview{background:rgba(229,57,61,.09);border-color:rgba(255,107,107,.3);}

/* Botão flutuante de nova campanha */
.fab{
  position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%;
  background:var(--lime); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  font-size:30px; font-weight:700; color:#16140F; cursor:pointer; z-index:60;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.fab:hover{transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink);}

/* Toggle do modo escuro */
.toggle-switch{position:relative; display:inline-block; width:48px; height:26px; vertical-align:middle;}
.toggle-switch input{opacity:0; width:0; height:0; position:absolute;}
.toggle-slider{position:absolute; inset:0; background:#fff; border:2px solid var(--ink); border-radius:20px; cursor:pointer; transition:.2s;}
.toggle-slider::before{content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; background:#16140F; border-radius:50%; transition:.2s;}
.toggle-switch input:checked + .toggle-slider{background:var(--lime);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px);}
.settings-row.theme-row{align-items:center;}

/* Modo escuro: paleta invertida (sidebar e badges pretos ficam fixos, ver --sidebar-bg) */
body.dark{
  --paper:#18160F;
  --paper-line:#2A2618;
  --card:#221F16;
  --ink:#EDEAD9;
  --muted:#9B9580;
}
/* Elementos com fundo sempre claro/lima precisam de texto sempre escuro,
   nos dois temas, senão o texto claro do modo escuro fica ilegível neles */
body.dark .card-tag,
body.dark .form-input,
body.dark .form-textarea,
body.dark .form-select,
body.dark .attention-row,
body.dark .modal-close,
body.dark .form-btn,
body.dark .comment-row,
body.dark .status-pill,
body.dark .net-badge,
body.dark .avatar,
body.dark .attention-collab,
body.dark .brand-mark,
body.dark .nav-item.active,
body.dark .mention,
body.dark .modal-tag,
body.dark .comment-attachment{
  color:#16140F;
}

/* ===== Tela de login ===== */
/* O visual da tela de login (overlay, card, campos, botão, link, erro) mora
   inteiro em css/auth.css agora — identidade fixa, isolada dos tokens de
   tema do dashboard. Ver esse arquivo para o porquê. */
#app-root{display:none;}

/* Data de criação — discreta no rodapé do card */
.card-created{
  font-family:'Space Mono'; font-size:9px; color:var(--muted);
  opacity:.7; white-space:nowrap;
}

/* Data de criação no modal do card */
.modal-created{
  font-family:'Space Mono'; font-size:11px; color:var(--muted);
}

/* Botão clonar — aparece no hover do card, canto superior direito */
.card-clone-btn{
  position:absolute; top:6px; right:28px;
  background:none; border:none; cursor:pointer;
  font-size:13px; color:var(--muted); padding:2px 4px;
  opacity:0; transition:opacity .15s;
  line-height:1;
}
.card:hover .card-clone-btn{ opacity:.7; }
.card-clone-btn:hover{ opacity:1 !important; color:var(--ink); }

/* Garante position:relative no card para o botão se posicionar corretamente */
.card{ position:relative; }

/* ══════════════════════════════════════════════════════════════
   Toggle de ordem das colunas do board (Campanhas)
   ══════════════════════════════════════════════════════════════ */
.board-order-toggle{
  display:inline-flex; gap:4px; margin-bottom:14px;
  background:var(--surface2, rgba(128,128,128,.08));
  border-radius:8px; padding:3px;
}
.board-order-btn{
  font-family:'Space Mono', monospace; font-size:11px;
  background:none; border:none; cursor:pointer;
  padding:4px 12px; border-radius:6px;
  color:var(--muted); transition:background .15s, color .15s;
}
.board-order-btn:hover{ color:var(--ink); }
.board-order-btn.active{
  background:var(--card-bg, var(--bg));
  color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}

/* ══════════════════════════════════════════════════════════════
   Badge de aprovação (aparece no card em Aguard. Cliente)
   ══════════════════════════════════════════════════════════════ */
.approval-badge{
  display:inline-block; margin-top:5px;
  font-family:'Space Mono', monospace; font-size:9px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:4px;
  background:rgba(255,175,30,.15); color:#a06800;
  border:1px solid rgba(255,175,30,.4);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .approval-badge{ background:rgba(255,175,30,.12); color:#ffc040; border-color:rgba(255,175,30,.3); } }
:root[data-theme="dark"] .approval-badge{ background:rgba(255,175,30,.12); color:#ffc040; border-color:rgba(255,175,30,.3); }

/* ══════════════════════════════════════════════════════════════
   Checklist de publicação no card (P/ Publicar)
   ══════════════════════════════════════════════════════════════ */
.pub-checklist{
  margin-top:6px;
  display:flex; flex-direction:column; gap:3px;
}
.pub-check{
  display:flex; align-items:center; gap:6px;
  font-family:'Space Mono', monospace; font-size:10px;
  color:var(--muted);
}
.pub-check input[type=checkbox]{ accent-color:var(--green, #25c26e); cursor:pointer; }
.pub-check.published{ color:var(--ink); }
.pub-progress{
  font-family:'Space Mono', monospace; font-size:9px;
  color:var(--muted); margin-top:2px;
}

/* ══════════════════════════════════════════════════════════════
   Versões no modal (checklist + seletor de aprovação)
   ══════════════════════════════════════════════════════════════ */
.modal-pub-checklist{
  display:flex; flex-direction:column; gap:6px; padding:4px 0;
}
.modal-pub-check{
  display:flex; align-items:center; gap:8px;
  font-family:'Space Mono', monospace; font-size:12px;
  color:var(--ink); cursor:pointer;
}
.modal-pub-check input[type=checkbox]{ accent-color:var(--green, #25c26e); width:15px; height:15px; cursor:pointer; }

/* ══════════════════════════════════════════════════════════════
   Timeline — toggle lista / linha do tempo
   ══════════════════════════════════════════════════════════════ */
.tl-view-toggle{
  display:inline-flex; gap:2px; margin-left:8px; vertical-align:middle;
}
.tl-view-btn{
  font-family:'Space Mono',monospace; font-size:10px;
  background:none; border:1px solid var(--border);
  border-radius:4px; padding:2px 8px; cursor:pointer; color:var(--muted);
  transition:background .12s, color .12s;
}
.tl-view-btn:hover{ color:var(--ink); }
.tl-view-btn.active{ background:var(--ink); color:var(--lime); border-color:var(--ink); }

/* Eventos inline na vista lista */
.tl-event-item{
  padding:3px 0; font-size:11px; font-family:'Space Mono',monospace;
  color:var(--muted); font-style:italic;
}

/* ── Visual vertical timeline ────────────────────────────── */
.timeline-visual{
  display:flex; flex-direction:column; padding:4px 0;
}
.tl-node{
  display:grid; grid-template-columns:22px 1fr;
  grid-template-rows:auto 1fr;
  column-gap:12px;
  cursor:pointer; position:relative;
}
/* Linha conectora entre nós */
.tl-node:not(:last-child) .tl-track-connector{
  grid-column:1; grid-row:2;
  justify-self:center;
  width:2px; min-height:14px;
  background:var(--border);
}
.tl-node.done:not(:last-child) .tl-track-connector{ background:var(--green); opacity:.55; }
.tl-node.current:not(:last-child) .tl-track-connector{ background:var(--yellow,#f5a623); opacity:.4; }

.tl-dot{
  grid-column:1; grid-row:1;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
  background:var(--surface2,rgba(128,128,128,.08));
  border:2px solid var(--border);
  color:var(--muted);
  transition:background .15s, border-color .15s;
  user-select:none;
}
.tl-node.done .tl-dot{
  background:var(--green); border-color:var(--green); color:#fff;
}
.tl-node.current .tl-dot{
  background:#ffb020; border-color:#ffb020; color:#fff;
  animation:tl-pulse 1.6s ease-in-out infinite;
}
@keyframes tl-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,176,32,.45); }
  50%{ box-shadow:0 0 0 7px rgba(255,176,32,0); }
}
@media (prefers-reduced-motion:reduce){ .tl-node.current .tl-dot{ animation:none; } }

.tl-node-label{
  grid-column:2; grid-row:1;
  padding:2px 0 10px;
  font-size:13px; color:var(--muted);
}
.tl-node.done .tl-node-label{ color:var(--ink); }
.tl-label-current{ color:var(--ink) !important; font-weight:600; }

.tl-now-tag{
  display:inline-block; margin-left:7px;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:#ffb020; border:1px solid rgba(255,176,32,.5);
  border-radius:4px; padding:1px 5px;
}

/* Log de eventos abaixo da trilha */
.tl-events-log{
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border);
}
.tl-events-label{
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px;
}

/* ══════════════════════════════════════════════════════════════
   Widget "Carga por colaborador" no Dashboard
   ══════════════════════════════════════════════════════════════ */
.cw-subhead{
  font-size:12px; color:var(--muted);
  font-family:'Space Mono',monospace; margin-bottom:14px;
}
.cw-row{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.cw-avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--accent,#D8FF3E); color:#16140F;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  flex-shrink:0;
}
.cw-info{ flex:1; min-width:0; }
.cw-name{ font-size:13px; font-weight:600; margin-bottom:4px; }
.cw-bar-wrap{
  height:6px; background:var(--surface2,rgba(128,128,128,.1));
  border-radius:3px; overflow:hidden;
}
.cw-bar{
  height:100%; border-radius:3px;
  background:var(--green); transition:width .4s ease;
}
.cw-bar.mid{ background:#ffb020; }
.cw-bar.high{ background:var(--red,#e5393d); }
.cw-count{ font-family:'Space Mono',monospace; font-size:14px; font-weight:700; min-width:20px; text-align:right; }
.cw-count.mid{ color:#ffb020; }
.cw-count.high{ color:var(--red,#e5393d); }

/* Chart.js com maintainAspectRatio:false precisa de um container com altura
   explícita, senão o canvas cresce indefinidamente. Usado pelos gráficos de
   tempo de ciclo (Dashboard) e spend/campanhas por rede (Financeiro). */
.chart-canvas-wrap{ position:relative; height:220px; }
.chart-canvas-wrap canvas{ max-width:100%; }

/* ══════════════════════════════════════════════════════════════
   Seção de link de aprovação pública (dentro do modal)
   ══════════════════════════════════════════════════════════════ */
.approval-link-box{
  background:var(--bg); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; margin-bottom:10px;
}
.appr-status-row{ margin-bottom:8px; font-size:13px; font-weight:600; }
.appr-status{ font-size:12px; padding:3px 8px; border-radius:5px; }
.appr-status.pending{  background:rgba(245,166,35,.12); color:#a06800; }
.appr-status.approved{ background:rgba(37,194,110,.12); color:#1a8a4a; }
.appr-status.changes{  background:rgba(229,57,61,.10);  color:#c0302f; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .appr-status.pending  { color:#ffc040; }
  :root:not([data-theme="light"]) .appr-status.approved { color:#3dd68c; }
  :root:not([data-theme="light"]) .appr-status.changes  { color:#ff6b6b; }
}
:root[data-theme="dark"] .appr-status.pending  { color:#ffc040; }
:root[data-theme="dark"] .appr-status.approved { color:#3dd68c; }
:root[data-theme="dark"] .appr-status.changes  { color:#ff6b6b; }

.appr-link-row{ display:flex; align-items:stretch; gap:6px; min-width:0; max-width:100%; margin-bottom:5px; }
.appr-link-row .form-input{ flex:1 1 0; min-width:0; }
.appr-link-row .form-btn{ min-height:38px; margin:0; flex:0 0 auto; }
.form-actions-row{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;flex-wrap:wrap;}
.form-actions-row .form-btn{margin:0;}
.appr-hint{ font-size:11px; color:var(--muted); font-family:'Space Mono',monospace; }
.appr-client-comment{
  background:rgba(229,57,61,.06); border:1px solid rgba(229,57,61,.2);
  border-radius:6px; padding:8px 10px; font-size:12px;
  margin:6px 0; color:var(--ink);
}

/* ══════════════════════════════════════════════════════════════
   Campos de link por rede (P/ Publicar — modal)
   ══════════════════════════════════════════════════════════════ */
.pub-links-list{
  display:flex; flex-direction:column; gap:8px; margin-top:8px;
}
.pub-link-row{
  display:grid;
  grid-template-columns:26px minmax(90px,.45fr) minmax(0,1fr) 20px;
  align-items:center;
  gap:8px;
  min-width:0;
  transition:opacity .15s;
}
.pub-link-row.published .pub-link-name{ color:var(--ink); font-weight:600; }
.pub-link-row.published .pub-link-input{ border-color:var(--green); }

.pub-link-icon{
  /* herda estilos de .net-badge — só adiciona tamanho explícito */
  width:24px; height:24px; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pub-link-name{
  font-size:12px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.pub-link-input{
  font-size:12px; padding:5px 8px;
  min-width:0;
}
.pub-link-ok{
  font-size:14px; font-weight:700;
  color:var(--green);
  transition:opacity .15s;
  text-align:center;
}

/* ══════════════════════════════════════════════════════════════
   Botão de notificações push (sidebar)
   ══════════════════════════════════════════════════════════════ */
#push-toggle-btn.active{
  color:var(--green); border-color:var(--green);
}

/* ══════════════════════════════════════════════════════════════
   Trilha — log imutável de eventos (timeline.js)
   ══════════════════════════════════════════════════════════════ */

/* Lista (modo padrão) */
.tl-log-list{
  display:flex; flex-direction:column; gap:0;
}
.tl-log-row{
  display:grid;
  grid-template-columns: 6px 28px 1fr auto;
  align-items:center;
  gap:8px;
  padding:7px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.tl-log-row:last-child{ border-bottom:none; }

.tl-log-dot{
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0;
}
.tl-actor{
  font-size:9px; padding:2px 4px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.04em;
  font-weight:700;
}
.tl-log-label{
  font-size:13px; color:var(--ink); line-height:1.4;
}
.tl-log-ts{
  font-family:'Space Mono',monospace;
  font-size:10px; color:var(--muted);
  white-space:nowrap; flex-shrink:0;
}

/* Visual — reutiliza tl-node mas sem interatividade */
.tl-node{ cursor:default; }
.tl-node.done .tl-dot{
  /* cor injetada inline por tipo de evento */
  color:#fff; font-size:10px;
}

/* ══════════════════════════════════════════════════════════════
   Seções visuais do modal de campanha (.card-section)
   ══════════════════════════════════════════════════════════════ */
.card-section{
  background:rgba(22,20,15,.035);
  border:1.5px solid var(--paper-line);
  border-radius:10px;
  padding:12px 14px;
  margin:12px 0;
}
body.dark .card-section{
  background:rgba(237,234,217,.04);
}
.card-section-title{
  font-family:'Space Mono',monospace;
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:10px; padding-bottom:6px;
  border-bottom:1px solid var(--paper-line);
}
/* Remove borda/espaço extra dos .comments-block quando dentro de .card-section */
.card-section > .comments-block{
  margin:0; padding-top:0; border-top:none;
}
.card-section > .comments-block + .comments-block{
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--paper-line);
}

/* ══════════════════════════════════════════════════════════════
   Widget "Sua fila" no Dashboard (#my-queue-list)
   ══════════════════════════════════════════════════════════════ */
.mq-header{
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.mq-name{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
}
.mq-mentions{
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  background:var(--red,#e5393d); color:#fff;
  padding:2px 8px; border-radius:8px;
}
.mq-group{ margin-bottom:12px; }
.mq-group:last-child{ margin-bottom:0; }
.mq-group-label{
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-bottom:6px;
}
.mq-group-label.urgente{ color:var(--red,#e5393d); }
.mq-group-label.atrasada{ color:#E08A1E; }
.mq-group-label.ativa{ color:var(--ink); }
.mq-group-label.espera{ color:var(--muted); }
.mq-row{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  column-gap:8px;
  cursor:pointer;
  padding:7px 0;
  border-bottom:1px solid var(--paper-line);
  transition:background .12s;
}
.mq-row:last-child{ border-bottom:none; }
.mq-row:hover{ background:rgba(22,20,15,.04); border-radius:6px; padding-left:4px; }
body.dark .mq-row:hover{ background:rgba(237,234,217,.05); }
.mq-card-brand{
  grid-column:1; grid-row:1;
  font-size:13px; font-weight:600;
}
.mq-card-meta{
  grid-column:1; grid-row:2;
  font-family:'Space Mono',monospace; font-size:10.5px; color:var(--muted);
}
.mq-card-deadline{
  grid-column:2; grid-row:1/3;
  align-self:center;
  font-family:'Space Mono',monospace; font-size:10px; color:var(--muted);
  text-align:right;
}
.mq-card-deadline.overdue{
  color:var(--red,#e5393d); font-weight:700;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard — Pipeline CSS (substitui chart-stage)
   ══════════════════════════════════════════════════════════════ */
.dp-row{
  display:grid; grid-template-columns:130px 1fr 28px;
  align-items:center; gap:10px; margin-bottom:8px;
}
.dp-label{
  font-size:12px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dp-bar-wrap{
  height:10px; background:rgba(22,20,15,.07);
  border-radius:5px; overflow:hidden;
}
body.dark .dp-bar-wrap{ background:rgba(237,234,217,.08); }
.dp-bar{
  height:100%; border-radius:5px;
  transition:width .4s ease;
  border:1px solid rgba(22,20,15,.15);
}
.dp-count{
  font-family:'Space Mono',monospace; font-size:12px;
  font-weight:700; text-align:right;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard — Financeiro detalhado (substitui chart-financeiro)
   ══════════════════════════════════════════════════════════════ */
.fdd-kpis{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
}
.fdd-kpi{
  background:rgba(22,20,15,.03); border:1px solid var(--paper-line);
  border-radius:8px; padding:10px 12px;
}
body.dark .fdd-kpi{ background:rgba(237,234,217,.04); }
.fdd-kpi-label{
  font-family:'Space Mono',monospace; font-size:10px;
  color:var(--muted); margin-bottom:4px;
}
.fdd-kpi-val{
  font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700;
}
.fdd-kpi-val.ok  { color:var(--green,#25c26e); }
.fdd-kpi-val.warn{ color:#E08A1E; }
.fdd-section-label{
  font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:10px 0 6px;
}
.fdd-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; padding:5px 0;
  border-bottom:1px solid var(--paper-line);
}
.fdd-row:last-child{ border-bottom:none; }
.fdd-overdue{ color:var(--red,#e5393d); font-weight:600; }
.fdd-venc{ font-family:'Space Mono',monospace; font-size:10px; color:var(--muted); }

/* ══════════════════════════════════════════════════════════════
   Chat de equipe (team-chat.js)
   ══════════════════════════════════════════════════════════════ */

/* Abas Equipe / Campanhas na view Mensagens */
.msg-view-tabs{
  display:flex; gap:0; margin-bottom:18px;
  border:2px solid var(--ink); border-radius:10px;
  overflow:hidden; width:fit-content;
}
.msg-view-tab{
  font-family:'Space Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.05em;
  padding:8px 20px; cursor:pointer;
  background:var(--card); border:none; color:var(--muted);
  transition:background .15s, color .15s;
}
.msg-view-tab.active{
  background:var(--ink); color:var(--lime);
}
.msg-view-tab:first-child{ border-right:2px solid var(--ink); }
.msg-view-badge{
  display:none; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px; margin-left:6px;
  border-radius:9px; background:var(--red); color:#fff;
  font-size:9px; font-weight:700; line-height:1;
}

/* Container do chat de equipe */
.tchat-wrap{
  display:flex; flex-direction:column;
  height:calc(100vh - 220px); min-height:360px; max-height:680px;
  border:2px solid var(--ink); border-radius:14px;
  overflow:hidden; background:var(--card);
  box-shadow:4px 4px 0 var(--ink);
}

/* Barra de presença */
.tchat-presence{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; background:rgba(22,20,15,.04);
  border-bottom:1.5px solid var(--paper-line);
  flex-shrink:0;
}
body.dark .tchat-presence{ background:rgba(237,234,217,.04); }
.tchat-presence-label{
  font-family:'Space Mono',monospace; font-size:9px;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); flex-shrink:0;
}
.tchat-nobody{ font-size:12px; color:var(--muted); }
.tchat-presence-pill{
  display:flex; align-items:center; gap:5px;
  background:rgba(22,20,15,.05); border-radius:20px;
  padding:3px 8px 3px 3px;
}
body.dark .tchat-presence-pill{ background:rgba(237,234,217,.06); }
.tchat-presence-name{
  font-size:12px; font-weight:600; color:var(--ink);
}
.tchat-online-dot{
  width:7px; height:7px; border-radius:50%;
  background:#25c26e; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(37,194,110,.25);
  animation:tchat-pulse 2s infinite;
}
@keyframes tchat-pulse{
  0%,100%{ box-shadow:0 0 0 2px rgba(37,194,110,.25); }
  50%     { box-shadow:0 0 0 5px rgba(37,194,110,.1); }
}

/* Avatares */
.tchat-avatar-sm{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:9px; font-weight:700;
  flex-shrink:0; border:1.5px solid rgba(22,20,15,.15);
}
.tchat-avatar{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700;
  flex-shrink:0; border:2px solid rgba(22,20,15,.12);
  align-self:flex-end;
}
.tchat-photo{
  display:block; max-width:260px; max-height:220px; width:auto; height:auto;
  border-radius:8px; margin-top:7px; object-fit:cover; border:1px solid var(--paper-line);
}

/* Lista de mensagens */
.tchat-messages{
  flex:1; overflow-y:auto; padding:16px 14px;
  display:flex; flex-direction:column; gap:6px;
  min-height:0;
  scrollbar-width:thin; scrollbar-color:var(--paper-line) transparent;
}
.tchat-messages::-webkit-scrollbar{ width:6px; }
.tchat-messages::-webkit-scrollbar-track{ background:transparent; }
.tchat-messages::-webkit-scrollbar-thumb{ background:var(--paper-line); border-radius:10px; }

/* Separador de data */
.tchat-date-sep{
  text-align:center; font-family:'Space Mono',monospace; font-size:10px;
  color:var(--muted); margin:8px 0 4px;
  display:flex; align-items:center; gap:8px;
}
.tchat-date-sep::before, .tchat-date-sep::after{
  content:''; flex:1; height:1px; background:var(--paper-line);
}

/* Mensagem individual */
.tchat-msg{
  display:flex; align-items:flex-end; gap:8px;
  max-width:78%;
}
.tchat-msg-me{
  align-self:flex-end; flex-direction:row-reverse;
}
.tchat-bubble-wrap{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.tchat-sender{
  font-family:'Space Mono',monospace; font-size:10px;
  color:var(--muted); margin-bottom:2px;
}
.tchat-bubble{
  background:rgba(22,20,15,.06);
  border:1.5px solid var(--paper-line);
  border-radius:12px 12px 12px 3px;
  padding:8px 12px; font-size:13.5px; line-height:1.45;
  word-break:break-word; white-space:pre-wrap;
}
body.dark .tchat-bubble{ background:rgba(237,234,217,.07); }
.tchat-msg-me .tchat-bubble{
  background:var(--lime); border-color:rgba(22,20,15,.25);
  border-radius:12px 12px 3px 12px; color:var(--ink);
}
body.dark .tchat-msg-me .tchat-bubble{
  background:#C8EF00; /* lime mais vivo no dark */
}
.tchat-time{
  font-family:'Space Mono',monospace; font-size:9px;
  color:var(--muted); align-self:flex-end;
}

/* Campo de entrada */
.tchat-input-row{
  display:flex; gap:8px; padding:10px 12px;
  border-top:1.5px solid var(--paper-line);
  align-items:flex-end; flex-shrink:0;
  background:var(--card);
}
.tchat-textarea{
  flex:1; font-family:'Inter',sans-serif; font-size:13.5px;
  border:2px solid var(--ink); border-radius:10px;
  padding:8px 12px; resize:none; min-height:40px; max-height:120px;
  background:#fff; color:var(--ink);
  line-height:1.4; overflow-y:auto;
}
body.dark .tchat-textarea{ background:#1E1C15; color:#EDEAD9; }
.tchat-send-btn{
  font-family:'Space Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--lime); border:2px solid var(--ink);
  border-radius:10px; padding:9px 16px;
  cursor:pointer; box-shadow:3px 3px 0 var(--ink);
  white-space:nowrap; flex-shrink:0; align-self:flex-end;
  transition:transform .1s, box-shadow .1s;
}
.tchat-send-btn:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.tchat-send-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Chip de campanha vinculada */
.tchat-card-chip{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:6px; padding:3px 8px;
  background:rgba(0,45,249,.08); border:1px solid rgba(0,45,249,.2);
  border-radius:4px; font-size:11px; cursor:pointer;
  font-family:'Space Mono',monospace;
  transition:background .15s;
}
.tchat-card-chip:hover{ background:rgba(0,45,249,.16); }
.tchat-card-chip svg{ flex-shrink:0; }

/* Botão link-campanha na linha de input */
.tchat-link-btn{ color:var(--muted); transition:color .15s; }
.tchat-link-btn:hover{ color:var(--ink); }

/* ── Conversas individuais: lista de contatos + conversa privada ────────── */
.direct-chat-layout{
  display:grid; grid-template-columns:minmax(240px,290px) minmax(0,1fr);
  flex:1; min-height:0; height:100%;
}
.direct-contacts-pane{
  min-width:0; display:flex; flex-direction:column;
  border-right:1px solid var(--paper-line); background:var(--card);
}
.direct-contacts-title{
  height:62px; padding:12px 14px; display:flex; flex-direction:column;
  justify-content:center; border-bottom:1px solid var(--paper-line);
}
.direct-contacts-title span{font-size:14px;font-weight:700;color:var(--ink);}
.direct-contacts-title small{
  margin-top:2px; font-family:'Space Mono',monospace; font-size:9px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.direct-contacts-list{overflow-y:auto;min-height:0;padding:6px;}
.direct-contact{
  appearance:none; width:100%; min-width:0; height:70px; padding:8px;
  display:flex; align-items:center; gap:10px; text-align:left;
  color:var(--ink); background:transparent; border:1px solid transparent;
  border-radius:9px; cursor:pointer; font-family:'Inter',sans-serif;
  transition:background .15s,border-color .15s;
}
.direct-contact:hover{background:rgba(22,20,15,.045);}
body.dark .direct-contact:hover{background:rgba(237,234,217,.045);}
.direct-contact.active{background:var(--paper);border-color:var(--paper-line);}
.direct-contact-avatar-wrap{position:relative;flex:0 0 auto;}
.direct-contact-avatar{width:40px;height:40px;align-self:center;}
.direct-presence-dot{
  position:absolute;right:-1px;bottom:0;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--card);background:#7A828B;
}
.direct-presence-dot.is-online{
  background:#30C88B;box-shadow:0 0 0 2px rgba(48,200,139,.18);
  animation:tchat-pulse 1.8s infinite;
}
.direct-contact-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;}
.direct-contact-line{display:flex;align-items:center;gap:8px;min-width:0;}
.direct-contact-line b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.direct-contact-line time{
  margin-left:auto;flex-shrink:0;font-family:'Space Mono',monospace;
  font-size:9px;color:var(--muted);
}
.direct-contact-preview>span{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;color:var(--muted);
}
.direct-unread-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;font:700 9px 'Space Mono',monospace;
}
.direct-empty-contacts{padding:18px 12px;color:var(--muted);font-size:12px;line-height:1.45;}

.direct-conversation-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card);}
.direct-conversation-header{
  height:62px;padding:10px 14px;display:flex;align-items:center;gap:10px;
  flex-shrink:0;border-bottom:1px solid var(--paper-line);
}
.direct-conversation-header>div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.direct-conversation-header b{font-size:13px;color:var(--ink);}
.direct-conversation-header span{font-size:10px;color:var(--muted);}
.direct-header-status{
  display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;
  background:#7A828B;
}
.direct-header-status.is-online{background:#30C88B;animation:tchat-pulse 1.8s infinite;}
.direct-empty-state{
  margin:auto;max-width:300px;padding:24px;text-align:center;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;line-height:1.45;
}
.direct-empty-state svg{width:22px;height:22px;margin-bottom:3px;}
.direct-empty-state b{font-size:13px;color:var(--ink);}

.direct-composer-area{position:relative;flex-shrink:0;background:var(--card);}
.direct-composer-area .tchat-input-row{align-items:flex-end;gap:8px;padding:11px 12px;}
.direct-composer-tools{display:flex;gap:6px;align-items:flex-end;align-self:flex-end;}
.tchat-tool-btn{
  width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 42px;border:1px solid var(--paper-line);border-radius:9px;
  color:var(--muted);background:transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.tchat-tool-btn:hover:not(:disabled){background:var(--paper);border-color:var(--muted);color:var(--ink);}
.tchat-tool-btn:disabled{opacity:.35;cursor:not-allowed;}
.direct-composer-area .tchat-textarea{
  height:42px;min-height:42px;padding:10px 12px;margin:0;border-radius:9px;
}
.direct-composer-area .tchat-textarea:disabled{opacity:.55;cursor:not-allowed;}
.direct-composer-area .tchat-send-btn{
  height:42px;min-width:104px;padding:0 15px;margin:0;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--ink);border-radius:9px;box-shadow:none;
  background:var(--ink);color:var(--paper);font-family:'Inter',sans-serif;
  font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;
}
.direct-composer-area .tchat-send-btn:hover:not(:disabled){transform:none;box-shadow:none;opacity:.88;}
.direct-composer-area .tchat-send-btn:disabled{opacity:.35;}
.direct-context-pills{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px;}
.team-context-pill{
  align-items:center;gap:6px;max-width:100%;margin-top:7px;padding:5px 8px;
  border:1px solid var(--paper-line);border-radius:7px;background:var(--paper);
  color:var(--muted);font-size:10px;
}
.team-context-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.team-context-pill button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;}
.direct-card-picker{padding:8px 12px 0;}
.direct-card-picker .form-select{font-size:11px;}
.direct-mention-dropdown{left:104px;bottom:62px;top:auto;min-width:230px;}
.direct-mention-option{
  width:100%;padding:8px 10px;display:flex;align-items:center;gap:9px;
  border:0;background:var(--card);color:var(--ink);text-align:left;cursor:pointer;
}
.direct-mention-option:hover{background:var(--paper);}
.direct-mention-option>span{display:flex;flex-direction:column;gap:2px;}
.direct-mention-option b{font-size:12px;}
.direct-mention-option small{font-size:10px;color:var(--muted);}
.direct-file-chip,.tchat-card-chip{
  width:max-content;max-width:100%;border:1px solid var(--paper-line);color:var(--ink);
  background:var(--paper);border-radius:7px;cursor:pointer;
}
.direct-file-chip{
  display:flex;align-items:center;gap:7px;margin-top:7px;padding:7px 9px;font-size:11px;
}
.direct-file-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.direct-photo-button{display:block;margin-top:7px;padding:0;border:0;background:none;cursor:pointer;}
.direct-send-failed{color:var(--red);font-weight:600;}

@media (max-width:760px){
  .direct-chat-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);}
  .direct-contacts-pane{border-right:0;border-bottom:1px solid var(--paper-line);}
  .direct-contacts-title{height:auto;padding:9px 12px;}
  .direct-contacts-list{display:flex;gap:6px;overflow-x:auto;padding:6px;}
  .direct-contact{min-width:210px;width:210px;height:62px;}
  .direct-contact-avatar{width:36px;height:36px;}
}

@media (max-width:520px){
  .direct-composer-area .tchat-input-row{display:grid;grid-template-columns:auto 1fr auto;gap:6px;padding:8px;}
  .direct-composer-tools{gap:4px;}
  .tchat-tool-btn{width:38px;height:42px;flex-basis:38px;}
  .direct-composer-area .tchat-send-btn{min-width:42px;width:42px;padding:0;}
  .direct-composer-area .tchat-send-btn span{display:none;}
  .direct-mention-dropdown{left:8px;right:8px;bottom:58px;min-width:0;}
}

/* Profile avatar no painel de configurações */
#profile-avatar-preview{
  width:64px; height:64px; border-radius:50%;
  background:var(--lime); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px;
  overflow:hidden; background-size:cover; background-position:center;
  flex-shrink:0;
}

/* Mobile */
@media (max-width:640px){
  .tchat-wrap{ height:calc(100vh - 180px); max-height:none; }
  .tchat-msg{ max-width:90%; }
  .tchat-textarea{ font-size:16px; } /* evita zoom iOS */
  .appr-link-row{flex-direction:column;align-items:stretch;}
  .appr-link-row .form-btn{width:100%;min-height:44px;margin:0;white-space:normal;}
  /* No mobile o nome fica na primeira linha e o link ganha a largura inteira. */
  .pub-link-row{grid-template-columns:26px minmax(0,1fr) 20px;gap:7px;}
  .pub-link-icon{grid-column:1;grid-row:1;}
  .pub-link-name{grid-column:2;grid-row:1;}
  .pub-link-ok{grid-column:3;grid-row:1;}
  .pub-link-input{grid-column:1 / -1;grid-row:2;width:100%;}
  .correction-live-actions{flex-direction:column;align-items:stretch;}
  .correction-live-actions .form-btn{width:100%;}
  .correction-done-btn{margin-left:0 !important;}
  .correction-round-head{align-items:flex-start;}
}