/* ============================================================
   ChatForce 2.0 — Skin System
   ============================================================ */

/* ===== Skin ChatForce — identidade oficial =====
   Referência: tela legada app.chatforce.com.br (escuro).
   O tema claro é derivado do escuro, com as mesmas funções:
   marca vermelha em detalhes, ações positivas verdes, fila neutra,
   avatar colorido por contato e canvas pontilhado. */

/* ----- Tokens: tema claro (derivado) ----- */
:root.skin-chatforce {
  /* Brand (vermelho — detalhes, seleções e estados ativos) */
  --brand-50: #fef2f2;
  --brand-100: #fee2e2;
  --brand-200: #fecaca;
  --brand-300: #fca5a5;
  --brand-400: #f87171;
  --brand-500: #dc2626;
  --brand-600: #b91c1c;
  --brand-700: #991b1b;

  --accent: #dc2626;
  --accent-light: #ef4444;
  --accent-dark: #991b1b;

  /* Surfaces */
  --bg: #f4f4f5;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --ink: #111111;
  --ink-soft: #3f3f46;
  --muted: #6b6b74;
  --line: #e4e4e7;
  --line-strong: #a1a1aa;
  --soft: #f4f4f5;
  --border: var(--line);

  /* Fields */
  --field-bg: #ffffff;
  --field-border: #d4d4d8;
  --field-text: #111111;
  --field-placeholder: #8a8a8a;

  /* Utility */
  --success: #16a34a;
  --warning: #b45309;
  --info: #2563eb;
  --shadow: 0 1px 2px rgb(24 24 27 / 0.06), 0 4px 12px rgb(24 24 27 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(24 24 27 / 0.12), 0 4px 6px -4px rgb(24 24 27 / 0.12);
  --radius: 10px;
  --sidebar-width: 260px;

  /* Chat layout */
  --rail-width: 46px;
  --topbar-height: 40px;
  --chatforce-bg: #f4f4f5;
  --chatforce-canvas: #fafafa;
  --chatforce-panel: #ffffff;
  --chatforce-panel-2: #f4f4f5;
  --chatforce-panel-3: #e9e9ec;
  --chatforce-line: #e4e4e7;
  --chatforce-line-soft: #efeff1;
  --chatforce-text: #111111;
  --chatforce-text-soft: #52525b;
  --chatforce-muted: #5b5b63;
  --chatforce-blue: #dc2626;
  --chatforce-blue-soft: #dc2626;
  --chatforce-green: #16a34a;
  --chatforce-danger: #dc2626;
  --chatforce-white: #ffffff;
  --chatforce-private: #d97706;

  /* Canvas pontilhado e detalhes do skin */
  --cf-canvas-dot: rgb(24 24 27 / 0.09);
  --cf-active-bg: #f1f1f3;
  --cf-tag-whatsapp: #166534;
  --cf-tag-instagram: #be185d;
  --cf-tag-messenger: #1d4ed8;
  --cf-tag-email: #b45309;
  --cf-tag-webchat: #6d28d9;
  --cf-tag-other: #52525b;
}

/* ----- Tokens: tema escuro (fiel ao print) ----- */
:root.skin-chatforce.dark {
  --brand-50: #2a1212;
  --brand-100: #3a1616;
  --brand-200: #571f1f;
  --brand-300: #8f2b2b;
  --brand-400: #ef4444;
  --brand-500: #ef4444;
  --brand-600: #dc2626;
  --brand-700: #b91c1c;

  --accent: #dc2626;
  --accent-light: #ef4444;
  --accent-dark: #991b1b;

  /* Surfaces */
  --bg: #0a0a0a;
  --surface: #0d0d0d;
  --surface-elevated: #161616;
  --ink: #f2f2f2;
  --ink-soft: #d4d4d4;
  --muted: #8f8f8f;
  --line: #232323;
  --line-strong: #3a3a3a;
  --soft: #161616;

  /* Fields */
  --field-bg: #141414;
  --field-border: #2e2e2e;
  --field-text: #f2f2f2;
  --field-placeholder: #7a7a7a;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);

  /* Chat layout */
  --chatforce-bg: #0a0a0a;
  --chatforce-canvas: #080808;
  --chatforce-panel: #0d0d0d;
  --chatforce-panel-2: #161616;
  --chatforce-panel-3: #202020;
  --chatforce-line: #232323;
  --chatforce-line-soft: #181818;
  --chatforce-text: #f2f2f2;
  --chatforce-text-soft: #a8a8a8;
  --chatforce-muted: #a1a1aa;
  --chatforce-blue: #ef4444;
  --chatforce-blue-soft: #dc2626;
  --chatforce-green: #16a34a;
  --chatforce-danger: #ef4444;
  --chatforce-white: #ffffff;

  /* Canvas pontilhado e detalhes do skin */
  --cf-canvas-dot: rgb(255 255 255 / 0.075);
  --cf-active-bg: #161616;
  --cf-tag-whatsapp: #22c55e;
  --cf-tag-instagram: #f472b6;
  --cf-tag-messenger: #60a5fa;
  --cf-tag-email: #f59e0b;
  --cf-tag-webchat: #a78bfa;
  --cf-tag-other: #a8a8a8;
}

/* ============================================================
   Rail (coluna 1)
   ============================================================ */
:root.skin-chatforce .app-rail {
  background: var(--chatforce-panel);
  border-right: 1px solid var(--chatforce-line-soft);
  padding: 12px 7px;
}

:root.skin-chatforce .rail-brand {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #dc2626;
  margin-bottom: 16px;
}

:root.skin-chatforce .rail-brand img,
:root.skin-chatforce .rail-brand .brand-mark {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

:root.skin-chatforce .rail-link {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--chatforce-muted);
}

:root.skin-chatforce .rail-link:hover {
  color: var(--chatforce-text);
  background: var(--chatforce-panel-2);
}

:root.skin-chatforce .rail-link.active {
  color: var(--chatforce-text);
  background: var(--chatforce-panel-2);
  box-shadow: inset 2px 0 0 var(--brand-500);
}

:root.skin-chatforce .rail-badge {
  background: var(--brand-600);
  color: #ffffff;
}

/* ============================================================
   Coluna 2 — fila de conversas
   ============================================================ */
:root.skin-chatforce .chatwoot-conversation-list,
:root.skin-chatforce .conversation-list-header {
  background: var(--chatforce-panel);
}

:root.skin-chatforce .chatwoot-conversation-list {
  border-right: 1px solid var(--chatforce-line);
}

:root.skin-chatforce .conversation-list-header {
  border-bottom: 1px solid var(--chatforce-line-soft);
}

:root.skin-chatforce .list-heading.compact {
  padding: 8px 12px 6px;
}

:root.skin-chatforce .list-heading.compact h1 {
  font-size: 17px;
  font-weight: 800;
  color: var(--chatforce-text);
}

:root.skin-chatforce .list-heading.compact .eyebrow {
  font-size: 11px;
  color: var(--chatforce-muted);
}

/* Busca: campo único com a lupa embutida à direita */
:root.skin-chatforce .conversation-search {
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 0;
  padding: 6px 12px 8px;
}

/* Vitrine (landing): estrutura ícone + campo */
:root.skin-chatforce .conversation-search:has(> i) {
  grid-template-columns: 30px minmax(0, 1fr);
}

:root.skin-chatforce .conversation-search:has(> i) > i {
  display: grid;
  place-items: center;
  height: 30px;
  border: 1px solid var(--field-border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--chatforce-panel-2);
  color: var(--chatforce-muted);
  font-size: 13px;
}

:root.skin-chatforce .conversation-search:has(> i) input {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

:root.skin-chatforce .conversation-search input {
  height: 30px;
  border-radius: 8px 0 0 8px;
  border-right: 0;
  background: var(--chatforce-panel-2);
  font-size: 12.5px;
}

:root.skin-chatforce .conversation-search button {
  width: 30px;
  height: 30px;
  border-radius: 0 8px 8px 0;
  background: var(--chatforce-panel-2);
  color: var(--chatforce-muted);
}

:root.skin-chatforce .conversation-search button:hover {
  color: var(--chatforce-text);
  background: var(--chatforce-panel-3);
}

:root.skin-chatforce .icon-button {
  border-radius: 8px;
  background: var(--chatforce-panel-2);
  border-color: var(--chatforce-line);
  color: var(--chatforce-text-soft);
}

:root.skin-chatforce .icon-button:hover {
  background: var(--chatforce-panel-3);
  color: var(--chatforce-text);
}

/* Abas com sublinhado vermelho e contagem em texto */
:root.skin-chatforce .conversation-tabs {
  gap: 14px;
  padding: 4px 12px 8px;
}

:root.skin-chatforce .conversation-tabs a,
:root.skin-chatforce .conversation-tabs > span {
  color: var(--chatforce-text-soft);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 0 6px;
  border-bottom: 2px solid transparent;
}

:root.skin-chatforce .conversation-tabs a.selected,
:root.skin-chatforce .conversation-tabs > span.selected {
  color: var(--chatforce-text);
  border-bottom-color: var(--brand-500);
}

:root.skin-chatforce .conversation-tabs a span,
:root.skin-chatforce .conversation-tabs > span > b {
  min-width: 0;
  height: auto;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  color: var(--chatforce-muted);
  font-weight: 600;
}

/* Pills de filtro */
:root.skin-chatforce .filter-chip {
  border-radius: 7px;
  border-color: var(--chatforce-line);
  background: var(--chatforce-panel-2);
  color: var(--chatforce-text-soft);
}

:root.skin-chatforce .filter-chip:hover {
  background: var(--chatforce-panel-3);
  color: var(--chatforce-text);
}

:root.skin-chatforce .filter-chip.active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #ffffff;
}

:root.skin-chatforce .filter-chip-count {
  background: var(--brand-600);
  color: #ffffff;
}

:root.skin-chatforce .filter-chip.active .filter-chip-count {
  background: rgb(255 255 255 / 0.22);
  color: #ffffff;
}

/* Cards da fila: neutros, ativo com barra vermelha */
:root.skin-chatforce .chatwoot-conversation-list .conversation-item,
:root.skin-chatforce .chatwoot-conversation-list .conversation-item.state-unread,
:root.skin-chatforce .chatwoot-conversation-list .conversation-item.state-unanswered,
:root.skin-chatforce .chatwoot-conversation-list .conversation-item.state-answered {
  background: transparent;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--chatforce-line-soft);
  min-height: 70px;
  padding: 10px 12px;
  gap: 10px;
}

