/* /chat/ — Atrium Chat (hero-zentriert, inspiriert von claude.ai /
   schlauFUCHS). Baut nicht auf shared/shell.css auf, weil wir hier
   keinen Sidebar-Chrome wollen — der Chat IST das Produkt. */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono-local: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --chat-bg: #fafaf7;
  --chat-fg: #1a1a1a;
  --chat-fg-soft: #4b4b4b;
  --chat-fg-muted: #8a8a8a;
  --chat-border: #e9e7e1;
  --chat-surface: #ffffff;
  --chat-accent: var(--accent, #059669);
  --chat-accent-soft: var(--accent-soft, #DCFCE7);
  --chat-bubble-user: #f4f2ec;
  --chat-max-width: 760px;
  --composer-radius: 24px;
}

html.dark {
  --chat-bg: #14141a;
  --chat-fg: #f5f5f5;
  --chat-fg-soft: #c5c5c5;
  --chat-fg-muted: #8a8a8a;
  --chat-border: #2a2a32;
  --chat-surface: #1c1c23;
  --chat-accent: var(--accent, #10B981);
  --chat-accent-soft: var(--accent-soft, #052E1F);
  --chat-bubble-user: #232830;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--chat-bg);
  color: var(--chat-fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  animation: atrium-page-fade-in 200ms ease-out forwards;
}

@view-transition {
  navigation: auto;
}

@keyframes atrium-page-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

[x-cloak] { display: none !important; }

.chat-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Hauptzeile: persistente Sidebar links + chat-main rechts.
   Banners stehen darüber als volle-Breite-Bändchen. */
.chat-row {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
 *  TOPBAR
 * ═════════════════════════════════════════════════════════════════ */

.chat-topbar {
  display: grid;
  /* center column flex-fills so the brand-lines can extend across */
  grid-template-columns: minmax(180px, auto) 1fr minmax(180px, auto);
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid transparent;
  z-index: 20;
  background: var(--chat-bg);
}

.chat-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chat-icon-btn {
  background: transparent;
  border: none;
  color: var(--chat-fg-soft);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.chat-icon-btn:hover {
  background: var(--chat-surface);
  color: var(--chat-fg);
}

.chat-icon-btn svg { width: 20px; height: 20px; }

.chat-breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  color: var(--chat-fg-soft);
  min-width: 0;
}

.chat-breadcrumb-active {
  color: var(--chat-fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.chat-breadcrumb-sep { color: var(--chat-fg-muted); }
.chat-breadcrumb-folder { color: var(--chat-fg-muted); font-weight: 400; }

.chat-topbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.chat-topbar-line {
  flex: 1 1 auto;
  height: 1px;
  max-width: 240px;
  min-width: 32px;
  background: currentColor;
  opacity: 0.55;
}

.chat-topbar-logo {
  /* SVGs without explicit width/height attrs render 0×0 with width:auto.
   * Set an explicit height so the browser computes width from the
   * viewBox aspect ratio. */
  height: 32px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  user-select: none;
  flex: 0 0 auto;
}

.chat-topbar-wordmark {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--chat-fg);
  font-size: 16px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.chat-topbar-right {
  display: flex;
  justify-content: flex-end;
}

/* ══════════════════════════════════════════════════════════════════
 *  STAGE — hero OR conversation + composer
 * ═════════════════════════════════════════════════════════════════ */

.chat-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* ── Welcome Hero ─────────────────────────────────────────────────── */

.chat-hero {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 40px;
  text-align: center;
  gap: 8px;
  animation: hero-in 0.5s ease-out;
  transition: opacity 200ms ease;
}

.chat-hero--fade { opacity: 0.35; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-hero-illustration {
  /* Höhen-getrieben: Breite folgt dem natürlichen Seitenverhältnis,
   * damit quadratische und nicht-quadratische Uploads gleichermaßen
   * unverzerrt erscheinen. Skaliert mit der Viewport-Höhe, damit
   * Heading + Composer + Hint auch auf niedrigen Fenstern reinpassen. */
  max-height: min(280px, 30vh);
  max-width: 100%;
  width: auto;
  height: auto;
  margin-bottom: 20px;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.04));
}

.chat-hero-heading {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--chat-fg);
  margin: 0;
  line-height: 1.15;
}

.chat-hero-subtitle {
  max-width: 480px;
  margin: 8px 0 0;
  color: var(--chat-fg-soft);
  font-size: 16px;
  line-height: 1.6;
}

/* ── Conversation ─────────────────────────────────────────────────── */

.chat-conversation {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Compact brand-mark above the first message — schlauFUCHS-style:
 * big illustration in hero, small one as a watermark in conversation. */
.chat-conversation-mark {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
  flex-shrink: 0;
}

.chat-conversation-mark-img {
  height: 96px;
  width: auto;
  user-select: none;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.04));
}

.chat-turn {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: var(--chat-max-width);
  margin: 0 auto;
  padding: 0 24px;
  animation: turn-in 0.2s ease-out;
}

@keyframes turn-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: white;
  overflow: hidden;
}

.chat-avatar--assistant {
  background: linear-gradient(135deg, var(--accent, #059669), var(--accent-strong, #047857));
  color: var(--accent-on, #fff);
}

html.dark .chat-avatar--assistant {
  background: linear-gradient(135deg, var(--accent, #10B981), var(--accent-strong, #34D399));
  color: var(--accent-on, #1a1a1a);
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

/* If the avatar shows an image, the gradient background interferes
 * with the illustration — flatten it for the img variant. */
.chat-avatar:has(img) {
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
}

/* User turns: no avatar, right-aligned bubble */
.chat-turn--user {
  flex-direction: row-reverse;
}

.chat-turn--user .chat-avatar { display: none; }

.chat-turn--user .chat-bubble {
  max-width: 70%;
  min-width: 0;
}

.chat-turn--user .chat-bubble-body {
  background: var(--chat-bubble-user);
  border-radius: 18px 4px 18px 18px;
  padding: 10px 16px;
  white-space: pre-wrap;
}

.chat-turn--user .chat-bubble-head {
  justify-content: flex-end;
}

.chat-turn--assistant .chat-bubble { flex: 1; min-width: 0; }

.chat-bubble-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--chat-fg-muted);
}

.chat-bubble-author {
  font-weight: 600;
  color: var(--chat-fg-soft);
}

.chat-bubble-body {
  color: var(--chat-fg);
  line-height: 1.65;
  font-size: 15px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Markdown inside assistant */
.markdown p { margin: 0 0 12px; }
.markdown p:last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 {
  margin: 16px 0 8px;
  font-weight: 600;
  line-height: 1.3;
}
.markdown h1 { font-size: 20px; }
.markdown h2 { font-size: 18px; }
.markdown h3 { font-size: 16px; }
.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 1.5em; }
.markdown li { margin-bottom: 4px; }
.markdown code {
  font-family: var(--font-mono-local);
  font-size: 0.88em;
  background: var(--chat-bubble-user);
  padding: 1px 6px;
  border-radius: 4px;
}
.markdown pre {
  background: var(--chat-bubble-user);
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  padding: 12px 16px;
  overflow-x: auto;
  margin: 12px 0;
}
.markdown pre code { background: transparent; padding: 0; font-size: 13px; }
.markdown blockquote {
  border-left: 3px solid var(--chat-accent);
  padding: 2px 12px;
  margin: 0 0 12px;
  color: var(--chat-fg-soft);
}
.markdown a {
  color: var(--chat-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.markdown table { border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.markdown th, .markdown td {
  border: 1px solid var(--chat-border);
  padding: 4px 10px;
  text-align: left;
}
.markdown th { background: var(--chat-bubble-user); font-weight: 600; }

/* ── Source-Modal (Vollansicht aus Side-Panel-Karte) ────────────── */
.chat-source-modal { width: min(720px, 92vw); }

/* Generic btn-svg Constraint — die chat-page lädt shell.css nicht,
 * deshalb explodieren sonst SVG-Icons in atriumModal-Buttons. */
.chat-source-modal .btn svg,
.chat-source-modal .modal-footer .btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.chat-source-modal .modal-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  height: auto;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  color: var(--chat-fg);
  text-decoration: none;
  transition: background 120ms, border-color 120ms;
}
.chat-source-modal .modal-footer .btn:hover {
  background: var(--chat-bg);
  border-color: var(--chat-fg-muted);
}
.chat-source-modal .modal-footer .btn--primary {
  background: var(--chat-accent);
  border-color: var(--chat-accent);
  color: #fff;
}
.chat-source-modal .modal-footer .btn--primary:hover {
  background: color-mix(in srgb, var(--chat-accent) 88%, black);
  border-color: color-mix(in srgb, var(--chat-accent) 88%, black);
}
.chat-source-modal .modal-head {
  align-items: flex-start;
}
.chat-source-modal-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-source-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--chat-fg);
  line-height: 1.3;
}
.chat-source-modal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--chat-fg-muted);
  flex-wrap: wrap;
}
.chat-source-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-accent) 8%, var(--chat-surface));
  border: 1px solid color-mix(in srgb, var(--chat-accent) 25%, var(--chat-border));
  color: var(--chat-accent);
  font-weight: 500;
}
.chat-source-modal-badge svg { width: 12px; height: 12px; }
.chat-source-modal-sep { color: var(--chat-border); }
.chat-source-modal-section { color: var(--chat-fg-muted); }
.chat-source-modal-slug {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  color: var(--chat-fg-muted);
}
.chat-source-modal-confidence {
  margin-bottom: 18px;
}
.chat-source-modal-conf-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--chat-fg-muted);
  margin-bottom: 4px;
}
.chat-source-modal-bar {
  height: 6px;
  background: var(--chat-border);
  border-radius: 3px;
  overflow: hidden;
}
.chat-source-modal-bar-fill {
  height: 100%;
  background: var(--chat-accent);
  transition: width 200ms ease;
}
.chat-source-modal-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--chat-fg);
  max-height: 60vh;
  overflow-y: auto;
}
.chat-source-modal-body h1 { font-size: 18px; margin: 0 0 10px; }
.chat-source-modal-body h2 { font-size: 15px; margin: 18px 0 6px; }
.chat-source-modal-body h3 { font-size: 13px; margin: 14px 0 4px; }
.chat-source-modal-body p  { margin: 0 0 10px; }
.chat-source-modal-body ul,
.chat-source-modal-body ol { margin: 0 0 12px 18px; padding: 0; }
.chat-source-modal-body strong { color: var(--chat-fg); font-weight: 600; }
.chat-source-modal-body code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  background: var(--chat-bg);
  padding: 1px 4px;
  border-radius: 3px;
}

.chat-stream-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--chat-fg-muted);
  font-style: italic;
}

.chat-stream-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chat-accent);
  animation: stream-pulse 1.2s infinite ease-in-out;
}

@keyframes stream-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────
   ✨ Magic — pulsierende Konstellation + Schritt-Trail
   Wird gerendert während ``streaming=true`` und blendet sich beim
   done-Event aus. Bewusst untertrieben in Größe damit es als
   "Atemraum" wirkt, nicht als blinkender Werbeplatz.
   ───────────────────────────────────────────────────────────────── */
.chat-magic {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--chat-accent, #6366f1) 8%, transparent),
    transparent 70%
  );
  border: 1px solid color-mix(in srgb, var(--chat-accent, #6366f1) 18%, transparent);
  animation: magic-rise 360ms ease-out;
}

@keyframes magic-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-magic-constellation {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  align-self: center;
}

.jarvis-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--chat-accent, #6366f1) 40%, transparent));
}

.jarvis-svg circle {
  transform-origin: 50px 50px;
}

.chat-magic-trail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-magic-step {
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--chat-fg, #1f2937) 55%, transparent);
  animation: magic-step-in 280ms ease-out;
  transition: color 220ms ease;
}

