/*
 * sz-tokyo-new-message.css
 * Calibra visual do SzNewMessageModal.vue (custom Solarz) para bater com Figma.
 *
 * Componente alvo: SzNewMessageModal.vue (669 linhas, já tem step 1/2/3).
 * Classes existentes: .sz-modal-backdrop, .sz-modal, .sz-modal-header,
 * .sz-modal-stepper, .sz-modal-step, .sz-modal-step-dot, .sz-modal-step-label,
 * .sz-modal-step-line, .sz-modal-body, .sz-modal-search-wrap, etc.
 *
 * Tudo aqui é override com !important (scoped Vue tem maior specificity).
 */

/* ===== Container modal — 493x, radius 8, sombra leve ===== */
.sz-modal {
  width: 493px !important;
  max-width: 493px !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #FFFFFF !important;
  background: #FFFFFF !important;
}

/* ===== Header — esconde badge (icone) e subtitulo. Figma tem só titulo + X ===== */
.sz-modal-header {
  padding: 16px !important;
  border-bottom: 1px solid #D1D5DB !important;
}
.sz-modal-header-badge {
  display: none !important;
}
.sz-modal-header-hint {
  display: none !important;
}
.sz-modal-header-text {
  gap: 0 !important;
}
.sz-modal-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: #000000 !important;
}
.sz-modal-close {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #374151 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sz-modal-close:hover {
  background: transparent !important;
  color: #000000 !important;
}
.sz-modal-close svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: none !important;
  flex: 0 0 16px !important;
  display: block !important;
  stroke-width: 1.5 !important;
}

/* ===== Stepper — outline circles, verde brand, separator com progresso ===== */
.sz-modal-stepper {
  padding: 16px !important;
  gap: 16px !important;
  border-bottom: 1px solid #D1D5DB !important;
  justify-content: flex-start !important;
}
.sz-modal-step {
  opacity: 1 !important;
  gap: 8px !important;
}
.sz-modal-step-dot {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  font-size: 0 !important; /* esconde numero "1/2/3" e checkmark */
  background: transparent !important;
  color: transparent !important;
  border: 1.5px solid #262626 !important;
  box-sizing: border-box !important;
}
.sz-modal-step.active .sz-modal-step-dot {
  background: transparent !important;
  color: transparent !important;
  border-color: #388E3C !important;
}
.sz-modal-step.done .sz-modal-step-dot {
  background: #388E3C !important;
  border-color: #388E3C !important;
  color: #FFFFFF !important;
  font-size: 11px !important; /* mostra ✓ quando done */
}
.sz-modal-step-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  color: #262626 !important;
}
.sz-modal-step.active .sz-modal-step-label {
  font-weight: 600 !important;
  color: #000000 !important;
}
.sz-modal-step.done .sz-modal-step-label {
  color: #262626 !important;
}
.sz-modal-step-line {
  flex: 1 !important;
  width: auto !important;
  min-width: 32px !important;
  height: 2px !important;
  margin: 0 !important;
  background: #D4D4D4 !important;
  border-radius: 4px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Separador após step ativo: half-fill verde (mostra progresso) */
.sz-modal-step.active + .sz-modal-step-line {
  background: linear-gradient(to right, #388E3C 50%, #D4D4D4 50%) !important;
}
.sz-modal-step-line.done {
  background: #388E3C !important;
}

/* ===== Body ===== */
.sz-modal-body {
  padding: 16px !important;
  background: #FFFFFF !important;
}

/* "Selecione o contato" label — apenas em Step 1 (Step 2 e 3 nao tem) */
.sz-modal-step-panel:has(.sz-modal-search-wrap)::before {
  content: 'Selecione o contato';
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
  margin-bottom: 8px;
}

/* ===== Search input — icone na DIREITA verde, height 48, border 1.5 ===== */
.sz-modal-search-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  padding: 0 12px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #D4D4D4 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  flex-direction: row-reverse !important; /* icone vai pra direita */
}
.sz-modal-search-wrap:focus-within {
  border-color: #388E3C !important;
}
.sz-modal-search-icon {
  width: 24px !important;
  height: 24px !important;
  color: #236D23 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.sz-modal-search-input {
  flex: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  padding: 0 8px 0 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #000000 !important;
  height: auto !important;
}
.sz-modal-search-input::placeholder {
  color: rgba(0, 0, 0, 0.32) !important;
  opacity: 1 !important;
}

/* ===== Hint padrao ===== */
.sz-modal-results-hint {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #71717A !important;
  text-align: center !important;
  padding: 16px 0 !important;
}

/* Empty state — DROPDOWN flutuante abaixo do search (spec Figma) */
.sz-modal-step-panel {
  position: relative !important;
}
/* Necessario relaxar overflow do modal/body pra o dropdown sair do bbox */
.sz-modal,
.sz-modal-body {
  overflow: visible !important;
}

.sz-modal-results-hint[data-sz-empty="1"] {
  display: none !important;
}

/* Container base pra dropdowns floating — APENAS filhos DIRETOS do step-panel.
 * not-found fica INSIDE de .sz-modal-results (que ja e floating), entao nao
 * recebe position:absolute proprio. */
.sz-modal-step-panel:focus-within > .sz-modal-results,
.sz-modal-step-panel:focus-within > .sz-modal-results-hint[data-sz-empty="1"],
.sz-modal-step-panel:focus-within > .sz-modal-results-hint[data-sz-loading="1"] {
  position: absolute !important;
  top: 84px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #FFFFFF !important;
  border: 1.5px solid #F5F5F5 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1) !important;
  z-index: 3 !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  margin: 0 !important;
}

/* Empty state — centralizado vertical */
.sz-modal-step-panel:focus-within .sz-modal-results-hint[data-sz-empty="1"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 16px !important;
  min-height: 153px !important;
}

/* Skeleton — rows com shimmer, alinhados a esquerda */
.sz-modal-step-panel:focus-within .sz-modal-results-hint[data-sz-loading="1"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 20px 16px !important;
  text-align: left !important;
  min-height: 100px !important;
}
.sz-tcm-msg-skeleton-row {
  height: 20px;
  background: linear-gradient(90deg, #F4F4F5 0%, #E5E7EB 50%, #F4F4F5 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: sz-tcm-msg-shimmer 1.4s ease-in-out infinite;
}
.sz-tcm-msg-skeleton-row--wide { width: 100%; }
.sz-tcm-msg-skeleton-row--narrow { width: 65%; }
@keyframes sz-tcm-msg-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Results list — padding interno e items espacados */
.sz-modal-step-panel:focus-within .sz-modal-results {
  padding: 8px !important;
}

/* ===== Quando form inline ativo — esconde search + label + footer nativo ===== */
.sz-modal[data-sz-inline-form="1"] .sz-modal-step-panel::before {
  display: none !important;
}
.sz-modal[data-sz-inline-form="1"] .sz-modal-search-wrap,
.sz-modal[data-sz-inline-form="1"] .sz-modal-search,
.sz-modal[data-sz-inline-form="1"] .sz-modal-results,
.sz-modal[data-sz-inline-form="1"] .sz-modal-results-hint {
  display: none !important;
}
.sz-modal[data-sz-inline-form="1"] > .sz-modal-footer {
  display: none !important;
}

/* ===== Inline contact form (Fase B) — substitui search quando "Criar novo contato" clicado ===== */
.sz-tcm-msg-inline-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  width: 100%;
  margin-top: 8px;
}
.sz-tcm-msg-inline-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
}
.sz-tcm-msg-inline-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.sz-tcm-msg-inline-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sz-tcm-msg-inline-required {
  color: #DC2626;
}
.sz-tcm-msg-inline-input {
  height: 48px !important;
  padding: 0 12px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #D4D4D4 !important;
  border-radius: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.sz-tcm-msg-inline-input::placeholder {
  color: rgba(0, 0, 0, 0.32) !important;
  opacity: 1 !important;
}
.sz-tcm-msg-inline-input:focus,
.sz-tcm-msg-inline-input:focus-visible {
  border-color: #388E3C !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Stack 1-col (Figma da Nova mensagem mostra Nome e Telefone empilhados) */
.sz-tcm-msg-inline-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Etiquetas row */
.sz-tcm-msg-inline-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sz-tcm-msg-inline-tag-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  background: #E9E9E9;
  border: 1px dashed #CFCFCF;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  color: #000;
  cursor: pointer;
}
.sz-tcm-msg-inline-tag-add svg {
  width: 12px;
  height: 12px;
}

/* Phone input — flag + divisor vertical + numero */
.sz-tcm-msg-inline-phone {
  display: flex;
  align-items: center;
  height: 48px;
  border: 1.5px solid #D4D4D4;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 0 12px 0 0;
  gap: 0;
  box-sizing: border-box;
}
.sz-tcm-msg-inline-phone:focus-within {
  border-color: #388E3C;
}
.sz-tcm-msg-inline-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 0 12px;
  height: 100%;
  border-right: 1px solid #D4D4D4;
}
.sz-tcm-msg-inline-flag img {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  object-fit: cover;
}
.sz-tcm-msg-inline-flag svg {
  width: 16px;
  height: 16px;
  color: #525252;
}
.sz-tcm-msg-inline-cc {
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000;
  flex-shrink: 0;
}
/* Phone input INSIDE wrapper — height fixo + line-height matching pra centralizar texto */
.sz-tcm-msg-inline-phone .sz-tcm-msg-inline-input,
.sz-tcm-msg-inline-phone-input {
  border: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  line-height: 24px !important;
  padding: 0 0 0 12px !important;
  margin: 0 !important;
  background: transparent !important;
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
  align-self: center !important;
  box-sizing: content-box !important;
}
.sz-tcm-msg-inline-phone .sz-tcm-msg-inline-input:focus,
.sz-tcm-msg-inline-phone .sz-tcm-msg-inline-input:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ===== Erro de telefone duplicado ===== */
.sz-tcm-msg-inline-phone-error {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: #E7000B;
}
.sz-tcm-msg-inline-phone-error.sz-tcm-active { display: inline-flex; }
.sz-tcm-msg-inline-phone-error-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: #DC2626;
  color: #FFFFFF;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.sz-tcm-msg-inline-phone-error-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* Phone wrap fica com border vermelha quando tem erro */
