/* Reusable image-attach widget (public/message-images.js). Mirrors the .fb-thumb
   look from feedback.css under an .mi- prefix so both pipelines can evolve
   independently without a shared, riskier-to-touch stylesheet dependency. */

.mi-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0;
}
.mi-images.is-empty { margin: 0; }

.mi-thumb {
  position: relative;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface2);
  overflow: hidden;
  padding: 0;
}
.mi-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mi-thumb img[data-mi-zoom] { cursor: zoom-in; }
.mi-thumb-placeholder { display: grid; place-items: center; height: 100%; font-size: 1.2rem; opacity: 0.5; }
.mi-thumb.is-processing img,
.mi-thumb.is-uploading img { opacity: 0.55; }
.mi-thumb.is-error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }

.mi-thumb-progress {
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  bottom: 0.3rem;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.mi-thumb-progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width var(--motion-fast) linear;
}

.mi-thumb-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  background: rgba(15, 15, 15, 0.82);
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
  font-size: var(--text-xs);
  line-height: 1.2;
  text-align: center;
}

.mi-thumb-edit,
.mi-thumb-remove {
  position: absolute;
  top: 0.15rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--text-xs);
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
/* No ::after hit-area expansion here (unlike .mi-attach-btn/feedback.css's
   .fb-thumb-remove): the two icons sit edge-to-edge in the thumbnail's top
   corner (only ~0.2rem apart) — an invisible expanded tap zone would overlap
   between them and make mis-taps worse, not better. Sized up as far as that
   constraint allows instead of the full 44px target. */
.mi-thumb-edit { right: 1.65rem; }
.mi-thumb-remove { right: 0.15rem; }
/* Touch-R4: Hover hinter der Touch-Weiche (klebte nach dem Tipp); Druck
   fuer Finger und Maus gleich. */
html:not(.using-touch) .mi-thumb-edit:hover,
html:not(.using-touch) .mi-thumb-remove:hover { background: rgba(0, 0, 0, 0.75); }
.mi-thumb-edit:active,
.mi-thumb-remove:active,
html:not(.using-touch) .mi-thumb-edit:active,
html:not(.using-touch) .mi-thumb-remove:active { background: rgba(0, 0, 0, 0.85); }
.mi-thumb-edit:focus-visible,
.mi-thumb-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Images attached to a sent conversation message (read-only, not the composer). */
.conv-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.conv-image-link {
  display: block;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 1px solid var(--border);
  /* Der Alt-Text ("Angehaengtes Bild" bei abgelaufenen Anhaengen) erbte die
     UA-Linkfarbe #0000EE = 1.65:1. styles.css hat inzwischen eine globale
     a-Regel; hier steht sie nochmal explizit, weil die Kachel ihren eigenen
     dunklen Grund mitbringt. */
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.2;
  text-decoration: none;
}
/* overflow:hidden schneidet den globalen Fokusring (outline-offset: 2px) ab —
   derselbe Fall wie bei .purpose-chip und .quick-reply-chip-saved-wrap. */
.conv-image-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.conv-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inline chat composer docked at the bottom of .loan-conversation. Side/bottom
   padding matches .conv-list/.conv-empty/.conv-actions (0 0.75rem 0.75rem) —
   this rule only had the top spacing, so the field and buttons sat flush
   against the card's own border unlike every other section here. */
.conv-compose {
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem 0.75rem;
  border-top: 1px solid var(--border);
}
.conv-compose-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}
/* The .mi-field-wrap (textarea + its small attach button) is the flex item
   here, not the textarea itself. */
.conv-compose-row > .mi-field-wrap {
  flex: 1;
  /* Flex items default to min-width:auto (their own content/intrinsic
     width) — without this the textarea refused to shrink below that on
     narrow screens and pushed the send button past the card's edge. */
  min-width: 0;
}
.conv-compose-field {
  width: 100%;
  min-height: 2.4rem;
  resize: vertical;
}
.conv-compose-send {
  flex-shrink: 0;
}
.conv-compose-error {
  margin-top: 0.3rem;
}

/* Leihkarten R2 (M22): Messenger-Eingabezeile.
   - Feld wächst mit (app.js autoGrowComposeField), max. ~6 Zeilen, danach
     scrollt es selbst; kein Zieh-Griff mehr (resize).
   - Senden = runder 44-px-Knopf mit Pfeil: das Feld bekommt die Breite, die
     bisher der 89 px breite "Senden"-Text-Button belegte — auf dem iPhone SE
     brach der Platzhalter sonst um und wurde abgeschnitten.
   - Schnellantworten als EINE wischbare Chip-Reihe über dem Feld statt
     gestapelter Zeilen darunter. */
