/* ═══════════════════════════════════════════════════════════════════════════════
   ViCORE — Such-Modi-Schalter + KI-Assistent-Chat
   Ausschließlich Design-System-Tokens (Victor CI). Inter überall. Kein Textüberlauf.
   Namespaces: .smode-* (Modus-Schalter) · .asst-* (Assistent-Chat)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Suchfeld: flach & randlos ───────────────────────────────────────────────────── */
/* Die globale `input, select, textarea`-Basisregel (design-system.css) vererbt Radius und
   Innenabstand auch auf das Kopf-Suchfeld — das erzeugt den optischen „Kasten im Kasten".
   Hier gezielt neutralisieren: das Feld soll nahtlos in der Suchleiste liegen.
   Nebeneffekt: ~24 px mehr nutzbare Textbreite. */
.topbar-search .topbar-search-input {
  min-width: 0;
  -webkit-appearance: none; appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  height: auto;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.topbar-search-input::-webkit-search-cancel-button,
.topbar-search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
/* Im KI-Modus ist das Kopf-Feld nur ein „Öffner" für den Chat. */
.topbar-search-input.is-ki-launcher { cursor: pointer; }

/* ── Modus-Schalter ──────────────────────────────────────────────────────────────── */
/* WICHTIG: Jedes Segment hat eine FIXE, identische Größe. Der aktive Zustand ändert
   ausschließlich Farbe/Schatten — niemals Breite, Höhe oder Padding. Dadurch springt beim
   Umschalten und beim Hovern nichts mehr (kein Layout-Shift). */
.smode {
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto; padding: 2px;
  border-radius: var(--radius-full);
  background: var(--brand-bg-soft, var(--color-primary-50));
  border: 1px solid var(--border-default);
}
.smode-btn {
  width: 28px; height: 24px;          /* fix — in JEDEM Zustand identisch */
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0;
  background: transparent; color: var(--text-secondary);
  border-radius: var(--radius-full); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.smode-btn:hover { color: var(--text-primary); background: var(--color-surface); }
.smode-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.smode-btn.is-active {
  background: var(--brand-primary); color: var(--brand-text-on-primary);
  box-shadow: var(--shadow-sm);
}
.smode-ic {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; font-family: var(--font-body);
}
.smode-ic svg { display: block; width: 14px; height: 14px; }
.smode-ic-aa { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: -0.02em; }

/* ── KI-Assistent-Chat (Popup) ───────────────────────────────────────────────────── */
.asst-pop {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 320;
  width: min(440px, 92vw);
  /* Wächst mit dem Verlauf statt immer bildschirmhoch leer zu stehen. */
  height: auto;
  min-height: 240px;
  max-height: min(70vh, 580px);
  display: none;                     /* per JS auf flex */
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--text-primary);
}

/* Kopf */
.asst-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary, var(--color-surface));
  flex: 0 0 auto;
}
.asst-ava {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary); color: var(--brand-text-on-primary);
  box-shadow: var(--shadow-sm);
}
.asst-head-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.asst-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: var(--lh-tight); }
.asst-head-actions { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.asst-clear {
  border: 1px solid var(--border-default); background: var(--color-surface); cursor: pointer;
  color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-medium);
  padding: 3px var(--space-2); border-radius: var(--radius-full);
}
.asst-clear:hover { color: var(--text-primary); border-color: var(--brand-primary); }
.asst-x {
  border: 0; background: transparent; cursor: pointer; color: var(--text-muted);
  font-size: var(--text-base); line-height: 1; padding: var(--space-1); border-radius: var(--radius-sm);
}
.asst-x:hover { color: var(--text-primary); background: var(--table-row-hover, var(--color-primary-50)); }

/* Verlauf */
.asst-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-surface);
}

