/* ================================================================
   BUZÓN DE AVISOS — panel modal + campanita
   ================================================================ */

/* La campanita y su fila viven en css/ui/account-menu.css: ese markup lo
   pinta account-menu.js, y tenerlo aquí hacía que el botón se saliera
   de sitio si esta hoja no llegaba a aplicarse. Aquí solo queda el
   panel modal, que sí es de este módulo. */

/* ── Overlay + panel ── */
.inbox-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(1rem, 6vh, 4rem) 1rem;
  background: rgba(4, 2, 10, 0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.inbox-overlay.is-open { opacity: 1; visibility: visible; }
body.inbox-open { overflow: hidden; }

.inbox-panel {
  width: min(38rem, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.12));
  background: var(--pl-panel, rgba(17, 10, 26, 0.96));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
  transform: translateY(-14px) scale(0.98);
  transition: transform 0.22s ease;
  overflow: hidden;
}
.inbox-overlay.is-open .inbox-panel { transform: translateY(0) scale(1); }

.inbox-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--pl-border, rgba(255, 255, 255, 0.1));
}
.inbox-head-title { font-family: var(--font-heading, "Orbitron", sans-serif); font-weight: 800; font-size: 1rem; }
.inbox-close {
  border: none; background: none; color: var(--pl-muted, #bba9df);
  font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0.3rem;
}
.inbox-close:hover { color: var(--pl-text, #fff); }

.inbox-list {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1.1rem 1.3rem 1.4rem;
  overflow-y: auto;
}
.inbox-empty { text-align: center; color: var(--pl-muted, #bba9df); padding: 2.5rem 0; margin: 0; }

.inbox-card {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.1));
  background: var(--pl-panel-alt, rgba(255, 255, 255, 0.03));
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.inbox-card.is-claimed { opacity: 0.82; }
/* Salida al quitar */
.inbox-card.is-going { opacity: 0; transform: translateX(1.5rem); }

/* Botón de quitar */
.inbox-hide {
  align-self: start;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--pl-muted, #bba9df);
  font: inherit; font-size: 0.78rem; line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, background 0.15s ease;
}
.inbox-card:hover .inbox-hide { opacity: 1; }
.inbox-hide:hover,
.inbox-hide:focus-visible {
  opacity: 1;
  color: #ff8da6;
  border-color: #ff8da6;
  background: rgba(255, 141, 166, 0.12);
}
.inbox-hide:disabled { opacity: 0.3; cursor: default; }

/* Táctil: siempre visible */
@media (hover: none) {
  .inbox-hide { opacity: 0.75; }
}
.inbox-kind {
  width: 2.4rem; height: 2.4rem; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--pl-grad, linear-gradient(135deg, #8deeff, #a96ae7));
}
.inbox-content { min-width: 0; }
.inbox-title { margin: 0 0 0.25rem; font-weight: 800; font-size: 0.95rem; color: var(--pl-text, #f8f2ff); }
.inbox-text { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.55; color: var(--pl-soft, #d8c9ff); white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-reward { margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--pl-cyan, #8deeff); }
.inbox-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.inbox-date { font-size: 0.74rem; color: var(--pl-muted, #bba9df); opacity: 0.85; }

.inbox-claim {
  border: none; border-radius: 999px; cursor: pointer;
  padding: 0.5rem 1.1rem; font: inherit; font-weight: 800; font-size: 0.82rem;
  color: #12001f;
  background: var(--pl-grad, linear-gradient(135deg, #8deeff, #a96ae7));
  box-shadow: 0 8px 20px -8px rgba(169, 106, 231, 0.6);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.inbox-claim:hover { filter: brightness(1.07); transform: translateY(-1px); }
.inbox-claim:disabled { opacity: 0.6; cursor: default; }
.inbox-claimed { font-size: 0.82rem; font-weight: 800; color: #7ef7d0; }
/* Cumpleaños vencido sin reclamar */
.inbox-expired { font-size: 0.82rem; font-weight: 800; color: var(--pl-muted, #9b93ad); }

/* ── Toast de recompensa ── */
.inbox-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 140%);
  z-index: 1300; max-width: min(90vw, 30rem);
  padding: 0.9rem 1.3rem; border-radius: 14px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.14));
  background: var(--pl-panel, rgba(17, 10, 26, 0.98));
  color: var(--pl-text, #f8f2ff);
  font-weight: 700; font-size: 0.9rem; text-align: center;
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.inbox-toast.is-in { transform: translate(-50%, 0); }

body.theme-pixel .inbox-panel,
body.theme-pixel .inbox-card,
body.theme-pixel .inbox-kind,
body.theme-pixel .inbox-claim,
body.theme-pixel .inbox-hide,
body.theme-pixel .inbox-toast { border-radius: 0; }

@media (max-width: 540px) {
  .inbox-card { grid-template-columns: 2rem 1fr auto; gap: 0.6rem; }
}

/* ── Notificaciones de comentarios (pulsables) ── */
.inbox-notif.is-navegable {
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.inbox-notif.is-navegable:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}

.inbox-notif.is-navegable:focus-visible {
  outline: 2px solid var(--pl-cyan, #8deeff);
  outline-offset: 2px;
}

/* Marca de "sin leer" */
.inbox-notif.is-unread {
  box-shadow: inset 3px 0 0 #8eefff;
}

.inbox-notif.is-unread .inbox-title {
  font-weight: 800;
}

/* Ya la abriste: se apaga en el sitio, sin esperar a recargar el panel */
.inbox-notif.is-leida {
  opacity: 0.55;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.12);
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.inbox-notif.is-leida .inbox-title { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .inbox-notif.is-leida { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .inbox-notif.is-navegable { transition: none; }
  .inbox-notif.is-navegable:hover { transform: none; }
}