/* ═══════════════════════════════════════════════════════════════
   Imahe — BRUSH EDIT page
   Mobile: canvas-first stack + floating ink toolbelt (sticky thumb zone).
   Desktop ≥1024px: spread — easel (canvas) left, darkroom (results) right.
   ═══════════════════════════════════════════════════════════════ */

.ed-spread > .page { display: flex; flex-direction: column; gap: 14px; }

/* ── source / empty state (Inky demonstrates) ── */
.ed-source .speech { font-size: 14px; }
.ed-demo svg {
  width: 100%; max-width: 300px; height: auto;
  display: block; margin: 6px auto 10px;
}
.ed-srcrow { margin-top: 10px; flex-wrap: wrap; }

.ed-loadpend { min-height: 80px; }

/* ── canvas stage ── */
.ed-stagewrap { display: flex; flex-direction: column; gap: 8px; }
.ed-stage {
  position: relative; margin: 0 auto; max-width: 100%;
  border: var(--border-ink); border-radius: 12px; overflow: hidden;
  background: var(--paper-sunk);
  box-shadow: var(--shadow-hard);
}
.ed-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-overlay { cursor: crosshair; touch-action: none; }
.ed-meta { font-size: 11px; }
.ed-stagerow { padding: 0 2px; }

/* ── floating ink toolbelt ── */
.ed-toolbelt {
  background: var(--paper-2);
  border: var(--border-ink); border-radius: var(--radius);
  box-shadow: var(--shadow-harder);
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  position: sticky;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px);
  z-index: 6;
}
.ed-beltrow { display: flex; align-items: center; gap: 10px; }
.ed-promptrow { flex-wrap: wrap; }
.ed-promptrow .ink-input { min-width: 140px; }

/* growing-dot brush preview */
.ed-dotbox {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--speech-fill);
  border: 2px solid var(--ink-line); border-radius: 10px;
}
.ed-dot {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255, 77, 109, 0.55);
  box-shadow: inset 0 0 0 2px var(--riso-pink-ink);
  transition: width 0.08s, height 0.08s;
}
.ed-slider { flex: 1; min-width: 50px; accent-color: var(--riso-pink); }
.ed-toolbelt .chip:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.ed-go { white-space: nowrap; }

/* ── results ── */
.ed-resultcard { padding: 0; border: none; box-shadow: none; background: transparent; }
.ed-variants { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-variant { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ed-variant img {
  width: 100%;
  border: 2.5px solid var(--ink-line); border-radius: 10px;
  background: var(--paper-sunk);
}
.ed-variant figcaption { font-size: 12px; overflow-wrap: anywhere; }
.ed-variant .bubble-btn { align-self: stretch; }

.ed-resempty { padding: 26px 16px; }
.ed-resempty .speech::after { left: 50%; }

/* ── session history strip ── */
.ed-history { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; }
.ed-hthumb {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 0;
  border: 2px solid var(--ink-line); border-radius: 10px; overflow: hidden;
  background: var(--paper-sunk); cursor: pointer;
  transition: transform 0.1s;
}
.ed-hthumb:nth-child(odd) { transform: rotate(-2deg); }
.ed-hthumb:nth-child(even) { transform: rotate(2deg); }
.ed-hthumb:hover { transform: scale(1.08); }
.ed-hthumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── library picker overlay ── */
.ed-libscrim {
  position: fixed; inset: 0; z-index: 80;
  background: var(--overlay-scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.ed-libpanel {
  width: 100%; max-width: 560px; max-height: 72vh; overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.ed-libgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}
.ed-libload { min-height: 90px; grid-column: 1 / -1; }
.ed-libthumb {
  padding: 0; border: 2px solid var(--ink-line); border-radius: 10px;
  overflow: hidden; aspect-ratio: 1; background: var(--paper-sunk);
  cursor: pointer; transition: transform 0.1s;
}
.ed-libthumb:hover { transform: scale(1.05) rotate(-1deg); }
.ed-libthumb img { width: 100%; height: 100%; object-fit: cover; }

/* desktop-only tip note */
.ed-note { display: none; }

.shake-now { animation: shake 0.35s; }

/* ═══ desktop: two-page comic spread ═══ */
@media (min-width: 1024px) {
  .ed-toolbelt { position: static; }
  .ed-note {
    display: block;
    transform: rotate(1deg);
    border-color: var(--riso-teal);
  }
  .ed-note .panel-title { color: var(--success-ink); }
}