/* ── DAS PROMPTFELD ───────────────────────────────────────────────
   Doppelklick auf einen Chip zeigt seitlich, was er in den Prompt
   schreibt — in genau der Fassung, die gerade gilt.                */
/* Rot mit weisser Schrift, wie die uebrigen Hinweise der App. Auf dem
   hellen Grund traegt sich die Flaeche selbst — Rahmen und Schlagschatten
   braucht sie dafuer nicht.                                         */
#chip-prompt {
  position: fixed;
  z-index: 120;
  width: 340px;
  max-width: 44vw;
  display: none;
  background: var(--red);
  color: var(--white);
  border: none;
  box-shadow: none;
}
/* Der Zipfel zeigt zurueck auf den Chip, aus dem das Feld kommt: ein
   langer, schmaler Keil, der oben an der Flanke ansetzt und spitz nach
   links auslaeuft — die Spitze liegt dabei etwas hoeher als die Kante,
   an der er ansetzt, so dass er leicht nach oben zieht. Seine Hoehe
   setzt das Skript, damit die Spitze auf der Zeile des Chips sitzt.
   Kein Rahmen, kein Schatten: die Flaeche traegt sich selbst.       */
#chip-prompt::before {
  content: '';
  position: absolute;
  /* Ein Pixel breiter als lang: die rechte Kante liegt damit INNERHALB
     des Rechtecks. Stossen zwei Flaechen genau aufeinander, bleibt bei
     krummen Bildschirmpunkten ein heller Haarstrich stehen — die
     Ueberlappung nimmt ihn weg.
     Hoehe und Umriss setzt das Skript: Sitz, Flanke und Neigung sind
     bei jedem Oeffnen andere.                                       */
  left: -26px;
  top: var(--zipfel, 24px);
  width: 27px;
  height: var(--zh, 28px);
  background: var(--red);
  clip-path: var(--zclip, polygon(0 0, 100% 2px, 100% 28px));
}
#chip-prompt.an {
  display: block;
}
/* Auftritt wie beim Anmeldekreis: das Feld federt heraus statt
   einzublenden. Die Werte sind die der dortigen Feder (federK,
   1 - 2^-9t * cos(4,2 pi t)) an zehn Stellen abgetastet — erst
   schiesst es ueber die Ruhelage hinaus, dann schwingt es kleiner
   werdend aus.                                                      */
@keyframes cp-feder {
  0% {
    transform: translateX(-18px);
    opacity: 0;
  }
  10% {
    transform: translateX(-2.4px);
    opacity: 1;
  }
  20% {
    transform: translateX(4.5px);
  }
  30% {
    transform: translateX(-1.9px);
  }
  40% {
    transform: translateX(0.8px);
  }
  50% {
    transform: translateX(0.8px);
  }
  60% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(-0.2px);
  }
  100% {
    transform: translateX(0);
  }
}
#chip-prompt.an {
  animation: cp-feder 0.72s linear;
}
/* Kein Strich zwischen Ueberschrift und Prompt — der Block soll als
   ein Feld lesen, nicht als Tabelle mit Kopfzeile.                */
#chip-prompt .cp-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px 4px;
}
/* Der Titel traegt dieselbe Schrift wie die Kategorien im Menue:
   Urbanist, klein, gesperrt, in Versalien.                        */
#chip-prompt .cp-titel {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
}
#chip-prompt .cp-art {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
/* Die beiden Zeichen oben rechts, beide gleich gross. */
#chip-prompt .cp-werkzeug {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}
#chip-prompt .cp-knopf {
  width: 15px;
  height: 15px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: block;
  transition: color 0.15s;
}
#chip-prompt .cp-knopf:hover {
  color: var(--white);
}
#chip-prompt .cp-knopf svg {
  width: 15px;
  height: 15px;
  display: block;
}
#chip-prompt .cp-knopf.an {
  color: var(--white);
}
/* Der Pfeil dreht sich beim Zuruecknehmen einmal ganz herum. */
@keyframes cp-dreh {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
#chip-prompt .cp-knopf.dreht svg {
  animation: cp-dreh 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Der Prompt ist ein Textfeld, sieht aber aus wie Fliesstext — im
   Lesezustand nur ohne Schreibmarke.                              */
#chip-prompt .cp-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* Dieselbe Schriftlogik wie im Menue: Urbanist, 14 px, leicht — der
     Prompt liest sich damit wie die Freie Beschreibung daneben.     */
  padding: 7px 13px 15px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--white);
  caret-color: var(--white);
  background: none;
  border: none;
  outline: none;
  resize: none;
  max-height: 52vh;
  overflow-y: auto;
  scrollbar-width: none;
}
#chip-prompt .cp-text::-webkit-scrollbar {
  width: 0;
  display: none;
}
#chip-prompt.bearbeitet .cp-text {
  color: var(--white);
}
/* Nur für die Verwaltung: den Text für alle speichern oder zurück auf
   den Text im Markup. Klein und gesperrt wie der Titel oben.       */
#chip-prompt .cp-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 0 13px 13px;
}
#chip-prompt .cp-admin[hidden],
#chip-prompt .cp-admin [hidden] {
  display: none;
}
#chip-prompt .cp-teilen {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
#chip-prompt .cp-teilen:disabled {
  opacity: 0.45;
  cursor: default;
}
#chip-prompt .cp-admin-msg {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}
/* Die Aufloesung hat keinen Text, sondern Zahlen. Statt des Schreibfeldes
   steht dort eine Reihe von 1 bis 16 — was man waehlt, traegt der Chip
   danach als Aufschrift und der Workflow als Megapixel.            */
