/* ════════════════════════════════════════════════════════════════════════════
   Session-Ansicht (Webchat)
   Leitidee: Prosa in der Spalte, Daten in voller Breite. Fließtext bleibt in
   einer ruhigen Lesespalte (max. ~70 Zeichen) und scrollt nie seitwärts.
   Tabellen und Code-Blöcke brechen aus der Spalte aus, nutzen die ganze Breite
   und scrollen dort waagerecht — ihr Inhalt beginnt bündig mit dem Text.
   ════════════════════════════════════════════════════════════════════════════ */

#sv{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative}

/* ── Kopfzeile der Session ───────────────────────────────────────────────── */
#sh{
  position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;
  min-height:var(--bar-h);padding:0 12px 0 20px;
  background:var(--ground);border-bottom:1px solid var(--line);
}
#sh-menu-btn{display:none}
.sh-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
#sh-title{min-width:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sh-badge{flex-shrink:0}
#session-status{display:none;align-items:center;gap:7px;flex-shrink:0;font-size:13px;font-weight:500;white-space:nowrap}
#session-status.running{display:inline-flex;color:var(--agent)}
#session-status.idle{display:inline-flex;color:var(--ok)}
#session-status::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
#session-status.running::before{animation:pulse 1.4s ease-in-out infinite}
#session-status .status-spinner{display:none!important}
/* Arbeitslinie: läuft am unteren Rand der Kopfzeile, solange der Agent arbeitet */
#sv.is-running #sh::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--agent) 45%,var(--agent) 55%,transparent 100%);
  background-size:40% 100%;background-repeat:no-repeat;
  animation:workline 1.8s var(--ease) infinite;
}
@keyframes workline{0%{background-position:-40% 0}100%{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){#sv.is-running #sh::after{animation:none;background:var(--agent);opacity:.6}}

/* Modell / Effort / Konto (Desktop) */
.sh-ctl{position:relative;flex-shrink:0}
#model-btn,#effort-btn,#account-btn{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px 0 11px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast);
}
#model-btn:hover,#effort-btn:hover,#account-btn:hover{background:var(--surface);border-color:var(--line-3)}
#model-btn svg:last-child,#effort-btn svg:last-child,#account-btn svg:last-child{color:var(--ink-3)}
#effort-btn #effort-label{color:var(--signal-ink)}
#model-menu,#effort-menu,#account-menu{
  display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:420;min-width:180px;
  padding:6px;border-radius:var(--r-lg);background:var(--raised);border:1px solid var(--line-2);box-shadow:var(--shadow-float);
}
.em-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;padding:0 11px;border-radius:var(--r-sm);
  font-size:14px;color:var(--ink);cursor:pointer;
}
.em-item:hover{background:var(--raised-2)}
.em-item.active{font-weight:600;color:var(--signal-ink)}
.em-item.active::after{content:'';width:9px;height:5px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
#end-btn{min-height:34px;padding:0 12px;font-size:13px;background:transparent;color:var(--danger);border:1px solid var(--danger-line);font-weight:500}
#end-btn:hover:not(:disabled){background:var(--danger-wash);filter:none}
#resume-btn{min-height:34px;padding:0 13px;border-radius:var(--r-sm);background:var(--signal);color:var(--on-signal);font-size:13px;font-weight:600}
#resume-btn:hover{filter:brightness(1.06)}

/* Handy & schmale Spalten: EIN Knopf (Modell | Effort) → Bottom-Sheet */
#sess-chip{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:1;min-width:0;max-width:56%;height:36px;
  padding:0 10px 0 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink);font-size:13.5px;font-weight:600;
}
#sess-chip:active{background:var(--raised)}
#sess-chip-model{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sess-chip-effort{flex-shrink:0;color:var(--signal-ink);white-space:nowrap}
.sc-div{width:1px;height:14px;background:var(--line-2);flex-shrink:0}
#sess-chip.no-effort .sc-div,#sess-chip.no-effort #sess-chip-effort{display:none}
#sess-chip svg{color:var(--ink-3)}
@media (min-width:768px){#app:not(.mode-vscode) #sess-chip{display:none!important}}

/* Hinweis für Sessions aus der alten Terminal-Ansicht */
#term-legacy{flex:1;display:none;align-items:center;justify-content:center;padding:32px var(--pad)}
#sv.is-legacy #term-legacy{display:flex}
#sv.is-legacy #chat-wrap{display:none!important}
.legacy-card{max-width:30rem}
.legacy-card h3{font-size:21px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.legacy-card p{color:var(--ink-2);font-size:15px;line-height:1.55;margin-bottom:18px}
.legacy-card .btn{min-height:44px}

/* ── Verlauf ─────────────────────────────────────────────────────────────── */
#chat-wrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#chat-stream{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  container-type:inline-size;container-name:chat;
  display:flex;flex-direction:column;gap:18px;padding:28px 0 24px;
  -webkit-overflow-scrolling:touch;
}
#chat-stream>*{
  flex-shrink:0;
  width:min(100cqw - 2 * var(--pad),var(--col-max));margin-inline:auto;
}

