/* sz-tokyo-add-note.css
 * Redesign do modal "Adicionar nota" de contato — somente tokyo.
 * Escopo seguro via [data-sz-tan="1"] injetado pelo JS.
 * Atualizado: 2026-05-29
 */

/* ============================================================
 * CONTAINER — resize 850×350 + radius + sem padding
 * ============================================================ */
.modal-mask:has(.modal-container[data-sz-tan="1"]) {
  /* mantém backdrop nativo do woot-modal (bg-n-alpha-black2 + blur) */
}

.modal-container[data-sz-tan="1"] {
  width: 850px !important;
  max-width: 95vw !important;
  height: 350px !important;
  min-height: 350px !important;
  /* Figma: topo 8px, base 12px (assimetrico) */
  border-radius: 8px 8px 12px 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* O X close nativo do woot-modal está oculto (showCloseButton=false) — nada a fazer */

/* Wrapper interno (div.flex.w-full.flex-col.gap-6.px-6.py-6) — zerar pra ter
   controle do header/body/footer + forcar a OCUPAR 100% da altura do
   modal-container (senao a borda inferior do body fica no meio do modal). */
.modal-container[data-sz-tan="1"] > div.flex {
  padding: 0 !important;
  gap: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

/* ============================================================
 * HEADER — h3 "Adicionar nota" + X close injetado
 * ============================================================ */
.modal-container[data-sz-tan="1"] h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  /* Figma header Frame "Modal novo negocio": 850x60, padding 16, sem border. */
  padding: 16px !important;
  height: 60px !important;
  box-sizing: border-box !important;
  border-bottom: 0 !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: #000000 !important;
  flex-shrink: 0 !important;
}

.modal-container[data-sz-tan="1"] .sz-tan-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  /* Reduzido de 32 -> 28 pra header bater os 60px do Figma */
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  border-radius: 6px;
  transition: background 0.12s ease;
}
.modal-container[data-sz-tan="1"] .sz-tan-close:hover {
  background: #F5F5F5;
}
.modal-container[data-sz-tan="1"] .sz-tan-close:focus,
.modal-container[data-sz-tan="1"] .sz-tan-close:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.modal-container[data-sz-tan="1"] .sz-tan-close svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  stroke: #000000;
}

/* ============================================================
 * BODY — Editor area com label "Nota" + counter + toolbar + textarea
 * ============================================================ */

/* Body do modal (Editor wrapper outer).
   Padding 8/16/16 (toprow fica perto do topo) + gap reduzido pra 10
   (pedido user: "subir só o card de dentro, pouco em pouco") */
.modal-container[data-sz-tan="1"] > div > div.flex.flex-col.min-w-0 {
  margin: 0 !important;
  padding: 8px 16px 16px !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  border-top: 1px solid #D1D5DB !important;
  border-bottom: 1px solid #D1D5DB !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}

/* Linha topo: label "Nota" + counter (a label é injetada pelo JS) */
.modal-container[data-sz-tan="1"] .sz-tan-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Altura natural (label "Nota" 14/20 = 20px) */
  height: 20px;
  flex-shrink: 0;
}
.modal-container[data-sz-tan="1"] .sz-tan-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #262626;
}

/* Inner Editor wrapper (.editor-wrapper) — "Input chat" do Figma:
   818 × 166, border 1px #E5E5E5 todos lados, radius 8px, bg #FFFFFF.
   Padding-top reduzido pra 8 pra subir os icones mais perto do topo do card. */
.modal-container[data-sz-tan="1"] .editor-wrapper {
  border: 1px solid #E5E5E5 !important;
  border-radius: 8px !important;
  padding: 8px 12px 12px !important;
  background: #FFFFFF !important;
  gap: 8px !important;
  flex: 0 0 166px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 166px !important;
  max-height: 166px !important;
  box-sizing: border-box !important;
}

/* Counter da prop — vamos esconder e re-renderizar no toprow */
.modal-container[data-sz-tan="1"] .editor-wrapper > div.flex.items-center.justify-end.h-4 {
  display: none !important;
}
.modal-container[data-sz-tan="1"] .sz-tan-counter {
  font-size: 12px;
  font-feature-settings: 'tnum' 1;
  color: #525252;
}

/* ============================================================
 * TOOLBAR — esconder strike (5), undo (8), redo (9)
 * ============================================================ */
/* Toolbar (Figma "Input chat" > toolbar). Linha separadora abaixo eh
   injetada como <div class="sz-tan-divider"> via JS (CSS edge-to-edge
   nao funciona porque a base do Chatwoot impoe width/flex constraints). */
