/* ================================================================
   KI-Assistent — Knopf ganz rechts in der Menüleiste und Chat-Leiste
   am rechten Bildschirmrand

   Dieselben zwei Fallen wie bei der Glocke (css/benachrichtigungen.css):
     * style.css `input, button, select { width: 100% }`
       → jeder Knopf hier setzt width/margin zurück.
     * .header hat overflow:hidden → der Knopf sitzt deshalb in .tabs.
   ================================================================ */

/* ---------- Knopf in der Menüleiste ---------- */

.ki-huelle {
  position: relative;
  display: flex;
  flex: none;
  align-self: flex-start;
  align-items: stretch;
  margin-left: 6px;
}

.ki-knopf {
  width: auto !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  line-height: 1;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  color: #4f46e5;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ki-knopf:hover {
  background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.18);
}

.ki-knopf[aria-expanded="true"] {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
}

.ki-knopf-icon { font-size: 16px; }

/* ---------- Leiste ---------- */

.ki-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  z-index: 9400;
  /* Am Desktop bleibt die Seite bedienbar: kein Backdrop */
  display: none;
}
/* Das Attribut muss die Handy-Regel (display:block) schlagen */
.ki-backdrop[hidden] { display: none !important; }

.ki-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 460px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
  transform: translateX(105%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9500;
  font-size: 14px;
  color: #1e293b;
}

.ki-drawer--offen { transform: translateX(0); }

/* Kopf */

.ki-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  flex: none;
}

.ki-kopf-titel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ki-kopf-icon { font-size: 22px; }
.ki-kopf-name { font-weight: 700; font-size: 15px; }
.ki-kopf-sub { font-size: 12px; opacity: 0.85; }
.ki-kopf-aktionen { display: flex; gap: 4px; flex: none; }