:root.skin-chatforce .chatwoot-conversation-list .conversation-item:hover {
  background: var(--chatforce-panel-2);
}

:root.skin-chatforce .chatwoot-conversation-list .conversation-item.active,
:root.skin-chatforce .chatwoot-conversation-list .conversation-item.active:hover,
:root.skin-chatforce .chatwoot-conversation-list .conversation-item.state-unread.active,
:root.skin-chatforce .chatwoot-conversation-list .conversation-item.state-unanswered.active,
:root.skin-chatforce .chatwoot-conversation-list .conversation-item.state-answered.active {
  background: var(--cf-active-bg);
  border-left-color: var(--brand-500);
}

:root.skin-chatforce .chatwoot-conversation-list .item-copy strong {
  color: var(--chatforce-text);
  font-size: 12.5px;
}

:root.skin-chatforce .chatwoot-conversation-list .item-copy small {
  color: var(--chatforce-text-soft);
  font-size: 11px;
}

:root.skin-chatforce .chatwoot-conversation-list .conversation-side {
  gap: 8px;
  font-size: 10.5px;
  color: var(--chatforce-muted);
}

:root.skin-chatforce .conversation-unread {
  background: var(--brand-600);
  color: #ffffff;
}

/* Avatar colorido por contato (hash determinístico) */
:root.skin-chatforce .avatar.avatar-tone-0 { background: #16a34a; color: #ffffff; }
:root.skin-chatforce .avatar.avatar-tone-1 { background: #0d9488; color: #ffffff; }
:root.skin-chatforce .avatar.avatar-tone-2 { background: #7c3aed; color: #ffffff; }
:root.skin-chatforce .avatar.avatar-tone-3 { background: #dc2626; color: #ffffff; }
:root.skin-chatforce .avatar.avatar-tone-4 { background: #2563eb; color: #ffffff; }
:root.skin-chatforce .avatar.avatar-tone-5 { background: #d97706; color: #ffffff; }

/* Etiquetas de canal: pill vazada na cor do canal */
:root.skin-chatforce .conversation-label {
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  color: var(--cf-tag-other);
}

:root.skin-chatforce .conversation-label i {
  display: none;
}

:root.skin-chatforce .conversation-label:has(.ph-whatsapp-logo) { color: var(--cf-tag-whatsapp); }
:root.skin-chatforce .conversation-label:has(.ph-envelope),
:root.skin-chatforce .conversation-label:has(.ph-envelope-simple) { color: var(--cf-tag-email); }
:root.skin-chatforce .conversation-label:has(.ph-chat-circle-dots) { color: var(--cf-tag-webchat); }
:root.skin-chatforce .conversation-label:has(.ph-telegram-logo) { color: #2563eb; }
:root.skin-chatforce .conversation-label:has(.ph-instagram-logo) { color: #d946ef; }
:root.skin-chatforce .conversation-label:has(.ph-messenger-logo) { color: #0ea5e9; }
:root.skin-chatforce .conversation-label:has(.ph-linkedin-logo) { color: #0284c7; }

:root.skin-chatforce .conversation-label--warn {
  color: var(--state-unanswered);
  border-color: color-mix(in srgb, var(--state-unanswered) 50%, transparent);
  background: transparent;
}

/* No tema claro o âmbar da marca não contrasta com o fundo; usa tom mais escuro */
:root.skin-chatforce:not(.dark) .conversation-label--warn {
  color: #b45309;
  border-color: color-mix(in srgb, #b45309 50%, transparent);
}

/* ============================================================
   Coluna 3 — conversa
   ============================================================ */
:root.skin-chatforce .chat-panel {
  background: var(--chatforce-panel);
}

:root.skin-chatforce .chat-header {
  background: var(--chatforce-panel);
  border-bottom: 1px solid var(--chatforce-line);
  min-height: 62px;
  padding: 10px 18px;
  gap: 12px;
}

:root.skin-chatforce .chat-header .avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

:root.skin-chatforce .chat-title h1 {
  font-size: 15px;
  font-weight: 700;
  color: var(--chatforce-text);
}

:root.skin-chatforce .chat-title span {
  font-size: 11.5px;
  color: var(--chatforce-muted);
}

/* Status discreto no cabeçalho (minúsculo, contornado) */
:root.skin-chatforce .chat-header .status {
  background: transparent;
  border: 1px solid var(--chatforce-line);
  color: var(--chatforce-text-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

:root.skin-chatforce .resolve-button {
  background: var(--chatforce-green);
  border-radius: 8px;
  min-height: 30px;
  font-weight: 700;
}

:root.skin-chatforce .resolve-button:hover {
  background: #15803d;
}

/* Canvas com grade de pontos (substitui o fundo de doodles neste skin) */
:root.skin-chatforce.dark .chat-panel,
:root.skin-chatforce.dark .messages,
:root.skin-chatforce:not(.dark) .chat-panel,
:root.skin-chatforce:not(.dark) .messages {
  background-color: var(--chatforce-canvas);
  background-image: radial-gradient(circle at 1px 1px, var(--cf-canvas-dot) 1px, transparent 1.6px);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 22px 22px;
}

/* ============================================================
   Compositor
   ============================================================ */
:root.skin-chatforce .composer {
  background: var(--chatforce-panel);
  border-top: 1px solid var(--chatforce-line);
  padding: 14px 22px;
  gap: 10px;
}

:root.skin-chatforce .composer-legend {
  padding: 0 2px 6px;
  font-size: 11px;
  color: var(--chatforce-muted);
}

:root.skin-chatforce .composer-tabs {
  height: 32px;
  gap: 16px;
  padding: 0;
  border-bottom: 1px solid var(--chatforce-line-soft);
}

:root.skin-chatforce .composer-tab {
  height: 32px;
  font-size: 12.5px;
  font-weight: 700;
}

:root.skin-chatforce .formatting-toolbar {
  padding: 4px 0;
  border-bottom: 0;
  background: transparent;
}

:root.skin-chatforce .format-divider {
  background: var(--chatforce-line);
}

/* A "casca" visível do textarea é o backdrop do corretor */
:root.skin-chatforce .composer .spellcheck-backdrop {
  background: var(--chatforce-panel-2);
  border: 1px solid var(--chatforce-line);
  border-radius: 10px;
}

:root.skin-chatforce .composer .spellcheck-wrap:focus-within .spellcheck-backdrop {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

:root.skin-chatforce .composer-toolbar {
  padding: 8px 0 0;
}

:root.skin-chatforce .send-button {
  background: var(--chatforce-green);
  border-radius: 8px;
  font-weight: 700;
}

:root.skin-chatforce .send-button:hover {
  background: #15803d;
}

/* Anexos */
:root.skin-chatforce .image-attachment {
  background: transparent;
}

:root.skin-chatforce .image-attachment img {
  border-radius: 8px;
}

:root.skin-chatforce .attachment-preview {
  background: var(--chatforce-panel-2);
  border-color: var(--chatforce-line);
}

:root.skin-chatforce .attachment-preview-thumb {
  background: var(--chatforce-panel-3);
}

/* Navegação lateral compartilhada (demais telas) */
:root.skin-chatforce .sidebar {
  background: var(--chatforce-panel);
  border-right-color: var(--chatforce-line);
}

:root.skin-chatforce .sidebar-header {
  padding: 14px 14px 10px;
  font-size: 12px;
  color: var(--chatforce-text-soft);
  border-bottom: 1px solid var(--chatforce-line-soft);
}


/* ===== Skin Chatwoot (azul) ===== */
:root.skin-global-blue {
  /* Brand */
  --brand-50: #e6f4fd;
  --brand-100: #cce9fb;
  --brand-200: #99d3f7;
  --brand-500: #1f8ef1;
  --brand-600: #1a7bd1;
  --brand-700: #156ab3;

  /* Accent */
  --accent: #dc2626;
  --accent-light: #ef4444;
  --accent-dark: #991b1b;

  /* Surfaces */
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --ink: #0f172a;
  --ink-soft: #1e293b;
  --muted: #64748b;
  --line: #cbd5e1;
  --line-strong: #94a3b8;
  --soft: #f1f5f9;
  --border: var(--line);

  /* Fields */
  --field-bg: #f1f5f9;
  --field-border: #cbd5e1;
  --field-text: #0f172a;
  --field-placeholder: #64748b;

  /* Utility */
  --success: #16a34a;
  --warning: #b45309;
  --info: #2563eb;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 12px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.12), 0 4px 6px -4px rgb(15 23 42 / 0.12);
  --radius: 12px;
  --sidebar-width: 260px;

  /* Chat layout */
  --rail-width: 44px;
  --topbar-height: 40px;
  --chatforce-bg: #eef2f6;
  --chatforce-canvas: #eef2f6;
  --chatforce-panel: #ffffff;
  --chatforce-panel-2: #f1f5f9;
  --chatforce-panel-3: #e2e8f0;
  --chatforce-line: #e2e8f0;
  --chatforce-line-soft: #f1f5f9;
  --chatforce-text: #0f172a;
  --chatforce-text-soft: #475569;
  --chatforce-muted: #64748b;
  --chatforce-blue: #1f8ef1;
  --chatforce-blue-soft: #156ab3;
  --chatforce-green: #16a34a;
  --chatforce-danger: #dc2626;
  --chatforce-white: #ffffff;
  --chatforce-private: #facc15;
}

:root.skin-global-blue.dark {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-elevated: #334155;
  --ink: #f1f5f9;
  --ink-soft: #e2e8f0;
  --muted: #94a3b8;
  --line: #475569;
  --line-strong: #64748b;
  --soft: #334155;

  /* Fields */
  --field-bg: #1e293b;
  --field-border: #64748b;
  --field-text: #f1f5f9;
  --field-placeholder: #94a3b8;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.35);

  --chatforce-bg: #0f172a;
  --chatforce-canvas: #202326;
  --chatforce-panel: #1e293b;
  --chatforce-panel-2: #334155;
  --chatforce-panel-3: #475569;
  --chatforce-line: #475569;
  --chatforce-line-soft: #334155;
  --chatforce-text: #f1f5f9;
  --chatforce-text-soft: #94a3b8;
  --chatforce-muted: #94a3b8;
  --chatforce-blue: #1f8ef1;
  --chatforce-blue-soft: #4dabf7;
  --chatforce-green: #22c55e;
  --chatforce-danger: #ef4444;
  --chatforce-white: #ffffff;
}

/* Chatwoot conversation list */
:root.skin-global-blue .chatwoot-conversation-list .conversation-item {
  min-height: 70px;
  padding: 10px 10px 10px 12px;
  gap: 10px;
  border-bottom: 1px solid var(--chatforce-line-soft);
}

:root.skin-global-blue .chatwoot-conversation-list .avatar {
  width: 32px;
  height: 32px;
  background: var(--brand-100);
  color: var(--brand-700);
}

:root.skin-global-blue .chatwoot-conversation-list .item-copy strong {
  font-size: 12px;
}

:root.skin-global-blue .chatwoot-conversation-list .item-copy small {
  font-size: 11px;
}

/* Chatwoot header */
:root.skin-global-blue .chat-header {
  min-height: 60px;
  padding: 9px 14px;
  background: var(--chatforce-panel-2);
}

:root.skin-global-blue .chat-header .avatar {
  width: 36px;
  height: 36px;
  background: var(--brand-100);
  color: var(--brand-700);
}

/* Chatwoot composer */
:root.skin-global-blue .composer {
  gap: 10px;
  padding: 16px 22px;
  background: var(--chatforce-panel-2);
}

:root.skin-global-blue .composer textarea {
  border: 1px solid var(--chatforce-line);
  border-radius: 10px;
  padding: 12px;
  min-height: 80px;
  background: var(--chatforce-panel);
  box-shadow: none;
}

:root.skin-global-blue .composer textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* Chatwoot rail & sidebar */
:root.skin-global-blue .app-rail {
  background: var(--chatforce-panel);
  border-right-color: var(--chatforce-line);
}

:root.skin-global-blue .rail-link:hover,
:root.skin-global-blue .rail-link.active {
  background: var(--chatforce-panel-3);
}

:root.skin-global-blue .sidebar {
  background: var(--chatforce-panel);
  border-right-color: var(--chatforce-line);
}

:root.skin-global-blue .sidebar-header {
  padding: 14px 14px 10px;
  font-size: 12px;
  color: var(--chatforce-text-soft);
  border-bottom: 1px solid var(--chatforce-line-soft);
}

/* ===== Skin WhatsApp (verde / bege) ===== */
:root.skin-whatsapp {
  /* Brand */
  --brand-50: rgba(0, 168, 132, 0.12);
  --brand-100: rgba(0, 168, 132, 0.18);
  --brand-200: rgba(0, 168, 132, 0.35);
  --brand-500: #00a884;
  --brand-600: #00a884;
  --brand-700: #008069;

  /* Accent */
  --accent: #dc2626;
  --accent-light: #ef4444;
  --accent-dark: #991b1b;

  /* Surfaces */
  --bg: #eae6df;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --ink: #111b21;
  --ink-soft: #3b4a54;
  --muted: #8696a0;
  --line: #e9edef;
  --line-strong: #d1d7db;
  --soft: #f0f2f5;
  --border: var(--line);

  /* Fields */
  --field-bg: #f0f2f5;
  --field-border: #d1d7db;
  --field-text: #111b21;
  --field-placeholder: #8696a0;

  /* Utility */
  --success: #22c55e;
  --warning: #b45309;
  --info: #2563eb;
  --shadow: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.12), 0 4px 6px -4px rgb(15 23 42 / 0.12);
  --radius: 8px;
  --sidebar-width: 200px;

  /* Chat layout */
  --rail-width: 44px;
  --topbar-height: 40px;
  --chatforce-bg: #eae6df;
  --chatforce-canvas: #efeae2;
  --chatforce-panel: #ffffff;
  --chatforce-panel-2: #f0f2f5;
  --chatforce-panel-3: #e9edef;
  --chatforce-line: #e9edef;
  --chatforce-line-soft: #f0f2f5;
  --chatforce-text: #111b21;
  --chatforce-text-soft: #667781;
  --chatforce-muted: #8696a0;
  --chatforce-blue: #00a884;
  --chatforce-blue-soft: #008069;
  --chatforce-green: #25d366;
  --chatforce-danger: #ea0035;
  --chatforce-white: #ffffff;
  --chatforce-private: #facc15;
}

:root.skin-whatsapp.dark {
  --bg: #0b141a;
  --surface: #111b21;
  --surface-elevated: #1f2c34;
  --ink: #e9edef;
  --ink-soft: #d2d8df;
  --muted: #9fb0ba;
  --line: #3b4a54;
  --line-strong: #5a6b75;
  --soft: #2a3942;
  --border: var(--line);

  /* Fields */
  --field-bg: #2a3942;
  --field-border: #5a6b75;
  --field-text: #e9edef;
  --field-placeholder: #9fb0ba;

  --chatforce-bg: #0b141a;
  --chatforce-canvas: #0b141a;
  --chatforce-panel: #111b21;
  --chatforce-panel-2: #1f2c34;
  --chatforce-panel-3: #2a3942;
  --chatforce-line: #3b4a54;
  --chatforce-line-soft: #2a3942;
  --chatforce-text: #e9edef;
  --chatforce-text-soft: #9fb0ba;
  --chatforce-muted: #9fb0ba;
  --chatforce-blue: #00a884;
  --chatforce-blue-soft: #008069;
  --chatforce-green: #25d366;
  --chatforce-danger: #f15c6d;
  --chatforce-white: #ffffff;
}

/* WhatsApp primary buttons — verde da marca, texto branco nos dois temas */
:root.skin-whatsapp .primary-button {
  background: var(--brand-500);
  color: #ffffff;
}

:root.skin-whatsapp .primary-button:hover {
  background: var(--brand-700);
  box-shadow: var(--shadow);
}

:root.skin-whatsapp.dark .primary-button {
  background: var(--brand-600);
  color: #ffffff;
}

:root.skin-whatsapp.dark .primary-button:hover {
  background: var(--brand-700);
}

/* Resolver: o verde da marca é claro demais para texto branco */
:root.skin-whatsapp .resolve-button {
  background: #15803d;
  color: #ffffff;
}

/* WhatsApp conversation list */
:root.skin-whatsapp .chatwoot-conversation-list .conversation-item,
:root.skin-black-white .chatwoot-conversation-list .conversation-item {
  padding: 12px 14px;
  border-bottom: 0;
  border-top: 0;
  border-left: 0;
  gap: 14px;
  min-height: 72px;
}

:root.skin-whatsapp .chatwoot-conversation-list .conversation-item:hover,
:root.skin-whatsapp .chatwoot-conversation-list .conversation-item.active {
  background: var(--chatforce-panel-2);
}

:root.skin-whatsapp .chatwoot-conversation-list .avatar {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 500;
  background: #005c4b;
  color: #e9edef;
}

:root.skin-whatsapp.dark .chatwoot-conversation-list .avatar {
  background: #005c4b;
  color: #e9edef;
}

:root.skin-whatsapp .chatwoot-conversation-list .item-copy strong {
  font-size: 16px;
  font-weight: 500;
  color: var(--chatforce-text);
}

:root.skin-whatsapp .chatwoot-conversation-list .item-copy small {
  font-size: 13px;
  color: var(--chatforce-muted);
  margin-top: 2px;
}

:root.skin-whatsapp .chatwoot-conversation-list .conversation-side {
  gap: 4px;
  font-size: 11px;
  color: var(--chatforce-muted);
}

/* WhatsApp header */
:root.skin-whatsapp .chat-header {
  background: var(--chatforce-panel-2);
  border-bottom-color: var(--chatforce-line);
  min-height: 59px;
  padding: 10px 16px;
}

:root.skin-whatsapp .chat-header .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #005c4b;
  color: #e9edef;
}

:root.skin-whatsapp .avatar {
  background: #005c4b;
  color: #e9edef;
}

:root.skin-whatsapp.dark .chat-header .avatar {
  background: #005c4b;
  color: #e9edef;
}

:root.skin-whatsapp.dark .avatar {
  background: #005c4b;
  color: #e9edef;
}

:root.skin-whatsapp .chat-title h1 {
  font-size: 16px;
  font-weight: 500;
}

/* WhatsApp composer */
:root.skin-whatsapp .composer {
  background: var(--chatforce-panel-2);
  border-top-color: var(--chatforce-line);
  padding: 10px 16px;
}

:root.skin-whatsapp .composer textarea {
  background: var(--chatforce-panel);
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  min-height: 44px;
  font-size: 15px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

:root.skin-whatsapp .composer-tabs {
  border-bottom-color: var(--chatforce-line);
}

:root.skin-whatsapp .composer-tab {
  font-size: 13px;
  font-weight: 500;
}

/* WhatsApp rail & sidebar */
:root.skin-whatsapp .app-rail {
  background: var(--chatforce-panel-2);
  border-right-color: var(--chatforce-line);
}

:root.skin-whatsapp .rail-link:hover,
:root.skin-whatsapp .rail-link.active {
  background: var(--chatforce-panel-3);
}

:root.skin-whatsapp .sidebar {
  background: var(--chatforce-panel);
  border-right-color: var(--chatforce-line);
}

:root.skin-whatsapp .sidebar-header {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--chatforce-text);
  border-bottom: 1px solid var(--chatforce-line);
}

/* Fundo do chat: definido globalmente em chatforce.css (mesmo arquivo para todos os temas/skins). */

/* ===== WhatsApp dark — contraste de campos, linhas e textos =====
   As variáveis --field-* (definidas acima) alimentam as regras base de
   formulário em chatforce.css, garantindo que os campos se destaquem dos
   cards/sidebar (#1f2c34 / #111b21) e que as bordas sejam visíveis. */
:root.skin-whatsapp.dark select option {
  background: var(--field-bg);
  color: var(--field-text);
}

/* ===== Skin ChatForce Black White (preto e branco, cores por função) ===== */
:root.skin-black-white {
  /* Brand — monocromático */
  --brand-50: #f5f5f5;
  --brand-100: #e5e5e5;
  --brand-200: #d4d4d4;
  --brand-500: #171717;
  --brand-600: #0a0a0a;
  --brand-700: #000000;

  --accent: #171717;
  --accent-light: #404040;
  --accent-dark: #000000;

  /* Surfaces */
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --ink: #111111;
  --ink-soft: #262626;
  --muted: #6b6b6b;
  --line: #d9d9d6;
  --line-strong: #a3a3a3;
  --soft: #ececea;
  --border: var(--line);

  /* Fields */
  --field-bg: #ffffff;
  --field-border: #d9d9d6;
  --field-text: #111111;
  --field-placeholder: #8a8a8a;

  /* Utility — cores por função */
  --success: #15803d;
  --warning: #b45309;
  --info: #1d4ed8;
  --danger: #b91c1c;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.07);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --radius: 12px;
  --sidebar-width: 260px;

  /* Chat layout */
  --rail-width: 44px;
  --topbar-height: 40px;
  --chatforce-bg: #f7f7f5;
  --chatforce-canvas: #f7f7f5;
  --chatforce-panel: #ffffff;
  --chatforce-panel-2: #f0f0ee;
  --chatforce-panel-3: #e4e4e1;
  --chatforce-line: #e4e4e1;
  --chatforce-line-soft: #f0f0ee;
  --chatforce-text: #111111;
  --chatforce-text-soft: #4b4b4b;
  --chatforce-muted: #6b6b6b;
  --chatforce-blue: #171717;
  --chatforce-blue-soft: #404040;
  --chatforce-green: #15803d;
  --chatforce-danger: #b91c1c;
  --chatforce-white: #ffffff;
  --chatforce-private: #facc15;
}

:root.skin-black-white.dark {
  --bg: #060606;
  --surface: #101010;
  --surface-elevated: #181818;
  --ink: #f5f5f3;
  --ink-soft: #e5e5e5;
  --muted: #a3a3a3;
  --line: #2c2c2c;
  --line-strong: #404040;
  --soft: #181818;

  --brand-50: #181818;
  --brand-100: #262626;
  --brand-200: #404040;
  --brand-500: #f5f5f3;
  --brand-600: #ffffff;
  --brand-700: #ffffff;

  --accent: #f5f5f3;
  --accent-light: #ffffff;
  --accent-dark: #d4d4d4;

  --field-bg: #141414;
  --field-border: #333333;
  --field-text: #f5f5f3;
  --field-placeholder: #8a8a8a;

  --success: #4ade80;
  --warning: #fbbf24;
  --info: #60a5fa;
  --danger: #f87171;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.55);

  --chatforce-bg: #060606;
  --chatforce-canvas: #0b0b0b;
  --chatforce-panel: #101010;
  --chatforce-panel-2: #181818;
  --chatforce-panel-3: #232323;
  --chatforce-line: #2c2c2c;
  --chatforce-line-soft: #1c1c1c;
  --chatforce-text: #f5f5f3;
  --chatforce-text-soft: #b5b5b5;
  --chatforce-muted: #a3a3a3;
  --chatforce-blue: #f5f5f3;
  --chatforce-blue-soft: #ffffff;
  --chatforce-green: #4ade80;
  --chatforce-danger: #f87171;
  --chatforce-white: #ffffff;
  --chatforce-private: #facc15;
}

/* Botão primário monocromático */
:root.skin-black-white .primary-button {
  background: var(--brand-500);
  color: #ffffff;
}

:root.skin-black-white .primary-button:hover {
  background: var(--brand-700);
  box-shadow: var(--shadow);
}

:root.skin-black-white.dark .primary-button {
  background: var(--brand-600);
  color: #111111;
}

:root.skin-black-white.dark .primary-button:hover {
  background: #e5e5e5;
}

/* Lista de conversas */
:root.skin-black-white .chatwoot-conversation-list .conversation-item {
  min-height: 72px;
  padding: 12px 14px;
  gap: 12px;
}

:root.skin-black-white .chatwoot-conversation-list .conversation-item:hover,
:root.skin-black-white .chatwoot-conversation-list .conversation-item.active {
  background: var(--chatforce-panel-2);
}

:root.skin-black-white .chatwoot-conversation-list .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  background: var(--chatforce-panel-3);
  color: var(--chatforce-text);
  border: 1px solid var(--chatforce-line);
}

:root.skin-black-white .chatwoot-conversation-list .item-copy strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--chatforce-text);
}

:root.skin-black-white .chatwoot-conversation-list .item-copy small {
  font-size: 12.5px;
  color: var(--chatforce-muted);
}

/* Cabeçalho do chat e compositor */
:root.skin-black-white .chat-header {
  background: var(--chatforce-panel);
  border-bottom: 1px solid var(--chatforce-line);
}

:root.skin-black-white .chat-header .avatar {
  background: var(--chatforce-panel-3);
  color: var(--chatforce-text);
  border: 1px solid var(--chatforce-line);
}

/* Skin monocromática: avatar do remetente segue o cinza do painel */
:root.skin-black-white .message-avatar[class*="avatar-tone-"] {
  background: var(--chatforce-panel-3);
  color: var(--chatforce-text);
}

:root.skin-black-white .composer {
  background: var(--chatforce-panel);
  border-top: 1px solid var(--chatforce-line);
}

:root.skin-black-white .composer textarea {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: var(--field-text);
}

:root.skin-black-white .composer textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* Rail e sidebar */
:root.skin-black-white .app-rail {
  background: var(--chatforce-panel);
  border-right-color: var(--chatforce-line);
}

:root.skin-black-white .rail-link:hover,
:root.skin-black-white .rail-link.active {
  background: var(--chatforce-panel-3);
}

:root.skin-black-white .sidebar {
  background: var(--chatforce-panel);
  border-right-color: var(--chatforce-line);
}

:root.skin-black-white .sidebar-header {
  padding: 14px 14px 10px;
  font-size: 12px;
  color: var(--chatforce-text-soft);
  border-bottom: 1px solid var(--chatforce-line-soft);
}

/* Black White — semântica: erro/perigo usam a cor de perigo, não o accent */
:root.skin-black-white .field-error,
:root.skin-black-white p.error,
:root.skin-black-white .rail-danger,
:root.skin-black-white .task-overdue td:first-child {
  color: var(--danger);
}

:root.skin-black-white .danger-button {
  background: var(--danger);
  color: #ffffff;
}

:root.skin-black-white .danger-button:hover {
  background: #991b1b;
}

:root.skin-black-white.dark .danger-button {
  background: #dc2626;
  color: #ffffff;
}

:root.skin-black-white.dark .danger-button:hover {
  background: #b91c1c;
}

:root.skin-black-white #audio_record_toggle.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

:root.skin-black-white .intercom-unread {
  background: var(--accent);
  color: var(--surface);
}

:root.skin-black-white.dark .intercom-unread {
  background: var(--accent);
  color: #111111;
}

/* ============================================================
   Black White escuro — contraste de componentes
   No tema escuro o accent vira "tinta clara". Controles que usam
   o accent como fundo precisam de primeiro plano escuro, e o
   avatar grande volta ao cinza do painel.
   ============================================================ */
:root.skin-black-white.dark .avatar.large {
  background: var(--chatforce-panel-3);
  color: var(--chatforce-text);
  border: 1px solid var(--chatforce-line);
}

:root.skin-black-white.dark .audio-play-btn {
  color: #111111;
}

:root.skin-black-white.dark .audio-play-btn:hover {
  background: #e5e5e5;
}

:root.skin-black-white.dark .filter-chip.active,
:root.skin-black-white.dark .filter-chip-count,
:root.skin-black-white.dark .filter-apply,
:root.skin-black-white.dark .conversation-unread,
:root.skin-black-white.dark .rail-danger:hover,
:root.skin-black-white.dark .format-btn:active {
  color: #111111;
}

/* ============================================================
   Divisória entre os cards da fila de conversas (todas as skins)
   ============================================================ */
:root.skin-chatforce .chatwoot-conversation-list .conversation-item,
:root.skin-global-blue .chatwoot-conversation-list .conversation-item,
:root.skin-whatsapp .chatwoot-conversation-list .conversation-item {
  border-bottom: 1px solid color-mix(in srgb, var(--chatforce-line) 45%, var(--chatforce-muted));
}

/* Skin ChatForce — separador sutil entre os cards da fila */
:root.skin-chatforce .chatwoot-conversation-list .conversation-item {
  border-bottom: 1px solid var(--chatforce-line-soft);
}

/* Skin ChatForce — respiro maior entre mensagens (horário fora da bolha) */
:root.skin-chatforce .messages {
  gap: 14px;
}