/* Zettelkram — Chat am Zettel.
   Optik: Nachrichtenblasen wie man sie vom Messenger kennt (eigene rechts,
   fremde links), aber mit den Zettelkram-Tokens, damit Hell/Dunkel und die
   Themes automatisch mitgehen. Das Panel legt sich über die App; auf breiten
   Fenstern (Mac) sitzt es als Spalte rechts, auf dem Phone füllt es alles.

   Höhe hängt an --vv-h (visualViewport, gesetzt in app.js): so bleibt die
   Eingabezeile beim Aufklappen der iOS-Tastatur sichtbar, statt darunter zu
   rutschen. */

/* ── Der Chat-Abschnitt im Zettel ────────────────────────── */
/* Sitzt als letztes Kind von #view-editor unter dem Zettelinhalt. Die
   Kopfzeile ist immer da, Verlauf und Eingabezeile klappen auf. Aufgeklappt
   nimmt der Abschnitt einen festen Anteil der Ansicht; #view-editor hat eine
   feste Höhe (--vv-h), deshalb rechnet die Prozentangabe sauber und folgt
   der iOS-Tastatur. Der Zettel darüber (.editor-card, flex:1, overflow
   hidden) schrumpft entsprechend. */
.zkc-inline {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.zkc-inline[hidden] { display: none; }
.zkc-inline.open {
  /* + Safe-Bottom, weil die Ansicht ihre Reserve unten an den Chat abgibt
     (#view-editor.zkc-open): ohne den Zuschlag bekäme der Zettel darüber die
     gewonnenen Pixel und der Verlauf würde um die Höhe kleiner, die die
     Eingabezeile jetzt als Innenrand trägt. */
  height: calc(48% + var(--safe-bottom));
  min-height: 220px;
}
/* Ganze Seite: der Zettel darüber wird ausgeblendet, der Chat füllt den
   Rest. NICHT height:100% — das rechnet gegen die volle Höhe der Ansicht,
   nicht gegen den Platz UNTER der Kopfleiste, und schob die Eingabezeile aus
   dem Bild. Die Kopfleiste mit dem Zurück-Knopf bleibt stehen, man kommt
   also immer wieder heraus. */
.zkc-inline.open.full {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
#view-editor.zkc-full .editor-card { display: none; }
#view-editor.zkc-full .zkc-inline { border-top: 0; }
/* Bündig bis zur Kante, solange der Chat offen ist (Jens 29.08.2026: „der
   nutzlose Platz zwischen Tastatur und Eingabezeile"). `.view` reserviert
   unten die Home-Indicator-Zone (--safe-bottom, ~34 px) — im Zettel ist das
   gewollt, unter einer Eingabezeile ist es ein toter Streifen. Die Reserve
   wandert deshalb IN die Eingabezeile (s. .zkc-composer): die Zeile selbst
   bleibt über dem Indicator, der Platz darunter gehört ihrem Hintergrund
   statt dem Nichts, und der Verlauf wird um dieselbe Höhe größer. */
#view-editor.zkc-open { padding-bottom: 0; }
/* Bei offener Tastatur bleibt weniger Platz — dann darf der Verlauf kleiner
   werden, die Eingabezeile ist dann das Wichtige. */
html.kb-open .zkc-inline.open { height: 42%; min-height: 150px; }
html.kb-open .zkc-inline.open.full { height: auto; }

.zkc-inline-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px 6px 14px;
  color: var(--text);
}
/* Der linke Teil ist der Knopf zum Auf- und Zuklappen. */
.zkc-head-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.zkc-head-main:active { opacity: 0.6; }

/* Drei Schalter: Leiste / halbe Höhe / ganze Seite. Der aktuelle Zustand
   ist gefüllt — man sieht also immer, wo man steht, statt es zu erraten. */
.zkc-size-seg {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: var(--field);
}
.zkc-seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 5px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}
.zkc-seg-btn.is-on {
  background: var(--sheet-cancel-bg);
  color: var(--accent-text);
}
.zkc-seg-btn:active { background: var(--sheet-active); }
.zkc-inline-title { font-size: 14px; font-weight: 600; flex: 0 0 auto; }
.zkc-inline-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zkc-inline-badge {
  flex: 0 0 auto;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.zkc-inline-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.zkc-inline-body[hidden] { display: none; }

/* ── Kopfzeile (nur noch die Chat-Übersicht) ─────────────── */
.zkc-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex: 0 0 auto;
}
.zkc-bar button {
  background: none;
  border: 0;
  color: var(--text);
  padding: 7px;
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.zkc-bar button:active { background: var(--sheet-active); }
.zkc-title { flex: 1 1 auto; min-width: 0; }
.zkc-title-main {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zkc-title-sub {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Verlauf ─────────────────────────────────────────────── */
.zkc-log {
  flex: 1 1 auto;
  /* Eigener Grund, damit sich die fremden Blasen (--bg-card) davon abheben —
     der Abschnitt selbst liegt auf --bg-card, sonst verschwände die Blase. */
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.zkc-day {
  align-self: center;
  margin: 10px 0 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  background: var(--sheet-cancel-bg);
  color: var(--text-dim);
  font-size: 11px;
}

.zkc-more {
  align-self: center;
  margin-bottom: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.zkc-empty {
  margin: auto;
  padding: 24px 18px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Nachrichtenblasen ───────────────────────────────────── */
.zkc-msg {
  max-width: 78%;
  padding: 7px 10px 5px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.35;
  word-break: break-word;
  position: relative;
}
.zkc-msg.other {
  align-self: flex-start;
  background: var(--bg-card);
  border-bottom-left-radius: 5px;
}
.zkc-msg.own {
  align-self: flex-end;
  background: #2f5d3f;                 /* gedämpftes Grün wie im Messenger */
  border-bottom-right-radius: 5px;
}
html[data-theme="light"] .zkc-msg.own { background: #d6f0c8; color: #17361f; }
html[data-theme="light"] .zkc-msg.own .zkc-meta { color: #4f6b53; }

.zkc-msg.pending { opacity: 0.62; }
.zkc-msg.failed { outline: 1px solid var(--danger); }
.zkc-msg.gone { opacity: 0.7; }

.zkc-who {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: 2px;
}
.zkc-text { white-space: pre-wrap; }
.zkc-gone { font-style: italic; color: var(--text-dim); }

.zkc-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-dim);
}
.zkc-tick { font-size: 10.5px; letter-spacing: -1px; }
.zkc-tick.read { color: #4aa3ff; letter-spacing: -1px; }
.zkc-tick.fail { color: var(--danger); letter-spacing: 0; }

/* ── Anhänge in der Blase ────────────────────────────────── */
.zkc-msg img.zkc-att-img {
  display: block;
  max-width: 100%;
  width: 240px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 4px;
  background: var(--field);
  min-height: 90px;
}
.zkc-msg a.zkc-att-file {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--field);
  color: inherit;
  text-decoration: none;
}
.zkc-file-ic { font-size: 20px; flex: 0 0 auto; }
.zkc-file-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
}
.zkc-file-txt em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Menü an einer eigenen Nachricht (Langdruck) ─────────── */
.zkc-msg-menu {
  position: fixed;
  right: 16px;
  z-index: 1450;
  background: var(--sheet-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.zkc-msg-menu button {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.zkc-msg-menu button:active { background: var(--sheet-active); }

/* ── Eingabezeile ────────────────────────────────────────── */
.zkc-composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
/* Tastatur offen → die Reserve fällt ganz weg, die Zeile sitzt auf der
   Tastatur auf. `kb-open` kommt aus der visualViewport-Heuristik in app.js;
   `zkc-typing` setzt chat.js beim Fokus im Eingabefeld — auf dem Phone ist
   das der sichere Beweis, dass die Tastatur oben ist, ganz ohne Messung. */
html.kb-open .zkc-composer,
html.zkc-typing .zkc-composer { padding-bottom: 8px; }

.zkc-composer button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--sheet-cancel-bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.zkc-composer .zkc-send {
  background: var(--accent);
  color: #2b2200;
}
.zkc-composer .zkc-send:disabled { opacity: 0.4; }

.zkc-input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  max-height: 140px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 15px;         /* < 16px lässt iOS beim Fokus hineinzoomen */
  line-height: 1.3;
}
.zkc-input:focus { outline: none; border-color: var(--text-dim); }

.zkc-attach-menu {
  position: absolute;
  left: 10px;
  bottom: 58px;
  background: var(--sheet-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 2;
}
.zkc-attach-menu button {
  display: block;
  width: 100%;
  padding: 11px 18px;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.zkc-attach-menu button:active { background: var(--sheet-active); }

.zkc-busy {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

/* ── Meldung außerhalb des Chats ─────────────────────────── */
/* Kommt eine Nachricht an, während man woanders ist: antippbare Karte oben,
   die in den Chat springt. */
.zkc-banner {
  position: fixed;
  top: calc(8px + var(--safe-top));
  left: 10px;
  right: 10px;
  max-width: 460px;
  margin: 0 auto;
  z-index: 1500;
  padding: 10px 14px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--hairline);
  background: var(--sheet-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  cursor: pointer;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.zkc-banner.show { transform: translateY(0); opacity: 1; }
.zkc-banner-who {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: 2px;
}
.zkc-banner-who span { color: var(--text-dim); font-weight: 400; }
.zkc-banner-txt {
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Chat-Knopf in der Editor-Leiste ─────────────────────── */
#chat-btn { position: relative; }
#chat-btn.has-unread { color: var(--accent-text); }
#chat-btn .chat-badge {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}

/* ── Ungelesen-Zeichen auf der Zettel-Karte ──────────────── */
.visibility-marks .vm-chat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
  /* .visibility-marks ist insgesamt klick-durchlässig; dieses eine Zeichen
     soll aber antippbar sein — Tap springt direkt in den Chat. */
  pointer-events: auto;
  cursor: pointer;
}
.visibility-marks .vm-chat svg { width: 13px; height: 13px; }

/* ── Übersicht: alle Chats ───────────────────────────────── */
/* Der Einstieg, wenn man nicht weiß, in welchem Zettel etwas steht:
   ein Zettel je Zeile, neueste zuerst, mit Vorschau und Ungelesen-Zahl. */
.zkc-rows {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--safe-bottom);
}
.zkc-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.zkc-row:active { background: var(--sheet-active); }
.zkc-row-top,
.zkc-row-bottom {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}
.zkc-row-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zkc-row-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-dim);
}
.zkc-row-prev {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zkc-row-badge {
  flex: 0 0 auto;
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
/* Die Übersicht liegt unter dem Chat-Panel: tippt man eine Zeile an, legt
   sich der Verlauf darüber. */
/* Die Übersicht ist das einzige, was noch als eigenes Fenster aufgeht —
   der Verlauf selbst sitzt im Zettel. Höhe an --vv-h, damit sie der
   iOS-Tastatur folgt wie der Rest der App. */
.zkc-list-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--vv-h, 100%);
  z-index: 1390;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  padding-top: var(--safe-top);
}
.zkc-list-panel[hidden] { display: none; }

@media (min-width: 900px) {
  .zkc-list-panel {
    left: auto;
    width: 420px;
    border-left: 1px solid var(--border);
    box-shadow: -18px 0 46px rgba(0, 0, 0, 0.35);
  }
}

/* Hinweiszeile im Lösch-Menü (Empfänger dürfen nicht) — als Text lesbar,
   nicht als toter Knopf. */
.zkc-msg-menu button[disabled] {
  color: var(--text-dim);
  font-size: 12.5px;
  max-width: 260px;
  white-space: normal;
  cursor: default;
}

/* ── Vorschau auf dem Brett: Zettel, in dem nur gechattet wird ──── */
.note-card-chat-preview {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  height: 100%;
}
.note-card-chat-preview .nccp-line {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
.note-card-chat-preview .nccp-when {
  font-size: 11px;
  opacity: 0.65;
}

/* ── Nachfrage nach Mitteilungen (im Chat, wo es zählt) ─────────── */
.zkc-ask {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  background: var(--sheet-cancel-bg);
  font-size: 12.5px;
  line-height: 1.35;
}
.zkc-ask-txt { flex: 1 1 190px; min-width: 0; }
.zkc-ask-btns { flex: 0 0 auto; display: flex; gap: 6px; }
.zkc-ask button {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #2b2200;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.zkc-ask button[data-ask="spaeter"] {
  background: transparent;
  color: var(--text-dim);
  font-weight: 400;
}