/* Nachrichten */
.chat-bubble{display:flex;flex-direction:column;position:relative}
.chat-bubble.user{align-items:flex-end}
.chat-bubble-body{font-size:var(--chat-fs);line-height:1.62;color:var(--ink);overflow-wrap:break-word;word-break:normal}
.chat-bubble.user .chat-bubble-body{
  max-width:min(86%,36rem);padding:10px 16px;border-radius:20px 20px 6px 20px;
  background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);
  white-space:pre-wrap;line-height:1.5;
}
.chat-bubble.assistant .chat-bubble-body{width:100%}
.chat-bubble-body.streaming::after{
  content:'';display:inline-block;width:.5em;height:1.05em;margin-left:3px;vertical-align:-.15em;
  border-radius:2px;background:var(--agent);animation:chat-blink 1s steps(1) infinite;
}
@keyframes chat-blink{50%{opacity:0}}

/* Markdown in Antworten */
.chat-bubble-body>:first-child{margin-top:0}
.chat-bubble-body>:last-child{margin-bottom:0}
.chat-bubble-body p{margin:0 0 .8em}
.chat-bubble-body h1,.chat-bubble-body h2,.chat-bubble-body h3,.chat-bubble-body h4,.chat-bubble-body h5,.chat-bubble-body h6{
  font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--ink);margin:1.35em 0 .5em;text-wrap:balance;
}
.chat-bubble-body h1{font-size:1.38em}
.chat-bubble-body h2{font-size:1.2em}
.chat-bubble-body h3{font-size:1.05em}
.chat-bubble-body h4,.chat-bubble-body h5,.chat-bubble-body h6{font-size:1em;color:var(--ink-2)}
.chat-bubble-body ul,.chat-bubble-body ol{margin:.2em 0 .85em;padding-left:1.4em}
.chat-bubble-body li{margin:.28em 0;padding-left:.15em}
.chat-bubble-body li::marker{color:var(--ink-3)}
.chat-bubble-body ol li::marker{font-variant-numeric:tabular-nums}
.chat-bubble-body li>p{margin-bottom:.35em}
.chat-bubble-body input[type=checkbox]{width:16px;height:16px;margin:0 6px 0 -1.4em;vertical-align:-2px}
.chat-bubble-body blockquote{margin:.4em 0 .9em;padding:.1em 0 .1em 16px;border-left:3px solid var(--line-3);color:var(--ink-2)}
.chat-bubble-body hr{border:0;height:1px;background:var(--line-2);margin:1.5em 0}
.chat-bubble-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal-line);text-decoration-thickness:1.5px;text-underline-offset:.2em}
.chat-bubble-body a:hover{text-decoration-color:var(--signal)}
.chat-bubble-body strong{color:var(--ink)}
.chat-bubble-body code{
  font-size:.86em;padding:.12em .38em;border-radius:5px;background:var(--raised);
  box-shadow:inset 0 0 0 1px var(--line);overflow-wrap:anywhere;
}
.chat-bubble-body img{max-width:100%;height:auto;border-radius:var(--r-md)}
.chat-bubble-body details{margin:.5em 0 .9em;padding:8px 12px;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.chat-bubble-body summary{cursor:pointer;font-weight:550}

/* Code-Blöcke (Kopf mit Sprache + Kopieren) */
.chat-bubble-body pre{
  margin:.6em 0 1em;padding:12px 14px;overflow-x:auto;
  background:var(--code-bg);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);
  font-size:13px;line-height:1.6;tab-size:2;
}
.chat-bubble-body pre code{padding:0;background:none;box-shadow:none;font-size:inherit;overflow-wrap:normal;white-space:pre}
.chat-bubble-body .cb{margin:.6em 0 1.05em;background:var(--code-bg);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line)}
.chat-bubble-body .cb-head{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 6px 0 14px;border-bottom:1px solid var(--line)}
.chat-bubble-body .cb-lang{flex:1;min-width:0;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-bubble-body .cb pre{margin:0;border-radius:0;box-shadow:none;background:transparent;padding:12px 14px 14px}
.chat-bubble-body .cb .cb-copy{opacity:1}

/* Tabellen: eigener, waagerecht scrollender Streifen */
.md-table{
  margin:.7em 0 1.1em;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:thin;
  /* Kanten-Schatten zeigen, dass es seitlich weitergeht */
  background:
    linear-gradient(to right,var(--ground) 40%,transparent) left center/28px 100% no-repeat local,
    linear-gradient(to left,var(--ground) 40%,transparent) right center/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--line-3),transparent) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--line-3),transparent) right center/12px 100% no-repeat scroll;
}
.md-table:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:var(--r-sm)}
.md-table table{
  border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;
  font-size:calc(var(--chat-fs) - 1.5px);line-height:1.45;font-variant-numeric:tabular-nums;
}
.md-table th,.md-table td{padding:10px 18px 10px 0;text-align:left;vertical-align:top;min-width:7ch;max-width:46ch;overflow-wrap:break-word}
.md-table th:last-child,.md-table td:last-child{padding-right:0}
.md-table th{font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--line-3);vertical-align:bottom}
.md-table td{color:var(--ink);border-bottom:1px solid var(--line)}
.md-table tbody tr:last-child td{border-bottom:0}
.md-table th[align=right],.md-table td[align=right]{text-align:right}
.md-table th[align=center],.md-table td[align=center]{text-align:center}
.md-table td code{white-space:nowrap}
.md-table td:first-child{color:var(--ink)}

