/*
 * Notificações (notifications/index), in the bell's modal or as a page: the
 * filters (.tabs), what waits for an answer in a tinted box, then the rest
 * by when it came; under the list, the hint and "Marcar todas como lidas".
 */
.app {
  .inbox-section { display: grid; gap: 8px; }
  .inbox-section h3 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .inbox-section.waiting { padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 6%, var(--paper));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, var(--line)); }
  .inbox-section.waiting h3 { color: var(--accent); }
  .inbox-filters .count-chip { font-size: 11px; }

  /* In the modal the buttons sit on the right, the hint on the left */
  .modal .inbox .inbox-hint { margin-right: auto; }
}

@media (max-width: 600px) {
  .app .modal .inbox .inbox-hint { flex-basis: 100%; }
}