#chip-prompt .cp-zahlen {
  display: none;
  flex-wrap: wrap;
  gap: 9px 15px;
  padding: 9px 13px 15px;
}
#chip-prompt.zahlen .cp-text {
  display: none;
}
#chip-prompt.zahlen .cp-zahlen {
  display: flex;
}
#chip-prompt .cp-zahl {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.62);
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px 0;
  transition: color 0.12s;
}
#chip-prompt .cp-zahl:hover {
  color: var(--white);
}
#chip-prompt .cp-zahl.an {
  color: var(--white);
  font-weight: 600;
}
/* Ein Apostroph hinter der Aufschrift zeigt: an diesem Chip wurde der
   Prompt von Hand geaendert.                                        */
.chip.geaendert::after,
.tag.geaendert::after {
  content: '\2019';
  margin-left: 1px;
}
.sec-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 9px;
  display: block;
  text-align: right;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 6px;
  gap: 2px 10px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 7px;
  gap: 2px 10px;
}

.field {
  margin-bottom: 12px;
}
input[type='text'],
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 5px 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--black);
  outline: none;
  resize: none;
  -webkit-appearance: none;
  letter-spacing: 0.01em;
  transition: border-color 0.2s;
  cursor: text;
}
input[type='text']:focus,
textarea:focus {
  border-bottom-color: var(--black);
}
input[type='text']::placeholder,
textarea::placeholder {
  color: var(--light);
  font-weight: 300;
  font-style: italic;
  font-family: var(--sans);
  font-size: 12px;
}
textarea {
  min-height: 48px;
  line-height: 1.6;
}
/* Freie Beschreibung — derselbe Satz wie ein aktiver Chip.
   Sie ist eine Kategorie unter den anderen und soll auch so aussehen:
   aufrecht statt kursiv (Textfelder erben das Kursive nicht, es stand
   ausdruecklich hier), Laufweite wie die Chips (die gemeinsame
   Eingabefeld-Regel setzt .01em, Chips setzen nichts) und Gewicht 400.
   Die 400 sind kein Schreibfehler: der Koerper steht auf 300, aber die
   Reset-Regel vererbt Knoepfen nur Familie und Groesse, kein Gewicht —
   ein Chip rechnet darum auf die 400 des Browsers, das Textfeld erbte
   die 300. Familie var(--sans) haben beide vom Koerper. Die Zeilenhoehe
   1.6 bleibt: ein Chip ist einzeilig, die Beschreibung laeuft um.    */
#uprompt {
  min-height: 4em;
  resize: none;
  border-bottom: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  text-align: right;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
/* Geschrieben = aktiv: dieselbe Kontur und dieselbe optische Groesse wie
   ein eingeschalteter Chip (14px mal 1.143 aus seiner Vergroesserung
   ergibt genau 16px).                                                */
#uprompt.has-text {
  -webkit-text-stroke: 0.4px currentColor;
  font-size: 16px;
  color: var(--black);
}
#uprompt::placeholder {
  font-size: 14px;
}

.geo-btn {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 5px;
  display: inline-block;
  transition: color 0.15s;
}
.geo-btn:hover {
  color: var(--mid);
}

.chip {
  font-size: 14px;
  color: var(--light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  transition:
    color 0.12s,
    transform 0.12s;
  white-space: nowrap;
  transform-origin: center;
}
.chip:hover {
  color: var(--mid);
  transform: translateY(-0.72px) scale(1.143);
}
.chip.on {
  color: var(--black);
  -webkit-text-stroke: 0.4px currentColor;
  transform: translateY(-0.72px) scale(1.143);
}

.tag {
  font-size: 14px;
  color: var(--light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  transition:
    color 0.12s,
    transform 0.12s;
  transform-origin: center;
}
.tag:hover {
  color: var(--mid);
  transform: translateY(-0.72px) scale(1.143);
}
.tag.on {
  color: var(--black);
  -webkit-text-stroke: 0.4px currentColor;
  transform: translateY(-0.72px) scale(1.143);
}
/* Steht das rote Promptfeld offen, faerbt sich der Chip mit, zu dem es
   gehoert — bei mehreren gleich aussehenden Chips waere sonst nicht zu
   sehen, welcher gerade am Feld haengt. Er traegt dabei denselben Satz
   wie ein aktiver schwarzer Chip: gleiche Kontur, gleiche Groesse, nur
   in Rot. Die Kontur uebernimmt die Farbe von selbst, sie ist auf
   currentColor gesetzt.                                             */
.chip.cp-auf,
.tag.cp-auf {
  color: var(--red);
  -webkit-text-stroke: 0.4px currentColor;
  transform: translateY(-0.72px) scale(1.143);
}

.ref-drop-zone {
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin-bottom: 7px;
}
.ref-drop-zone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
}
.ref-drop-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light);
  transition: color 0.15s;
}
.ref-drop-zone:hover .ref-drop-lbl {
  color: var(--black);
}

.ref-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 7px;
}
.ref-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  background: var(--xlight);
}
.ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ref-rm {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  border: none;
  color: var(--black);
  font-size: 16px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.ref-thumb:hover .ref-rm {
  opacity: 1;
}

.hdiv {
  height: 1px;
  background: var(--border);
  margin: 18px 0 0;
}

/* Zeilenumbruch innerhalb einer Chipreihe */
.chip-break {
  width: 100%;
  height: 0;
}