/* ─── Chat: Transkript, Blasen, Markdown, Composer, Warteschlange, Upload, Modell-/Agent-Picker, rechte Leiste ─── */

/* Chat transcript: conversation bubbles */

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  padding-bottom: 18px;
}

.chat-messages .empty-state {
  align-self: stretch;
  flex: 1;
}

.chat-day-sep {
  align-self: center;
  margin: var(--space-3) 0 var(--space-2);
  line-height: 1;
}

.chat-day-sep span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: var(--chat-bubble-shadow);
}

.chat-message {
  --chat-collapse-h: 24em;
  position: relative;
  width: fit-content;
  max-width: min(78%, 42rem);
  padding: 7px 12px 5px;
  animation: fadeIn 150ms ease;
  overflow: visible;
  border: none;
  box-shadow: none;
  filter: drop-shadow(var(--chat-bubble-shadow));
  display: flex;
  flex-direction: column;
  border-radius: 16px;
}

/* Loaded history (conversation switch) must appear at once, not fade in bubble
   by bubble — that staggered entrance looked like a broken, seconds-long
   animation. Only live-arriving bubbles keep the fadeIn. */

.chat-message.no-enter-anim {
  animation: none;
}

.chat-message.user {
  align-self: flex-end;
  background: var(--chat-user-bg);
  color: var(--text-primary);
  font-size: var(--fs-base);
  margin: 0;
  border-radius: 16px;
  /* Enger als die Antwort: eine Frage ist selten ein Aufsatz. Bei 78% wirkte
     schon ein Zweizeiler wie ein Balken ueber die ganze Breite. */
  max-width: min(66%, 36rem);
}

/* Zentrierte Lesespalte. Statt jedes Kind zu zentrieren, bekommt der
   Container seitliches Padding, das den Rest der Breite aufteilt. Dann
   funktionieren align-self: flex-start/flex-end der Kinder unveraendert,
   und die Nutzerblase sitzt rechts an der Spalte, ohne Margin-Arithmetik. */
.chat-messages {
  padding-left: max(var(--space-4), calc((100% - var(--read-width, 46rem)) / 2));
  padding-right: max(var(--space-4), calc((100% - var(--read-width, 46rem)) / 2));
}

/* Der Agent ist das Dokument, der Nutzer die Anmerkung am Rand. Deshalb
   kein Kasten um die Antwort: sie liest sich wie Text, nicht wie ein
   Chatverlauf zweier gleicher Partner. Volle Lesebreite, kein Schatten. */
.chat-message.assistant {
  align-self: stretch;
  width: auto;
  max-width: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: 0;
  padding: var(--space-1) 0 var(--space-2);
  filter: none;
}
/* Ausnahmen behalten ihren Kasten: Status, Rueckfrage, Fehler, Aktivitaet. */
.chat-message.assistant.status-bubble,
.chat-message.assistant.ask-card,
.chat-message.assistant.error-msg,
.chat-message.assistant.agent-todos-bubble {
  align-self: flex-start;
  width: fit-content;
  max-width: min(78%, 42rem);
  background: var(--chat-agent-bg);
  border-radius: 16px;
  padding: 7px 12px 5px;
}

.chat-message.user + .chat-message.assistant:not(.status-bubble),
.chat-message.assistant + .chat-message.user,
.chat-day-sep + .chat-message {
  margin-top: var(--space-4);
}

/* Two answer bubbles from the same side in a row (e.g. the agent emits several
   bubbles) would otherwise only get the 2px base gap and stick together. */

.chat-message.assistant:not(.status-bubble) + .chat-message.assistant:not(.status-bubble),
.chat-message.user + .chat-message.user {
  margin-top: 10px;
}

.message-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.chat-message.user .message-header {
  justify-content: flex-end;
}

.message-sender {
  display: none;
}

.message-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-1);
  margin-top: 2px;
  min-height: 14px;
}

.message-time {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

.chat-message.user .message-time {
  color: color-mix(in srgb, var(--text-primary) 62%, transparent);
}

.message-clip {
  position: relative;
  min-width: 0;
}

.message-content {
  font-size: var(--fs-base);
  line-height: 1.45;
  color: inherit;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: visible;
}

.chat-message.is-collapsed .message-clip {
  max-height: var(--chat-collapse-h);
  overflow: hidden;
}

.chat-message.is-collapsed .message-clip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.8em;
  pointer-events: none;
  /* Agent ist Fliesstext auf der Flaeche, nicht in einer Blase. */
  background: linear-gradient(to bottom, transparent, var(--bg-surface));
}

.chat-message.user.is-collapsed .message-clip::after {
  background: linear-gradient(to bottom, transparent, var(--chat-user-bg));
}

.msg-expand {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  align-self: center;
  width: 36px;
  height: 22px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.chat-message.user .msg-expand {
  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
}

.chat-message.is-expandable .msg-expand {
  display: inline-flex;
}

.chat-message.is-collapsed.is-expandable .msg-expand {
  position: relative;
  z-index: var(--z-raised);
  margin-top: -2.2em;
  height: 28px;
}

.msg-expand:hover,
.msg-expand:focus-visible {
  color: var(--text-primary);
}

.message-content > *:first-child { margin-top: 0; }

.message-content > *:last-child { margin-bottom: 0; }

.agent-body > *:first-child { margin-top: 0; }

.agent-body > *:last-child { margin-bottom: 0; }

.message-content p { margin: 0 0 8px; }

.message-content p:last-child { margin-bottom: 0; }

/* ── Headings ── */

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
  color: var(--text-primary);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
  line-height: 1.3;
}

.message-content h1 { font-size: 1.3em; }

.message-content h2 { font-size: 1.15em; }

.message-content h3 { font-size: 1.05em; }

.message-content h4 { font-size: 1em; color: var(--text-secondary); }

.message-content > h1:first-child,
.message-content > h2:first-child,
.message-content > h3:first-child { margin-top: 0; }

/* ── Emphasis ── */

.message-content strong { color: var(--text-primary); font-weight: 600; }

/* ── Inline code ── */

.message-content code {
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.88em;
  /* Nur brechen, wenn es sonst nicht passt: break-all riss kurze Bezeichner
     wie DATA mitten im Wort auseinander, obwohl daneben Platz zum Umbruch war. */
  word-break: normal;
  overflow-wrap: anywhere;
  border: 1px solid var(--border-light);
}