.ki-icon-btn {
  width: 34px !important;
  height: 34px;
  margin: 0 !important;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.ki-icon-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* Nachrichten */

.ki-nachrichten {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f8fafc;
}

.ki-leer {
  margin: auto 0;
  text-align: center;
  padding: 24px 12px;
  color: #475569;
}
.ki-leer-icon { font-size: 40px; margin-bottom: 8px; }
.ki-leer-titel { font-weight: 700; font-size: 17px; color: #1e293b; margin-bottom: 6px; }
.ki-leer-text { font-size: 13px; line-height: 1.5; }

.ki-msg { display: flex; flex-direction: column; max-width: 100%; }
.ki-msg--user { align-items: flex-end; }
.ki-msg--ki { align-items: stretch; }

.ki-blase {
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.ki-blase--user {
  max-width: 85%;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ki-blase--ki {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ki-blase--ki > :first-child { margin-top: 0; }
.ki-blase--ki > :last-child { margin-bottom: 0; }
.ki-blase--ki p { margin: 0 0 8px; }
.ki-blase--ki h2, .ki-blase--ki h3, .ki-blase--ki h4 {
  margin: 12px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.ki-blase--ki h2 { font-size: 15px; }
.ki-blase--ki ul, .ki-blase--ki ol { margin: 0 0 8px; padding-left: 20px; }
.ki-blase--ki li { margin: 2px 0; }
.ki-blase--ki code {
  background: #f1f5f9;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12.5px;
}
.ki-blase--ki pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 12.5px;
  margin: 0 0 8px;
}
.ki-blase--ki pre code { background: none; padding: 0; color: inherit; }

.ki-link {
  display: inline-block;
  color: #4f46e5;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed #a5b4fc;
}
.ki-link:hover { color: #7c3aed; border-bottom-style: solid; }

/* Tabellen in der Antwort */

.ki-tabelle-huelle {
  position: relative;
  margin: 6px 0 10px;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.ki-tabelle {
  width: auto !important;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 0;
}
.ki-tabelle th, .ki-tabelle td {
  padding: 6px 10px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}
.ki-tabelle th {
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
  position: sticky;
  top: 0;
}
.ki-tabelle tr:last-child td { border-bottom: none; }
.ki-tabelle td.ki-zahl { text-align: right; font-variant-numeric: tabular-nums; }

.ki-excel {
  width: auto !important;
  margin: 0 !important;
  padding: 3px 9px;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.ki-excel:hover { background: #e0e7ff; }

.ki-tabelle-fuss {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 10px;
}

/* Diagramme */

.ki-chart {
  position: relative;
  height: 220px;
  margin: 6px 0 10px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.ki-chart-fehler { color: #94a3b8; font-size: 12px; padding: 8px; }

/* Anhänge (Werkzeug-Ergebnisse) */

.ki-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ki-anhaenge:empty { display: none; }

.ki-anhang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  color: #475569;
}
.ki-anhang-n { color: #94a3b8; }

/* Ablauf-Assistent: Modus-Leiste + Entwurf-Karte */

.ki-modus {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  background: #f5f3ff;
  border-bottom: 1px solid #e9e5ff;
  color: #4c1d95;
  font-size: 13px;
  flex: none;
}
.ki-modus[hidden] { display: none; }
.ki-modus b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-modus .ki-icon-btn { background: transparent; color: #6d28d9; width: 28px !important; height: 28px; }
.ki-modus .ki-icon-btn:hover { background: #ede9fe; }

.ki-entwurf {
  flex: 1 1 100%;
  padding: 12px 14px;
  border: 1px solid #c4b5fd;
  border-radius: 14px;
  background: #faf9ff;
}
.ki-entwurf-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-weight: 700; font-size: 14px; color: #1e293b; }
.ki-entwurf-kopf .ki-anhang-n { font-weight: 500; font-size: 12px; }
.ki-entwurf-text { margin-top: 4px; color: #475569; font-size: 13px; }
.ki-entwurf-schritte { margin: 8px 0 10px 20px; padding: 0; font-size: 13px; }
.ki-entwurf-schritte li { margin: 2px 0; }
.ki-entwurf-team { color: #6d28d9; font-size: 12px; margin-left: 4px; }
.ki-entwurf-btn {
  width: auto !important;
  margin: 0 !important;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.ki-entwurf-hinweis { margin-top: 6px; font-size: 12px; color: #94a3b8; }

/* Status */

.ki-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12.5px;
  align-self: flex-start;
}

.ki-punkte { display: inline-flex; gap: 3px; }
.ki-punkte i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #6366f1;
  animation: ki-puls 1.2s infinite ease-in-out;
}
.ki-punkte i:nth-child(2) { animation-delay: 0.15s; }
.ki-punkte i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ki-puls {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Vorschläge */

.ki-chips {
  flex: none;
  padding: 8px 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #f8fafc;
}
.ki-chips[hidden] { display: none; }
.ki-chips-titel { width: 100%; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }

.ki-chip {
  width: auto !important;
  margin: 0 !important;
  padding: 6px 11px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #fff;
  color: #4338ca;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
}
.ki-chip:hover { background: #eef2ff; border-color: #a5b4fc; }

/* Eingabe */

.ki-eingabe {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 8px;
  background: #f8fafc;
  border-top: 1px solid #eef2f7;
}

.ki-eingabe textarea {
  flex: 1 1 auto;
  width: auto !important;
  margin: 0 !important;
  min-height: 44px;
  max-height: 160px;
  padding: 11px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ki-eingabe textarea:focus { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.ki-eingabe textarea:disabled { background: #f1f5f9; color: #94a3b8; }

.ki-senden {
  width: 44px !important;
  height: 44px;
  margin: 0 !important;
  flex: none;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}
.ki-senden:hover { opacity: 0.9; }
.ki-senden--stopp { background: #dc2626; }

.ki-fuss {
  flex: none;
  padding: 0 16px 10px;
  background: #f8fafc;
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
}

/* ---------- Schmale Bildschirme ----------
   Die Menüleiste bricht dort um; der Knopf wird wie die Glocke eine
   volle Zeile im Klappmenü, die Leiste nimmt den ganzen Bildschirm. */

@media (max-width: 1024px) {
  .ki-drawer { width: 420px; }
}

@media (max-width: 768px) {
  .ki-huelle { margin-left: 0; width: 100%; }

  .ki-knopf {
    width: 100% !important;
    min-height: 48px;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 20px;
    font-size: 14px;
  }
  .ki-knopf-text::after { content: '-Assistent'; }

  .ki-backdrop { display: block; }
  .ki-drawer { width: 100vw; box-shadow: none; }
  .ki-blase--user { max-width: 92%; }
}

/* iPhone (13.10.2026): Notch/Home-Leiste und kein Auto-Zoom beim Tippen */
.ki-kopf { padding-top: max(14px, env(safe-area-inset-top, 0px)); }
.ki-drawer { padding-bottom: env(safe-area-inset-bottom, 0px); }
@supports (-webkit-touch-callout: none) {
  .ki-eingabe textarea { font-size: 16px; }
}