/**
 * Scaredy Cat - Feedback UI (content side)
 * In the extension these rules are adopted inside closed shadow roots
 * (content/ui-kit.js); the welcome page links the file directly. Every rule
 * stays defensive anyway: explicit values (no reliance on page :root tokens),
 * !important to resist host styles, and very high z-indexes. Palette mirrors
 * the Scaredy Cat design system (plum #2E2447, cream #FFFCF5, lavender #F1EBFA).
 */

/* ---- "This isn't horror" pill on a revealed blur ----------------------- */
/* Plum glass over the image, matching the "Hide again" pill. Hidden until the
   tile is hovered OR focused so keyboard users can reach it. */
.scaredycat-fp-link {
  position: absolute !important;
  bottom: clamp(4px, 2.5cqmin, 10px) !important;
  left: clamp(4px, 2.5cqmin, 10px) !important;
  padding: clamp(3px, 2cqmin, 7px) clamp(8px, 4cqmin, 14px) !important;
  font-size: clamp(9px, 4cqmin, 12px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #FFFCF5 !important;
  background: rgba(46, 36, 71, 0.85) !important;
  border: 1px solid rgba(255, 252, 245, 0.18) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease, background 0.2s ease !important;
  z-index: 9998 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.scaredycat-wrapper:hover .scaredycat-fp-link,
.scaredycat-wrapper:focus-within .scaredycat-fp-link,
.scaredycat-fp-link:focus-visible { opacity: 0.85 !important; }
.scaredycat-fp-link:hover { background: #42365E !important; opacity: 1 !important; }
.scaredycat-fp-link:focus-visible {
  outline: 2px solid #FFFCF5 !important;
  outline-offset: 2px !important;
}
.scaredycat-fp-link--done {
  background: rgba(62, 110, 74, 0.9) !important; /* success chip ink */
  border-color: transparent !important;
  cursor: default !important;
  opacity: 1 !important;
}
@media (hover: none) {
  .scaredycat-fp-link { opacity: 0.85 !important; }
}

/* ---- Acknowledgement toast -------------------------------------------- */
.scaredycat-toast {
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translate(-50%, 16px) !important;
  max-width: 320px !important;
  padding: 12px 18px !important;
  background: #2E2447 !important;
  color: #FDF8F0 !important;
  font: 500 14px/1.4 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(46, 36, 71, 0.35) !important;
  z-index: 2147483646 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.scaredycat-toast--in {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

/* ---- Consent sheet ----------------------------------------------------- */
/* No backdrop-filter: it forces full-viewport compositing on every scroll
   frame. A slightly deeper scrim does the same job for free. */
.scaredycat-consent-backdrop {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(20, 20, 30, 0.62) !important;
  z-index: 2147483647 !important;
  animation: scaredycat-backdrop-in 200ms ease-out !important;
}
.scaredycat-consent {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 380px !important;
  padding: 24px !important;
  background: #FFFCF5 !important;
  color: #54496E !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(46, 36, 71, 0.35) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  text-align: left !important;
  animation: scaredycat-sheet-in 200ms ease-out !important;
}
.scaredycat-consent-icon { font-size: 34px !important; line-height: 1 !important; }
.scaredycat-consent-title {
  margin: 8px 0 6px !important;
  font: 800 20px/1.2 'Bricolage Grotesque', 'Inter', sans-serif !important;
  color: #2E2447 !important;
}
.scaredycat-consent-body { margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.5 !important; }
.scaredycat-consent-list {
  margin: 0 0 10px !important;
  padding-left: 18px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.scaredycat-consent-list li { margin: 2px 0 !important; }
.scaredycat-consent-note {
  margin: 0 0 16px !important;
  font-size: 12px !important;
  color: #8D83A6 !important;
}
.scaredycat-consent-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}
.scaredycat-consent-btn {
  padding: 9px 16px !important;
  font: 600 13px 'Inter', -apple-system, sans-serif !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  border: 1.5px solid rgba(46, 36, 71, 0.25) !important;
  background: transparent !important;
  color: #2E2447 !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.scaredycat-consent-btn:focus-visible {
  outline: 2px solid #2E2447 !important;
  outline-offset: 2px !important;
}
.scaredycat-consent-btn--ghost:hover { background: #F1EBFA !important; border-color: #2E2447 !important; }
.scaredycat-consent-btn--primary {
  background: #2E2447 !important;
  color: #FDF8F0 !important;
  border-color: #2E2447 !important;
}
.scaredycat-consent-btn--primary:hover { background: #42365E !important; border-color: #42365E !important; }

@keyframes scaredycat-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaredycat-sheet-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Element picker ---------------------------------------------------- */
/* The page-wide crosshair cursor is a sheet content/picker.js adopts only
   while the picker runs. The box tracks the pointer via rAF in picker.js;
   no CSS transition, which only read as lag. */
.scaredycat-picker-box {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
  border: 2px solid #2E2447 !important;
  background: rgba(46, 36, 71, 0.12) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 2px rgba(255, 252, 245, 0.6) !important;
  z-index: 2147483646 !important;
}
.scaredycat-picker-hint {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 10px 18px !important;
  background: #2E2447 !important;
  color: #FDF8F0 !important;
  font: 600 13px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 30px rgba(46, 36, 71, 0.35) !important;
  z-index: 2147483647 !important;
  animation: scaredycat-sheet-in 200ms ease-out !important;
}

/* ---- Reduced motion: every surface goes instant ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .scaredycat-fp-link,
  .scaredycat-toast,
  .scaredycat-consent-btn { transition: none !important; }
  .scaredycat-consent-backdrop,
  .scaredycat-consent,
  .scaredycat-picker-hint { animation: none !important; }
}