/* Sprach-Seitenfenster (04.11.2026): Gespräch mit Lisa direkt im Cockpit, ohne Seitenwechsel.
   Desktop: Fenster rechts (Seite rückt zur Seite), Handy: Blatt von unten. Gespräch läuft weiter, wenn das Fenster zu ist (schwebende Anzeige). */
:root{--sp-w:clamp(400px,32vw,470px)}
#spPanel{position:fixed;top:0;right:0;bottom:0;width:var(--sp-w);z-index:102;display:flex;flex-direction:column;
  background:var(--surface,#fff);color:var(--text,#1C201D);border-left:1px solid var(--border,#E7E3DC);
  box-shadow:-18px 0 48px rgba(15,25,20,.16);font-family:inherit;will-change:transform,clip-path;touch-action:pan-y}
#spPanel[hidden],#spPill[hidden]{display:none!important}
#spPanel svg,#spPill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sp-grip{display:none}
.sp-head{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 12px;border-bottom:1px solid var(--border,#E7E3DC);cursor:grab;user-select:none;-webkit-user-select:none}
.sp-zu{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px 0 8px;border:1px solid var(--border-strong,#D6D1C7);border-radius:999px;background:var(--surface,#fff);color:var(--text);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;flex:0 0 auto}
.sp-zu:hover{background:var(--surface-2,#F4F2EE)}
.sp-wer{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.sp-wer b{font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-wer small{font-size:.8rem;color:var(--text-muted,#6B6F69);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-esc{font-size:.7rem;color:var(--text-subtle,#9A9E97);border:1px solid var(--border,#E7E3DC);border-radius:5px;padding:1px 5px;flex:0 0 auto}
/* Kugel: Start-/Pegel-Anzeige */
.sp-buehne{display:flex;align-items:center;gap:14px;padding:14px 16px 10px}
.sp-orb{--lv:0;position:relative;width:64px;height:64px;border-radius:50%;border:0;flex:0 0 64px;display:grid;place-items:center;cursor:pointer;
  background:var(--accent,#2E6B4F);color:#fff;box-shadow:0 6px 18px rgba(15,25,20,.18);transition:background .2s,transform .12s;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sp-orb svg{width:26px!important;height:26px!important}
.sp-orb::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--accent,#2E6B4F);opacity:calc(.15 + var(--lv)*.7);transform:scale(calc(1 + var(--lv)*.22));transition:transform .08s linear,opacity .08s linear}
.sp-orb.spricht{background:#235740}
.sp-orb.stumm{background:var(--text-subtle,#9A9E97)}
.sp-orb.aus{background:var(--accent,#2E6B4F)}
.sp-orb.haelt{background:var(--danger,#C0492F)}
.sp-orb:active{transform:scale(.96)}
.sp-pegel{display:flex;align-items:center;gap:3px;height:28px}
.sp-pegel i{display:block;width:4px;height:28px;border-radius:3px;background:var(--accent,#2E6B4F);transform:scaleY(.12);transform-origin:center;transition:transform .07s linear}
.sp-pegel.lisa i{background:#235740}
.sp-zustand{flex:1;min-width:0}
.sp-zustand b{display:block;font-size:.98rem;font-weight:650}
.sp-zustand span{display:block;font-size:.8rem;color:var(--text-muted,#6B6F69)}
.sp-modus{display:flex;margin:0 16px 8px;border:1px solid var(--border-strong,#D6D1C7);border-radius:999px;overflow:hidden;align-self:flex-start}
.sp-modus button{border:0;background:transparent;padding:6px 12px;font:inherit;font-size:.78rem;font-weight:600;color:var(--text-muted,#6B6F69);cursor:pointer}
.sp-modus button.on{background:var(--accent-soft,rgba(46,107,79,.1));color:var(--accent,#2E6B4F)}
.sp-err{margin:0 16px;color:var(--danger,#C0492F);font-weight:600;font-size:.86rem}
.sp-err:empty{display:none}
.sp-err .sp-btn{margin-top:6px}
.sp-log{flex:1;min-height:0;overflow-y:auto;padding:10px 16px 14px;display:flex;flex-direction:column;gap:9px;overscroll-behavior:contain}
.sp-leer{color:var(--text-subtle,#9A9E97);font-size:.86rem;margin:6px 0 0}
.sp-vor{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sp-vor button{font:inherit;font-size:.8rem;color:var(--text,#1C201D);background:var(--surface-2,#F4F2EE);border:1px solid var(--border,#E7E3DC);border-radius:999px;padding:5px 11px;cursor:pointer}
.sp-vor button:hover{border-color:var(--accent,#2E6B4F)}
.sp-bub{max-width:90%;padding:8px 12px;border-radius:14px;font-size:.92rem;line-height:1.45;overflow-wrap:anywhere;animation:spEin .22s ease-out}
.sp-bub small{display:block;font-size:.68rem;font-weight:700;color:var(--text-muted,#6B6F69);margin-bottom:1px;letter-spacing:.02em}
.sp-bub.du{align-self:flex-end;background:var(--accent-soft,rgba(46,107,79,.1));border-bottom-right-radius:4px}
.sp-bub.lisa{align-self:flex-start;background:var(--surface-2,#F4F2EE);border-bottom-left-radius:4px}
.sp-karte{border:1px solid var(--border,#E7E3DC);border-radius:12px;padding:10px 12px;background:var(--surface,#fff);box-shadow:0 1px 3px rgba(20,30,25,.07);animation:spEin .22s ease-out}
.sp-karte .h{display:flex;align-items:flex-start;gap:9px;font-weight:650;font-size:.9rem}
.sp-karte .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2,#F4F2EE);color:var(--text-muted,#6B6F69);flex:0 0 28px}
.sp-karte .ic svg{width:16px!important;height:16px!important}
.sp-karte ul{margin:6px 0 0;padding:0 0 0 37px;list-style:none;font-size:.84rem}
.sp-karte li{padding:1px 0;overflow-wrap:anywhere}
.sp-karte .f{margin:6px 0 0 37px;font-size:.76rem;color:var(--text-muted,#6B6F69)}
.sp-karte a{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0 37px;font-size:.82rem;font-weight:650;color:var(--accent,#2E6B4F);text-decoration:none;cursor:pointer}
.sp-karte a svg{width:14px!important;height:14px!important}
.sp-karte.ok{border-color:var(--success,#2E8B57)}.sp-karte.ok .ic{background:var(--success,#2E8B57);color:#fff}
.sp-karte.ask{border-color:var(--warning,#B9861F);border-style:dashed}.sp-karte.ask .ic{background:var(--warning-bg,#FBF0DA);color:var(--warning,#B9861F)}
.sp-karte.done{opacity:.55}
.sp-karte.stopc .ic{background:var(--danger-bg,#F8E4DF);color:var(--danger,#C0492F)}
.sp-karte.view .ic{background:var(--info-bg,#E6EDF6);color:var(--info,#3B6EA5)}
.sp-halten{padding:4px 16px 8px}
.sp-halten button{width:100%;height:54px;border-radius:14px;border:0;background:var(--accent,#2E6B4F);color:#fff;font:inherit;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sp-halten button.haelt{background:var(--danger,#C0492F)}
.sp-tippen{display:flex;gap:8px;padding:8px 16px 4px}
.sp-tippen input{flex:1;min-width:0;height:42px;border:1px solid var(--border-strong,#D6D1C7);border-radius:10px;background:var(--surface,#fff);color:var(--text);padding:0 12px;font:inherit;font-size:16px}
.sp-tippen button{width:42px;height:42px;border-radius:10px;border:0;background:var(--accent,#2E6B4F);color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 42px}
.sp-leiste{display:flex;gap:8px;padding:8px 16px calc(12px + env(safe-area-inset-bottom))}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--border-strong,#D6D1C7);background:var(--surface,#fff);color:var(--text,#1C201D);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.sp-btn:hover{background:var(--surface-2,#F4F2EE)}
.sp-leiste .sp-btn{flex:1}
.sp-btn.ende{border-color:var(--danger,#C0492F);color:var(--danger,#C0492F)}
.sp-btn.an{background:var(--accent-soft,rgba(46,107,79,.1));border-color:var(--accent,#2E6B4F);color:var(--accent,#2E6B4F)}
.sp-btn[hidden]{display:none}
/* Seite rückt zur Seite (breite Bildschirme), damit nichts verdeckt wird */
@media (min-width:1100px){
  html.sp-auf .app{padding-right:var(--sp-w)}
  html.sp-auf .drawer{right:var(--sp-w)}
  html.sp-auf #plKiBtn{right:calc(var(--sp-w) + 18px)!important}
  html.sp-auf #plKi{right:calc(var(--sp-w) + 18px)!important}
  html.sp-auf .toasts{left:calc(50% - var(--sp-w) / 2)}
  .app{transition:grid-template-columns .18s ease,padding-right .36s cubic-bezier(.2,.8,.2,1)}
}
/* Schwebende Anzeige, solange das Gespräch läuft und das Fenster zu ist */
#spPill{position:fixed;right:84px;bottom:22px;z-index:103;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 8px;border-radius:999px;
  background:var(--surface,#fff);color:var(--text,#1C201D);border:1px solid var(--border-strong,#D6D1C7);box-shadow:0 10px 30px rgba(15,25,20,.22);max-width:calc(100vw - 110px);animation:spEin .25s ease-out}
#spPill .sp-p-auf{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0 4px 0 0;min-width:0}
#spPill .sp-p-orb{--lv:0;width:34px;height:34px;border-radius:50%;background:var(--accent,#2E6B4F);color:#fff;display:grid;place-items:center;flex:0 0 34px;box-shadow:0 0 0 calc(2px + var(--lv)*7px) var(--accent-soft,rgba(46,107,79,.18));transition:box-shadow .08s linear}
#spPill .sp-p-orb.spricht{background:#235740}
#spPill .sp-p-orb.stumm{background:var(--text-subtle,#9A9E97)}
#spPill .sp-p-orb svg{width:17px;height:17px}
#spPill .sp-p-t{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
#spPill .sp-p-t b{font-size:.86rem;font-weight:700;white-space:nowrap}
#spPill .sp-p-t span{font-size:.74rem;color:var(--text-muted,#6B6F69);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#spPill .sp-p-k{width:36px;height:36px;border-radius:50%;border:1px solid var(--border,#E7E3DC);background:var(--surface,#fff);color:var(--text,#1C201D);display:grid;place-items:center;cursor:pointer;flex:0 0 36px}
#spPill .sp-p-k.an{background:var(--accent-soft,rgba(46,107,79,.1));color:var(--accent,#2E6B4F);border-color:var(--accent,#2E6B4F)}
#spPill .sp-p-k.ende{background:var(--danger,#C0492F);border-color:var(--danger,#C0492F);color:#fff}
@keyframes spEin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Handy: Blatt von unten */
@media (max-width:760px){
  #spPanel{top:auto;left:0;width:auto;height:min(72vh,640px);height:min(72dvh,640px);border-left:0;border-top:1px solid var(--border,#E7E3DC);border-radius:20px 20px 0 0;box-shadow:0 -14px 40px rgba(15,25,20,.2);touch-action:auto}
  .sp-grip{display:block;width:44px;height:5px;border-radius:3px;background:var(--border-strong,#D6D1C7);margin:8px auto 0;flex:0 0 auto;cursor:grab}
  .sp-head{padding:8px 12px 10px;cursor:default}
  .sp-esc{display:none}
  .sp-buehne{padding:10px 14px 8px}
  .sp-orb{width:52px;height:52px;flex-basis:52px}
  .sp-zustand span{display:none}
  .sp-buehne{padding:8px 14px 6px}
  .sp-modus{margin-bottom:6px}
  #spPill{right:auto;left:12px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100vw - 90px)}
}
@media (prefers-reduced-motion:reduce){
  .sp-bub,.sp-karte,#spPill{animation:none}
  .sp-orb::before,.sp-pegel i,#spPill .sp-p-orb{transition:none}
  .app{transition:none!important}
}