/* ═══════════════════════════════════════════════════════════
   WORKSTATION — Integrated CSS for GeniusHub v20.0
   Scoped under #wsWrap to avoid conflicts.
   Maps to GeniusHub token variables.
   ═══════════════════════════════════════════════════════════ */
#wsWrap {
  /* Mappt die alten Workstation-Tokens auf das neue Design-System.
     Rest der Datei bleibt unangetastet — greift automatisch auf die neuen Farben. */
  --ws-card: var(--bg-1);
  --ws-card2: var(--bg-2);
  --ws-border: var(--line);
  --ws-border2: var(--line-2);
  --ws-dim: var(--fg-dim);
  --ws-dim2: var(--fg-muted);
  --ws-accent: var(--accent);
  --ws-accent-bg: var(--accent-weak);
  --ws-accent-border: var(--accent-ring);
  --ws-gold: var(--warn);
  --ws-green: var(--ok);
  --ws-red: var(--err);
  --ws-tab-h: 46px;
  --ws-dock-h: 54px;
  position: relative;
  width: 100%;
  height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--f-sans);
}
#wsWrap button{font-family:inherit;cursor:pointer;}

/* ══════════════════════════════════════
   TAB BAR
══════════════════════════════════════ */
#wsWrap .tabbar{
  display:flex;align-items:center;gap:4px;
  padding:0 12px;height:var(--ws-tab-h);
  background:var(--fg-muted);
  border-bottom:1px solid var(--ws-border);
  overflow-x:auto;scrollbar-width:none;flex-shrink:0;
}
#wsWrap .tabbar::-webkit-scrollbar{display:none;}
#wsWrap .tab{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:8px;
  border:1px solid var(--fg-muted);
  background:var(--fg-muted);
  cursor:pointer;font-size:0.75rem;color:var(--ws-dim2);
  white-space:nowrap;transition:all .15s;flex-shrink:0;
}
#wsWrap .tab:hover{background:var(--fg-muted);color:var(--fg);}
#wsWrap .tab.active{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--fg);}
#wsWrap .tab-inp{background:transparent;border:none;outline:none;color:inherit;
  font:inherit;min-width:20px;max-width:110px;pointer-events:none;}
#wsWrap .tab.active .tab-inp{pointer-events:auto;}
#wsWrap .tab-x{opacity:0;background:none;border:none;color:var(--ws-dim);
  font-size:0.78rem;padding:1px 4px;border-radius:3px;line-height:1;}
#wsWrap .tab:hover .tab-x{opacity:1;}
#wsWrap .tab-x:hover{background:rgba(239,68,68,.2);color:#f87171;}
#wsWrap .btn-add-tab{
  padding:5px 10px;border-radius:8px;
  border:1px dashed var(--line-2);background:transparent;
  color:var(--ws-dim);font-size:1rem;transition:all .15s;flex-shrink:0;
}
#wsWrap .btn-add-tab:hover{border-color:var(--ws-accent);color:var(--ws-accent);}

/* ══════════════════════════════════════
   WIDGET DOCK
══════════════════════════════════════ */
#wsWrap .dock{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;height:var(--ws-dock-h);
  background:var(--line-2);
  border-bottom:1px solid var(--ws-border);
  overflow-x:auto;scrollbar-width:none;flex-shrink:0;
}
#wsWrap .dock::-webkit-scrollbar{display:none;}
#wsWrap .dock-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 10px;border-radius:10px;
  border:1px solid var(--ws-border);
  background:var(--fg-muted);
  cursor:pointer;transition:all .15s;flex-shrink:0;min-width:54px;
}
#wsWrap .dock-item:hover{background:var(--fg-muted);border-color:var(--ws-border2);}
#wsWrap .dock-item.active{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);}
#wsWrap .dock-item-icon{font-size:1.1rem;line-height:1;}
#wsWrap .dock-item-label{font-size:0.58rem;color:var(--ws-dim2);white-space:nowrap;}
#wsWrap .dock-item.active .dock-item-label{color:var(--ws-accent);}
#wsWrap .dock-sep{width:1px;height:30px;background:var(--ws-border);flex-shrink:0;margin:0 2px;}
#wsWrap .btn-manage{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 10px;border-radius:10px;border:1px dashed var(--line-2);
  background:transparent;color:var(--ws-dim);flex-shrink:0;min-width:54px;
  transition:all .15s;font-size:0.58rem;
}
#wsWrap .btn-manage:hover{border-color:var(--ws-accent);color:var(--ws-accent);}
#wsWrap .btn-manage-icon{font-size:1.1rem;line-height:1;}

/* ══════════════════════════════════════
   MAIN AREA (slides)
══════════════════════════════════════ */
#wsWrap .main-wrap{
  position:relative;
  width:100%;
  height:calc(100vh - var(--ws-tab-h) - var(--ws-dock-h));
  overflow:hidden;
}
#wsWrap .slides{
  display:flex;width:200%;height:100%;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#wsWrap .slide{width:50%;height:100%;flex-shrink:0;}

/* ══════════════════════════════════════
   CANVAS
══════════════════════════════════════ */
#wsWrap .canvas{position:relative;width:100%;height:100%;overflow:hidden;}
#wsWrap .canvas-empty{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;color:var(--ws-dim);pointer-events:none;
}
#wsWrap .canvas-empty-icon{font-size:2.5rem;margin-bottom:10px;}
#wsWrap .canvas-empty-ttl{font-size:0.95rem;font-weight:600;color:var(--fg-muted);margin-bottom:6px;}
#wsWrap .canvas-empty-hint{font-size:0.75rem;}

/* ══════════════════════════════════════
   WIDGET MANAGER PAGE
══════════════════════════════════════ */
#wsWrap .manager{
  width:100%;height:100%;overflow-y:auto;
  background:var(--bg-0);padding:20px;scrollbar-width:thin;
  scrollbar-color:var(--fg-muted) transparent;
}
#wsWrap .mgr-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
#wsWrap .mgr-title{font-size:1rem;font-weight:700;}
#wsWrap .mgr-hint{font-size:0.75rem;color:var(--ws-dim);margin-left:auto;}
#wsWrap .mgr-section{margin-bottom:20px;}
#wsWrap .mgr-sec-title{font-size:0.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ws-dim);margin-bottom:10px;}
#wsWrap .mgr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
#wsWrap .mgr-card{
  background:var(--ws-card);border:1px solid var(--ws-border);
  border-radius:12px;padding:14px;cursor:pointer;
  transition:all .15s;position:relative;
}
#wsWrap .mgr-card:hover{border-color:var(--ws-border2);background:var(--ws-card2);}
#wsWrap .mgr-card.on{border-color:var(--ws-accent-border);background:var(--ws-accent-bg);}
#wsWrap .mgr-card-icon{font-size:1.6rem;margin-bottom:8px;}
#wsWrap .mgr-card-name{font-size:0.82rem;font-weight:600;}
#wsWrap .mgr-card-desc{font-size:0.7rem;color:var(--ws-dim);margin-top:3px;line-height:1.4;}
#wsWrap .mgr-card-badge{
  position:absolute;top:10px;right:10px;
  font-size:0.62rem;padding:2px 7px;border-radius:4px;
}
#wsWrap .badge-on{background:rgba(34,197,94,.15);color:var(--ws-green);border:1px solid rgba(34,197,94,.3);}
#wsWrap .badge-off{background:var(--fg-muted);color:var(--ws-dim);border:1px solid var(--ws-border);}

