/* Produktfassung: wie Vorschau 41, nur die globale body-Regel auf .zd begrenzt. */
/* Vorschau 41 · Zwei Dialoge: echte Stile fn-window.css + fn-dialog-actions.css; nur Seitenaufbau und Lage statisch statt fixed. */
.zd{color:var(--fn-text);font-family:var(--fn-font);font-size:13px}
.zd{padding:24px}
.zd-stack{width:591px;margin:0 auto}
.zd-win{position:static;min-height:0;min-width:0;max-width:none}
.zd-body{padding:12px;overflow:visible}
.zd-body .q-tile{width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.zd-body2{padding:12px 13px}
.zd-bar{display:flex;justify-content:flex-end;gap:6px}
.zd .q-scroll{margin-top:11px;height:150px;padding-right:8px}
.zd .q-src{margin:8px 0 0}

/* Farben: ausschliesslich Tokens der App (Nikos Vorgabe: die Palette des Referenzbilds ist falsch) */
.zd{
  --q-page:var(--fn-bg);
  --q-tile:transparent;
  --q-line:var(--fn-border-strong, var(--fn-border));
  --q-field:var(--fn-input-bg);
  --q-title:var(--fn-text);
  --q-muted:var(--fn-text-secondary);
  --q-mic-bg:var(--fn-input-bg);
  --q-mic-ring:var(--fn-accent-line);
  --q-mic-out:var(--fn-primary);
  --q-spk-bg:var(--fn-accent-soft);
  --q-spk:var(--fn-primary);
}

/* Größe änderbar: beide Dialoge haben die Standard-Resize-Ecke (Nikos Vorgabe), auch der angedockte */
.zd .zd-win,.zd .zd-win.fn-window-docked{resize:both;overflow:auto}

/* Erklärungen stehen UNTER den Dialogen, nie darin */
.zd-notes{width:591px;margin:26px auto 0;color:var(--fn-text-secondary);font-size:12.5px;line-height:1.55}
.zd-notes h2{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fn-text-tertiary)}
.zd-notes ul{margin:0;padding-left:18px}
.zd-notes li{margin:0 0 5px}
.zd-notes b{color:var(--fn-text)}

/* Antwort-Dialog: der Textbereich füllt den Dialog; Scrollbalken nur, wenn der Text nicht hineinpasst */
.zd .zd-win{display:flex;flex-direction:column;overflow:hidden}
.zd .zd-win .fn-window-head{flex:0 0 auto}
.zd .zd-win .fn-window-body{flex:1 1 auto;min-height:0}
.zd .zd-body2{display:flex;flex-direction:column;overflow:hidden}
.zd .zd-body2 .zd-bar{flex:0 0 auto}
.zd .zd-body2 .zd-scroll{flex:1 1 auto;height:auto;min-height:0;overflow-y:auto}
.zd .zd-body2 .q-src{flex:0 0 auto}
.zd-notes .zd-status{margin:0 0 10px;padding:7px 11px;border:1px solid var(--fn-border);border-radius:8px;background:var(--fn-surface);color:var(--fn-text);min-height:32px}
.zd-reopen{margin:0 0 12px;padding:6px 12px;border:1px solid var(--fn-border-strong,var(--fn-border));border-radius:8px;background:transparent;color:var(--fn-text);font:inherit;cursor:pointer}
.zd .q-swap.zd-on,.zd .zd-bar .zd-on{background:var(--fn-accent-soft);border-color:var(--fn-primary);color:var(--fn-primary)}
.zd .q-sq.zd-off{background:transparent;border-color:var(--fn-border-strong,var(--fn-border));color:var(--fn-text-secondary)}
.zd.zd-max{padding:24px}
.zd.zd-max .zd-notes{display:none}
.zd-stack[hidden],.zd-win[hidden],.fn-row-splitter[hidden]{display:none!important}
.zd-notes .zd-status:empty{display:none}