/* Ausbruch aus der Spalte: volle Breite, Inhalt bündig mit dem Text */
.chat-bubble.assistant>.chat-bubble-body>.md-table,
.chat-bubble.assistant>.chat-bubble-body>.cb,
.chat-bubble.assistant>.chat-bubble-body>pre{
  width:100cqw;max-width:none;margin-left:calc(50% - 50cqw);margin-right:0;
  --bleed:calc((100cqw - min(100cqw - 2 * var(--pad),var(--col-max))) / 2);
}
.chat-bubble.assistant>.chat-bubble-body>.md-table{padding-inline:var(--bleed)}
.chat-bubble.assistant>.chat-bubble-body>.md-table table{min-width:min(100cqw - 2 * var(--pad),var(--col-max))}
.chat-bubble.assistant>.chat-bubble-body>.cb,
.chat-bubble.assistant>.chat-bubble-body>pre{border-radius:0;box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.chat-bubble.assistant>.chat-bubble-body>.cb .cb-head{padding-left:var(--bleed);padding-right:max(6px,calc(var(--bleed) - 8px))}
.chat-bubble.assistant>.chat-bubble-body>.cb pre,
.chat-bubble.assistant>.chat-bubble-body>pre{padding-left:var(--bleed);padding-right:var(--bleed)}
@media (min-width:900px){
  .chat-bubble.assistant>.chat-bubble-body>.cb,
  .chat-bubble.assistant>.chat-bubble-body>pre{
    width:calc(100cqw - 2 * var(--pad));margin-left:calc(50% - 50cqw + var(--pad));
    border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);
    --bleed:calc((100cqw - min(100cqw - 2 * var(--pad),var(--col-max))) / 2 - var(--pad));
  }
}