/* ══════════════════════════════════════
   BLOCKS (floating windows)
══════════════════════════════════════ */
#wsWrap .block{
  position:absolute;background:var(--ws-card);
  border:1px solid var(--ws-border);border-radius:14px;
  display:flex;flex-direction:column;
  box-shadow:0 8px 32px var(--bg-2);
  min-width:240px;min-height:80px;
  touch-action:none;
}
#wsWrap .block:hover{border-color:var(--ws-border2);}
#wsWrap .block.dragging{box-shadow:0 20px 60px var(--bg-2);
  border-color:var(--ws-accent-border);opacity:.96;z-index:500!important;}

#wsWrap .block-head{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--fg-muted);
  border-radius:14px 14px 0 0;flex-shrink:0;
  background:var(--fg-muted);cursor:grab;touch-action:none;
}
#wsWrap .block-head:active{cursor:grabbing;}
#wsWrap .block.minimized .block-head{border-bottom:none;border-radius:14px;cursor:grab;}
#wsWrap .block-icon{font-size:.9rem;}
#wsWrap .block-title{font-size:.79rem;font-weight:600;flex:1;}
#wsWrap .bh-btn{background:none;border:none;color:var(--ws-dim);
  font-size:.78rem;padding:2px 7px;border-radius:4px;
  line-height:1;transition:all .1s;}
#wsWrap .bh-btn:hover{background:var(--fg-muted);color:var(--fg);}
#wsWrap .bh-btn.close:hover{background:rgba(239,68,68,.18);color:#f87171;}
#wsWrap .block-body{padding:13px;flex:1;overflow:auto;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;}
#wsWrap .block.minimized .block-body{display:none;}
#wsWrap .resize-h{position:absolute;bottom:4px;right:4px;
  width:16px;height:16px;cursor:se-resize;
  color:var(--ws-dim);font-size:.55rem;opacity:.35;
  display:flex;align-items:flex-end;justify-content:flex-end;
  transition:opacity .15s;touch-action:none;}
#wsWrap .resize-h:hover{opacity:.9;}
#wsWrap .block.minimized .resize-h{display:none;}

/* ══════════════════════════════════════
   NOTIZPAD
══════════════════════════════════════ */
#wsWrap .notiz-back{padding:4px 10px;background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:6px;color:var(--ws-dim2);font-size:.72rem;cursor:pointer;}
#wsWrap .notiz-back:hover{border-color:var(--ws-accent);color:var(--ws-accent);}
#wsWrap .notiz-title-inp{flex:1;background:transparent;border:none;
  border-bottom:1px solid var(--ws-border);
  color:var(--fg);font:.82rem/1 inherit;font-weight:600;outline:none;padding:2px 4px;}
#wsWrap .notiz-title-inp:focus{border-color:var(--ws-accent);}
#wsWrap .notiz-new-inp{flex:1;padding:7px 9px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:7px;
  color:var(--fg);font:.78rem inherit;outline:none;}
#wsWrap .notiz-new-inp:focus{border-color:var(--ws-accent);}
#wsWrap .notiz-new-btn{padding:7px 12px;background:var(--ws-accent);border:none;
  border-radius:7px;color:#fff;font-size:.8rem;}
#wsWrap .notiz-list{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;}
#wsWrap .notiz-item{padding:9px 10px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:8px;cursor:pointer;
  transition:border-color .15s;position:relative;}
#wsWrap .notiz-item:hover{border-color:var(--ws-border2);}
#wsWrap .notiz-item-title{font-size:.8rem;font-weight:600;margin-bottom:2px;}
#wsWrap .notiz-item-preview{font-size:.72rem;color:var(--ws-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
#wsWrap .notiz-item-date{font-size:.66rem;color:var(--ws-dim);margin-top:4px;}
#wsWrap .notiz-item-del{position:absolute;top:8px;right:8px;background:none;border:none;
  color:var(--ws-dim);font-size:.75rem;cursor:pointer;opacity:0;
  transition:opacity .15s;padding:2px 5px;}
#wsWrap .notiz-item:hover .notiz-item-del{opacity:.6;}
#wsWrap .notiz-item-del:hover{color:#f87171;opacity:1!important;}
#wsWrap .ki-demo-btn{padding:4px 10px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:6px;
  color:var(--ws-dim2);font-size:.72rem;cursor:pointer;transition:all .15s;}
#wsWrap .ki-demo-btn:hover{border-color:var(--ws-gold);color:var(--ws-gold);}
#wsWrap .notiz-ta{
  width:100%;min-height:120px;background:transparent;
  border:none;resize:none;color:var(--fg);
  font:0.8rem/1.65 inherit;outline:none;}
#wsWrap .notiz-ta::placeholder{color:var(--ws-dim);}
#wsWrap .notiz-footer{display:flex;justify-content:space-between;
  margin-top:6px;align-items:center;}
#wsWrap .notiz-cnt{font-size:.66rem;color:var(--ws-dim);}
#wsWrap .notiz-sync{font-size:.66rem;color:var(--ws-green);}

/* ══════════════════════════════════════
   TIMER
══════════════════════════════════════ */
#wsWrap .tmr-modes{display:flex;gap:4px;margin-bottom:14px;}
#wsWrap .tmr-m{flex:1;padding:5px 3px;font-size:.7rem;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:6px;color:var(--ws-dim);transition:all .15s;}
#wsWrap .tmr-m.on{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .tmr-digits{text-align:center;font-size:3rem;font-weight:700;
  letter-spacing:-3px;font-variant-numeric:tabular-nums;line-height:1;}
#wsWrap .tmr-phase{text-align:center;font-size:.7rem;color:var(--ws-dim);margin:5px 0 14px;}
#wsWrap .tmr-btns{display:flex;gap:8px;justify-content:center;}
#wsWrap .tmr-btn{padding:7px 20px;border-radius:8px;font-size:.78rem;
  border:1px solid var(--ws-border);background:var(--fg-muted);
  color:var(--fg);transition:all .15s;}
#wsWrap .tmr-btn.go{background:var(--ws-accent);border-color:var(--ws-accent);color:#fff;}
#wsWrap .tmr-btn:hover{opacity:.8;}
#wsWrap .tmr-bar{height:3px;background:var(--fg-muted);
  border-radius:2px;margin-top:14px;overflow:hidden;}
#wsWrap .tmr-fill{height:100%;background:var(--ws-accent);border-radius:2px;transition:width .9s linear;}
#wsWrap .tmr-cycles{text-align:center;font-size:.68rem;color:var(--ws-dim);margin-top:8px;}

/* ══════════════════════════════════════
   TAGESPLANER
══════════════════════════════════════ */
#wsWrap .pl-date{font-size:.7rem;color:var(--ws-dim);margin-bottom:10px;}
#wsWrap .pl-row{display:flex;gap:5px;margin-bottom:8px;}
#wsWrap .pl-inp{flex:1;padding:7px 9px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:7px;
  color:var(--fg);font:.78rem inherit;outline:none;}