/* ── Code blocks ── */

.message-content pre {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-3) 0;
}

.message-content pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--font);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: 0 var(--radius-md) 0 var(--radius-sm);
  border-bottom: 1px solid var(--border-light);
  border-left: 1px solid var(--border-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.message-content pre code {
  background: none;
  padding: 0;
  border: none;
  font-size: var(--fs-sm);
  line-height: 1.55;
  word-break: normal;
}

/* ── Lists ── */

.message-content ul, .message-content ol {
  margin: var(--space-2) 0 var(--space-3);
  padding-left: 22px;
}

.message-content li {
  margin-bottom: var(--space-1);
  line-height: 1.6;
}

.message-content li > p { margin-bottom: 4px; }

/* ── Blockquote ── */

.message-content blockquote {
  border-left: 3px solid var(--border-strong);
  padding: 8px 14px;
  margin: var(--space-3) 0;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.message-content blockquote p:last-child { margin-bottom: 0; }

/* ── Horizontal rule ── */

.message-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}

/* ── Tables ── */

.message-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: 0.92em;
  overflow-x: auto;
  display: block;
}

.message-content thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.message-content tbody {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.message-content th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  font-size: 0.88em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}

.message-content td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: top;
}

.message-content tbody tr:hover td {
  background: var(--bg-secondary);
}

.message-content tbody tr:last-child td {
  border-bottom: none;
}

/* ── Links ── */

.message-content a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

.message-content a:hover {
  text-decoration-color: var(--text-secondary);
}

.message-error {
  padding: 10px 14px;
  background: var(--error-muted);
  border-radius: var(--radius-md);
  color: var(--error);
  font-size: var(--fs-sm);
}

/* Thinking Block */

.thinking-block {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.thinking-block summary {
  cursor: pointer;
  padding: 5px 10px;
  background: var(--bg-tertiary);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background var(--transition-fast);
  list-style: none;
}

.thinking-block summary::-webkit-details-marker { display: none; }

.thinking-block summary::before {
  content: '\25B6';
  font-size: 0.5rem;
  transition: transform 150ms ease;
  display: inline-block;
}

.thinking-block[open] summary::before {
  transform: rotate(90deg);
}

.thinking-label {
  font-style: italic;
}

.thinking-text {
  padding: 8px 10px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}

/* Action timeline (tool calls) */

.agent-actions:empty,
.agent-thinking:empty { display: none; }

.agent-actions-block {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.agent-actions-block summary {
  cursor: pointer;
  padding: 5px 10px;
  background: var(--bg-tertiary);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-actions-block summary::-webkit-details-marker { display: none; }

.agent-actions-block summary::before {
  content: '\25B6';
  font-size: 0.5rem;
  transition: transform 150ms ease;
  display: inline-block;
}

.agent-actions-block[open] summary::before { transform: rotate(90deg); }

.agent-actions-label { font-weight: 500; }

.agent-actions-list {
  padding: var(--space-1) 0;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
}

.agent-action-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.agent-action-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
}

.agent-action-verb { flex-shrink: 0; }

.agent-action-detail {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.agent-action-count {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.7;
}

.message-actions {
  display: flex;
  gap: 2px;
  margin-top: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.chat-message.user:hover .message-actions,
.chat-message.user:focus-within .message-actions {
  opacity: 1;
}

.chat-message.user .message-actions {
  justify-content: flex-end;
}

/* Mit Maus: die Aktionen schweben links neben der Blase und reservieren
   keinen Platz. Vorher stand in jeder Nutzerblase eine leere Zeile von 30px
   unter dem Zeitstempel, nur damit Kopieren/Bearbeiten beim Hover Platz haben. */
@media (hover: hover) {
  .chat-message.user .message-actions {
    position: absolute;
    right: 100%;
    bottom: 4px;
    margin: 0 6px 0 0;
    flex-direction: row;
  }
}

.chat-message.user .msg-action {
  color: color-mix(in srgb, var(--text-primary) 70%, transparent);
}

.msg-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.msg-action:hover { background: var(--bg-hover); color: var(--text-primary); }

@media (hover: none) {
  /* Auf Touch werden die Aktionen erst nach Antippen der Blase sichtbar — vorher
     dürfen sie keinen Platz reservieren, sonst bleibt eine Phantom-Zeile unter
     dem Zeitstempel stehen. */
  .message-actions {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
  .chat-message.user.actions-open .message-actions {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Streaming */

.chat-message.streaming {
  animation: fadeIn 200ms ease;
}

.chat-message.streaming .message-content {
  min-height: 1.2em;
}

/* Status bubble (typing indicator in message flow) */

.chat-message.status-bubble {
  padding: 6px 12px;
  min-height: 28px;
  min-width: 44px;
  box-sizing: border-box;
  background: var(--chat-agent-bg);
  border: none;
  /* Bounded like normal bubbles: a long tool detail must ellipsize, not
     stretch the indicator across the full row. */
  max-width: min(78%, 26rem);
  width: fit-content;
  align-self: flex-start;
  margin-top: 14px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  animation: none;
  /* Always after every bubble, even if the DOM briefly inserts it mid-list. */
  order: 1;
}

.status-bubble .status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 0;
  overflow: hidden;
  background: none;
  border: none;
  border-radius: 0;
  width: fit-content;
}

.status-bubble .status-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* The indicator sets line-height:0 for the dots — inherited by the text
     spans it collapsed their line box to zero height, and the container's
     overflow:hidden then clipped the glyphs into unreadable half-letters. */
  line-height: 1.3;
}

.status-bubble .status-text:empty {
  display: none;
}

.thinking-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 21px;
  height: 5px;
  line-height: 0;
}

.thinking-dots span {
  display: block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typingDot 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }

.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Agent todos (persistent element during agent run) */

.agent-todos-bubble {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: none;
}

.agent-todo-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
  transition: color 0.2s, opacity 0.2s;
}

.agent-todo-icon {
  flex-shrink: 0;
  width: 12px;
  text-align: center;
  font-size: 10px;
}

.agent-todo-item.active {
  color: var(--text-secondary);
  font-weight: 500;
}

.agent-todo-item.done {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Suchfeld im Modell-Dropdown (ab MODEL_SEARCH_THRESHOLD Modellen) */

.model-search-wrap {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  padding: 6px;
  background: var(--bg-elevated, var(--bg-secondary));
  border-bottom: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.25));
}

.model-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.3));
  border-radius: 6px;
  outline: none;
}

