/* The question before the first browser notification, and its rows in Settings. Frosted glass like
   every HUD; it sits just above the status bar, clear of the toast (which sits at the same height). */

.notify-prompt { position: fixed; z-index: 31; left: 50%; bottom: calc(var(--bottom-hud, 0px) + 2 * var(--gap) + 52px); display: none; align-items: center; gap: 12px; width: max-content; max-width: min(520px, calc(100vw - 2 * var(--gap))); margin: 0; padding: 10px 12px 10px 16px; font-size: 13.5px; transform: translateX(-50%); }
.notify-prompt.on { display: flex; animation: notify-in .25s ease both; }
.notify-prompt p { margin: 0; flex: 1 1 auto; line-height: 1.35; }
.notify-prompt .acts { display: flex; flex: none; gap: 6px; }
.notify-prompt .btn { min-height: 34px; padding: 4px 14px; }

.notify-setting input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.notify-setting[hidden], .notify-hint[hidden] { display: none; }
.notify-hint { margin: 0 2px 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }

@keyframes notify-in { from { opacity: 0; transform: translate(-50%, 6px); } }

@media (max-width: 760px) {
  .notify-prompt { flex-direction: column; align-items: stretch; width: calc(100vw - 2 * var(--gap)); gap: 8px; padding: 12px 14px; }
  .notify-prompt .acts { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .notify-prompt.on { animation: none; } }
body.pip .notify-prompt, body.record .notify-prompt { display: none !important; }