#wsWrap .pl-inp:focus{border-color:var(--ws-accent);}
#wsWrap .pl-time{width:70px;}
#wsWrap .pl-add{padding:7px 11px;background:var(--ws-accent);border:none;
  border-radius:7px;color:#fff;font-size:.8rem;}
#wsWrap .pl-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto;}
#wsWrap .pl-item{display:flex;align-items:center;gap:7px;padding:7px 9px;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:7px;font-size:.77rem;}
#wsWrap .pl-time-lbl{font-size:.69rem;color:var(--ws-accent);font-weight:600;width:42px;flex-shrink:0;}
#wsWrap .pl-txt{flex:1;}
#wsWrap .pl-ck,
#wsWrap .pl-del{font-size:.8rem;cursor:pointer;opacity:.5;transition:opacity .15s;}
#wsWrap .pl-ck:hover,
#wsWrap .pl-del:hover{opacity:1;}
#wsWrap .pl-del{color:#f87171;opacity:0;}
#wsWrap .pl-item:hover .pl-del{opacity:.6;}
#wsWrap .pl-item.done .pl-txt{text-decoration:line-through;opacity:.4;}

/* ══════════════════════════════════════
   PHASEN (nummerierte Checkliste)
══════════════════════════════════════ */
#wsWrap .ph-row{display:flex;gap:5px;margin-bottom:8px;}
#wsWrap .ph-inp{flex:1;padding:7px 9px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:7px;
  color:var(--fg);font:.78rem inherit;outline:none;}
#wsWrap .ph-inp:focus{border-color:var(--ws-accent);}
#wsWrap .ph-add{padding:7px 11px;background:var(--ws-accent);border:none;
  border-radius:7px;color:#fff;font-size:.8rem;}
#wsWrap .ph-list{display:flex;flex-direction:column;gap:5px;max-height:200px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;}
#wsWrap .ph-item{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:8px;transition:border-color .15s;}
#wsWrap .ph-item:hover{border-color:var(--ws-border2);}
#wsWrap .ph-item.done{opacity:.5;}
#wsWrap .ph-num{font-size:.74rem;font-weight:700;color:var(--ws-accent);
  width:18px;flex-shrink:0;padding-top:2px;}
#wsWrap .ph-item.done .ph-num{color:var(--ws-green);}
#wsWrap .ph-txt{flex:1;font-size:.78rem;line-height:1.5;word-break:break-word;}
#wsWrap .ph-item.done .ph-txt{text-decoration:line-through;}
#wsWrap .ph-ck{font-size:.82rem;cursor:pointer;flex-shrink:0;opacity:.75;transition:opacity .15s;padding-top:1px;}
#wsWrap .ph-ck:hover{opacity:1;}
#wsWrap .ph-del{font-size:.7rem;color:#f87171;cursor:pointer;opacity:0;
  transition:opacity .15s;padding:2px 4px;line-height:1;background:none;border:none;}
#wsWrap .ph-item:hover .ph-del{opacity:.55;}
#wsWrap .ph-del:hover{opacity:1!important;}
#wsWrap .ph-progress{height:3px;background:var(--fg-muted);
  border-radius:2px;margin-bottom:8px;overflow:hidden;}
#wsWrap .ph-prog-fill{height:100%;background:var(--ws-green);border-radius:2px;transition:width .4s ease;}
#wsWrap .ph-stats{font-size:.67rem;color:var(--ws-dim);margin-bottom:10px;
  display:flex;justify-content:space-between;}

/* ══════════════════════════════════════
   WIKIPEDIA
══════════════════════════════════════ */
#wsWrap .wiki-row{display:flex;gap:5px;margin-bottom:10px;}
#wsWrap .wiki-inp{flex:1;padding:7px 10px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:7px;
  color:var(--fg);font:.79rem inherit;outline:none;}
#wsWrap .wiki-inp:focus{border-color:var(--ws-accent);}
#wsWrap .wiki-btn{padding:7px 12px;background:var(--ws-accent);border:none;
  border-radius:7px;color:#fff;font-size:.8rem;}
#wsWrap .wiki-res-ttl{font-size:.88rem;font-weight:700;margin-bottom:6px;}
#wsWrap .wiki-res-txt{font-size:.78rem;color:var(--ws-dim2);line-height:1.6;}
#wsWrap .wiki-res-link{display:inline-block;margin-top:8px;font-size:.72rem;
  color:var(--ws-accent);text-decoration:none;}
#wsWrap .wiki-res-link:hover{text-decoration:underline;}
#wsWrap .wiki-empty{font-size:.78rem;color:var(--ws-dim);}
#wsWrap .wiki-suggestions{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
#wsWrap .wiki-sug{font-size:.7rem;padding:3px 9px;border-radius:5px;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  cursor:pointer;color:var(--ws-dim2);transition:all .15s;}
#wsWrap .wiki-sug:hover{border-color:var(--ws-accent);color:var(--ws-accent);}

/* ══════════════════════════════════════
   KI-ARBEITSPAD
══════════════════════════════════════ */
#wsWrap .ki-wrap{display:flex;flex-direction:column;height:100%;gap:10px;}
#wsWrap .ki-actions{display:flex;flex-wrap:wrap;gap:5px;}
#wsWrap .ki-act{padding:5px 11px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:7px;
  color:var(--ws-dim2);font-size:.71rem;transition:all .15s;}
#wsWrap .ki-act:hover{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .ki-act.active{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .ki-panels{display:flex;gap:10px;flex:1;min-height:0;}
#wsWrap .ki-panel{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}
#wsWrap .ki-panel-label{font-size:.67rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ws-dim);}
#wsWrap .ki-editor,
#wsWrap .ki-response{
  flex:1;width:100%;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:9px;
  color:var(--fg);font:.78rem/1.65 inherit;
  padding:10px 12px;resize:none;outline:none;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;
  min-height:80px;
}
#wsWrap .ki-editor:focus{border-color:var(--ws-accent-border);}
#wsWrap .ki-response{color:var(--ws-dim2);background:var(--accent-weak);
  border-color:var(--accent-weak);overflow-y:auto;}
#wsWrap .ki-bottom{display:flex;align-items:center;gap:8px;}
#wsWrap .ki-status{font-size:.69rem;color:var(--ws-dim);flex:1;}
#wsWrap .ki-run{padding:6px 16px;background:var(--ws-accent);border:none;
  border-radius:7px;color:#fff;font-size:.77rem;white-space:nowrap;}
#wsWrap .ki-run:hover{opacity:.85;}
#wsWrap .ki-take{padding:5px 12px;background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25);border-radius:7px;
  color:var(--ws-green);font-size:.72rem;}
#wsWrap .ki-take:hover{background:rgba(34,197,94,.2);}
#wsWrap .ki-thinking{display:flex;align-items:center;gap:6px;color:var(--ws-dim);font-size:.75rem;}
#wsWrap .ki-dot{width:5px;height:5px;background:var(--ws-accent);border-radius:50%;
  animation:pulse 1s ease-in-out infinite;}
#wsWrap .ki-dot:nth-child(2){animation-delay:.2s;}
#wsWrap .ki-dot:nth-child(3){animation-delay:.4s;}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.2);}}
#wsWrap .ki-api-note{font-size:.69rem;color:var(--ws-gold);padding:5px 9px;
  background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.18);border-radius:6px;}
