/* Aus dem Prototyp V3 übernommen (Stilblock Zeilen 2013–2143, 2479–2493,
   3055–3070, 3455–3469): die zwei schwebenden Leisten über dem Bild —
   unten die Werkzeuge (#hist), oben die Bildreihe (#hist-oben) —, ihr
   Feststeller und die stehende Meldung zum Bilddienst. Die Grundregeln
   von .history, .hist-btns und der Knöpfe stehen in canvas.css. */

/* Dieselbe Leiste, nur an der oberen Kante: sie fährt nach oben hinaus und
   trägt die Bildreihe samt Löschzeichen. Unten hat sie kein eigenes
   Polster: den Platz bringt der Rollkasten mit (.hist-scroll). */
.history-oben {
  top: 0;
  bottom: auto;
  transform: translateY(-100%);
  padding-bottom: 0;
}

/* Das Wubbeln nach dem Klick auf einen Feststeller: die Leiste bleibt an
   ihrer Bildkante kleben und WÄCHST zur Bildmitte — sie schießt auf,
   fällt zurück, schwingt kleiner werdend aus. Es wubbelt das Polster der
   Außenseite; transform gehört dem Ein- und Ausfahren. */
@keyframes leiste-wubbel-unten {
  0% {
    padding-bottom: 10px;
  }
  18% {
    padding-bottom: 26px;
  }
  38% {
    padding-bottom: 4px;
  }
  56% {
    padding-bottom: 17px;
  }
  72% {
    padding-bottom: 7px;
  }
  86% {
    padding-bottom: 12px;
  }
  100% {
    padding-bottom: 10px;
  }
}
@keyframes leiste-wubbel-oben {
  0% {
    padding-top: 10px;
  }
  18% {
    padding-top: 26px;
  }
  38% {
    padding-top: 4px;
  }
  56% {
    padding-top: 17px;
  }
  72% {
    padding-top: 7px;
  }
  86% {
    padding-top: 12px;
  }
  100% {
    padding-top: 10px;
  }
}
.history.wubbelt {
  animation: leiste-wubbel-unten 0.72s cubic-bezier(0.33, 1, 0.5, 1);
}
.history-oben.wubbelt {
  animation: leiste-wubbel-oben 0.72s cubic-bezier(0.33, 1, 0.5, 1);
}
/* Dieselbe Antwort für die seitlichen Menüs: der Inhalt wippt kurz zur
   Bildmitte und kommt zurück. Das Menü selbst gehört dem Ein- und
   Ausfahren, bewegt wird, was darin steht. */
@keyframes menue-wubbel-links {
  0% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(16px);
  }
  38% {
    transform: translateX(-6px);
  }
  56% {
    transform: translateX(7px);
  }
  72% {
    transform: translateX(-3px);
  }
  86% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes menue-wubbel-rechts {
  0% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(-16px);
  }
  38% {
    transform: translateX(6px);
  }
  56% {
    transform: translateX(-7px);
  }
  72% {
    transform: translateX(3px);
  }
  86% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}
.panel.wubbelt .panel-scroll {
  animation: menue-wubbel-links 0.72s cubic-bezier(0.33, 1, 0.5, 1);
}
aside.ctx.wubbelt > * {
  animation: menue-wubbel-rechts 0.72s cubic-bezier(0.33, 1, 0.5, 1);
}
.panel-pfeil.wubbelt > i {
  animation: menue-wubbel-links 0.72s cubic-bezier(0.33, 1, 0.5, 1);
}

/* ── Herunterladen in der unteren Leiste ── Das Zeichen saß früher im
   Bild; jetzt steht es ganz links in der Leiste, grau in Ruhe, schwarz
   und eine Spur kräftiger unter der Hand. Es kommt mit dem Bild und geht
   mit ihm. */
#mimg-dl {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--leiste-grau);
  transition: color 0.12s;
  cursor: pointer;
}
#mimg-dl:hover {
  color: var(--black);
}
#mimg-dl svg {
  transition: stroke-width 0.12s;
}
#mimg-dl:hover svg {
  stroke-width: 1.6;
}

/* ── Leisten feststellen ── Derselbe Rahmen wie „Menüs feststellen“, nur
   hochkant: die beiden dicken Linien liegen auf der oberen und unteren
   Kante — dort, wo die Leisten ein- und ausfahren. Festgestellt werden
   sie zu schwarzen Flächen, die bis dorthin reichen, wo die Leisten über
   dem Bild stehen. */
