/* =========================================================
   WoozChat · Upgrade Pack (drop-in)
   Inclua DEPOIS de style.css e enhance.css:
     <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/woozchat-upgrade.css">
   ========================================================= */

/* ---------- 1. LOGO PNG (topbar + tela de login) ---------- */
.topbar .logo,
.auth-logo {
  /* esconde o texto e mostra o PNG */
  color: transparent !important;
  background: url("../img/woozchat-logo.png") center left / contain no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}
.topbar .logo {
  width: 150px;
  height: 40px;
}
.auth-logo {
  width: 260px;
  height: 78px;
  margin: 0 auto 6px;
  background-position: center;
}
@media (max-width: 480px) {
  .topbar .logo { width: 120px; height: 34px; }
  .auth-logo   { width: 210px; height: 64px; }
}

/* ---------- 2. PERFIL: capa responsiva + botão trocar ---------- */
.profile-hero { position: relative; overflow: hidden; }

.profile-cover {
  position: relative;
  height: clamp(140px, 26vw, 240px);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, #16224a 0%, #0b1130 100%);
}
.profile-cover .cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-cover::after {          /* fade pra unir com o card */
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent, rgba(5,7,13,.9));
  pointer-events: none;
}
.cover-change-btn {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 3;
  transition: transform .18s ease, background .18s ease;
}
.cover-change-btn:hover { background: rgba(0,0,0,.75); transform: translateY(-1px); }
.cover-change-btn svg { width: 15px; height: 15px; }

/* garante que o hero encaixe abaixo da topbar no mobile */
@media (max-width: 768px) {
  .profile-hero { border-radius: 18px; margin-top: 8px; }
  .profile-cover { border-radius: 18px 18px 0 0; }
  .profile-hero-inner { padding: 14px 16px 18px !important; }
  .profile-avatar-wrap-lg .profile-avatar { width: 88px !important; height: 88px !important; }
}
@media (max-width: 420px) {
  .profile-cover { height: 150px; }
  .profile-stats-v3 { gap: 4px !important; }
}