/* Antwort-Fuß: Uhrzeit + Kopieren */
.chat-bubble-meta{display:flex;align-items:center;gap:4px;min-height:26px;padding-top:4px}
.chat-bubble.user .chat-bubble-meta{flex-direction:row-reverse}
.chat-bubble-time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.chat-copy-btn{
  width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;
  color:var(--ink-3);opacity:0;transition:opacity var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.chat-bubble:hover .chat-copy-btn,.chat-copy-btn:focus-visible,.cb .chat-copy-btn{opacity:1}
.chat-copy-btn:hover{background:var(--raised);color:var(--ink)}
.chat-copy-btn.copied{opacity:1;color:var(--ok)}
@media (hover:none){.chat-copy-btn{opacity:.7}}

/* Anhänge am Nutzer-Beitrag */
.chat-attach-gallery{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-bottom:6px}
.chat-attach-thumb{max-width:220px;max-height:170px;border-radius:var(--r-md);object-fit:cover;cursor:zoom-in;box-shadow:inset 0 0 0 1px var(--line)}
.chat-attach-filechip{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 11px;border-radius:var(--r-pill);background:var(--raised);font-size:13px;color:var(--ink-2)}

/* System-Notizen, Trenner, Kosten */
.chat-sys-note{
  width:auto!important;max-width:min(100cqw - 2 * var(--pad),34rem);align-self:center;
  padding:6px 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font-size:13px;color:var(--ink-2);text-align:center;
}
.chat-sys-note.pending{color:var(--ink-3)}
.chat-sys-note.done{color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-line)}
.chat-history-gap{text-align:center;color:var(--ink-3);font-size:13px;padding:6px 0}
.chat-meta{
  width:auto!important;align-self:center;padding:3px 10px;border-radius:var(--r-pill);
  font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--line);
}