/* Vollständige Ansicht des Assistenten (Nikos Bild 11), nur Tokens der App */
.zv[hidden],.zv-min[hidden]{display:none}
.zv{display:flex;flex-direction:column;gap:9px;font-size:13px}
.zv-hello{margin:0;color:var(--fn-text);font-size:13px}
.zv-ask{height:34px;padding:0 16px;border:1px solid var(--fn-border-strong,var(--fn-border));border-radius:999px;background:var(--fn-input-bg);color:var(--fn-text);font:inherit}
.zv-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zv-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border:1px solid var(--fn-border-strong,var(--fn-border));border-radius:999px;background:transparent;color:var(--fn-text-secondary);font:inherit;cursor:pointer}
.zv-pill svg{width:15px;height:15px}
.zv-strong{color:var(--fn-text)}
.zv-primary{background:var(--fn-primary);border-color:var(--fn-primary);color:var(--fn-on-primary,#06121f);font-weight:600}
.zv-end{justify-content:flex-start;margin-top:2px}
.zv-end .zv-pill{height:40px}
.zv-rounds{gap:8px}
.zv-round{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--fn-border-strong,var(--fn-border));border-radius:50%;background:transparent;color:var(--fn-text);cursor:pointer}
.zv-round svg{width:15px;height:15px}
.zv-sep{width:1px;height:26px;background:var(--fn-border-strong,var(--fn-border));margin:0 2px}
.zv-vol{position:relative;display:inline-block;width:90px;height:4px;border-radius:2px;background:var(--fn-border-strong,var(--fn-border));cursor:pointer}
.zv-vol i{position:absolute;left:0;top:0;height:4px;border-radius:2px;background:var(--fn-primary)}
.zv-spacer{flex:1 1 auto}
.zv-seg{display:inline-flex;border:1px solid var(--fn-border-strong,var(--fn-border));border-radius:999px;overflow:hidden}
.zv-seg button{height:30px;padding:0 14px;border:0;background:transparent;color:var(--fn-text-secondary);font:inherit;cursor:pointer}
.zv-seg button.on{background:var(--fn-accent-soft);color:var(--fn-primary)}
.zv .zv-tog[aria-pressed="true"]{background:var(--fn-accent-soft);border-color:var(--fn-primary);color:var(--fn-primary)}

/* Sichtbare Rückmeldung: Meldung als Hinweis unten rechts im Fenster (nicht im Dialog), deutliche Zustände, Zeiger */
.zd-notes .zd-status{position:fixed;right:16px;bottom:16px;z-index:50;max-width:380px;margin:0;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.zd button{cursor:pointer}
.zd .fn-window-control:hover,.zd .q-swap:hover,.zd .q-sq:hover,.zd .zv-round:hover,.zd .zv-pill:hover{border-color:var(--fn-primary);color:var(--fn-text)}
.zd .fn-window-control:active,.zd .q-swap:active,.zd .q-sq:active,.zd .zv-round:active,.zd .zv-pill:active{transform:translateY(1px)}
.zd .q-sq[aria-pressed="true"]{background:var(--fn-accent-soft);border-color:var(--fn-primary);color:var(--fn-primary)}
.zd .q-sq[aria-pressed="false"],.zd .q-sq.zd-off{background:transparent;border-color:var(--fn-border-strong,var(--fn-border));color:var(--fn-text-secondary)}

/* Waagerechte Anordnung: Antwort links oder rechts neben dem Assistenten; das Symbol ist dasselbe, um 90 Grad gedreht */
.zd-rot svg{transform:rotate(90deg)}
.zd-stack.zd-h{display:flex;flex-direction:row;align-items:stretch;width:min(1240px,calc(100vw - 48px))}
.zd-stack.zd-h .zd-win{flex:1 1 0;min-width:0;height:430px}
.zd-stack.zd-h .fn-row-splitter{flex:0 0 14px;margin:0 4px;cursor:col-resize}
.zd-stack.zd-h .fn-row-splitter span{width:5px;height:66px}
.zd-notes{max-width:591px}

/* Die gestellte Frage in der Antwort ist nur Text, kein Eingabefeld */
.zd .q-ask{padding:0;border:0;border-radius:0;background:transparent;color:var(--fn-text-secondary);font-weight:600;margin:0 0 10px}

/* Titel des Antwort-Dialogs = die gestellte Frage, bei Platzmangel mit Auslassungspunkten (voller Text im Tooltip) */
.zd .zd-qtitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zd .zd-win .fn-window-head{gap:12px}

/* Mikrofon: ausgeschaltet ohne Ring (wie der Lautsprecher aus), eingeschaltet mit Hervorhebung */
.zd .q-mic{border:1px solid var(--fn-border-strong,var(--fn-border));outline:none;background:transparent;color:var(--fn-text-secondary)}
.zd .q-mic[aria-pressed="true"]{border-color:var(--fn-primary);background:var(--fn-accent-soft);color:var(--fn-primary);box-shadow:var(--fn-focus-ring)}
.zd .q-mic:focus-visible{box-shadow:var(--fn-focus-ring)}

/* Titel der Antwort (die gestellte Frage): gut sichtbar; Fließtext ansprechend und gut lesbar */
.zd h3.q-ask{margin:2px 0 14px;padding:0 0 12px;border:0;border-bottom:1px solid var(--fn-border-strong,var(--fn-border));border-radius:0;background:transparent;color:var(--fn-text);font-size:17px;font-weight:650;line-height:1.35;letter-spacing:.005em}
.zd .zd-scroll .q-ans{margin:0 0 12px;color:var(--fn-text);font-size:14px;line-height:1.65}
.zd .zd-scroll{padding-right:10px}
.zd .zd-body2 .q-src{margin-top:10px;padding-top:9px;border-top:1px solid var(--fn-border);color:var(--fn-text-secondary);font-size:12px}

/* Vollständige Ansicht wie der echte KI Assistent: größere Symbole, Mikrofon, Lautsprecher und Senden NEBEN dem Eingabefeld */
.zv-field{display:flex;align-items:stretch;gap:8px}
.zv-field .zv-ask{flex:1 1 auto;min-width:0;height:34px;padding:0 11px;border:1px solid var(--fn-border-strong,var(--fn-border));border-radius:8px;background:var(--fn-input-bg);color:var(--fn-text);font:12.5px system-ui,-apple-system,sans-serif}
.zv-sq{flex:0 0 34px;width:34px;height:34px;padding:0;display:grid;place-items:center;border:1px solid var(--fn-border-strong,var(--fn-border));border-radius:8px;background:transparent;color:var(--fn-text-secondary);cursor:pointer}
.zv-sq svg{width:18px;height:18px}
.zv-send{background:var(--fn-primary);border-color:var(--fn-primary);color:var(--fn-on-primary,#06121f)}
.zv .zv-sq.zv-tog[aria-pressed="true"]{background:var(--fn-accent-soft);border-color:var(--fn-primary);color:var(--fn-primary)}
.zv-tools{gap:8px}
.zv-seg button{height:34px}

/* Gleiche Symbolknöpfe in beiden Dialogen: 34 x 34, Rahmen 1 px, Radius 8, Symbol 18 px */
.zd .zd-bar{gap:8px}
.zd .zd-bar .q-swap{width:34px;height:34px;border-radius:8px;flex:0 0 34px}
.zd .zd-bar .q-swap svg{width:18px;height:18px}
.zd .zd-bar .q-swap.zd-on{background:var(--fn-accent-soft);border-color:var(--fn-primary);color:var(--fn-primary)}
.zd-ctx{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px;color:var(--fn-text-secondary)}
.zd-ctx button{padding:5px 12px;border:1px solid var(--fn-border-strong,var(--fn-border));border-radius:999px;background:transparent;color:var(--fn-text-secondary);font:inherit;cursor:pointer}
.zd-ctx button.on{background:var(--fn-accent-soft);border-color:var(--fn-primary);color:var(--fn-primary)}
.zv-title{margin:2px 0 2px;display:block}
.zd .q-send{background:var(--fn-primary);border-color:var(--fn-primary);color:var(--fn-on-primary,#06121f)}
.zd .q-send:hover{color:var(--fn-on-primary,#06121f);filter:brightness(1.08)}
.zd .q-send svg{width:18px;height:18px}
/* Vollständige Ansicht: Titel, Eingabefeld und die drei Tasten bleiben exakt an ihrer Stelle; unten kommen nur die weiteren Tasten hinzu */
.zd .zv{margin-top:12px}
.zd .zd-win .fn-window-head{cursor:grab;user-select:none}
.zd .zd-win .fn-window-head button{cursor:pointer}
.zd-stack{will-change:transform}
.zd-devmenu{min-width:260px}
.zd-devmenu .zd-nochk{display:inline-block;width:14px;height:14px;flex:0 0 14px}
.zd-devmenu .fn-ctx-head{padding:6px 10px 4px;color:var(--fn-text-tertiary);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}