/* ---------- 3. MODAL DE RECORTE + FILTROS ---------- */
.cover-editor-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(3,5,12,.82);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn .2s ease;
}
.cover-editor {
  width: min(720px, 100%);
  max-height: 92vh; overflow: auto;
  background: linear-gradient(160deg,#141a33,#0a0e21);
  border: 1px solid rgba(120,140,255,.2);
  border-radius: 22px;
  padding: 18px;
  color: #eef;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.cover-editor h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.cover-editor-stage {
  position: relative;
  width: 100%; aspect-ratio: 3/1;
  border-radius: 14px; overflow: hidden;
  background: #000;
  touch-action: none; cursor: grab;
}
.cover-editor-stage:active { cursor: grabbing; }
.cover-editor-stage img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  max-width: none; user-select: none; -webkit-user-drag: none;
  transition: filter .25s ease;
}
.cover-editor-zoom {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 12px;
  font-size: 12px; color: #aab;
}
.cover-editor-zoom input[type=range] { flex: 1; accent-color: #4b7bff; }
.cover-filters {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
}
.cover-filters::-webkit-scrollbar { display: none; }
.cover-filter {
  flex: 0 0 auto;
  width: 78px;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  padding: 6px;
  border: 2px solid transparent;
  transition: border-color .15s ease, transform .15s ease;
}
.cover-filter img {
  width: 100%; aspect-ratio: 3/1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.cover-filter span {
  display:block; margin-top:4px;
  font-size: 11px; color: #bcd;
}
.cover-filter.active { border-color: #4b7bff; transform: translateY(-2px); }
.cover-editor-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px;
}
.cover-editor-actions button {
  padding: 10px 18px; border-radius: 12px; border: 0;
  font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff;
}
.cover-editor-actions .primary {
  background: linear-gradient(135deg,#4b7bff,#7aa2ff);
  box-shadow: 0 8px 22px rgba(75,123,255,.35);
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ---------- 4. CHAT: player de ÁUDIO custom ---------- */
.chat-bubble audio { display: none; } /* esconde o feio */
.woo-audio {
  --wa-bg: rgba(255,255,255,.08);
  --wa-bar: rgba(255,255,255,.25);
  --wa-fill: linear-gradient(90deg,#7aa2ff,#4b7bff);
  display: flex; align-items: center; gap: 10px;
  min-width: 200px; max-width: 280px;
  padding: 8px 12px 8px 8px;
  border-radius: 22px;
  background: var(--wa-bg);
  backdrop-filter: blur(6px);
}
.chat-bubble.mine .woo-audio {
  --wa-bg: rgba(255,255,255,.14);
  --wa-bar: rgba(255,255,255,.35);
  --wa-fill: linear-gradient(90deg,#ffffff,#dfe8ff);
}
.woo-audio-play {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg,#4b7bff,#7aa2ff);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(75,123,255,.35);
  transition: transform .15s ease;
}
.woo-audio-play:hover { transform: scale(1.06); }
.woo-audio-play svg { width: 16px; height: 16px; fill: currentColor; }
.woo-audio-mid { flex: 1; min-width: 0; }
.woo-audio-wave {
  display: flex; align-items: center; gap: 2px;
  height: 26px; overflow: hidden;
  position: relative;
}
.woo-audio-wave .bar {
  width: 3px; border-radius: 2px;
  background: var(--wa-bar);
  transition: background .1s linear;
}
.woo-audio-wave .bar.on {
  background: var(--wa-fill);
}
.woo-audio-time {
  font-size: 11px; opacity: .7; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* botão gravar áudio (feedback melhor) */
#chatAudioBtn.recording {
  background: linear-gradient(135deg,#ff4e6b,#ff7a99) !important;
  color: #fff !important;
  animation: recPulse 1.1s ease-in-out infinite;
}
@keyframes recPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,78,107,.5); }
  50%     { box-shadow: 0 0 0 12px rgba(255,78,107,0); }
}

/* ---------- 5. REAÇÕES ANIMADAS NO CHAT ---------- */
.chat-bubble { position: relative; }
.chat-bubble .msg-react-btn {
  position: absolute; top: -10px; right: -10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20,25,50,.9);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff; cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  font-size: 14px;
  z-index: 2;
}
.chat-bubble:hover .msg-react-btn { display: flex; }

.msg-reactions {
  position: absolute; bottom: -14px;
  left: 8px;
  display: flex; gap: 3px;
  background: rgba(20,25,50,.9);
  border: 1px solid rgba(255,255,255,.12);
  padding: 3px 6px; border-radius: 14px;
  font-size: 14px;
  animation: popIn .25s cubic-bezier(.4,1.6,.5,1);
}
.chat-bubble.mine .msg-reactions { left: auto; right: 8px; }
@keyframes popIn { from { transform: scale(.4); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.reaction-picker {
  position: absolute;
  display: flex; gap: 4px;
  padding: 6px 8px;
  background: linear-gradient(160deg,#1b2447,#0d1230);
  border: 1px solid rgba(120,140,255,.25);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  z-index: 20;
  animation: popIn .18s ease;
}
.reaction-picker button {
  width: 38px; height: 38px; border: 0;
  background: transparent; cursor: pointer;
  font-size: 24px;
  transition: transform .15s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.reaction-picker button:hover {
  transform: scale(1.35) rotate(-6deg);
  animation: emojiWiggle .5s ease infinite;
}
@keyframes emojiWiggle {
  0%,100% { transform: scale(1.35) rotate(-6deg); }
  50%     { transform: scale(1.45) rotate(6deg); }
}

/* emojis 3D (fluent) — carregados via CDN Microsoft Fluent Emoji */
.emoji-3d {
  width: 22px; height: 22px;
  vertical-align: -4px;
  display: inline-block;
}
.reaction-picker .emoji-3d { width: 32px; height: 32px; }