/* ── Arbeitsschritte (Werkzeuge, Denkprozess, Aufgaben) ──────────────────── */
.chat-steps,.chat-tool,.chat-thinking,.chat-todo{border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.chat-steps{display:flex;flex-direction:column}
.chat-steps-head{
  display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:0 14px;
  color:var(--ink-3);font-size:13px;text-align:left;
}
.chat-steps-head:hover{color:var(--ink-2);background:var(--raised)}
.chat-steps-caret,.caret,.thinking-caret,.chat-todo-caret{
  display:inline-block;width:12px;flex-shrink:0;font-size:10px;line-height:1;text-align:center;color:var(--ink-3);
  transition:transform var(--t);
}
.chat-steps:not(.collapsed) .chat-steps-caret{transform:rotate(90deg)}
.chat-steps-count{font-weight:600;color:var(--ink-2);white-space:nowrap}
.chat-steps-sum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-steps-err{color:var(--danger);font-weight:600;white-space:nowrap}
.chat-steps-err:empty{display:none}
.chat-steps.single>.chat-steps-head{display:none}
.chat-steps-body{display:flex;flex-direction:column}
.chat-steps:not(.single)>.chat-steps-body{border-top:1px solid var(--line)}
.chat-steps.collapsed>.chat-steps-body>:not(.steps-rep){display:none}
.chat-steps-body>*{width:auto!important;max-width:none!important;margin:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;animation:none!important}
.chat-steps-body>*+*{border-top:1px solid var(--line)}
.chat-steps.collapsed>.chat-steps-body>.steps-rep{border-top:0}

/* Werkzeug-Aufruf */
.chat-tool-head{display:flex;align-items:center;gap:9px;min-height:40px;padding:0 14px;cursor:pointer;user-select:none;font-size:13.5px}
.chat-tool-head:hover{background:var(--raised)}
.chat-tool:not(.collapsed) .caret{transform:rotate(90deg)}
.chat-tool-name{font-weight:600;color:var(--agent);white-space:nowrap}
.chat-tool-summary{flex:1;min-width:0;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-tool-body{display:flex;flex-direction:column;gap:8px;padding:4px 14px 14px}
.chat-tool.collapsed .chat-tool-body{display:none}
.chat-tool-input,.chat-tool-result pre{
  margin:0;padding:10px 12px;border-radius:var(--r-sm);background:var(--code-bg);
  font-family:var(--font-mono);font-size:12.5px;line-height:1.55;color:var(--ink-2);
  white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto;
}
.chat-tool-result{border-radius:var(--r-sm)}
.chat-tool-result.err pre{color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-line)}
.chat-tool-result.standalone{padding:10px 14px}

/* Denkprozess */
.chat-thinking-head{display:flex;align-items:center;gap:9px;min-height:40px;padding:0 14px;cursor:pointer;user-select:none;font-size:13.5px;color:var(--ink-3)}
.chat-thinking-head:hover{color:var(--ink-2);background:var(--raised)}
.chat-thinking-label{flex:1;font-style:italic}
.chat-thinking:not(.collapsed) .thinking-caret{transform:rotate(90deg)}
.thinking-dots{display:none;align-items:center;gap:3px}
.chat-thinking.live .thinking-dots{display:inline-flex}
.thinking-dots span{width:4px;height:4px;border-radius:50%;background:var(--agent);animation:thinking-dot 1.3s infinite ease-in-out both}
.thinking-dots span:nth-child(2){animation-delay:.18s}
.thinking-dots span:nth-child(3){animation-delay:.36s}
@keyframes thinking-dot{0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1}}
.thinking-done-icon{color:var(--agent);font-size:11px}
.chat-thinking.live .thinking-done-icon{display:none}
.chat-thinking.empty .chat-thinking-head{cursor:default}
.chat-thinking.empty .thinking-caret{display:none}
.chat-thinking-body{
  padding:0 14px 14px 35px;font-size:14px;line-height:1.6;color:var(--ink-2);
  white-space:pre-wrap;max-height:320px;overflow-y:auto;
}
.chat-thinking.collapsed .chat-thinking-body{display:none}
.chat-thinking-copy{display:flex;justify-content:flex-end;padding:0 8px 8px}
.chat-thinking.live .chat-thinking-label,.chat-shimmer{
  color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(90deg,var(--agent) 0%,var(--agent) 30%,var(--ink-3) 45%,var(--ink-3) 55%,var(--agent) 70%,var(--agent) 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  animation:chat-shine 2.2s var(--ease) infinite;
}
@keyframes chat-shine{0%,18%{background-position:100% 0}82%,100%{background-position:0 0}}

/* Aufgabenliste (TodoWrite) */
.chat-todo{padding:4px 14px 12px}
.chat-todo-head{display:flex;align-items:center;gap:9px;min-height:36px;cursor:pointer;user-select:none;font-size:13.5px;color:var(--ink-2)}
.chat-todo-pie{width:15px;height:15px;border-radius:50%;flex:none;position:relative;background:conic-gradient(var(--ok) 0%,var(--line-2) 0)}
.chat-todo-pie::after{content:'';position:absolute;inset:3.5px;border-radius:50%;background:var(--surface)}
.chat-todo-title{font-weight:600;color:var(--ink)}
.chat-todo-count{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.chat-todo.collapsed .chat-todo-caret{transform:rotate(-90deg)}
.chat-todo.collapsed .chat-todo-list{display:none}
.chat-todo-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.chat-todo-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;color:var(--ink-2)}
.chat-todo-item .ic{width:17px;height:17px;flex:none;margin-top:1.5px;color:var(--ink-3)}
.chat-todo-item.active{color:var(--ink)}
.chat-todo-item.active .ic{color:var(--agent)}
.chat-todo-item.done .ic{color:var(--ok)}
.chat-todo-item.done .lbl{text-decoration:line-through;text-decoration-color:var(--ink-4);color:var(--ink-3)}

/* Neue-Nachrichten-Hinweis */
#chat-new-msg-container{flex-shrink:0;height:0;position:relative;z-index:10}
#chat-new-msg-btn{
  position:absolute;bottom:14px;left:50%;transform:translate(-50%,8px);
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 15px 0 12px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--ground);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-float);
  opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t) var(--ease);
}
#chat-new-msg-btn.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}

