@avocadostudio-ai/preview-adapter 0.1.0

package/src/styles.css

@@ -0,0 +1,1207 @@
+[data-editor-active] .editor-selectable {
+  --editor-accent-rgb: 37, 99, 235;
+  --editor-selected-rgb: 37, 99, 235;
+  --editor-selected-border-width: 2px;
+  --editor-focus-rgb: 217, 119, 6;
+  --editor-accent-strong: rgb(var(--editor-accent-rgb));
+  --editor-accent-soft: rgba(var(--editor-accent-rgb), 0.35);
+  position: relative;
+  transition: transform 220ms ease, opacity 220ms ease;
+}
+
+/* Only override overflow when block needs visible badges/overlays */
+[data-editor-selection-mode] .editor-selectable:hover,
+[data-editor-active] .editor-selectable.editor-highlight {
+  overflow: visible;
+}
+
+[data-editor-active] .editor-selectable::before {
+  content: "";
+  position: absolute;
+  inset: 4px;
+  pointer-events: none;
+  z-index: 19;
+  opacity: 0;
+  background:
+    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
+    radial-gradient(circle at 76% 20%, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 2.5px),
+    radial-gradient(circle at 62% 72%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px),
+    radial-gradient(circle at 28% 78%, rgba(255, 255, 255, 0.85) 0 1.5px, transparent 2.5px),
+    radial-gradient(circle at 88% 60%, rgba(var(--editor-accent-rgb), 0.75) 0 2px, transparent 3px);
+  mix-blend-mode: screen;
+}
+
+[data-editor-selection-mode] .editor-selectable:hover {
+  cursor: pointer;
+  z-index: 9999;
+}
+
+[data-editor-selection-mode] .editor-selectable:hover::before {
+  opacity: 1;
+  inset: 0;
+  /* Hover is a dashed, lower-opacity outline so it's visually distinct from
+     the solid selection outline — same color, but clearly "preview, not picked". */
+  border: var(--editor-selected-border-width) dashed rgba(var(--editor-accent-rgb), 0.55);
+  background: none;
+  mix-blend-mode: normal;
+}
+
+[data-editor-active] .editor-selectable::after {
+  content: attr(data-block-type);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: auto;
+  background: rgba(var(--editor-accent-rgb), 0.9);
+  color: #f8fafc;
+  border: 0;
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+  z-index: 20;
+}
+
+.editor-block-badge {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(calc(-100% + var(--editor-selected-border-width)));
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 120ms ease;
+  z-index: 22;
+}
+
+.editor-has-badge::after {
+  opacity: 0 !important;
+}
+
+.editor-block-badge-label {
+  position: static;
+  background: rgba(var(--editor-accent-rgb), 0.9);
+  color: #f8fafc;
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+}
+
+[data-editor-selection-mode] .editor-selectable:hover > .editor-block-badge {
+  opacity: 1;
+}
+
+[data-editor-selection-mode] .editor-selectable:hover > .editor-block-badge .editor-block-badge-label {
+  background: rgba(var(--editor-accent-rgb), 0.97);
+}
+
+[data-editor-selection-mode] .editor-selectable:hover::after {
+  opacity: 1;
+  background: rgba(var(--editor-accent-rgb), 0.97);
+}
+
+[data-editor-active] .editor-highlight {
+  overflow: visible !important;
+  position: relative;
+  z-index: 9999;
+}
+
+.editor-live-draft-active {
+  position: relative;
+}
+
+/* Scope the typing shimmer to the fields actually being edited (.editor-live-typing
+   is only added to text targets, never images), so it doesn't wash the whole block —
+   including the hero image, which looked like it was being regenerated. */
+.editor-live-draft-active .editor-live-typing:not([class*="absolute"]):not([class*="fixed"]) {
+  position: relative;
+  overflow: hidden;
+}
+
+.editor-live-draft-active .editor-live-typing::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    105deg,
+    transparent 0%,
+    rgba(var(--editor-selected-rgb), 0.03) 20%,
+    rgba(var(--editor-selected-rgb), 0.10) 45%,
+    rgba(var(--editor-selected-rgb), 0.14) 50%,
+    rgba(var(--editor-selected-rgb), 0.10) 55%,
+    rgba(var(--editor-selected-rgb), 0.03) 80%,
+    transparent 100%
+  );
+  background-size: 250% 100%;
+  animation: editor-live-draft-shimmer 1.8s ease-in-out infinite;
+}
+
+.editor-block-badge-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 6px;
+  padding: 3px 7px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: #e2e8f0;
+  background: rgba(15, 23, 42, 0.28);
+}
+
+.editor-block-badge-status::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #f8fafc;
+  opacity: 0.9;
+  animation: editor-live-draft-pulse 0.9s ease-in-out infinite alternate;
+}
+
+@keyframes editor-live-draft-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -50% 0; }
+}
+
+@keyframes editor-live-draft-pulse {
+  from { transform: scale(0.7); opacity: 0.45; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+/* ──────────────────────────────────────────────────────
+   AI Generation Shimmer Effects
+   These run inside the iframe preview during AI operations.
+   ────────────────────────────────────────────────────── */
+
+/* Skeleton shimmer for incoming blocks */
+.editor-skeleton-block {
+  min-height: 140px;
+  border-radius: 12px;
+  background: var(--bg-100, #f8fafc);
+  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
+  position: relative;
+  overflow: hidden;
+}
+
+.editor-skeleton-block::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(148, 163, 184, 0.07) 25%,
+    rgba(148, 163, 184, 0.14) 50%,
+    rgba(148, 163, 184, 0.07) 75%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: editor-skeleton-shimmer 1.6s ease-in-out infinite;
+}
+
+.editor-skeleton-block::after {
+  content: "";
+  position: absolute;
+  top: 28px;
+  left: 24px;
+  right: 40%;
+  height: 18px;
+  border-radius: 6px;
+  background: rgba(148, 163, 184, 0.10);
+}
+
+@keyframes editor-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.dark .editor-skeleton-block {
+  background: var(--bg-100, #1e293b);
+  border-color: rgba(255, 255, 255, 0.06);
+}
+
+.dark .editor-skeleton-block::before {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(148, 163, 184, 0.04) 25%,
+    rgba(148, 163, 184, 0.09) 50%,
+    rgba(148, 163, 184, 0.04) 75%,
+    transparent 100%
+  );
+}
+
+.dark .editor-skeleton-block::after {
+  background: rgba(148, 163, 184, 0.06);
+}
+
+/* AI field loading shimmer */
+.aifx-shimmer-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 21;
+  pointer-events: none;
+  border-radius: inherit;
+  overflow: hidden;
+  background: transparent;
+  mix-blend-mode: normal;
+  box-shadow: none;
+}
+
+.aifx-shimmer-overlay::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    110deg,
+    transparent 0%,
+    transparent 38%,
+    rgba(255, 255, 255, 0.0) 42%,
+    rgba(255, 255, 255, 0.42) 50%,
+    rgba(219, 234, 254, 0.30) 54%,
+    rgba(255, 255, 255, 0.0) 60%,
+    transparent 66%,
+    transparent 100%
+  );
+  transform: translateX(120%);
+  animation: aifx-shimmer-slide 2.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
+@keyframes aifx-shimmer-slide {
+  0% { transform: translateX(120%); }
+  100% { transform: translateX(-120%); }
+}
+
+/* Force chrome visible while AI shimmer is active */
+.editor-block-badge:has(.aifx-shimmer-sparkle) {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+.aifx-shimmer-sparkle {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  width: 28px !important;
+  height: 28px !important;
+  flex-shrink: 0;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: #fff !important;
+  background: rgba(15, 23, 42, 0.72) !important;
+  border-radius: 50% !important;
+  animation: aifx-sparkle-blink 1.6s ease-in-out infinite;
+}
+
+.aifx-shimmer-sparkle svg {
+  display: block;
+  width: 13px;
+  height: 13px;
+  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(170, 178, 186, 0.45));
+}
+
+@keyframes aifx-sparkle-blink {
+  0%, 100% { transform: scale(1); opacity: 0.9; }
+  50% { transform: scale(0.9); opacity: 0.65; }
+}
+
+@media (prefers-color-scheme: light) {
+  .aifx-shimmer-overlay {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .aifx-shimmer-overlay::before {
+    background: linear-gradient(
+      110deg,
+      transparent 0%,
+      transparent 36%,
+      rgba(255, 255, 255, 0.0) 41%,
+      rgba(255, 255, 255, 0.46) 50%,
+      rgba(191, 219, 254, 0.34) 54%,
+      rgba(255, 255, 255, 0.0) 60%,
+      transparent 66%,
+      transparent 100%
+    );
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aifx-shimmer-overlay,
+  .aifx-shimmer-overlay::before,
+  .aifx-shimmer-sparkle,
+  .editor-skeleton-block::before {
+    animation: none !important;
+  }
+}
+
+[data-editor-active] .editor-highlight::before {
+  opacity: 1;
+  inset: 0;
+  border: var(--editor-selected-border-width) solid rgb(var(--editor-selected-rgb));
+  background: none;
+  mix-blend-mode: normal;
+}
+
+[data-editor-active] .editor-highlight.aifx-updated::before {
+  animation: aifx-border-pulse 1.2s ease-in-out 2;
+}
+
+@keyframes aifx-border-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--editor-selected-rgb), 0); }
+  50% { box-shadow: 0 0 0 4px rgba(var(--editor-selected-rgb), 0.25); }
+}
+
+/* Prevent double-thick border between adjacent highlighted/hovered blocks */
+[data-editor-active] .editor-highlight + .editor-selectable:hover::before,
+[data-editor-selection-mode] .editor-highlight + .editor-selectable:hover::before {
+  top: -2px;
+}
+
+[data-editor-active] .editor-highlight.editor-child-hovering::before,
+[data-editor-active] .editor-highlight.editor-child-selected::before {
+  opacity: 1;
+  inset: 0;
+  border: var(--editor-selected-border-width) solid rgb(var(--editor-selected-rgb));
+}
+
+[data-editor-active] .editor-highlight > .editor-block-badge {
+  opacity: 1;
+}
+
+[data-editor-active] .editor-highlight::after {
+  opacity: 1;
+  background: rgba(var(--editor-selected-rgb), 0.97);
+}
+
+[data-editor-active] .editor-highlight > .editor-block-badge .editor-block-badge-label {
+  background: rgba(var(--editor-selected-rgb), 0.97);
+  border-radius: 8px 8px 0 0;
+  padding: 5px 10px;
+}
+
+/* Move + delete buttons sit inside .editor-block-badge above the block —
+   sized down to match the badge label height so the chip looks unified. */
+.editor-block-badge > .editor-selected-move,
+.editor-block-badge > .editor-selected-delete {
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+}
+
+.editor-block-badge > .editor-selected-move svg,
+.editor-block-badge > .editor-selected-delete svg {
+  width: 11px;
+  height: 11px;
+}
+
+/* Always visible inside a selected block's badge — no hover gate. */
+[data-editor-active] .editor-highlight > .editor-block-badge .editor-selected-move,
+[data-editor-active] .editor-highlight > .editor-block-badge .editor-selected-delete {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* Fast custom tooltip for chip buttons — native `title` waits ~1s, so users
+   moving quickly never see it. data-tooltip + ::after appears after 280ms. */
+.editor-block-badge [data-tooltip] {
+  position: relative;
+}
+
+.editor-block-badge [data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  /* Anchor above the button so the tooltip lands in the empty gutter above
+     the block, not on top of the block's own content (heading, image, etc.). */
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(15, 23, 42, 0.94);
+  color: #f8fafc;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
+  padding: 4px 7px;
+  border-radius: 5px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 100ms ease 0ms;
+  z-index: 30;
+}
+
+.editor-block-badge [data-tooltip]:hover::after,
+.editor-block-badge [data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transition-delay: 280ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-block-badge [data-tooltip]:hover::after,
+  .editor-block-badge [data-tooltip]:focus-visible::after {
+    transition-delay: 0ms;
+  }
+}
+
+.editor-selected-delete {
+  border: 0;
+  background: rgba(var(--editor-selected-rgb), 0.92);
+  color: #fff;
+  border-radius: 6px;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 23;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.editor-selected-delete svg {
+  width: 13px;
+  height: 13px;
+  stroke: currentColor;
+  stroke-width: 2.1;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.editor-selected-edit {
+  border: 0;
+  background: rgba(15, 23, 42, 0.88);
+  color: #fff;
+  border-radius: 50%;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 23;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.editor-selected-edit svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.editor-selected-edit:hover {
+  background: rgba(15, 23, 42, 1);
+}
+
+.editor-selected-move {
+  border: 0;
+  background: rgba(var(--editor-selected-rgb), 0.92);
+  color: #fff;
+  border-radius: 6px;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  line-height: 1;
+  font-weight: 700;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 23;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.editor-selected-move svg {
+  width: 13px;
+  height: 13px;
+  stroke: currentColor;
+  stroke-width: 2.3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.editor-selected-add {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 0;
+  background: rgba(var(--editor-selected-rgb), 0.95);
+  color: #fff;
+  border-radius: 999px;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.editor-selected-add-bottom {
+  bottom: -17px;
+}
+
+.editor-selected-add-top {
+  top: -17px;
+}
+
+.editor-selected-add svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.editor-selected-add:hover {
+  background: rgba(var(--editor-selected-rgb), 1);
+}
+
+.editor-selected-move:hover {
+  background: rgba(var(--editor-selected-rgb), 1);
+}
+
+.editor-selected-move:focus,
+.editor-selected-delete:focus,
+.editor-selected-add:focus,
+.editor-delete-confirm-btn:focus {
+  outline: none;
+}
+
+.editor-selected-move:focus-visible,
+.editor-selected-delete:focus-visible,
+.editor-selected-add:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
+}
+
+.editor-delete-confirm-btn:focus-visible {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
+}
+
+.editor-selected-move:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.editor-selected-delete:hover {
+  background: #991b1b;
+}
+
+.editor-item-has-delete {
+  position: relative;
+}
+
+.editor-list-item-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translateY(-100%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  z-index: 24;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.editor-list-item-delete,
+.editor-list-item-move,
+.editor-list-item-add {
+  position: static;
+  border: 0;
+  background: rgba(var(--editor-selected-rgb), 0.94);
+  color: #fff;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  line-height: 1;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 24;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+
+.editor-list-item-add {
+  z-index: 10000;
+}
+
+.editor-list-item-controls > .editor-list-item-delete {
+  margin-left: 4px;
+  border-radius: 7px 7px 0 0;
+}
+
+.editor-highlight:hover:not(.editor-child-hovering):not(.editor-child-selected) > .editor-selected-add,
+.editor-highlight:focus-within > .editor-selected-add,
+.editor-highlight:hover:not(.editor-child-hovering):not(.editor-child-selected) .editor-selected-delete,
+.editor-highlight:focus-within .editor-selected-delete,
+.editor-highlight:hover:not(.editor-child-hovering):not(.editor-child-selected) .editor-selected-edit,
+.editor-highlight:focus-within .editor-selected-edit,
+.editor-highlight:hover:not(.editor-child-hovering):not(.editor-child-selected) .editor-selected-move,
+.editor-highlight:focus-within .editor-selected-move {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.editor-highlight:not(.editor-child-selected):not(.editor-child-selection-locked) .editor-item-has-delete:hover > .editor-list-item-controls,
+.editor-highlight:not(.editor-child-selected):not(.editor-child-selection-locked) .editor-item-has-delete:focus-within > .editor-list-item-controls,
+.editor-item-has-delete.editor-item-selected > .editor-list-item-controls,
+.editor-highlight:not(.editor-child-selected):not(.editor-child-selection-locked) .editor-item-has-delete:hover .editor-list-item-add,
+.editor-highlight:not(.editor-child-selected):not(.editor-child-selection-locked) .editor-item-has-delete:focus-within .editor-list-item-add,
+.editor-item-has-delete.editor-item-selected .editor-list-item-add,
+.editor-highlight:not(.editor-child-selected):not(.editor-child-selection-locked) .editor-item-has-delete:hover .editor-list-item-delete,
+.editor-highlight:not(.editor-child-selected):not(.editor-child-selection-locked) .editor-item-has-delete:focus-within .editor-list-item-delete,
+.editor-item-has-delete.editor-item-selected .editor-list-item-delete,
+.editor-highlight:not(.editor-child-selected):not(.editor-child-selection-locked) .editor-item-has-delete:hover .editor-list-item-move,
+.editor-highlight:not(.editor-child-selected):not(.editor-child-selection-locked) .editor-item-has-delete:focus-within .editor-list-item-move,
+.editor-item-has-delete.editor-item-selected .editor-list-item-move {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.editor-highlight.editor-child-selected > .editor-selected-add,
+.editor-highlight.editor-child-selected .editor-selected-delete,
+.editor-highlight.editor-child-selected .editor-selected-edit,
+.editor-highlight.editor-child-selected .editor-selected-move,
+.editor-highlight.editor-child-hovering > .editor-selected-add,
+.editor-highlight.editor-child-hovering .editor-selected-delete,
+.editor-highlight.editor-child-hovering .editor-selected-edit,
+.editor-highlight.editor-child-hovering .editor-selected-move {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.editor-list-item-move {
+  border-radius: 0;
+}
+
+.editor-list-item-move-up {
+  border-radius: 7px 0 0 0;
+}
+
+.editor-list-item-move-down {
+  border-radius: 0 7px 0 0;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.editor-list-item-add {
+  position: absolute;
+  top: 50%;
+  right: -17px;
+  transform: translateY(-50%);
+  border-radius: 999px;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
+  width: 34px;
+  height: 34px;
+}
+
+.editor-list-item-delete svg,
+.editor-list-item-move svg,
+.editor-list-item-add svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  stroke-width: 2.3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.editor-list-item-delete:hover,
+.editor-list-item-move:hover,
+.editor-list-item-add:hover {
+  background: rgba(var(--editor-selected-rgb), 1);
+}
+
+.editor-list-item-delete:disabled,
+.editor-list-item-move:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.editor-list-item-delete:focus,
+.editor-list-item-move:focus,
+.editor-list-item-add:focus {
+  outline: none;
+}
+
+.editor-list-item-delete:focus-visible,
+.editor-list-item-move:focus-visible,
+.editor-list-item-add:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
+}
+
+/* Inline + button inside controls bar for horizontal lists (e.g. Tabs) */
+.editor-list-item-add--inline {
+  position: static;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px 7px 0 0;
+  box-shadow: none;
+  margin-right: 4px;
+  transform: none;
+}
+
+[data-editor-active] .editor-selectable [data-editable-label]:not([class*="absolute"]):not([class*="fixed"]) {
+  position: relative;
+}
+
+/* ::after labels hidden — keep only the blue ::before labels on hover */
+[data-editor-active] .editor-selectable [data-editable-label]::after {
+  display: none;
+}
+
+.editor-highlight [data-editable-target]:not([class*="absolute"]):not([class*="fixed"]) {
+  position: relative;
+}
+
+.editor-highlight [data-editable-target]:not(.btn-primary):not(.btn-secondary):hover {
+  box-shadow: inset 0 0 0 1.5px rgba(var(--editor-selected-rgb), 0.4);
+  background: rgba(var(--editor-selected-rgb), 0.04);
+}
+
+.editor-highlight [data-editable-target].editor-inline-editing {
+  box-shadow: inset 0 0 0 2px rgba(var(--editor-focus-rgb), 0.95);
+  background: rgba(var(--editor-focus-rgb), 0.12);
+  cursor: text;
+}
+
+.editor-highlight [data-editable-target]::before {
+  content: attr(data-editable-target-label);
+  position: absolute;
+  top: 0;
+  left: 4px;
+  right: auto;
+  transform: translateY(calc(-100% - 4px));
+  background: rgba(var(--editor-accent-rgb), 0.95);
+  color: #f8fafc;
+  border-radius: 8px 8px 0 0;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+  z-index: 24;
+}
+
+.editor-highlight [data-editable-target]:hover::before {
+  opacity: 1;
+}
+
+/* Hide parent container labels when a nested child is being hovered */
+.editor-highlight [data-editable-target]:has([data-editable-target]:hover)::before {
+  opacity: 0;
+}
+.editor-highlight [data-editable-label]:has([data-editable-label]:hover)::after {
+  opacity: 0;
+}
+
+.editor-hide-nested-labels .editor-highlight [data-editable-target]::before,
+.editor-hide-nested-labels .editor-highlight [data-editable-label]::after {
+  display: none !important;
+}
+
+.editor-child-highlight,
+.editor-item-selected {
+  outline: 1.5px solid rgba(var(--editor-selected-rgb), 0.5);
+  outline-offset: -1.5px;
+}
+
+.editor-child-highlight:not(a):not(.btn-primary):not(.btn-secondary),
+.editor-item-selected:not(a):not(.btn-primary):not(.btn-secondary) {
+  background: rgba(var(--editor-selected-rgb), 0.04);
+}
+
+.editor-child-highlight::before {
+  opacity: 1 !important;
+}
+
+.editor-delete-confirm {
+  position: absolute;
+  top: 8px;
+  right: 40px;
+  background: #dc2626;
+  color: #fff;
+  border-radius: 6px;
+  height: 26px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 25;
+  white-space: nowrap;
+}
+
+.editor-delete-confirm--list {
+  position: static;
+  height: 24px;
+  border-radius: 7px;
+  font-size: 10px;
+  margin-left: 6px;
+  order: 99;
+}
+
+.editor-delete-confirm--list .editor-delete-confirm-btn {
+  height: 18px;
+  font-size: 10px;
+}
+
+.editor-delete-confirm-btn {
+  border: 1.5px solid rgba(255, 255, 255, 0.6);
+  background: transparent;
+  color: #fff;
+  border-radius: 4px;
+  height: 20px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.editor-delete-confirm-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+@media (hover: none), (pointer: coarse) {
+  .editor-selected-add,
+  .editor-selected-delete,
+  .editor-selected-edit,
+  .editor-selected-move {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .editor-list-item-controls,
+  .editor-list-item-delete,
+  .editor-list-item-move,
+  .editor-list-item-add {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .editor-item-has-delete.editor-item-selected > .editor-list-item-controls,
+  .editor-item-has-delete.editor-item-selected .editor-list-item-add,
+  .editor-item-has-delete.editor-item-selected .editor-list-item-delete,
+  .editor-item-has-delete.editor-item-selected .editor-list-item-move {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .editor-selected-add,
+  .editor-list-item-add {
+    width: 44px;
+    height: 44px;
+  }
+
+  .editor-selected-add-bottom {
+    bottom: -22px;
+  }
+
+  .editor-selected-add-top {
+    top: -22px;
+  }
+}
+
+.editor-flash {
+  animation: flash 600ms ease-out;
+  will-change: box-shadow, border-color;
+}
+
+.aifx-updated {
+  position: relative;
+  overflow: hidden;
+}
+
+.aifx-updated::before {
+  opacity: 0.55;
+  animation: aifx-sparkle 980ms ease-out;
+}
+
+.aifx-updated::after {
+  content: "";
+  position: absolute;
+  inset: -22%;
+  z-index: 23;
+  pointer-events: none;
+  background: linear-gradient(
+    108deg,
+    transparent 22%,
+    rgba(var(--editor-selected-rgb), 0.05) 34%,
+    rgba(var(--editor-selected-rgb), 0.45) 49%,
+    rgba(var(--editor-selected-rgb), 0.05) 64%,
+    transparent 78%
+  );
+  transform: translateX(-128%);
+  animation: aifx-wave 920ms cubic-bezier(0.25, 0.95, 0.2, 1) 1;
+}
+
+.aifx-updated > .editor-block-badge {
+  animation: aifx-badge-pulse 1.2s ease-in-out 2;
+}
+
+@keyframes aifx-badge-pulse {
+  0%, 100% { transform: translateY(calc(-100% + var(--editor-selected-border-width))) scale(1); }
+  50% { transform: translateY(calc(-100% + var(--editor-selected-border-width))) scale(1.08); }
+}
+
+.editor-flash::before {
+  opacity: 1;
+  animation: sparkle-burst 520ms ease-out;
+}
+
+.editor-enter {
+  animation: block-enter 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
+}
+
+@keyframes flash {
+  0% {
+    border-color: rgba(var(--editor-accent-rgb), 0.95);
+    box-shadow:
+      0 0 0 3px rgba(var(--editor-accent-rgb), 0.45),
+      0 10px 40px rgba(var(--editor-accent-rgb), 0.30);
+  }
+  40% {
+    border-color: rgba(var(--editor-accent-rgb), 0.75);
+    box-shadow:
+      0 0 0 2px rgba(var(--editor-accent-rgb), 0.28),
+      0 6px 24px rgba(var(--editor-accent-rgb), 0.18);
+  }
+  100% {
+    border-color: transparent;
+    box-shadow: 0 0 0 0 rgba(var(--editor-accent-rgb), 0);
+  }
+}
+
+@keyframes block-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(14px) scale(0.985);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes sparkle-burst {
+  0% {
+    opacity: 0;
+    transform: scale(0.92);
+    filter: blur(0.4px);
+  }
+  35% {
+    opacity: 0.95;
+    transform: scale(1.02);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.05);
+    filter: blur(0.4px);
+  }
+}
+
+@keyframes aifx-wave {
+  to {
+    transform: translateX(128%);
+  }
+}
+
+@keyframes aifx-sparkle {
+  0% {
+    opacity: 0.25;
+    filter: blur(0.45px);
+    transform: scale(0.985);
+  }
+  42% {
+    opacity: 0.9;
+    filter: blur(0);
+    transform: scale(1.01);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(0.4px);
+    transform: scale(1.01);
+  }
+}
+
+/* View Transition crossfade for smooth refresh */
+::view-transition-old(root) { animation: none; }
+::view-transition-new(root) { animation: editor-crossfade 180ms ease-out; }
+@keyframes editor-crossfade { from { opacity: 0.6; } to { opacity: 1; } }
+
+/* Progressive block entrance animation */
+.editor-block-entering {
+  animation: editor-block-slide-in 320ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
+}
+@keyframes editor-block-slide-in {
+  from { opacity: 0; transform: translateY(18px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* Live typing cursor effect */
+.editor-live-typing {
+  position: relative;
+}
+.editor-live-typing::after {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: rgb(var(--editor-selected-rgb));
+  animation: editor-cursor-blink 0.6s step-end infinite;
+  vertical-align: text-bottom;
+  margin-left: 1px;
+}
+@keyframes editor-cursor-blink { 50% { opacity: 0; } }
+
+/* AI image reveal: blur→sharp transition when generated image replaces placeholder */
+.ai-image-reveal {
+  animation: ai-image-reveal 1.2s cubic-bezier(0.2, 0.9, 0.2, 1) both;
+}
+@keyframes ai-image-reveal {
+  from { filter: blur(20px) saturate(1.1); transform: scale(1.04); opacity: 0.6; }
+  to   { filter: blur(0) saturate(1); transform: scale(1); opacity: 1; }
+}
+
+/* Image change hover button */
+.editor-image-change-btn {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 24;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 6px;
+  background: rgba(var(--editor-accent-rgb), 0.92);
+  color: #fff;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
+}
+
+[data-editor-active] [data-editable-target]:hover > .editor-image-change-btn,
+[data-editor-active] [data-editable-target]:focus-within > .editor-image-change-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.editor-image-change-btn:hover {
+  background: rgba(var(--editor-accent-rgb), 1);
+}
+
+.editor-image-change-btn:focus {
+  outline: none;
+}
+
+.editor-image-change-btn:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aifx-updated::before,
+  .aifx-updated::after {
+    animation: none !important;
+  }
+  .aifx-updated > .editor-block-badge {
+    animation: none !important;
+  }
+  [data-editor-active] .editor-highlight.aifx-updated::before {
+    animation: none !important;
+  }
+  .editor-flash {
+    animation: none !important;
+  }
+  .aifx-shimmer-overlay,
+  .aifx-shimmer-sparkle {
+    animation: none !important;
+  }
+  .editor-block-entering {
+    animation: none !important;
+  }
+  .editor-live-typing::after {
+    animation: none !important;
+  }
+  .editor-skeleton-block {
+    animation: none !important;
+  }
+  .ai-image-reveal {
+    animation: none !important;
+  }
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none !important;
+  }
+}