/* =====================================================================
   chat.css — Dediziertes, isoliertes Layout für die Route /app/dm/chat.
   Wird in index.html ALS LETZTE Stylesheet geladen und ist damit die
   alleinige Quelle der Wahrheit fürs Chat-Layout (überschreibt Alt-Regeln
   in components.cleaned.css).

   Designziele (wie ein gewöhnlicher Messenger, z. B. WhatsApp):
   • Vollflächige Flex-Spalte: fixe Sticky-Zone oben, scrollende Liste,
     Eingabe immer unten.
   • Footer läuft NORMAL im Fluss (kein position:fixed) → kann nichts
     verdecken; wächst der Footer (Antwort/Edit/„schreibt …"/mehrzeilig),
     schrumpft die Liste automatisch.
   • Höhe via 100dvh, KEIN JS: iOS Safari verkleinert das Layout-Viewport beim
     Tastatur-Öffnen nativ (interactive-widget=resizes-content) → 100dvh schrumpft
     mit, die Eingabe bleibt sauber über der Tastatur. (Auf echtem iOS verifiziert.)
   • Neue Nachrichten verankern unten; wenig Inhalt klebt unten.
   ===================================================================== */

/* ---- Grundgerüst -------------------------------------------------------- */
.chat-page{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Höhe = sichtbares Viewport via 100dvh, KEIN JS. iOS Safari verkleinert dank
     interactive-widget=resizes-content (viewport-Meta) das Layout-Viewport beim
     Tastatur-Öffnen nativ -> 100dvh schrumpft mit, die Eingabe bleibt drüber.
     (Auf echtem iOS-Gerät verifiziert — die JS-Varianten haben nur geruckelt.) */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Platz für die fixierte Sticky-Zone der Shell (Header + TopMenu). */
  padding-top: calc(var(--shell-sticky-h, 110px) + env(safe-area-inset-top, 0px));
  overflow: hidden;
}

/* Nachrichtenliste = einziger Scrollbereich, füllt den Raum zwischen
   Sticky-Zone und Eingabe. min-height:0 erlaubt Schrumpfen im Flex. */
.chat-messages{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 12px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}
/* Wenige Nachrichten unten verankern (WhatsApp-Verhalten). Die auto-Marge
   wird bei Überlauf zu 0 → normales Scrollen, oberste Nachricht erreichbar. */
.chat-messages > *:first-child{ margin-top: auto; }

.chat-messages::-webkit-scrollbar{ width: 6px; }
.chat-messages::-webkit-scrollbar-track{ background: transparent; }
.chat-messages::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.30); border-radius: 6px; }
.chat-messages::-webkit-scrollbar-button{ display: none; width: 0; height: 0; }

/* Tages-Trenner */
.day-separator{
  align-self: center;
  flex: 0 0 auto;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  padding: 4px 10px;
  margin: 12px 0 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}

/* ---- Nachrichten-Zeilen + Bubbles -------------------------------------- */
.message-row{
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}
.message-row.own-row{ justify-content: flex-end; }
.message-row.other-row{ justify-content: flex-start; }