.modal-container[data-sz-tan="1"] .ProseMirror-menubar {
  gap: 4px !important;
  padding: 0 0 4px 0 !important;
  border-bottom: 0 !important;
  /* Anula o left:-3px que o Chatwoot base coloca via Tailwind
     (ltr:-left-[3px]) — assim toolbar alinha com emoji embaixo. */
  left: 0 !important;
}

/* Separator entre toolbar e textarea — injetado via JS pra ficar
   edge-to-edge do card (margem negativa empurra pros lados pra
   compensar o padding 12 do card). */
.modal-container[data-sz-tan="1"] .sz-tan-divider {
  height: 1.5px !important;
  background: #E5E5E5 !important;
  margin: 0 -12px !important;
  flex-shrink: 0 !important;
  border: 0 !important;
}
/* Figma Bold "Input chat > B" (variant Ghost, size XS):
   Envolver 32x32, Raio rounded-8 (8px), padding spacing-4 (4px). */
.modal-container[data-sz-tan="1"] .ProseMirror-menuitem {
  width: 32px !important;
  height: 32px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background 0.12s ease;
  box-sizing: border-box !important;
}
/* SVG centralizado dentro do container 32x32: 24x24 area util, vetor renderiza ~10-13px no centro */
.modal-container[data-sz-tan="1"] .ProseMirror-menuitem .ProseMirror-icon {
  width: 16px !important;
  height: 16px !important;
}
.modal-container[data-sz-tan="1"] .ProseMirror-menuitem .ProseMirror-icon svg {
  width: 16px !important;
  height: 16px !important;
}
.modal-container[data-sz-tan="1"] .ProseMirror-menuitem:hover {
  background: #F5F5F5;
}
.modal-container[data-sz-tan="1"] .ProseMirror-menu-active {
  background: #EEF6F0 !important;
  color: #236D23;
}

/* Esconder strike, undo, redo via data-role (robusto a separadores injetados) */
.modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role="strike"],
.modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role="undo"],
.modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role="redo"] {
  display: none !important;
}

/* Cor #000000 FORCADA dos icones (Figma: color/foreground/black).
   Forco fill direto sem depender de currentColor (que estava herdando
   verde do tema solarz). Clicks garantidos via pointer-events: auto. */
.modal-container[data-sz-tan="1"] .ProseMirror-menubar,
.modal-container[data-sz-tan="1"] .ProseMirror-menuitem,
.modal-container[data-sz-tan="1"] .ProseMirror-icon {
  color: #000000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
/* Override do estado .ProseMirror-menu-disabled (link sem selecao etc)
   que vinha com opacity 0.3 do prosemirror-menu base — agora full preto. */
.modal-container[data-sz-tan="1"] .ProseMirror-menubar .ProseMirror-menu-disabled,
.modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role],
.modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role].ProseMirror-menu-disabled {
  opacity: 1 !important;
}
.modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg,
.modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg *,
.modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg path,
.modal-container[data-sz-tan="1"] .ProseMirror-icon svg,
.modal-container[data-sz-tan="1"] .ProseMirror-icon svg *,
.modal-container[data-sz-tan="1"] .ProseMirror-icon svg path {
  stroke: none !important;
  fill: #000000 !important;
  pointer-events: none !important; /* clicks vao pro parent menuitem */
}
.modal-container[data-sz-tan="1"] .ProseMirror-menu-active svg,
.modal-container[data-sz-tan="1"] .ProseMirror-menu-active svg *,
.modal-container[data-sz-tan="1"] .ProseMirror-menu-active svg path {
  fill: #236D23 !important;
}

/* Separadores verticais entre grupos (B I U | link code | bullet ordered).
   Figma: 1.5px x 20px, color/border-default #E5E5E5. */
