/* ImageGarage — shared overlay: preview viewer, toasts, result-row actions.
   Reuses design tokens from base.css (--brand, --surface, --line, --radius, --shadow). */

/* ---------- Result row actions (used by IG.rowDone) ---------- */
.result .actions-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.icon-btn {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: border-color .12s, color .12s, background .12s;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.icon-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.icon-btn.primary:hover { filter: brightness(1.05); color: #fff; }

/* ---------- Toasts ---------- */
.toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; min-width: 220px; max-width: 90vw; padding: 12px 18px; border-radius: 12px;
  color: #fff; font-weight: 600; font-size: .92rem; box-shadow: 0 12px 30px rgba(0,0,0,.22);
  display: flex; align-items: center; gap: 10px; animation: toast-in .18s ease;
}
.toast.info { background: #2d3350; }
.toast.ok { background: #1fbf75; }
.toast.err { background: #ff5b6e; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Full-screen preview overlay ---------- */
.ovl { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: rgba(15,17,32,.92); backdrop-filter: blur(4px); animation: ovl-in .16s ease; }
@keyframes ovl-in { from { opacity: 0; } to { opacity: 1; } }
.ovl-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; color: #fff; }
.ovl-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovl-sub { color: rgba(255,255,255,.6); font-size: .85rem; }
.ovl-spacer { margin-left: auto; }
.ovl-btn {
  font: inherit; font-weight: 600; font-size: .9rem; color: #fff; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 9px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background .12s;
}
.ovl-btn:hover { background: rgba(255,255,255,.22); }
.ovl-btn.primary { background: var(--brand); border-color: var(--brand); }
.ovl-btn.primary:hover { filter: brightness(1.08); }
.ovl-close { width: 42px; height: 42px; justify-content: center; padding: 0; font-size: 1.2rem; border-radius: 12px; }

.ovl-stage { flex: 1; position: relative; overflow: hidden; display: grid; place-items: center; }
.ovl-stage img { max-width: 94%; max-height: 100%; object-fit: contain; border-radius: 8px; user-select: none; -webkit-user-drag: none; }
.ovl-zoomwrap { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; }

/* before/after compare — base image sized to viewport; .cmp shrink-wraps it */
.cmp { position: relative; display: inline-block; line-height: 0; }
.cmp .base { display: block; max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.cmp .cmp-after { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.cmp .cmp-after img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; border-radius: 8px; }
.cmp-range { position: absolute; left: 0; right: 0; bottom: -46px; width: 100%; accent-color: var(--brand); }
.cmp-tag { position: absolute; top: 10px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); }
.cmp-tag.l { left: 10px; } .cmp-tag.r { right: 10px; }
.cmp-divider { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

.ovl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); border: none; color: #fff; font-size: 1.4rem; cursor: pointer; }
.ovl-nav:hover { background: rgba(255,255,255,.26); }
.ovl-nav.prev { left: 16px; } .ovl-nav.next { right: 16px; }
.ovl-foot { padding: 10px 20px 18px; color: rgba(255,255,255,.7); font-size: .85rem; text-align: center; }

/* ---------- Editor (premium) ---------- */
.ovl.ed { background: radial-gradient(1200px 720px at 50% -12%, #1b1f38 0%, #0a0c15 62%); }
.ovl.ed .ovl-bar { padding: 12px 18px; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(11,13,21,.55); backdrop-filter: blur(16px) saturate(160%); }
.ovl.ed .ovl-title { font-weight: 800; letter-spacing: -.01em; font-size: 1.05rem; background: linear-gradient(120deg,#fff,#c7c3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ed-toolbar { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); padding: 5px; border-radius: 14px; }
.ed-tb { min-width: 38px; height: 36px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; background: transparent; border: 1px solid transparent; color: #eef; cursor: pointer; font: inherit; font-size: .95rem; transition: background .14s, box-shadow .14s, transform .06s; }
.ed-tb:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.ed-tb:active:not(:disabled) { transform: translateY(1px); }
.ed-tb:disabled { opacity: .33; cursor: not-allowed; }
.ed-tb.wide { font-weight: 700; font-size: .85rem; padding: 0 14px; }
.ed-tb.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(109,94,252,.45); }
.ed-sep { width: 1px; height: 22px; background: rgba(255,255,255,.12); margin: 0 3px; }
.ovl.ed .ovl-btn { border-radius: 12px; padding: 10px 18px; font-weight: 700; }
.ovl.ed .ovl-btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; box-shadow: 0 8px 22px rgba(109,94,252,.5); }
.ovl.ed .ovl-foot { color: rgba(255,255,255,.5); letter-spacing: .01em; }
.ed-stage { flex: 1; overflow: auto; display: grid; place-items: center; padding: 28px; }
.ed-canvas { background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); touch-action: none; max-width: 100%; }
.ed-canvas.crop { cursor: crosshair; }

/* format bar (text) + crop bar + adjust bar (premium) */
.ed-format, .ed-cropbar, .ed-adjustbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 20px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.06); }
.ed-format[hidden], .ed-cropbar[hidden], .ed-adjustbar[hidden] { display: none; }
.ed-cropbar .ed-tb.wide { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; }
.ed-cropbar .ed-tb.wide.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; }
.ed-dims { background: rgba(255,255,255,.08); padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.ef-text { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; min-width: 200px; font: inherit; }
.ef-text:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(109,94,252,.3); }
.ef-text::placeholder { color: rgba(255,255,255,.45); }
.ef-lbl { color: rgba(255,255,255,.85); font-size: .78rem; font-weight: 600; display: flex; gap: 7px; align-items: center; }
.ef-lbl input[type=range] { accent-color: var(--brand); width: 96px; }
.ef-lbl input[type=color] { width: 36px; height: 30px; border: none; background: none; padding: 0; border-radius: 8px; cursor: pointer; }
.ed-tb b, .ed-tb i, .ed-tb u { pointer-events: none; }
.ef-font { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; height: 36px; padding: 0 10px; font: inherit; }
.ef-font option { color: #000; }

.ovl button:focus-visible, .ed input:focus-visible, .ed select:focus-visible {
  outline: 3px solid rgba(255,255,255,.8);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .ovl-bar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .ovl-bar > .ovl-spacer { display: none; }
  .ovl-title { max-width: calc(100vw - 64px); }
  .ovl:not(.ed) .ovl-title { flex: 1; }
  .ovl:not(.ed) .ovl-sub { display: none; }
  .ovl:not(.ed) .ovl-btn:not(.primary):not(.ovl-close) { display: none; }
  .ovl.ed .ed-toolbar { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .ed-format, .ed-cropbar, .ed-adjustbar { flex-wrap: nowrap; overflow-x: auto; padding: 9px 12px; }
  .ed-stage { padding: 14px; }
  .ovl-nav { width: 40px; height: 40px; }
  .ovl-nav.prev { left: 8px; }
  .ovl-nav.next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ovl, .toast, .result .spinner { animation: none; }
}