@import url("../tokens/bauwerk-tokens.css");

/* BauWERK KI-Panel 0.1 — nur Anordnung. Knöpfe, Felder und Tabelle kommen aus
   bauwerk-actions.css, bauwerk-fields.css und bauwerk-tables.css. */
.bw-ki { display:flex; flex-direction:column; gap:10px; min-width:0; color:var(--bw-color-text); font:400 var(--bw-type-meta)/1.4 var(--bw-font-ui); }
.bw-ki__kopf { display:flex; align-items:center; gap:8px; }
.bw-ki__titel { flex:1; margin:0; font:400 14px/1.3 var(--bw-font-ui); }
.bw-ki__status { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:var(--bw-radius-pill); background:var(--bw-color-surface-subtle); color:var(--bw-color-text-muted); font-size:11px; white-space:nowrap; }
.bw-ki__status::before { width:7px; height:7px; border-radius:50%; background:currentColor; content:""; }
.bw-ki[data-zustand="bereit"] .bw-ki__status { background:var(--bw-color-success-surface); color:var(--bw-color-success); }
.bw-ki[data-zustand="schluessel"] .bw-ki__status { background:var(--bw-color-warning-surface); color:var(--bw-color-warning); }
.bw-ki[data-zustand="fehler"] .bw-ki__status { background:var(--bw-color-danger-surface); color:var(--bw-color-danger); }
.bw-ki[data-zustand="laeuft"] .bw-ki__status { background:var(--bw-color-accent-surface); color:var(--bw-color-accent); }
.bw-ki[data-zustand="laeuft"] .bw-ki__status::before { animation:bw-ki-puls 1s ease-in-out infinite; }
@keyframes bw-ki-puls { 50% { opacity:.25; } }

/* grid-template-columns:minmax(0,1fr) statt der Vorgabe „auto“: ohne das sprengt eine lange, nicht
   umbrechende Tabellenzeile (z. B. ein Dateiname mit hoher Zeichenzahl in der Anhangtabelle) den Block
   nach rechts über das Panel hinaus, unsichtbar abgeschnitten vom Dock — samt dem „Entfernen“-Knopf in
   der letzten Spalte. Mit der Zeile bleibt der Block in der Breite des Panels, die Tabelle bekommt ihren
   eigenen Rollbalken (`.bw-core-table-wrap{overflow:auto}` greift dann wie vorgesehen). Gefunden 22.09.2026
   an einer 700.000-Zeichen-Exceldatei in KostenWERK. */
.bw-ki__block { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:10px; border:1px solid var(--bw-color-line); border-radius:var(--bw-radius-md); background:var(--bw-color-surface); }
.bw-ki__block[hidden] { display:none; }
.bw-ki__zeile { display:flex; align-items:center; gap:8px; }
.bw-ki__zeile > .bw-ki__spacer { flex:1; }
.bw-ki__ueberschrift { color:var(--bw-color-text-muted); font-size:11px; letter-spacing:.02em; text-transform:uppercase; }
.bw-ki__einstellungen .bw-core-field-group { grid-template-columns:2fr 1fr; }
.bw-ki__schluessel { display:flex; gap:6px; }
.bw-ki__schluessel .bw-core-input { flex:1; }
.bw-ki__leer { color:var(--bw-color-text-faint); font-size:11.5px; }

.bw-ki__verlauf { display:grid; align-content:start; gap:8px; max-height:min(46vh, 420px); min-height:60px; overflow:auto; padding:10px; border:1px solid var(--bw-color-line); border-radius:var(--bw-radius-md); background:var(--bw-color-canvas); }
.bw-ki__nachricht { max-width:92%; padding:7px 10px; border-radius:var(--bw-radius-md); white-space:pre-wrap; overflow-wrap:anywhere; }
.bw-ki__nachricht--nutzer { justify-self:end; background:var(--bw-color-accent-surface); color:var(--bw-color-text); }
.bw-ki__nachricht--assistent { justify-self:start; border:1px solid var(--bw-color-line); background:var(--bw-color-surface); }
.bw-ki__nachricht--fehler { justify-self:stretch; max-width:none; background:var(--bw-color-danger-surface); color:var(--bw-color-danger); }
.bw-ki__nachricht--hinweis { justify-self:stretch; max-width:none; color:var(--bw-color-text-muted); font-size:11.5px; text-align:center; }
.bw-ki__nachricht pre { margin:6px 0 0; padding:6px 8px; border-radius:5px; background:var(--bw-color-surface-subtle); font:11.5px/1.4 var(--bw-font-mono); overflow:auto; max-height:240px; }