/* Leerzustand: kurze Begrüßung + dezente Beispiel-Chips */
.asst-intro { display: flex; flex-direction: column; gap: var(--space-3); margin: auto 0; }
.asst-greet { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-snug); }
.asst-chips-label {
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-subtle, var(--text-muted));
  letter-spacing: 0.04em; text-transform: uppercase;
}
.asst-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.asst-chip {
  border: 1px solid var(--border-default); background: var(--color-surface); color: var(--text-secondary);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-medium);
  line-height: 1; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full); cursor: pointer; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.asst-chip:hover { color: var(--brand-primary); border-color: var(--brand-primary); background: var(--brand-bg-soft, var(--color-primary-50)); }
.asst-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Nachrichten */
.asst-row { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 100%; }
.asst-row-user { justify-content: flex-end; }
.asst-row-bot { justify-content: flex-start; }
.asst-ava-msg { width: 24px; height: 24px; flex: 0 0 auto; margin-bottom: 2px; }
.asst-ava-msg svg { width: 13px; height: 13px; }

.asst-bubble {
  max-width: 84%;
  font-size: var(--text-sm); line-height: var(--lh-snug);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  overflow-wrap: anywhere;
}
.asst-bubble-user {
  background: var(--brand-primary); color: var(--brand-text-on-primary);
  border-bottom-right-radius: var(--radius-sm);
}
.asst-bubble-bot {
  background: var(--bg-secondary, var(--color-primary-50)); color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-bottom-left-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* pre-line: Antworten dürfen mehrzeilig sein (Steckbrief statt einer Textwurst). */
.asst-answer { overflow-wrap: anywhere; white-space: pre-line; }
.asst-note { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--lh-snug); overflow-wrap: anywhere; }

/* „denkt nach" */
.asst-thinking { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.asst-dots { display: inline-flex; gap: 3px; }
.asst-dots i {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--text-muted); display: inline-block;
  animation: asstBlink 1s infinite ease-in-out both;
}
.asst-dots i:nth-child(2) { animation-delay: 0.15s; }
.asst-dots i:nth-child(3) { animation-delay: 0.30s; }
@keyframes asstBlink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* Rückfrage-Optionen (mehrere Objekte am Standort) */
.asst-copts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.asst-copt {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--brand-primary); background: var(--color-surface); color: var(--brand-primary);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  line-height: 1; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full); cursor: pointer; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.asst-copt:hover { background: var(--brand-primary); color: var(--brand-text-on-primary); }
.asst-copt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Trefferkarten (im Bot-Bubble) */
.asst-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.asst-card {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.asst-card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.asst-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.asst-card-ic { flex: 0 0 auto; font-size: var(--text-base); line-height: 1; }
.asst-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.asst-card-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-card-sub, .asst-card-meta { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Objektbezug — eigene, immer sichtbare Zeile direkt unter dem Titel (nicht im Untertitel
   verstecken: dort stand er am Ende und wurde als Erstes abgeschnitten). */
.asst-card-obj,
.search-result-obj {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.asst-card-go { flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--brand-primary); white-space: nowrap; }

/* Eingabefeld (Composer) unten im Chat */
.asst-composer {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary, var(--color-surface));
}
.asst-input {
  flex: 1 1 auto; min-width: 0;
  /* Globale textarea-Basisregel erzwingt sonst eine viel zu große Mindesthöhe. */
  min-height: 0; height: 36px; max-height: 120px;
  resize: none; overflow-y: hidden;   /* JS schaltet auf auto, sobald die Maxhöhe erreicht ist */
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--lh-snug);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.asst-input::placeholder { color: var(--text-muted); }
.asst-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--focus-ring); }
.asst-send {
  flex: 0 0 auto; width: 36px; height: 36px;
  border: 0; border-radius: var(--radius-full);
  background: var(--brand-primary); color: var(--brand-text-on-primary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.asst-send:hover { background: var(--brand-primary-hover, var(--brand-primary)); }
.asst-send:active { transform: scale(0.94); }
.asst-send:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 640px) {
  .asst-pop { width: 92vw; height: min(72vh, 560px); }
}