/* ===========================================================================
   melde-knopf.css — Optik des Melde-Knopfes (melde-20260826)
   ---------------------------------------------------------------------------
   Alle Farben, Abstaende, Radien, Rahmen, Uebergaenge und Schatten kommen aus
   dem Token-Satz des Panels (gsv-bridge.css). Kein eigenes #hex, kein px.
   Kein !important.

   NICHT im Token-Satz vorhanden und deshalb relativ statt erfunden:
     * Schriftgroessen — gsv-bridge.css fuehrt KEINE --font-size-*-Tokens.
       Darum wie in support-kunde.css: Vielfache von `em` auf der geerbten
       Groesse (0.78em / 0.85em / 0.9em / 1.15em), nichts Absolutes.
     * Dialog-Breite/Bildhoehe — dafuer gibt es ebenfalls keinen Token.
       Gesetzt in rem/vw/vh, damit nichts in px festgenagelt ist.
   =========================================================================== */

/* --- der Knopf ------------------------------------------------------------
   Liegt eine Knopfhoehe ueber der Standspur des Support-Knopfes
   (.gsv-sup-embed: right/bottom var(--sp-4)), damit sich beide auf den
   Flaechen, die BEIDE zeigen, nicht ueberdecken. Rein aus Tokens gerechnet. */
.gsv-melde-knopf {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + var(--tap) + var(--sp-2));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--tr), color var(--tr);
}
.gsv-melde-knopf:hover { background: var(--accent); color: var(--on-accent); }
.gsv-melde-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--sp-1); }

/* --- Dialog ---------------------------------------------------------------- */
.gsv-melde-wurzel[hidden] { display: none; }
.gsv-melde-wurzel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.gsv-melde-hof {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}
.gsv-melde-karte {
  position: relative;
  width: min(34rem, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: var(--sp-5);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-family: var(--sans);
}

/* --- Kopf ------------------------------------------------------------------ */
.gsv-melde-kopf { position: relative; padding-right: var(--sp-6); margin-bottom: var(--sp-4); }
.gsv-melde-kopf h2 { margin: 0; font-family: var(--serif); font-size: 1.35em; line-height: 1.2; }
.gsv-melde-sub { margin: var(--sp-1) 0 0; color: var(--muted); font-size: 0.9em; }
.gsv-melde-x {
  position: absolute;
  top: 0;
  right: 0;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-deep);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background var(--tr);
}
.gsv-melde-x:hover { background: var(--line); }

/* --- Formular -------------------------------------------------------------- */
.gsv-melde-feld { margin-bottom: var(--sp-4); }
.gsv-melde-feld label { display: block; margin-bottom: var(--sp-1); font-weight: 700; }
.gsv-melde-feld textarea {
  width: 100%;
  padding: var(--sp-2);
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
}
.gsv-melde-feld textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.gsv-melde-fehlfeld {
  margin: var(--sp-1) 0 0;
  padding: var(--sp-2);
  background: var(--err-bg);
  color: var(--err);
  border-radius: var(--radius);
  font-size: 0.9em;
}
.gsv-melde-schalter {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
  cursor: pointer;
}
.gsv-melde-schalter small { display: block; color: var(--muted); font-size: 0.85em; }

/* --- Kontext-Vorschau (was wirklich mitgeht) ------------------------------- */
.gsv-melde-kontext {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.gsv-melde-kontext-kopf {
  margin-bottom: var(--sp-2);
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.gsv-melde-kontext dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: 0;
}
.gsv-melde-kontext dt { color: var(--muted); font-size: 0.9em; }
.gsv-melde-kontext dd { margin: 0; font-size: 0.9em; overflow-wrap: anywhere; }
.gsv-melde-klein { margin: var(--sp-2) 0 0; color: var(--muted); font-size: 0.85em; }

/* --- Hinweise -------------------------------------------------------------- */
.gsv-melde-hinweis {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9em;
}
.gsv-melde-hinweis.is-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-ink); }
.gsv-melde-hinweis.is-fehler { background: var(--err-bg); color: var(--err); border-color: var(--err); }

/* --- laufende Zustaende (Freigabe · Hochladen · Sendet) -------------------- */
.gsv-melde-lauf { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.gsv-melde-lauf p { margin: 0; color: var(--muted); font-size: 0.9em; }
.gsv-melde-kreisel {
  width: var(--sp-6);
  height: var(--sp-6);
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gsv-melde-dreh 900ms linear infinite;
}
@keyframes gsv-melde-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gsv-melde-kreisel { animation-duration: 0s; }
}
.gsv-melde-balken {
  width: 100%;
  height: var(--sp-2);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gsv-melde-balken-fuell {
  height: 100%;
  background: var(--accent);
  transition: width var(--tr);
}

/* --- Bildvorschau ---------------------------------------------------------- */
.gsv-melde-vorschau {
  display: block;
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
  margin-bottom: var(--sp-4);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* --- Erfolg ---------------------------------------------------------------- */
.gsv-melde-erfolg {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: var(--ok-bg);
  border: 1px solid var(--ok);
  border-radius: var(--radius);
}
.gsv-melde-nummer { font-family: var(--mono); font-weight: 700; font-size: 1.15em; color: var(--ok); }
.gsv-melde-betreff { margin-top: var(--sp-1); }
.gsv-melde-bilanz {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.gsv-melde-bilanz dt { color: var(--muted); font-size: 0.9em; }
.gsv-melde-bilanz dd { margin: 0; font-size: 0.9em; overflow-wrap: anywhere; }

/* --- Bildschirmfoto im Ticket-Verlauf der Staff-Ansicht --------------------
   Gehoert zu hauptpanel/app.js (.cd-msg-shot): das Bild haengt unter dem Text
   der Blase, statt als roher Markdown-Link dazustehen.
   Der Kundenverlauf hat dieselbe Regel unter .gsv-sup-shot in
   support-kunde.css — dort, weil /api/support/ui dieses Blatt hier nicht
   laedt. Bewusst NICHT doppelt gefuehrt. */
.cd-msg-shot { display: block; margin-top: var(--sp-2); }
.cd-msg-shot img {
  display: block;
  width: 100%;
  max-height: 32vh;
  object-fit: contain;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* --- Fuss ------------------------------------------------------------------ */
.gsv-melde-fuss { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.gsv-melde-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tr);
}
.gsv-melde-btn:hover { background: var(--accent-hover); }
.gsv-melde-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--sp-1); }
.gsv-melde-btn-geist { background: var(--paper); color: var(--accent); }
.gsv-melde-btn-geist:hover { background: var(--accent-soft); }