/* ── Eingabe ─────────────────────────────────────────────────────────────── */
#chat-input-bar{
  flex-shrink:0;display:flex;flex-direction:column;gap:6px;
  padding:6px var(--pad) calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom,transparent,var(--ground) 18px);
  container-type:inline-size;
}
#chat-input-bar>*{width:100%;max-width:calc(var(--col-max) + 24px);margin-inline:auto}
body.kb-open #chat-input-bar{padding-bottom:8px}
#chat-status-bar{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:18px;padding:0 14px;font-size:12.5px;color:var(--ink-3)}
#chat-status-bar.busy{color:var(--agent)}
.chat-typing-dots{display:none;align-items:center;gap:3px}
#chat-status-bar.busy .chat-typing-dots{display:inline-flex}
.chat-typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--agent);animation:chat-typing 1.2s infinite ease-in-out both}
.chat-typing-dots span:nth-child(2){animation-delay:.16s}
.chat-typing-dots span:nth-child(3){animation-delay:.32s}
@keyframes chat-typing{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.chat-input-row{
  display:flex;align-items:flex-end;gap:4px;padding:5px;border-radius:26px;
  background:var(--surface);border:1px solid var(--line-2);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.chat-input-row.focus{border-color:var(--signal-line);box-shadow:0 0 0 3px var(--signal-wash)}
.chat-input-row.disabled{opacity:.6}
#chat-ta{
  flex:1;min-width:0;min-height:40px;max-height:200px;padding:9px 6px;
  border:0;background:transparent;box-shadow:none!important;border-radius:0;
  font-size:var(--chat-fs);line-height:1.45;resize:none;overflow-y:auto;
}
#chat-ta:hover,#chat-ta:focus{border:0;box-shadow:none}
#chat-ta:disabled{color:var(--ink-3)}
.chat-action-btn{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);transition:background var(--t-fast),color var(--t-fast),transform .1s;
}
.chat-action-btn svg{width:20px;height:20px}
.chat-action-btn:hover:not(:disabled){background:var(--raised);color:var(--ink)}
.chat-action-btn:active:not(:disabled){transform:scale(.92)}
.chat-action-btn:disabled{opacity:.4}
#chat-send-btn{background:var(--signal);color:var(--on-signal)}
#chat-send-btn:hover:not(:disabled){background:var(--signal);filter:brightness(1.07);color:var(--on-signal)}
#chat-send-btn:disabled{background:var(--raised-2);color:var(--ink-3)}
.chat-input-row.has-text #mic-chat{display:none}
.chat-input-row:not(.has-text) #chat-send-btn{display:none}
#mic-chat.recording{background:var(--danger);color:#fff;animation:mic-pulse 1.1s ease-in-out infinite}
#mic-chat.busy{color:var(--ink-3);cursor:wait}
#mic-chat.busy svg{animation:spin .9s linear infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 var(--danger-line)}50%{box-shadow:0 0 0 8px transparent}}
#chat-file-input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#chat-attach-btn.auto-resume-pending{color:var(--info);position:relative}
#chat-attach-btn.auto-resume-pending::after{content:'';position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--info);box-shadow:0 0 0 2px var(--surface)}

/* „+"-Menü am Eingabefeld */
.chat-attach-wrap{position:relative;display:inline-flex}
.chat-attach-menu{
  display:none;position:absolute;left:-4px;bottom:calc(100% + 10px);z-index:60;min-width:270px;
  padding:6px;border-radius:var(--r-lg);background:var(--raised);border:1px solid var(--line-2);box-shadow:var(--shadow-float);
  flex-direction:column;gap:1px;
}
.chat-attach-menu.open{display:flex;animation:rise-in .16s var(--ease-out)}
.chat-attach-menu-item{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 11px;border-radius:var(--r-sm);font-size:14px;color:var(--ink);text-align:left}
.chat-attach-menu-item:hover{background:var(--raised-2)}
.chat-attach-menu-item svg{width:17px;height:17px;color:var(--ink-3)}
.chat-attach-menu-item .ar-state{margin-left:auto;min-height:20px;padding:0 8px;border-radius:var(--r-pill);display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;background:var(--raised-2);color:var(--ink-3)}
.chat-attach-menu-item .ar-state.on{background:var(--ok-wash);color:var(--ok)}
.chat-attach-menu-item .ar-state.scheduled{background:var(--info-wash);color:var(--info)}
.chat-attach-menu-sep{height:1px;background:var(--line);margin:5px 6px}

