/* NEO platform polish — shared foundation loaded by every page, BEFORE the page's own
   styles (so page CSS always wins any conflict). Everything here is additive stability/
   feedback polish: no colors, layouts or business styling. */

/* ── 1. No layout jump when the scrollbar appears/disappears ──────────────────
   The classic "the window moved" jitter: content grows past the viewport, the
   scrollbar appears, and the whole page shifts ~15px left. Reserve the gutter. */
html { scrollbar-gutter: stable; }

/* Calm, thin scrollbars everywhere (page CSS may still override). */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(107,114,128,.35); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(107,114,128,.55); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── 2. Type rendering ──────────────────────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── 3. Buttons: instant, consistent press feedback; no mobile tap jitter ───── */
button, .btn, [role="button"], input[type="submit"], input[type="button"] {
  touch-action: manipulation;              /* kills double-tap zoom + 300ms delay */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button:active:not(:disabled), .btn:active, [role="button"]:active { transform: translateY(1px); }

/* Keyboard focus is visible; mouse clicks don't leave outlines behind. */
:focus-visible { outline: 2px solid var(--accent, #d4a017); outline-offset: 1px; }
button:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; }

/* ── 4. Busy state (opt-in via window.withBusy or .neo-busy) ────────────────── */
.neo-busy { pointer-events: none !important; opacity: .55; position: relative; }
.neo-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border: 2px solid rgba(0,0,0,.25); border-top-color: rgba(0,0,0,.7);
  border-radius: 50%; animation: neo-spin .7s linear infinite;
}
@keyframes neo-spin { to { transform: rotate(360deg); } }

/* ── 5. Toasts (replace blocking alert() popups) ────────────────────────────── */
#neo-toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000; display: flex; flex-direction: column; align-items: center;
  gap: 8px; pointer-events: none; width: max-content; max-width: min(92vw, 620px);
}
.neo-toast {
  pointer-events: auto; cursor: pointer;
  background: rgba(26,29,38,.95); color: #fff;
  border-radius: 10px; padding: 10px 16px 10px 14px;
  font: 500 13.5px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 8px 28px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.16);
  border-left: 3px solid var(--text3, #9ca3af);
  max-width: 100%; overflow-wrap: break-word; white-space: pre-line;
  animation: neo-toast-in .22s cubic-bezier(.21,1.02,.55,1) both;
  transition: opacity .25s ease, transform .25s ease;
}
.neo-toast.ok   { border-left-color: var(--green, #16a34a); }
.neo-toast.err  { border-left-color: var(--red, #dc2626); }
.neo-toast.info { border-left-color: var(--accent, #d4a017); }
.neo-toast.hide { opacity: 0; transform: translateY(6px); }
@keyframes neo-toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ── 6. Skeleton shimmer for async placeholders (opt-in: .neo-skel) ─────────── */
.neo-skel {
  position: relative; overflow: hidden; background: var(--surface2, #f0f1f5);
  border-radius: 6px; color: transparent !important; min-height: 1em;
}
.neo-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: neo-shimmer 1.4s ease-in-out infinite;
}
@keyframes neo-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── 7. Seamless page-to-page navigation (no white flash between screens) ─────
   Browsers that support cross-document view transitions get a quick crossfade;
   everyone else keeps the normal navigation. Zero JS, zero risk. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

/* ── 8. Accessibility: honor reduced-motion for OUR animations only ─────────── */
@media (prefers-reduced-motion: reduce) {
  .neo-toast { animation: none; }
  .neo-skel::after { animation: none; }
  button:active:not(:disabled), .btn:active, [role="button"]:active { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── 8. Feedback card (temporary broker feedback prompt, see neo-polish.js) ───
   Deliberately NOT a modal: no overlay, no trap, nothing behind it is blocked.
   Sits bottom-LEFT because bottom-right belongs to the Gemini FAB. */
#neo-fb {
  position: fixed; left: 20px; z-index: 2147482900;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 322px; max-width: calc(100vw - 40px);
  background: var(--surface, #fff); color: var(--text, #1a1d26);
  border: 1px solid var(--border, #e2e4eb); border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  padding: 15px 16px 14px;
  font: 400 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  animation: neo-fb-in .3s cubic-bezier(.21,1.02,.55,1) both;
  transition: opacity .28s ease, transform .28s ease;
}
#neo-fb.hide { opacity: 0; transform: translateY(8px); }
@keyframes neo-fb-in { from { opacity: 0; transform: translateY(14px); } }
.neo-fb-t { font-size: 13.5px; font-weight: 700; padding-right: 20px; }
.neo-fb-s { font-size: 12.5px; color: var(--text2, #6b7280); margin-top: 2px; }
/* Close is always visible, never hover-only (self-evident UI). */
.neo-fb-x {
  position: absolute; top: 9px; right: 9px; width: 24px; height: 24px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--text3, #9ca3af); font-size: 15px; line-height: 1;
}
.neo-fb-x:hover { background: var(--surface2, #f0f1f5); color: var(--text2, #6b7280); }
/* The faces: real buttons with resting chrome, so they read as clickable. */
.neo-fb-faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 12px; }
.neo-fb-face {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 6px; cursor: pointer;
  background: var(--surface2, #f0f1f5);
  border: 1px solid var(--border, #e2e4eb); border-radius: 10px;
  font: 600 9.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text2, #6b7280); letter-spacing: .02em;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.neo-fb-face i { font-style: normal; font-size: 20px; line-height: 1; }
.neo-fb-face:hover {
  background: var(--accent-light, rgba(212,160,23,.08));
  border-color: var(--accent, #d4a017); color: var(--text, #1a1d26);
  transform: translateY(-1px);
}
.neo-fb-face:active { transform: translateY(0); }
.neo-fb-face.on { background: var(--accent-light, rgba(212,160,23,.08)); border-color: var(--accent, #d4a017); }
.neo-fb-note {
  width: 100%; margin-top: 11px; padding: 8px 10px; resize: none;
  border: 1px solid var(--border, #e2e4eb); border-radius: 9px;
  background: var(--surface, #fff); color: var(--text, #1a1d26);
  font: 400 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.neo-fb-note:focus { outline: 0; border-color: var(--accent, #d4a017); box-shadow: 0 0 0 3px var(--accent-light, rgba(212,160,23,.08)); }
.neo-fb-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.neo-fb-b {
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #e2e4eb); background: var(--surface, #fff);
  color: var(--text2, #6b7280);
  font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.neo-fb-b:hover { background: var(--surface2, #f0f1f5); }
.neo-fb-b.p { background: var(--accent, #d4a017); border-color: var(--accent, #d4a017); color: #fff; }
.neo-fb-b.p:hover { background: var(--accent2, #b8860b); }
@media (max-width: 640px) { #neo-fb { left: 12px; right: 12px; width: auto; } }
@media (prefers-reduced-motion: reduce) {
  #neo-fb { animation: none; }
  .neo-fb-face:hover { transform: none; }
}