#wsWrap .ki-mode-select{display:flex;gap:4px;margin-bottom:4px;}
#wsWrap .ki-mode-btn{flex:1;padding:4px 6px;font-size:.68rem;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:6px;color:var(--ws-dim);transition:all .15s;}
#wsWrap .ki-mode-btn.on{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}

/* ══════════════════════════════════════
   ZEICHENBRETT (Drawing Canvas)
══════════════════════════════════════ */
#wsWrap .draw-toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;
  border-bottom:1px solid var(--ws-border);flex-wrap:wrap;}
#wsWrap .draw-tool{padding:3px 7px;background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:5px;color:var(--ws-dim2);font-size:.72rem;transition:all .15s;cursor:pointer;}
#wsWrap .draw-tool:hover{border-color:var(--ws-border2);background:var(--fg-muted);}
#wsWrap .draw-tool.on{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .draw-color{width:24px;height:24px;border:1px solid var(--ws-border);border-radius:5px;
  background:transparent;cursor:pointer;padding:1px;}
#wsWrap .draw-size{width:50px;accent-color:var(--ws-accent);height:14px;}
#wsWrap .draw-bg-sel{padding:3px 4px;background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:5px;color:var(--ws-dim2);font-size:.68rem;outline:none;cursor:pointer;}
#wsWrap .draw-sep{width:1px;height:20px;background:var(--ws-border);flex-shrink:0;}
#wsWrap .draw-canvas{display:block;width:100%;flex:1;cursor:crosshair;background:#0a0d14;
  border-radius:0 0 13px 13px;}
#wsWrap .draw-canvas.bg-grid{background-image:
  linear-gradient(var(--fg-muted) 1px,transparent 1px),
  linear-gradient(90deg,var(--fg-muted) 1px,transparent 1px);
  background-size:20px 20px;background-color:#0a0d14;}
#wsWrap .draw-canvas.bg-dots{background-image:radial-gradient(var(--line) 1px,transparent 1px);
  background-size:16px 16px;background-color:#0a0d14;}
#wsWrap .draw-canvas.bg-lines{background-image:linear-gradient(var(--fg-muted) 1px,transparent 1px);
  background-size:100% 24px;background-color:#0a0d14;}
#wsWrap .draw-wrap{display:flex;flex-direction:column;height:100%;}

/* Fullscreen block */
#wsWrap .block.block-fullscreen{left:0!important;top:0!important;
  width:100%!important;height:100%!important;z-index:999!important;border-radius:0!important;}
#wsWrap .block.block-fullscreen .block-head{border-radius:0;}
#wsWrap .block.block-fullscreen .draw-canvas{border-radius:0;}

/* ══════════════════════════════════════
   TABELLE (Mini-Spreadsheet)
══════════════════════════════════════ */
#wsWrap .sheet-wrap{display:flex;flex-direction:column;height:100%;}
#wsWrap .sheet-toolbar{display:flex;align-items:center;gap:6px;padding:6px 10px;
  border-bottom:1px solid var(--ws-border);background:var(--fg-muted);}
#wsWrap .sheet-btn{padding:3px 9px;background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:5px;color:var(--ws-dim2);font-size:.68rem;cursor:pointer;}
#wsWrap .sheet-btn:hover{border-color:var(--ws-accent);color:var(--ws-accent);}
#wsWrap .sheet-info{flex:1;text-align:right;font-size:.63rem;color:var(--ws-dim);}
#wsWrap .sheet-scroll{flex:1;overflow:auto;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;}
#wsWrap .sheet-table{border-collapse:collapse;width:100%;min-width:max-content;}
#wsWrap .sheet-table th{background:var(--fg-muted);color:var(--ws-dim);font-size:.65rem;
  font-weight:600;padding:4px 8px;border:1px solid var(--ws-border);
  position:sticky;top:0;z-index:1;text-align:center;min-width:70px;}
#wsWrap .sheet-table th:first-child{min-width:32px;width:32px;}
#wsWrap .sheet-table td{padding:0;border:1px solid var(--ws-border);font-size:.74rem;
  color:var(--fg);min-width:70px;}
#wsWrap .sheet-table td:first-child{background:var(--fg-muted);color:var(--ws-dim);
  font-size:.63rem;text-align:center;padding:4px 6px;font-weight:600;width:32px;min-width:32px;}
#wsWrap .sheet-cell{width:100%;padding:4px 6px;background:transparent;border:none;
  color:var(--fg);font:.74rem inherit;outline:none;}
#wsWrap .sheet-cell:focus{background:var(--accent-weak);box-shadow:inset 0 0 0 1px var(--ws-accent);}

/* ══════════════════════════════════════
   DOKUMENT (Rich Text Editor)
══════════════════════════════════════ */
#wsWrap .doc-wrap{display:flex;flex-direction:column;height:100%;}
#wsWrap .doc-toolbar{display:flex;align-items:center;gap:3px;padding:6px 8px;
  border-bottom:1px solid var(--ws-border);flex-wrap:wrap;}
#wsWrap .doc-btn{padding:3px 7px;background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:4px;color:var(--ws-dim2);font-size:.75rem;cursor:pointer;
  min-width:26px;text-align:center;transition:all .12s;}
#wsWrap .doc-btn:hover{background:var(--fg-muted);color:var(--fg);}
#wsWrap .doc-btn.on{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .doc-sel{padding:3px 4px;background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:4px;color:var(--ws-dim2);font-size:.68rem;outline:none;cursor:pointer;}
#wsWrap .doc-sep{width:1px;height:18px;background:var(--ws-border);flex-shrink:0;margin:0 2px;}
#wsWrap .doc-editor{flex:1;padding:14px;overflow-y:auto;outline:none;
  color:var(--fg);font:.82rem/1.7 inherit;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;}
#wsWrap .doc-editor:empty::before{content:attr(data-ph);color:var(--ws-dim);pointer-events:none;}
#wsWrap .doc-editor h1{font-size:1.3rem;margin:8px 0;}
#wsWrap .doc-editor h2{font-size:1.1rem;margin:6px 0;}
#wsWrap .doc-editor h3{font-size:.95rem;margin:4px 0;}
#wsWrap .doc-editor ul, #wsWrap .doc-editor ol{padding-left:20px;margin:6px 0;}
#wsWrap .doc-editor li{margin:2px 0;}

/* ══════════════════════════════════════
   BROWSER (Safe Whitelist)
══════════════════════════════════════ */
#wsWrap .browser-wrap{display:flex;flex-direction:column;height:100%;}
#wsWrap .browser-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;
  border-bottom:1px solid var(--ws-border);background:var(--fg-muted);}
#wsWrap .browser-site{flex:1;display:flex;align-items:center;gap:8px;padding:5px 10px;
  background:var(--fg-muted);border:1px solid var(--ws-border);border-radius:6px;
  font-size:.72rem;color:var(--ws-dim2);overflow:hidden;white-space:nowrap;}
#wsWrap .browser-site-icon{font-size:.9rem;}
#wsWrap .browser-lock{color:var(--ws-green);font-size:.6rem;}
#wsWrap .browser-sites{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--ws-border);
  overflow-x:auto;flex-shrink:0;}