@keyframes magic-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-magic-step.is-current {
  font-weight: 500;
  color: transparent;
  background: linear-gradient(to right, var(--chat-fg, #1f2937) 50%, transparent 50.1%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: magic-step-in 280ms ease-out, magic-step-wipe 1.2s cubic-bezier(0.2, 0, 0, 1) forwards;
}

@keyframes magic-step-wipe {
  to { background-position: 0 0; }
}

.chat-magic-step.is-error {
  color: #b91c1c;
}

/* History: collapsible list of past steps. Closed by default while
 * streaming so only the latest step is visible; auto-opens once the
 * assistant is done so the user can review the trail. */
.chat-magic-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.chat-magic-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  width: max-content;
  color: color-mix(in srgb, var(--chat-fg, #1f2937) 50%, transparent);
  padding: 2px 6px;
  border-radius: 6px;
  user-select: none;
  transition: background 120ms ease, color 120ms ease;
}
.chat-magic-history-toggle::-webkit-details-marker { display: none; }
.chat-magic-history-toggle:hover {
  background: color-mix(in srgb, var(--chat-fg, #1f2937) 6%, transparent);
  color: var(--chat-fg, #1f2937);
}
.chat-magic-history-chev {
  width: 12px;
  height: 12px;
  transition: transform 180ms ease;
}
.chat-magic-history[open] .chat-magic-history-chev {
  transform: rotate(180deg);
}
.chat-magic-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
  border-left: 2px solid color-mix(in srgb, var(--chat-fg, #1f2937) 8%, transparent);
}
.chat-magic-step.is-past {
  font-size: 12px;
  color: color-mix(in srgb, var(--chat-fg, #1f2937) 40%, transparent);
}

/* Magistral-Modus: zusätzliche Akzentfarbe + sanftere Bewegung */
.chat-magic.is-thinking {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #a855f7 12%, transparent),
    transparent 70%
  );
  border-color: color-mix(in srgb, #a855f7 22%, transparent);
}
.chat-magic.is-thinking .chat-magic-dot.is-active {
  background: #a855f7;
}
.chat-magic.is-thinking .chat-magic-dot.is-active::after {
  background: radial-gradient(
    circle,
    color-mix(in srgb, #a855f7 40%, transparent) 0%,
    transparent 70%
  );
}

/* Per-instance trace */
.chat-trace {
  margin-top: 12px;
  border: 1px dashed var(--chat-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
}

.chat-trace summary {
  cursor: pointer;
  color: var(--chat-fg-muted);
  user-select: none;
}

.chat-trace ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-trace li { display: flex; flex-direction: column; gap: 4px; }
.chat-trace li > span.pill { align-self: flex-start; }
.chat-trace-phases { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

.chat-phase-chip {
  font-family: var(--font-mono-local);
  font-size: 11px;
  background: var(--chat-surface);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--chat-fg-soft);
  border: 1px solid var(--chat-border);
}

.chat-phase-chip.is-err {
  background: color-mix(in srgb, #dc2626 15%, var(--chat-surface));
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 35%, var(--chat-border));
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pill--ok {
  background: #d1fae5;
  color: #065f46;
}

.pill--error {
  background: #fee2e2;
  color: #991b1b;
}

.pill--muted {
  background: var(--chat-surface);
  color: var(--chat-fg-muted);
  border: 1px solid var(--chat-border);
}

html.dark .pill--ok    { background: #064e3b; color: #a7f3d0; }
html.dark .pill--error { background: #7f1d1d; color: #fecaca; }

/* Typing indicator */
.chat-typing {
  display: inline-flex;
  gap: 6px;
  padding: 14px 16px;
  background: var(--chat-bubble-user);
  border-radius: 18px;
}

.chat-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--chat-fg-muted);
  animation: chat-dot 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════
 *  COMPOSER
 * ═════════════════════════════════════════════════════════════════ */

.chat-composer-wrap {
  /* Composer + Hint müssen IMMER sichtbar bleiben — Hero schrumpft,
   * der Wrap nicht. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 24px;
  background: var(--chat-bg);
}

.chat-attachments {
  width: 100%;
  max-width: var(--chat-max-width);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  max-width: 280px;
  transition: border-color 120ms ease;
}

.chat-attachment--ready { border-color: color-mix(in srgb, #059669 40%, var(--chat-border)); }
.chat-attachment--error { border-color: color-mix(in srgb, #dc2626 50%, var(--chat-border)); }

.chat-attachment-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--chat-fg-muted);
}

.chat-attachment-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-attachment-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--chat-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.chat-attachment-sub { font-size: 11px; color: var(--chat-fg-muted); }
.chat-attachment-source {
  color: var(--accent, #059669);
  font-weight: 500;
}
.chat-attachment-ok  { color: #059669; font-weight: 500; }
.chat-attachment-err { color: #dc2626; }

.chat-attachment-remove {
  background: transparent;
  border: none;
  color: var(--chat-fg-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-attachment-remove:hover {
  background: var(--chat-bubble-user);
  color: var(--chat-fg);
}

.chat-attachment-remove svg { width: 14px; height: 14px; }

.chat-composer-attach {
  background: transparent;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--chat-fg-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 120ms ease, background 120ms ease;
}

.chat-composer-attach:hover:not(:disabled) {
  color: var(--chat-fg);
  background: var(--chat-bubble-user);
}

.chat-composer-attach:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-composer-attach svg { width: 18px; height: 18px; }

.chat-composer {
  width: 100%;
  max-width: var(--chat-max-width);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: var(--composer-radius);
  padding: 10px 10px 10px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.chat-composer:focus-within {
  border-color: var(--chat-accent);
  box-shadow: 0 4px 20px rgba(194, 65, 12, 0.12);
}

.chat-composer-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--chat-fg);
  resize: none;
  padding: 8px 0;
  min-height: 24px;
  max-height: 200px;
  overflow-y: auto;
}

.chat-composer-input::placeholder { color: var(--chat-fg-muted); }

.chat-composer-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--chat-fg);
  color: var(--chat-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 100ms ease, background 150ms ease, opacity 150ms ease;
  flex-shrink: 0;
}

.chat-composer-send:hover:not(:disabled) {
  transform: translateY(-1px);
}

.chat-composer-send:disabled {
  background: var(--chat-border);
  color: var(--chat-fg-muted);
  cursor: not-allowed;
}

.chat-composer-send svg { width: 18px; height: 18px; }

/* ── Voice-Input-Button ────────────────────────────────────────── */
.chat-composer-voice {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--chat-border);
  color: var(--chat-fg-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 150ms ease, background 150ms ease,
              border-color 150ms ease, box-shadow 150ms ease;
  position: relative;
}

.chat-composer-voice:hover:not(:disabled):not(.is-recording) {
  color: var(--chat-fg);
  border-color: var(--chat-fg-soft);
  background: var(--chat-bubble-user);
}

.chat-composer-voice:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-composer-voice svg { width: 18px; height: 18px; }

/* Recording-State: pulsierender roter Hintergrund */
.chat-composer-voice.is-recording {
  color: #fff;
  background: #dc2626;
  border-color: #dc2626;
  animation: voice-pulse 1.5s ease-in-out infinite;
}

/* Outer glow ring during recording */
.chat-composer-voice.is-recording::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #dc2626;
  opacity: 0;
  animation: voice-ring 1.5s ease-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

@keyframes voice-ring {
  0%   { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(1.6); }
}

/* Transcribing-State: dezenter Akzent */
.chat-composer-voice.is-transcribing {
  border-color: var(--chat-accent);
  color: var(--chat-accent);
}

.chat-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: chat-spin 0.8s linear infinite;
}

@keyframes chat-spin { to { transform: rotate(360deg); } }

.chat-composer-hint {
  width: 100%;
  max-width: var(--chat-max-width);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--chat-fg-muted);
}

/* ── Composer "Wissens-Scope" Button — clearer affordance: shows a
     pill with the active scope label + a small chevron to indicate
     it opens a drawer. ──────────────────────────────────────────────── */
.chat-composer-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  color: var(--chat-fg-soft);
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: all 140ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.chat-composer-scope-btn:hover {
  border-color: var(--chat-accent);
  color: var(--chat-accent);
  background: var(--chat-accent-soft);
}
.chat-composer-scope-btn[data-personal-active="true"] {
  border-color: #c4b5fd;
  background: #ede9fe;
  color: #6d28d9;
}
.chat-composer-scope-btn svg {
  width: 14px;
  height: 14px;
}
.chat-composer-scope-btn-chevron {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.5;
  transition: transform 140ms ease;
}
.chat-composer-scope-btn:hover .chat-composer-scope-btn-chevron {
  transform: rotate(90deg);
  opacity: 1;
}

.chat-footer-logos {
  display: flex;
  gap: 24px;
  align-items: center;
  opacity: 0.65;
  margin-top: 12px;
}

.chat-footer-logos img { max-height: 22px; width: auto; }

/* ══════════════════════════════════════════════════════════════════
 *  DRAWERS (left nav + right scope)
 * ═════════════════════════════════════════════════════════════════ */

.chat-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 40;
  animation: backdrop-in 0.2s ease-out;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.chat-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  background: var(--chat-surface);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0.24, 1),
              width 220ms cubic-bezier(0.32, 0.72, 0.24, 1);
}

/* ── Scope: full-screen centered overlay (replaces right-side drawer) ── */
.chat-scope-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.chat-scope-modal {
  background: var(--chat-bg, #fff);
  border-radius: 12px;
  width: min(800px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.chat-scope-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--chat-border, rgba(0, 0, 0, 0.1));
  position: relative;
}
.chat-scope-head h2 {
  margin: 0 32px 4px 0;
  font-size: 1.2em;
  font-weight: 600;
}
.chat-scope-help {
  margin: 0;
  font-size: 0.9em;
  color: var(--chat-fg-muted, #888);
}
.chat-scope-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: var(--chat-fg-muted, #888);
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.chat-scope-close:hover {
  background: var(--chat-row-hover, rgba(0, 0, 0, 0.05));
}

/* ── Links-Sidebar: persistent auf Desktop (im Flow), Overlay auf Mobile ── */
.chat-drawer.chat-sidebar {
  position: relative;     /* Desktop: kein fixed mehr, Sidebar IST eine Spalte */
  top: auto; bottom: auto; left: auto;
  order: -1;              /* visuell vor chat-main, egal wo im Markup */
  flex-shrink: 0;
  height: 100%;
  border-right: 1px solid var(--chat-border);
  box-shadow: none;
  transition: width 220ms cubic-bezier(0.32, 0.72, 0.24, 1);
}

.chat-drawer.chat-sidebar.is-rail     { width: 56px; }
.chat-drawer.chat-sidebar.is-expanded { width: 280px; }

/* Mobile: Sidebar wird wieder Overlay (fixed + translateX) damit sie
   den schmalen Viewport nicht permanent verbraucht. */
@media (max-width: 768px) {
  .chat-drawer.chat-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(320px, 80vw) !important;
    transform: translateX(-100%);
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    z-index: 50;
  }
  .chat-drawer.chat-sidebar.is-mobile-open { transform: translateX(0); }
  /* Im Mobile-Overlay zeigen wir IMMER das volle expanded-Panel,
     egal welcher sidebarMode persistiert ist. */
  .chat-drawer.chat-sidebar.is-mobile-open .chat-expanded-only,
  .chat-drawer.chat-sidebar.is-mobile-open .chat-rail-bottom { display: flex; }
}

.chat-mobile-only { display: none; }
@media (max-width: 768px) {
  .chat-mobile-only { display: inline-flex; }
}

/* ── Rail-Bereiche (Top/Bottom) ──
   Sichtbar nur im Rail-Modus. Im Expanded zeigen wir die volle
   Drawer-Head + Sektionen, deshalb sind Top/Bottom dort hidden,
   damit Navigation nicht doppelt erscheint. */
.chat-rail-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 6px;
  border-bottom: 1px solid var(--chat-border);
}
.chat-rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 14px;
  border-top: 1px solid var(--chat-border);
  margin-top: auto;
}
.chat-rail-toggle {
  color: var(--chat-fg-muted);
}
.chat-rail-toggle:hover {
  color: var(--chat-accent);
}
.chat-rail-action {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--chat-fg-soft);
  transition: background 120ms ease, color 120ms ease;
}
.chat-rail-action:hover {
  background: var(--chat-bubble-user);
  color: var(--chat-fg);
}

/* Rail-Modus: Drawer-Heading + Expanded-Panel unsichtbar.
   Auf Mobile-Overlay greift die Regel oben (alles wieder sichtbar). */
.chat-drawer.chat-sidebar.is-rail .chat-expanded-only {
  display: none;
}

/* Expanded-Modus: Rail-Bereiche unsichtbar damit die Navigation
   nicht doppelt (als Icons + als Text-Links) erscheint. */
.chat-drawer.chat-sidebar.is-expanded .chat-rail-top,
.chat-drawer.chat-sidebar.is-expanded .chat-rail-bottom {
  display: none;
}

/* Drawer-Head im Expanded: Collapse-Button links, Neuer-Chat-Button
   füllt die Restbreite. */
.chat-drawer-collapse {
  flex-shrink: 0;
  color: var(--chat-fg-muted);
}
.chat-drawer-collapse:hover { color: var(--chat-accent); }

/* Expanded-Panel: Flex-Container für Tree+Nav+UserCard.
 * Scrollt SELBST nicht — der innere chat-drawer-tree übernimmt das,
 * damit nav + user-card bei langer chat-liste sichtbar bleiben. */
.chat-expanded-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Suche-Icon im Rail darf nicht den Search-Input fokussieren wenn die
   Sidebar gerade ausklappt — der $nextTick im Click-Handler kümmert
   sich um die Reihenfolge, hier nur Visual: aktiver Status */
.chat-drawer.chat-sidebar.is-expanded .chat-rail-action[title="Verlauf"],
.chat-drawer.chat-sidebar.is-expanded .chat-rail-action[title="Chats durchsuchen"] {
  color: var(--chat-accent);
}

.chat-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--chat-border);
  gap: 12px;
}

.chat-drawer-new {
  flex: 1;
  background: var(--chat-fg);
  color: var(--chat-bg);
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  justify-content: center;
}

.chat-drawer-new:hover { opacity: 0.9; }
.chat-drawer-new svg { width: 16px; height: 16px; }

.chat-drawer-section {
  padding: 16px 12px;
  border-bottom: 1px solid var(--chat-border);
  flex-shrink: 0;
}

.chat-drawer-section:last-child { border-bottom: none; flex-shrink: 1; }

.chat-drawer-nav { flex-shrink: 0; }

.chat-drawer-heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chat-fg-muted);
  font-weight: 600;
  margin: 0 0 8px;
  padding: 0 8px;
}

.chat-drawer-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 8px 4px;
}

.chat-drawer-heading-row .chat-drawer-heading {
  padding: 0;
  margin: 0;
}

.chat-drawer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 0 4px 8px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  border-radius: 8px;
  transition: border-color 120ms ease;
}

.chat-drawer-search:focus-within {
  border-color: var(--chat-accent);
}

.chat-drawer-search svg {
  width: 14px;
  height: 14px;
  color: var(--chat-fg-muted);
  flex-shrink: 0;
}

.chat-drawer-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--chat-fg);
  font-family: inherit;
}

.chat-drawer-search input::placeholder { color: var(--chat-fg-muted); }

.chat-drawer-search-clear {
  background: transparent;
  border: none;
  color: var(--chat-fg-muted);
  cursor: pointer;
  padding: 0 4px;
  font-size: 18px;
  line-height: 1;
}

.chat-drawer-search-clear:hover { color: var(--chat-fg); }

.chat-drawer-history {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-drawer-group + .chat-drawer-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--chat-border);
}

.chat-drawer-group-head {
  padding: 6px 10px 2px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  font-weight: 600;
  color: var(--chat-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chat-drawer-heading--lg {
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--chat-fg);
  margin: 0;
}

.chat-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  overflow-y: auto;
}

/* ── Projekte-Tree (Phase 3.5 UI-V2) ───────────────────────── */
/* Eine einzige Sidebar-Section mit kollabierbaren Projekt-
 * Gruppen + ihren Chats als Children. Ersetzt die frueheren
 * getrennten "Projekte"- und "Verlauf"-Sections.
 */

.chat-drawer-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Top-spacing übernimmt der sticky-header (sonst scrollen
   * chat-items in die padding-zone *über* der sticky-box und
   * werden dort sichtbar). */
  padding-top: 0;
  padding-bottom: 8px;
}

/* Sticky-header im scrollenden tree-bereich: suche + "+ neues
 * projekt" + inline-create-form bleiben am oberen rand sichtbar,
 * auch wenn der user durch eine lange chat-liste scrollt.
 * padding-top:16px übernimmt den ehemaligen tree-top-spacing,
 * sodass der sticky-hintergrund die komplette top-zone abdeckt. */
.chat-drawer-tree-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--chat-bg);
  border-bottom: 1px solid var(--chat-border);
  padding-top: 16px;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* "+ Neues Projekt"-Pill am Tree-Top */
.chat-projekt-newbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  margin: 6px 0 8px;
  border: 1px dashed var(--chat-border);
  border-radius: 8px;
  background: transparent;
  color: var(--chat-fg-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease,
              background 120ms ease;
}

.chat-projekt-newbtn:hover {
  border-color: var(--chat-fg-muted);
  color: var(--chat-fg);
  background: var(--chat-bg);
}

/* Inline create-form */
.chat-projekt-create {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--chat-bg);
  border-radius: 8px;
  margin: 6px 0 8px;
  border: 1px solid var(--chat-border);
}

.chat-projekt-create-row { display: flex; gap: 6px; }

.chat-projekt-create-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chat-border);
  border-radius: 6px;
  background: var(--chat-surface);
  color: var(--chat-fg-soft);
}
.chat-projekt-create-icon svg { width: 16px; height: 16px; display: block; }

.chat-projekt-create-titel {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--chat-border);
  border-radius: 6px;
  background: var(--chat-surface);
  color: var(--chat-fg);
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.chat-projekt-create-titel:focus {
  border-color: var(--chat-fg);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.10);
}

.chat-projekt-create-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* Lokale Button-Styles — die /chat/-page laedt shell.css NICHT, also
   muessen wir .btn / .btn--ghost / .btn--primary / .btn--xs hier
   minimal selbst definieren. Scope auf das create-form, damit wir
   den Rest der Page nicht stoeren. */
.chat-projekt-create-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  color: var(--chat-fg);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.chat-projekt-create-actions .btn:hover:not(:disabled) {
  background: var(--chat-bg);
  border-color: var(--chat-fg-soft);
}
.chat-projekt-create-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.chat-projekt-create-actions .btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--chat-fg-soft);
}
.chat-projekt-create-actions .btn--ghost:hover:not(:disabled) {
  background: var(--chat-bg);
  color: var(--chat-fg);
}
.chat-projekt-create-actions .btn--primary {
  background: var(--chat-fg);
  color: var(--chat-bg);
  border-color: var(--chat-fg);
}
.chat-projekt-create-actions .btn--primary:hover:not(:disabled) {
  filter: brightness(1.15);
}
.chat-projekt-create-actions .btn--xs {
  height: 26px;
  padding: 0 10px;
}