.sz-tcm-msg-inline-phone.sz-tcm-has-error {
  border-color: #DC2626 !important;
}

/* ===== Chips de etiquetas selecionadas (na row) ===== */
.sz-tcm-msg-inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
}
.sz-tcm-msg-inline-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sz-tcm-msg-inline-chip-x {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
  margin-left: 2px;
}
.sz-tcm-msg-inline-chip-x:hover { opacity: 1; }

/* ===== Dropdown de etiquetas (search + checkbox + pill) ===== */
.sz-tcm-msg-inline-dropdown {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  width: 260px;
  max-height: 300px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.sz-tcm-msg-inline-dd-search {
  padding: 6px;
  border-bottom: 1px solid #E5E5E5;
}
.sz-tcm-msg-inline-dd-search-input {
  width: 100% !important;
  height: 32px !important;
  padding: 0 10px !important;
  background: #F5F5F5 !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: #000 !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.sz-tcm-msg-inline-dd-search-input:focus { border-color: #388E3C !important; }
.sz-tcm-msg-inline-dd-list {
  overflow-y: auto;
  padding: 4px;
  max-height: 250px;
}
.sz-tcm-msg-inline-dd-heading {
  padding: 8px 8px 4px;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: #6B6B75;
}
.sz-tcm-msg-inline-dd-divider {
  height: 1px;
  background: #E5E5E5;
  margin: 4px 0;
}
.sz-tcm-msg-inline-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
}
.sz-tcm-msg-inline-dd-item:hover { background: #F5F5F5; }
.sz-tcm-msg-inline-dd-check {
  width: 14px;
  height: 14px;
  border: 1.5px solid #D1D5DB;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
}
.sz-tcm-msg-inline-dd-check.is-checked {
  background: #388E3C;
  border-color: #388E3C;
  color: #FFF;
}
.sz-tcm-msg-inline-dd-check svg { width: 10px; height: 10px; }
.sz-tcm-msg-inline-dd-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  max-width: calc(100% - 22px);
}
.sz-tcm-msg-inline-dd-pill > span:not(.sz-tcm-msg-inline-dd-pill-dot) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sz-tcm-msg-inline-dd-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sz-tcm-msg-inline-dd-empty {
  padding: 16px;
  font-size: 13px;
  color: #9797A0;
  text-align: center;
}

/* Footer */
.sz-tcm-msg-inline-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}
.sz-tcm-msg-inline-cancel {
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  cursor: pointer;
}
.sz-tcm-msg-inline-cancel:hover {
  background: #F5F5F5;
}
.sz-tcm-msg-inline-submit {
  background: #388E3C;
  border: 0;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  cursor: pointer;
}
.sz-tcm-msg-inline-submit:hover {
  background: #2E7D32;
}

/* ===== Empty state "Nenhum contato encontrado" — INSIDE .sz-modal-results (que ja e floating) ===== */
.sz-modal-results .sz-modal-results-hint[data-sz-not-found="1"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  width: auto !important;
}
.sz-tcm-msg-notfound-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 0 8px;
  border-bottom: 1px solid #F4F4F5;
}
.sz-tcm-msg-create-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 12px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #000000 !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: center !important;
}
.sz-tcm-msg-create-btn:hover {
  background: #F4F4F5 !important;
  border-radius: 6px !important;
}

/* ===== Step 2 (Canal) — selected bar com avatar + nome + telefone ===== */
.sz-modal-selected-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 12px !important;
  background: #FAFAFA !important;
  border: 1px solid #F5F5F5 !important;
  border-radius: 6px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.sz-tcm-msg-selected-label {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #525252;
}
.sz-tcm-msg-selected-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sz-tcm-msg-selected-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E5E7EB;
  border: 1px solid #F5F5F5;
  color: #525252;
  font-weight: 600;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Channel icon DENTRO da selected bar — menor (24x24 radius 6, spec Figma)
 * sobrescreve o icon 32x32 dos cards da lista de inboxes do Step 2 */