#wsWrap .browser-bookmark{padding:5px 10px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:7px;font-size:.72rem;
  color:var(--ws-dim2);cursor:pointer;white-space:nowrap;transition:all .12s;}
#wsWrap .browser-bookmark:hover{border-color:var(--ws-accent);color:var(--ws-accent);}
#wsWrap .browser-bookmark.active{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .browser-frame{flex:1;border:none;border-radius:0 0 13px 13px;background:#fff;}
#wsWrap .browser-safe-badge{font-size:.58rem;padding:2px 7px;border-radius:4px;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);
  color:var(--ws-green);white-space:nowrap;}
#wsWrap .browser-attrib{padding:4px 10px;font-size:.58rem;color:var(--ws-dim);
  border-top:1px solid var(--ws-border);background:var(--line-2);
  display:flex;align-items:center;gap:6px;flex-shrink:0;}
#wsWrap .browser-attrib a{color:var(--ws-dim2);text-decoration:none;}
#wsWrap .browser-attrib a:hover{color:var(--ws-accent);}

/* ══════════════════════════════════════
   CANVAS grid background toggle
══════════════════════════════════════ */
#wsWrap .canvas.canvas-grid{
  background-image:linear-gradient(var(--fg-muted) 1px,transparent 1px),
    linear-gradient(90deg,var(--fg-muted) 1px,transparent 1px);
  background-size:24px 24px;
}
#wsWrap .canvas-grid-btn{
  position:absolute;bottom:10px;right:10px;z-index:900;
  padding:4px 10px;border-radius:7px;font-size:.65rem;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  color:var(--ws-dim);cursor:pointer;transition:all .15s;
}
#wsWrap .canvas-grid-btn:hover{border-color:var(--ws-accent);color:var(--ws-accent);}
#wsWrap .canvas-grid-btn.on{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}

/* ══════════════════════════════════════
   VIEW TOGGLE BUTTON
══════════════════════════════════════ */
#wsWrap .canvas-view-btn{
  position:absolute;bottom:10px;right:110px;z-index:900;
  padding:4px 10px;border-radius:7px;font-size:.65rem;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  color:var(--ws-dim);cursor:pointer;transition:all .15s;
}
#wsWrap .canvas-view-btn:hover{border-color:var(--ws-accent);color:var(--ws-accent);}

/* ══════════════════════════════════════
   DESKTOP MODE
══════════════════════════════════════ */
#wsWrap .canvas.desktop-mode .canvas-empty{display:none!important;}
#wsWrap .canvas.desktop-mode{transition:background .4s;}

/* Desktop icon area — absolute positioning */
#wsWrap .desktop-grid{
  position:absolute;top:0;left:0;right:0;bottom:44px;
  z-index:1;overflow:hidden;
}
#wsWrap .desktop-icon{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;width:82px;height:86px;padding:6px 4px;border-radius:10px;
  cursor:pointer;
  transition:background .15s,border-color .15s,opacity .15s;
  border:1px solid transparent;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
#wsWrap .desktop-icon:hover{background:var(--fg-muted);border-color:var(--fg-muted);}
#wsWrap .desktop-icon.open{opacity:.5;}
#wsWrap .desktop-icon.dragging-icon{opacity:.7;z-index:999;
  box-shadow:0 8px 24px var(--bg-2);background:var(--fg-muted);
  border-color:var(--ws-accent-border);transition:none;}
#wsWrap .desktop-icon.drop-target{border-color:var(--ws-accent)!important;
  background:var(--accent-weak)!important;transform:scale(1.08);}
#wsWrap .desktop-icon-emoji{font-size:1.8rem;line-height:1;
  filter:drop-shadow(0 2px 6px var(--bg-2));pointer-events:none;}
#wsWrap .desktop-icon-label{font-size:.58rem;color:var(--ws-dim2);text-align:center;
  line-height:1.15;max-width:76px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-shadow:0 1px 4px var(--bg-2);pointer-events:none;}

/* Folder icon */
#wsWrap .desktop-icon.folder-icon .desktop-icon-emoji{font-size:1.6rem;}
#wsWrap .desktop-icon .folder-badge{
  position:absolute;top:4px;right:4px;font-size:.5rem;
  background:var(--ws-accent-bg);border:1px solid var(--ws-accent-border);
  color:var(--ws-accent);border-radius:4px;padding:0 4px;line-height:1.5;
}

/* Folder overlay */
#wsWrap .desktop-folder-overlay{
  position:absolute;z-index:920;
  width:320px;max-height:340px;
  background:var(--ws-card);border:1px solid var(--ws-border);border-radius:14px;
  box-shadow:0 16px 48px var(--bg-2);display:none;overflow:hidden;
}
#wsWrap .desktop-folder-overlay.open{display:flex;flex-direction:column;}
#wsWrap .folder-overlay-head{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--ws-border);flex-shrink:0;
}
#wsWrap .folder-overlay-title{flex:1;font-size:.78rem;font-weight:600;
  background:none;border:none;color:var(--fg);outline:none;
  font-family:inherit;}
#wsWrap .folder-overlay-close{background:none;border:none;color:var(--ws-dim);
  font-size:.8rem;cursor:pointer;padding:2px 6px;border-radius:4px;}
#wsWrap .folder-overlay-close:hover{background:rgba(239,68,68,.18);color:#f87171;}
#wsWrap .folder-overlay-body{
  display:flex;flex-wrap:wrap;gap:4px;padding:12px;overflow-y:auto;
  min-height:60px;align-content:start;
}
#wsWrap .folder-overlay-body .desktop-icon{
  position:relative;width:76px;height:80px;flex-shrink:0;
}
#wsWrap .folder-overlay-empty{
  width:100%;text-align:center;padding:20px;
  color:var(--ws-dim);font-size:.72rem;
}

/* Background picker panel */
#wsWrap .desktop-bg-panel{
  position:absolute;z-index:960;
  bottom:54px;left:10px;
  background:var(--ws-card);border:1px solid var(--ws-border);border-radius:12px;
  padding:12px;width:260px;box-shadow:0 12px 40px var(--bg-2);
  display:none;
}
#wsWrap .desktop-bg-panel.open{display:block;}
#wsWrap .bg-panel-title{font-size:.7rem;font-weight:600;color:var(--ws-dim2);
  margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;}
#wsWrap .bg-panel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px;}
#wsWrap .bg-swatch{
  width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;
  border:2px solid transparent;transition:all .15s;
}
#wsWrap .bg-swatch:hover{transform:scale(1.1);border-color:var(--fg-muted);}
#wsWrap .bg-swatch.active{border-color:var(--ws-accent);box-shadow:0 0 0 2px var(--ws-accent-bg);}
#wsWrap .bg-custom-row{display:flex;gap:6px;align-items:center;}
#wsWrap .bg-custom-row label{font-size:.62rem;color:var(--ws-dim);white-space:nowrap;}
#wsWrap .bg-custom-row input[type="color"]{
  width:28px;height:28px;border:1px solid var(--ws-border);border-radius:6px;
  background:none;cursor:pointer;padding:1px;
}
#wsWrap .bg-custom-row input[type="file"]{display:none;}
#wsWrap .bg-custom-btn{
  padding:4px 10px;border-radius:6px;font-size:.62rem;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  color:var(--ws-dim2);cursor:pointer;transition:all .12s;
}
#wsWrap .bg-custom-btn:hover{border-color:var(--ws-accent);color:var(--ws-accent);}

