/* =====================================================================
   iCasar — Sino de notificações (inbox in-app)
   Compartilhado entre o site do casal, o painel dos noivos e o admin.
   ===================================================================== */
.push-inbox-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }

.push-inbox-btn {
  background: none; border: none; cursor: pointer; padding: 8px; position: relative; color: inherit;
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .15s ease;
}
.push-inbox-btn:hover { background: rgba(0, 0, 0, .06); }

.push-inbox-badge {
  position: absolute; top: 2px; right: 2px; background: #e74c3c; color: #fff; font-size: .65rem;
  border-radius: 50%; min-width: 16px; height: 16px; display: none; align-items: center; justify-content: center;
  font-weight: 700; padding: 0 4px; line-height: 1;
}

.push-inbox-panel {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  width: min(340px, 92vw); max-height: 70vh; background: #fff; border-radius: 14px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, .18); z-index: 1000; overflow: hidden;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}
.push-inbox-panel.aberto { display: block; opacity: 1; transform: none; }

.push-inbox-topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid #eee; gap: 8px;
}
.push-inbox-topo strong { font-size: .92rem; }
.push-inbox-marcar-todas { background: none; border: none; color: #3498db; cursor: pointer; font-size: .78rem; padding: 0; }
.push-inbox-limpar { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: .78rem; padding: 0; margin-left: 10px; }

.push-inbox-lista { max-height: calc(70vh - 54px); overflow-y: auto; }

.push-inbox-item { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background .15s; }
.push-inbox-item:hover { background: #f7f9fb; }
.push-inbox-item.nao-lida { background: #f0f7ff; }
.push-inbox-item-linha { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.push-inbox-item-corpo { min-width: 0; }
.push-inbox-item-titulo { font-size: .85rem; margin-bottom: 2px; word-break: break-word; color: #222; }
.push-inbox-item.nao-lida .push-inbox-item-titulo { font-weight: 600; }
.push-inbox-item-texto { font-size: .78rem; color: #666; line-height: 1.4; word-break: break-word; }
.push-inbox-item-data { font-size: .7rem; color: #999; white-space: nowrap; flex-shrink: 0; }

.push-inbox-vazio { padding: 34px 16px; text-align: center; color: #999; font-size: .85rem; }

/* Backdrop só existe/aparece no mobile -- toca fora do painel pra fechar. */
.push-inbox-backdrop { display: none; }

/* Mobile: em vez de um dropdown "ao lado" do sino (que em telas
   estreitas ficava cortado/mal posicionado), o painel vira um modal
   centralizado de verdade. */
@media (max-width: 640px) {
  .push-inbox-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(20, 20, 20, .4);
    z-index: 999; opacity: 0; transition: opacity .16s ease;
  }
  .push-inbox-backdrop.aberto { display: block; opacity: 1; }
  .push-inbox-panel {
    position: fixed; top: 50%; left: 50%; right: auto;
    transform: translate(-50%, -46%); width: min(360px, 92vw); max-height: 78vh;
    z-index: 1001;
  }
  .push-inbox-panel.aberto { transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .push-inbox-panel, .push-inbox-backdrop { transition: none; }
}