/* ════════════════════════════════════════════════════════════════════════════
   Dateien-Modus (VS-Code-artig): Explorer | Editor | Session-Tabs
   Raster mit Spalten-Variablen (Breiten per Splitter). Mobile first:
   • <768 px   Explorer als Schublade, Inhalt volle Breite, Umschalter oben
   • 768–1099  Explorer-Spalte + EIN Inhaltsbereich (Editor ODER Session)
   • ≥1100 px  drei Spalten; ohne offene Datei bekommt die Session den Platz
   ════════════════════════════════════════════════════════════════════════════ */

#vscode-view{display:none}
#app.mode-vscode #body{display:none}
#app.mode-vscode #vscode-view{
  --c-files:var(--vs-wf,272px);--c-s1:6px;--c-ed:minmax(0,1fr);--c-s2:6px;--c-ses:var(--vs-ws,440px);
  flex:1;min-width:0;min-height:0;display:grid;overflow:hidden;
  grid-template-columns:var(--c-files) var(--c-s1) var(--c-ed) var(--c-s2) var(--c-ses);
  grid-template-rows:minmax(0,1fr);
}
#vs-files{grid-column:1;grid-row:1}
#vs-split-1{grid-column:2;grid-row:1}
#vs-editor{grid-column:3;grid-row:1}
#vs-split-2{grid-column:4;grid-row:1}
#vs-sessions{grid-column:5;grid-row:1}
#vs-switch{display:none}
#app.mode-vscode #vscode-view:not(.vs-has-file){--c-ed:0px;--c-s2:0px;--c-ses:minmax(0,1fr)}
#vscode-view:not(.vs-has-file) #vs-editor,#vscode-view:not(.vs-has-file) #vs-split-2{display:none}
#app.mode-vscode #vscode-view.vs-files-collapsed{--c-files:0px;--c-s1:0px}
#vscode-view.vs-files-collapsed #vs-files,#vscode-view.vs-files-collapsed #vs-split-1{display:none}

.vs-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--ground)}
#vs-files{background:var(--surface);border-right:1px solid var(--line)}
#vs-sessions{border-left:1px solid var(--line)}
#vscode-view:not(.vs-has-file) #vs-sessions{border-left:0}
.vs-split{cursor:col-resize;touch-action:none;background:transparent;transition:background var(--t-fast)}
.vs-split:hover,.vs-split.drag{background:var(--signal-line)}

