/* Probe motion: short, quiet transitions. Content is always visible without JS. */
:root {
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-enter: 280ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
button, a, input, textarea, summary {
  -webkit-tap-highlight-color: transparent;
}
button, .mode-card, .price-picks label,
:is(.primary, .continue, .chat-action, .chat-shortcuts button, .followup-form button,
    .slack-review button, .report-actions a, .app-nav > button) {
  transition: color var(--motion-fast) ease, background-color var(--motion-base) ease,
    border-color var(--motion-base) ease, box-shadow var(--motion-base) ease,
    opacity var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease);
}
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--purple, #b748ff);
  outline-offset: 4px;
}
input, textarea { transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease; }
button:not(:disabled):active, .report-actions a:active { transform: translateY(1px); }
.app-nav > button:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .chat-shortcuts button:hover { color: var(--text); border-color: var(--hair-strong); }
  .report-actions a:hover { background-color: var(--field); }
}

/* One restrained selected surface, moving within the existing equal-width navigation. */
.app-nav { position: relative; isolation: isolate; }
.nav-indicator {
  position: absolute; pointer-events: none; z-index: -1;
  background: rgba(243,240,247,.065); border-radius: 5px;
}
.app-nav.motion-nav > button[aria-current=true] { background: transparent; }
.app-nav.motion-nav > button:hover:not(:disabled) { background-color: rgba(243,240,247,.025); }

/* Replace blanket redraw animations with explicit entrance motion. */
.site, .site > *, .followup-message, .gap, .an, .mail,
.raw-body, .disclosure-body, .tech-body, .fb { animation: none; }
.search { animation-duration: var(--motion-enter); }
.history, .purpose, .wait, .msg.bad { animation-duration: var(--motion-enter); }
.meter i, .cat .t i { transition-duration: 650ms; transition-delay: 0ms; }
.site.steady .meter i, .site.steady .cat .t i { transition: none; }
.history-list, .followup-log { scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent; }
.followup-log { scrollbar-gutter: stable; }
.followup-message.pending::after {
  content: '•••'; display: block; margin-top: 5px; letter-spacing: 4px;
  color: var(--purple); opacity: .6; animation: probe-breathe 1.6s ease-in-out infinite;
}
@keyframes probe-breathe { 50% { opacity: .25; } }
.slack-review { transition: border-color var(--motion-base) ease, background-color var(--motion-base) ease; }
.slack-sender[open] { animation: probe-dialog-in var(--motion-enter) var(--motion-ease); }
.slack-sender::backdrop { animation: probe-backdrop-in 180ms ease; }
details[data-motion-open=false] > summary .chev { transform: rotate(0deg); }
@keyframes probe-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes probe-backdrop-in { from { opacity: 0; } }

body.motion-simple main { animation: probe-page-in var(--motion-enter) var(--motion-ease) both; }
body.motion-simple .notice, body.motion-simple .error { animation: probe-page-in 220ms var(--motion-ease); }
@keyframes probe-page-in { from { opacity: 0; transform: translateY(5px); } }

/* Never leave delayed/hidden content or spinning decoration in reduced-motion mode. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important;
    animation-delay: 0s !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  button:active, a:active, .continue:hover::after, body.motion-simple button:hover::after {
    transform: none !important;
  }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .nav-indicator { display: none; }
}
