/* ============================================================
   Bulk Image Watermark Tool — editor.css
   Step 2 "Adjust" editor shell.

   THE PROBLEM THIS SOLVES
   Before, the preview sat at the top and every control was
   stacked underneath it, so adjusting anything meant scrolling
   the photo out of view. Now:

     • PHONES  (< 900px)  full-screen editor, Snapseed-style:
                          [ top bar ]
                          [ photo strip + PREVIEW ]   ← never scrolls away
                          [ tool panel (hideable)  ]
                          [ icon-only tool dock    ]
     • DESKTOP (≥ 900px)  two columns: preview on the left,
                          icon + label dock and the open tool's
                          panel on the right. Panel scrolls
                          inside itself; the page does not.

   Reuses the tool's own tokens (--wm-brand, --wm-ink, --wm-line…)
   and Inter (var(--font-primary)). No new colors are introduced.
   ============================================================ */


/* ══════════════════════════════════════════
   0. SHARED BITS
   ══════════════════════════════════════════ */
.wm-editor [hidden] { display: none !important; }

.wm-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* ══════════════════════════════════════════
   1. TOP BAR  (Back · Undo/Redo · Continue)
   ══════════════════════════════════════════ */
.wm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wm-topbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 8px;
  border-radius: 9999px;
  border: 1.5px solid var(--wm-line);
  background: #fff;
  color: var(--wm-ink);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.wm-topbar__back svg { width: 20px; height: 20px; }
.wm-topbar__back span { display: none; }
.wm-topbar__back:active { background: var(--wm-bg); }

.wm-topbar .wm-watermark-histbtn { width: 40px; height: 40px; }

.wm-topbar__next {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 24px;
  font-size: 14px;
}


/* ══════════════════════════════════════════
   2. PREVIEW COLUMN  (photo strip + stage)
   ══════════════════════════════════════════ */
.wm-editor__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wm-strip { min-width: 0; }
.wm-strip .wm-watermark-thumbs { margin: 0; }

.wm-strip .wm-watermark-thumbs__track {
  gap: 8px;
  padding: 2px 2px 4px;
}

.wm-strip .wm-watermark-thumbs__item,
.wm-strip .wm-watermark-thumbs__add {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

/* The stage now fills whatever room the layout gives it (it used to be a fixed 4:3 box). */
.wm-editor .wm-watermark-stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  background: var(--wm-line);
}

.wm-editor .wm-watermark-stage__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}


/* ══════════════════════════════════════════
   3. TOOL DOCK  (icon-only on phones, icon + label on desktop)
   ══════════════════════════════════════════ */
.wm-editor__side {
  display: flex;
  flex-direction: column-reverse;     /* phones: panel sits ABOVE the dock */
  background: #fff;
  border-top: 1px solid var(--wm-line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(26,26,34,0.06);
  min-width: 0;
}

.wm-dock {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.wm-dock::-webkit-scrollbar { display: none; }

/* soft fade on the edge that still has tools hiding past it (phones) */
@media (max-width: 899.98px) {
  .wm-dock.has-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .wm-dock.has-less { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .wm-dock.has-more.has-less { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}

.wm-dock__btn {
  position: relative;
  flex: 1 0 44px;
  min-width: 44px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--wm-ink-soft);
  cursor: pointer;
  scroll-snap-align: center;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.wm-dock__btn svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Phones: icons only — the name is still there for screen readers (aria-label). */
.wm-dock__label {
  display: none;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

.wm-dock__btn:active { background: var(--wm-bg); }

.wm-dock__btn[aria-pressed="true"] {
  background: var(--wm-brand-soft);
  color: var(--wm-brand-dark);
}

.wm-dock__sep {
  flex: 0 0 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--wm-line);
}


/* ══════════════════════════════════════════
   4. TOOL SHEET  (the open tool's controls)
   ══════════════════════════════════════════ */
.wm-sheet {
  position: relative;
  border-bottom: 1px solid var(--wm-line);
  min-height: 0;
}

.wm-sheet__grip {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 9999px;
  background: var(--wm-line-strong);
}

.wm-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 0 18px;
}

.wm-sheet__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--wm-ink);
}

.wm-sheet__close {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--wm-ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}

.wm-sheet__close svg { width: 22px; height: 22px; }
.wm-sheet__close:active { background: var(--wm-bg); }

.wm-sheet__body {
  max-height: 280px;
  max-height: min(36dvh, 320px);
  overflow-y: auto;
  padding: 4px 18px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* one visible pane at a time */
.wm-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* slightly tighter sliders so the three Adjust sliders fit a short phone without scrolling */
.wm-sheet .wm-watermark-slider { height: 36px; }

#wm-layer-editor { gap: 0; }

.wm-pane__hint {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--wm-ink-soft);
}

.wm-linkbtn {
  align-self: flex-start;
  min-height: 36px;
  padding: 8px 2px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--wm-brand-dark);
  cursor: pointer;
  touch-action: manipulation;
}