/* Projekt-Gruppe — der Container fuer Header + Children */
.chat-projekt-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
}

.chat-projekt-group--loose {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--chat-border);
}

/* Projekt-Header-Zeile (klickbar zum Toggle) */
.chat-projekt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--chat-fg);
  transition: background 120ms ease;
  user-select: none;
}

.chat-projekt-row:hover { background: var(--chat-bg); }

.chat-projekt-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--chat-fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 160ms ease;
  transform: rotate(0deg);
}

.chat-projekt-chevron.is-expanded { transform: rotate(90deg); }

.chat-projekt-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-fg-soft);
}
.chat-projekt-icon svg { width: 14px; height: 14px; display: block; }
.chat-projekt-row:hover .chat-projekt-icon { color: var(--chat-fg); }

/* Mini-Folder im Pinned-Templates-Sublist (kleiner) */
.projekt-folder-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--chat-fg-soft);
}
.projekt-folder-mini svg { width: 14px; height: 14px; display: block; }

.chat-projekt-titel {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-projekt-titel--muted {
  color: var(--chat-fg-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;
}

.chat-projekt-count { flex-shrink: 0; }

.chat-projekt-actions {
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.chat-projekt-row:hover .chat-projekt-actions { opacity: 1; }

/* Projekt-Children (Chats) — eingerueckt mit dezenter Linie */
.chat-projekt-children {
  list-style: none;
  margin: 2px 0 4px 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--chat-border);
  margin-left: 13px;
}

.chat-projekt-empty-row {
  padding: 6px 10px;
  font-style: italic;
}

/* Child-Chats: kompakter als die alten flat-list Items */
.chat-drawer-item--child {
  padding: 6px 6px 6px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 120ms ease;
}

.chat-drawer-item--child:hover { background: var(--chat-bg); }

.chat-drawer-item--child.is-active {
  background: var(--chat-bubble-user);
}

/* ── Move-to-Projekt-Popover (Chat-Kebab) ─────────────────── */
.chat-projekt-move-wrap {
  position: relative;
  display: inline-flex;
}

.chat-projekt-move-popover {
  position: absolute;
  top: 100%;
  /* Im Tree ist die Sidebar schmal — Popover nach LINKS oeffnen,
   * sonst klemmt es am rechten Rand und ueberlappt Nachbar-Zeilen.
   */
  right: 0;
  margin-top: 4px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  max-width: 220px;
  z-index: 50;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-projekt-move-head {
  font-size: 10px;
  font-weight: 600;
  color: var(--chat-fg-muted);
  padding: 6px 8px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chat-projekt-move-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--chat-fg);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-projekt-move-item:hover:not(:disabled) {
  background: var(--chat-bg);
}

.chat-projekt-move-item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.chat-projekt-move-empty {
  padding: 6px 8px;
}

/* ── Slash-Command-Popover (Phase 4.5b-2b) ─────────────────── */
.chat-composer-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-slash-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
}

.chat-slash-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--chat-fg-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px 4px;
}

.chat-slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--chat-fg);
  transition: background 100ms ease;
}

.chat-slash-item:hover,
.chat-slash-item.is-active {
  background: var(--chat-bg);
}

.chat-slash-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--chat-bg);
  color: var(--chat-fg);
  border: 1px solid var(--chat-border);
}
.chat-slash-icon svg { width: 14px; height: 14px; display: block; }

.chat-slash-item.is-active .chat-slash-icon {
  background: var(--chat-surface);
}

.chat-slash-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-slash-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-slash-sub {
  font-size: 11px;
  color: var(--chat-fg-muted, #6b7280);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-slash-slug {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--chat-fg-muted, #9ca3af);
  background: var(--chat-bg);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.chat-slash-item.is-active .chat-slash-slug {
  background: var(--chat-surface);
}


/* ── Empty-State Agent-Quick-Starts (Phase 4.5b-1) ────────── */
.chat-agent-quickstart {
  margin: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

/* Kompaktes Pill-Grid: jede Karte nur so breit wie sie sein muss,
   horizontal flow + wrap. Deutlich weniger Vertikal-Platz als das
   vorherige 220px-Grid mit Untertiteln. */
.chat-agent-quickstart-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 720px;
  width: 100%;
}

.chat-agent-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  background: var(--chat-surface);
  color: var(--chat-fg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  height: 30px;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 80ms ease;
}

.chat-agent-card:hover:not(:disabled) {
  border-color: var(--chat-fg-muted, #9ca3af);
  background: var(--chat-bg);
}

.chat-agent-card:active { transform: translateY(1px); }
.chat-agent-card:disabled { opacity: 0.6; cursor: progress; }

.chat-agent-card-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-fg);
}
.chat-agent-card-icon svg { width: 14px; height: 14px; display: block; }

.chat-agent-card-body {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}

.chat-agent-card-title {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--chat-fg);
  white-space: nowrap;
}

/* Untertitel im kompakten Pill-Layout ausgeblendet — der Titel
   reicht; Details gibt's im /app/agents/-Tile. */
.chat-agent-card-sub { display: none; }

.chat-agent-card-spinner {
  font-size: 11px;
  color: var(--chat-fg-muted);
  margin-left: 2px;
}

.chat-agent-quickstart-more {
  font-size: 11.5px;
  color: var(--chat-fg-muted, #6b7280);
  text-decoration: none;
  transition: color 120ms ease;
}

.chat-agent-quickstart-more:hover { color: var(--chat-fg); }


/* ── User-Card am Sidebar-Footer ──────────────────────────── */
/* Wird per margin-top:auto ans untere Ende des expanded-panel
 * gedrückt. Im Rail-Mode (schmale Icon-Spalte) ausgeblendet —
 * dort gibt's nur die Bridge-Icons. */
.chat-user-card {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  margin-top: auto;        /* schiebt die Card ans Panel-Bottom */
  padding: 8px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  border-radius: 12px;
}

.chat-user-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}

.chat-user-link:hover { background: var(--chat-surface, transparent); }

.chat-user-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--chat-fg, #18181b);
  color: var(--chat-bg, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.chat-user-info {
  flex: 1;
  min-width: 0;
}

.chat-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--chat-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.chat-user-mail {
  font-size: 11px;
  color: var(--chat-fg-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.chat-user-theme {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--chat-fg-muted, #6b7280);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}

.chat-user-theme:hover {
  background: var(--chat-surface, rgba(0, 0, 0, 0.04));
  color: var(--chat-fg);
}

/* Im Rail-Mode (schmale Sidebar) verstecken — sonst sprengt es die
 * Spalte. Die User-Card ist ein Expanded-Panel-Element. */
.chat-drawer.chat-sidebar:not(.is-expanded):not(.is-mobile-open)
  .chat-user-card { display: none; }

.chat-drawer-item {
  padding: 8px 6px 8px 12px;
  border-radius: 8px;
  transition: background 120ms ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-drawer-item:hover { background: var(--chat-bg); }

.chat-drawer-item.is-active {
  background: var(--chat-bubble-user);
}

.chat-drawer-item-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-drawer-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--chat-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-drawer-item-when {
  font-size: 11px;
  color: var(--chat-fg-muted);
}

.chat-drawer-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.chat-drawer-item:hover .chat-drawer-item-actions,
.chat-drawer-item.is-active .chat-drawer-item-actions {
  opacity: 1;
}

.icon-btn-mini {
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--chat-fg-muted);
  padding: 0;
}

.icon-btn-mini svg { width: 14px; height: 14px; }
.icon-btn-mini:hover { background: rgba(0, 0, 0, 0.06); color: var(--chat-fg); }
.icon-btn-mini.is-danger:hover { color: #c53030; background: rgba(197, 48, 48, 0.08); }

/* Sub-headings within the drawer (Hilfe / Administration / Tenant) */
.chat-drawer-heading--sub {
  margin-top: 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chat-fg-muted);
  font-weight: 600;
}

.chat-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--chat-fg-soft);
  text-decoration: none;
  font-size: 14px;
  transition: background 120ms ease, color 120ms ease;
}

.chat-drawer-link:hover {
  background: var(--chat-bg);
  color: var(--chat-fg);
}

.chat-drawer-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.chat-drawer-empty {
  padding: 12px;
  color: var(--chat-fg-muted);
  font-size: 13px;
  text-align: center;
}

/* Highlight admin/tenant/operator drawer-links so they're visually
 * grouped without screaming for attention. */
.chat-drawer-link--admin    { color: var(--chat-accent); }
.chat-drawer-link--admin:hover { background: color-mix(in srgb, var(--chat-accent) 8%, transparent); }
.chat-drawer-link--tenant   { color: #c2410c; }
.chat-drawer-link--operator { color: #6d28d9; }


/* ════════════════════════════════════════════════════════════════════
   Role-Switcher (Topbar) + View-As-Banner
   ════════════════════════════════════════════════════════════════════ */

.chat-role-switcher {
  position: relative;
}
.chat-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 9px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: var(--chat-fg-soft);
  cursor: pointer;
  transition: all 140ms ease;
}
.chat-role-pill:hover {
  border-color: var(--chat-fg-muted);
  color: var(--chat-fg);
}
.chat-role-pill svg {
  width: 14px; height: 14px;
}
.chat-role-pill-chevron {
  width: 11px !important; height: 11px !important;
  opacity: 0.5;
}
.chat-role-pill.is-viewing-as {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #92400e;
}

.chat-role-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 240px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.chat-role-menu-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--chat-border);
  margin-bottom: 4px;
}
.chat-role-menu-head span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--chat-fg);
}
.chat-role-menu-head small {
  display: block;
  font-size: 11px;
  color: var(--chat-fg-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.chat-role-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--chat-fg);
  cursor: pointer;
  text-align: left;
  gap: 8px;
}
.chat-role-menu-item:hover { background: var(--chat-bg); }
.chat-role-menu-item.is-current { background: color-mix(in srgb, var(--chat-accent) 8%, transparent); color: var(--chat-accent); font-weight: 600; }
.chat-role-menu-item svg { width: 14px; height: 14px; margin-left: auto; }
.chat-role-menu-tag {
  font-size: 10px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--chat-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-left: auto;
}
.chat-role-menu-reset {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--chat-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  color: var(--chat-fg-muted);
  cursor: pointer;
}
.chat-role-menu-reset:hover { color: var(--chat-fg); border-color: var(--chat-fg-muted); }

.chat-viewas-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
  color: #78350f;
  font-size: 13px;
  border-bottom: 1px solid #f59e0b;
}
.chat-viewas-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.chat-viewas-banner span { flex: 1; }
.chat-viewas-banner strong { color: #451a03; }
.chat-viewas-banner-reset {
  background: white;
  border: 1px solid #f59e0b;
  color: #78350f;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.chat-viewas-banner-reset:hover { background: #fef9c3; }

.chat-drawer-hint {
  padding: 12px 20px;
  color: var(--chat-fg-muted);
  font-size: 13px;
  margin: 0;
}

/* Scope list inside right drawer */
.chat-scope-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-scope-item {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--chat-border);
  background: var(--chat-bg);
  transition: border-color 120ms ease, background 120ms ease;
}

.chat-scope-item.is-on {
  border-color: var(--chat-accent);
  background: color-mix(in srgb, var(--chat-accent) 6%, var(--chat-bg));
}

.chat-scope-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.chat-scope-item input[type=checkbox] {
  width: 16px; height: 16px; margin-top: 2px;
  accent-color: var(--chat-accent);
}

.chat-scope-name {
  font-weight: 500;
  color: var(--chat-fg);
  font-size: 14px;
}

.chat-scope-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--chat-fg-muted);
}

.chat-scope-chat { color: var(--chat-accent); font-weight: 600; }


/* ════════════════════════════════════════════════════════════════════
   Scope-Drawer Redesign — card-based, drei Sections (Pipelines /
   Org-Wissen / Personal), iOS-style Toggle-Switches statt Checkboxen,
   illustrierte Empty-States.
   ════════════════════════════════════════════════════════════════════ */


.chat-scope-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-scope-card {
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 14px;
  padding: 14px 14px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025);
}
.chat-scope-card--personal {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ede9fe 28%, var(--chat-surface)) 0%,
    var(--chat-surface) 100%
  );
}

.chat-scope-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--chat-border);
}
.chat-scope-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--chat-fg);
}

.chat-scope-icon-circle {
  --ring: rgba(0, 0, 0, 0.06);
  --bg: var(--chat-bg);
  --fg: var(--chat-fg-muted);
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--ring);
  transition: transform 200ms ease;
}
.chat-scope-icon-circle svg { width: 15px; height: 15px; }
.chat-scope-card:hover .chat-scope-icon-circle {
  transform: scale(1.06);
}

.chat-scope-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--chat-bg);
  color: var(--chat-fg-muted);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
  border: 1px solid var(--chat-border);
}

.chat-scope-bulk {
  display: flex;
  gap: 6px;
}
.chat-scope-link {
  font-size: 12px;
  color: var(--chat-fg-muted);
  text-decoration: none;
  border: 1px solid var(--chat-border);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--chat-bg);
  transition: all 120ms ease;
}
.chat-scope-link:hover {
  color: var(--chat-fg);
  border-color: var(--chat-fg-muted);
}

/* Liste der Toggles */
.chat-scope-toggles {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-scope-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 120ms ease;
}
.chat-scope-toggle:hover { background: var(--chat-bg); }
.chat-scope-toggle.is-on {
  background: color-mix(in srgb, var(--chat-accent) 7%, transparent);
}
.chat-scope-toggle.is-warn {
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}
.chat-scope-toggle.is-warn.is-on {
  background: color-mix(in srgb, #f59e0b 14%, transparent);
}

.chat-scope-toggle-info { flex: 1; min-width: 0; }
.chat-scope-toggle-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--chat-fg);
  display: flex;
  gap: 6px;
  align-items: center;
}
.chat-scope-toggle-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--chat-fg-muted, #64748b);
}
.chat-scope-toggle-sub--muted { font-style: italic; opacity: 0.7; }
.chat-scope-toggle-warn {
  margin-top: 3px;
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #b45309;
  text-decoration: underline;
}
html.dark .chat-scope-toggle-warn { color: #fbbf24; }
a.chat-scope-toggle-warn:hover { color: #92400e; }
html.dark a.chat-scope-toggle-warn:hover { color: #fcd34d; }
.chat-scope-toggle-meta {
  margin-top: 3px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--chat-fg-muted);
}

.chip--soft {
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--chat-fg-muted);
}

/* iOS-style Toggle */
.chat-toggle {
  position: relative;
  width: 36px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.chat-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.chat-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--chat-border);
  border-radius: 999px;
  transition: background 180ms ease;
}
.chat-toggle-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-toggle input:checked + .chat-toggle-track {
  background: var(--chat-accent);
}
.chat-toggle input:checked + .chat-toggle-track::before {
  transform: translateX(14px);
}
.chat-toggle--personal input:checked + .chat-toggle-track {
  background: #6d28d9;
}