.message{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  max-width: 80%;
  padding: 0.5rem 0.65rem;
  border-radius: 14px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  text-align: left;
  transition: transform 180ms ease, background-color 240ms ease;
  touch-action: pan-y;
}
.message.own{
  align-self: flex-end;
  background-color: var(--color-chat-own, #6c3fd6);
  color: var(--color-text, #fff);
  border-bottom-right-radius: 4px;
}
.message.other{
  align-self: flex-start;
  background-color: var(--color-chat-other, #2a1d4d);
  color: var(--color-text, #fff);
  border-bottom-left-radius: 4px;
}
.message.is-swiping{ transition: none; }

.msg-time{
  font-size: 11px;
  opacity: .65;
  margin-bottom: 2px;
  color: var(--color-chat-time, rgba(255,255,255,.7));
}
.msg-content{ font-size: 1rem; white-space: pre-line; word-break: break-word; }
.msg-content[hidden]{ display: none; }
.msg-edited{ font-size: 10px; opacity: .55; margin-top: 3px; }

/* Swipe-to-Reply-Indikator (liegt seitlich, sichtbar beim Wischen). */
.msg-swipe-indicator{
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary, #8a4fff);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.7);
  transition: opacity 120ms ease, transform 120ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.message-row.own-row   > .msg-swipe-indicator{ right: 8px; }
.message-row.other-row > .msg-swipe-indicator{ left: 8px; }

.message.flash-highlight{ animation: msg-flash 1200ms ease; }
@keyframes msg-flash{
  0%   { background-color: rgba(138,79,255,.45); }
  100% { background-color: transparent; }
}

/* ---- Reply-Zitat innerhalb der Bubble ---------------------------------- */
.message .msg-reply-quote{
  display: block;
  border-left: 3px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.18);
  padding: 6px 8px;
  margin: 0 0 6px;
  border-radius: 6px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.85rem;
}
.message .msg-reply-quote[hidden]{ display: none; }
.message .msg-reply-quote .quote-author{
  display: block;
  font-weight: 600;
  font-size: 0.78rem;
  opacity: .9;
  color: var(--color-primary, #8a4fff);
  margin-bottom: 2px;
}
.message.own .msg-reply-quote .quote-author{ color: rgba(255,255,255,.92); }
.message .msg-reply-quote .quote-text{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
  word-break: break-word;
  opacity: .9;
}
.message .msg-reply-quote.is-deleted .quote-text{ font-style: italic; opacity: .55; }

/* ---- Geteilter Beitrag innerhalb der Bubble ---------------------------- */
.message .msg-shared-post{
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--color-primary, #8a4fff);
  background: rgba(0,0,0,.18);
  padding: 6px 8px;
  margin: 0 0 6px;
  border-radius: 6px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.85rem;
}
.message .msg-shared-post[hidden]{ display: none; }
.message .msg-shared-post.has-image{ flex-direction: row; align-items: center; gap: 8px; }
.message .msg-shared-post .shared-post-thumb{
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,.08);
}
.message .msg-shared-post .shared-post-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.message .msg-shared-post .shared-post-tag{
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--color-primary, #8a4fff);
  opacity: .95;
}
.message.own .msg-shared-post .shared-post-tag{ color: rgba(255,255,255,.92); }
.message .msg-shared-post .shared-post-region{
  font-size: 0.74rem;
  opacity: .75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.message .msg-shared-post .shared-post-text{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
  word-break: break-word;
  opacity: .92;
}
.message .msg-shared-post.is-note{ display: block; cursor: default; font-style: italic; opacity: .6; }
.message .msg-shared-post.is-note.is-note-link{ cursor: pointer; opacity: .75; }

/* ---- DM-Bild-Nachricht (Bubble-Thumbnail) ------------------------------ */
.message .msg-image{ margin: 0 0 6px; border-radius: 10px; overflow: hidden; max-width: 100%; }
.message .msg-image[hidden]{ display: none; }
.message .msg-image .dm-image-thumb{
  display: block;
  width: 100%;
  max-width: 240px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(255,255,255,.06);
}
.message .msg-image.is-unavailable{
  min-width: 160px; min-height: 90px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.20);
}
/* Reine Bild-Nachricht: das Thumbnail IST die Bubble (randlos). */
.message.dm-image-only{ padding: 0; background: transparent; position: relative; overflow: hidden; }
.message.dm-image-only .msg-image{ margin: 0; border-radius: 0; }
.message.dm-image-only .msg-image .dm-image-thumb{ max-width: 280px; max-height: 380px; border-radius: 0; }
.message.dm-image-only .msg-time{
  position: absolute; top: 8px; left: 8px; z-index: 2;
  margin: 0; padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

/* ---- DM-Bild Vollbild-Viewer (an <body>) ------------------------------- */
.dm-image-viewer{
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(2px);
}
.dm-image-viewer img{ max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

/* ---- DM-Medien-Übersicht (Modal) --------------------------------------- */
.dm-media-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dm-media-month{ grid-column: 1 / -1; margin: 10px 0 2px; font-size: 0.8rem; font-weight: 600; opacity: .8; }
.dm-media-cell{
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0; border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background-color: rgba(255,255,255,.06);
  background-size: cover;
  background-position: center;
}
.dm-media-cell.is-unavailable{ cursor: default; }
.dm-media-date{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 6px;
  font-size: 0.66rem;
  color: #fff;
  text-align: right;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}

/* ---- Bildaustausch-Einwilligung: Karte im Verlauf ---------------------- */
.dm-consent-card{
  align-self: center;
  flex: 0 0 auto;
  width: 100%;
  max-width: 460px;
  margin: 12px auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(138,79,255,.12);
  border: 1px solid rgba(138,79,255,.32);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
}
.dm-consent-title{ font-weight: 600; font-size: 0.9rem; color: var(--color-primary, #8a4fff); }
.dm-consent-body{ font-size: 0.86rem; line-height: 1.35; opacity: .92; }
.dm-consent-actions{ display: flex; gap: 10px; justify-content: center; margin-top: 2px; }

/* ---- Footer / Eingabezeile --------------------------------------------- */
#chat-footer{
  flex: 0 0 auto;
  display: block;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(20,10,40,.55);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

#chat-inputrow{ display: flex; gap: 10px; align-items: flex-end; }

#chat-inputrow textarea{
  flex: 1;
  margin: 0;
  padding: 0.65rem 0.95rem;
  border: none;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  color: var(--color-text, #fff);
  font-size: 1rem;
  line-height: 1.4rem;
  white-space: pre-wrap;
  word-break: break-word;
  resize: none;
  overflow-y: auto;
  max-height: calc(1.4rem * 5 + 1.3rem);   /* ~5 Zeilen, dann scrollen */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}
#chat-inputrow textarea::-webkit-scrollbar{ width: 5px; }
#chat-inputrow textarea::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.30); border-radius: 5px; }
#chat-inputrow textarea::-webkit-scrollbar-button{ display: none; width: 0; height: 0; }

/* Senden-Button (Display NICHT setzen — wird per JS im Edit-Modus getoggelt). */
#send-button{
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.65rem 1.15rem;
  border: none;
  border-radius: 22px;
  background: var(--color-primary, #8a4fff);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .12s;
}
#send-button:hover{ background: var(--color-primary-hover, #a06bff); }
#send-button:active{ transform: scale(.95); }

/* Bild-Button (Display NICHT setzen — wird per JS getoggelt). */
.dm-image-btn{
  flex: 0 0 auto;
  width: 44px; height: 44px;
  padding: 0;
  font-size: 1.25rem; line-height: 1;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: var(--color-text, #fff);
  cursor: pointer;
  transition: background .2s, transform .12s;
}
.dm-image-btn:hover{ background: rgba(255,255,255,.18); }
.dm-image-btn:active{ transform: scale(.92); }
.dm-image-btn:disabled{ opacity: .5; cursor: default; }

/* Edit-Leiste (Display NICHT setzen — Initial via Inline-style, JS toggelt). */
#chat-editbar{ margin: 0 0 8px; }
#chat-editbar .editbar-actions{ display: flex; gap: 10px; align-items: center; justify-content: space-between; }
#chat-editbar .btn{ padding: 8px 12px; }

/* Reply-Leiste (per Klasse getoggelt). */
#chat-replybar{
  display: none;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,.06);
  border-left: 3px solid var(--color-primary, #8a4fff);
  border-radius: 8px;
  max-width: 100%;
  overflow: hidden;
}
#chat-replybar.is-active{ display: flex; }
#chat-replybar .reply-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#chat-replybar .reply-author{ font-size: 0.78rem; font-weight: 600; color: var(--color-primary, #8a4fff); }
#chat-replybar .reply-text{
  font-size: 0.85rem; opacity: .85;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%;
}
#chat-replybar .reply-close{
  flex-shrink: 0;
  background: transparent; border: 0;
  color: var(--color-text, #fff);
  cursor: pointer; font-size: 1rem;
  padding: 4px 8px; border-radius: 6px;
}
#chat-replybar .reply-close:hover{ background: rgba(255,255,255,.08); }

/* „… schreibt …" als Bubble UNTEN in der Liste (wie WhatsApp/iMessage) — liegt
   in der scrollbaren Liste, ändert also NICHT die Footer-Höhe und schubst nichts. */
.message.typing-bubble{ padding: 0.7rem 0.85rem; }
.typing-row{ animation: typing-in 160ms ease; }
.typing-dots{ display: inline-flex; gap: 4px; align-items: center; }
.typing-dots i{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  animation: dm-typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots i:nth-child(2){ animation-delay: .15s; }
.typing-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes dm-typing-bounce{
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes typing-in{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Verstecktes Datei-Input fürs Bildsenden. */
#dm-image-file{ display: none; }