/* ═══════════════════════════════════════════════════════════════
   StreamKit — Overlay para OBS / vMix / MELD / XSplit
   Fundo TRANSPARENTE: o app hospedeiro compõe com alpha.
   Animações apenas com opacity/transform (custo ~zero de GPU).
   ═══════════════════════════════════════════════════════════════ */

/* Paleta do card. Os valores abaixo são só o PADRÃO (identidade Cruzeiro):
   o overlay.js sobrescreve estas variáveis com a paleta escolhida pelo
   usuário, que chega junto com a mensagem. Trocar cor não custa nada. */
:root {
  --ov-head-bg: #2F529E;   /* fundo do cabeçalho */
  --ov-head-fg: #ffffff;   /* texto do cabeçalho — calculado por contraste */
  --ov-body-bg: #ffffff;   /* fundo do corpo */
  --ov-body-fg: #162954;   /* texto da mensagem */
  --ov-accent:  #F1B419;   /* filete de destaque no topo */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: transparent;          /* ← chave da transparência */
  overflow: hidden;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* Fundo simulado só para pré-visualizar no navegador comum (?preview=1).
   Nunca ativo no OBS/vMix. */
body.preview {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,58,95,0.92)),
    repeating-conic-gradient(#334155 0% 25%, #1e293b 0% 50%) 0 / 40px 40px;
}

/* ── Modo StreamYard (aba compartilhada, opaca) ──────────────────
   Só entra quando body.sy está ativo (?mode=streamyard). No OBS, nada
   disso aparece e o fundo continua transparente. */
.hidden { display: none !important; }