.modal-container[data-sz-tan="1"] .sz-tan-toolbar-sep {
  display: inline-block;
  width: 1.5px;
  height: 20px;
  background: #E5E5E5;
  margin: 0 4px;
  align-self: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Botão Underline injetado via JS — posicionado entre I e link.
   Disabled (sem schema underline no ProseMirror).
   Spec Figma: 32x32, radius 8, padding 4. */
.modal-container[data-sz-tan="1"] .sz-tan-u-btn {
  width: 32px;
  height: 32px;
  padding: 4px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  box-sizing: border-box;
}
.modal-container[data-sz-tan="1"] .sz-tan-u-btn svg {
  width: 16px;
  height: 16px;
  stroke: #000000;
}

/* Estado disabled (U e emoji): visualmente igual aos outros (preto solido),
   sem opacity reduzida, sem focus ring, mas inerte. */
.modal-container[data-sz-tan="1"] .sz-tan-disabled,
.modal-container[data-sz-tan="1"] .sz-tan-disabled[disabled] {
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  color: #000000 !important;
}
.modal-container[data-sz-tan="1"] .sz-tan-disabled:hover,
.modal-container[data-sz-tan="1"] .sz-tan-disabled:focus,
.modal-container[data-sz-tan="1"] .sz-tan-disabled:focus-visible,
.modal-container[data-sz-tan="1"] .sz-tan-disabled:active {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.modal-container[data-sz-tan="1"] .sz-tan-u-btn svg *,
.modal-container[data-sz-tan="1"] .sz-tan-u-btn svg path {
  fill: #000000 !important;
  stroke: none !important;
}

/* ============================================================
 * TEXTAREA (ProseMirror) — sem border, foco discreto.
 * min-height reduzido pra 60 pra emoji caber DENTRO do card 166.
 * Conta no card 166: padding 24 + toolbar 24 + gap 8 + textarea 60 + gap 8 + emoji 20 = 144 (sobra ~22px de respiro)
 * ============================================================ */
.modal-container[data-sz-tan="1"] .ProseMirror-menubar-wrapper {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  /* Sem gap entre menubar / divider / ProseMirror — divider sobe pra colar
     no toolbar (anula gap-3 = 12px herdado do Tailwind base). */
  gap: 0 !important;
}
.modal-container[data-sz-tan="1"] .ProseMirror {
  flex: 1 1 auto !important;
  min-height: 60px !important;
  padding: 4px 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #000000 !important;
  outline: none !important;
}
.modal-container[data-sz-tan="1"] .ProseMirror p {
  margin: 0 !important;
}
.modal-container[data-sz-tan="1"] .ProseMirror p.is-editor-empty:first-child::before,
.modal-container[data-sz-tan="1"] .ProseMirror[data-placeholder]:empty::before {
  color: rgba(0, 0, 0, 0.32) !important;
}

/* Override do texto do placeholder pra "Digite o conteúdo da nota".
   ATENÇÃO: o @chatwoot/prosemirror-schema usa a classe .empty-node (NÃO
   .is-editor-empty). O CSS base faz `content: attr(data-placeholder)`. */
.modal-container[data-sz-tan="1"] .ProseMirror p.empty-node:first-child::before,
.modal-container[data-sz-tan="1"] .ProseMirror .empty-node:first-child::before {
  content: "Digite o conteúdo da nota" !important;
  color: rgba(0, 0, 0, 0.32) !important;
}

/* ============================================================
 * EMOJI BUTTON — canto inferior-esquerdo do body
 * ============================================================ */
.modal-container[data-sz-tan="1"] .sz-tan-bottom-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  flex-shrink: 0 !important;
  min-height: 28px;
  width: 100%;
  /* Forca pro fundo do card (empurra abaixo da textarea) */
  margin-top: auto !important;
  /* Visibilidade garantida mesmo em flex apertado */
  visibility: visible !important;
  opacity: 1 !important;
}
.modal-container[data-sz-tan="1"] .editor-wrapper {
  overflow: visible !important;
}
.modal-container[data-sz-tan="1"] .sz-tan-emoji-btn {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  padding: 0;
  border-radius: 4px;
  transition: background 0.12s ease;
}
.modal-container[data-sz-tan="1"] .sz-tan-emoji-btn:hover {
  background: #F5F5F5;
}
.modal-container[data-sz-tan="1"] .sz-tan-emoji-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  stroke: #000000;
}

/* ============================================================
 * FOOTER — buttons Cancelar / Salvar
 * ============================================================ */
/* Footer (Frame 1652705298 do Figma): 850×64, padding 12, gap 12 (entre
   botoes), sem border-top adicional — o body ja carrega border-bottom. */
.modal-container[data-sz-tan="1"] > div > div.flex.items-center.justify-end.gap-3 {
  padding: 12px !important;
  height: 64px !important;
  box-sizing: border-box !important;
  border-top: 0 !important;
  flex-shrink: 0 !important;
  gap: 12px !important;
  background: #FFFFFF;
}

/* Cancelar (faded slate do NextButton) */
.modal-container[data-sz-tan="1"] button[label="Cancelar"],
.modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:first-of-type {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  color: #000000 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  padding: 10px 20px !important;
  height: auto !important;
}
.modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:first-of-type:hover {
  background: #F5F5F5 !important;
}

