/*
 * sz-tokyo-contact-notes-fix.css
 * Tokyo only. Bugs do ticket #356:
 *   1. Scroll preso nas Notas → liberar overscroll
 *   2. Botão Expandir/Recolher + Ler transcrição com background → verde #5EA500, sem bg, centralizado
 *   3. Fade ausente → adicionar fade no PAINEL INTEIRO (não só nas notas), top + bottom
 *      stop antes das integrações (.sz-products).
 *
 * Não toca em editor de nota, modal, delete, ou integrações abaixo (SZ CRM/Pay/Monitoramento).
 */

/* === BUG 1: scroll preso na sessão de notas internas ===
 * Update 2026-05-29: integrações viraram tabs no topo. Card aproveita o espaço
 * via padding lateral menor + padding interno maior. NÃO usa flex/min-height
 * que quebra o scroll quando o card cresce com texto expandido.
 */
.sz-notes-list {
  overscroll-behavior: auto !important;
  max-height: calc(100vh - 200px) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
/* Card individual: altura ADAPTATIVA ao estado do botão Expandir.
 *
 * - Colapsado (line-clamp-4 ativo, texto truncado): altura natural — sem
 *   espaço vazio embaixo. Card "respira" do tamanho que precisa.
 * - Expandido (sem line-clamp): altura responsiva grande + scroll interno
 *   pra textos longos. Aproveita o fim da tela.
 *
 * Detecção via :has(.line-clamp-4). Botão Expandir/Recolher MANTIDO.
 */
.sz-note-card {
  padding: 20px !important;
}
/* Estado EXPANDIDO: card grande + scroll interno + chain pro painel +
 * fade nas bordas (top e bottom) via mask-image. O fade indica visualmente
 * que há mais conteúdo acima/abaixo conforme o scroll. */
.sz-note-card:not(:has(.line-clamp-4)) {
  height: clamp(300px, calc(100vh - 550px), 800px) !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 20px,
    black calc(100% - 20px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 20px,
    black calc(100% - 20px),
    transparent 100%
  );
}
/* Scrollbar discreto dentro do card */
.sz-note-card::-webkit-scrollbar { width: 4px; }
.sz-note-card::-webkit-scrollbar-track { background: transparent; }
.sz-note-card::-webkit-scrollbar-thumb { background: #D4D4D4; border-radius: 4px; }
html.dark .sz-note-card::-webkit-scrollbar-thumb,
.dark .sz-note-card::-webkit-scrollbar-thumb { background: #3E3E43; }

/* === BUG 2: botão Expandir/Recolher (ContactNoteItem) === */
.sz-note-card button,
.sz-note-card [role="button"] {
  background: transparent !important;
  background-color: transparent !important;
  color: rgb(94, 165, 0) !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  align-self: stretch !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  padding: 4px 0 !important;
  border: none !important;
  border-radius: 0 !important;
}
.sz-note-card button:hover,
.sz-note-card [role="button"]:hover {
  background: transparent !important;
  color: rgb(74, 134, 0) !important;
}
/* Lixeira preservada — não vira verde */
.sz-note-card button.opacity-0,
.sz-note-card button[class*="ruby"],
.sz-note-card button[class*="lucide-trash"] {
  width: auto !important;
  background: transparent !important;
  color: inherit !important;
  padding: revert !important;
}

/* === BUG 2 também: botão "Ler transcrição" === */
.sz-cn-trans-btn {
  background: transparent !important;
  color: rgb(94, 165, 0) !important;
  width: 100% !important;
  align-self: stretch !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
}
.sz-cn-trans-btn:hover {
  background: transparent !important;
  color: rgb(74, 134, 0) !important;
}

/* === BUG 3: FADE DO PAINEL INTEIRO === */
/* Top: sticky no topo do scroll container — visível quando scrollTop > 0
 * Bottom: injetado ANTES de .sz-products, sticky bottom — esconde quando
 * integrações entram na viewport.
 *
 * Vars de cor seguem o tema do Chatwoot (light: branco / dark: #1D1E21).
 */
.sz-panel-fade-top,
.sz-panel-fade-bottom {
  --sz-panel-bg: #FFFFFF;
  position: sticky;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.18s ease;
  /* Margem negativa pra não ocupar espaço no fluxo (sticky ainda funciona) */
  margin-left: 0;
  margin-right: 0;
}
html.dark .sz-panel-fade-top,
html.dark .sz-panel-fade-bottom,
.dark .sz-panel-fade-top,
.dark .sz-panel-fade-bottom {
  --sz-panel-bg: #1D1E21;
}

.sz-panel-fade-top {
  top: 0;
  margin-bottom: -48px;    /* não empurra conteúdo abaixo */
  background: linear-gradient(
    to bottom,
    var(--sz-panel-bg) 0%,
    var(--sz-panel-bg) 35%,
    transparent 100%
  );
}

.sz-panel-fade-bottom {
  bottom: 0;
  margin-top: -48px;       /* sobrepõe o conteúdo logo acima (notas) */
  background: linear-gradient(
    to top,
    var(--sz-panel-bg) 0%,
    var(--sz-panel-bg) 35%,
    transparent 100%
  );
}

.sz-panel-fade-top.sz-fade--visible,
.sz-panel-fade-bottom.sz-fade--visible {
  opacity: 1;
}