/* ================================================================
   BUZÓN DE AVISOS — panel modal + campanita
   Usa los tokens --pl-* (la portada carga styles.css/themes.css).
   ================================================================ */

/* ── Campanita en el menú lateral ── */
.pl-head-row { display: flex; align-items: stretch; gap: 0.5rem; }
.pl-head-row .pl-drawer-head { flex: 1; min-width: 0; }

.pl-bell {
  position: relative;
  flex-shrink: 0;
  width: 2.9rem;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.12));
  border-radius: 16px;
  background: var(--pl-panel-alt, rgba(255, 255, 255, 0.04));
  color: var(--pl-soft, #d8c9ff);
  font-size: 1.15rem;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.pl-bell:hover { border-color: var(--pl-lilac, #a96ae7); transform: translateY(-1px); }
.pl-bell-dot {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: #ff5d73; box-shadow: 0 0 0 2px var(--pl-panel, #150b21);
}

/* ── 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; }

/* Tercera columna para el botón de quitar: así no se superpone al texto
   por largo que sea el título. */
.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 quitarlo: se va hacia la derecha antes de desaparecer. */
.inbox-card.is-going { opacity: 0; transform: translateX(1.5rem); }

/* Botón de quitar. Discreto por defecto —no compite con «Reclamar»— y se
   enciende en rojo al apuntarlo. En táctil no hay hover, así que se deja
   siempre algo visible. */
.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; }

/* Sin ratón el hover no existe: el botón se queda visible del todo. */
@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; }

/* ── 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 .pl-bell,
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; }
}