/* Rewords — live popup replica for the marketing page.
   Copied from the extension's own app/style.css and scoped under
   .rewords-demo so its selectors (h1, button, input…) can't leak onto the
   rest of the site. Visual language, tokens, and motion are unchanged;
   only sizing moved from a real browser popup (html { width: 384px }) to
   a card that fits the hero column. */

.rewords-demo {
  --c-lavender: #eadafd;
  --c-lavender-light: #f3e9ff;
  --c-text: #fff;
  --c-tooltip-text: #362a58;

  --surface-1: rgba(255, 255, 255, 0.07);
  --surface-2: rgba(255, 255, 255, 0.12);
  --surface-active: rgba(255, 255, 255, 0.17);
  --surface-press: rgba(255, 255, 255, 0.05);
  --surface-accent: rgba(232, 213, 255, 0.22);
  --surface-accent-active: rgba(232, 213, 255, 0.32);
  --blur: blur(16px) saturate(150%);

  --lift-1: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 24px -8px rgba(6, 11, 42, 0.45);
  --lift-2: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 16px 36px -10px rgba(6, 11, 42, 0.5);
  --lift-field: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 10px -4px rgba(6, 11, 42, 0.3);
  --lift-field-focus: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 2px rgba(232, 213, 255, 0.14), 0 5px 12px -4px rgba(6, 11, 42, 0.32);
  --lift-press: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 10px -4px rgba(6, 11, 42, 0.4);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 0.18s;
  --d-base: 0.35s;

  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  padding: 22px 28px 26px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 18% 7%, rgba(173, 196, 255, 0.24), transparent 34%),
    radial-gradient(circle at 92% 38%, rgba(201, 174, 255, 0.14), transparent 44%),
    linear-gradient(150deg, #3b51cd 0%, #2b397c 52%, #101a49 100%);
  box-shadow: var(--shadow);
  color: var(--c-text);
  font-family: "Cabin", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.25rem;
  text-align: center;
}

.rewords-demo *,
.rewords-demo *::before,
.rewords-demo *::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .rewords-demo *,
  .rewords-demo *::before,
  .rewords-demo *::after {
    transition-duration: 0.01ms !important;
  }
}

.rewords-demo h1 {
  margin: 0 0 16px;
  font-size: 2.1em;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(7, 12, 50, 0.24);
}

.rewords-demo .demo-words {
  color: var(--c-lavender);
}

.rewords-demo #pair {
  font-size: 0.95rem;
}

.rewords-demo #pair:not(:empty) {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--lift-1);
  line-height: 1.5;
  position: relative;
}

.rewords-demo .pair-from {
  color: var(--c-lavender);
  font-style: italic;
  text-decoration: line-through;
}

.rewords-demo .pair-from.whole {
  padding: 0 4px;
  border-radius: var(--r-sm);
  background: var(--surface-accent);
}

.rewords-demo .pair-to {
  font-weight: bold;
}

.rewords-demo .remove {
  padding: 2px;
  border: none;
  background: none;
  color: var(--c-lavender-light);
  font: inherit;
  font-size: 1.05em;
  opacity: 0.32;
  cursor: pointer;
  transition: opacity var(--d-fast) var(--ease), transform var(--d-base) var(--ease);
}

.rewords-demo .remove:hover {
  opacity: 1;
  transform: rotate(90deg) scale(1.1);
}

.rewords-demo .tooltip {
  display: inline-block;
  position: relative;
}

.rewords-demo .tooltiptext {
  position: absolute;
  z-index: 1;
  width: 170px;
  margin-left: -85px;
  margin-top: -30px;
  padding: 0.55em 0.9em;
  border-radius: var(--r-sm);
  background: var(--c-lavender);
  box-shadow: var(--lift-2);
  color: var(--c-tooltip-text);
  font-size: 0.62em;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.96);
  transform-origin: bottom center;
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}

.rewords-demo #replace,
.rewords-demo #with {
  display: block;
  width: 100%;
  margin: 6px 0 12px;
  padding: 8px 12px;
  border: none;
  border-radius: var(--r-md);
  background: var(--surface-1);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--lift-field);
  color: var(--c-text);
  font: inherit;
  font-size: 0.85rem;
  text-align: right;
  outline: none;
  transition: background var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}

.rewords-demo #replace:focus,
.rewords-demo #with:focus {
  background: var(--surface-active);
  box-shadow: var(--lift-field-focus);
  transform: scale(1.015);
}

.rewords-demo #replace::placeholder,
.rewords-demo #with::placeholder {
  color: rgba(238, 228, 255, 0.5);
  text-align: left;
}

.rewords-demo #add {
  margin-top: 10px;
  margin-left: 8px;
  padding: 7px 16px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--surface-accent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--lift-1);
  color: var(--c-lavender-light);
  font: inherit;
  font-size: 0.7em;
  font-weight: bold;
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}

.rewords-demo #add:hover {
  background: var(--surface-accent-active);
  transform: translateY(-1px) scale(1.03);
}

.rewords-demo #add:active {
  box-shadow: var(--lift-press);
  transform: translateY(0) scale(0.98);
}

.rewords-demo .whole-word-row {
  display: inline-block;
  margin-top: 10px;
  color: var(--c-lavender-light);
  font-size: 0.65em;
  opacity: 0.65;
  cursor: pointer;
  vertical-align: middle;
  transition: opacity var(--d-fast) var(--ease);
}

.rewords-demo .whole-word-row:hover {
  opacity: 0.9;
}

.rewords-demo .whole-word-row input {
  margin-right: 4px;
  vertical-align: -1px;
  accent-color: #c8b4ff;
  cursor: pointer;
}

.rewords-demo #delete-all {
  margin-top: 20px;
  border: none;
  background: none;
  color: var(--c-lavender-light);
  font: inherit;
  font-size: 0.7em;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--d-fast) var(--ease), transform var(--d-base) var(--ease);
}

.rewords-demo #delete-all:hover {
  opacity: 0.65;
  transform: scale(1.03);
}

/* A quiet nudge, not a UI element of the real popup — set apart in the
   page's own type so it never reads as part of the product itself. */
.demo-hint {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  opacity: 0.85;
}

@media (max-width: 620px) {
  .rewords-demo {
    max-width: 280px;
  }
}