/* Salvar (solid blue do NextButton) */
.modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:last-of-type {
  background: #388E3C !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  padding: 10px 20px !important;
  height: auto !important;
}
.modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:last-of-type:hover:not(:disabled) {
  background: #2E7D32 !important;
}
.modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:last-of-type:disabled {
  background: rgba(0, 0, 0, 0.16) !important;
  color: rgba(0, 0, 0, 0.32) !important;
  cursor: not-allowed !important;
}

/* ============================================================
 * DARK MODE
 * ============================================================ */
.dark .modal-container[data-sz-tan="1"],
body.dark .modal-container[data-sz-tan="1"] {
  background: #1D1E21 !important;
  border: 1px solid #303138 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.dark .modal-container[data-sz-tan="1"] h3,
body.dark .modal-container[data-sz-tan="1"] h3 {
  border-bottom: 0 !important;
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] > div > div.flex.flex-col.min-w-0,
body.dark .modal-container[data-sz-tan="1"] > div > div.flex.flex-col.min-w-0 {
  border-top-color: #3D3F43 !important;
  border-bottom-color: #3D3F43 !important;
  background: #1D1E21 !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-close,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-close {
  color: #9797A0;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-close:hover,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-close:hover {
  background: #2A2C30;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-label,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-label {
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-counter,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-counter {
  color: #9797A0;
}
.dark .modal-container[data-sz-tan="1"] .ProseMirror,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror {
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .ProseMirror[data-placeholder]:empty::before,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror[data-placeholder]:empty::before,
.dark .modal-container[data-sz-tan="1"] .ProseMirror p.empty-node:first-child::before,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror p.empty-node:first-child::before {
  color: rgba(255, 255, 255, 0.32) !important;
}
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar {
  border-bottom-color: #2A2C30 !important;
}
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menuitem:hover,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menuitem:hover {
  background: #2A2C30 !important;
}
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menu-active,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menu-active {
  background: #2A2C30 !important;
  color: #FFFFFF;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-u-btn:hover,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-u-btn:hover {
  background: #2A2C30;
}
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar,
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menuitem,
.dark .modal-container[data-sz-tan="1"] .ProseMirror-icon,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menuitem,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-icon {
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg,
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg *,
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg path,
.dark .modal-container[data-sz-tan="1"] .ProseMirror-icon svg,
.dark .modal-container[data-sz-tan="1"] .ProseMirror-icon svg *,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg *,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menubar > [data-sz-tan-role] svg path,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-icon svg,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-icon svg * {
  stroke: none !important;
  fill: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-toolbar-sep,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-toolbar-sep {
  background: #3D3F43 !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-u-btn,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-u-btn {
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-u-btn svg,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-u-btn svg {
  stroke: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-emoji-btn,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-emoji-btn {
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-emoji-btn svg,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-emoji-btn svg {
  stroke: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-close,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-close {
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-close svg,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-close svg {
  stroke: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menu-active,
.dark .modal-container[data-sz-tan="1"] .ProseMirror-menu-active .ProseMirror-icon,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menu-active,
body.dark .modal-container[data-sz-tan="1"] .ProseMirror-menu-active .ProseMirror-icon {
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-emoji-btn,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-emoji-btn {
  color: #9797A0;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-emoji-btn:hover,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-emoji-btn:hover {
  background: #2A2C30;
}
.dark .modal-container[data-sz-tan="1"] > div > div.flex.items-center.justify-end.gap-3,
body.dark .modal-container[data-sz-tan="1"] > div > div.flex.items-center.justify-end.gap-3 {
  border-top: 0 !important;
  background: #1D1E21;
}
.dark .modal-container[data-sz-tan="1"] .editor-wrapper,
body.dark .modal-container[data-sz-tan="1"] .editor-wrapper {
  border: 1px solid #3D3F43 !important;
  background: #1F1F23 !important;
}
.dark .modal-container[data-sz-tan="1"] .sz-tan-divider,
body.dark .modal-container[data-sz-tan="1"] .sz-tan-divider {
  background: #3D3F43 !important;
}
.dark .modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:first-of-type,
body.dark .modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:first-of-type {
  background: transparent !important;
  border-color: #3D3F43 !important;
  color: #FFFFFF !important;
}
.dark .modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:first-of-type:hover,
body.dark .modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:first-of-type:hover {
  background: #2A2C30 !important;
}
.dark .modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:last-of-type,
body.dark .modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:last-of-type {
  color: #000000 !important;
}
.dark .modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:last-of-type:disabled,
body.dark .modal-container[data-sz-tan="1"] .flex.items-center.justify-end button:last-of-type:disabled {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.32) !important;
}