/* Accessibility layer: visible keyboard focus, motion preferences, and high-contrast support. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 78%, #ffffff 22%);
  outline-offset: 3px;
  border-radius: 8px;
}

.tab:focus-visible,
.chip:focus-visible,
.favorite-button:focus-visible,
.icon-button:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.prompt-dialog:focus-visible { outline: none; }

/* Prompt Lab select stability.
   Keep native dropdowns outside backdrop-filter compositor layers so the OS/browser
   menu can open, select, and dismiss normally. This file loads last and therefore
   safely overrides decorative blur from ui-polish.css without changing the layout. */
#panel-lab .builder-card,
#panel-lab .preview-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#panel-lab select {
  appearance: auto;
  -webkit-appearance: menulist;
  pointer-events: auto !important;
  transform: none !important;
}

/* Persistent copy confirmation.
   JavaScript keeps the most recently copied content marked and replays the pulse
   on every successful click, including repeated clicks on the same button. */
#copyDialogBtn,
#copyLabBtn,
[data-copy] {
  position: relative;
  overflow: hidden;
}

#copyDialogBtn.is-copied,
#copyLabBtn.is-copied,
[data-copy].is-copied {
  background: color-mix(in srgb, var(--primary) 72%, #0aa37f 28%);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, #0aa37f 24%, transparent);
}

#copyDialogBtn.is-copied:hover,
#copyLabBtn.is-copied:hover,
[data-copy].is-copied:hover {
  background: color-mix(in srgb, var(--primary-2) 68%, #0aa37f 32%);
}

.copy-confirmation-pulse {
  animation: copy-confirmation-pulse 480ms ease-out;
}

@keyframes copy-confirmation-pulse {
  0%, 100% { filter: brightness(1); }
  38% {
    filter: brightness(1.42);
    box-shadow: 0 0 0 6px color-mix(in srgb, #35d8ad 38%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  .button,
  .chip,
  .prompt-card,
  .builder-card,
  .preview-card,
  .filter-block,
  .search-box,
  input,
  select,
  textarea {
    border-width: 2px;
  }

  .muted,
  .prompt-card p,
  .advanced-note,
  .privacy-note {
    color: var(--text);
  }
}