/* Anhänge vor dem Senden */
#chat-attach-preview{display:none;flex-wrap:wrap;gap:6px;padding:2px 4px}
#chat-attach-preview.on{display:flex}
.chat-attach-chip{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:32px;padding:0 6px 0 11px;
  border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;color:var(--ink-2);
}
.chat-attach-chip .chip-icon{width:15px;height:15px;color:var(--signal-ink)}
.chat-attach-chip .chip-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-attach-chip .chip-size{color:var(--ink-3);font-size:12px}
.chat-attach-chip .chip-remove,.chat-attach-tcard .chip-remove{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;color:var(--ink-3)}
.chat-attach-chip .chip-remove:hover{background:var(--raised-2);color:var(--ink)}
.chat-attach-chip.uploading{opacity:.65}
.chat-attach-chip.uploading .chip-name::after{content:' · lädt …';color:var(--ink-3)}
.chat-attach-chip.err{color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-line)}
.chat-attach-tcard{position:relative;width:72px;height:72px;border-radius:var(--r-md);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2)}
.chat-attach-tcard.uploading{opacity:.55}
.chat-attach-tcard.err{box-shadow:inset 0 0 0 1.5px var(--danger)}
.chat-attach-tcard-img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.chat-attach-tcard .chip-remove.on-thumb{position:absolute;top:3px;right:3px;width:22px;height:22px;background:rgba(0,0,0,.6);color:#fff}
.chat-attach-tcard-err{position:absolute;inset:auto 0 0;padding:1px 4px;background:rgba(0,0,0,.65);color:#ffb4ab;font-size:10px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ordner-Queue: wartende Prompts */
.queue-bar{display:none;flex-direction:column;gap:6px;padding:10px 12px;border-radius:var(--r-md);background:var(--signal-wash);box-shadow:inset 0 0 0 1px var(--signal-line)}
.queue-bar-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--signal-ink)}
.queue-item{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 6px 0 10px;border-radius:var(--r-sm);background:var(--surface);font-size:13.5px}
.queue-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-item-target{font-size:12px;color:var(--ink-3);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-item button{min-height:28px;padding:0 9px;border-radius:7px;border:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2)}
.queue-item button:hover{background:var(--raised);color:var(--ink)}
.queue-item button.q-cancel:hover{color:var(--danger);border-color:var(--danger-line)}

/* Lightbox + iOS-Download-Blatt */
body.lightbox-open{overflow:hidden}
.img-lightbox{
  position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background:rgba(4,8,9,.9);opacity:0;transition:opacity .16s;
}
.img-lightbox.on{opacity:1}
.img-lightbox-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-md)}
.img-lightbox-close{
  position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.dl-sheet-overlay{position:fixed;inset:0;z-index:4000;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:var(--scrim)}
.dl-sheet{width:100%;max-width:420px;padding:20px;border-radius:var(--r-lg);background:var(--raised);box-shadow:var(--shadow-float);display:flex;flex-direction:column;gap:10px;margin-bottom:env(safe-area-inset-bottom)}
.dl-sheet-name{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.dl-sheet-status{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dl-sheet-status.err{color:var(--danger)}
.dl-sheet-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.dl-sheet-actions .btn{min-height:44px}

/* ── Handy ───────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  #sh{padding:0 6px 0 2px;gap:4px}
  #sh-menu-btn{display:grid}
  .sh-main{flex-direction:column;align-items:flex-start;gap:0}
  #sh-title{font-size:15.5px;max-width:100%}
  #session-status{font-size:12px}
  #session-status:not(.running):not(.idle){display:none}
  .sh-main #sh-badge{font-size:11px;min-height:17px}
  .sh-ctl,#end-btn{display:none!important}
  #resume-btn{min-height:36px}
  #chat-stream{gap:16px;padding:18px 0 18px}
  .chat-bubble.user .chat-bubble-body{max-width:88%}
  #chat-input-bar{padding:4px 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .chat-input-row{border-radius:24px}
  .chat-action-btn{width:42px;height:42px}
  #chat-ta{min-height:42px;padding:10px 6px}
  .chat-attach-menu{min-width:min(300px,calc(100vw - 24px))}
  .chat-attach-menu-item{min-height:48px;font-size:15px}
}