.sz-modal-selected-bar .sz-modal-inbox-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 0.75px solid #FFFFFF !important;
}
.sz-modal-selected-bar .sz-modal-inbox-icon svg {
  width: 12px !important;
  height: 12px !important;
}
.sz-tcm-msg-selected-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}
.sz-tcm-msg-selected-row {
  min-width: 0;
}
.sz-tcm-msg-selected-phone {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #525252;
}

/* Channel search section */
.sz-tcm-msg-channel-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.sz-tcm-msg-channel-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
}
.sz-tcm-msg-channel-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 0 12px;
}
.sz-tcm-msg-channel-search:focus-within {
  border-color: #388E3C;
}
.sz-tcm-msg-channel-search-input,
.sz-tcm-msg-channel-search-input:focus,
.sz-tcm-msg-channel-search-input:focus-visible {
  flex: 1 !important;
  height: 20px !important;
  min-height: 20px !important;
  line-height: 20px !important;
  align-self: center !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #000 !important;
  padding: 0 !important;
  box-sizing: content-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.sz-tcm-msg-channel-search-input::placeholder {
  color: rgba(0, 0, 0, 0.32);
}
.sz-tcm-msg-channel-search-icon {
  width: 20px;
  height: 20px;
  color: #388E3C;
  flex-shrink: 0;
}

/* ===== Step 3 (Mensagem) — selected bar 2 colunas + tabs + textarea ===== */
.sz-tcm-msg-s3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
.sz-tcm-msg-s3-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* "Envio por:" label antes das tabs */
.sz-tcm-msg-envio-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
  margin-bottom: 8px;
}

/* Label "Selecione o contato" antes do card (Step 3) */
.sz-tcm-msg-s3-contact-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
  margin-bottom: 8px;
}

/* Tabs Mensagem / Template — spec Figma */
.sz-modal-tabs {
  display: flex !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
.sz-modal-tab {
  flex: 1 !important;
  height: 42px !important;
  padding: 4px 12px !important;
  background: transparent !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  color: #525252 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.sz-modal-tab.active {
  background: #EEF6F0 !important;
  border-color: #59AA59 !important;
  color: #236D23 !important;
}
.sz-modal-tab svg {
  display: none !important;
}

/* Hint abaixo do textarea (WhatsApp 24h window) — escondido por spec Figma */
.sz-modal-hint {
  display: none !important;
}

/* ===== Template picker (WhatsappTemplatesModal) typography overrides ===== */
/* Aplica em ambos: inline (.sz-modal-template-area) E overlay (.modal-mask) */

/* KILL todos os focus rings/outlines dentro do template-area (Chatwoot usa amber/orange) */
.sz-modal-template-area input:focus,
.sz-modal-template-area input:focus-visible,
.sz-modal-template-area input:focus-within,
.sz-modal-template-area *:focus,
.sz-modal-template-area *:focus-visible,
.sz-modal-template-area [class*="bg-n-alpha-black2"]:focus,
.sz-modal-template-area [class*="bg-n-alpha-black2"]:focus-within {
  outline: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}

/* Label "Selecione um template" — injetado por JS antes do search */
.sz-tcm-msg-tpl-select-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
  margin-bottom: 8px;
}

