/* KMTechnik Hub — Hub-Assistent (AGT, Baulauf 26.08.2026). Eigenes Stylesheet
   (app.css gehört dem W22-Agenten) — Farben/Radien aus tokens.css.
   Mobile-first 360–430 px: kein H-Scroll, Eingabezeile IMMER über der Bottombar
   (Safe-Area beachtet), moderner Messenger-Stil im KMTechnik-Hub-Look. */

/* ---------- Chatliste ---------- */
.as-limit { margin: 6px 4px 0; }
.as-zeile-kontext { color: var(--akzent); font-weight: 600; }
.badge.as-laeuft { border-color: var(--akzent); color: var(--akzent); }
.as-limit-chip { display: block; width: 100%; text-align: left; }

/* ---------- Kontext-Kopf („📁 Arbeitet in: …") ---------- */
.as-kontext {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px;
  text-align: left; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--akzent); background: var(--bg-panel);
  border: 1px solid var(--akzent); border-radius: 10px; padding: 8px 12px;
  cursor: pointer; overflow-wrap: anywhere;
}

/* ---------- Verlauf ---------- */
.as-verlauf {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 0 12px; min-height: 30vh; max-height: 54vh; overflow-y: auto;
  overscroll-behavior: contain;
}
@supports (height: 100dvh) {
  /* Kopf (~150px) + Eingabe (~90px) + Bottombar (~80px) → Rest für den Verlauf */
  .as-verlauf { max-height: calc(100dvh - 330px); }
}
@media (min-width: 901px) {
  .as-verlauf { max-height: calc(100vh - 300px); }
}

.as-leerhinweis {
  color: var(--text-dim); font-size: 14px; text-align: center;
  padding: 28px 16px; overflow-wrap: anywhere;
}

.as-blase {
  max-width: 86%; align-self: flex-start;
  background: var(--bg-panel); border: 1px solid var(--rand);
  border-radius: 14px 14px 14px 4px; padding: 9px 12px;
  overflow-wrap: anywhere; min-width: 0;
}
.as-blase.meins {
  align-self: flex-end; background: var(--akzent); color: #fff;
  border-color: var(--akzent); border-radius: 14px 14px 4px 14px;
}
.as-text { font-size: 14px; line-height: 1.45; }
.as-md { white-space: pre-wrap; }
.as-zeit { font-size: 10px; opacity: 0.6; margin-top: 4px; text-align: right; }

/* Deep-Link-Chips im Antworttext */
.as-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  margin: 3px 4px 3px 0; padding: 4px 10px; font: inherit; font-size: 13px;
  color: var(--akzent); background: var(--bg); border: 1px solid var(--akzent);
  border-radius: 999px; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.as-blase.meins .as-chip { color: #fff; background: transparent; border-color: rgba(255,255,255,0.7); }

/* Quittungszeile ausgeführter Schreibaktionen */
.as-aktionen { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--rand); font-size: 12px; }
.as-aktionen-titel { color: var(--text-dim); margin-right: 4px; }
.as-aktion-text { color: var(--text-dim); }

.as-anhang-hinweis { font-size: 12px; opacity: 0.85; margin-bottom: 3px; }
.as-blase-bilder { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.as-blase-bild { max-width: 160px; max-height: 160px; border-radius: 10px; display: block; }

/* Busy-Blase („🤖 Ich arbeite …") */
.as-busy { border-style: dashed; }
.as-busy-zeile { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.as-busy-hinweis { margin-top: 5px; font-size: 12px; color: var(--text-dim); }
.as-busy-hinweis.versteckt { display: none; }

/* Archiv-Hinweis statt Eingabezeile */
.as-archiv-hinweis {
  margin: 8px 0; padding: 10px 14px; font-size: 13px; color: var(--text-dim);
  background: var(--bg-panel); border: 1px dashed var(--rand); border-radius: 12px;
}

/* ---------- Eingabezeile ----------
   Sticky wie das Chat-Muster, aber mit Offset ÜBER der Bottombar (mobil) —
   die fixe Bottombar (≈70px + Safe-Area) darf die Eingabe nie überdecken.
   Beim Öffnen der Tastatur scrollt der Browser das fokussierte Feld sichtbar. */
.as-eingabe {
  position: sticky; bottom: 8px; z-index: 15;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-panel); border: 1px solid var(--rand);
  border-radius: 16px; padding: 8px 10px; box-shadow: var(--schatten);
}
@media (max-width: 900px) {
  .as-eingabe { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

.as-zeile-unten { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.as-ta {
  flex: 1; min-width: 0; resize: none; max-height: 120px;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--rand);
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px;
  line-height: 1.4;
}
.as-w {
  flex: none; width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 17px;
}
/* WICHTIG width:auto + margin-top:0 — .knopf (app.css) ist der Login-Vollbreite-Knopf
   (width:100%); ohne Override quetschte der Senden-Knopf das Textfeld auf 1 Zeichen
   und ragte aus dem Bildschirm (Dominik-Screenshot 27.08. 05:41). */
.as-senden { flex: none; width: auto; margin-top: 0; height: 38px; min-width: 46px; font-size: 16px; }

/* sehr schmale Geräte (360px): Werkzeuge kompakter, damit nichts umbricht */
@media (max-width: 380px) {
  .as-w { width: 34px; height: 34px; font-size: 15px; }
  .as-senden { min-width: 40px; height: 34px; }
}

/* Anhang-Thumbnails über der Eingabe (entfernbar) */
.as-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.as-thumbs.versteckt { display: none; }
.as-thumb { position: relative; }
.as-thumb-bild { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; display: block; border: 1px solid var(--rand); }
.as-thumb-doc {
  display: flex; align-items: center; gap: 5px; max-width: 140px;
  height: 54px; box-sizing: border-box; padding: 0 8px;
  background: var(--bg); border: 1px solid var(--rand); border-radius: 10px; font-size: 12px;
}
.as-thumb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-thumb-weg {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; border: 1px solid var(--rand);
  background: var(--bg-panel); color: var(--text); font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Upload-Lauf-Kacheln (P2) landen im eigenen Kasten über den Thumbs */
.as-uploadbox:empty { display: none; }

/* 🤖-Kontext-Knopf in fremden Kopfzeilen (Projektakte/KD-Vorgang/Protokoll) */
.as-kontext-knopf { font-size: 15px; }