/* Empty-States — illustrated */
.chat-scope-empty {
  text-align: center;
  padding: 22px 16px 14px;
  color: var(--chat-fg-muted);
}
.chat-scope-empty svg {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  opacity: 0.4;
}
.chat-scope-empty p {
  margin: 0 0 8px;
  font-size: 13px;
}
.chat-scope-empty-link {
  display: inline-block;
  font-size: 12px;
  color: var(--chat-accent);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--chat-accent) 30%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--chat-accent) 6%, transparent);
  transition: all 120ms ease;
}
.chat-scope-empty-link:hover {
  background: color-mix(in srgb, var(--chat-accent) 12%, transparent);
  border-color: var(--chat-accent);
}

/* Save-as-default footer in the Connectoren section */
.chat-scope-save-default-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border, #e5e7eb);
  flex-wrap: wrap;
}
.chat-scope-save-default-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface, #ffffff);
  color: var(--ink, #1f2937);
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.chat-scope-save-default-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--chat-accent) 8%, transparent);
  border-color: var(--chat-accent);
}
.chat-scope-save-default-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.chat-scope-save-default-help {
  font-size: 11.5px;
  color: var(--ink-3, #6b7280);
  font-style: italic;
}
html.dark .chat-scope-save-default-btn {
  background: var(--surface, #1f2937);
  color: var(--ink, #e5e7eb);
  border-color: var(--border, #374151);
}

.chip {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  color: var(--chat-fg-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.subtle { color: var(--chat-fg-muted); }
.text-xs { font-size: 12px; }
.btn.btn--primary { background: var(--chat-fg); color: var(--chat-bg); }

/* ── Impersonation Banner (rot, top-of-page) ──────────────────────── */

.imp-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  font-size: 13px;
  font-weight: 500;
}
.imp-banner-icon { font-size: 18px; }
.imp-banner-text { flex: 1; line-height: 1.5; }
.imp-banner-text strong { font-weight: 700; }
.imp-banner-text em { font-style: normal; opacity: 0.85; }
.imp-banner-end {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: background 120ms;
}
.imp-banner-end:hover { background: rgba(255, 255, 255, 0.3); }

/* ── Imp Pending Banner (gelb, dezenter) ──────────────────────────── */

.imp-pending-banner {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: color-mix(in srgb, #f59e0b 15%, var(--chat-card));
  color: var(--chat-fg);
  font-size: 13px;
  border-bottom: 1px solid #f59e0b;
}
.imp-pending-icon { font-size: 16px; }
.imp-pending-banner .btn-link {
  background: transparent;
  border: 0;
  color: #d97706;
  cursor: pointer;
  font-weight: 600;
  margin-left: auto;
}

/* ── Approver Inbox List ──────────────────────────────────────────── */

.imp-inbox {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.imp-inbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 10px;
}
.imp-inbox-org {
  font-size: 13px;
  color: var(--chat-fg-soft);
  margin-top: 2px;
}
.imp-inbox-reason {
  font-size: 12px;
  color: var(--chat-fg-muted);
  margin-top: 6px;
  font-style: italic;
}
.imp-inbox-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.btn-link {
  background: transparent;
  border: 1px solid var(--chat-border);
  color: var(--chat-fg);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}
.btn-link:hover { background: var(--chat-surface); }
.btn-link-danger {
  color: #dc2626;
  border-color: color-mix(in srgb, #dc2626 30%, var(--chat-border));
}
.btn-link-success {
  background: #10b981;
  color: white;
  border-color: #10b981;
}

/* ── Wissens-Kategorien im Scope-Drawer (Stufe 2) ─────────────────── */

.chat-scope-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--chat-border);
}
.chat-scope-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chat-fg);
}
.chat-scope-section-head > span:first-child {
  flex: 1;
}
.chat-scope-mini-btn {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--chat-fg-soft);
}
.chat-scope-mini-btn:hover {
  background: color-mix(in srgb, var(--chat-accent) 8%, var(--chat-surface));
  color: var(--chat-fg);
  border-color: var(--chat-accent);
}

/* ── Thinking-Block (live + collapsed) ─────────────────────────────── */

.chat-thinking-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 12px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--chat-accent) 8%, var(--chat-surface));
  border: 1px solid color-mix(in srgb, var(--chat-accent) 30%, var(--chat-border));
  border-radius: 999px;
  font-size: 12px;
  color: var(--chat-fg-soft);
  font-style: italic;
}
.chat-thinking-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid var(--chat-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: chat-thinking-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes chat-thinking-spin { to { transform: rotate(360deg); } }

.chat-thinking-text {
  background: linear-gradient(to right, var(--chat-fg-soft) 20%, var(--chat-fg) 50%, var(--chat-fg-soft) 80%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: chat-thinking-shimmer 2s linear infinite;
  display: inline-block;
}

@keyframes chat-thinking-shimmer {
  from { background-position: 200% center; }
  to { background-position: -200% center; }
}
.chat-thinking-elapsed {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--chat-fg-muted);
  margin-left: auto;
}

.chat-thinking-block {
  margin: 6px 0 12px;
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  background: var(--chat-surface);
  overflow: hidden;
  transition: border-color 200ms ease;
}
.chat-thinking-block[open] {
  border-color: color-mix(in srgb, var(--chat-accent) 40%, var(--chat-border));
}
.chat-thinking-block summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--chat-fg-soft);
  user-select: none;
  list-style: none;
}
.chat-thinking-block summary::-webkit-details-marker { display: none; }
.chat-thinking-block summary:hover { background: var(--chat-card); }
.chat-thinking-icon { font-size: 14px; flex-shrink: 0; }
.chat-thinking-label { font-weight: 600; color: var(--chat-fg); }
.chat-thinking-count {
  margin-left: auto;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--chat-fg-muted);
}
.chat-thinking-chevron {
  width: 14px;
  height: 14px;
  color: var(--chat-fg-muted);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.chat-thinking-block[open] .chat-thinking-chevron {
  transform: rotate(90deg);
}
.chat-thinking-body {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--chat-border);
  background: var(--chat-paper, var(--chat-card));
  font-size: 13px;
  line-height: 1.6;
  color: var(--chat-fg-soft);
  font-style: italic;
  max-height: 50vh;
  overflow-y: auto;
}
.chat-thinking-body p:first-child { margin-top: 0; }
.chat-thinking-body p:last-child { margin-bottom: 0; }

/* ── narrow viewports ─────────────────────────────────────────────── */

@media (max-width: 640px) {
  .chat-breadcrumb-active { max-width: 140px; }
  .chat-hero-illustration { max-height: min(200px, 25vh); }
  .chat-composer { margin: 0 8px; }
  .chat-composer-wrap { padding: 12px 8px 16px; }
}

/* ────────────────────────────────────────────────────────────────
 * Quellen-Redesign (2026-04-26): Inline-Cite-Pills, Sammel-Pill,
 * Sources-Side-Panel, Source-Card.
 * Modal-Vollansicht-Styles folgen weiter unten in Task 5.
 * ──────────────────────────────────────────────────────────────── */

/* ── Inline-Cite-Pill ───────────────────────────────────────────── */
.chat-cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0 1px;
  vertical-align: 1px;
  border-radius: 4px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  color: var(--chat-fg-soft);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.chat-cite:hover {
  background: var(--chat-border);
  color: var(--chat-fg);
}
.chat-cite.is-active {
  background: var(--chat-accent);
  color: #fff;
  border-color: var(--chat-accent);
}
.chat-cite + .chat-cite { margin-left: 4px; }

/* ── Sammel-Pill am Ende der Antwort ────────────────────────────── */
/* ── Sources-Pill (improved): bigger icons, colored per source-type,
     elevated card-look on hover. The pill is the entry point to the
     full sources-drawer. ──────────────────────────────────────────── */
.chat-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  font-size: 12px;
  font-weight: 500;
  color: var(--chat-fg-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all 140ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.chat-summary-pill:hover {
  border-color: var(--chat-accent);
  color: var(--chat-fg);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.chat-summary-pill::after {
  content: "→";
  margin-left: 2px;
  opacity: 0.5;
  transition: transform 140ms ease, opacity 140ms ease;
}
.chat-summary-pill:hover::after {
  transform: translateX(3px);
  opacity: 1;
}
.chat-summary-pill-stack { display: inline-flex; }
.chat-summary-pill-icon {
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border-radius: 6px;
  background: var(--chat-bg);
  border: 1.5px solid var(--chat-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-fg-muted);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.chat-summary-pill-icon:first-child { margin-left: 0; }
.chat-summary-pill-icon.is-wissen {
  background: var(--chat-accent-soft);
  color: var(--chat-accent);
  border-color: var(--chat-accent-soft);
}
.chat-summary-pill-icon.is-personal {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #ddd6fe;
}
.chat-summary-pill-icon.is-document {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.chat-summary-pill-icon svg { width: 12px; height: 12px; }

/* ── Active-Scope-Indicator over the sources-pill — shown when the
     chat is using something other than the default org-wide scope.
     The block below the pill explains in one short line WHAT scope
     produced the answer. ──────────────────────────────────────────── */
.chat-scope-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11px;
  background: var(--chat-bg);
  color: var(--chat-fg-muted);
  border: 1px dashed var(--chat-border);
  font-weight: 500;
}
.chat-scope-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chat-accent);
  animation: scope-pulse 2.4s ease-in-out infinite;
}
@keyframes scope-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}

/* ── Sources-Drawer (rechts, analog chat-scope-drawer) ──────────── */
.chat-sources-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(380px, 85vw);
  background: var(--chat-surface);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  border-left: 1px solid var(--chat-border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.chat-sources-drawer.is-open { transform: translateX(0); }
.chat-sources-drawer-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

/* ── Source-Karte ────────────────────────────────────────────────── */
.chat-source-card {
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.chat-source-card.is-expanded {
  border-color: var(--chat-accent);
}
.chat-source-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: var(--chat-fg);
}
.chat-source-card-num {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  font-size: 10px;
  font-weight: 600;
  color: var(--chat-fg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-source-card.is-expanded .chat-source-card-num {
  background: var(--chat-accent);
  color: #fff;
  border-color: var(--chat-accent);
}
.chat-source-card-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chat-fg-muted);
  flex-shrink: 0;
}
.chat-source-card-icon.is-wissen { color: var(--chat-accent); }
.chat-source-card-icon svg { width: 14px; height: 14px; }
.chat-source-card-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.chat-source-card-preview {
  font-size: 11px;
  color: var(--chat-fg-muted);
  line-height: 1.45;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-source-card-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--chat-border);
}
.chat-source-card-conf {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--chat-fg-muted);
  margin-bottom: 8px;
}
.chat-source-card-bar {
  flex: 1;
  height: 4px;
  background: var(--chat-bg);
  border-radius: 2px;
  overflow: hidden;
}
.chat-source-card-bar-fill {
  height: 100%;
  background: var(--chat-accent);
}
.chat-source-card-snippet {
  font-size: 12px;
  line-height: 1.55;
  color: var(--chat-fg);
  margin-bottom: 10px;
  max-height: 220px;
  overflow-y: auto;
}
.chat-source-card-snippet h1,
.chat-source-card-snippet h2,
.chat-source-card-snippet h3 {
  font-size: 12px;
  font-weight: 600;
  margin: 8px 0 4px;
  color: var(--chat-fg);
}
.chat-source-card-snippet h1 { font-size: 13px; }
.chat-source-card-snippet p { margin: 0 0 6px; }
.chat-source-card-snippet ul,
.chat-source-card-snippet ol { margin: 0 0 6px 18px; padding: 0; }
.chat-source-card-snippet li { margin-bottom: 2px; }
.chat-source-card-snippet strong { color: var(--chat-fg); font-weight: 600; }
.chat-source-card-snippet code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  background: var(--chat-bg);
  padding: 1px 4px;
  border-radius: 3px;
}
.chat-source-card-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.chat-source-card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--chat-fg-muted);
  font-size: 11px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.chat-source-card-action:hover {
  background: var(--chat-bg);
  border-color: var(--chat-border);
  color: var(--chat-fg);
}
.chat-source-card-action svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Bubble-Tag bei Frei-Modus-Antworten */
.chat-bubble-mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-accent) 8%, var(--chat-surface));
  border: 1px solid color-mix(in srgb, var(--chat-accent) 25%, var(--chat-border));
  color: var(--chat-accent);
  font-size: 11px;
  font-weight: 500;
}

/* Web-Modus-Variante (Spec 2026-04-29) — eigene Farbpalette
   damit Web-Antworten visuell von Frei-Antworten zu unterscheiden
   sind. Komponiert mit .chat-bubble-mode-tag, überschreibt nur
   Hintergrund/Border/Text-Farben. */
.chat-bubble-mode-tag.chat-bubble-mode-tag--web,
.bubble-tag-web {
  background: #e6f4ff;
  color: #0353a4;
  border: 1px solid #74c0fc;
}

/* No-Match-Action — bewusste Inline-Eskalation auf Frei-Modus */
.chat-no-match-action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--chat-accent) 4%, var(--chat-bg));
  border: 1px dashed color-mix(in srgb, var(--chat-accent) 35%, var(--chat-border));
  font-size: 12px;
  color: var(--chat-fg);
  flex-wrap: wrap;
}
.chat-no-match-text { color: var(--chat-fg-muted); }
.chat-no-match-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--chat-accent);
  color: #fff;
  border: none;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}
.chat-no-match-btn:hover {
  background: color-mix(in srgb, var(--chat-accent) 88%, black);
}

/* ── Aborted-by-User Badge ────────────────────────────────────
   Dezent grau unter einer (Teil-)Antwort. Zeigt dass der User
   den Stream via Stop-Button abgebrochen hat. Server persistiert
   das Flag — bleibt nach Page-Reload erhalten. */
.chat-aborted-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chat-fg-muted) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--chat-fg-muted) 20%, transparent);
  color: var(--chat-fg-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.chat-aborted-badge svg { opacity: 0.7; }

/* Stop-Modus für den Send-Button: rot-akzentuiert, aktiv klickbar. */
.chat-composer-send.is-stop {
  background: color-mix(in srgb, var(--chat-accent) 88%, black);
}
.chat-composer-send.is-stop:hover {
  background: color-mix(in srgb, var(--chat-accent) 70%, black);
}

/* ── Composer-Controls Container ──────────────────────────────
   Reasoning + Source-Mode als kompakte Dropdown-Buttons unter dem
   Textfeld, ChatGPT/Claude-Stil. Visuell zurückhaltend — die Wahl
   wird ja nur selten geändert. */
.chat-composer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 0;
  padding-left: 4px;
}
.chat-composer-controls > * { margin: 0 !important; }

.chat-mode-dropdown { position: relative; }

.chat-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--chat-fg-muted);
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chat-mode-btn:hover,
.chat-mode-btn.is-open {
  background: var(--chat-bg);
  border-color: var(--chat-border);
  color: var(--chat-fg);
}
.chat-mode-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.chat-mode-chevron {
  width: 11px !important;
  height: 11px !important;
  opacity: 0.55;
  transition: transform 140ms ease;
}
.chat-mode-btn.is-open .chat-mode-chevron { transform: rotate(180deg); }