#leisten-pin {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#leisten-pin .pin-frame {
  stroke: var(--leiste-grau);
  stroke-width: 0.75;
}
#leisten-pin .lp-bar {
  fill: var(--leiste-grau);
  stroke: none;
  transform-box: fill-box;
  transition:
    transform 0.25s ease,
    fill 0.12s;
}
#leisten-pin .lp-bar-o {
  transform-origin: top;
}
#leisten-pin .lp-bar-u {
  transform-origin: bottom;
}
#leisten-pin:hover .lp-bar,
#leisten-pin.pinned .lp-bar {
  fill: var(--black);
}
#leisten-pin.pinned .lp-bar-o,
#leisten-pin.pinned .lp-bar-u {
  transform: scaleY(4.2);
}

/* ── Aktiv heißt gefüllt ── Anzeichnen und festgehaltener Seed laufen
   weiter, während man anderswo arbeitet. Dass sie laufen, sagt die Form
   selbst: was geschlossen ist, läuft schwarz voll (der Kasten des
   Schlosses, der Körper des Stifts); was offen ist, bleibt Linie. */
#annot-btn .fuellbar,
#mimg-lock .fuellbar {
  fill: none;
  transition: fill 0.16s ease;
}
#annot-btn.on .fuellbar,
#mimg-lock.ki-locked .fuellbar {
  fill: currentColor;
}
#annot-btn.on,
#annot-btn.on:hover,
#mimg-lock.ki-locked,
#mimg-lock.ki-locked:hover {
  color: var(--black);
}

/* ── Die drei Zustände des Eimers ── Zu, solange nichts geschieht; unter
   dem Zeiger geht der Deckel auf. Im Löschmodus steht derselbe offene
   Eimer schwarz auf der roten Scheibe. */
.sym-eimer .e-auf {
  display: none;
}
button:hover .sym-eimer .e-zu,
body.loeschmodus #hist-alle-weg .sym-eimer .e-zu {
  display: none;
}
button:hover .sym-eimer .e-auf,
body.loeschmodus #hist-alle-weg .sym-eimer .e-auf {
  display: inline;
}
body.loeschmodus #hist-alle-weg,
body.loeschmodus #hist-alle-weg:hover {
  color: var(--black);
}

/* Erst die Vorschau, dann das Original (history/preview-first.js): die
   Vorschau liegt deckend über dem Hauptbild, Lage und Größe setzt das
   Skript. */
#out-vorschau {
  position: absolute;
  display: none;
  margin: 0;
  pointer-events: none;
  object-fit: contain;
  z-index: 6;
  background: var(--white);
}

/* Die stehende Meldung zum Bilddienst gehört zum Generieren-Knopf: in der
   Tarifwahl und im großen Kontaktbogen steht er nicht da. */
body.abo-app #fs[data-steht='comfy'],
body.hist-voll #fs[data-steht='comfy'] {
  visibility: hidden;
}

/* ── Umstellen der unteren Leiste (V3 Stilblock 2144–2185) ── Dieselbe
   Geste wie im linken Menü und in der Bildreihe: wer die Maustaste auf
   einem Zeichen HÄLT, nimmt es auf und legt es woanders hin
   (ui/bar-order.js). Und dieselbe Rückmeldung: rot ist, was in der Hand
   liegt, und sonst nichts. Die Zeichen holen ihre Farben von sehr
   verschiedenen Stellen — aus currentColor, fest aus dem Markup (die
   Feststeller malen mit fill und stroke), aus Kennungen mit hoher
   Spezifität (#shuffle-btn.an, #mimg-lock.ki-locked …). Darum steht hier
   !important: der Zug ist ein Zustand für den Augenblick, und er sticht
   jeden anderen. */
body.sortier .hist-btns {
  user-select: none;
}
#hist .hist-btns > *.zieht {
  color: var(--red) !important;
}
#hist .hist-btns > *.zieht svg {
  stroke-width: 1.9;
}
#hist .hist-btns > *.zieht .pin-frame,
#hist .hist-btns > *.zieht .pin-bar,
#hist .hist-btns > *.zieht .so-btn-kern {
  stroke: var(--red) !important;
}
#hist .hist-btns > *.zieht .pin-tri,
#hist .hist-btns > *.zieht .lp-bar,
#hist .hist-btns > *.zieht .so-btn-kern {
  fill: var(--red) !important;
}
/* Die Zahlenmatrix und der Strich zwischen A und B tragen eigene Farben —
   die gewählte Zahl sogar Schwarz. */
#hist .hist-btns > *.zieht .ab-a,
#hist .hist-btns > *.zieht .ab-b,
#hist .hist-btns > *.zieht .batch-cell,
#hist .hist-btns > *.zieht .batch-cell.on,
#hist .hist-btns > *.zieht .batch-cell:hover {
  color: var(--red) !important;
}
#hist .hist-btns > #ab-btn.zieht::before {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--red) calc(50% - 0.5px),
    var(--red) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  ) !important;
}