/* ════════════════════════════════════════════════════════════
   Pull to refresh + inline react
   ════════════════════════════════════════════════════════════ */

.ptr-wrap { overflow-anchor: none; }
.ptr-indicator {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  overflow: hidden;
  transition: height var(--dur-fast) var(--ease-standard);
}
.ptr-spinner {
  display: inline-flex; align-items: center; gap: 4px;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.ptr-spinner span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--src-tech, #5b9bff);
}
.ptr-spinner span:nth-child(2) { background: var(--src-ai, #ffb454); }
.ptr-spinner span:nth-child(3) { background: var(--src-pro, #34c759); }
.ptr-spinner.on span {
  animation: ptrPulse 1.2s var(--ease-standard) infinite;
}
.ptr-spinner.on span:nth-child(2) { animation-delay: 0.16s; }
.ptr-spinner.on span:nth-child(3) { animation-delay: 0.32s; }
@keyframes ptrPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.6); opacity: 1; }
}

.inline-react {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 0.5px solid var(--border, #38383a);
  color: var(--text-2, #aaa);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring-soft), background var(--dur-fast), color var(--dur-fast);
}
.inline-react:hover { background: color-mix(in oklab, var(--text-3) 14%, transparent); color: var(--text-1); }
.inline-react.on {
  background: color-mix(in oklab, var(--down-strong, #ff453a) 18%, transparent);
  color: var(--down-strong);
  border-color: color-mix(in oklab, var(--down-strong) 40%, transparent);
}
.inline-react.pop { transform: scale(1.18); }
.ir-count { font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   P5-4 · Notion-style block toggle
   ════════════════════════════════════════════════════════════ */
.nb-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: transparent; border: none;
  color: var(--text-3);
  font-size: 9px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring-soft);
  margin-right: 4px;
}
.nb-toggle.open { transform: rotate(90deg); }

/* ════════════════════════════════════════════════════════════
   P3-5 · Error shake
   ════════════════════════════════════════════════════════════ */
.shake { animation: shakeX 0.32s var(--ease-standard); }
@keyframes shakeX {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* ════════════════════════════════════════════════════════════
   P3-4 · Press feedback (universal)
   ════════════════════════════════════════════════════════════ */
.btn, button:not(.unstyled), .act-btn, [data-pressable] {
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active, button:not(.unstyled):active, .act-btn:active, [data-pressable]:active {
  transform: scale(0.965);
}