.chat-mode-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  min-width: 240px;
  background: var(--chat-surface);
  border: 1px solid var(--chat-border);
  border-radius: 12px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.chat-mode-menu-head {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chat-fg-muted);
}
.chat-mode-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--chat-fg);
}
.chat-mode-menu-item:hover { background: var(--chat-bg); }
.chat-mode-menu-item.is-current {
  background: color-mix(in srgb, var(--chat-accent) 8%, transparent);
}
.chat-mode-menu-item > span:first-child {
  display: inline-flex;
  margin-top: 1px;
  color: var(--chat-fg-muted);
}
.chat-mode-menu-item.is-current > span:first-child { color: var(--chat-accent); }
.chat-mode-menu-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-mode-menu-label {
  font-size: 13px;
  font-weight: 500;
}
.chat-mode-menu-item.is-current .chat-mode-menu-label {
  font-weight: 600;
  color: var(--chat-accent);
}
.chat-mode-menu-hint {
  font-size: 11px;
  color: var(--chat-fg-muted);
  line-height: 1.35;
}
.chat-mode-menu-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--chat-accent);
}

/* Static "Wissensbasis"-Hint wenn Frei-Modus org-seitig aus ist */
.chat-mode-static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--chat-fg-muted);
  background: var(--chat-bg);
  cursor: help;
}
.chat-mode-static svg { width: 14px; height: 14px; }

/* Per-Chat Personality skip-toggle (Phase 4.5d-1) */
.chat-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--chat-fg-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  user-select: none;
}
.chat-mode-toggle:hover {
  background: var(--chat-bg);
  border-color: var(--chat-border);
  color: var(--chat-fg);
}
.chat-mode-toggle input[type="checkbox"] { display: none; }
.chat-mode-toggle:has(input:checked) {
  background: color-mix(in srgb, var(--chat-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--chat-accent) 30%, transparent);
  color: var(--chat-accent);
}

/* ── LLM-Error-Block (Spec 2026-04-27) ───────────────────────── */
.chat-error-block {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, #dc2626 6%, var(--chat-bg));
  border: 1px solid color-mix(in srgb, #dc2626 30%, var(--chat-border));
  border-left-width: 4px;
  border-left-color: #dc2626;
}
.chat-error-hint {
  font-size: 13px;
  color: var(--chat-fg-soft);
  line-height: 1.5;
}
.chat-error-detail {
  margin-top: 8px;
  font-size: 11px;
  color: var(--chat-fg-muted);
}
.chat-error-detail summary {
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}
.chat-error-detail summary:hover { color: var(--chat-fg); }
.chat-error-detail pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  color: var(--chat-fg-muted);
}

/* ─── Task 17: Agent output card + emit-output FAB ───────────── */
.chat-output-card-wrapper {
  margin: 12px auto;
  max-width: 720px;
}
.chat-turn-inner {
  /* transparent passthrough wrapper used to satisfy Alpine x-if
     single-root-element requirement inside the x-for loop */
  display: contents;
}
.chat-emit-output-btn {
  position: absolute;
  right: 16px;
  bottom: 80px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent, #16a34a);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  z-index: 10;
  transition: filter 0.15s;
}
.chat-emit-output-btn:hover {
  filter: brightness(1.1);
}

