/* =========================================================
   31-user-fixes.css
   Correções pedidas pelo usuário:
   1) Mood do perfil em local visível + emojis reais
   2) Rolês: vídeo preenchendo, botões alinhados/consistentes
   3) Stories: pause/close/add na mesma referência
   4) Feed: vídeo preenchendo
   5) Pop-up bonito (WoozModal polido)
   ========================================================= */

/* ---------- 1. MOOD DO PERFIL (novo chip abaixo do nome) ---------- */

/* Some com o badge antigo sobre o avatar (não usamos mais) */
.profile-hero-inner .mood-badge,
.profile-hero-inner .mood-badge-lg {
  display: none !important;
}

.profile-mood-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mood-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(34,211,238,.14));
  border: 1px solid rgba(148, 197, 255, .22);
  color: #e6f0ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1px;
  box-shadow: 0 8px 22px -14px rgba(56, 189, 248, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .15s ease;
}
.mood-chip:hover { transform: translateY(-1px); }
.mood-chip-text { line-height: 1; }
.mood-emoji-img {
  width: 18px; height: 18px;
  vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.mood-badge .mood-emoji-img { width: 14px; height: 14px; }
.mood-open-emoji .mood-emoji-img { width: 15px; height: 15px; }

/* Emojis reais no mood picker do footer / posts */
.mood-emoji .mood-emoji-img { width: 22px; height: 22px; }


/* ---------- 2. RÔLES: vídeo preenchendo a tela ---------- */

/* Substitui object-fit: contain (que deixa faixas pretas gigantes)
   por cover + object-position center — fica cheio como TikTok/Reels */
.role-slide video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #000;
}


/* ---------- 3. RÔLES: botões unificados (tamanho/estilo/posição) ---------- */

/* Todos os botões flutuantes do rolês seguem o mesmo padrão:
   círculo 42px, glass escuro, borda sutil, sombra igual.
   O botão "+" é o único destacado (gradient). */
.roles-back,
.roles-add,
.role-mute-icon, {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(15, 23, 42, .55) !important;
  color: #fff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55);
  transition: transform .15s ease, background .18s ease, box-shadow .18s ease;
  padding: 0 !important;
}
.roles-back svg,
.roles-add svg,
.role-mute-icon svg, {
  width: 20px !important;
  height: 20px !important;
}

/* Posições no topo:  [voltar] .......... [volume] [lixeira] [+] */
.roles-back {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
  left: 14px !important;
  right: auto !important;
  z-index: 40 !important;
}
.role-mute-icon {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
  right: calc(14px + 42px + 8px + 42px + 8px) !important; /* espaço p/ lixeira e + */
  left: auto !important;
  z-index: 40 !important;
}
.roles-add {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
  right: 14px !important;
  left: auto !important;
  z-index: 41 !important;
  background: linear-gradient(135deg, #3b82f6, #22d3ee) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: 0 12px 28px -10px rgba(34, 211, 238, .6) !important;
}

/* Quando NÃO tem botão de lixeira (post de outra pessoa),
   volume fica só ao lado do + */
  right: calc(14px + 42px + 8px) !important;
}

.roles-back:hover,
.role-mute-icon:hover,
.roles-add:hover { transform: scale(1.06); box-shadow: 0 14px 32px -10px rgba(34, 211, 238, .8) !important; }
.roles-back:active,
.roles-add:active,
.role-mute-icon:active,


/* ---------- 4. STORIES: botões na mesma referência ---------- */

.story-add-btn,
.story-pause-toggle,
.story-close {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background: rgba(15, 23, 42, .55) !important;
  color: #fff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55);
  transition: transform .15s ease, background .18s ease, box-shadow .18s ease;
  padding: 0 !important;
  font-size: 0;
  text-decoration: none;
}
.story-add-btn svg,
.story-pause-toggle svg,
.story-close svg { width: 20px !important; height: 20px !important; }