.backdrop {
  position: fixed; inset: 0; z-index: 0; display: none;
  background-color: #0b0e13;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.sy { background: #0b0e13; }     /* garante opaco no compartilhamento */
body.sy .backdrop { display: block; }
body.sy .stage { z-index: 1; }        /* card acima do papel de parede */

/* Botão central de destravar áudio */
.audio-unlock {
  position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 14px 22px; border: 0; border-radius: 12px; cursor: pointer;
  background: #f1b419; color: #191919; font: 700 16px 'Outfit', system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* Painel de configuração do StreamYard (canto superior direito) */
.sy-config {
  position: fixed; z-index: 9998; top: 12px; right: 12px; width: 262px;
  background: rgba(17,20,26,.96); color: #e6e9ef; border: 1px solid #2a2f3a;
  border-radius: 12px; padding: 12px; font: 13px 'Outfit', system-ui, sans-serif;
  display: flex; flex-direction: column; gap: 8px;
}
.sy-title { font-weight: 700; }
.sy-key   { display: block; font-weight: 400; font-size: 11px; color: #8b93a3; margin-top: 2px; }
.sy-row   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sy-btn   { background: #2f529e; color: #fff; border: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.sy-btn-sm { padding: 6px 10px; }
.sy-done  { background: #37d67a; color: #0b1b10; }
.sy-link  { background: none; border: 0; color: #8fb7ff; cursor: pointer; font-size: 12px; padding: 0; }
.sy-info  { font-size: 11px; color: #37d67a; margin: 0; min-height: 14px; }
.sy-hint  { font-size: 11px; color: #8b93a3; margin: 2px 0 0; }
.sy-config input[type=color] { width: 44px; height: 28px; border: 0; background: none; cursor: pointer; }

/* ── Palco / posicionamento ──────────────────────────────────── */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  padding: clamp(10px, 3.2vh, 48px);
  pointer-events: none;
}
.stage.pos-bottom-left  { align-items: flex-end;  justify-content: flex-start; }
.stage.pos-bottom-right { align-items: flex-end;  justify-content: flex-end; }
.stage.pos-top-left     { align-items: flex-start; justify-content: flex-start; }
.stage.pos-top-right    { align-items: flex-start; justify-content: flex-end; }
.stage.pos-center       { align-items: center;     justify-content: center; }

/* ── Card ──────────────────────────────────────────────────────
   O font-size do .card é a UNIDADE BASE: todo o conteúdo interno é
   em `em`, então o card inteiro escala junto com a altura da canvas.
   Funciona em 1920x1080, 1920x600, vertical, etc. O ?scale= ajusta
   manualmente quando o automático não agrada.                      */
/* O wrapper é a UNIDADE ANIMADA e carrega a unidade base de tamanho, para a
   aba de marca escalar junto com o card. */
.card-wrap {
  font-size: calc(clamp(13px, 3vh, 34px) * var(--ov-scale, 1));
  width: min(900px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: opacity 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card-wrap.enter { opacity: 0; transform: translateY(0.6em) scale(0.985); }
.card-wrap.leave { opacity: 0; transform: translateY(-0.25em) scale(0.99); transition-duration: 300ms; }

.card {
  width: 100%;
  border-radius: 0.53em;
  overflow: hidden;
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.42);
}

/* Aba de CATEGORIA "grudada" no topo/início do card (canto superior esquerdo) */
.card-category {
  align-self: flex-start;
  margin-left: 0.6em;
  padding: 0.32em 0.9em;
  border-radius: 0.4em 0.4em 0 0;
  background: var(--ov-head-bg);
  color: var(--ov-head-fg);
  font-size: 0.6em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.28);
}

/* Logo do canal marcando o chat, no canto oposto ao avatar do usuário */
.head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 0.6em; flex-shrink: 0; }
.brand-mark { height: 1.8em; width: auto; max-width: 5em; border-radius: 0.25em; object-fit: contain; display: block; }

.card-head {
  display: flex;
  align-items: center;
  gap: 0.53em;
  padding: 0.47em 0.7em;
}
.avatar {
  width: 2.24em;
  height: 2.24em;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 0.09em rgba(255, 255, 255, 0.35);
}
.handle {
  font-size: 0.88em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.badge {
  font-size: 0.5em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: 0.47em;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
}
.amount {
  font-size: 1.06em;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.card-body {
  padding: 0.59em 0.7em 0.7em;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.32;
  word-break: break-word;
  /* Trava de segurança: mensagem muito longa não estoura a canvas */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
/* Evento sem texto (novo membro / gifting): o meta vira o corpo */
.card-body.meta-only { font-size: 0.88em; font-weight: 600; opacity: 0.95; }

/* Meta como subtítulo (ex.: "58 meses · Sócio Atleta") acima da mensagem */
.card-meta {
  background: var(--ov-body-bg);
  color: var(--ov-head-bg);
  padding: 0.47em 0.7em 0;
  font-size: 0.76em;
  font-weight: 700;
  line-height: 1.2;
}
.card-meta + .card-body { padding-top: 0.18em; }

/* ── Super Chat: paleta por tier (padrão YouTube) ─────────────── */
.k-superchat.tier-1 .card-head { background: #1565C0; color: #fff; }
.k-superchat.tier-1 .card-body { background: #1E88E5; color: #fff; }
.k-superchat.tier-2 .card-head { background: #00B8D4; color: #000; }
.k-superchat.tier-2 .card-body { background: #00E5FF; color: #000; }
.k-superchat.tier-3 .card-head { background: #00BFA5; color: #000; }
.k-superchat.tier-3 .card-body { background: #1DE9B6; color: #000; }
.k-superchat.tier-4 .card-head { background: #FFB300; color: #000; }
.k-superchat.tier-4 .card-body { background: #FFCA28; color: #000; }
.k-superchat.tier-5 .card-head { background: #E65100; color: #fff; }
.k-superchat.tier-5 .card-body { background: #F57C00; color: #fff; }
.k-superchat.tier-6 .card-head { background: #C2185B; color: #fff; }
.k-superchat.tier-6 .card-body { background: #E91E63; color: #fff; }
.k-superchat.tier-7 .card-head { background: #B71C1C; color: #fff; }
.k-superchat.tier-7 .card-body { background: #E62117; color: #fff; }
/* ── Demais tipos: identidade Cruzeiro ────────────────────────────
   Header no azul do Cruzeiro (#2F529E), corpo branco com texto
   em azul escuro. A categoria agora aparece na aba acima do card.  */
.card:not(.k-superchat) .card-head { background: var(--ov-head-bg); color: var(--ov-head-fg); }
.card:not(.k-superchat) .card-body { background: var(--ov-body-bg); color: var(--ov-body-fg); }
.card:not(.k-superchat) .avatar    { box-shadow: 0 0 0 0.09em rgba(255, 255, 255, 0.55); }