/* Taskbar */
#wsWrap .desktop-taskbar{
  position:absolute;bottom:0;left:0;right:0;height:44px;z-index:850;
  display:flex;align-items:center;gap:4px;padding:0 10px;
  background:rgba(10,14,22,.85);-webkit-
  border-top:1px solid var(--fg-muted);
}
#wsWrap .desktop-taskbar-left{display:flex;align-items:center;gap:4px;flex:1;overflow-x:auto;
  scrollbar-width:none;}
#wsWrap .desktop-taskbar-left::-webkit-scrollbar{display:none;}
#wsWrap .desktop-taskbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:8px;}
#wsWrap .taskbar-item{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:7px;
  background:var(--fg-muted);
  border:1px solid var(--ws-border);
  cursor:pointer;font-size:.68rem;color:var(--ws-dim2);
  transition:all .12s;white-space:nowrap;flex-shrink:0;
}
#wsWrap .taskbar-item:hover{background:var(--fg-muted);color:var(--fg);}
#wsWrap .taskbar-item.active{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .taskbar-item.minimized-item{opacity:.6;border-style:dashed;}
#wsWrap .taskbar-item-icon{font-size:.85rem;}
#wsWrap .taskbar-clock{font-size:.65rem;color:var(--ws-dim);font-variant-numeric:tabular-nums;
  padding:2px 8px;border-left:1px solid var(--ws-border);}

/* Right-click context menu */
#wsWrap .desktop-ctx{
  position:absolute;z-index:950;
  background:var(--ws-card);border:1px solid var(--ws-border);border-radius:10px;
  padding:5px;min-width:170px;box-shadow:0 12px 40px var(--bg-2);
  display:none;
}
#wsWrap .desktop-ctx.open{display:block;}
#wsWrap .desktop-ctx-item{
  display:flex;align-items:center;gap:9px;padding:8px 12px;
  border-radius:7px;cursor:pointer;font-size:.73rem;color:var(--ws-dim2);
  transition:all .12s;border:none;background:none;width:100%;text-align:left;
}
#wsWrap .desktop-ctx-item:hover{background:var(--fg-muted);color:var(--fg);}
#wsWrap .desktop-ctx-sep{height:1px;background:var(--ws-border);margin:3px 8px;}

/* Hide desktop elements when not in desktop mode */
#wsWrap .canvas:not(.desktop-mode) .desktop-grid,
#wsWrap .canvas:not(.desktop-mode) .desktop-taskbar,
#wsWrap .canvas:not(.desktop-mode) .desktop-ctx,
#wsWrap .canvas:not(.desktop-mode) .desktop-folder-overlay,
#wsWrap .canvas:not(.desktop-mode) .desktop-bg-panel{display:none!important;}

/* In desktop mode, adjust block positioning for taskbar space */
#wsWrap .canvas.desktop-mode .block{z-index:100;}
/* In desktop mode: hide all floating canvas buttons — controls move to taskbar */
#wsWrap .canvas.desktop-mode .canvas-add,
#wsWrap .canvas.desktop-mode .canvas-ki-btn,
#wsWrap .canvas.desktop-mode .canvas-grid-btn,
#wsWrap .canvas.desktop-mode .canvas-view-btn{display:none!important;}
#wsWrap .canvas.desktop-mode .canvas-menu{top:auto;bottom:50px;right:10px;}

/* Taskbar action buttons (right side) */
#wsWrap .taskbar-action{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:7px;
  background:var(--fg-muted);border:1px solid var(--ws-border);
  color:var(--ws-dim);cursor:pointer;font-size:.9rem;flex-shrink:0;
  transition:all .12s;
}
#wsWrap .taskbar-action:hover{background:var(--line);color:var(--fg);border-color:var(--ws-border2);}
#wsWrap .taskbar-action.on{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .taskbar-sep{width:1px;height:20px;background:var(--fg-muted);flex-shrink:0;margin:0 2px;}

/* Touch long-press feedback */
#wsWrap .desktop-grid.longpress-hint .desktop-icon:not(.folder-icon){
  animation:iconWiggle .4s ease;
}
@keyframes iconWiggle{
  0%,100%{transform:rotate(0deg);}
  25%{transform:rotate(-3deg);}
  75%{transform:rotate(3deg);}
}

/* KI-Studio minimized */
#wsWrap .ki-studio.minimized{
  inset:auto 10px 10px auto;width:auto;height:auto;
  border-radius:12px;border:1px solid var(--ws-accent-border);
  box-shadow:0 8px 32px var(--bg-2);
}
#wsWrap .ki-studio.minimized .ki-studio-sidebar,
#wsWrap .ki-studio.minimized .ki-studio-main{display:none;}
#wsWrap .ki-studio-min-bar{display:none;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;}
#wsWrap .ki-studio.minimized .ki-studio-min-bar{display:flex;}
#wsWrap .ki-studio-min-bar span{font-size:.78rem;font-weight:600;}

/* ══════════════════════════════════════
   CODE-TERMINAL
══════════════════════════════════════ */
#wsWrap .term-wrap{display:flex;flex-direction:column;height:100%;gap:0;}
#wsWrap .term-editor{flex:1;width:100%;background:var(--bg-2);border:none;resize:none;
  color:#a5f3fc;font:0.78rem/1.5 'Cascadia Code','Fira Code',monospace;
  padding:10px 12px;outline:none;border-bottom:1px solid var(--ws-border);
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;}
#wsWrap .term-editor::placeholder{color:rgba(165,243,252,.3);}
#wsWrap .term-output{flex:1;width:100%;background:var(--bg-2);
  padding:10px 12px;overflow-y:auto;font:0.75rem/1.5 'Cascadia Code','Fira Code',monospace;
  color:var(--ws-green);scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;}
#wsWrap .term-output .err{color:#f87171;}
#wsWrap .term-output .log{color:var(--ws-dim2);}
#wsWrap .term-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-top:1px solid var(--ws-border);background:var(--fg-muted);}
#wsWrap .term-run{padding:5px 14px;background:var(--ws-green);border:none;border-radius:6px;
  color:#000;font-size:.75rem;font-weight:600;}
#wsWrap .term-run:hover{opacity:.85;}
#wsWrap .term-clear{padding:5px 10px;background:none;border:1px solid var(--ws-border);
  border-radius:6px;color:var(--ws-dim);font-size:.72rem;}
#wsWrap .term-clear:hover{border-color:var(--ws-border2);color:var(--fg);}
#wsWrap .term-status{flex:1;font-size:.67rem;color:var(--ws-dim);text-align:right;}

/* ══════════════════════════════════════
   KI-CHAT
══════════════════════════════════════ */
#wsWrap .chat-wrap{display:flex;flex-direction:column;height:100%;}
#wsWrap .chat-msgs{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;}
#wsWrap .chat-msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:.78rem;line-height:1.5;
  word-break:break-word;animation:chatIn .2s ease;}
