/* ============================================================
   JUWEL OS · Code (IDE) — VS-Code-style chrome (forced dark)
   FACET 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.
   ============================================================ */
.ic-ide{background:color-mix(in srgb,#7B6BA8 14%,var(--surface));color:#4A3D72;border:1px solid color-mix(in srgb,#7B6BA8 18%,var(--line));}
html[data-theme="dark"] .ic-ide{background:color-mix(in srgb,#7B6BA8 22%,var(--surface));color:#C4B5E8;}
#dock [data-dock="ide"] svg{color:var(--c-grape);}
#dock [data-dock="ide"].focused-app{background:var(--c-grape);}
#dock [data-dock="ide"].focused-app svg{color:#fff;}

.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:drop-shadow(0 2px 6px rgba(255,180,42,.3));}

/* 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:10px;letter-spacing:.16em;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;}
.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 .14s;}
.vsc-build{background:#FFB42A;color:#201200;border-color:transparent;font-weight:600;}
.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) */
.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 .2s var(--ease-out);}
@keyframes vcup{from{transform:translateY(14px);opacity:0;}to{transform:none;opacity:1;}}
.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-compose{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid rgba(242,240,235,.10);background:#0F0E0C;}
.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 .15s;}
.vc-in:focus{border-color:#FFB42A;}
.vc-send{width:38px;height:38px;flex-shrink:0;border:0;border-radius:10px;background:#FFB42A;
  color:#201200;display:grid;place-items:center;cursor:pointer;}
.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{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;}
.vsc-tab.on{background:#121110;color:#F2F0EB;box-shadow:inset 0 2px 0 #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-frame{flex:1;min-height:0;width:100%;border:0;background:#fff;}

/* 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;}
}