.model-search:focus {
  border-color: var(--accent, #3b5cf6);
}

.model-search-empty {
  padding: 10px 14px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Werkzeugspur und Denkspur eines laufenden Turns (im Todo-Container) */

.activity-section {
  margin-top: 6px;
}

.activity-section > summary {
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  list-style: none;
  padding: 2px 0;
  user-select: none;
}

.activity-section > summary::-webkit-details-marker { display: none; }

.activity-section > summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  font-size: 10px;
  transition: transform 0.15s;
}

.activity-section[open] > summary::before { transform: rotate(90deg); }

.activity-section > summary:hover { color: var(--text-secondary); }

.activity-body {
  max-height: 220px;
  overflow-y: auto;
  margin: var(--space-1) 0 0 var(--space-3);
  padding-left: var(--space-2);
  border-left: 2px solid var(--border-subtle, rgba(127, 127, 127, 0.25));
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.activity-trace-row {
  padding: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-think-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-style: italic;
}

/* ─── Composer als schwebende Karte ──────────────────────────────────────
   Textfeld oben, darunter eine Fusszeile mit Anhang, Modell, Nachdenken und
   Senden. Das ist das Muster von Codex, OpenClaw und Hermes: die Steuerung
   des naechsten Turns sitzt am Eingabefeld, nicht in einer Seitenleiste.
   Die Karte liegt in derselben Lesespalte wie der Verlauf. */
.composer-card {
  width: 100%;
  max-width: var(--read-width, 46rem);
  margin: 0 auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: visible; /* Dropdowns der Picker duerfen raus */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.composer-card:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-muted);
}
/* Das Textfeld traegt keinen eigenen Rahmen mehr, die Karte hat ihn. */
.composer-card .chat-composer {
  background: transparent;
  border: none;
  border-radius: 18px 18px 0 0;
}
.composer-card .chat-composer:focus-within { border-color: transparent; }
.composer-card .composer-input { padding: 14px 16px 8px; min-height: 44px; }

/* Fusszeile luftiger: links Anhang, rechts Modell, Nachdenken, Senden als
   eine Gruppe. Dazwischen Luft. Genau die Anordnung von OpenClaw und Codex. */
.composer-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px 10px 10px;
  min-width: 0;
}
.composer-spacer { flex: 1; }
.composer-pickers {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
}
.composer-picker { min-width: 0; }
.composer-picker .agent-selector-group-sidebar,
.composer-picker .agent-selector { min-width: 0; max-width: 100%; }
/* Picker im Composer: kleiner, ohne Kasten, wie Beschriftungen. */
.composer-picker .agent-selector-group-sidebar { width: auto; }
.composer-picker .agent-selector-btn {
  padding: 6px 10px;
  font-size: var(--fs-xs);
  background: var(--bg-tertiary);
  border-color: transparent;
  border-radius: 999px;
  color: var(--text-secondary);
  max-width: 220px;
}
.composer-picker .agent-selector-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Symbol und Sheet-Titel des Nachdenk-Chips nur am Handy (mobile.css). */
.thinking-chip-icon, .agent-selector-dropdown .sheet-title { display: none; }
.composer-actions { display: flex; align-items: center; gap: var(--space-1); }

/* Bereich um die Karte: kein eigener Rand oben, Hintergrund wie der Verlauf. */
.chat-input-area { border-top: none; background: transparent; padding: 0 var(--space-4) var(--space-3); }

/* Schwebende Karte, deshalb Luft zum Verlauf: das letzte Element scrollt
   nicht mehr unter den Rand des Composers. */
.chat-messages { padding-bottom: var(--space-6); }

/* ─── Waiting queue (follow-up prompts held back from the transcript) ─── */

