/* phone features: glance strip, swipe actions, undo toast, offline note, pull to refresh */
.glance { display: flex; align-items: center; gap: 6px; margin: 16px 0 -8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px;
  white-space: nowrap; overflow-x: auto; scrollbar-width: none; color: var(--muted);
  background: color-mix(in srgb, var(--panel) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.glance button { flex: none; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text); font: inherit; cursor: pointer; }
.glance button:hover { color: var(--heading); background: none; }
.glance i { font-style: normal; color: var(--faint); }
#offNote { margin: 14px 0 -8px; font-size: 12px; color: var(--muted); }
#qGlance { margin: -2px 0 0; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wrap { position: relative; }
#swipe { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 8px; box-sizing: border-box;
  overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-hi);
  background: color-mix(in srgb, var(--panel2) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: swipeIn .22s var(--ease); }
#swipe button { flex: none; padding: 6px 9px; font-size: 13px; white-space: nowrap; }
@keyframes swipeIn { from { transform: translateX(var(--from, 40px)); opacity: 0; } }

#undoToast { position: fixed; left: 50%; bottom: 24px; z-index: 51; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--border-hi); box-shadow: var(--shadow); color: var(--heading); pointer-events: none;
  opacity: 0; transform: translate(-50%, 24px); transition: opacity .25s, transform .4s var(--ease); }
#undoToast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#undoToast i { font-style: normal; color: var(--faint); }
#undoToast button { padding: 5px 12px; border-radius: 999px; font-weight: 600; color: var(--accent-hi); }

#ptr { position: fixed; top: calc(env(safe-area-inset-top) - 34px); left: 50%; z-index: 61; width: 32px; height: 32px; margin-left: -16px; display: grid; place-items: center;
  border-radius: 50%; background: var(--panel2); border: 1px solid var(--border-hi); box-shadow: var(--shadow); opacity: 0; pointer-events: none; }
#ptr.go { transition: transform .3s var(--ease), opacity .3s; }
#ptr i { width: 14px; height: 14px; border: 2px solid var(--accent-hi); border-top-color: transparent; border-radius: 50%; }
#ptr.spin { opacity: 1; }
#ptr.spin i { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

@media (max-width: 640px) { #undoToast { bottom: calc(86px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { #swipe { animation: none; } #ptr.spin i { animation: none; } #undoToast { transition: opacity .2s; } }