/* ============================================================
   Image Rename Tool — toolbar.css
   Step 2 only: a Snapseed-style fixed bottom tool bar + a slide-up
   sheet that shows exactly one tool's fields at a time. This is
   what replaces the old single long scrolling form — the gallery
   above stays put and scrollable; only this bottom layer changes
   when you pick a tool, so adjusting a setting never means losing
   sight of the images.

   Lives as a sibling of <main> in the HTML (see index.html) so its
   position:fixed is always relative to the real viewport, never to
   an ancestor that a CSS animation might turn into a transformed
   containing block.
   ============================================================ */


/* ══════════════════════════════════════════
   0. ROOT WRAPPER
   ══════════════════════════════════════════ */
.ir-tools {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* re-enabled below, on the two actual panels */
  /* Matches .ir-image-rename-wrap's font stack exactly (base.css) —
     needed because this element is deliberately OUTSIDE that wrap
     (see the comment in index.html), so it doesn't inherit it. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ir-tools[hidden] {
  display: none;
}


/* ══════════════════════════════════════════
   1. ICON STRIP — always visible while Step 2 is open
   ══════════════════════════════════════════ */
.ir-tools__bar {
  pointer-events: auto;
  background: #fff;
  border-top: 1.5px solid var(--ir-line);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ir-tools__bar-scroll {
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 6px 10px;
}

.ir-tools__bar-scroll::-webkit-scrollbar {
  display: none;
}

.ir-tools__btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 52px;
  height: 52px;
  margin: 3px 1px;
  padding: 4px 6px;
  /* Visible at rest, not just on hover/press — a faded/no border
     made every tool button look unclickable until you tapped it. */
  border: 1.5px solid var(--ir-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  color: var(--ir-ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ir-tools__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Icon only on mobile — enough tools that text labels would crowd
   the row and stop icons "fitting perfectly" for a clean tap target */
.ir-tools__btn-label {
  display: none;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.ir-tools__btn:hover,
.ir-tools__btn[aria-pressed="true"] {
  background: var(--ir-brand-soft);
  border-color: var(--ir-brand);
  color: var(--ir-brand-dark);
}

.ir-tools__bar-divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 6px 4px;
  background: var(--ir-line);
}


/* ══════════════════════════════════════════
   2. SLIDE-UP SHEET — one tool's fields at a time
   ══════════════════════════════════════════ */
.ir-tools__sheet {
  pointer-events: auto;
  background: #fff;
  border-top: 1.5px solid var(--ir-line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 32px rgba(0,0,0,0.12);
  max-height: min(56vh, 440px);
  display: flex;
  flex-direction: column;
  animation: irSheetUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards; /* not 'both' — a leftover transform would trap the position:fixed dropdown menus inside the sheet */
}

.ir-tools__sheet[hidden] {
  display: none;
}

@keyframes irSheetUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.ir-tools__sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 14px 16px 6px;
}

.ir-tools__sheet-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ir-ink);
}

.ir-tools__sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--ir-bg);
  color: var(--ir-ink-soft);
  cursor: pointer;
}

.ir-tools__sheet-close svg {
  width: 14px;
  height: 14px;
}

.ir-tools__sheet-close:hover {
  background: var(--ir-line);
  color: var(--ir-ink);
}

.ir-tools__sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 6px 16px 20px;
  box-sizing: border-box;
}

.ir-tool-fields[hidden] {
  display: none;
}

.ir-tool-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Live result — sits above every tool's fields, so the outcome of
   whatever you're adjusting is visible without hunting for the
   gallery card underneath the sheet */
.ir-tools__preview {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ir-ink-soft);
  background: var(--ir-bg);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0 0 14px;
  word-break: break-all;
}

.ir-tools__preview strong {
  color: var(--ir-brand-dark);
  font-weight: 800;
}


/* ══════════════════════════════════════════
   3. BREATHING ROOM — Step 2's scrollable content needs enough
      bottom padding to clear the fixed bar, or the last gallery
      card / Back-Continue buttons end up hidden underneath it
      (exactly the "cut off, adjust again" problem being fixed).
   ══════════════════════════════════════════ */
.ir-image-rename-panel[data-panel="2"] {
  /* --ir-sheet-h is kept in sync with the open tool sheet's height by
     main.js, so the last cards can always be scrolled above the sheet */
  padding-bottom: calc(76px + var(--ir-sheet-h, 0px) + env(safe-area-inset-bottom, 0px));
}


/* Back / Continue inside the bar — hidden until the desktop block below */
.ir-tools__nav,
.ir-tools__nav-divider {
  display: none;
}

.ir-tools__nav {
  flex: 0 0 auto;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  margin: 3px 4px;
  padding: 0 20px;
  border-radius: 9999px;
  border: 1.5px solid var(--ir-line);
  background: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ir-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ir-tools__nav svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ir-tools__nav--back:hover {
  border-color: var(--ir-ink);
}

.ir-tools__nav--continue {
  background: var(--ir-brand);
  border-color: var(--ir-brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(66,181,164,0.28);
}

.ir-tools__nav--continue:hover {
  box-shadow: 0 4px 16px rgba(66,181,164,0.36);
}

.ir-tools__nav--continue:active {
  transform: scale(0.98);
}


/* ══════════════════════════════════════════
   4. DESKTOP (≥768px) — icon + small label, as asked for
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .ir-tools__btn {
    min-width: 76px;
  }

  .ir-tools__btn-label {
    display: block;
  }
}


/* ══════════════════════════════════════════
   4b. DESKTOP / LARGE SCREENS (≥900px) — Back sits right before
       Naming, Continue right after Reset. The same two buttons stay
       in the top row on mobile and tablets (see .ir-nav-mobile).
   ══════════════════════════════════════════ */
@media (min-width: 900px) {
  .ir-tools__bar-scroll {
    max-width: 1080px;
  }

  .ir-tools__nav {
    display: inline-flex;
  }

  .ir-tools__nav-divider {
    display: block;
  }

  /* auto margins centre the whole row when it fits, and collapse to 0
     (so nothing is cut off) if it ever has to scroll */
  .ir-tools__nav--back {
    margin-left: auto;
  }

  .ir-tools__nav--continue {
    margin-right: auto;
  }

  .ir-nav-mobile {
    display: none !important;
  }

  /* Only "Add more" is left in the top row — keep it a normal-size
     button instead of stretching across the page */
  .ir-image-rename-panel[data-panel="2"] .ir-image-rename-actions--top #ir-add-more {
    flex: 0 0 auto;
    padding: 0 24px;
  }
}


/* ══════════════════════════════════════════
   5. REDUCED MOTION
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ir-tools__sheet {
    animation: none;
  }
}