/* =============================================================================
   composer.css — die Eingabeleiste (Feld, Bild, Mikro, Senden, Anhang-Chip,
   Hinweis) und das kleine VETI-Popup. Geteilt von Chat (chat/index.html, vor
   chat.css) und Dashboard (index.html, Schnelleingabe unter VETIs Nachricht);
   Markup + Verhalten in js/composer.js.

   Aus chat.css hierher verschoben (19.10.), Regeln unverändert. Die Farb-
   Variablen (--v-*) definiert chat/veti.css nur im Chat — auf dem Dashboard
   greifen die Rückfallwerte (dieselben Werte wie in veti.css). Was nur den
   Chat betrifft (fixe .leiste am Fuß, .leiste__inner-Breite, --leiste-h),
   bleibt in chat.css; die Einbettung im Dashboard steht in heute.css (.schnell).
   ========================================================================== */

.leiste__feld {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  padding: 6px 6px 6px var(--sp-4);
  border: 1px solid var(--v-hair, rgba(28, 28, 30, 0.10));
  /* Halbe Höhe der einzeiligen Leiste (38px Knopf + 2 × 6px): einzeilig eine
     Pille, mehrzeilig ein gerundetes Rechteck. --r-pill würde das hohe Feld
     zur Ellipse biegen und die Ecken der Zeilen abschneiden. */
  border-radius: 25px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 22px rgba(28, 28, 30, .08);
}
.leiste__feld input,
.leiste__feld textarea {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 14.5px; color: var(--v-ink, var(--c-neutral-900, #212121));
}
/* Eingabe als Textarea: startet einzeilig, wächst mit dem Text (JS setzt die
   Höhe) bis zur Maximalhöhe, danach scrollt der Inhalt. Keine manuelle
   Größenänderung, damit die fixierte Fußleiste nicht springt. */
.leiste__feld textarea {
  resize: none;
  line-height: 1.4;
  max-height: 160px;
  overflow-y: hidden;
  padding: 8px 0;
}
.leiste__feld input::placeholder,
.leiste__feld textarea::placeholder { color: var(--v-muted, var(--c-neutral-600, #666666)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Live-Mitschrift (INU-753): erkannter, noch unbearbeiteter Text ist grau. */
.leiste__feld textarea.is-live { color: var(--v-muted, var(--c-neutral-600, #666666)); font-style: italic; }
.leiste__senden {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: var(--v-deep, var(--c-brand-purple-500, #6450E8)); color: #fff;
  cursor: pointer;
  transition: background 150ms, opacity 150ms;
}
.leiste__senden:hover { background: var(--v-deep-hover, var(--c-brand-purple-600, #5442D6)); }
.leiste__senden:disabled { opacity: .3; pointer-events: none; }
/* Sprachnachricht-Knopf (Finding 3): stiller Kreis neben „Senden“; im
   Aufnahme-Zustand rot mit sanftem Puls. */
.leiste__mikro {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: rgba(28, 28, 30, .06); color: var(--v-ink, var(--c-neutral-900, #212121));
  cursor: pointer;
  transition: background 150ms, opacity 150ms, color 150ms;
}
.leiste__mikro:hover { background: rgba(28, 28, 30, .12); }
.leiste__mikro:disabled { opacity: .3; pointer-events: none; }
.leiste__mikro.is-recording {
  background: #e5484d; color: #fff;
  animation: mikro-puls 1.2s ease-in-out infinite;
}
@keyframes mikro-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
}
/* Bild-/Screenshot-Anhang: Knopf im Stil des Mikros. */
.leiste__bild {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: rgba(28, 28, 30, .06); color: var(--v-ink, var(--c-neutral-900, #212121));
  cursor: pointer;
  transition: background 150ms, opacity 150ms, color 150ms;
}
.leiste__bild:hover { background: rgba(28, 28, 30, .12); }
.leiste__bild:disabled { opacity: .3; pointer-events: none; }
/* Vorschau-Chip über dem Eingabefeld: Thumbnail + Status + Entfernen. */
.leiste__anhang {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 8px; padding: 6px 10px 6px 6px;
  border: 1px solid var(--v-hair, rgba(28, 28, 30, 0.10));
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 16px rgba(28, 28, 30, .06);
}
.leiste__anhang .anhang__bild img {
  display: block; width: 40px; height: 40px;
  object-fit: cover; border-radius: 8px;
}
.leiste__anhang .anhang__text {
  flex: 1; min-width: 0;
  font-size: 13px; color: var(--v-muted, var(--c-neutral-600, #666666));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leiste__anhang .anhang__text--fehler { color: #e5484d; }
.leiste__anhang .anhang__weg {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(28, 28, 30, .06); color: var(--v-ink, var(--c-neutral-900, #212121));
  font-size: 18px; line-height: 1; cursor: pointer;
}
.leiste__anhang .anhang__weg:hover { background: rgba(28, 28, 30, .12); }

/* --- INU-821: mehrere Dateien/Fotos — eine Liste kleiner Chips ------------- */
.leiste__anhang--liste {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px;
  padding: 6px; max-height: 168px; overflow-y: auto;
}
.leiste__anhang .anhang {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 220px; min-width: 0; max-width: 100%;
  padding: 4px 6px 4px 4px;
  border-radius: 10px;
  background: rgba(28, 28, 30, .04);
}
.leiste__anhang .anhang--fehler { background: rgba(229, 72, 77, .08); }
.leiste__anhang .anhang__icon {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--v-brand-soft, rgba(28, 28, 30, .08));
  color: var(--v-ink, var(--c-neutral-900, #212121));
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.leiste__anhang .anhang__inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.leiste__anhang .anhang__name {
  font-size: 13px; color: var(--v-ink, var(--c-neutral-900, #212121));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leiste__anhang .anhang__status {
  font-size: 12px; color: var(--v-muted, var(--c-neutral-600, #666666));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leiste__anhang .anhang--fehler .anhang__status { color: #c4262c; white-space: normal; }
.leiste__anhang .anhang__balken {
  display: block; height: 3px; border-radius: 2px; overflow: hidden;
  background: rgba(28, 28, 30, .08);
}
.leiste__anhang .anhang__balken > span {
  display: block; height: 100%;
  background: var(--v-brand, #4b3fd1);
  transition: width 200ms;
}
/* Drag & Drop: die Fläche zeigt, dass sie Dateien annimmt. */
.is-drop { outline: 2px dashed var(--v-brand, #4b3fd1); outline-offset: 4px; border-radius: 18px; }

.leiste__hinweis {
  margin: 8px 0 0; text-align: center;
  font-size: 11.5px; color: var(--v-muted, var(--c-neutral-600, #666666));
}

/* --- Mikro: Diktieren / Sprachnachricht + kleines Popup (Stefan 14.10.) ---- */
/* Langdruck öffnet die Auswahl: kein Kontextmenü, keine Textauswahl, kein
   Doppeltipp-Zoom auf dem Knopf. */
.leiste__mikro {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
/* Diktat läuft: ruhiger als die rote Sprachnachricht — Markenfarbe, Stopp-Quadrat. */
.leiste__mikro.is-recording.is-diktat {
  background: var(--v-deep, var(--c-brand-purple-500, #6450E8)); color: #fff;
  animation: mikro-puls-diktat 1.4s ease-in-out infinite;
}
@keyframes mikro-puls-diktat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(86, 63, 192, .40); }
  50%      { box-shadow: 0 0 0 6px rgba(86, 63, 192, 0); }
}
.leiste__mikro:focus-visible { outline: 2px solid var(--v-accent, var(--c-brand-cyan-700, #007A96)); outline-offset: 2px; }
/* Diktat wird serverseitig vervollständigt: Feld kurz gedimmt, nicht editierbar. */
.leiste__feld textarea.is-wandelt { color: var(--v-muted, var(--c-neutral-600, #666666)); cursor: progress; }

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.vpop-hinter {
  position: fixed; inset: 0; z-index: 80;
  background: transparent;
}
.vpop {
  position: fixed; z-index: 81;
  width: min(340px, calc(100vw - 16px));
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(16, 24, 40, .18), 0 1px 3px rgba(16, 24, 40, .08);
  color: var(--v-ink, var(--c-neutral-900, #212121));
  font-size: 14px; line-height: 1.45;
  animation: vpop-rein 140ms ease-out;
}
@keyframes vpop-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vpop__titel { margin: 0 0 4px; font-family: var(--font-titel, inherit); font-size: 15px; font-weight: 700; }
.vpop__text { margin: 0 0 12px; color: var(--v-body, var(--v-muted, var(--c-neutral-600, #666666))); font-size: 13px; }
.vpop__wahl { display: grid; gap: 8px; }
.vpop__option {
  display: grid; gap: 2px; text-align: left;
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--v-rand, rgba(28, 28, 30, 0.24)); border-radius: 12px;
  background: #fff; color: var(--v-ink, var(--c-neutral-900, #212121));
  font: inherit; cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.vpop__option:hover { border-color: var(--v-deep, var(--c-brand-purple-500, #6450E8)); background: var(--v-deep-soft, #EDE9F9); }
.vpop__option[aria-pressed="true"] { border-color: var(--v-deep, var(--c-brand-purple-500, #6450E8)); box-shadow: inset 0 0 0 1px var(--v-deep, var(--c-brand-purple-500, #6450E8)); }
.vpop__option:focus-visible, .vpop__knopf:focus-visible { outline: 2px solid var(--v-accent, var(--c-brand-cyan-700, #007A96)); outline-offset: 2px; }
.vpop__option-titel { font-weight: 600; font-size: 14.5px; }
.vpop__option-text { font-size: 12.5px; color: var(--v-muted, var(--c-neutral-600, #666666)); }
.vpop__fuss { display: flex; justify-content: flex-end; }
.vpop__knopf {
  min-height: 40px; padding: 8px 18px;
  border: 0; border-radius: var(--r-pill);
  background: var(--v-deep, var(--c-brand-purple-500, #6450E8)); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
.vpop__knopf:hover { background: var(--v-deep-hover, var(--c-brand-purple-600, #5442D6)); }
/* Schmale Schirme: Blatt am unteren Rand, große Tippflächen, über der Home-Leiste. */
.vpop--blatt {
  left: 0 !important; right: 0; bottom: 0 !important; top: auto !important;
  width: 100%;
  border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  animation-name: vpop-blatt;
}
@keyframes vpop-blatt { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.vpop-hinter:has(.vpop--blatt) { background: rgba(16, 24, 40, .28); }
@media (prefers-reduced-motion: reduce) {
  .vpop, .vpop--blatt { animation: none; }
  .leiste__mikro.is-recording.is-diktat { animation: none; }
}

/* --- INU-866: Hinweis vor dem ersten Hochladen (Dialog-Rahmen aus feedback.css) --- */
.ahw__panel { max-width: 440px; }
.ahw__text { margin: 0 0 var(--sp-3); font-size: 15px; line-height: 1.5; color: var(--v-ink, var(--c-neutral-900)); }
.ahw__schutz {
  margin: 0; padding: var(--sp-3); border-radius: var(--r-card);
  background: rgba(100, 80, 232, 0.07);
  font-size: 13.5px; line-height: 1.5; color: var(--c-neutral-700);
}
.ahw__schutz a { color: var(--c-brand-purple-500); font-weight: 600; }