/* ============================================================
   JUWEL OS - Code (IDE) - VS-Code-style chrome (forced dark)
   Obsidian, not violet: editor chrome is the same pane material
   as the rest of the OS (--surface/--surface-2/--line at their
   dark-token values, hardcoded since this shell stays dark
   regardless of site theme). Amber marks only the two
   "hand it to JUWEL" moments - Build and the chat Send.
   LUXLIQ pass (docs/brand/LUXLIQ_BRAND_SYSTEM.md v0.2): the file
   tree, gutter, and code textarea are a DENSE WORK surface and
   stay still and mono - no ambient blobs here. Liquid life is
   reserved for the two nectar moments (Build pours molten, Send
   is the bead's departure point) and the chat panel, which pours
   in like the rest of the OS chat.
   ============================================================ */
/* Dock .ic-ide lives in juwel-os-shell.css (single source). */

.vsc{height:100%;display:grid;grid-template-columns:48px 204px 1fr 1fr;grid-template-rows:1fr 24px;
  grid-template-areas:"act side editor preview" "status status status status";
  background:#121110;color:#F2F0EB;font-family:var(--ff-ui);overflow:hidden;}
.vsc.no-side{grid-template-columns:48px 1fr 1fr;grid-template-areas:"act editor preview" "status status status";}
.vsc.no-pv{grid-template-columns:48px 204px 1fr;grid-template-areas:"act side editor" "status status status";}
.vsc.no-side.no-pv{grid-template-columns:48px 1fr;grid-template-areas:"act editor" "status status";}
.vsc.no-side .vsc-side{display:none;} .vsc.no-pv .vsc-preview{display:none;}

/* activity bar */
.vsc-activity{grid-area:act;background:#0F0E0C;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-right:1px solid rgba(242,240,235,.10);}
.vsc-act{width:40px;height:40px;border:0;background:transparent;color:rgba(242,240,235,.42);border-radius:9px;display:grid;place-items:center;cursor:pointer;position:relative;transition:color .14s,background .14s;}
.vsc-act.on{color:#F2F0EB;}
.vsc-act.on::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:2px;border-radius:2px;background:#F2F0EB;}
.vsc-act svg{width:21px;height:21px;}
.vsc-act-sp{flex:1;}
.vsc-act-gem{padding:0;}
.vsc-gem{line-height:0;display:inline-flex;filter:none;}

/* explorer */
.vsc-side{grid-area:side;background:#1B1A18;display:flex;flex-direction:column;min-height:0;border-right:1px solid rgba(242,240,235,.10);}
.vsc-side-h{font-family:var(--ff-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,240,235,.42);padding:12px 14px 6px;}
.vsc-proj{display:flex;align-items:center;gap:6px;padding:4px 8px 6px 14px;}
.vsc-proj span[data-pname]{flex:1;font-family:var(--ff-mono);font-size:11.5px;font-weight:600;color:#F2F0EB;text-transform:uppercase;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vsc-add{width:24px;height:24px;border:0;background:transparent;color:rgba(242,240,235,.42);border-radius:6px;display:grid;place-items:center;cursor:pointer;transition:background .14s,color .14s;}
.vsc-add svg{width:15px;height:15px;}
.vsc-files{flex:1;min-height:0;overflow:auto;padding:2px 6px;}
.vsc-file{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;color:rgba(242,240,235,.66);
  font-family:var(--ff-mono);font-size:12px;padding:5px 8px;border-radius:5px;cursor:pointer;transition:background .14s,color .14s;}
.vsc-file.on{background:#2C2B27;color:#F2F0EB;}
.vf-ic,.vt-ic{width:8px;height:8px;border-radius:2px;flex-shrink:0;background:rgba(242,240,235,.42);}
.ide-html{background:#FF6A00!important;} .ide-css{background:#28C2FF!important;} .ide-js{background:#FFB42A!important;} .ide-json{background:#6FC72B!important;} .ide-svg{background:#FF5D7E!important;} .ide-md{background:#FFB42A!important;} .ide-py{background:#7ACB88!important;}
.vf-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.vf-x,.vt-x{opacity:0;color:rgba(242,240,235,.42);display:grid;place-items:center;border-radius:4px;transition:color .14s,opacity .14s,background .14s;}
.vf-x svg,.vt-x svg{width:12px;height:12px;}
.vsc-build,.vsc-zip{margin:6px 8px 0;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--ff-ui);font-size:12px;
  border:1px solid rgba(242,240,235,.10);border-radius:8px;padding:8px;cursor:pointer;background:#242320;color:#F2F0EB;
  transition:background-color .14s,box-shadow .18s var(--ease-viscous,var(--ease-out)),transform .12s var(--ease-out);}
/* Build = she acts — flat topaz, no wet nectar gradient. */
.vsc-build{background:#FFB42A;color:#201200;border-color:transparent;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);}
.vsc-build:active{transform:scale(.97);}
.vsc-build svg,.vsc-zip svg{width:14px;height:14px;} .vsc-zip{margin-bottom:10px;}

/* editor */
.vsc-editorwrap{grid-area:editor;display:flex;flex-direction:column;min-width:0;min-height:0;background:#121110;position:relative;}

/* JUWEL chat panel (Copilot-style).
   LUXLIQ bloom (§9.5) - the panel settles in with the same soft-bloom
   diffusion as the rest of the OS chat, not a dry slide. */
.vsc-chat{position:absolute;left:0;right:0;bottom:0;height:300px;max-height:72%;display:flex;flex-direction:column;
  background:#1B1A18;border-top:1px solid rgba(242,240,235,.10);box-shadow:0 -14px 34px -12px rgba(0,0,0,.55);z-index:6;
  animation:vcup var(--visc-settle,.42s) var(--ease-viscous,var(--ease-out));}
@keyframes vcup{from{transform:translateY(14px);opacity:0;filter:blur(4px);}to{transform:none;opacity:1;filter:none;}}
.vc-h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid rgba(242,240,235,.10);background:#0F0E0C;}
.vc-gem{line-height:0;display:inline-flex;}
.vc-t{font-family:var(--ff-display);font-weight:700;font-size:13px;color:#F2F0EB;}
.vc-s{font-family:var(--ff-mono);font-size:10px;color:rgba(242,240,235,.42);}
.vc-x{margin-left:auto;width:26px;height:26px;border:0;background:transparent;color:rgba(242,240,235,.42);border-radius:6px;display:grid;place-items:center;cursor:pointer;transition:background .14s,color .14s;}
.vc-x svg{width:15px;height:15px;}
.vc-msgs{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;}
.vc-msg{display:flex;gap:8px;max-width:92%;}
.vc-msg.you{align-self:flex-end;}
.vc-msg.you .vc-b{background:#2C2B27;color:#F2F0EB;}
.vc-av{line-height:0;flex-shrink:0;margin-top:2px;}
.vc-b{background:#242320;color:#F2F0EB;border-radius:12px;padding:9px 12px;font-size:13px;line-height:1.5;}
.vc-msg.thinking .vc-b{color:rgba(242,240,235,.55);}
.vc-miniapp{display:flex;align-items:center;gap:7px;padding:8px 12px 0;font-family:var(--ff-ui);font-size:11.5px;color:rgba(242,240,235,.55);cursor:pointer;user-select:none;}
.vc-miniapp input{accent-color:#F2F0EB;width:13px;height:13px;cursor:pointer;}
.vc-compose{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid rgba(242,240,235,.10);background:#0F0E0C;}
/* LUXLIQ meniscus (§9.2) - focus is wet surface tension, not a dry
   single-color border. */
.vc-in{flex:1;resize:none;border:1px solid rgba(242,240,235,.10);border-radius:10px;background:#121110;color:#F2F0EB;
  font-family:var(--ff-ui);font-size:13px;line-height:1.5;padding:9px 12px;outline:none;
  transition:border-color var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out)),box-shadow var(--visc-bead,.36s) var(--ease-viscous,var(--ease-out));}
.vc-in:focus{border-color:var(--focus-ring,var(--ink));box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent);}
/* Send = she acts — flat topaz only. */
.vc-send{width:38px;height:38px;flex-shrink:0;border:0;border-radius:10px;
  background:#FFB42A;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  color:#201200;display:grid;place-items:center;cursor:pointer;transition:transform .12s var(--ease-out),filter .15s var(--ease-out);}
.vc-send:active{transform:scale(.94);}
.vc-send svg{width:17px;height:17px;}
.vsc-tabs{display:flex;background:#0F0E0C;border-bottom:1px solid rgba(242,240,235,.10);overflow-x:auto;flex-shrink:0;}
/* .vsc-tab is a LuxLiq .lx-tab (class added in juwel-os-ide.js). The active
   indicator is the shared nectar meniscus that pours in on .on (luxliq.css),
   replacing the old flat white top-inset bar. The IDE is a forced-dark shell,
   so the tab keeps its dark foam-ink hex rather than theme-flipping tokens. */
.vsc-tab{display:flex;align-items:center;gap:7px;background:#1B1A18;border:0;border-right:1px solid rgba(242,240,235,.10);color:rgba(242,240,235,.66);
  font-family:var(--ff-mono);font-size:12px;padding:8px 12px;cursor:pointer;white-space:nowrap;transition:color .14s,background .14s;}
.vsc-tab.on{background:#121110;color:#F2F0EB;}
.vt-x{opacity:.4;transition:opacity .14s,color .14s;}
.vsc-editor{flex:1;min-height:0;display:flex;overflow:hidden;}
.vsc-gutter{width:48px;flex-shrink:0;padding:12px 8px 12px 0;margin:0;text-align:right;color:rgba(242,240,235,.30);background:#121110;
  font-family:var(--ff-mono);font-size:12.5px;line-height:1.6;white-space:pre;overflow:hidden;user-select:none;}
.vsc-ta{flex:1;min-width:0;box-sizing:border-box;border:0;outline:none;resize:none;background:#121110;color:#F2F0EB;
  font-family:var(--ff-mono);font-size:12.5px;line-height:1.6;padding:12px 14px;white-space:pre;tab-size:2;}
.vsc-ta::selection{background:rgba(255,180,42,.28);}

/* preview */
.vsc-preview{grid-area:preview;display:flex;flex-direction:column;min-width:0;border-left:1px solid rgba(242,240,235,.10);background:#fff;}
.vsc-pv-h{display:flex;align-items:center;gap:8px;background:#0F0E0C;color:rgba(242,240,235,.55);font-family:var(--ff-mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-bottom:1px solid rgba(242,240,235,.10);flex-shrink:0;}
.vsc-pv-dot{width:7px;height:7px;border-radius:50%;background:#6FC72B;}
.vsc-pv-run{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:#242320;border:1px solid rgba(242,240,235,.10);color:#F2F0EB;
  font-family:var(--ff-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:6px;cursor:pointer;transition:background .14s;}
.vsc-pv-run svg{width:12px;height:12px;}
.vsc-pv-stop{display:inline-flex;align-items:center;gap:5px;background:#3A1F22;border:1px solid rgba(224,99,119,.4);color:#E06377;
  font-family:var(--ff-mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:6px;cursor:pointer;transition:background .14s;}
.vsc-pv-stop svg{width:12px;height:12px;}
.vsc-pv-stop:hover{background:#4A2529;}
.vsc-frame{flex:1;min-height:0;width:100%;border:0;background:#fff;}

/* Python output panel - a real terminal-style stdout/stderr pane, not a
   fake success card. Hidden by default; shown for a .py active file via
   .vsc.py-file (see below). The Pyodide execution iframe itself
   (.vsc-pysandbox) is never visible - it only exists to postMessage. */
.vsc-pyout{display:none;flex:1;min-height:0;overflow:auto;background:#0C0B0A;padding:12px 14px;}
.vsc.py-file .vsc-frame{display:none;}
.vsc.py-file .vsc-pyout{display:block;}
.vsc-pyout-body{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--ff-mono);font-size:12.5px;line-height:1.6;color:#F2F0EB;}
.py-status{color:rgba(242,240,235,.55);}
.py-stdout{color:#F2F0EB;}
.py-stderr{color:#FFC65C;}
.py-exit{margin-top:8px;font-weight:600;}
.py-exit.py-ok{color:#7ACB88;}
.py-exit.py-err{color:#E06377;}
.py-empty{color:rgba(242,240,235,.42);}
.vsc-pysandbox{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px;}

/* status bar - neutral chrome text; amber stays reserved for Build + Send */
.vsc-status{grid-area:status;display:flex;align-items:center;gap:8px;background:#0F0E0C;border-top:1px solid rgba(242,240,235,.10);
  padding:0 12px;font-family:var(--ff-mono);font-size:11px;color:rgba(242,240,235,.55);}
.vsc-st-l{display:inline-flex;align-items:center;gap:6px;color:rgba(242,240,235,.66);}
.vsc-st-l svg{width:13px;height:13px;}
.vsc-st-sp{flex:1;}

/* JUWEL building shimmer - the glint: event-driven only, fires while .building is set */
.vsc.building .vsc-editorwrap{position:relative;}
.vsc.building .vsc-editorwrap::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:5;
  background:linear-gradient(90deg,transparent,#FFB42A,transparent);background-size:40% 100%;animation:vscbuild 1.1s linear infinite;}
@keyframes vscbuild{0%{background-position:-40% 0;}100%{background-position:140% 0;}}

@media (max-width:780px){
  .vsc,.vsc.no-pv{grid-template-columns:44px 1fr;grid-template-areas:"act editor" "status status";}
  .vsc-side,.vsc-preview{display:none;}
  .vsc.show-pv{grid-template-columns:44px 1fr;grid-template-areas:"act preview" "status status";}
  .vsc.show-pv .vsc-preview{display:flex;} .vsc.show-pv .vsc-editorwrap{display:none;}
}

@media (hover:hover) and (pointer:fine){
  .vsc-act:hover{color:#F2F0EB;}
  .vsc-add:hover{background:#242320;color:#F2F0EB;}
  .vsc-file:hover{background:#242320;color:#F2F0EB;}
  .vsc-file:hover .vf-x{opacity:.6;}
  .vf-x:hover{opacity:1;color:#E06377;background:#33181D;}
  .vsc-build:hover{filter:brightness(1.05);}
  .vsc-zip:hover{background:#2C2B27;}
  .vc-x:hover{background:#242320;color:#F2F0EB;}
  .vc-send:hover{filter:brightness(1.05);}
  .vsc-tab:hover{color:#F2F0EB;}
  .vsc-tab:hover .vt-x{opacity:.8;}
  .vt-x:hover{opacity:1;color:#E06377;}
  .vsc-pv-run:hover{background:#2C2B27;color:#F2F0EB;}
}
@media (prefers-reduced-motion:reduce){
  .vsc-chat{animation:none;}
  .vsc.building .vsc-editorwrap::after{animation:none;opacity:.7;}
}

/* ── OSS embed: Monaco Editor (OSS_EMBEDS_BASE 2026-07-14) ──
   Mounted by juwel-oss-embeds.js into .vsc-editor; the textarea +
   gutter below stay in the DOM as the automatic CDN-failure fallback. */
.oss-monaco{flex:1;min-width:0;min-height:0;}
.vsc.monaco-on .vsc-ta,.vsc.monaco-on .vsc-gutter{display:none;}