/* Nome do template — 14/600 #262626, flex pra acomodar radio + ellipsis */
/* Requer font-semibold OU tag .sz-tcm-msg-tpl-name pra NAO conflitar com body (.text-sm) */
.sz-modal-template-area button p.text-sm[class*="font-semibold"],
.sz-modal-template-area button p[class*="font-semibold"],
.sz-modal-template-area button p[class*="label-title"]:not([class*="label-title-small"]),
.sz-modal-template-area .sz-tcm-msg-tpl-name,
.modal-mask button p[class*="font-semibold"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #262626 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Wrapper do texto do nome — span injetado pra ter ellipsis */
.sz-tcm-msg-tpl-name-text {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Radio button (custom) — injetado por JS antes do nome do template */
/* Spec Figma: 16x16, bg #FAFAFA, border 1.5px #D4D4D4, radius 999px */
.sz-tcm-msg-tpl-radio {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  box-sizing: border-box !important;
  border: 1.5px solid #D4D4D4 !important;
  border-radius: 999px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  background: #FAFAFA !important;
}

/* Badges — broader: catch bg-n-amber-*, bg-n-slate-*, bg-n-emerald-* */
.sz-modal-template-area span[class*="bg-n-amber"],
.sz-modal-template-area [class*="bg-n-amber"][class*="text-xs"],
.sz-modal-template-area span[class*="bg-n-slate"],
.sz-modal-template-area [class*="bg-n-slate"][class*="text-xs"],
.sz-modal-template-area span[class*="bg-n-emerald"],
.sz-modal-template-area .sz-tcm-msg-tpl-badge,
.sz-modal-template-area .sz-tcm-msg-tpl-cat-badge,
.modal-mask span[class*="bg-n-amber"],
.modal-mask span[class*="bg-n-slate"] {
  background: #E1EBDC !important;
  color: #388E3C !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  line-height: 16px !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Container dos badges (Pt_br + categoria) — gap 8px entre eles (Figma) */
.sz-modal-template-area .sz-tcm-msg-tpl-badge-group {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Header do card (nome <-> badges): nome a esquerda, linguagem+tipo na PONTA direita.
   Alvo preciso = wrapper que contem nome + badges (taggado por JS), nunca o card. */
.sz-modal-template-area .sz-tcm-msg-tpl-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Labels de secao — Cabeçalho, Corpo do texto, Botões (12/500 #525252) */
.sz-modal-template-area p[class*="text-xs"][class*="font-medium"],
.sz-modal-template-area p.label-title-small,
.sz-modal-template-area .sz-tcm-msg-tpl-section-label,
.sz-modal-template-area p[class*="font-medium"]:not([class*="text-sm"]):not(.sz-tcm-msg-tpl-name),
.modal-mask p[class*="text-xs"][class*="font-medium"] {
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  color: #525252 !important;
  text-transform: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* Body do template — broader: pega TODO p de conteudo (nao label, nao name) */
/* Override font-mono do chatwoot pra Inter */
.sz-modal-template-area .sz-tcm-msg-tpl-card p:not([class*="font-medium"]):not([class*="font-semibold"]):not([class*="font-bold"]):not(.sz-tcm-msg-tpl-name):not(.sz-tcm-msg-tpl-section-label):not(.sz-tcm-msg-tpl-cat-hidden):not(.sz-tcm-msg-tpl-select-label),
.sz-modal-template-area .sz-tcm-msg-tpl-card .sz-tcm-msg-tpl-body,
.sz-modal-template-area .label-body,
.modal-mask .label-body {
  font-weight: 400 !important;
  font-size: 10px !important;
  line-height: 16px !important;
  color: #525252 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* Esconde secao "Categoria" original (movida pra badge top-right via JS) */
.sz-tcm-msg-tpl-cat-hidden {
  display: none !important;
}

/* Botoes do template — outline cinza ("Verificar a conta") */
/* Spec Figma: 12/400 #A1A1A1, border 1px #E5E5E5, padding 4px 6px, h 28, radius 4 */
/* .sz-tcm-msg-tpl-card scope sobe a especificidade pra vencer o seletor de badge
   (span[class*="bg-n-slate"]) — senao botoes como "CONFIRMADO" ficam verdes */
.sz-modal-template-area .sz-tcm-msg-tpl-card .sz-tcm-msg-tpl-btn,
.sz-modal-template-area .sz-tcm-msg-tpl-btn,
.sz-modal-template-area button[class*="border"]:not([class*="rounded-lg"]):not(.sz-modal-tab):not(.sz-modal-btn-back):not(.sz-modal-btn-send),
.sz-modal-template-area .sz-tcm-msg-tpl-card button[class*="rounded"] {
  border: 1px solid #E5E5E5 !important;
  border-radius: 4px !important;
  padding: 4px 6px !important;
  min-height: 28px !important;
  background: #FFFFFF !important;
  color: #A1A1A1 !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Linha de botoes — gap 2px (Figma). Usa a classe que o JS garante (.sz-tcm-msg-tpl-btn-row), */
/* com fallback :has(> .sz-tcm-msg-tpl-btn) caso a row nao tenha sido taggada */
.sz-modal-template-area .sz-tcm-msg-tpl-btn-row,
.sz-modal-template-area .sz-tcm-msg-tpl-card [class*="flex"]:has(> .sz-tcm-msg-tpl-btn) {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

/* Card do template — border 1px #D4D4D4, radius 8, padding 12.
   NAO forco flex/direction aqui: o chatwoot ja empilha as secoes nativamente.
   Forcar flex-column + space-between no first-child colapsava todo o conteudo
   numa linha horizontal (bug do deploy ad). Deixo o layout nativo intacto. */
.sz-modal-template-area button[class*="block"][class*="w-full"][class*="rounded-lg"],
.sz-modal-template-area .sz-tcm-msg-tpl-card,
.modal-mask button[class*="block"][class*="w-full"][class*="rounded-lg"] {
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background: transparent !important;
  text-align: left !important;
}
.sz-modal-template-area button[class*="block"][class*="w-full"][class*="rounded-lg"]:hover,
.sz-modal-template-area .sz-tcm-msg-tpl-card:hover,
.modal-mask button[class*="block"][class*="w-full"][class*="rounded-lg"]:hover {
  background: #FAFAFA !important;
  border-color: #D4D4D4 !important;
}

/* Search input do picker — sem orange focus, height 48, lupa verde na DIREITA.
   ESCOPADO com :has(input) -> so a caixa de busca (que tem input). O preview do
   parser tambem usa bg-n-alpha-black2 mas tem h3 (nao input) -> nao e atingido. */
.sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input),
.sz-modal-template-area .sz-tcm-msg-tpl-search-wrap,
.modal-mask [class*="bg-n-alpha-black2"]:has(input) {
  background: #FFFFFF !important;
  border: 1.5px solid #D4D4D4 !important;
  outline: none !important;
  height: 48px !important;
  border-radius: 8px !important;
  flex-direction: row-reverse !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input):focus-within {
  border-color: #5EA500 !important;
}
.sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input) svg,
.modal-mask [class*="bg-n-alpha-black2"]:has(input) svg {
  color: #388E3C !important;
  width: 20px !important;
  height: 20px !important;
}
.sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input) > input {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  flex: 1 !important;
  font-size: 14px !important;
  color: #262626 !important;
}
.sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input) > input::placeholder {
  color: #A3A3A3 !important;
}

/* Esconde botao refresh ao lado do search (tagged via JS) */
.sz-tcm-msg-tpl-refresh-hidden {
  display: none !important;
}

/* ===== Anti-flash do picker =====
   Ao clicar em "Template", o woot-modal CRU do chatwoot (backdrop dimmed + header
   "Templates do Whatsapp") aparece por ~1 frame antes do JS mover o conteudo
   inline -> piscada feia. Escondo o backdrop CRU na hora (opacity 0). Escopo:
   so enquanto a Nova mensagem (.sz-modal-backdrop) esta aberta -> o unico woot-modal
   nesse contexto e o picker. O JS move o .modal-content pro tplArea (fora do
   .modal-mask), entao o conteudo aparece inline normalmente. */
body:has(.sz-modal-backdrop) .modal-mask,
body:has(.sz-modal-backdrop) .woot-modal-mask,
body:has(.sz-modal-backdrop) [class*="modal-mask"] {
  opacity: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  transition: none !important;
}
/* fade-in suave do conteudo do picker/parser quando aparece inline no tplArea */
.sz-modal-template-area .modal-content {
  animation: szTplFadeIn 0.18s ease-out;
}
@keyframes szTplFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Remove linha divisoria ENTRE os templates — no fonte e um <hr> entre cards */
.sz-modal-template-area hr,
.sz-modal-template-area [role="separator"] {
  display: none !important;
}

/* Refresh (recarregar): no fonte e <button class="... w-9 h-9 rounded-lg bg-n-alpha-black2 ...">
   ao lado da busca, com icone i-lucide-refresh-ccw. Escondido pela classe exata. */
.sz-modal-template-area button[class*="w-9"][class*="h-9"] {
  display: none !important;
}

/* Borda EXTERNA da lista: o container usa OUTLINE (outline-n-container outline outline-1),
   nao border — por isso border:0 nao removia. Remove o outline. */
.sz-modal-template-area [class*="outline-n-container"] {
  outline: 0 !important;
  box-shadow: none !important;
}
/* Wrapper direto dos cards (div do v-for) tambem sem borda/outline residual */
.sz-modal-template-area *:has(> .sz-tcm-msg-tpl-card) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Espaco ENTRE os cards de template (hr removido -> da o respiro via margin) */
.sz-modal-template-area .sz-tcm-msg-tpl-card {
  margin-bottom: 12px !important;
}

/* ===== Tela de VARIAVEIS (WhatsAppTemplateParser apos selecionar template) =====
   Quando o modal tem .sz-modal--parser-on (marcador adicionado por JS), aplica
   layout 2 colunas, amplia o modal (1068x717 do Figma) e esconde duplicados. */

/* Amplia modal pra 1068x717 conforme spec do Figma */
.sz-modal.sz-modal--parser-on {
  max-width: 1068px !important;
  width: min(1068px, 95vw) !important;
  height: auto !important;
  max-height: 90vh !important;
}

/* Esconde label "Selecione um template", footer original e o toggle
   Mensagem/Template (na tela de variaveis o envio JA e por template) */
.sz-modal--parser-on .sz-tcm-msg-tpl-select-label,
.sz-modal--parser-on .sz-modal-footer,
.sz-modal--parser-on .sz-modal-tabs {
  display: none !important;
}

/* "Envio por:" vira linha com badge "Template" inline */
.sz-modal--parser-on .sz-tcm-msg-envio-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}
/* badge "Template" + subtitle "Configure o modelo X" — so aparecem na tela de variaveis */
.sz-tcm-parser-envio-badge,
.sz-tcm-parser-envio-sub {
  display: none !important;
}
.sz-modal--parser-on .sz-tcm-parser-envio-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: #E1EBDC !important;
  color: #388E3C !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  line-height: 16px !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
}

/* Esconde elementos marcados (ex: botao Agendar — nao existe no Figma) */
.sz-tcm-parser-hide {
  display: none !important;
}
.sz-modal--parser-on .sz-tcm-parser-envio-sub {
  display: block !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #525252 !important;
  margin: 4px 0 0 0 !important;
}

/* Wrapper dos badges (idioma + categoria) no header do preview — ponta direita */
.sz-modal-template-area .sz-tcm-parser-badges {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Conter o .modal-content (tem classe .row do bootstrap = flex + margens negativas).
   Sem isso vaza sobre o header do modal. */
.sz-modal-template-area .modal-content,
.sz-modal-template-area [class*="modal-content"] {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  float: none !important;
  inset: auto !important;
}
.sz-modal-template-area .modal-content > .w-full,
.sz-modal-template-area [class*="modal-content"] > div {
  width: 100% !important;
}

/* Parser root -> 2 COLUNAS reais (leftcol / rightcol, montadas via JS):
   - esquerda: "Envio por/Configure" + preview
   - direita: "Variaveis" + inputs
   align-items: stretch -> ambas full-height; o divisor vertical (border-left da
   rightcol) corre do topo (logo abaixo da linha horizontal) ate embaixo.
   border-top -> a LINHA HORIZONTAL abaixo do Para/Canal. */
.sz-modal-template-area .sz-tcm-parser-root {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 0 !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 477px !important;
  border-top: 1px solid #D1D5DB !important;
}
/* Template SEM variaveis (fallback se o auto-send nao fechar o modal):
   coluna unica, card full width, compacto (sem forcar min-height 477) */
.sz-modal-template-area .sz-tcm-parser-root.sz-tcm-parser-novars {
  grid-template-columns: 1fr !important;
  min-height: 0 !important;
}

/* Coluna esquerda (Envio por/Configure + preview) */
.sz-modal-template-area .sz-tcm-parser-leftcol {
  display: block !important;
  padding: 16px !important;
  align-self: start !important;
}
.sz-modal-template-area .sz-tcm-parser-leftcol > .sz-tcm-parser-preview {
  margin: 16px 0 0 0 !important;
}
/* Coluna direita (Variaveis) full-height com border-left = divisor vertical inteiro */
.sz-modal-template-area .sz-tcm-parser-rightcol {
  padding: 16px !important;
  border-left: 1px solid #D1D5DB !important;
  align-self: stretch !important;
  min-height: 477px !important;
}

/* (flex-fill removido — fazia o modal esticar ate 90vh em vez de ficar do tamanho
   do conteudo. O divisor ja chega no footer via align stretch + min-height 477.) */

/* Linhas FULL-WIDTH: o body tem padding 16px 20px que recuava as linhas.
   Removo o padding lateral do body na tela de variaveis (lines de ponta a ponta)
   e re-recuo so o box Para/Canal com margem propria. */
.sz-modal--parser-on .sz-modal-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
}
.sz-modal--parser-on .sz-modal-selected-bar {
  margin-left: 20px !important;
  margin-right: 20px !important;
}
/* Remove a linha do stepper (acima do Para/Canal) — Figma tem so UMA linha,
   abaixo do Para/Canal (= o border-top do parser-root). Evita a linha dupla. */
.sz-modal--parser-on .sz-modal-stepper {
  border-bottom: 0 !important;
}

/* Garante UMA unica linha horizontal no topo do corpo (so o parser-root border-top).
   Zera qualquer borda-topo residual de wrappers/colunas internos. */
.sz-modal--parser-on .sz-modal-template-area,
.sz-modal--parser-on .sz-modal-template-area .modal-content,
.sz-modal--parser-on .sz-modal-template-area .modal-content > .w-full,
.sz-modal--parser-on .sz-tcm-parser-leftcol,
.sz-modal--parser-on .sz-tcm-parser-rightcol,
.sz-modal--parser-on .sz-tcm-msg-envio-label,
.sz-modal--parser-on .sz-tcm-parser-envio-sub {
  border-top: 0 !important;
}
/* footer (slot actions: Voltar/Agendar/Enviar) ocupa as 2 colunas, embaixo.
   Figma: Voltar na ESQUERDA, enviar na DIREITA. */
.sz-modal-template-area .sz-tcm-parser-root > footer,
.sz-modal-template-area .sz-tcm-parser-root > [class*="justify-end"]:last-child {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-top: 1px solid #D1D5DB !important;
}
/* Botao "Enviar template" (ultimo do footer): disabled CINZA, enabled VERDE.
   Cores do Figma: disabled bg rgba(0,0,0,0.16) / texto rgba(0,0,0,0.32). */
.sz-modal-template-area .sz-tcm-parser-root > footer > :last-child {
  background: #388E3C !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
.sz-modal-template-area .sz-tcm-parser-root > footer > :last-child:disabled,
.sz-modal-template-area .sz-tcm-parser-root > footer > :last-child[disabled],
.sz-modal-template-area .sz-tcm-parser-root > footer > :last-child[aria-disabled="true"] {
  background: rgba(0, 0, 0, 0.16) !important;
  color: rgba(0, 0, 0, 0.32) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Voltar (1o botao) empurrado pra ESQUERDA + estilo TEXTO (sem caixa) + chevron < */
.sz-modal-template-area .sz-tcm-parser-root > footer > :first-child {
  margin-right: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #000000 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}
.sz-modal-template-area .sz-tcm-parser-root > footer > :first-child:hover {
  background: transparent !important;
  opacity: 0.7 !important;
}
/* chevron "<" via borda rotacionada */
.sz-modal-template-area .sz-tcm-parser-root > footer > :first-child::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-left: 1.5px solid #000000 !important;
  border-bottom: 1.5px solid #000000 !important;
  transform: rotate(45deg) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Preview (esquerda) estilizado como o card do template (borda #D4D4D4, radius 8) */
.sz-modal-template-area .sz-tcm-parser-preview {
  background: #FFFFFF !important;
  border: 1px solid #D4D4D4 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  height: auto !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* Header do preview: nome a esquerda, badges (Idioma/Categoria) na ponta direita */
.sz-modal-template-area .sz-tcm-parser-preview > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 16px !important;
}
.sz-modal-template-area .sz-tcm-parser-preview h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #262626 !important;
  margin: 0 !important;
}
/* Texto renderizado do corpo (10/400 #525252 Inter) */
.sz-modal-template-area .sz-tcm-parser-preview .whitespace-pre-wrap,
.sz-modal-template-area .sz-tcm-parser-preview [class*="whitespace-pre-wrap"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  color: #525252 !important;
}

/* Coluna direita: wrapper das variaveis. BLOCK pra que os <div v-if=...> internos
   (Header/Body/Buttons sections) empilhem naturalmente, e cada label <p> + rows
   tambem empilhem como block. */
.sz-modal-template-area .sz-tcm-parser-vars {
  display: block !important;
}
/* Cada subsecao interna (Header/Body/Buttons) tambem e block (Vue render padrao) */
.sz-modal-template-area .sz-tcm-parser-vars > div {
  display: block !important;
  margin-bottom: 16px !important;
}
/* Label de secao "Variaveis"/"Botoes"/etc dentro de cada subsecao */
.sz-modal-template-area .sz-tcm-parser-vars p[class*="font-semibold"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #000000 !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
}
/* Linha de input com prefixo {{N}} — UM input por row, empilhados verticalmente */
.sz-modal-template-area .sz-tcm-parser-var-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  margin: 0 0 8px 0 !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  width: 100% !important;
}
.sz-tcm-parser-var-prefix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 56px !important;
  padding: 0 12px !important;
  background: #F5F5F5 !important;
  border-right: 1px solid #E5E5E5 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #262626 !important;
  flex-shrink: 0 !important;
}
/* Achata o wrapper interno do componente Input (apos o prefixo) pra nao ter borda dupla */
.sz-modal-template-area .sz-tcm-parser-var-row > div {
  flex: 1 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
.sz-modal-template-area .sz-tcm-parser-var-row input {
  flex: 1 !important;
  width: 100% !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 10px 12px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  color: #262626 !important;
  height: auto !important;
}
.sz-modal-template-area .sz-tcm-parser-var-row input::placeholder {
  color: #D4D4D4 !important;
}

/* Template empty state — logo SolarZ + copy custom */
.sz-tcm-msg-template-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 32px 16px !important;
  text-align: center !important;
}
.sz-tcm-msg-template-empty .sz-tcm-msg-empty-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}
.sz-tcm-msg-template-empty .sz-tcm-msg-empty-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
}
.sz-tcm-msg-template-empty .sz-tcm-msg-empty-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: #71717A;
  max-width: 360px;
}

/* Textarea da mensagem (spec: 461x80, padding 12, border 1.5 #D4D4D4) */
.sz-modal-textarea {
  width: 100% !important;
  min-height: 80px !important;
  padding: 12px !important;
  border: 1.5px solid #D4D4D4 !important;
  border-radius: 8px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
  resize: none !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}
.sz-modal-textarea:focus,
.sz-modal-textarea:focus-visible {
  border-color: #388E3C !important;
  outline: none !important;
  box-shadow: none !important;
}
.sz-modal-textarea::placeholder {
  color: rgba(0, 0, 0, 0.32) !important;
}
.sz-modal-textarea::-webkit-resizer { display: none !important; }

/* Inbox list — cards estilo Figma (bg #FAFAFA, border #F5F5F5, radius 6) */
.sz-modal-inbox-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  padding-right: 4px;
}
.sz-modal-inbox-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px !important;
  background: #FAFAFA !important;
  border: 1px solid #F5F5F5 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #000000 !important;
}
.sz-modal-inbox-item:hover {
  background: #EEF6F0 !important;
  border-color: #DEEDE1 !important;
}
/* Active / focus state — verde brand */
.sz-modal-inbox-item:active,
.sz-modal-inbox-item.sz-modal-inbox-item--selected,
.sz-modal-inbox-item:focus {
  background: #EEF6F0 !important;
  border-color: #388E3C !important;
  outline: none !important;
}
/* Icone — 32x32 verde claro #DEEDE1, stroke #388E3C */
.sz-modal-inbox-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #DEEDE1 !important;
  color: #388E3C !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0 !important; /* esconde emoji original */
  border: 1px solid #FFFFFF !important;
}
.sz-modal-inbox-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* Step 2 panel — sem mais focus-within trick (todos visiveis quando step=2) */
.sz-modal-step-panel:has(.sz-modal-selected-bar) {
  /* default: relativo, sem dropdown floating aqui */
}