#wsWrap .chat-msg.user{align-self:flex-end;background:var(--ws-accent);color:#fff;border-bottom-right-radius:4px;}
#wsWrap .chat-msg.bot{align-self:flex-start;background:var(--fg-muted);
  border:1px solid var(--ws-border);color:var(--fg);border-bottom-left-radius:4px;}
#wsWrap .chat-msg.bot .chat-label{font-size:.62rem;color:var(--ws-accent);font-weight:600;margin-bottom:3px;}
#wsWrap .chat-typing{align-self:flex-start;padding:8px 16px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:12px;font-size:.75rem;color:var(--ws-dim);}
@keyframes chatIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
#wsWrap .chat-input-row{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--ws-border);
  background:var(--fg-muted);}
#wsWrap .chat-inp{flex:1;padding:8px 12px;background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:8px;color:var(--fg);font:.78rem inherit;outline:none;}
#wsWrap .chat-inp:focus{border-color:var(--ws-accent);}
#wsWrap .chat-send{padding:8px 14px;background:var(--ws-accent);border:none;border-radius:8px;
  color:#fff;font-size:.8rem;}
#wsWrap .chat-send:hover{opacity:.85;}
#wsWrap .chat-empty{text-align:center;color:var(--ws-dim);font-size:.78rem;padding:30px 10px;}

/* ══════════════════════════════════════
   MANAGER bigger cards
══════════════════════════════════════ */
#wsWrap .mgr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
#wsWrap .mgr-card{padding:18px;}
#wsWrap .mgr-card-icon{font-size:2rem;margin-bottom:10px;}
#wsWrap .mgr-card-name{font-size:.88rem;}
#wsWrap .mgr-card-desc{font-size:.73rem;line-height:1.5;}

/* ══════════════════════════════════════
   CANVAS '+' BUTTON
══════════════════════════════════════ */
#wsWrap .canvas-ki-btn{
  position:absolute;top:10px;right:58px;z-index:900;
  width:38px;height:38px;border-radius:10px;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);
  color:var(--ws-gold);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;line-height:1;
}
#wsWrap .canvas-ki-btn:hover{background:var(--ws-gold);color:#000;transform:scale(1.08);}

#wsWrap .canvas-add{
  position:absolute;top:10px;right:10px;z-index:900;
  width:38px;height:38px;border-radius:10px;
  background:var(--ws-accent-bg);border:1px solid var(--ws-accent-border);
  color:var(--ws-accent);font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;line-height:1;
}
#wsWrap .canvas-add:hover{background:var(--ws-accent);color:#fff;transform:scale(1.08);}
#wsWrap .canvas-menu{
  position:absolute;top:54px;right:10px;z-index:900;
  background:var(--ws-card);border:1px solid var(--ws-border);border-radius:12px;
  padding:6px;min-width:180px;box-shadow:0 12px 40px var(--bg-2);
  display:none;
}
#wsWrap .canvas-menu.open{display:block;}
#wsWrap .canvas-menu-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:8px;cursor:pointer;font-size:.78rem;color:var(--ws-dim2);
  transition:all .12s;border:none;background:none;width:100%;text-align:left;
}
#wsWrap .canvas-menu-item:hover{background:var(--fg-muted);color:var(--fg);}

/* ══════════════════════════════════════
   KI-STUDIO
══════════════════════════════════════ */
#wsWrap .ki-studio{
  position:absolute;z-index:950;
  background:var(--bg-0);display:none;
  flex-direction:row;overflow:hidden;
  border:1px solid var(--ws-border);border-radius:14px;
  box-shadow:0 12px 48px var(--bg-2);
  left:5%;top:3%;width:90%;height:94%;
  resize:both;min-width:500px;min-height:300px;
}
#wsWrap .ki-studio.open{display:flex;}
#wsWrap .ki-studio-sidebar{
  width:200px;border-right:1px solid var(--ws-border);
  display:flex;flex-direction:column;flex-shrink:0;
  background:var(--line-2);
}
#wsWrap .ki-studio-sb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px;border-bottom:1px solid var(--ws-border);
}
#wsWrap .ki-studio-new-btn{
  padding:3px 10px;background:var(--ws-accent);border:none;border-radius:6px;
  color:#fff;font-size:.7rem;cursor:pointer;
}
#wsWrap .ki-studio-new-btn:hover{opacity:.85;}
#wsWrap .ki-studio-pagelist{
  flex:1;overflow-y:auto;padding:6px;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;
}
#wsWrap .ki-studio-page-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:8px;cursor:pointer;font-size:.77rem;color:var(--ws-dim2);
  transition:all .12s;border:none;background:none;width:100%;text-align:left;
  margin-bottom:2px;
}
#wsWrap .ki-studio-page-item:hover{background:var(--fg-muted);color:var(--fg);}
#wsWrap .ki-studio-page-item.active{background:var(--ws-accent-bg);border:1px solid var(--ws-accent-border);color:var(--fg);}
#wsWrap .ki-studio-page-item .pg-del{
  margin-left:auto;opacity:0;color:#f87171;font-size:.7rem;
  background:none;border:none;cursor:pointer;padding:2px 4px;
}
#wsWrap .ki-studio-page-item:hover .pg-del{opacity:.5;}
#wsWrap .ki-studio-page-item .pg-del:hover{opacity:1;}

#wsWrap .ki-studio-main{
  flex:1;display:flex;flex-direction:column;min-width:0;
}
#wsWrap .ki-studio-topbar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--ws-border);
}
#wsWrap .ki-studio-title{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--ws-border);
  color:var(--fg);font:.88rem/1 inherit;font-weight:600;outline:none;padding:4px 2px;
}
#wsWrap .ki-studio-title:focus{border-color:var(--ws-accent);}
#wsWrap .ki-studio-ver-info{font-size:.65rem;color:var(--ws-dim);white-space:nowrap;}
#wsWrap .ki-studio-close{
  background:none;border:1px solid var(--ws-border);border-radius:6px;
  color:var(--ws-dim);padding:4px 10px;font-size:.8rem;cursor:pointer;
}
#wsWrap .ki-studio-close:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#f87171;}

#wsWrap .ki-studio-actions{
  display:flex;flex-wrap:wrap;gap:5px;padding:10px 14px;
  border-bottom:1px solid var(--ws-border);
}
#wsWrap .ki-studio-act{
  padding:5px 11px;background:var(--fg-muted);
  border:1px solid var(--ws-border);border-radius:7px;
  color:var(--ws-dim2);font-size:.71rem;transition:all .15s;cursor:pointer;
}
#wsWrap .ki-studio-act:hover{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}
#wsWrap .ki-studio-act.active{background:var(--ws-accent-bg);border-color:var(--ws-accent-border);color:var(--ws-accent);}

