/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  top: calc(24px + env(safe-area-inset-top));
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  z-index: 10;
  max-width: calc(100vw - 32px);
}

@media (max-width: 600px) {
  :root { --topbar-h: 62px; }
  .round-btn, .pill-btn { height: 44px; }
  .round-btn { width: 44px; }
  .view-page { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 1.6rem; }
  .row2 { grid-template-columns: 1fr; }
  .consent { flex-direction: column; align-items: flex-start; }
  .bubble { max-width: 92%; }
}


/* ---------- Shared bits for menu + settings ---------- */

button.round-btn { cursor: pointer; padding: 0; }
.round-btn { position: relative; }
.round-btn .dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
}
.icon-btn.small { width: 36px; height: 36px; color: var(--text-2); }
.icon-btn.small svg { width: 22px; height: 22px; }
.icon-btn.on { color: var(--text); background: var(--muted); }