.bw-ki__eingabe { display:grid; gap:6px; }
.bw-ki__eingabe textarea.bw-core-input { min-height:60px; }
.bw-ki__aktionen { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.bw-ki__aktionen .bw-ki__spacer { flex:1; }

.bw-ki__kosten { display:grid; gap:3px; padding:8px 10px; border:1px solid var(--bw-color-line); border-radius:var(--bw-radius-md); background:var(--bw-color-surface-subtle); color:var(--bw-color-text-muted); font-size:11.5px; font-variant-numeric:tabular-nums; }
.bw-ki__kosten b { color:var(--bw-color-text); font-weight:400; }
.bw-ki__kosten-vorher { color:var(--bw-color-text); }
.bw-ki [hidden] { display:none; }

/* 0.2 — Werkzeugkarten und Seitenleisten-Fassung */
.bw-ki[data-zustand="wartet"] .bw-ki__status { background:var(--bw-color-warning-surface); color:var(--bw-color-warning); }
.bw-ki__werkzeug { justify-self:stretch; display:grid; gap:6px; padding:8px 10px; border:1px solid var(--bw-color-line); border-left:3px solid var(--bw-color-text-faint); border-radius:var(--bw-radius-md); background:var(--bw-color-surface); }
.bw-ki__werkzeug[data-status="offen"] { border-left-color:var(--bw-color-warning); }
.bw-ki__werkzeug[data-status="ok"] { border-left-color:var(--bw-color-success); }
.bw-ki__werkzeug[data-status="abgelehnt"] { border-left-color:var(--bw-color-danger); opacity:.7; }
.bw-ki__werkzeug-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.bw-ki__werkzeug-name { font-weight:400; }
.bw-ki__werkzeug-status { color:var(--bw-color-text-muted); font-size:11px; }
.bw-ki__werkzeug-vorschau { white-space:pre-wrap; color:var(--bw-color-text); font-size:11.5px; max-height:220px; overflow:auto; }
.bw-ki__werkzeug-knoepfe { display:flex; gap:6px; }
.bw-ki--fuellend { height:100%; min-height:0; }
.bw-ki--fuellend .bw-ki__verlauf { flex:1; max-height:none; min-height:120px; }

/* Arbeitsanzeige: pulsierendes WERK-W in der Leitfarbe, darunter ein laufender Balken */
.bw-ki__arbeitet { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px; row-gap:6px; padding:8px 10px; border:1px solid var(--bw-color-line); border-radius:var(--bw-radius-md); background:var(--bw-color-surface); color:var(--bw-color-text-muted); }
.bw-ki__werk-w { grid-row:1 / 3; width:26px; height:27px; color:var(--bw-color-accent); transform-origin:50% 60%; animation:bw-ki-w 1.4s ease-in-out infinite; }
.bw-ki__arbeitet-text { font-size:var(--bw-type-meta); }
.bw-ki__balken { position:relative; display:block; height:3px; overflow:hidden; border-radius:2px; background:var(--bw-color-accent-surface); }
.bw-ki__balken::after { position:absolute; top:0; bottom:0; left:-40%; width:40%; border-radius:2px; background:var(--bw-color-accent); content:""; animation:bw-ki-balken 1.4s ease-in-out infinite; }
@keyframes bw-ki-w { 0%, 100% { opacity:.35; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes bw-ki-balken { 0% { left:-40%; } 100% { left:100%; } }
@media (prefers-reduced-motion: reduce) { .bw-ki__werk-w, .bw-ki__balken::after { animation:none; } .bw-ki__werk-w { opacity:1; } .bw-ki__balken::after { left:0; width:100%; opacity:.6; } }

/* Preispflege und Mikrofon */
.bw-ki__preise { display:grid; gap:8px; }
.bw-ki__preise[hidden] { display:none; }
.bw-ki__preistabelle .bw-core-input { min-height:26px; padding:3px 6px; font-size:11.5px; }
.bw-ki__preistabelle td { padding:3px 6px; }
.bw-ki__preistabelle td:nth-child(1) .bw-core-input { min-width:150px; }
.bw-ki__preistabelle td:nth-child(3) .bw-core-input, .bw-ki__preistabelle td:nth-child(4) .bw-core-input { width:84px; text-align:right; }
.bw-ki__mikro svg { width:16px; height:16px; }
.bw-ki__mikro--an { border-color:var(--bw-color-danger); color:var(--bw-color-danger); background:var(--bw-color-danger-surface); animation:bw-ki-puls 1s ease-in-out infinite; }
.bw-ki__kosten-buch { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; padding-top:3px; border-top:1px dashed var(--bw-color-line); }
.bw-ki__kosten-buch a { color:var(--bw-color-accent); }

/* Schnellbefehle: Leiste und Editor (0.3) */
.bw-ki__befehle { display:inline-flex; flex-wrap:wrap; gap:6px; }
.bw-ki__befehl-editor { gap:10px; }
.bw-ki__befehl-editor[hidden] { display:none; }
.bw-ki__befehl { display:grid; gap:6px; padding:8px; border:1px solid var(--bw-color-line); border-radius:var(--bw-radius-md); background:var(--bw-color-surface-subtle); }
.bw-ki__befehl .bw-ki__zeile .bw-core-input { flex:1; }
.bw-ki__befehl textarea.bw-core-input { min-height:64px; font-size:11.5px; }

/* Datenschutzstufe (0.4): Marke an der Nutzernachricht und in der Kostenzeile; Auswahl im Befehls-Editor */
.bw-ki__stufe { display:inline-block; margin-left:8px; padding:0 6px; border-radius:var(--bw-radius-sm, 4px); border:1px solid var(--bw-color-line); font-size:10.5px; font-weight:500; line-height:16px; color:var(--bw-color-text-muted); background:var(--bw-color-surface); vertical-align:middle; }
.bw-ki__befehl-stufe { align-items:center; }
.bw-ki__befehl-stufe .bw-core-field__label { margin:0; }
.bw-ki__befehl-stufe .bw-core-input { flex:1; }

/* 0.5 — Modell im Kopf, Bild und PDF im Gespräch, Drag & Drop, fette Verbrauchsbeträge */
.bw-ki__modell { max-width:38%; overflow:hidden; padding:3px 8px; border:1px solid var(--bw-color-line); border-radius:var(--bw-radius-pill); color:var(--bw-color-text-muted); font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.bw-ki__modell:empty { display:none; }
.bw-ki__kosten .bw-ki__betrag { font-weight:700; font-size:12.5px; color:var(--bw-color-text); }
.bw-ki__kosten-buch .bw-ki__betrag { font-size:13px; }
.bw-ki__halt { color:var(--bw-color-warning); }
.bw-ki__stufe--halt { border-color:var(--bw-color-warning); color:var(--bw-color-warning); background:var(--bw-color-warning-surface); margin-left:0; }
.bw-ki__anhang--halt td { color:var(--bw-color-text-muted); }
.bw-ki__anhang-name { display:flex; align-items:center; gap:6px; }
.bw-ki__vorschaubild { width:28px; height:28px; object-fit:cover; border:1px solid var(--bw-color-line); border-radius:var(--bw-radius-sm, 4px); background:var(--bw-color-canvas); }
.bw-ki { position:relative; }
.bw-ki--ziel::after { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; border:2px dashed var(--bw-color-accent); border-radius:var(--bw-radius-md); background:color-mix(in srgb, var(--bw-color-accent-surface) 85%, transparent); color:var(--bw-color-accent); font-size:13px; content:"Datei loslassen — kommt ins Gespräch"; pointer-events:none; }