.wm-linkbtn--danger { color: var(--wm-error); }

/* panel-tuned versions of existing controls */
.wm-sheet .wm-watermark-lockrow { padding: 12px 14px; }

.wm-sheet .wm-watermark-subpanel__toggle input:focus-visible + .wm-watermark-subpanel__toggletrack,
.wm-sheet .wm-watermark-locktoggle input:focus-visible + .wm-watermark-locktoggle__track {
  outline: 2px solid var(--wm-brand);
  outline-offset: 2px;
}

/* Font + color pickers open INLINE inside the panel (a floating popover would be clipped by the scrolling panel). */
.wm-sheet .wm-watermark-fontpopover,
.wm-sheet .wm-watermark-colorpopover {
  position: static;
  width: 100%;
  max-width: none;
  margin-top: 8px;
  box-shadow: none;
  animation: none;
  background: var(--wm-bg);
}

.wm-sheet .wm-watermark-fontpopover__list { max-height: 200px; }

/* Rotate & flip: four big touch targets */
.wm-actgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.wm-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  padding: 8px 4px;
  border-radius: 12px;
  border: 1.5px solid var(--wm-line);
  background: #fff;
  color: var(--wm-ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.wm-act svg { width: 22px; height: 22px; color: var(--wm-ink-soft); }
.wm-act:active { border-color: var(--wm-brand); background: var(--wm-brand-soft); }
.wm-act:active svg { color: var(--wm-brand-dark); }

/* Crop shapes */
.wm-aspects {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.wm-aspect {
  flex: 0 0 auto;
  min-width: 58px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 12px;
  border: 1.5px solid var(--wm-line);
  background: #fff;
  color: var(--wm-ink);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.wm-aspect__shape {
  display: block;
  height: 20px;
  width: calc(20px * var(--r, 1));
  border: 1.5px solid currentColor;
  border-radius: 3px;
  color: var(--wm-ink-soft);
}

.wm-aspect__shape--free { width: 20px; border-style: dashed; }
.wm-aspect__shape--orig { width: 28px; height: 20px; }

.wm-aspect.is-active {
  border-color: var(--wm-brand);
  background: var(--wm-brand-soft);
  color: var(--wm-brand-dark);
}

.wm-aspect.is-active .wm-aspect__shape { color: var(--wm-brand-dark); }


/* Crop tool: the "drag the watermark" hint doesn't apply, and the photo gets a little breathing room */
.wm-editor[data-tool="crop"] .wm-watermark-stage__hint { display: none; }

/* Crop tool: a little breathing room around the photo so edge handles stay fully visible. */
.wm-editor[data-tool="crop"] .wm-watermark-stage { padding: 12px; }

/* ══════════════════════════════════════════
   5. CROP FRAME  (drawn over the stage while Crop is open)
   ══════════════════════════════════════════ */
.wm-crop {
  position: absolute;
  inset: 0;
  z-index: 6;
  touch-action: none;
}

.wm-crop__box {
  position: absolute;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 9999px rgba(26,26,34,0.55);   /* dims everything outside the frame */
  cursor: move;
  touch-action: none;
  background-image:
    linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.55) calc(33.333% - .5px), rgba(255,255,255,.55) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.55) calc(66.666% - .5px), rgba(255,255,255,.55) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.55) calc(33.333% - .5px), rgba(255,255,255,.55) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), rgba(255,255,255,.55) calc(66.666% - .5px), rgba(255,255,255,.55) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}