/* ── Explorer ────────────────────────────────────────────────────────────── */
.vs-files-hdr{display:flex;align-items:center;gap:2px;flex-shrink:0;min-height:var(--bar-h);padding:0 6px 0 8px;border-bottom:1px solid var(--line)}
.vs-root{flex:1;min-width:0;display:flex;align-items:center;gap:4px}
.vs-files-title{min-width:0;padding:0 6px;font-size:14.5px;font-weight:600;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-files-actions{display:flex;gap:0;flex-shrink:0}
.vs-icon-btn{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;color:var(--ink-3);transition:background var(--t-fast),color var(--t-fast)}
.vs-icon-btn:hover{background:var(--raised);color:var(--ink)}
.vs-icon-btn.on{background:var(--signal-wash);color:var(--signal-ink)}
.vs-icon-btn:disabled{opacity:.35}
.vs-crumb{display:flex;align-items:center;gap:2px;flex-shrink:0;min-height:32px;padding:0 12px;overflow-x:auto;scrollbar-width:none;font-size:12.5px;color:var(--ink-3);border-bottom:1px solid var(--line)}
.vs-crumb::-webkit-scrollbar{display:none}
.vs-crumb button{flex-shrink:0;min-height:26px;padding:0 5px;border-radius:5px;color:var(--ink-3);white-space:nowrap}
.vs-crumb button:hover{background:var(--raised);color:var(--ink)}
.vs-crumb button:last-child{color:var(--ink-2);font-weight:550}
.vs-crumb .sep{color:var(--ink-4);flex-shrink:0}

/* Schnellsuche */
.vs-search{display:none;flex-shrink:0;padding:8px 10px;border-bottom:1px solid var(--line)}
#vs-files.searching .vs-search{display:block}
.vs-search input{min-height:36px;padding:6px 12px 6px 34px;border-radius:var(--r-pill);font-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237f8d8a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.6' y2='16.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center}
.vs-results{display:none;flex:1;min-height:0;overflow:auto;padding:4px 6px 12px}
#vs-files.searching.has-query .vs-results{display:block}
#vs-files.searching.has-query .vs-tree{display:none}
.vs-result{display:flex;flex-direction:column;gap:1px;width:100%;padding:7px 10px;border-radius:var(--r-sm);text-align:left}
.vs-result:hover{background:var(--raised)}
.vs-result b{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-result b svg{color:var(--ink-3)}
.vs-result b .folder{color:var(--signal-ink)}
.vs-result span{padding-left:21px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-result mark{background:var(--signal-wash);color:inherit;border-radius:2px}
.vs-results-note{padding:10px;font-size:13px;color:var(--ink-3);text-align:center}

/* Baum */
.vs-tree{flex:1;min-height:0;overflow:auto;padding:6px 6px 16px;font-size:13.5px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.vs-tree.drop{background:var(--signal-wash);box-shadow:inset 0 0 0 2px var(--signal-line)}
.vs-tree-empty{padding:16px 12px;color:var(--ink-3);font-size:13.5px}
.vs-tree-hint{display:block;width:calc(100% - 8px);margin:8px 4px 4px;padding:8px 12px;border-radius:var(--r-sm);border:1.5px dashed var(--line-2);font-size:13px;color:var(--ink-3);text-align:left}
.vs-tree-hint:hover{color:var(--ink-2);border-color:var(--line-3)}
.vs-row{
  display:flex;align-items:center;gap:6px;min-height:30px;padding-right:4px;border-radius:7px;
  color:var(--ink-2);white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.vs-row:hover{background:var(--raised)}
.vs-row.file.active{background:var(--signal-wash);color:var(--ink)}
.vs-row.dir.sel{color:var(--ink)}
.vs-row.drop-target{background:var(--signal-wash);box-shadow:inset 0 0 0 1.5px var(--signal)}
.vs-row.cut{opacity:.5}
.vs-chevron{display:grid;place-items:center;width:14px;flex-shrink:0;color:var(--ink-3);transition:transform var(--t-fast)}
.vs-chevron.open{transform:rotate(90deg)}
.vs-row-ic{display:grid;place-items:center;flex-shrink:0}
.vs-row-ic.folder{color:var(--signal-ink)}
.vs-row-ic.file{color:var(--ink-3)}
.vs-row-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vs-row-meta{margin-left:auto;padding-left:8px;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.vs-row:hover .vs-row-meta{display:none}
.vs-row-acts{margin-left:auto;display:none;gap:1px;padding-left:6px}
.vs-row:hover .vs-row-acts{display:flex}
.vs-row-act{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3)}
.vs-row-act:hover{background:var(--raised-2);color:var(--ink)}
.vs-row-more{display:none;margin-left:auto;width:36px;height:32px;border-radius:7px;place-items:center;flex-shrink:0;color:var(--ink-3)}
.vs-row-more:active{background:var(--raised-2)}
@media (hover:none){
  .vs-row:hover{background:transparent}
  .vs-row.file.active{background:var(--signal-wash)}
  .vs-row-acts,.vs-row:hover .vs-row-acts{display:none}
  .vs-row-more{display:grid}
  .vs-row-meta,.vs-row:hover .vs-row-meta{display:none}
}
@media (pointer:coarse){
  .vs-row{min-height:42px;font-size:15px;gap:8px}
  .vs-icon-btn{width:40px;height:40px}
}

/* Upload-Fortschritt im Explorer */
.vs-progress{display:none;flex-shrink:0;padding:8px 12px 10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.vs-progress.on{display:block}
.vs-progress-bar{height:5px;margin-top:6px;border-radius:3px;background:var(--raised-2);overflow:hidden}
.vs-progress-bar i{display:block;height:100%;width:0;background:var(--signal);transition:width .15s linear}

/* ── Editor ──────────────────────────────────────────────────────────────── */
.vs-editor-hdr{display:flex;align-items:center;gap:4px;flex-shrink:0;min-height:var(--bar-h);padding:0 6px 0 16px;border-bottom:1px solid var(--line);min-width:0}
.vs-editor-title{flex:0 1 auto;min-width:0;display:flex;flex-direction:column}
.vs-editor-name{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-editor-path{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.vs-dirty-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex-shrink:0;margin:0 4px}
.vs-editor-spacer{flex:1}
.vs-btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;flex-shrink:0;border:1px solid var(--line-2)}
.vs-btn:hover{background:var(--raised)}
.vs-btn-amber{background:var(--signal);color:var(--on-signal);border-color:transparent;font-weight:600}
.vs-btn-amber:hover{background:var(--signal);filter:brightness(1.06)}
.vs-btn-amber:disabled{background:var(--raised-2);color:var(--ink-3);filter:none;opacity:1}
.vs-btn-ghost{background:transparent}
.vs-editor-body{flex:1;min-height:0;position:relative;display:flex;overflow:hidden}
.vs-editor-host{flex:1;min-width:0;min-height:0;overflow:hidden}
.vs-editor-host .CodeMirror{height:100%;font-family:var(--font-mono);font-size:13.5px;line-height:1.6}
.vs-editor-empty,.vs-editor-info{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;color:var(--ink-3);font-size:14px;line-height:1.55;text-align:center}
.vs-editor-image{flex:1;align-items:center;justify-content:center;overflow:auto;padding:24px;background:var(--surface)}
.vs-editor-image img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-sm);box-shadow:var(--shadow-float)}

/* CodeMirror-Theme aus den Design-Tokens (passt sich Nacht/Tag an) */
.cm-s-werk.CodeMirror{background:var(--ground);color:var(--ink)}
.cm-s-werk .CodeMirror-gutters{background:var(--ground);border-right:1px solid var(--line)}
.cm-s-werk .CodeMirror-linenumber{color:var(--ink-4);padding:0 10px 0 6px}
.cm-s-werk .CodeMirror-cursor{border-left:2px solid var(--signal)}
.cm-s-werk .CodeMirror-selected,.cm-s-werk .CodeMirror-focused .CodeMirror-selected,.cm-s-werk .CodeMirror-line::selection,.cm-s-werk .CodeMirror-line>span::selection,.cm-s-werk .CodeMirror-line>span>span::selection{background:var(--selection)}
.cm-s-werk .CodeMirror-activeline-background{background:var(--surface)}
.cm-s-werk .CodeMirror-matchingbracket{color:var(--signal-ink)!important;text-decoration:underline}
.cm-s-werk span.cm-comment{color:var(--ink-3);font-style:italic}
.cm-s-werk span.cm-keyword{color:#e98ba3}
.cm-s-werk span.cm-string,.cm-s-werk span.cm-string-2{color:#b5d68a}
.cm-s-werk span.cm-number,.cm-s-werk span.cm-atom{color:#f2b441}
.cm-s-werk span.cm-def,.cm-s-werk span.cm-variable-2{color:#8fc7f3}
.cm-s-werk span.cm-property,.cm-s-werk span.cm-attribute{color:#7fd3c8}
.cm-s-werk span.cm-tag{color:#e98ba3}
.cm-s-werk span.cm-variable,.cm-s-werk span.cm-variable-3,.cm-s-werk span.cm-type{color:var(--ink)}
.cm-s-werk span.cm-builtin,.cm-s-werk span.cm-qualifier,.cm-s-werk span.cm-meta{color:#c5a6f3}
.cm-s-werk span.cm-operator,.cm-s-werk span.cm-bracket{color:var(--ink-2)}
.cm-s-werk span.cm-header{color:var(--signal-ink);font-weight:600}
.cm-s-werk span.cm-link{color:#8fc7f3;text-decoration:underline}
.cm-s-werk span.cm-error{color:var(--danger)}
:root[data-theme="light"] .cm-s-werk span.cm-keyword,:root[data-theme="light"] .cm-s-werk span.cm-tag{color:#b0274f}
:root[data-theme="light"] .cm-s-werk span.cm-string,:root[data-theme="light"] .cm-s-werk span.cm-string-2{color:#3d7a14}
:root[data-theme="light"] .cm-s-werk span.cm-number,:root[data-theme="light"] .cm-s-werk span.cm-atom{color:#9a5b00}
:root[data-theme="light"] .cm-s-werk span.cm-def,:root[data-theme="light"] .cm-s-werk span.cm-variable-2,:root[data-theme="light"] .cm-s-werk span.cm-link{color:#1f5fae}
:root[data-theme="light"] .cm-s-werk span.cm-property,:root[data-theme="light"] .cm-s-werk span.cm-attribute{color:#0d7f75}
:root[data-theme="light"] .cm-s-werk span.cm-builtin,:root[data-theme="light"] .cm-s-werk span.cm-qualifier,:root[data-theme="light"] .cm-s-werk span.cm-meta{color:#6549c2}

/* ── Session-Panel ───────────────────────────────────────────────────────── */
.vs-tabs{display:flex;align-items:center;gap:2px;flex-shrink:0;min-height:44px;padding:0 6px;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;background:var(--surface);scrollbar-width:none}
.vs-tabs::-webkit-scrollbar{display:none}
.vs-tab{display:flex;align-items:center;gap:7px;flex-shrink:0;max-width:210px;min-height:32px;padding:0 4px 0 11px;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-3);cursor:pointer}
.vs-tab:hover{background:var(--raised);color:var(--ink-2)}
.vs-tab.on{background:var(--raised-2);color:var(--ink)}
.vs-tab.has-att .vs-tab-title{font-weight:600;color:var(--ink)}
.vs-tab-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-tab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--ink-4)}
.vs-tab-dot.running{background:var(--agent);animation:pulse 1.4s ease-in-out infinite}
.vs-tab-dot.idle{background:var(--ok)}
.vs-tab-dot.closed{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-4)}
.vs-tab-x{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;font-size:16px;line-height:1;color:var(--ink-3)}
.vs-tab-x:hover{background:var(--danger-wash);color:var(--danger)}
.vs-tab-new{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;font-size:20px;color:var(--ink-3)}
.vs-tab-new:hover{background:var(--raised);color:var(--ink)}
.vs-session-body{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
#app.mode-vscode #vs-session-body #sv{flex:1;min-height:0}
/* Kopf im schmalen Panel: wie am Handy EIN Knopf statt Dropdown-Reihe */
#app.mode-vscode .sh-ctl,#app.mode-vscode #end-btn,#app.mode-vscode #sh-menu-btn{display:none!important}
#app.mode-vscode #sh{min-height:48px;padding-left:14px}
#app.mode-vscode #sh-title{font-size:14px}
#app.mode-vscode #sess-chip{height:32px;font-size:13px;max-width:55%}

/* Neue Session im Panel */
.vs-compose{flex:1;overflow:auto;padding:28px 18px}
.vs-compose-inner{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.vs-compose-inner h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.vs-c-label{font-size:13.5px;font-weight:550;color:var(--ink-2)}
.vs-input{font-family:var(--font-mono);font-size:13.5px}
.vs-textarea{min-height:130px;font-size:15px}
.vs-c-selects{display:flex;gap:8px}
.vs-c-field{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.vs-c-field-model{flex:1.6}
.vs-c-file-ctx{font-size:14px;color:var(--ink-2)}
.vs-c-file-ctx label{display:flex;align-items:center;gap:9px;cursor:pointer}
.vs-c-file-ctx code{font-size:12.5px;color:var(--signal-ink)}
.vs-launch{min-height:48px;margin-top:6px;border-radius:var(--r-md);background:var(--signal);color:var(--on-signal);font-size:15px;font-weight:600}
.vs-launch:hover{filter:brightness(1.06)}
.vs-launch:disabled{opacity:.5}

/* Kontextmenüs */
.vs-newmenu{
  position:fixed;z-index:520;min-width:230px;max-width:min(320px,calc(100vw - 16px));max-height:70vh;overflow:auto;
  padding:6px;border-radius:var(--r-lg);background:var(--raised);border:1px solid var(--line-2);box-shadow:var(--shadow-float);
  animation:rise-in .14s var(--ease-out);
}
.vs-newmenu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 11px;border-radius:var(--r-sm);font-size:14px;color:var(--ink);text-align:left}
.vs-newmenu-item:hover{background:var(--raised-2)}
.vs-newmenu-item svg{color:var(--ink-3)}
.vs-newmenu-item.primary{color:var(--signal-ink);font-weight:600}
.vs-newmenu-item.danger{color:var(--danger)}
.vs-newmenu-item.danger:hover{background:var(--danger-wash)}
.vs-newmenu-item .hint{margin-left:auto;font-size:12px;color:var(--ink-3)}
.vs-nm-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-newmenu-sep{padding:8px 11px 4px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.vs-ctx-title{font-family:var(--font-mono);font-weight:500;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-newmenu-div{height:1px;background:var(--line);margin:5px 4px}
@media (pointer:coarse){.vs-newmenu-item{min-height:48px;font-size:15px}}

/* Umschalter Editor | Session (Tablet/Handy) */
.vs-switch{align-items:center;gap:4px;min-height:var(--bar-h);padding:0 8px;border-bottom:1px solid var(--line);background:var(--ground)}
#vs-menu-btn{display:none}
.vs-sw-group{flex:1;min-width:0;display:flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--sunken);border:1px solid var(--line)}
.vs-sw-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 10px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.vs-sw-btn:disabled{opacity:.45;cursor:default}
.vs-sw-btn[aria-selected="true"]{background:var(--raised);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 0 0 1px var(--line-2)}
.vs-sw-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vs-sw-file{font-family:var(--font-mono);font-size:13px}
.vs-sw-dirty{display:none;width:7px;height:7px;border-radius:50%;background:var(--signal);flex-shrink:0}
#vscode-view.vs-dirty .vs-sw-dirty{display:block}
.vs-sw-dot{display:none;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.vs-sw-dot.running{display:block;background:var(--agent)}
.vs-sw-dot.att{display:block;background:var(--signal);animation:attention-pulse 1.6s ease-in-out infinite}

@media (max-width:1099px){
  #app.mode-vscode #vscode-view{grid-template-columns:var(--c-files) var(--c-s1) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  #vs-files,#vs-split-1{grid-row:1/3}
  #vs-switch{grid-column:3;grid-row:1}
  #vscode-view.vs-has-file #vs-switch{display:flex}
  #vs-editor,#vs-sessions{grid-column:3;grid-row:2;border-left:0}
  #vs-split-2{display:none!important}
  #vscode-view.vs-pane-session #vs-editor{display:none}
  #vscode-view.vs-has-file.vs-pane-editor #vs-sessions{display:none}
}
@media (max-width:767px){
  #app.mode-vscode #vscode-view{grid-template-columns:minmax(0,1fr)}
  #vs-switch,#vs-editor,#vs-sessions{grid-column:1}
  #vscode-view #vs-switch{display:flex}
  #vs-menu-btn{display:grid}
  #vs-split-1{display:none!important}
  #vscode-view #vs-files,#vscode-view.vs-files-collapsed #vs-files{
    display:flex;position:fixed;left:0;top:0;bottom:0;z-index:200;width:var(--drawer-w);
    padding-top:calc(64px + env(safe-area-inset-top,0px));padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
    transform:translateX(-102%);visibility:hidden;transition:transform .28s var(--ease),visibility 0s .28s;
  }
  #app.vs-files-open #vscode-view #vs-files{transform:none;visibility:visible;transition:transform .28s var(--ease),visibility 0s;box-shadow:24px 0 60px -20px rgba(0,0,0,.5)}
  #vs-files-close{display:none}
  .vs-btn-label{display:none}
  .vs-editor-hdr{padding-left:12px}
  .vs-editor-path{display:none}
  .vs-compose{padding:20px 14px}
  /* Handy: Konto eigene Zeile, darunter Modell (breiter) + Effort/Stufe */
  .vs-c-selects{flex-wrap:wrap;row-gap:10px}
  .vs-c-field{flex:1 1 0}
  .vs-c-field-acc{flex-basis:100%}
  .vs-c-field-model{flex-grow:1.8}
  .vs-editor-host .CodeMirror{font-size:14px}
}