/* O "+" tem o mesmo destaque em gradient */
.story-add-btn {
  background: linear-gradient(135deg, #3b82f6, #22d3ee) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  box-shadow: 0 12px 28px -10px rgba(34, 211, 238, .6) !important;
}

/* O "✕" (fechar) precisa mostrar o texto */
.story-close { font-size: 20px !important; line-height: 1; font-weight: 500; }
.story-close::before {
  /* remove qualquer conteúdo herdado, garante só o ✕ */
}

.story-add-btn:hover { transform: scale(1.06); box-shadow: 0 14px 32px -10px rgba(34, 211, 238, .8) !important; }
.story-pause-toggle:hover,
.story-close:hover { background: rgba(15, 23, 42, .78) !important; transform: scale(1.04); }
.story-add-btn:active,
.story-pause-toggle:active,
.story-close:active { transform: scale(.92); }


/* ---------- 5. FEED: vídeo do post preenche o quadro ---------- */

/* Antes era object-fit: contain — deixava tarja preta enorme.
   Agora preenche mantendo a razão 4/5 do wrap */
.post-video-wrap {
  aspect-ratio: 9 / 16 !important; /* vídeos verticais dominam a plataforma */
  max-height: 82vh !important;
  background: #0a0a0a !important;
}
.post-video-wrap video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.post-image-wrap img {
  object-fit: cover !important;
}
.post-image-wrap {
  aspect-ratio: 4 / 5;
  max-height: 82vh;
}


/* ---------- 6. WoozModal polido (pop-up bonito) ---------- */

.wz-modal-overlay {
  background: rgba(3, 7, 18, .72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.wz-modal {
  background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%) !important;
  border: 1px solid rgba(148, 197, 255, .18) !important;
  border-radius: 22px !important;
  padding: 28px 24px 22px !important;
  max-width: 380px !important;
  width: calc(100% - 28px) !important;
  box-shadow: 0 30px 80px -20px rgba(2, 6, 23, .8),
              0 0 0 1px rgba(56, 189, 248, .08) inset !important;
  text-align: center !important;
  animation: wzModalIn .28s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes wzModalIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wz-modal .wz-modal-icon {
  width: 60px; height: 60px; margin: 0 auto 14px !important;
  border-radius: 50% !important;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #22d3ee) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px -10px rgba(34, 211, 238, .65) !important;
}
.wz-modal.is-danger .wz-modal-icon {
  background: linear-gradient(135deg, #f97316, #ef4444) !important;
  box-shadow: 0 14px 30px -10px rgba(239, 68, 68, .6) !important;
}
.wz-modal-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  margin: 0 0 6px !important;
  letter-spacing: -.2px;
}
.wz-modal-body {
  color: #cbd5e1 !important;
  font-size: .95rem !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
}
.wz-modal-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 4px !important;
}
.wz-modal-btn {
  min-width: 120px !important;
  padding: 11px 18px !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 700 !important;
  font-size: .92rem !important;
  cursor: pointer;
  transition: transform .12s, box-shadow .18s, background .18s;
}
.wz-modal-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #22d3ee) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -8px rgba(34, 211, 238, .55) !important;
}
.wz-modal-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(34, 211, 238, .75) !important; }
.wz-modal-btn-secondary {
  background: rgba(148, 163, 184, .12) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, .2) !important;
}
.wz-modal-btn-secondary:hover { background: rgba(148, 163, 184, .2) !important; }
.wz-modal-btn-danger {
  background: linear-gradient(135deg, #f97316, #ef4444) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -8px rgba(239, 68, 68, .55) !important;
}
.wz-modal-btn-danger:hover { transform: translateY(-1px); }
.wz-modal-input {
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .5) !important;
  color: #f8fafc !important;
  margin: 0 0 14px !important;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.wz-modal-input:focus {
  border-color: rgba(56, 189, 248, .5) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18) !important;
}


/* ---------- 7. Extras responsivos: espaço no header pros botões ---------- */

@media (max-width: 480px) {
  .role-mute-icon { right: calc(14px + 42px + 8px + 42px + 6px) !important; }
}