/* Contact item — hover bg verde claro (Figma #EEF6F0) */
.sz-modal-contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.sz-modal-contact-item:hover {
  background: #EEF6F0 !important;
}
.sz-modal-contact-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.sz-modal-contact-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.sz-modal-contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.sz-modal-contact-name {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #000000 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.sz-modal-contact-meta {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: #71717A !important;
}
.sz-tcm-msg-empty-logo {
  width: 48px;
  height: 48px;
  display: block;
  margin-bottom: 8px;
}
.sz-tcm-msg-empty-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
}
.sz-tcm-msg-empty-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: #71717A;
}

/* ===== Footer — linha divisoria acima ===== */
.sz-modal-footer {
  padding: 12px !important;
  border-top: 1px solid #D1D5DB !important;
  justify-content: flex-end !important;
}
.sz-modal-btn-back {
  background: transparent !important;
  border: 1.5px solid #D4D4D4 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #000000 !important;
  height: 40px !important;
}
.sz-modal-btn-send {
  background: #388E3C !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  height: 40px !important;
  cursor: pointer !important;
}
.sz-modal-btn-send:disabled {
  background: rgba(0, 0, 0, 0.16) !important;
  color: rgba(0, 0, 0, 0.32) !important;
  cursor: not-allowed !important;
}
.sz-modal-btn-disabled {
  background: rgba(0, 0, 0, 0.16) !important;
  color: rgba(0, 0, 0, 0.32) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  height: 40px !important;
  cursor: not-allowed !important;
}