.prompt-queue {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* Gleiche Lesespalte wie die Composer-Karte, nicht Containerbreite. */
  width: 100%;
  max-width: var(--read-width, 46rem);
  margin: 0 auto var(--space-2);
  padding: 8px 10px;
  background: var(--composer-field-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.prompt-queue[hidden] {
  display: none;
}

.queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.queue-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.queue-count {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.queue-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.queue-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

.queue-text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-composer {
  flex: 1;
  min-width: 0;
  background: var(--composer-field-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.chat-composer:focus-within {
  border-color: var(--border-strong);
}

.composer-input {
  flex: 1;
  resize: none;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.35;
  min-height: 32px;
  max-height: calc(1.35em * 4 + 12px);
  overflow-y: auto;
  /* Safari mit „Rollbalken immer einblenden“ zeigte sonst einen grauen
     horizontalen Balken unter der Zeile (01.11.2026). */
  overflow-x: hidden;
  overflow-wrap: anywhere;
  field-sizing: content;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.composer-input::placeholder {
  color: var(--text-muted);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  opacity: 1;
}

@media (pointer: coarse) {
  /* Nie unter 16px: auf dem iPad war das 14px, iOS zoomte beim Fokus. */
  .composer-input {
    font-size: 16px;
    line-height: 1.4;
    padding: 8px 12px;
    min-height: 40px;
  }
  /* Fingergerechte Ziele (Apple: 44pt), Icons bleiben dezent. */
  .composer-send, .composer-stop, .composer-attach { width: 38px; height: 38px; }
  .composer-picker .agent-selector-btn { width: 38px; height: 38px; }
  .msg-action, .msg-rate, .code-copy { min-width: 36px; min-height: 36px; }
}

.composer-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--text-muted);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.composer-send:not(:disabled) {
  background: var(--chat-send-bg);
}

.composer-send:not(:disabled):active {
  transform: scale(0.9);
}

.composer-send:disabled {
  opacity: 0.35;
  cursor: default;
}

.composer-send svg {
  width: 15px;
  height: 15px;
  margin-left: 1px;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Etwas mehr Luft zwischen Eingabe-Pill und den rechten Buttons (nur rechts,
     der Abstand Plus↔Pill bleibt unverändert). */
  margin-left: var(--space-1);
  flex-shrink: 0;
  padding-bottom: 0;
}

.composer-stop {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--error);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.composer-stop[hidden] {
  display: none;
}

.composer-stop:not(:disabled):active {
  transform: scale(0.9);
}

.composer-stop:disabled {
  opacity: 0.3;
  cursor: default;
}

.composer-stop svg {
  width: 16px;
  height: 16px;
}

/* Composer Attach + File Preview */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.composer-attach {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transition: color var(--transition-fast), background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.composer-attach:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.composer-attach svg {
  width: 22px;
  height: 22px;
}

.file-preview {
  display: none;
}

.file-preview.has-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--space-2) var(--space-3) 0;
}

.file-preview-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  max-width: 200px;
  animation: fadeIn 150ms ease;
}

.file-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.file-thumb-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.file-preview-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.file-preview-name {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview-size {
  font-size: 10px;
  color: var(--text-muted);
}

.file-preview-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.file-preview-remove:hover {
  color: var(--error);
}

/* Drop Overlay */

.drop-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-drop);
  background: rgba(var(--bg-surface-rgb, 26,26,26), 0.85);
  border: 2px dashed var(--text-muted);
  border-radius: var(--radius-md);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.drop-overlay.visible {
  display: flex;
}

.drop-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.drop-overlay-content svg {
  opacity: 0.6;
}

/* File Chips in Messages */

.message-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: 6px;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px 2px 5px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.file-chip svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.file-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Agent Selector */

.agent-selector-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.agent-backend-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.agent-backend-btn {
  padding: 5px 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.agent-backend-btn + .agent-backend-btn {
  border-left: 1px solid var(--border);
}

.agent-backend-btn.active {
  background: var(--bg-hover);
  color: var(--text-primary);
  font-weight: 600;
}

.agent-backend-btn:hover:not(.active) {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.agent-list-error {
  margin: 0 var(--space-3) var(--space-2);
  padding: 8px 10px;
  font-size: var(--fs-xs);
  color: var(--danger, #e05353);
  background: color-mix(in srgb, var(--danger, #e05353) 8%, transparent);
  border-radius: var(--radius-sm);
}


.agent-list-retry {
  margin-left: 6px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.agent-sidebar-notice {
  margin: 0 var(--space-3) var(--space-2);
  padding: 8px 10px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

.agent-sidebar-notice.error {
  color: var(--danger, #e05353);
  background: color-mix(in srgb, var(--danger, #e05353) 8%, transparent);
}

.project-name-plain {
  color: var(--text-muted);
  font-size: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-expiry-banner {
  margin: 0;
  padding: 6px 16px;
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.demo-expiry-banner.warn {
  color: var(--warning, #e0a030);
  background: color-mix(in srgb, var(--warning, #e0a030) 10%, transparent);
}

.model-provider-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

.model-provider-hint.warn {
  color: var(--warning, #e0a030);
  background: color-mix(in srgb, var(--warning, #e0a030) 15%, transparent);
}

.model-key-warning {
  margin: var(--space-2) 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--warning, #e0a030);
}

.agent-list-retention-hint {
  margin: 0 var(--space-3) var(--space-2);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.agent-item-rename {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: 10px 12px;
  cursor: default;
}

.agent-rename-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--fs-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.agent-rename-actions {
  display: flex;
  gap: 6px;
}

.agent-selector {
  position: relative;
  margin-right: 0;
}

.model-selector-btn {
  color: var(--text-muted);
  opacity: 0.8;
}

.agent-selector-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.agent-selector-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

.agent-selector-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 140px;
  z-index: var(--z-dropdown);
  display: none;
}

.agent-selector-dropdown.open {
  display: block;
}

.agent-option {
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--transition-fast);
}

.agent-option:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }

.agent-option:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }

.agent-option:hover {
  background: var(--bg-hover);
}

.agent-option.active {
  color: var(--text-primary);
  font-weight: 500;
}

.agent-option .check {
  opacity: 0;
  font-size: var(--fs-sm);
}

.agent-option.active .check {
  opacity: 1;
}

.agent-option.disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Provider Badge in Model Selector */

.model-provider-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  color: #fff;
}

.model-provider-badge.anthropic {
  background: #d97706;
}

.model-provider-badge.openai {
  background: #10a37f;
}

.model-provider-badge.cursor {
  background: #6366f1;
}

.model-provider-badge.claude {
  background: #c15f3c;
  font-size: 8px;
}

/* Grouped Model Dropdown */

.model-dropdown-grouped {
  min-width: 240px;
}

.model-group-header {
  padding: 6px 14px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  pointer-events: none;
  user-select: none;
  border-top: 1px solid var(--border);
}

.model-group-header.disabled {
  opacity: 0.45;
}

.model-group-header:first-child {
  border-top: none;
}

@media (max-width: 600px) {
  .chat-message {
    padding: 6px 10px 4px;
  }
  .chat-messages .message-content pre {
    margin: var(--space-2) 0;
    max-width: 100%;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
  }
  .message-content table {
    font-size: 0.85em;
  }
  .message-content th,
  .message-content td {
    padding: 6px 8px;
  }
}

@media (min-width: 768px) {
  .session-list-header {
    padding: var(--space-5) var(--space-8) var(--space-4);
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .session-list-header {
    padding: var(--space-6) var(--space-12) var(--space-5);
  }
}

/* ─── Tablet: Chat / Session ─── */

@media (min-width: 768px) {



  .chat-message {
    padding: 8px 12px 6px;
  }

  .chat-message.user {
    margin: 0;
    padding: 8px 12px 6px;
    font-size: var(--fs-base);
  }

  .chat-messages {
    padding-top: 14px;
    padding-bottom: 18px;
  }

  .message-content {
    font-size: var(--fs-base);
    line-height: 1.5;
  }

  .message-content pre {
    padding: var(--space-4);
  }

  .chat-input-area {
    padding: var(--space-2) var(--space-6);
  }

  .composer-input {
    max-height: calc(1.35em * 4 + 12px);
  }

  .status-bubble .status-indicator {
    padding: 0;
  }

  .agent-selector-btn {
    padding: 6px 12px;
    font-size: var(--fs-sm);
  }
}

@media (min-width: 1024px) {
  .chat-message {
    padding: 8px 12px 6px;
  }

  .chat-message.user {
    margin: 0;
  }

  .chat-messages {
    padding-top: var(--space-4);
    padding-bottom: var(--space-5);
  }

  .chat-input-area {
    padding: var(--space-2) var(--space-10);
  }

  .status-bubble .status-indicator {
    padding: 0;
  }
}

/* Interactive ask_user question card */

.chat-message.ask-card {
  border: 2px solid var(--accent, var(--border));
  border-radius: 18px 18px 18px 6px;
  background: color-mix(in srgb, var(--accent, #3b82f6) 12%, var(--bg-secondary));
  padding: 12px 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
  max-width: min(92%, 28rem);
  width: 100%;
}

.ask-card-pending .ask-sender {
  color: var(--accent, var(--text-primary));
  font-weight: 700;
}

.ask-card.answered {
  opacity: 0.85;
  border-color: var(--border);
  background: transparent;
}

.ask-card .message-sender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ask-question {
  font-size: var(--fs-md, 15px);
  font-weight: 600;
  color: var(--text-primary);
  margin: 4px 0 10px;
  line-height: 1.4;
}

.ask-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ask-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ask-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--surface, transparent);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.ask-option:hover {
  border-color: var(--accent, var(--text-secondary));
}

.ask-option input {
  accent-color: var(--accent, #4c8bf5);
  margin: 0;
  flex-shrink: 0;
}

.ask-custom {
  width: 100%;
  resize: vertical;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
}

.ask-custom:focus {
  outline: none;
  border-color: var(--accent, var(--text-secondary));
}

.ask-actions {
  display: flex;
  justify-content: flex-end;
}

.ask-error {
  color: var(--danger, #e0533d);
  font-size: 12px;
  min-height: 0;
}

.ask-error:empty {
  display: none;
}

.ask-answer {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: 8px 11px;
  border-left: 2px solid var(--accent, var(--border));
  background: var(--accent-muted);
  border-radius: 0 6px 6px 0;
}

/* Session List */

.session-list-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.session-list-title {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-status-badge {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  flex-shrink: 0;
}

.session-status-badge.active {
  background: var(--success-muted);
  color: var(--success);
}

.session-status-badge.ended {
  background: var(--accent-muted);
  color: var(--text-muted);
}

/* ─── Agent sidebar (multi-agent per project) ───────────── */



/* Clear conversation/context — always visible in the console header. */

.clear-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.clear-history-btn:hover { background: var(--bg-hover); color: var(--danger, #e5484d); }

.clear-history-btn:disabled { opacity: 0.4; cursor: not-allowed; }




/* Drei Zonen der rechten Leiste: Modell (oben, kompakt), Unterhaltungen
   (Mitte, waechst und scrollt), Verbrauch + Aktionen (unten). Vorher stand



.thinking-selector .agent-selector-btn:disabled {
  opacity: 0.45;
  cursor: default;
}




.agent-selector-group-sidebar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-selector-group-sidebar .agent-selector {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.agent-selector-group-sidebar .agent-selector-btn {
  width: 100%;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--bg-primary);
  opacity: 1;
}

.agent-selector-group-sidebar .agent-selector-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.agent-selector-group-sidebar .model-selector-btn {
  color: var(--text-primary);
  opacity: 1;
}




.agent-search {
  position: relative;
  padding: 0 12px 10px;
  flex-shrink: 0;
}

.agent-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-60%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
}

.agent-search-input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  font-size: var(--fs-sm);
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

.agent-search-input:focus { border-color: var(--accent, var(--text-secondary)); }

.agent-search-input::placeholder { color: var(--text-muted); }

/* Footer actions: per-project/agent operations bundled in the sidebar so the
   header keeps a single entry point. */

.agent-list-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
}

.agent-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.agent-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.agent-action-btn svg { flex-shrink: 0; color: var(--text-muted); }

.agent-action-btn:hover svg { color: var(--text-secondary); }

.agent-action-btn.danger { color: var(--error); }

.agent-action-btn.danger svg { color: var(--error); }

.agent-action-btn.danger:hover { background: var(--bg-hover); color: var(--error); }


.agent-list-group { display: flex; flex-direction: column; gap: 2px; }

.agent-list-empty {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.agent-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

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

.agent-item.active {
  background: var(--bg-tertiary);
  border-color: var(--border-light);
}

.agent-item.archived { opacity: 0.7; }

.agent-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}

.agent-dot-cursor   { background: #7c83ff; }

.agent-dot-claude   { background: #d97757; }

.agent-dot-opencode { background: #4caf94; }

.agent-dot-pi       { background: #8b5cf6; }

/* Geteilte Unterhaltung eines anderen Mitglieds: Initiale am Zeilenende. */
.agent-item-owner {
  flex-shrink: 0; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 600; line-height: 1;
  color: var(--text-secondary); background: var(--bg-tertiary); border: 1px solid var(--border);
}
.agent-item:hover .agent-item-owner, .agent-item.active .agent-item-owner { display: none; }

/* Nachricht eines anderen Mitglieds in einer geteilten Unterhaltung. */
.chat-message.user .message-author {
  margin-bottom: 2px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
}

.agent-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.agent-item-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-item-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-item-menu-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.agent-item:hover .agent-item-menu-btn,
.agent-item.active .agent-item-menu-btn { opacity: 1; }

.agent-item-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

@media (hover: none) {
  .agent-item-menu-btn { opacity: 1; }
}

.agent-item-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 8px;
  z-index: var(--z-sticky);
  min-width: 150px;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.agent-menu-action {
  text-align: left;
  padding: 7px 10px;
  font-size: var(--fs-sm);
  font-family: var(--font);
  color: var(--text-primary);
  background: none;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
}

.agent-menu-action:hover { background: var(--bg-hover); }

.agent-archive-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
}

.agent-archive-toggle:hover { background: var(--bg-hover); color: var(--text-secondary); }

.agent-archive-toggle svg { transition: transform var(--transition-fast); }

.agent-archive-toggle.open svg { transform: rotate(90deg); }

.agent-archive-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.agent-list-group-archived { margin-top: 2px; }

/* ─── Handover: pass a conversation to another project/console ─── */

.modal-card-handoff {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  max-height: min(82vh, 640px);
}

.handoff-body {
  overflow-y: auto;
  min-height: 0;
}

.handoff-empty {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 8px 0 2px;
}

.handoff-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.handoff-target {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.handoff-target:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
}

.handoff-target:disabled {
  cursor: default;
  opacity: 0.55;
}

.handoff-target.loading {
  opacity: 0.7;
}

.handoff-target-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.handoff-target-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handoff-target-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ── Robustheit/UX: Verbindungs-Banner, Scroll-Pill, Kontext-Meter,
      Queue-Entfernen, Code-Kopieren, Ältere-laden (Optimierungsplan 2026-08) ── */

.conn-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 8px 14px;
  font-size: 0.8rem;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--warning, #b45309) 14%, var(--bg-secondary));
  border-bottom: 1px solid color-mix(in srgb, var(--warning, #b45309) 30%, transparent);
}

.conn-banner[hidden] { display: none; }

.conn-banner .conn-retry {
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}

.conn-banner .conn-retry:hover { border-color: var(--accent); color: var(--accent); }

.scroll-bottom-btn {
  position: absolute;
  right: 16px;
  bottom: calc(var(--composer-h, 64px) + var(--kb-inset, 0px) + 16px);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: var(--z-sticky);
}

.scroll-bottom-btn:hover { color: var(--accent); border-color: var(--accent); }

.scroll-bottom-btn[hidden] { display: none; }

/* Verbrauch (Kontext + Kosten) in der rechten Leiste, bei Modell/Nachdenken */

.sidebar-usage {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sidebar-usage.is-high { color: var(--danger, #dc2626); font-weight: 600; }

.queue-item { position: relative; }

.queue-remove {
  margin-left: auto;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}

.queue-remove:hover { color: var(--danger, #dc2626); background: var(--bg-hover, rgba(0,0,0,0.06)); }

.chat-message pre { position: relative; }

.code-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chat-message pre:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }

@media (hover: none) { .code-copy { opacity: 0.7; } }

.code-copy:hover { color: var(--accent); border-color: var(--accent); }

.load-older-btn {
  display: block;
  margin: 4px auto 12px;
  padding: 6px 14px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
}

.load-older-btn:hover { color: var(--accent); border-color: var(--accent); }

.load-older-btn:disabled { opacity: 0.6; cursor: default; }

.status-bubble .status-elapsed {
  color: var(--text-tertiary, var(--text-secondary));
  font-size: 0.72rem;
  margin-left: var(--space-1);
  line-height: 1.3; /* see .status-text — undo the inherited line-height:0 */
  /* Never wraps or gets squeezed — the (ellipsizing) label yields instead. */
  white-space: nowrap;
  flex-shrink: 0;
}

.status-bubble .status-elapsed:empty {
  display: none;
}

.status-bubble .thinking-dots {
  flex-shrink: 0;
}

/* ── Provider-Farben im Modell-Picker: Claude-Orange / Cursor-Grau ── */

:root {
  --provider-claude: #d97757; /* Anthropic-„Clay" — lesbar auf hell & dunkel */
  --provider-cursor: #8a8f98; /* neutrales Cursor-Grau */
}

.model-dropdown-grouped .agent-option.provider-claude .model-name,
.model-group-header.provider-claude,
.model-selector-btn .model-name.provider-claude {
  color: var(--provider-claude);
}

.model-dropdown-grouped .agent-option.provider-cursor .model-name,
.model-group-header.provider-cursor,
.model-selector-btn .model-name.provider-cursor {
  color: var(--provider-cursor);
}

/* Aktives Modell bleibt provider-gefärbt, nur kräftiger statt umgefärbt. */

.model-dropdown-grouped .agent-option.active .model-name {
  font-weight: 600;
}

/* OpenCode-Provider-Farbe im Modell-Picker (Claude orange, Cursor grau, OpenCode teal) */

:root {
  --provider-opencode: #14b8a6;
}

.model-dropdown-grouped .agent-option.provider-opencode .model-name,
.model-group-header.provider-opencode,
.model-selector-btn .model-name.provider-opencode {
  color: var(--provider-opencode);
}

/* Pi (pi.dev): Violett, unterscheidbar von Claude-Orange und OpenCode-Teal. */

:root {
  --provider-pi: #8b5cf6;
}

.model-dropdown-grouped .agent-option.provider-pi .model-name,
.model-group-header.provider-pi,
.model-selector-btn .model-name.provider-pi {
  color: var(--provider-pi);
}

/* Bleibende Fehler-Blase im Transkript (statt nur 5s-Toast) */

.chat-message.error-msg {
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, var(--chat-agent-bg));
  border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
}

.chat-message.error-msg .error-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--danger, #dc2626);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.chat-message.error-msg .error-content svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Agent Platform Auto Mode ─────────────────────────────────────────────
   Eigene Farbe und ein Abzeichen am Picker-Knopf: der Modus darf mit den
   Auto-Modi der Anbieter nicht verwechselt werden. */

:root {
  --provider-platform-auto: #7c5cff;
}

.model-dropdown-grouped .agent-option.provider-platform-auto .model-name,
.model-group-header.provider-platform-auto,
.model-selector-btn .model-name.provider-platform-auto {
  color: var(--provider-platform-auto);
}

.model-group-header.provider-platform-auto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.model-group-hint {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.model-auto-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--provider-platform-auto);
}

/* Antwort-Fußzeile: welches Modell geschrieben hat, plus Daumen. */

.message-model {
  color: var(--text-muted);
  font-size: 11px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-rate {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.chat-message.assistant:hover .message-rate,
.chat-message.assistant:focus-within .message-rate,
.message-rate:has(.is-set) {
  opacity: 1;
}

.msg-rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.msg-rate:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Vorlesen (Kurzfassung): leiser Lautsprecher, pulsiert beim Laden, faerbt beim Sprechen. */
.msg-speak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.msg-speak:hover { background: var(--bg-hover); color: var(--text-primary); }
.msg-speak.is-loading { animation: msg-speak-pulse 1s ease-in-out infinite; }
.msg-speak.is-playing { color: var(--provider-platform-auto); }
@keyframes msg-speak-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .msg-speak.is-loading { animation: none; opacity: 0.5; } }
@media (max-width: 600px) { .msg-speak { width: 30px; height: 30px; } }

.msg-rate.is-set { color: var(--provider-platform-auto); }

@media (hover: none) {
  /* Ohne Hover bleiben die Daumen dauerhaft sichtbar, aber zurückhaltend. */
  .message-rate { opacity: 0.6; }
  .msg-rate { width: 30px; height: 30px; }
}

/* ── Aenderungskarte unter einer Antwort ("Was hat sich geaendert?") ──────
   Zugeklappt ein Satz mit Dateinamen, aufgeklappt je Datei die Zeilen.
   Bewusst ohne Zeilennummern und Hunk-Koepfe: das ist eine Lesehilfe fuer
   Menschen ohne Diff-Werkzeug-Erfahrung, kein Code-Review-Tool. */
.message-changes:empty { display: none; }
.message-changes { margin-top: 2px; }
.message-time.has-stats { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }

.chg-card {
  /* Kein Kasten mehr: eine leise Textzeile unter der Antwort, Details erst
     nach dem Aufklappen. */
  border: none;
  background: transparent;
}
.chg-card[open] {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  overflow: hidden;
}
.chg-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
}
.chg-card[open] .chg-summary { padding: 8px 10px; width: 100%; display: flex; }
.chg-summary:hover { color: var(--text-primary); }
.chg-caret { display: inline-flex; transition: transform 0.15s; }
.chg-card[open] .chg-caret { transform: rotate(180deg); }
.chg-tally-row { padding: 4px 10px 6px; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; border-top: 1px solid var(--border); }
.chg-summary::-webkit-details-marker { display: none; }
.chg-headline { font-weight: 500; flex-shrink: 0; }
.chg-tally, .chg-file-tally {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}
.chg-card[open] 
.chg-body { border-top: 1px solid var(--border); }
.chg-file { border-bottom: 1px solid var(--border); }
.chg-file:last-of-type { border-bottom: none; }
.chg-file-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-xs);
  min-width: 0;
}
.chg-file-head::-webkit-details-marker { display: none; }
.chg-file-head:hover { background: var(--bg-hover); }
.chg-path {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.chg-status {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.chg-status-added   { background: var(--success-muted, rgba(52, 168, 83, 0.15)); color: var(--success, #34a853); }
.chg-status-deleted { background: var(--error-muted, rgba(220, 53, 69, 0.15));   color: var(--error, #dc3545); }

.chg-lines {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  padding: 4px 0 6px;
  background: var(--bg-secondary);
}
.chg-line {
  padding: 0 10px 0 22px;
  white-space: pre;
  position: relative;
}
.chg-line::before {
  position: absolute;
  left: 8px;
  color: inherit;
  opacity: 0.7;
}
.chg-ctx { color: var(--text-muted); }
.chg-add { background: var(--success-muted, rgba(52, 168, 83, 0.12)); color: var(--text-primary); }
.chg-add::before { content: '+'; }
.chg-del { background: var(--error-muted, rgba(220, 53, 69, 0.12)); color: var(--text-secondary); text-decoration: line-through; text-decoration-color: rgba(220, 53, 69, 0.45); }
.chg-del::before { content: '−'; }
.chg-gap { height: 6px; border-top: 1px dashed var(--border); margin: 4px 10px; }
.chg-note { padding: 6px 10px; margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }

/* Handy: Zeilen umbrechen statt scrollen, die Datei-Kopfzeile darf zweizeilig. */
@media (max-width: 860px) {
  .chg-line { white-space: pre-wrap; word-break: break-all; }
  }

/* ── Antwortmodus: der Agent fragt, das Eingabefeld antwortet ─────────────
   Die Leiste sitzt direkt ueber dem Composer, dort ist der Blick ohnehin.
   Optionen als Knoepfe, das Eingabefeld bekommt Rahmen und Platzhalter. */
.answer-strip {
  /* Gleiche Lesespalte wie die Composer-Karte. */
  width: 100%;
  max-width: var(--read-width, 46rem);
  margin: 0 auto var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-muted);
  animation: fadeIn 150ms ease;
}
.answer-strip[hidden] { display: none; }
.answer-strip-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.answer-strip-label {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.answer-strip-q {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.answer-strip-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  align-self: center;
}
.answer-strip-dismiss:hover { color: var(--text-primary); background: var(--bg-hover); }
.answer-strip-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.answer-opt {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.answer-opt:hover { border-color: var(--accent); }
.answer-opt.is-picked { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Eingabefeld im Antwortmodus: sichtbar anders, aber nicht laut. */
.chat-input-area.answering .chat-composer {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

/* Als Rueckfrage erkannte Textantwort (opencode/cursor): leiser Akzent links. */
.chat-message.assistant.is-question {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}

@media (max-width: 860px) {
  .answer-strip, .prompt-queue { max-width: none; }
  /* Label ueber der Frage statt daneben (daneben blieb am Handy nur eine
     schmale Spalte), Frage auf zwei Zeilen gekappt: der volle Text steht
     ohnehin in der Karte im Verlauf. */
  .answer-strip-head { flex-wrap: wrap; row-gap: 2px; }
  .answer-strip-label { order: 0; flex: 1 1 auto; }
  .answer-strip-dismiss { order: 1; }
  .answer-strip-q {
    order: 2; flex: 1 0 100%;
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}


/* ── Gefaltete Aktivitaet nach dem Turn ("4 Arbeitsschritte, Gedanken") ── */
.chat-message.assistant.activity-done {
  align-self: stretch;
  width: auto;
  max-width: none;
  background: transparent;
  border-radius: 0;
  padding: 0 0 var(--space-1);
  filter: none;
}
.activity-done-summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 4px 0;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.activity-done-summary::-webkit-details-marker { display: none; }
.activity-done-summary::before {
  content: '';
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  opacity: 0.6;
  flex-shrink: 0;
}
.activity-done-summary:hover { color: var(--text-secondary); }
.activity-done > div { padding: 4px 0 6px 18px; }

/* Zeile unter der Antwort: Dauer, Token, Werkzeuge. */

/* Verbrauch der Unterhaltung, klein in der Composer-Fusszeile. */
.composer-usage {
  margin-left: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-usage.is-high { color: var(--danger, #dc2626); font-weight: 600; }


/* ── Modell-Panel nach OpenClaw: Suchfeld oben, Provider als Gruppen mit Punkt
   und Zugangsart, grosszuegige Zeilen, Haken am aktiven Modell. ── */
.model-dropdown-grouped { padding: 0 0 4px; border-radius: var(--radius-lg); }
/* Sticky-Suchfeld deckend und mit dem oberen Abstand des Panels: sonst
   scrollen Eintraege sichtbar hinter bzw. ueber das Feld. */
.model-dropdown-grouped .model-search-wrap { padding: 10px 10px 8px; border-bottom: none; background: var(--bg-elevated, var(--bg-secondary)); }
.model-dropdown-grouped .model-search { padding: 9px 12px; border-radius: 10px; font-size: var(--fs-sm); }
.model-dropdown-grouped .model-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 6px;
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: none; letter-spacing: 0;
  color: var(--text-primary);
}
.model-group-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.85; flex-shrink: 0; }
.model-group-hint {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-muted);
}
.model-dropdown-grouped .agent-option {
  padding: 10px 14px 10px 30px;
  font-size: var(--fs-sm);
  border-radius: 10px;
  margin: 0 6px;
}
.model-dropdown-grouped .agent-option.active { background: var(--accent-muted); box-shadow: inset 3px 0 0 var(--accent); }
.model-dropdown-grouped .agent-option .check { color: var(--accent); }
.model-ctx { margin-left: auto; margin-right: 8px; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.model-dropdown-grouped .agent-option { display: flex; align-items: center; gap: 8px; }
.model-dropdown-grouped .agent-option .model-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chg-revert { margin-left: 8px; padding: 2px 8px; font: inherit; font-size: var(--fs-xs); color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.chg-file-head:hover .chg-revert, .chg-revert:focus-visible { opacity: 1; }
.chg-revert:hover { color: var(--text-primary); border-color: var(--text-muted); }
.chg-revert.is-done { opacity: 1; color: var(--success, #2a7); border-color: transparent; cursor: default; }
@media (hover: none) { .chg-revert { opacity: 1; } }

/* Anhaenge: Bilder als Vorschau, Klick oeffnet gross. */
.file-thumb { position: relative; display: inline-block; max-width: 220px; max-height: 160px; border-radius: 10px; overflow: hidden; background: var(--bg-tertiary); line-height: 0; }
.file-thumb img { display: block; max-width: 220px; max-height: 160px; object-fit: cover; }
.file-thumb-gone { display: none; }
.file-thumb.is-gone { width: 160px; height: 60px; line-height: 60px; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); cursor: default; }
.file-thumb.is-gone .file-thumb-gone { display: block; }
a.file-chip { text-decoration: none; color: inherit; }
a.file-chip:hover { background: var(--bg-hover); }
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); cursor: zoom-out; padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow-lg); }
.lightbox-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 600px) { .file-thumb, .file-thumb img { max-width: 100%; max-height: 200px; } }

/* Bilder in Agent-Antworten (Workspace-Dateien über den Datei-Endpunkt). */
.message-content img.md-image { display: block; max-width: 100%; max-height: 480px; height: auto; margin: 8px 0; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-tertiary); cursor: zoom-in; }

/* dex: schlichter Assistent-Chat */
.dex-empty .dex-empty-avatar { border-radius: 14px; box-shadow: var(--shadow-md); margin-bottom: 8px; }
.dex-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; max-width: 34rem; }
.dex-suggest-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.dex-suggest-btn:hover { border-color: var(--accent); }
.ws-dex-avatar { border-radius: 5px; }
.ws-dex-avatar, .dex-empty .dex-empty-avatar { border-radius: 50%; }

/* Modell- und Nachdenken-Picker dezent: Text statt Pille, Anbieterfarbe gedämpft. */
.composer-picker .agent-selector-btn { background: none; padding: 4px 6px; color: var(--text-muted); }
.composer-picker .agent-selector-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.composer-picker .model-selector-btn .model-name[class*="provider-"] { color: var(--text-muted); }
.composer-picker .agent-selector-btn:hover .model-name[class*="provider-"] { color: var(--text-secondary); }
.composer-picker .agent-selector-btn svg { opacity: .6; }

/* Composer: Picker nur als sprechende Icons (Name im Tooltip, Liste beim Antippen). */
.composer-picker .agent-selector-btn { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
.composer-picker .agent-selector-btn > .model-name,
.composer-picker .agent-selector-btn > svg,
.composer-picker .agent-selector-btn > .model-auto-badge { display: none; }
.composer-picker .picker-icon { display: inline-flex; color: var(--text-muted); }
.composer-picker .agent-selector-btn:hover .picker-icon,
.composer-picker .agent-selector-btn[aria-expanded="true"] .picker-icon { color: var(--text-primary); }

/* dex-Chat: Kopf mit Lichtaugen fest oben mittig, Augen klimpern. */
.ws-header:has(.dex-head) { position: relative; justify-content: center; }
.ws-header:has(.dex-head) .ws-crumb { position: absolute; left: 50%; transform: translateX(-50%); }
.ws-header:has(.dex-head) .ws-crumb-sep, .ws-header:has(.dex-head) .ws-crumb-cur { display: none !important; }
.ws-header:has(.dex-head) .ws-right { margin-left: auto; }
.dex-head { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.dex-face { border-radius: 50%; box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
.dex-head-name { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); }
.dex-eyes { transform-origin: 128px 126px; animation: dex-blink 5s infinite; }
@keyframes dex-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { .dex-eyes { animation: none; } }
.ws-crumb .ws-name.dex-head { max-width: none; overflow: visible; }

/* dex: Kopf als eigener, fester Bereich über dem Verlauf (nicht im Seitenkopf). */
.dex-sticky {
  position: sticky; top: 0; z-index: var(--z-raised); display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 0 8px; background: linear-gradient(var(--bg-primary) 75%, transparent);
}
.dex-sticky .dex-face { border-radius: 50%; box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
.dex-empty .dex-empty-avatar { display: none; }
.dex-sticky .dex-head-name { font-size: var(--fs-sm); }

/* Zeitstempel und Meta-Zeile nie unter 11px (waren 10px, auf dem Handy kaum lesbar). */
.message-time, .message-meta { font-size: max(11px, var(--fs-xs)); }
/* Dex-Vorschläge am Handy als ruhige Liste statt umbrechender Pillen. */
@media (max-width: 600px) {
  .dex-suggest { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
  .dex-suggest-btn { border-radius: var(--radius-md); text-align: left; padding: 11px 14px; }
}