.wm-crop__h {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  border: 2px solid var(--wm-brand);
  background: #fff;
  touch-action: none;
}

/* generous invisible touch area around every handle */
.wm-crop__h::after {
  content: '';
  position: absolute;
  inset: -14px;
}

.wm-crop__h[data-h="nw"] { left: 0;    top: 0;    cursor: nwse-resize; }
.wm-crop__h[data-h="n"]  { left: 50%;  top: 0;    cursor: ns-resize;   width: 34px; height: 10px; border-radius: 9999px; }
.wm-crop__h[data-h="ne"] { left: 100%; top: 0;    cursor: nesw-resize; }
.wm-crop__h[data-h="e"]  { left: 100%; top: 50%;  cursor: ew-resize;   width: 10px; height: 34px; border-radius: 9999px; }
.wm-crop__h[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.wm-crop__h[data-h="s"]  { left: 50%;  top: 100%; cursor: ns-resize;   width: 34px; height: 10px; border-radius: 9999px; }
.wm-crop__h[data-h="sw"] { left: 0;    top: 100%; cursor: nesw-resize; }
.wm-crop__h[data-h="w"]  { left: 0;    top: 50%;  cursor: ew-resize;   width: 10px; height: 34px; border-radius: 9999px; }


/* ══════════════════════════════════════════
   6. PHONES + SMALL TABLETS  (< 900px) — full-screen editor
   ══════════════════════════════════════════ */
@media (max-width: 899.98px) {
  html.wm-editing,
  html.wm-editing body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .wm-watermark-wrap.is-editing {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--wm-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* On-screen keyboard (iOS keeps the layout tall): editor.js sets --wm-vh + .has-kb so the tools stay above it. */
  .wm-watermark-wrap.is-editing.has-kb {
    bottom: auto;
    height: var(--wm-vh);
  }

  .wm-watermark-wrap.is-editing .wm-watermark-header,
  .wm-watermark-wrap.is-editing .wm-watermark-stepper {
    display: none;
  }

  .wm-watermark-wrap.is-editing .wm-watermark-panel[data-panel="2"].is-active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    animation: none;
  }

  .wm-editor {
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }

  .wm-topbar,
  .wm-editor__main {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .wm-editor__main { flex: 1 1 auto; min-height: 0; }

  /* Panel open → the photo gets every remaining pixel; the hint step aside. */
  .wm-editor:not([data-tool=""]) .wm-watermark-stage__hint { display: none; }

  /* Keyboard up → free the room for the preview. */
  .wm-editor.is-typing .wm-dock,
  .wm-editor.is-typing .wm-strip { display: none; }

  .wm-sheet .wm-watermark-textinput,
  .wm-sheet input[type="number"],
  .wm-sheet .wm-watermark-layerchip__nameinput {
    font-size: 16px;   /* stops iOS zooming the page when a field is focused */
  }

  /* Toast at the top so it never covers the tools. */
  html.wm-editing .wm-watermark-toast {
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    z-index: 1000;
  }
}

/* Short phones: while a watermark tool is open the photo strip steps aside so the preview keeps its room.
   (Rotate / Crop / Images need the strip, so it stays for those.) */
@media (max-width: 899.98px) and (max-height: 700px) {
  .wm-editor[data-tool="layers"] .wm-strip,
  .wm-editor[data-tool="text"] .wm-strip,
  .wm-editor[data-tool="color"] .wm-strip,
  .wm-editor[data-tool="logo"] .wm-strip,
  .wm-editor[data-tool="adjust"] .wm-strip,
  .wm-editor[data-tool="position"] .wm-strip,
  .wm-editor[data-tool="shadow"] .wm-strip { display: none; }
}

/* Landscape phones: too short for a stacked layout — put the tools beside the photo. */
@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 520px) {
  .wm-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "main side";
    column-gap: 10px;
    row-gap: 6px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .wm-topbar { grid-area: top; }
  .wm-editor__main { grid-area: main; padding-right: 0; }

  .wm-editor__side {
    grid-area: side;
    flex-direction: column;
    min-height: 0;
    margin-right: max(0px, env(safe-area-inset-right, 0px));
    border-radius: 16px 0 0 0;
  }

  .wm-dock { padding-bottom: 8px; flex: 0 0 auto; }
  .wm-sheet { display: flex; flex-direction: column; flex: 1 1 auto; border-bottom: none; }
  .wm-sheet__body { flex: 1 1 auto; max-height: none; min-height: 0; }
  .wm-editor:not([data-tool=""]) .wm-watermark-stage__hint { display: none; }
}


/* ══════════════════════════════════════════
   7. DESKTOP  (≥ 900px) — preview left, tools right
   ══════════════════════════════════════════ */
@media (min-width: 900px) {
  .wm-watermark-wrap.is-editing {
    max-width: 1180px;
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .wm-watermark-wrap.is-editing .wm-watermark-header { margin-bottom: 10px; }
  .wm-watermark-wrap.is-editing .wm-watermark-header__title { font-size: 1.5rem; margin: 0; }
  .wm-watermark-wrap.is-editing .wm-watermark-header__subtitle { display: none; }
  .wm-watermark-wrap.is-editing .wm-watermark-stepper { margin-bottom: 14px; }

  .wm-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas: "top top" "main side";
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
  }

  .wm-topbar { grid-area: top; justify-content: flex-start; }
  .wm-topbar__back { padding: 0 14px 0 8px; }
  .wm-topbar__back span { display: inline; padding-left: 2px; }
  .wm-topbar .wm-watermark-histbtns { margin: 0 auto 0 8px; }
  .wm-topbar .wm-watermark-histbtn:not(:disabled):hover { border-color: var(--wm-brand); color: var(--wm-brand); }

  /* Preview stays in view while the tools column scrolls. */
  .wm-editor__main {
    grid-area: main;
    position: sticky;
    top: 16px;
  }

  .wm-strip .wm-watermark-thumbs__item,
  .wm-strip .wm-watermark-thumbs__add {
    width: 68px;
    height: 68px;
  }

  .wm-editor .wm-watermark-stage {
    flex: none;
    height: 420px;
    height: clamp(360px, calc(100dvh - 340px), 720px);
  }

  .wm-editor__side {
    grid-area: side;
    position: sticky;
    top: 16px;
    flex-direction: column;
    border: 1px solid var(--wm-line);
    border-radius: 16px;
    box-shadow: none;
    /* never taller than what's left of the screen below the page header, so the PAGE never has to scroll */
    max-height: 560px;
    max-height: max(380px, calc(100dvh - 190px));
    overflow: hidden;
  }

  .wm-dock {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 10px;
    overflow: visible;
    border-bottom: 1px solid var(--wm-line);
  }

  .wm-dock__btn {
    min-width: 0;
    height: 60px;
  }

  .wm-dock__btn svg { width: 22px; height: 22px; }
  .wm-dock__label { display: block; }
  .wm-dock__sep { display: none; }

  .wm-dock__btn:not([aria-pressed="true"]):hover {
    background: var(--wm-bg);
    color: var(--wm-ink);
  }

  .wm-sheet {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    border-bottom: none;
  }

  .wm-sheet__head { padding: 14px 18px 0; }
  .wm-sheet__grip,
  .wm-sheet__close { display: none; }

  .wm-sheet__body {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    padding: 12px 18px 22px;
  }

  /* room on desktop: crop shapes wrap instead of scrolling sideways */
  .wm-aspects { flex-wrap: wrap; overflow: visible; }

  .wm-topbar__back:hover { border-color: var(--wm-ink); }
  .wm-act:hover,
  .wm-aspect:not(.is-active):hover { border-color: var(--wm-brand); }
  .wm-linkbtn:hover { text-decoration: underline; }
}