#wsWrap .ki-studio-panels{
  display:flex;gap:0;flex:1;min-height:0;
}
#wsWrap .ki-studio-panel{
  flex:1;display:flex;flex-direction:column;min-width:0;
  border-right:1px solid var(--ws-border);
}
#wsWrap .ki-studio-panel:last-child{border-right:none;}
#wsWrap .ki-studio-label{
  font-size:.67rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ws-dim);padding:8px 14px 4px;
}
#wsWrap .ki-studio-editor{
  flex:1;width:100%;background:transparent;border:none;resize:none;
  color:var(--fg);font:.78rem/1.65 inherit;padding:8px 14px;outline:none;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;
}
#wsWrap .ki-studio-editor::placeholder{color:var(--ws-dim);}
#wsWrap .ki-studio-result{
  flex:1;overflow-y:auto;padding:8px 14px;
  font-size:.78rem;line-height:1.65;color:var(--ws-dim2);
  white-space:pre-wrap;
  scrollbar-width:thin;scrollbar-color:var(--fg-muted) transparent;
}

#wsWrap .ki-studio-bottom{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-top:1px solid var(--ws-border);background:var(--fg-muted);
}
#wsWrap .ki-studio-gen{
  padding:6px 16px;background:var(--ws-accent);border:none;border-radius:7px;
  color:#fff;font-size:.77rem;cursor:pointer;
}
#wsWrap .ki-studio-gen:hover{opacity:.85;}
#wsWrap .ki-studio-save{
  padding:6px 14px;background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25);border-radius:7px;
  color:var(--ws-green);font-size:.74rem;cursor:pointer;
}
#wsWrap .ki-studio-save:hover{background:rgba(34,197,94,.22);}
#wsWrap .ki-studio-deploy{
  padding:6px 14px;background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.25);border-radius:7px;
  color:var(--ws-gold);font-size:.74rem;cursor:pointer;
}
#wsWrap .ki-studio-deploy:hover{background:rgba(245,158,11,.2);}
#wsWrap .ki-studio-versions{
  flex:1;display:flex;gap:4px;align-items:center;justify-content:flex-end;
  overflow-x:auto;
}
#wsWrap .ki-studio-ver{
  padding:3px 8px;background:var(--fg-muted);border:1px solid var(--ws-border);
  border-radius:5px;font-size:.63rem;color:var(--ws-dim);cursor:pointer;
  white-space:nowrap;
}
#wsWrap .ki-studio-ver:hover{border-color:var(--ws-accent);color:var(--ws-accent);}
#wsWrap .ki-studio-ver.current{border-color:var(--ws-accent-border);color:var(--ws-accent);background:var(--ws-accent-bg);}

/* KI-PAGE block (deployed page) */
#wsWrap .ki-page-content{font-size:.78rem;line-height:1.65;color:var(--ws-dim2);white-space:pre-wrap;}
#wsWrap .ki-page-badge{font-size:.62rem;padding:2px 8px;border-radius:4px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);
  color:var(--ws-gold);margin-bottom:8px;display:inline-block;}

/* ══════════════════════════════════════
   DEMO BANNER CLEARANCE
══════════════════════════════════════ */
html.demo-mode #wsWrap {
  height: calc(100vh - 158px); /* 110px nav + 48px banner */
}

/* ══════════════════════════════════════
   TABLET (481px – 768px)
══════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  /* Workstation Page nutzt flex-1 von .main (auto-fits zwischen mob-header
     und bnav). padding-bottom wird durch shell-sidebar.css .pg-Regel
     gesetzt (88px / 140px in demo-mode), damit Content nicht hinter bnav
     verschwindet. */
  #pg-proj.on {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }
  #wsWrap {
    height: auto !important;
    flex: 1;
    min-height: 0;
    border-radius: 8px;
  }

  #wsWrap .tabbar { padding: 0 8px; height: 38px; gap: 3px; }
  #wsWrap .tab { padding: 4px 10px; font-size: 0.7rem; border-radius: 6px; }
  #wsWrap .tab-inp { max-width: 80px; }

  #wsWrap .dock { padding: 0 10px; height: 44px; gap: 4px; }
  #wsWrap .dock-item { padding: 4px 8px; min-width: 44px; border-radius: 8px; }
  #wsWrap .dock-item-icon { font-size: 0.95rem; }
  #wsWrap .dock-item-label { font-size: 0.52rem; }

  /* Blocks: 2-Spalten Grid statt frei positioniert */
  #wsWrap .canvas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-content: start;
  }
  #wsWrap .block {
    position: relative !important;
    left: 0 !important; top: auto !important;
    width: 100% !important;
    min-width: unset;
    min-height: 200px;
    max-height: 400px;
  }
  #wsWrap .block-head { cursor: default; touch-action: auto; }
  #wsWrap .block-body { max-height: 300px; overflow-y: auto; }
  #wsWrap .resize-h { display: none; }

  #wsWrap .mgr-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ══════════════════════════════════════
   PHONE (max 480px)
══════════════════════════════════════ */
@media (max-width: 480px) {
  /* Workstation Page nutzt flex-1 von .main; padding-bottom kommt aus
     shell-sidebar.css (.pg) — Content bleibt ueber der bnav. */
  #pg-proj.on {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }
  #wsWrap {
    height: auto !important;
    flex: 1;
    min-height: 0;
    border-radius: 6px;
    border: none;
  }

  /* Tabs: nur Icons sichtbar, horizontal scrollbar */
  #wsWrap .tabbar { padding: 0 6px; height: 34px; gap: 2px; }
  #wsWrap .tab { padding: 3px 6px; font-size: 0.62rem; border-radius: 5px; }
  #wsWrap .tab-inp { max-width: 50px; font-size: 0.62rem; }
  #wsWrap .btn-add-tab { padding: 3px 8px; font-size: 0.85rem; }

  /* Dock: nur Icons, kein Label, horizontal scroll */
  #wsWrap .dock { padding: 0 6px; height: 40px; gap: 3px; }
  #wsWrap .dock-item { padding: 4px 6px; min-width: 36px; border-radius: 6px; }
  #wsWrap .dock-item-icon { font-size: 0.9rem; }
  #wsWrap .dock-item-label { display: none; }
  #wsWrap .dock-sep { height: 20px; }
  #wsWrap .btn-manage { padding: 4px 6px; min-width: 36px; }
  #wsWrap .btn-manage-icon { font-size: 0.9rem; }

  /* Blocks: gestapelt, volle Breite, scrollbar */
  #wsWrap .canvas {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
  }
  #wsWrap .block {
    position: relative !important;
    left: 0 !important; top: auto !important;
    width: 100% !important;
    margin: 0 0 8px 0;
    min-width: unset;
    border-radius: 10px;
    max-height: 350px;
  }
  #wsWrap .block-head {
    cursor: default;
    touch-action: auto;
    padding: 8px 10px;
    min-height: 44px; /* Touch-Target */
  }
  #wsWrap .block-body {
    padding: 10px;
    max-height: 260px;
    overflow-y: auto;
  }
  #wsWrap .resize-h { display: none; }
  #wsWrap .block.minimized { max-height: unset; }

  /* Touch-Targets: min 44px */
  #wsWrap .bh-btn { min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; }

  /* Manager */
  #wsWrap .manager { padding: 12px; }
  #wsWrap .mgr-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  #wsWrap .mgr-card { padding: 10px; }

  /* Code Terminal */
  #wsWrap .code-area { font-size: 0.72rem !important; }

  /* Planer */
  #wsWrap .planner-table { font-size: 0.65rem; }
  #wsWrap .planner-td-input { font-size: 0.65rem; padding: 3px 5px; }
}