.conv-compose { margin-top: 0.4rem; padding: 0.55rem 0.6rem 0.65rem; }
.conv-compose-row { gap: 0.45rem; align-items: flex-end; }
.conv-compose-field {
  min-height: var(--touch-target, 44px);
  max-height: 9.5rem;
  resize: none;
  overflow-y: auto;
  border-radius: 22px;
  padding: 0.6rem 2.8rem 0.6rem 0.95rem;
  line-height: 1.4;
}
.conv-compose-field::placeholder { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.mi-field-wrap .conv-compose-field { padding-right: 2.8rem; }
.conv-compose .mi-attach-btn {
  right: 0.3rem;
  bottom: 0.3rem;
  width: 2.15rem;
  height: 2.15rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
}
.conv-compose .mi-attach-btn svg { display: block; }
.conv-compose-send {
  width: var(--touch-target, 44px);
  height: var(--touch-target, 44px);
  min-height: var(--touch-target, 44px);
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.conv-compose-send svg { display: block; }
.conv-compose > .quick-replies {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 -0.6rem 0.5rem;
  padding: 0.1rem 0.6rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0.6rem, #000 calc(100% - 1.2rem), transparent);
          mask-image: linear-gradient(to right, transparent 0, #000 0.6rem, #000 calc(100% - 1.2rem), transparent);
}
.conv-compose > .quick-replies::-webkit-scrollbar { display: none; }
.conv-compose > .quick-replies > * { flex-shrink: 0; }
.conv-compose > .mi-images:not(.is-empty) { margin: 0 0 0.5rem; }

/* Compact attach trigger: a small "+" pinned inside the field's own bottom
   right corner, instead of a large tile competing with the thumbnails for
   space. .mi-field-wrap is the positioning context; padding-right on the
   textarea keeps typed text from running under the button. */
.mi-field-wrap {
  position: relative;
}
/* Descendant, not direct-child: [data-char-counter] (app.js) wraps the
   textarea in its own .char-counter-row right after page load, nesting it
   one level deeper — a `>` selector here stopped matching once that ran. */
.mi-field-wrap textarea {
  padding-right: 2.6rem;
  /* Textareas are inline-level by default, so inside this block wrapper they
     sat on a line box with room reserved below the baseline for descenders —
     a few pixels the textarea's own border never used. .mi-field-wrap ended
     up that much taller than the textarea itself, and align-items: flex-end
     on .conv-compose-row (and any other row this sits in) bottom-aligned
     siblings to that phantom space instead of the field's visible edge —
     e.g. the send button sitting visibly lower than the input. */
  display: block;
}
/* confirmWithMessage() (app.js) hides .mi-attach-btn on the ~18 shared-dialog
   flows that don't pass an `images` config — this frees the padding-right
   the rule above reserves for it, so the field doesn't keep a dead gap on
   its right edge (matches .note-textarea's own side padding). */
.mi-field-wrap--no-attach textarea {
  padding-right: 0.9rem;
}
.mi-attach-btn {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface2);
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
/* Visible size stays compact (matches the field's own proportions), but the
   actual tap target reaches the app's --touch-target (44px) via an invisible
   expanded hit area — same idiom as feedback.css's .fb-thumb-remove. Unlike
   the thumb edit/remove pair, nothing sits close enough beside this button
   for the expansion to overlap another control. */
.mi-attach-btn::after { content: ""; position: absolute; inset: -0.6rem; }
/* A char-counter-row field (app.js data-char-counter init) moves this button
   into its own .char-counter-field-wrap alongside the textarea, so it keeps
   anchoring to the textarea alone — no counter-width offset needed here. */
html:not(.using-touch) .mi-attach-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.mi-attach-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* R4 Modals/Touch: "Bild anhängen" hatte keine Druck-Rückmeldung (der
   Hover-Akzent ist Maus-only). Gleiche Farbe beim Drücken, leicht einwärts. */
.mi-attach-btn { transition: var(--transition-ui); }
.mi-attach-btn:active {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(0.92);
  transition-duration: var(--motion-xs);
}
.mi-thumb-retry:active { opacity: 0.7; }
/* Eigener Druck → keine zusätzliche generische Dimmung (--press-opacity, Agent „Global“). */
.mi-attach-btn:active,
.mi-thumb-edit:active,
.mi-thumb-remove:active,
.mi-thumb-retry:active { --press-opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mi-attach-btn:active { transform: none; }
}