/* ===================================================================== */
/* ====================== DARK MODE — Nova mensagem ===================== */
/* O injetado força claro com !important; cada override dark usa body.dark
 * (specificity maior) + !important. Paleta = modal "Novo contato" + fonte. */

/* Container / body */
body.dark .sz-modal { background: #1D1E21 !important; border-color: #303138 !important; box-shadow: 0 16px 40px rgba(0,0,0,0.55) !important; }
body.dark .sz-modal-body { background: #1D1E21 !important; }

/* Header */
body.dark .sz-modal-header { border-bottom-color: #282A2E !important; }
body.dark .sz-modal-title { color: #FAFAFA !important; }
body.dark .sz-modal-close { color: #9EA1A7 !important; }
body.dark .sz-modal-close:hover { color: #FAFAFA !important; }

/* Stepper */
body.dark .sz-modal-stepper { border-bottom-color: #282A2E !important; }
body.dark .sz-modal-step-dot { border-color: #52545A !important; }
body.dark .sz-modal-step.active .sz-modal-step-dot { border-color: #4CAF50 !important; }
body.dark .sz-modal-step.done .sz-modal-step-dot { background: #388E3C !important; border-color: #388E3C !important; }
body.dark .sz-modal-step-label { color: #9EA1A7 !important; }
body.dark .sz-modal-step.active .sz-modal-step-label { color: #FAFAFA !important; }
body.dark .sz-modal-step.done .sz-modal-step-label { color: #4CAF50 !important; }
body.dark .sz-modal-step-line { background: #363840 !important; }
body.dark .sz-modal-step.active + .sz-modal-step-line { background: linear-gradient(to right, #388E3C 50%, #363840 50%) !important; }
body.dark .sz-modal-step-line.done { background: #388E3C !important; }

/* Busca (step 1) */
body.dark .sz-modal-search-wrap { background: #1D1E21 !important; border-color: #363840 !important; }
body.dark .sz-modal-search-wrap:focus-within { border-color: #4CAF50 !important; }
body.dark .sz-modal-search-icon { color: #4CAF50 !important; }
body.dark .sz-modal-search-input { color: #FAFAFA !important; }
body.dark .sz-modal-search-input::placeholder { color: #6B6E75 !important; }
body.dark .sz-modal-results-hint { color: #9EA1A7 !important; }

/* Resultados (dropdown flutuante) + skeleton */
body.dark .sz-modal-step-panel:focus-within > .sz-modal-results,
body.dark .sz-modal-step-panel:focus-within > .sz-modal-results-hint[data-sz-empty="1"],
body.dark .sz-modal-step-panel:focus-within > .sz-modal-results-hint[data-sz-loading="1"] {
  background: #1F1F23 !important; border-color: #2A2C30 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
body.dark .sz-tcm-msg-skeleton-row { background: linear-gradient(90deg, #282A2E 0%, #363840 50%, #282A2E 100%) !important; }

/* Form inline "Novo contato" */
body.dark .sz-tcm-msg-inline-title { color: #FAFAFA !important; }
body.dark .sz-tcm-msg-inline-label { color: #FAFAFA !important; }
body.dark .sz-tcm-msg-inline-input { background: #1D1E21 !important; border-color: #363840 !important; color: #FAFAFA !important; }
body.dark .sz-tcm-msg-inline-input::placeholder { color: #6B6E75 !important; }
body.dark .sz-tcm-msg-inline-input:focus, body.dark .sz-tcm-msg-inline-input:focus-visible { border-color: #4CAF50 !important; }
body.dark .sz-tcm-msg-inline-tag-add { background: #3D3F43 !important; border-color: #52545A !important; color: #FAFAFA !important; }
body.dark .sz-tcm-msg-inline-phone { background: #1D1E21 !important; border-color: #363840 !important; }
body.dark .sz-tcm-msg-inline-phone:focus-within { border-color: #4CAF50 !important; }
body.dark .sz-tcm-msg-inline-flag { border-right-color: #363840 !important; }
body.dark .sz-tcm-msg-inline-flag svg { color: #9EA1A7 !important; }
body.dark .sz-tcm-msg-inline-cc { color: #FAFAFA !important; }

/* Etiquetas: dropdown + chips */
body.dark .sz-tcm-msg-inline-dropdown { background: #1F1F23 !important; border-color: #2A2C30 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; }
body.dark .sz-tcm-msg-inline-dd-search { border-bottom-color: #2A2C30 !important; }
body.dark .sz-tcm-msg-inline-dd-search-input { background: #282A2E !important; border-color: #363840 !important; color: #FAFAFA !important; }
body.dark .sz-tcm-msg-inline-dd-search-input:focus { border-color: #4CAF50 !important; }
body.dark .sz-tcm-msg-inline-dd-heading { color: #9EA1A7 !important; }
body.dark .sz-tcm-msg-inline-dd-divider { background: #2A2C30 !important; }
body.dark .sz-tcm-msg-inline-dd-item { color: #FAFAFA !important; }
body.dark .sz-tcm-msg-inline-dd-item:hover { background: #282A2E !important; }
body.dark .sz-tcm-msg-inline-dd-check { border-color: #52545A !important; }
body.dark .sz-tcm-msg-inline-dd-empty { color: #9EA1A7 !important; }

/* Footer do form inline */
body.dark .sz-tcm-msg-inline-cancel { background: #282A2E !important; border-color: #363840 !important; color: #FAFAFA !important; }
body.dark .sz-tcm-msg-inline-cancel:hover { background: #363840 !important; }

/* "Nenhum contato" / criar */
body.dark .sz-tcm-msg-notfound-top { border-bottom-color: #282A2E !important; }
body.dark .sz-tcm-msg-create-btn { color: #FAFAFA !important; }
body.dark .sz-tcm-msg-create-btn:hover { background: #282A2E !important; }

/* Selected bar (step 2/3) */
body.dark .sz-modal-selected-bar { background: #282A2E !important; border-color: #363840 !important; }
body.dark .sz-tcm-msg-selected-label { color: #9EA1A7 !important; }
body.dark .sz-tcm-msg-selected-avatar { background: #363840 !important; border-color: #52545A !important; color: #C9CCD1 !important; }
body.dark .sz-tcm-msg-selected-name { color: #FAFAFA !important; }
body.dark .sz-tcm-msg-selected-phone { color: #9EA1A7 !important; }

/* Canal (step 2): label + busca + itens */
body.dark .sz-tcm-msg-channel-label { color: #9EA1A7 !important; }
body.dark .sz-tcm-msg-channel-search { background: #1D1E21 !important; border-color: #363840 !important; }
body.dark .sz-tcm-msg-channel-search:focus-within { border-color: #4CAF50 !important; }
body.dark .sz-tcm-msg-channel-search-input { color: #FAFAFA !important; }
body.dark .sz-tcm-msg-channel-search-input::placeholder { color: #6B6E75 !important; }
body.dark .sz-tcm-msg-channel-search-icon { color: #4CAF50 !important; }
body.dark .sz-modal-inbox-item { background: #1D1E21 !important; border-color: #363840 !important; color: #FAFAFA !important; }
body.dark .sz-modal-inbox-item:hover { background: #363840 !important; border-color: #52545A !important; }
body.dark .sz-modal-inbox-item:active,
body.dark .sz-modal-inbox-item.sz-modal-inbox-item--selected,
body.dark .sz-modal-inbox-item:focus { background: #1A3318 !important; border-color: #4CAF50 !important; }
body.dark .sz-modal-inbox-icon { background: #1A3318 !important; color: #4CAF50 !important; border-color: #1D1E21 !important; }
body.dark .sz-modal-selected-bar .sz-modal-inbox-icon { border-color: #1D1E21 !important; }

/* Labels s3 */
body.dark .sz-tcm-msg-envio-label,
body.dark .sz-tcm-msg-s3-contact-label,
body.dark .sz-tcm-msg-tpl-select-label { color: #9EA1A7 !important; }

/* Tabs (Mensagem/Template) */
body.dark .sz-modal-tabs .sz-modal-tab:not(.active) { background: transparent !important; border-color: #363840 !important; color: #9EA1A7 !important; }
body.dark .sz-modal-tab.active { background: #1A3318 !important; border-color: #2D5A2D !important; color: #4CAF50 !important; }

/* Contact item (lista) */
body.dark .sz-modal-contact-item:hover { background: #363840 !important; }
body.dark .sz-modal-contact-name { color: #FAFAFA !important; }
body.dark .sz-modal-contact-meta { color: #9EA1A7 !important; }

/* Empty states */
body.dark .sz-tcm-msg-empty-title, body.dark .sz-tcm-msg-template-empty .sz-tcm-msg-empty-title { color: #FAFAFA !important; }
body.dark .sz-tcm-msg-empty-subtitle, body.dark .sz-tcm-msg-template-empty .sz-tcm-msg-empty-subtitle { color: #9EA1A7 !important; }

/* Textarea (step 3) */
body.dark .sz-modal-textarea { background: #1D1E21 !important; border-color: #363840 !important; color: #FAFAFA !important; }
body.dark .sz-modal-textarea:focus, body.dark .sz-modal-textarea:focus-visible { border-color: #4CAF50 !important; }
body.dark .sz-modal-textarea::placeholder { color: #6B6E75 !important; }

/* Footer + botoes */
body.dark .sz-modal-footer { border-top-color: #282A2E !important; }
body.dark .sz-modal-btn-back { color: #FAFAFA !important; }
body.dark .sz-modal-btn-send:disabled, body.dark .sz-modal-btn-disabled { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.30) !important; }

/* Template / Parser area */
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-name,
body.dark .sz-modal-template-area button p[class*="label-title"]:not([class*="label-title-small"]) { color: #FAFAFA !important; }
body.dark .sz-tcm-msg-tpl-radio { background: #363840 !important; border-color: #52545A !important; }
body.dark .sz-modal-template-area span[class*="bg-n-amber"],
body.dark .sz-modal-template-area [class*="bg-n-amber"][class*="text-xs"],
body.dark .sz-modal-template-area span[class*="bg-n-slate"],
body.dark .sz-modal-template-area [class*="bg-n-slate"][class*="text-xs"],
body.dark .sz-modal-template-area span[class*="bg-n-emerald"],
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-badge,
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-cat-badge,
body.dark .modal-mask span[class*="bg-n-amber"],
body.dark .modal-mask span[class*="bg-n-slate"] { background: #1A3318 !important; color: #4CAF50 !important; }
body.dark .sz-modal-template-area p.label-title-small,
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-section-label,
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-card .sz-tcm-msg-tpl-body,
body.dark .sz-modal-template-area .label-body,
body.dark .modal-mask .label-body { color: #9EA1A7 !important; }
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-btn,
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-card .sz-tcm-msg-tpl-btn,
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-card button[class*="rounded"] { background: #282A2E !important; color: #C9CCD1 !important; }
body.dark .sz-modal-template-area button[class*="block"][class*="w-full"][class*="rounded-lg"]:hover,
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-card:hover,
body.dark .modal-mask button[class*="block"][class*="w-full"][class*="rounded-lg"]:hover { background: #282A2E !important; }
body.dark .sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input),
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-search-wrap,
body.dark .modal-mask [class*="bg-n-alpha-black2"]:has(input) { background: #282A2E !important; }
body.dark .sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input) > input { color: #FAFAFA !important; }
body.dark .sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input) > input::placeholder { color: #6B6E75 !important; }

/* Parser (template com variaveis) */
body.dark .sz-tcm-parser-envio-badge,
body.dark .sz-modal--parser-on .sz-tcm-parser-envio-badge { background: #1A3318 !important; color: #4CAF50 !important; }
body.dark .sz-modal--parser-on .sz-tcm-parser-envio-sub { color: #9EA1A7 !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-root > footer > :first-child { color: #FAFAFA !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-root > footer > :last-child:disabled,
body.dark .sz-modal-template-area .sz-tcm-parser-root > footer > :last-child[disabled],
body.dark .sz-modal-template-area .sz-tcm-parser-root > footer > :last-child[aria-disabled="true"] { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.30) !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-preview { background: #1D1E21 !important; border-color: #363840 !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-preview h3 { color: #FAFAFA !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-preview .whitespace-pre-wrap,
body.dark .sz-modal-template-area .sz-tcm-parser-preview [class*="whitespace-pre-wrap"] { color: #C9CCD1 !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-vars > div { color: #FAFAFA !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-var-row { background: #1D1E21 !important; border-color: #363840 !important; }
body.dark .sz-tcm-parser-var-prefix { background: #262626 !important; border-right: 1px solid #303138 !important; color: #FFFFFF !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-var-row input { color: #FAFAFA !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-var-row input::placeholder { color: #6B6E75 !important; }

/* Label "Selecione o contato" (::before) no dark */
body.dark .sz-modal-step-panel:has(.sz-modal-search-wrap)::before { color: #D4D4D4 !important; }

/* ===== Dark fixes round 2: cards de template sem fill (só borda sutil) ===== */
body.dark .sz-modal-template-area button[class*="block"][class*="w-full"][class*="rounded-lg"],
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-card,
body.dark .modal-mask button[class*="block"][class*="w-full"][class*="rounded-lg"] { background: transparent !important; border-color: #363840 !important; }
body.dark .sz-modal-template-area button[class*="block"][class*="w-full"][class*="rounded-lg"]:hover,
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-card:hover,
body.dark .modal-mask button[class*="block"][class*="w-full"][class*="rounded-lg"]:hover { background: #1D1E21 !important; border-color: #52545A !important; }
/* Divisores da tela de variaveis (parser) */
body.dark .sz-modal-template-area .sz-tcm-parser-root { border-top-color: #363840 !important; }
body.dark .sz-modal-template-area .sz-tcm-parser-rightcol { border-left-color: #363840 !important; }
/* Campo "Pesquisar template": sem fill, borda sutil */
body.dark .sz-modal-template-area [class*="bg-n-alpha-black2"]:has(input),
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-search-wrap,
body.dark .modal-mask [class*="bg-n-alpha-black2"]:has(input) { background: #1D1E21 !important; border-color: #363840 !important; }

/* ===== Dark: lista de templates com MESMO fundo do frame (modal) ===== */
/* O container da lista (TemplatesPicker) usa .bg-n-background -> cor != modal.
 * Força = #1D1E21 e outline sutil, pros cards ficarem sobre o fundo do modal. */
body.dark .sz-modal-template-area [class*="bg-n-background"],
body.dark .modal-mask [class*="bg-n-background"] {
  background: #1D1E21 !important;
  background-color: #1D1E21 !important;
  outline-color: #363840 !important;
}

/* ===== Shell do woot-modal de templates (.modal-container = bg-n-alpha-3 + shadow) =====
 * Fica como uma "caixa" atras das tabs/conteudo apos o JS realocar o picker.
 * Neutraliza (fundo transparente, sem sombra/outline) enquanto o Nova mensagem abre. */
body:has(.sz-modal-backdrop) .modal-container,
body:has(.sz-modal-backdrop) [class*="modal-container"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Remove a "trilha" do segmented-control das tabs no dark (.dark .sz-modal-tabs
 * { background: rgba(255,255,255,.04) } do scoped do SzNewMessageModal.vue). */
body.dark .sz-modal-tabs { background: transparent !important; padding: 0 !important; }

/* Corpo do template no dark = #A1A1A1 (color/foreground/weaker do Figma).
 * Replica o seletor de alta especificidade (0,9,1) da regra clara + body.dark. */
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-card p:not([class*="font-medium"]):not([class*="font-semibold"]):not([class*="font-bold"]):not(.sz-tcm-msg-tpl-name):not(.sz-tcm-msg-tpl-section-label):not(.sz-tcm-msg-tpl-cat-hidden):not(.sz-tcm-msg-tpl-select-label),
body.dark .sz-modal-template-area .sz-tcm-msg-tpl-card .sz-tcm-msg-tpl-body,
body.dark .sz-modal-template-area .label-body,
body.dark .modal-mask .label-body {
  color: #A1A1A1 !important;
}

/* "Variaveis" (e labels p.font-semibold da coluna) brancos no dark */
body.dark .sz-modal-template-area .sz-tcm-parser-vars p[class*="font-semibold"] { color: #FAFAFA !important; }
/* Check ✓ dos steps concluidos: branco no dark (vence scoped .dark .sz-modal-step-dot) */
body.dark .sz-modal-stepper .sz-modal-step.done .sz-modal-step-dot { color: #1D1E21 !important; -webkit-text-fill-color: #1D1E21 !important; }

/* Chevron "<" do Voltar (parser footer) branco no dark (era #000000 via border) */
body.dark .sz-modal-template-area .sz-tcm-parser-root > footer > :first-child::before {
  border-left-color: #FAFAFA !important;
  border-bottom-color: #FAFAFA !important;
}