/*! WormGPT polish — safe, additive quality & accessibility layer.
 *  Loaded after all app styles. Uses :where() (zero specificity) so existing
 *  rules always win; it only fills gaps. License: MIT. */
:where(html) {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Keyboard focus visibility (only interactive elements) */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent, #4d90fe);
  outline-offset: 2px;
}

/* Text selection */
:where(::selection) {
  background: rgba(77, 144, 254, 0.42);
  color: #ffffff;
}

/* Nicer headings & paragraphs */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li, figcaption) { text-wrap: pretty; }

/* Touch responsiveness */
:where(button, a, [role="button"], label) { touch-action: manipulation; }

/* Respect the user's motion preference */
@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
  :where(*, *::before, *::after) {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilities */
:where(.wg-sr-only) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
:where(.wg-fade-in) { animation: wgFadeIn 0.4s ease both; }
@keyframes wgFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :where(.wg-fade-in) { animation: none; } }

@media print {
  :where(body) { background: #ffffff !important; color: #000000 !important; }
}

/* Mobile viewport fix: .app-frame is inline-styled with height:100vh, which
 * extends under the mobile browser chrome and left a black strip at the
 * bottom plus page scrolling (the chat did not stay put). Use the dynamic
 * viewport height. The auth screen keeps its own height:auto rule. */
.app-frame { height: 100dvh !important; }