/* refocus-card — Show-and-Refocus surface after routed answers */
.chat-refocus-card {
  margin: 12px 0 16px 56px;     /* aligns with assistant message indent */
  padding: 12px 14px;
  background: var(--color-surface-2, #f5f5f5);
  border: 1px solid var(--color-border-soft, #e9e7e1);
  border-radius: 10px;
  font-size: 13px;
  display: flex; flex-direction: column; gap: 8px;
}
.dark .chat-refocus-card {
  background: var(--color-surface-2, #2a2a32);
  border-color: var(--color-border-soft, #2a2a32);
}
.chat-refocus-card--fallback {
  background: var(--color-warning-bg, #fef3c7);
  border-color: var(--color-warning-border, #fcd34d);
}
.dark .chat-refocus-card--fallback {
  background: var(--color-warning-bg, #78350f);
  border-color: var(--color-warning-border, #d97706);
}
.chat-refocus-card-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.chat-refocus-card-icon {
  font-size: 16px;
}
.chat-refocus-card-title {
  flex: 1;
}
.chat-refocus-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; padding: 0; margin: 0;
}
.chat-refocus-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--color-border-soft, #e9e7e1);
  background: var(--color-surface-1, #ffffff); cursor: default;
}
.dark .chat-refocus-pill {
  border-color: var(--color-border-soft, #2a2a32);
  background: var(--color-surface-1, #1c1c23);
}
.chat-refocus-pill--selected {
  background: var(--color-accent-soft, #dcfce7);
  border-color: var(--color-accent-soft-border, #bbf7d0);
}
.dark .chat-refocus-pill--selected {
  background: var(--color-accent-soft, #052e1f);
  border-color: var(--color-accent-soft-border, #34d399);
}
.chat-refocus-pill--suggested {
  cursor: pointer;
  color: var(--color-accent, #059669);
}
.dark .chat-refocus-pill--suggested {
  color: var(--color-accent, #10b981);
}
.chat-refocus-pill--suggested:hover {
  background: var(--color-accent-soft, #dcfce7);
}
.dark .chat-refocus-pill--suggested:hover {
  background: var(--color-accent-soft, #052e1f);
}
.chat-refocus-pill-source {
  font-weight: 500;
  color: var(--color-text-muted, #8a8a8a);
}
.chat-refocus-pill-title {
  flex: 1;
}
.chat-refocus-pill-remove {
  background: none; border: 0; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 0 0 4px;
  color: var(--color-text-muted, #8a8a8a);
}
.dark .chat-refocus-pill-remove {
  color: var(--color-text-muted, #8a8a8a);
}
.chat-refocus-pill-remove:hover {
  color: var(--color-text, #1a1a1a);
}
.dark .chat-refocus-pill-remove:hover {
  color: var(--color-text, #f5f5f5);
}

.chat-refocus-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.chat-refocus-suggestions-label {
  color: var(--color-text-muted, #8a8a8a); font-size: 12px;
}
.chat-refocus-card-rerun {
  align-self: flex-start;
  padding: 6px 10px; border-radius: 6px;
  background: var(--color-accent, #059669); color: white;
  border: 0; font-size: 12px; cursor: pointer;
}
.dark .chat-refocus-card-rerun {
  background: var(--color-accent, #10b981);
}
.chat-refocus-card-rerun:hover {
  background: var(--color-accent-strong, #047857);
}
.dark .chat-refocus-card-rerun:hover {
  background: var(--color-accent-strong, #059669);
}

/* ══════════════════════════════════════════════════════════════════
 *  RESULT CARDS (Multi-Tool Orchestration)
 *  Inline widgets rendered when Triage dispatches tool_action slots.
 * ═════════════════════════════════════════════════════════════════ */

.chat-result-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.chat-result-card {
  border: 1px solid var(--chat-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--chat-surface);
  animation: magic-rise 280ms ease-out;
  font-size: 13px;
}

/* ── Confirmation ── */
.chat-rc-confirmation {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-rc-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.chat-rc-icon--ok {
  background: color-mix(in srgb, var(--chat-accent) 15%, transparent);
  color: var(--chat-accent);
  font-weight: 700;
}

.chat-rc-icon--err {
  background: #fee2e2;
  color: #b91c1c;
}

html.dark .chat-rc-icon--err {
  background: #3b1111;
  color: #f87171;
}

.chat-rc-msg {
  color: var(--chat-fg);
  font-weight: 500;
}

/* ── Inline Setup-Modal (Sprint 2) ─────────────────────────────────── */
.setup-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  padding: 1rem;
}
.setup-modal {
  background: var(--chat-surface, #fff);
  color: var(--chat-fg, #0f172a);
  border-radius: 16px;
  width: min(560px, 100% - 2rem);
  max-height: calc(100vh - 4rem);
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid var(--chat-border, #e5e7eb);
}
html.dark .setup-modal {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.08);
}
.setup-modal-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--chat-border, #e5e7eb);
}
.setup-modal-logo {
  width: 32px; height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.setup-modal-head h2 {
  flex: 1; min-width: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.setup-modal-close {
  background: none; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0; border-radius: 6px;
  color: var(--chat-fg-muted, #6b7280);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.setup-modal-close:hover {
  background: var(--chat-bg, #f3f4f6);
  color: var(--chat-fg, #0f172a);
}
.setup-modal-close:focus-visible {
  outline: 2px solid var(--chat-accent, #0066ff);
  outline-offset: 2px;
}
.setup-modal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.setup-modal-loading,
.setup-modal-no-fields {
  color: var(--chat-fg-muted, #6b7280);
  font-size: 0.875rem;
  margin: 0.5rem 0;
}
.setup-modal-blocked {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 0.75rem 0.875rem;
  font-size: 0.875rem;
}
html.dark .setup-modal-blocked {
  background: #422006;
  color: #fcd34d;
  border-color: #92400e;
}
.setup-modal-blocked p { margin: 0 0 0.5rem; }
.setup-modal-blocked p:last-child { margin: 0; }
.setup-modal-blocked-actions {
  margin-top: 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.setup-modal-blocked-actions p {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
}
.setup-modal-blocked-fallback {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}
.setup-modal-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.setup-modal-contact-link {
  display: flex; flex-direction: column;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #fcd34d;
  border-radius: 4px;
  color: #78350f;
  text-decoration: none;
  font-size: 0.8125rem;
}
html.dark .setup-modal-contact-link {
  background: rgba(0, 0, 0, 0.25);
  color: #fcd34d;
  border-color: #92400e;
}
.setup-modal-contact-link:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: #f59e0b;
}
html.dark .setup-modal-contact-link:hover {
  background: rgba(0, 0, 0, 0.4);
}
.setup-modal-contact-link strong { font-weight: 600; }
.setup-modal-contact-link small { color: #92400e; opacity: 0.85; }
html.dark .setup-modal-contact-link small { color: #fcd34d; opacity: 0.85; }
.setup-modal-intro {
  font-size: 0.8125rem;
  color: var(--chat-fg-muted, #6b7280);
  margin: 0 0 0.75rem;
}
.setup-modal-intro a {
  color: var(--chat-accent, #0066ff);
  text-decoration: none;
}
.setup-modal-intro a:hover { text-decoration: underline; }
.setup-modal-row {
  margin-bottom: 0.875rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.setup-modal-row label {
  font-size: 0.875rem; font-weight: 500;
}
.setup-modal-hint {
  font-size: 0.75rem;
  color: var(--chat-fg-muted, #6b7280);
  margin: 0;
}
.setup-modal-row input[type="text"],
.setup-modal-row input[type="password"],
.setup-modal-row input[type="number"],
.setup-modal-row select {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--chat-border, #d1d5db);
  border-radius: 8px;
  font-size: 0.875rem;
  background: var(--chat-bg, #fff);
  color: var(--chat-fg, #0f172a);
  transition: border-color 0.15s, box-shadow 0.15s;
}
html.dark .setup-modal-row input,
html.dark .setup-modal-row select {
  background: #111827;
  color: #f4f4f5;
  border-color: rgba(255, 255, 255, 0.08);
}
.setup-modal-row input:focus-visible,
.setup-modal-row select:focus-visible {
  outline: 2px solid var(--chat-accent, #0066ff);
  outline-offset: 1px;
  border-color: var(--chat-accent, #0066ff);
}
.setup-modal-checkboxgroup {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: var(--chat-bg, #f9fafb);
  border: 1px solid var(--chat-border, #e5e7eb);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  margin: 0;
}
.setup-modal-checkboxgroup legend {
  padding: 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.setup-modal-checkboxrow {
  display: flex; gap: 0.5rem; align-items: center;
  font-size: 0.875rem;
  padding: 0.125rem 0;
}
.setup-modal-required { color: #b91c1c; margin-left: 0.15rem; }
.setup-modal-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  margin: 0.75rem 0 0;
}
html.dark .setup-modal-error {
  background: #3b1111;
  color: #f87171;
  border-color: #7f1d1d;
}
.setup-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--chat-border, #e5e7eb);
}
.setup-modal-btn {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.setup-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.setup-modal-btn--secondary {
  background: var(--chat-bg, #f4f4f5);
  color: var(--chat-fg, #0f172a);
  border: 1px solid var(--chat-border, #e5e7eb);
}
.setup-modal-btn--secondary:hover:not(:disabled) {
  background: var(--chat-bg-hover, #e5e7eb);
}
.setup-modal-btn--primary {
  background: var(--chat-accent, #0066ff);
  color: #fff;
}
.setup-modal-btn--primary:hover:not(:disabled) {
  filter: brightness(1.07);
}
.setup-modal-btn:focus-visible {
  outline: 2px solid var(--chat-accent, #0066ff);
  outline-offset: 2px;
}

/* ── Sprint 3: Ambiguous-Source-Picker ─────────────────────────────── */
.chat-rc-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-rc-pick-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-rc-pick-icon {
  display: inline-flex;
  width: 24px; height: 24px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #b45309;
}
html.dark .chat-rc-pick-icon { color: #fbbf24; }
.chat-rc-pick-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--chat-fg, #0f172a);
}
.chat-rc-pick-detail {
  font-size: 14px;
  color: var(--chat-fg, #0f172a);
}
.chat-rc-pick-meta {
  font-size: 12px;
  color: var(--chat-fg-muted, #6b7280);
}
.chat-rc-pick-options {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-rc-pick-option {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.chat-rc-pick-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--chat-surface, #ffffff);
  border: 2px solid color-mix(in srgb, var(--chat-accent) 35%, var(--chat-border));
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
  color: var(--chat-fg, #0f172a);
  font-weight: 500;
}
html.dark .chat-rc-pick-btn {
  background: rgba(255, 255, 255, 0.04);
}
.chat-rc-pick-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--chat-accent) 12%, var(--chat-surface));
  border-color: var(--chat-accent, #0066ff);
}
.chat-rc-pick-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.chat-rc-pick-btn:focus-visible {
  outline: 2px solid var(--chat-accent, #0066ff);
  outline-offset: 2px;
}
.chat-rc-pick-btn:disabled { opacity: 0.55; cursor: progress; }
.chat-rc-pick-logo {
  width: 24px; height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.chat-rc-pick-text {
  display: flex; flex-direction: column;
  min-width: 0;
}
.chat-rc-pick-text strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-rc-pick-text small {
  font-size: 12px;
  color: var(--chat-fg-muted, #6b7280);
}
.chat-rc-pick-pin {
  background: var(--chat-surface, #ffffff);
  border: 2px solid color-mix(in srgb, #f59e0b 50%, var(--chat-border));
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
html.dark .chat-rc-pick-pin {
  background: rgba(255, 255, 255, 0.04);
  color: #fbbf24;
}
.chat-rc-pick-pin:hover:not(:disabled) {
  background: color-mix(in srgb, #f59e0b 18%, var(--chat-surface));
  border-color: #f59e0b;
}
html.dark .chat-rc-pick-pin:hover:not(:disabled) { color: #fbbf24; }
.chat-rc-pick-pin:focus-visible {
  outline: 2px solid var(--chat-accent, #0066ff);
  outline-offset: 2px;
}
.chat-rc-pick-pin:disabled { opacity: 0.55; cursor: progress; }

.chat-rc-pick-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--chat-fg-muted, #6b7280) 12%, transparent);
  color: var(--chat-fg-muted, #6b7280);
}
.chat-rc-pick-option--internal .chat-rc-pick-icon-fallback {
  background: color-mix(in srgb, var(--chat-accent, #0066ff) 14%, transparent);
  color: var(--chat-accent, #0066ff);
}

.chat-rc-pick-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.chat-rc-pick-cancel {
  background: transparent;
  border: none;
  color: var(--chat-fg-muted, #6b7280);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.chat-rc-pick-cancel:hover:not(:disabled) {
  background: var(--chat-bg, #f3f4f6);
  color: var(--chat-fg, #0f172a);
}
.chat-rc-pick-cancel:focus-visible {
  outline: 2px solid var(--chat-accent, #0066ff);
  outline-offset: 2px;
}
.chat-rc-pick-cancel:disabled { opacity: 0.55; cursor: progress; }

/* ── Error ── */
.chat-rc-error {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.chat-rc-cta {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--chat-accent);
  padding: 4px 10px;
  border: 1px solid var(--chat-accent);
  border-radius: 6px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
  cursor: pointer;
}
.chat-rc-cta:hover {
  background: var(--chat-accent);
  color: #fff;
}

.chat-result-card--error {
  border-color: #fca5a5;
  background: #fef2f2;
}

html.dark .chat-result-card--error {
  border-color: #7f1d1d;
  background: #1c1111;
}

/* ── Entity Card ── */
.chat-rc-entity-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.chat-rc-entity-icon {
  font-size: 16px;
}

.chat-rc-entity-title {
  font-weight: 600;
  color: var(--chat-fg);
}

.chat-rc-entity-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
}

.chat-rc-badge--ok {
  background: color-mix(in srgb, var(--chat-accent) 12%, transparent);
  color: var(--chat-accent);
}

.chat-rc-badge--warn {
  background: #fef3c7;
  color: #92400e;
}

html.dark .chat-rc-badge--warn {
  background: #422006;
  color: #fbbf24;
}

.chat-rc-entity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-rc-entity-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--chat-bg);
}

.chat-rc-entity-sub {
  font-size: 12px;
  color: var(--chat-fg-muted);
}

/* ── Document List ── */
.chat-rc-docs-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.chat-rc-docs-icon {
  font-size: 16px;
}

.chat-rc-docs-title {
  font-weight: 600;
  color: var(--chat-fg);
}

.chat-rc-docs-count {
  font-size: 11px;
  color: var(--chat-fg-muted);
  margin-left: auto;
}

.chat-rc-docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-rc-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--chat-bg);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.chat-rc-doc-item.is-clickable,
.chat-rc-mail-item {
  cursor: pointer;
}
.chat-rc-doc-item.is-clickable:hover,
.chat-rc-mail-item:hover {
  background: var(--chat-surface, #fff);
  border-color: var(--chat-accent, #0066ff);
}
.chat-rc-doc-item.is-clickable:active,
.chat-rc-mail-item:active {
  transform: translateY(1px);
}

.chat-rc-doc-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.chat-rc-doc-name {
  font-weight: 500;
  color: var(--chat-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.chat-rc-doc-date {
  font-size: 11px;
  color: var(--chat-fg-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.chat-rc-doc-open {
  font-size: 14px;
  color: var(--chat-fg-muted);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}
.chat-rc-doc-item.is-clickable:hover .chat-rc-doc-open {
  opacity: 1;
  color: var(--chat-accent, #0066ff);
}

.chat-rc-mail-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Table ── */
.chat-rc-table-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.chat-rc-table-icon {
  font-size: 16px;
}

.chat-rc-table-title {
  font-weight: 600;
  color: var(--chat-fg);
}

.chat-rc-table-count {
  font-size: 11px;
  color: var(--chat-fg-muted);
  margin-left: auto;
}

.chat-rc-table-scroll {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--chat-border);
}

.chat-rc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-mono-local);
}

.chat-rc-table th {
  background: var(--chat-bg);
  font-weight: 600;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--chat-border);
  white-space: nowrap;
}

.chat-rc-table td {
  padding: 5px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--chat-border) 50%, transparent);
  white-space: nowrap;
}

.chat-rc-table tr:last-child td {
  border-bottom: none;
}

.chat-rc-table tr:hover td {
  background: color-mix(in srgb, var(--chat-accent) 4%, transparent);
}

/* ── Pending Action (User-Toggled Action-Pipeline) ── */
.chat-rc-pending-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-rc-pa-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-rc-pa-icon {
  font-size: 16px;
}

.chat-rc-pa-title {
  font-weight: 600;
  color: var(--chat-fg);
}

.chat-rc-pa-preview {
  white-space: pre-wrap;
  background: var(--chat-bg, var(--chat-surface));
  border: 1px solid var(--chat-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  margin: 0;
  max-height: 240px;
  overflow: auto;
  color: var(--chat-fg);
}

.chat-rc-pa-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
}

.chat-rc-pa-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}

.chat-rc-pa-badge--reversible {
  background: color-mix(in srgb, var(--chat-accent) 12%, transparent);
  color: var(--chat-accent);
}

.chat-rc-pa-ttl {
  color: var(--chat-fg-muted, color-mix(in srgb, var(--chat-fg) 60%, transparent));
}

.chat-rc-pa-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.chat-rc-pa-btn {
  appearance: none;
  border: 1px solid var(--chat-border);
  background: var(--chat-surface);
  color: var(--chat-fg);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.chat-rc-pa-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--chat-accent) 6%, var(--chat-surface));
}

.chat-rc-pa-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.chat-rc-pa-btn--primary {
  background: var(--chat-accent);
  border-color: var(--chat-accent);
  color: #fff;
}

.chat-rc-pa-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--chat-accent) 90%, #000);
  border-color: color-mix(in srgb, var(--chat-accent) 90%, #000);
}

.chat-rc-pa-consumed {
  font-style: italic;
  font-size: 12px;
  color: var(--chat-fg-muted, color-mix(in srgb, var(--chat-fg) 60%, transparent));
}

.chat-rc-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--chat-accent);
  text-decoration: none;
}

.chat-rc-link:hover {
  text-decoration: underline;
}

/* Phase-2 Empty-State (Connect-Tiles + Beispiel-Prompts) */
.chat-empty-connect,
.chat-empty-prompts {
  max-width: 640px;
  margin: 2rem auto 0;
  padding: 0 1rem;
  text-align: center;
}
.chat-empty-heading {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary, #666);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chat-empty-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.chat-empty-tile {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  padding: 1rem 0.75rem;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  transition: border-color 0.15s, transform 0.15s;
  font-size: 0.875rem;
}
.chat-empty-tile:hover {
  border-color: var(--accent, #0066ff);
  transform: translateY(-1px);
}
.chat-empty-tile-logo { width: 28px; height: 28px; object-fit: contain; }
.chat-empty-tile-more {
  justify-content: center;
  color: var(--accent, #0066ff);
  font-weight: 500;
}

.chat-empty-prompts-list {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-width: 480px;
  margin: 0 auto;
}
.chat-empty-prompt {
  background: var(--surface-2, #f5f5f5);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  transition: border-color 0.15s, background 0.15s;
  color: inherit;
  font-family: inherit;
}
.chat-empty-prompt:hover {
  border-color: var(--accent, #0066ff);
  background: var(--surface-1, #fff);
}

/* ── Phase-2 Task 9: per-chat user-connector toggles ── */
.chat-scope-card--user-connectors {
  margin-top: 0.75rem;
}

/* Phase-3a Task 1: Source-Badge in result-cards */
.chat-rc-source-badge {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--surface-2, #f5f5f5);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 999px;
  color: var(--text-secondary, #666);
  white-space: nowrap;
}

/* Phase-3a Task 2: Mail-Look in document_list */
.chat-rc-mail-item {
  display: block;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border, #e0e0e0);
}
.chat-rc-mail-item:last-child { border-bottom: none; }
.chat-rc-mail-subject {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.15rem;
}
.chat-rc-mail-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #666);
  margin-bottom: 0.25rem;
}
.chat-rc-mail-from { font-style: italic; }
.chat-rc-mail-received::before { content: "·"; margin-right: 0.5rem; }
.chat-rc-mail-snippet {
  font-size: 0.8125rem;
  color: var(--text-secondary, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Phase-3b Task 5: Calendar + Task render-types */
.chat-rc-calendar, .chat-rc-task {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.chat-rc-calendar-head, .chat-rc-task-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.chat-rc-calendar-icon, .chat-rc-task-icon { font-size: 1.1rem; }
.chat-rc-calendar-event-title, .chat-rc-task-text {
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.chat-rc-calendar-time, .chat-rc-task-due, .chat-rc-calendar-attendees {
  font-size: 0.875rem;
  color: var(--text-secondary, #666);
  margin-bottom: 0.25rem;
}
.chat-rc-calendar-link, .chat-rc-task-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--accent, #0066ff);
  text-decoration: none;
}
.chat-rc-calendar-link:hover, .chat-rc-task-link:hover {
  text-decoration: underline;
}

/* Phase-6 Task 3: Pending-Confirmation render */
.chat-rc-pending {
  background: var(--surface-1, #fff);
  border: 1px solid var(--warning, #f0ad4e);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.chat-rc-pending-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.chat-rc-pending-icon { font-size: 1.1rem; }
.chat-rc-pending-action-label {
  margin: 0 0 0.5rem;
  color: var(--text-primary, #000);
  font-size: 0.875rem;
}
.chat-rc-pending-detail {
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.chat-rc-pending-detail-meta {
  font-size: 0.8125rem;
  color: var(--text-secondary, #666);
  margin-bottom: 0.75rem;
}
.chat-rc-pending-actions {
  display: flex; gap: 0.5rem;
}
.chat-rc-pending-btn {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}
.chat-rc-pending-btn--confirm {
  background: var(--accent, #0066ff);
  color: white;
  border-color: var(--accent, #0066ff);
}
.chat-rc-pending-btn--dismiss {
  background: transparent;
  color: var(--text-primary, #000);
}
.chat-rc-pending-btn--dismiss:hover {
  background: var(--surface-2, #f5f5f5);
}
.chat-rc-dismissed {
  font-size: 0.875rem;
  color: var(--text-secondary, #666);
  background: var(--surface-2, #f5f5f5);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-style: italic;
}

/* Phase-8: Recipe-Suggestions render */
.chat-rc-recipe-suggest {
  background: var(--surface-1, #fff);
  border: 1px solid var(--accent, #0066ff);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.chat-rc-recipe-suggest-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.chat-rc-recipe-suggest-icon { font-size: 1.1rem; }
.chat-rc-recipe-suggest-empty {
  font-size: 0.875rem;
  color: var(--text-secondary, #666);
  margin: 0.5rem 0;
}
.chat-rc-recipe-suggest-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.chat-rc-recipe-suggest-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2, #f5f5f5);
  border-radius: 6px;
}
.chat-rc-recipe-suggest-item-icon { font-size: 1.5rem; }
.chat-rc-recipe-suggest-item-body { flex: 1; min-width: 0; }
.chat-rc-recipe-suggest-item-title {
  font-weight: 600;
  font-size: 0.875rem;
}
.chat-rc-recipe-suggest-item-subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-rc-recipe-suggest-btn {
  padding: 0.4rem 0.875rem;
  background: var(--accent, #0066ff);
  color: white;
  border: none; border-radius: 4px;
  cursor: pointer; font-size: 0.8125rem;
  flex-shrink: 0;
}
.chat-rc-recipe-suggest-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.chat-rc-recipe-suggest-more {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--accent, #0066ff);
  text-decoration: none;
}
.chat-rc-recipe-suggest-more:hover { text-decoration: underline; }

.chat-rc-recipe-activated {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #d4edda;
  color: #155724;
  padding: 0.5rem 0.875rem;
  border-radius: 6px;
  font-size: 0.875rem;
}
.chat-rc-recipe-activated a {
  margin-left: auto;
  color: var(--accent, #0066ff);
  text-decoration: none;
}

/* ── Topbar Icon-Button (Verbindungen, etc.) ──────────────────── */
.chat-topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  color: var(--text-secondary, #4b5563);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  margin-right: 0.5rem;
}
.chat-topbar-icon-btn:hover {
  background: var(--surface-2, #f3f4f6);
  border-color: var(--accent, #0066ff);
  color: var(--accent, #0066ff);
}
.chat-topbar-icon-btn svg { width: 16px; height: 16px; }
.chat-topbar-icon-btn-label {
  white-space: nowrap;
}
.chat-topbar-icon-btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--accent, #0066ff);
  color: #fff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 0.125rem;
}
.chat-topbar-icon-btn:hover .chat-topbar-icon-btn-count {
  /* invertiert wenn der Button selber den Akzentfarben-Hover hat */
  background: var(--surface-1, #fff);
  color: var(--accent, #0066ff);
}
@media (max-width: 640px) {
  .chat-topbar-icon-btn-label { display: none; }
}

/* ── Connector-Modal ──────────────────────────────────────────── */
.connmodal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 1rem;
}
.connmodal {
  background: var(--surface-1, #fff);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid var(--border, #e5e7eb);
}
.connmodal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.connmodal-head h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.connmodal-head-actions {
  display: flex; align-items: center; gap: 0.5rem;
}
.connmodal-manage-link {
  font-size: 0.8125rem;
  color: var(--accent, #0066ff);
  text-decoration: none;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.connmodal-manage-link:hover {
  background: var(--surface-2, #f3f4f6);
  text-decoration: underline;
}
.connmodal-close {
  background: none; border: none;
  font-size: 1.75rem; line-height: 1;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  padding: 0 0.25rem;
  border-radius: 4px;
}
.connmodal-close:hover { background: var(--surface-2, #f3f4f6); }
.connmodal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.connmodal-loading {
  text-align: center;
  color: var(--text-secondary, #6b7280);
  padding: 2rem;
}
.connmodal-empty {
  text-align: center;
  color: var(--text-secondary, #6b7280);
  padding: 2rem 1rem;
  font-size: 0.875rem;
}
.connmodal-empty code {
  background: var(--surface-2, #f3f4f6);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.8125rem;
}
.connmodal-section { margin-bottom: 1.25rem; }
.connmodal-section:last-child { margin-bottom: 0; }
.connmodal-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #6b7280);
  font-weight: 600;
}
.connmodal-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.connmodal-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  transition: all 0.2s ease;
}
.connmodal-item:hover {
  border-color: var(--border, #d1d5db);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.connmodal-item-connected {
  background: var(--surface-1, #fff);
  border-color: var(--border, #e5e7eb);
}
.connmodal-logo {
  width: 24px; height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.connmodal-item-name {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.125rem;
}
.connmodal-item-name strong {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connmodal-item-name small {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
}
.connmodal-actions {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.connmodal-action-chip {
  font-size: 11px;
  font-weight: 500;
  color: var(--chat-fg-muted, #6b7280);
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e5e7eb);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.connmodal-cta {
  padding: 0.4rem 1rem;
  background: var(--surface-1, #fff);
  color: var(--text-primary, #111);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.connmodal-cta:hover { 
  background: var(--surface-2, #f9fafb); 
  border-color: var(--border, #9ca3af);
}
.connmodal-cta:disabled { opacity: 0.5; cursor: not-allowed; }
.connmodal-foot {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  text-align: right;
}
.connmodal-foot-link {
  color: var(--accent, #0066ff);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
}
.connmodal-foot-link:hover { text-decoration: underline; }

/* doc-list new structure: <li> is a flex-row, the <a> takes the
   clickable left-portion, ``.chat-rc-doc-actions`` carries the
   info + import buttons as separate siblings so they don't fight
   the link's click-handler. */
.chat-rc-doc-li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  border-radius: 8px;
}
.chat-rc-doc-li:hover {
  background: var(--chat-surface, #f3f4f6);
}
.chat-rc-doc-li > .chat-rc-doc-item {
  flex: 1;
  min-width: 0;
}
.chat-rc-doc-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  flex-shrink: 0;
}
.chat-rc-mail-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.chat-rc-mail-body .chat-rc-mail-subject {
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0;
}
.chat-rc-mail-body .chat-rc-mail-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--chat-fg-muted, #666);
  margin: 0;
}
.chat-rc-mail-body .chat-rc-mail-snippet {
  font-size: 0.8125rem;
  color: var(--chat-fg-muted, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
}

/* ⓘ-Info-Button neben jedem Doc-Item. Lebt jetzt in .chat-rc-doc-actions
   neben dem Link, nicht mehr innerhalb des <a>. */
.chat-rc-doc-info {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--chat-fg-muted, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s, color 0.12s;
  padding: 0;
}
.chat-rc-doc-li:hover .chat-rc-doc-info,
.chat-rc-doc-info:focus-visible {
  opacity: 0.6;
}
.chat-rc-doc-info:hover {
  opacity: 1;
  background: var(--chat-surface, #f3f4f6);
  color: var(--chat-accent, #0066ff);
}

/* 📎 / 📥 — Import-Buttons pro Doku. Standardmäßig schwach sichtbar,
   beim Hover über die Zeile (.chat-rc-doc-item:hover) voll opak. */
.chat-rc-doc-action {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  color: var(--chat-fg-muted, #6b7280);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.12s ease,
              color 0.12s ease, transform 0.12s ease;
  padding: 0;
  margin-left: 2px;
}
/* Hover-Trigger sitzt am <li> (umfasst Link + Action-Row), nicht am
   <a> — sonst verschwinden die Buttons sobald die Maus vom Link auf
   die Buttons fährt. */
.chat-rc-doc-li:hover .chat-rc-doc-action,
.chat-rc-doc-action:focus-visible,
.chat-rc-doc-action[disabled],
.chat-rc-doc-action:not([disabled]):not([data-state="idle"]) {
  opacity: 0.85;
}
.chat-rc-doc-action:hover:not([disabled]) {
  opacity: 1;
  background: var(--chat-surface, #f3f4f6);
  color: var(--accent, #059669);
  transform: scale(1.05);
}
.chat-rc-doc-action[disabled] {
  cursor: progress;
}
.chat-rc-doc-spinner {
  display: inline-block;
  animation: chat-rc-spin 1s linear infinite;
}
@keyframes chat-rc-spin {
  to { transform: rotate(360deg); }
}

/* Doc-Detail-Modal */
.docdetail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  padding: 1rem;
}
.docdetail {
  background: var(--surface-1, #fff);
  border-radius: 10px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.docdetail-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.docdetail-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.docdetail-head h2 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docdetail-close {
  background: none; border: none;
  font-size: 1.5rem; line-height: 1;
  padding: 0 0.25rem;
  border-radius: 4px;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
}
.docdetail-close:hover { background: var(--surface-2, #f3f4f6); }
.docdetail-body {
  padding: 0.5rem 1.125rem 1rem;
  overflow-y: auto;
  flex: 1;
}
.docdetail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.docdetail-table th {
  text-align: left;
  padding: 0.5rem 0.75rem 0.5rem 0;
  width: 38%;
  vertical-align: top;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid var(--border, #f3f4f6);
}
.docdetail-table td {
  padding: 0.5rem 0;
  vertical-align: top;
  word-break: break-word;
  border-bottom: 1px solid var(--border, #f3f4f6);
}
.docdetail-table td a {
  color: var(--accent, #0066ff);
  text-decoration: none;
  word-break: break-all;
}
.docdetail-table td a:hover { text-decoration: underline; }
.docdetail-empty {
  text-align: center;
  color: var(--text-secondary, #6b7280);
  padding: 1.5rem !important;
}
.docdetail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.docdetail-foot-open {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent, #0066ff);
  text-decoration: none;
}
.docdetail-foot-open:hover { text-decoration: underline; }
.docdetail-foot-close {
  padding: 0.4rem 1rem;
  background: var(--surface-2, #f3f4f6);
  color: var(--text-primary, #111);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  font-size: 0.8125rem;
  cursor: pointer;
}
.docdetail-foot-close:hover { background: var(--border, #e5e7eb); }

/* Inline Content-Snippet pro Dokument-Item */
.chat-rc-doc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.chat-rc-doc-body .chat-rc-doc-name {
  /* Override, da die Single-Cell-Variante max-width 70% hat */
  max-width: none;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-rc-doc-snippet {
  font-size: 0.75rem;
  color: var(--chat-fg-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Im Detail-Modal: Inhaltsvorschau mehrzeilig + leicht akzentuiert */
.docdetail-table tr:has(th:contains("Inhaltsvorschau")) td,
.docdetail-table td .summary-block {
  white-space: pre-wrap;
}

/* V3 Lifecycle-Tags im Chat-Connector-Modal */
.connmodal-item.is-needs-admin {
  background: var(--surface-1, #fff);
  opacity: 0.8;
}
.connmodal-item.is-needs-user {
  background: var(--surface-1, #fff);
  border-color: var(--border, #e5e7eb);
}

.lifecycle-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.lifecycle-needs-admin {
  background: var(--surface-1, #fff);
  color: var(--text-secondary, #6b7280);
  border-color: var(--border, #e5e7eb);
}
.lifecycle-needs-user {
  background: var(--surface-1, #fff);
  color: var(--warning, #d97706);
  border-color: var(--warning, #fcd34d);
}
.lifecycle-ready {
  background: var(--surface-1, #fff);
  color: var(--text-secondary, #6b7280);
  border-color: var(--border, #e5e7eb);
}

.connmodal-cta.is-disabled {
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
}

.connmodal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot-ok {
  background: var(--ok, #16a34a);
  /* Very subtle, slow pulse instead of distracting flash */
  animation: pulse-ok-subtle 4s ease-in-out infinite;
}

.status-dot-warn {
  background: var(--warn, #d97706);
}

@keyframes pulse-ok-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}

/* Modern Toggle Switch Styling */
.chat-toggle-wrapper {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.chat-toggle-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: var(--surface-3, #d1d5db);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease-in-out;
  margin: 0;
}

body.theme-dark .chat-toggle-switch {
  background: var(--surface-3, #3f3f46);
}

.chat-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chat-toggle-switch:checked {
  background: var(--chat-accent, #0066ff);
}

.chat-toggle-switch:checked::after {
  transform: translateX(16px);
}

/* ── Premium Detail View Styles ── */
.connmodal-detail-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.connmodal-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2, #f3f4f6);
  color: var(--text-secondary, #4b5563);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.connmodal-back-btn:hover {
  background: var(--surface-3, #e5e7eb);
  color: var(--text-primary, #111);
}
body.theme-dark .connmodal-back-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #a1a1aa;
}
body.theme-dark .connmodal-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.connmodal-detail-title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.connmodal-detail-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--surface-1, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 4px;
}
body.theme-dark .connmodal-detail-logo {
  background: var(--surface-2, #27272a);
}

.connmodal-detail-info h3 {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Settings List Style for Actions */
.connmodal-settings-list {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
body.theme-dark .connmodal-settings-list {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

.connmodal-settings-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  transition: background 0.15s ease;
  background: transparent;
  width: 100%;
  text-align: left;
  border-top: none;
  border-left: none;
  border-right: none;
  color: var(--text-primary, #111);
  font-size: 0.9375rem;
}
.connmodal-settings-row:last-child {
  border-bottom: none;
}
.connmodal-settings-row:hover {
  background: var(--surface-2, #f9fafb);
}
body.theme-dark .connmodal-settings-row {
  border-color: rgba(255, 255, 255, 0.05);
  color: #e4e4e7;
}
body.theme-dark .connmodal-settings-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.connmodal-settings-row-danger {
  color: var(--error, #ef4444) !important;
}
.connmodal-settings-row-danger:hover {
  background: rgba(239, 68, 68, 0.05) !important;
}

.connmodal-settings-icon {
  margin-right: 12px;
  opacity: 0.5;
  display: flex;
  align-items: center;
}
.connmodal-settings-row-danger .connmodal-settings-icon {
  opacity: 1;
  color: var(--error, #ef4444);
}

/* Premium Default Action Chips */
.connmodal-action-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  color: var(--text-secondary, #4b5563);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all 0.2s ease;
  user-select: none;
}
body.theme-dark .connmodal-action-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}

.connmodal-action-chip:hover {
  background: var(--surface-3, #e5e7eb);
  color: var(--text-primary, #111);
  transform: translateY(-1px);
}
body.theme-dark .connmodal-action-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.connmodal-action-chip.is-active {
  background: var(--chat-accent-subtle, #eff6ff);
  border-color: var(--chat-accent, #3b82f6);
  color: var(--chat-accent, #2563eb);
}
body.theme-dark .connmodal-action-chip.is-active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.5);
  color: #60a5fa;
}

.connmodal-action-chip.is-active:hover {
  background: #dbeafe;
}
body.theme-dark .connmodal-action-chip.is-active:hover {
  background: rgba(59, 130, 246, 0.25);
}

/* ── Sub-Spec 2: structured-rows tables + entity-key autolink ── */

.atrium-rows-section {
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.atrium-rows-card {
  border: 1px solid var(--border-soft, #e2e2e2);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--surface, #fff);
}

.atrium-rows-card__head {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  background: var(--surface-soft, #f7f7f5);
  font-size: 0.875rem;
  user-select: none;
  list-style: none;
}

.atrium-rows-card__head::-webkit-details-marker { display: none; }

.atrium-rows-card__label {
  font-weight: 600;
  color: var(--text, inherit);
}

.atrium-rows-card__meta {
  color: var(--text-muted, #888);
  font-size: 0.8125rem;
}

.atrium-rows-card__body {
  padding: 0.5rem 0.75rem 0.75rem;
  overflow-x: auto;
}

.atrium-rows-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.atrium-rows-table th,
.atrium-rows-table td {
  text-align: left;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--border-faint, #f0f0ee);
  vertical-align: top;
}

.atrium-rows-table th {
  font-weight: 600;
  color: var(--text-muted, #555);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.atrium-rows-table tr.is-clickable { cursor: pointer; }
.atrium-rows-table tr.is-clickable:hover {
  background: var(--surface-hover, rgba(0, 0, 0, 0.025));
}

/* ── Sub-Spec 4: filter-badge over structured-rows tables ── */
.atrium-table-filter-badge {
  display: inline-block;
  margin: 4px 12px 8px 12px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--text-muted, #888);
  background: var(--surface-soft, #f7f7f5);
  border-radius: 4px;
  font-family: var(--font-mono-local, ui-monospace, SFMono-Regular, monospace);
}

.atrium-entity-link {
  color: var(--accent, #2c5282);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.atrium-entity-link:hover {
  text-decoration: underline;
}

/* ── record_card (Sub-Spec 8: Dolibarr deep coverage) ─────────── */
.chat-rc-record-card-wrap { display: flex; flex-direction: column; gap: 12px; }
.chat-rc-card {
    border: 1px solid var(--ds-color-border, #d1d5db);
    border-radius: 8px;
    background: var(--ds-color-surface, #fff);
    padding: 14px 16px;
}
.chat-rc-card-head {
    display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px;
    cursor: pointer; user-select: none;
}
.chat-rc-card-head:hover .chat-rc-card-toggle { color: var(--ds-color-text, #1f2937); }
.chat-rc-card-icon { font-size: 22px; line-height: 1; }
.chat-rc-card-titlewrap { flex: 1 1 auto; min-width: 0; }
.chat-rc-card-title { margin: 0; font-size: 16px; font-weight: 600; }
.chat-rc-card-subtitle {
    margin-top: 2px; font-size: 13px;
    color: var(--ds-color-text-muted, #6b7280);
}
.chat-rc-card-toggle {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 2px 6px;
    margin-left: 8px;
    font-size: 14px;
    color: var(--ds-color-text-muted, #6b7280);
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
}
.chat-rc-card-toggle:hover { background: var(--ds-color-surface-hover, #f3f4f6); }
.chat-rc-card-toggle:focus-visible {
    outline: 2px solid var(--ds-color-focus, #2563eb);
    outline-offset: 2px;
}
.chat-rc-card--collapsed .chat-rc-pills { margin-bottom: 0; }
.chat-rc-card--collapsed { padding-bottom: 10px; }
.chat-rc-pills {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.chat-rc-pill {
    display: inline-block; padding: 2px 8px;
    border-radius: 999px; font-size: 12px;
    background: #e5e7eb; color: #1f2937;
}
.chat-rc-pill[data-kind="ok"]   { background: #d1fae5; color: #065f46; }
.chat-rc-pill[data-kind="warn"] { background: #fef3c7; color: #92400e; }
.chat-rc-pill[data-kind="err"]  { background: #fee2e2; color: #991b1b; }
.chat-rc-pill[data-kind="info"] { background: #dbeafe; color: #1e40af; }
.chat-rc-section { margin-top: 12px; }
.chat-rc-section-title {
    margin: 0 0 6px 0; font-size: 13px; font-weight: 600;
    text-transform: uppercase;
    color: var(--ds-color-text-muted, #6b7280);
}
.chat-rc-fields {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0;
}
.chat-rc-field { display: contents; }
.chat-rc-field dt { font-weight: 500; color: var(--ds-color-text-muted, #6b7280); }
.chat-rc-field dd { margin: 0; }
.chat-rc-field-emphasis dd { font-weight: 700; }
.chat-rc-lines {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.chat-rc-lines th, .chat-rc-lines td {
    text-align: left; padding: 4px 8px;
    border-bottom: 1px solid var(--ds-color-border, #e5e7eb);
}
.chat-rc-lines th { font-weight: 600; }
.chat-rc-card-links {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.chat-rc-card-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--ds-color-link, #2563eb);
    text-decoration: none;
}
.chat-rc-card-link:hover { text-decoration: underline; }

/* ── Sub-Spec 10: Action Opportunities ─────────────────────────── */
.chat-rc-card-action {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    padding: 2px 6px;
    margin-left: 4px;
    font-size: 14px;
    color: var(--ds-color-text-muted, #6b7280);
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
}
.chat-rc-card-action:hover {
    background: var(--ds-color-surface-hover, #f3f4f6);
    color: var(--ds-color-text, #1f2937);
}
.chat-rc-card-action:focus-visible {
    outline: 2px solid var(--ds-color-focus, #2563eb);
    outline-offset: 2px;
}

.chat-topbar-save-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    margin-left: 6px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ds-color-text-muted, #6b7280);
    cursor: pointer;
}
.chat-topbar-save-btn:hover {
    background: var(--ds-color-surface-hover, #f3f4f6);
    border-color: var(--ds-color-border, #e5e7eb);
    color: var(--ds-color-text, #1f2937);
}

/* ═══════════════ Action-Opportunity-Modal (SP-10) ═══════════════ */

.action-modal {
    width: min(520px, 100%);
}
.action-modal .modal-body {
    padding-top: 4px;
}

/* State 1 — Aktion wählen (Liste) */
.action-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}
.action-list li + li {
    margin-top: 8px;
}
.action-list-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--chat-fg, #111827);
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s, background-color .15s, transform .12s;
}
.action-list-button:hover {
    border-color: var(--accent, #059669);
    background: var(--accent-soft, rgba(5,150,105,.06));
}
.action-list-button:active {
    transform: translateY(0.5px);
}
.action-list-label {
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.action-list-arrow {
    display: inline-flex;
    color: var(--chat-fg-muted, #6b7280);
    transition: color .15s, transform .15s;
}
.action-list-arrow svg {
    width: 16px;
    height: 16px;
}
.action-list-button:hover .action-list-arrow {
    color: var(--accent, #059669);
    transform: translateX(2px);
}

/* State 2 — Ziel bestätigen */
.action-target-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}
.action-target-sub {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chat-fg-muted, #6b7280);
    font-weight: 600;
}
.action-target-headline {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--chat-fg, #111827);
}
.action-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.action-target-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chat-fg-muted, #6b7280);
    font-weight: 600;
}
.action-target-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--card, #fff);
    color: var(--chat-fg, #111827);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.action-target-select:focus {
    outline: none;
    border-color: var(--accent, #059669);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(5,150,105,.12));
}
.action-target-readonly {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--accent-soft, rgba(5,150,105,.06));
    border: 1px solid color-mix(in srgb, var(--accent, #059669) 25%, transparent);
}
.action-target-readonly .action-target-label {
    color: var(--accent-strong, #047857);
}
.action-target-value {
    font-weight: 600;
    color: var(--chat-fg, #111827);
}
.action-target-empty {
    margin: 0;
    padding: 14px;
    border-radius: 8px;
    background: rgba(245, 158, 11, .08);
    color: #92400e;
    font-size: 13px;
}

/* Loading + empty (state 1) */
.action-modal-loading,
.action-modal-empty {
    text-align: center;
    color: var(--chat-fg-muted, #6b7280);
    padding: 24px 0;
    margin: 0;
    font-size: 14px;
}

/* State 3 — Ergebnis */
.action-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px 8px;
    text-align: center;
}
.action-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 4px;
}
.action-result-icon svg {
    width: 28px;
    height: 28px;
}
.action-result.is-success .action-result-icon {
    background: var(--accent-soft, rgba(5,150,105,.12));
    color: var(--accent, #059669);
}
.action-result.is-error .action-result-icon {
    background: rgba(220, 38, 38, .12);
    color: #b91c1c;
}
.action-result-message {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--chat-fg, #111827);
}
.action-result-detail {
    margin: 0;
    font-size: 13px;
}

/* Footer */
.action-footer-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}
.action-footer-row .btn {
    min-width: 96px;
}
/* On STATE 3 with target_url, the open-link sits left of close. */
.action-result + .action-footer-row,
.action-footer-row a.btn:first-child {
    /* default flex-end is fine; just visual rhythm */
}

/* ── D2b: three-section focus drawer ── */

/* Wissen section: subtle purple tint (matches Mein-Wissen icon) */
.chat-scope-card--wissen {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ede9fe 20%, var(--chat-surface)) 0%,
    var(--chat-surface) 100%
  );
}

/* Connectors section */
.chat-scope-card--connectors {
  /* inherits base card styles; no tint needed */
}

/* Pipelines section */
.chat-scope-card--pipelines {
  /* inherits base card styles; no tint needed */
}

/* System-badge shown on pipeline rows where is_system=true */
.chat-scope-system-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
  color: var(--chat-fg-muted, #6b7280);
  white-space: nowrap;
}

/* Save-as button on pipeline/connector rows (D3) */
.chat-scope-mini-btn--save-as {
  /* inherits .chat-scope-mini-btn base styles */
  opacity: 0.7;
}

/* ── D3: Save-as-Pipeline Modal ── */
.chat-saveas-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.chat-saveas-modal {
  background: var(--chat-bg);
  padding: 24px;
  border-radius: 8px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.chat-saveas-head { font-size: 1.1em; font-weight: 600; margin-bottom: 8px; }
.chat-saveas-help { font-size: 0.9em; color: var(--chat-fg-muted); margin-bottom: 12px; }
.chat-saveas-input {
  width: 100%; padding: 8px;
  border: 1px solid var(--chat-border);
  border-radius: 4px;
  box-sizing: border-box;
  background: var(--chat-bg);
  color: inherit;
}
.chat-saveas-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.chat-saveas-cancel, .chat-saveas-confirm {
  padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 0.95em;
}
.chat-saveas-cancel {
  background: none;
  border: 1px solid var(--chat-border);
  color: inherit;
}
.chat-saveas-confirm {
  background: var(--chat-accent, #4f46e5);
  color: white;
  border: none;
}
.chat-saveas-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Scope-Recall Button (Spec 2 §6 — "Wie letzter Chat") ─────────── */
.chat-scope-recall {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--chat-border, rgba(0,0,0,0.1));
  text-align: center;
}
.chat-scope-recall-btn {
  background: none;
  border: none;
  color: var(--chat-fg-muted, #888);
  cursor: pointer;
  font-size: 0.85em;
  padding: 4px 8px;
  border-radius: 4px;
}
.chat-scope-recall-btn:hover {
  background: var(--chat-row-hover, rgba(0,0,0,0.04));
  color: var(--chat-fg, inherit);
}

/* ─── Wissen sub-rows (folders + categories) ─────────────────────── */
.chat-scope-toggle--master {
  font-weight: 500;
}
.chat-scope-toggle--sub {
  padding-left: 24px;
  font-size: 0.95em;
  color: var(--chat-fg, inherit);
  opacity: 0.92;
}
.chat-scope-sub-leader {
  display: inline-block;
  width: 16px;
  text-align: center;
  color: var(--chat-fg-muted, #aaa);
  font-size: 0.85em;
  flex-shrink: 0;
}

/* ── Multi-step plan timeline (L3 structured_multistep) ──────────── */
.atrium-plan-timeline {
  margin: 12px 0;
  background: var(--chat-surface-2, #f9fafb);
  border: 1px solid var(--chat-border, #e5e7eb);
  border-radius: 8px;
  padding: 0;
  font-size: 0.88em;
}
.atrium-plan-timeline[open] {
  background: var(--chat-surface-1, #ffffff);
}
.atrium-plan-timeline__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.atrium-plan-timeline__head::-webkit-details-marker { display: none; }
.atrium-plan-timeline__head::before {
  content: '▸';
  font-size: 0.7em;
  color: var(--chat-fg-muted, #6b7280);
  transition: transform 0.15s;
  display: inline-block;
}
.atrium-plan-timeline[open] .atrium-plan-timeline__head::before {
  transform: rotate(90deg);
}
.atrium-plan-timeline__icon { font-size: 1.05em; }
.atrium-plan-timeline__title {
  font-weight: 600;
  color: var(--chat-fg, #111827);
}
.atrium-plan-timeline__meta {
  color: var(--chat-fg-muted, #6b7280);
  font-size: 0.92em;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.atrium-plan-timeline__reason {
  padding: 6px 14px 10px 36px;
  color: var(--chat-fg-muted, #4b5563);
  font-size: 0.92em;
  font-style: italic;
  border-bottom: 1px solid var(--chat-border, #e5e7eb);
}
.atrium-plan-timeline__steps {
  list-style: none;
  margin: 0;
  padding: 8px 14px 12px 36px;
  position: relative;
}
.atrium-plan-timeline__steps::before {
  /* vertical track line through bullet column */
  content: '';
  position: absolute;
  left: 24px;
  top: 14px;
  bottom: 16px;
  width: 1.5px;
  background: var(--chat-border, #e5e7eb);
}
.atrium-plan-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  position: relative;
  font-size: 0.92em;
}
.atrium-plan-step__bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.75em;
  font-weight: 700;
  background: var(--chat-surface-2, #f3f4f6);
  border: 1.5px solid var(--chat-border, #d1d5db);
  color: var(--chat-fg-muted, #6b7280);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.atrium-plan-step--done .atrium-plan-step__bullet {
  background: #d1fae5;
  border-color: #10b981;
  color: #065f46;
}
.atrium-plan-step--error .atrium-plan-step__bullet {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}
.atrium-plan-step--timeout .atrium-plan-step__bullet {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}
.atrium-plan-step--skipped .atrium-plan-step__bullet {
  opacity: 0.55;
}
.atrium-plan-step__op {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--chat-fg, #1f2937);
  font-weight: 500;
}
.atrium-plan-step__id {
  color: var(--chat-fg-muted, #9ca3af);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78em;
}
.atrium-plan-step__count {
  color: var(--chat-fg, #6b7280);
  font-size: 0.82em;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.atrium-plan-step__duration {
  color: var(--chat-fg-muted, #9ca3af);
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: right;
}
.atrium-plan-step--done.atrium-plan-step--in-flight .atrium-plan-step__bullet {
  /* placeholder if we later differentiate in-flight steps */
}

/* Plan-Timeline S2: per-step drill-down */
.atrium-plan-step__row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: default;
  font: inherit;
  color: inherit;
}
.atrium-plan-step--clickable .atrium-plan-step__row {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.12s;
}
.atrium-plan-step--clickable .atrium-plan-step__row:hover {
  background: var(--chat-surface-2, #f3f4f6);
}
.atrium-plan-step__chevron {
  color: var(--chat-fg-muted, #9ca3af);
  font-size: 0.8em;
  margin-left: 4px;
  flex-shrink: 0;
}
.atrium-plan-step__detail {
  margin-top: 8px;
  margin-left: 28px;
  padding: 10px 12px;
  background: var(--chat-surface-2, #f9fafb);
  border-radius: 6px;
  border: 1px solid var(--chat-border, #e5e7eb);
  font-size: 0.86em;
  animation: atrium-plan-fade-in 0.14s ease-out;
}
@keyframes atrium-plan-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.atrium-plan-step__message {
  color: var(--chat-fg, #4b5563);
  font-style: italic;
  margin-bottom: 6px;
}
.atrium-plan-step__sample-head {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--chat-fg-muted, #6b7280);
  margin-bottom: 6px;
  font-weight: 600;
}
.atrium-plan-step__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84em;
}
.atrium-plan-step__table th,
.atrium-plan-step__table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--chat-border, #e5e7eb);
  text-align: left;
  vertical-align: top;
}
.atrium-plan-step__table th {
  font-weight: 600;
  color: var(--chat-fg-muted, #6b7280);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.atrium-plan-step__table td {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atrium-plan-step__list {
  margin: 0;
  padding-left: 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
}
.atrium-plan-step__list li {
  margin-bottom: 2px;
}
.atrium-plan-step__scalar {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--chat-surface-1, #ffffff);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--chat-fg, #1f2937);
  display: inline-block;
}
.atrium-plan-step__json {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82em;
  background: var(--chat-surface-1, #ffffff);
  padding: 8px;
  border-radius: 4px;
  max-height: 200px;
  overflow: auto;
  white-space: pre;
  color: var(--chat-fg, #1f2937);
}
.atrium-plan-step__sample-note {
  font-size: 0.8em;
  color: var(--chat-fg-muted, #9ca3af);
  font-style: italic;
  margin-top: 6px;
}

/* ───────── Send-to-Connector panel (chat attachments) ───────── */
.chat-send-panel {
  flex: 1 1 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-size: 13px;
  color: var(--chat-fg, #111827);
  max-width: 560px;
}
.chat-send-panel__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-size: 12px;
  color: var(--chat-fg-muted, #6b7280);
}
.chat-send-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  font-size: 12px;
  color: var(--accent, #059669);
  cursor: pointer;
  font-family: inherit;
}
.chat-send-crumb:hover:not(:disabled) {
  background: var(--accent-soft, rgba(5,150,105,.08));
}
.chat-send-crumb:disabled {
  color: var(--chat-fg-muted, #6b7280);
  cursor: default;
}
.chat-send-crumb.is-current {
  color: var(--chat-fg, #111827);
  font-weight: 600;
  cursor: default;
}
.chat-send-crumb.is-current:hover {
  background: transparent;
}
.chat-send-crumb__icon {
  width: 14px;
  height: 14px;
}
.chat-send-crumb.is-current .chat-send-crumb__icon {
  display: none;
}
.chat-send-crumb__sep {
  opacity: .5;
  user-select: none;
}
.chat-send-panel__close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--chat-fg-muted, #6b7280);
  cursor: pointer;
}
.chat-send-panel__close:hover {
  background: var(--border, #e5e7eb);
  color: var(--chat-fg, #111827);
}
.chat-send-panel__close svg {
  width: 14px;
  height: 14px;
}
.chat-send-panel__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-send-panel__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--chat-fg-muted, #6b7280);
  font-weight: 600;
}
.chat-send-panel__hint {
  font-size: 13px;
  color: var(--chat-fg-muted, #6b7280);
}
.chat-send-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-send-chip {
  padding: 6px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--card, #fff);
  color: var(--chat-fg, #111827);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chat-send-chip:hover {
  border-color: var(--accent, #059669);
  background: var(--accent-soft, rgba(5,150,105,.08));
  color: var(--accent, #059669);
}
.chat-send-targets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  /* subtle scrollbar so it doesn't dominate */
  scrollbar-width: thin;
}
.chat-send-target {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--card, #fff);
  color: var(--chat-fg, #111827);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background-color .15s;
}
.chat-send-target:hover:not(:disabled) {
  border-color: var(--accent, #059669);
  background: var(--accent-soft, rgba(5,150,105,.08));
}
.chat-send-target.is-selected {
  border-color: var(--accent, #059669);
  background: var(--accent-soft, rgba(5,150,105,.12));
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(5,150,105,.20));
}
.chat-send-target:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.chat-send-panel__confirm-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  justify-content: flex-end;
}
.chat-send-confirm-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent, #059669);
  background: var(--accent, #059669);
  color: var(--accent-on, #fff);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
}
.chat-send-confirm-btn:hover:not(:disabled) {
  opacity: 0.88;
}
.chat-send-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-send-target__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-send-target__kind {
  font-size: 11px;
  color: var(--chat-fg-muted, #6b7280);
  text-transform: lowercase;
  flex-shrink: 0;
}
.chat-send-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}
.chat-send-result--ok {
  background: var(--accent-soft, rgba(5,150,105,.08));
  color: var(--accent, #059669);
}
.chat-send-result--err {
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
}
.chat-send-result__icon {
  font-weight: 700;
}
.chat-send-result__open {
  margin-left: auto;
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

/* Scope-Badge auf Send-Connector-Chips: 'Org' vs 'Persönlich' */
.chat-send-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-send-chip__scope {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1;
}
.chat-send-chip__scope.is-org {
  background: var(--accent-soft, rgba(5,150,105,.10));
  color: var(--accent-strong, #047857);
}
.chat-send-chip__scope.is-user {
  background: rgba(99, 102, 241, .10);
  color: #4338ca;
}

/* ── Chat-Attachment-Pills (light + dark via design tokens) ── */

.chat-attachment-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.chat-attachment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.chat-attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  background: var(--card, #fff);
  font-size: 13px;
  color: var(--chat-fg, #111827);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.chat-attachment-pill:hover {
  border-color: var(--accent, #059669);
  background: var(--accent-soft, rgba(5,150,105,.06));
}
.chat-attachment-pill__icon {
  font-size: 14px;
}
.chat-attachment-pill__name {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-attachment-pill__size {
  opacity: 0.6;
  font-size: 11px;
}
.chat-attachment-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  background: transparent;
  color: var(--chat-fg, #111827);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chat-attachment-send-btn:hover {
  border-color: var(--accent, #059669);
  background: var(--accent-soft, rgba(5,150,105,.06));
  color: var(--accent, #059669);
}