/*
 * sz-tokyo-emptystate.css
 * Customiza visual da tela "Nenhuma conversa atribuída a você" só no tokyo.
 *
 * Estrutura HTML do SzEmptyState.vue:
 *   .sz-empty-state
 *     .sz-empty-illustration
 *       .sz-empty-ring-outer
 *         .sz-empty-ring-inner
 *           .sz-empty-icon-center   <- substituído pelo logo solarz via JS
 *     .sz-empty-text
 *       h3    <- "Nenhuma conversa atribuída a você"
 *       p     <- "Novas conversas aparecerão aqui."
 *     .sz-empty-cards
 *       .sz-empty-card (x2)
 *         .sz-empty-card-icon (.sz-icon-green | .sz-icon-purple)
 *         .sz-empty-card-body
 *           .sz-empty-card-title
 *           .sz-empty-card-desc
 *         .sz-empty-card-chevron
 */

/* Padrão isométrico (losangos a 30°) com fade do canto superior direito ao
 * inferior esquerdo. Aplicado no PARENT do .sz-empty-state via :has() pra
 * cobrir toda a área visível (incluindo o espaço acima do empty state).
 */
:has(> .sz-empty-state) {
  position: relative;
  overflow: hidden;
}
:has(> .sz-empty-state)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      30deg,
      transparent 0,
      transparent 39px,
      rgba(255, 255, 255, 0.05) 39px,
      rgba(255, 255, 255, 0.05) 40px
    ),
    repeating-linear-gradient(
      -30deg,
      transparent 0,
      transparent 39px,
      rgba(255, 255, 255, 0.05) 39px,
      rgba(255, 255, 255, 0.05) 40px
    );
  -webkit-mask-image: linear-gradient(
    to bottom left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0) 80%
  );
  mask-image: linear-gradient(
    to bottom left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0) 80%
  );
}
body:not(.dark) :has(> .sz-empty-state)::before {
  background:
    repeating-linear-gradient(
      30deg,
      transparent 0,
      transparent 39px,
      rgba(0, 0, 0, 0.06) 39px,
      rgba(0, 0, 0, 0.06) 40px
    ),
    repeating-linear-gradient(
      -30deg,
      transparent 0,
      transparent 39px,
      rgba(0, 0, 0, 0.06) 39px,
      rgba(0, 0, 0, 0.06) 40px
    );
}
/* Light mode background — branco puro. A section ancestor (3 níveis acima
 * do .sz-empty-state) tem rgb(238,238,240) cinza por padrão. Forçar branco. */
body:not(.dark) section:has(.sz-empty-state) {
  background: #ffffff !important;
}
body:not(.dark) :has(> .sz-empty-state) {
  background: #ffffff !important;
}
body:not(.dark) .sz-empty-state {
  background: transparent !important;
}

/* .sz-empty-state continua transparente; o pattern vem do parent. */
.sz-empty-state {
  position: relative !important;
  background: transparent !important;
  z-index: 1;
}
/* Manter o ::before antigo desativado pra não duplicar pattern. */
.sz-empty-state::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background:
    repeating-linear-gradient(
      30deg,
      transparent 0,
      transparent 39px,
      rgba(255, 255, 255, 0.05) 39px,
      rgba(255, 255, 255, 0.05) 40px
    ),
    repeating-linear-gradient(
      -30deg,
      transparent 0,
      transparent 39px,
      rgba(255, 255, 255, 0.05) 39px,
      rgba(255, 255, 255, 0.05) 40px
    );
  -webkit-mask-image: linear-gradient(
    to bottom left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0) 80%
  );
  mask-image: linear-gradient(
    to bottom left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0) 80%
  );
  pointer-events: none;
  z-index: 0;
}
.sz-empty-state > * {
  position: relative;
  z-index: 1;
}
body:not(.dark) .sz-empty-state::before {
  background:
    repeating-linear-gradient(
      30deg,
      transparent 0,
      transparent 39px,
      rgba(0, 0, 0, 0.06) 39px,
      rgba(0, 0, 0, 0.06) 40px
    ),
    repeating-linear-gradient(
      -30deg,
      transparent 0,
      transparent 39px,
      rgba(0, 0, 0, 0.06) 39px,
      rgba(0, 0, 0, 0.06) 40px
    );
}

/* Remover anéis de glow do ícone central */
.sz-empty-ring-outer,
.sz-empty-ring-inner {
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.sz-empty-icon-center {
  background: transparent !important;
  box-shadow: none !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
}
.sz-empty-illustration {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Parar todas as animações do ícone (pulse/ring) — logo deve ficar parado. */
.sz-empty-illustration,
.sz-empty-illustration *,
.sz-empty-ring-outer,
.sz-empty-ring-inner,
.sz-empty-icon-center,
.sz-empty-icon-center * {
  animation: none !important;
  -webkit-animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Título */
.sz-empty-text h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
body.dark .sz-empty-text h3 {
  color: #ffffff !important;
}
body:not(.dark) .sz-empty-text h3 {
  color: #000000 !important;
}

/* Subtítulo */
.sz-empty-text p {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: normal !important;
}
body.dark .sz-empty-text p {
  color: #9797a0 !important;
}
body:not(.dark) .sz-empty-text p {
  color: #6b6b75 !important;
}

/* Card container — bg #2D2E33, border #303138 1px, radius 12 */
body.dark .sz-empty-card {
  background: #2d2e33 !important;
  border: 1px solid #303138 !important;
  border-radius: 12px !important;
}
body:not(.dark) .sz-empty-card {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
}

/* Card icon wrapper — 40x40 / radius 12 / padding 8 */
.sz-empty-card-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.dark .sz-empty-card-icon.sz-icon-green {
  background: #293e2e !important;
  color: #8ace8a !important;
}
body.dark .sz-empty-card-icon.sz-icon-purple {
  background: #3f3864 !important;
  color: #c2acf2 !important;
}
body:not(.dark) .sz-empty-card-icon.sz-icon-green {
  background: #eef6f0 !important;
  color: #388e3c !important;
}
body:not(.dark) .sz-empty-card-icon.sz-icon-purple {
  background: #ece9fc !important;
  color: #673bcb !important;
}
/* Forçar fill dos paths SVG no light (sobrescreve o fill=#8ACE8A / #C2ACF2 hardcoded no JS) */
body:not(.dark) .sz-empty-card-icon.sz-icon-green svg path[fill="#8ACE8A"],
body:not(.dark) .sz-empty-card-icon.sz-icon-green svg path {
  fill: #388e3c !important;
}
body:not(.dark) .sz-empty-card-icon.sz-icon-purple svg path[fill="#C2ACF2"],
body:not(.dark) .sz-empty-card-icon.sz-icon-purple svg path {
  fill: #673bcb !important;
}
.sz-empty-card-icon svg {
  display: block;
  margin: auto !important;
  vertical-align: middle !important;
  flex-shrink: 0;
}

/* Card título */
.sz-empty-card-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
body.dark .sz-empty-card-title {
  color: #ffffff !important;
}
body:not(.dark) .sz-empty-card-title {
  color: #000000 !important;
}

/* Esconder chevron `>` à direita dos cards (não existe no design) */
.sz-empty-card-chevron {
  display: none !important;
}

/* Card descrição */
.sz-empty-card-desc {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  color: #9797a0 !important;
}