/* ============================================================
   JUWEL OS workbench — OPT-IN ONLY
   CODE FREEZE: never load this unconditionally in os.html.
   Owner 2026-07-10: the OS is the floating-window surface, not a
   fullscreen chat hijack. If ever re-enabled, require BOTH:
     1) explicit <link> in a non-default entry, AND
     2) body[data-workbench="on"]
   All selectors below are gated on data-workbench="on".
   ============================================================ */

:root{
  --wb-top:56px;
  --wb-rail:224px;
  --wb-chat:46%;
  --wb-divider:1px;
}

body[data-stage="desktop"][data-workbench="on"]{
  min-height:100dvh;
  overflow:hidden;
  background:var(--paper);
}

body[data-stage="desktop"][data-workbench="on"] #room{
  background:var(--paper)!important;
}

body[data-stage="desktop"][data-workbench="on"] #room::after,
body[data-stage="desktop"][data-workbench="on"] #room .grid,
body[data-stage="desktop"][data-workbench="on"] #room .blob{
  display:none!important;
}

body[data-stage="desktop"][data-workbench="on"] #frontdoor,
body[data-stage="desktop"][data-workbench="on"] #boot,
body[data-stage="desktop"][data-workbench="on"] #chatbar,
body[data-stage="desktop"][data-workbench="on"] #chatbar-disclaimer,
body[data-stage="desktop"][data-workbench="on"] #companion,
body[data-stage="desktop"][data-workbench="on"] #juwel-cursor{
  display:none!important;
}

/* Top product bar */
body[data-stage="desktop"][data-workbench="on"] #menubar{
  height:var(--wb-top);
  padding:0 16px;
  gap:6px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

body[data-stage="desktop"][data-workbench="on"] .mb-logo{
  width:34px;
  height:34px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
}

body[data-stage="desktop"][data-workbench="on"] .mb-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

body[data-stage="desktop"][data-workbench="on"] #mb-juwel{
  margin-right:8px;
  padding:0 8px 0 2px;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.025em;
}

body[data-stage="desktop"][data-workbench="on"] #mb-active,
body[data-stage="desktop"][data-workbench="on"] #mb-clock{
  display:none;
}

body[data-stage="desktop"][data-workbench="on"] #mb-space,
body[data-stage="desktop"][data-workbench="on"] .mb-pill,
body[data-stage="desktop"][data-workbench="on"] .mb-kbtn,
body[data-stage="desktop"][data-workbench="on"] .mb-status,
body[data-stage="desktop"][data-workbench="on"] .mb-icon{
  min-height:34px;
  border-radius:var(--r-md);
  border-color:var(--line);
  box-shadow:none;
}

body[data-stage="desktop"][data-workbench="on"] .mb-pill{
  background:var(--surface-2);
  color:var(--ink-2);
}

body[data-stage="desktop"][data-workbench="on"] .mb-kbtn{
  background:var(--surface);
}

body[data-stage="desktop"][data-workbench="on"] .mb-right{
  gap:6px;
}

/* Persistent navigation rail */
body[data-stage="desktop"][data-workbench="on"] #dock{
  position:fixed;
  inset:var(--wb-top) auto 0 0;
  width:var(--wb-rail);
  max-height:none;
  transform:none;
  z-index:80;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:3px;
  padding:16px 12px;
  overflow-x:hidden;
  overflow-y:auto;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:var(--surface-2);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body[data-stage="desktop"][data-workbench="on"] #dock::-webkit-scrollbar{
  width:6px;
}

body[data-stage="desktop"][data-workbench="on"] #dock::-webkit-scrollbar-thumb{
  border-radius:var(--r-full);
  background:var(--ink-4);
}

body[data-stage="desktop"][data-workbench="on"] .dock-gem{
  width:100%;
  height:42px;
  margin:0 0 10px;
  padding:5px 9px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  border:0;
  border-radius:var(--r-md);
  background:transparent;
  filter:none;
}

body[data-stage="desktop"][data-workbench="on"] .dock-gem img{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px;
  filter:none!important;
}

body[data-stage="desktop"][data-workbench="on"] .dock-gem::after{
  content:"JUWEL";
  color:var(--ink-1);
  font-family:var(--ff);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.02em;
}

body[data-stage="desktop"][data-workbench="on"] #dock .dock-app,
body[data-stage="desktop"][data-workbench="on"] #dock .dock-collapse{
  width:100%;
  min-height:40px;
  height:auto;
  margin:0;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--ink-2);
  box-shadow:none;
  transform:none;
}

body[data-stage="desktop"][data-workbench="on"] #dock .dock-app svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:currentColor;
}

body[data-stage="desktop"][data-workbench="on"] #dock .dock-app .tip{
  position:static;
  inset:auto;
  transform:none;
  opacity:1;
  pointer-events:none;
  display:block;
  min-width:0;
  padding:0;
  color:inherit;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-family:var(--ff);
  font-size:13px;
  font-weight:550;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body[data-stage="desktop"][data-workbench="on"] #dock .dock-app .tip .ts{
  display:none;
}

body[data-stage="desktop"][data-workbench="on"] #dock .dock-app .run{
  left:auto;
  right:8px;
  top:50%;
  bottom:auto;
  width:5px;
  height:5px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--ink-4);
}

body[data-stage="desktop"][data-workbench="on"] #dock .dock-app.running .run{
  opacity:1;
  transform:translateY(-50%);
}

body[data-stage="desktop"][data-workbench="on"] #dock .dock-app.focused-app{
  color:var(--ink-1);
  background:var(--surface);
  border-color:var(--line);
  box-shadow:inset 3px 0 0 var(--topaz);
}

body[data-stage="desktop"][data-workbench="on"] #dock .dock-app.focused-app .run{
  background:var(--topaz);
}

@media (hover:hover) and (pointer:fine){
  body[data-stage="desktop"][data-workbench="on"] #dock .dock-app:hover,
  body[data-stage="desktop"][data-workbench="on"] #dock .dock-collapse:hover,
  body[data-stage="desktop"][data-workbench="on"] .dock-gem:hover{
    color:var(--ink-1);
    background:color-mix(in srgb,var(--surface) 72%,transparent);
    border-color:var(--line-2);
    transform:none;
  }
}

body[data-stage="desktop"][data-workbench="on"] .dock-div{
  width:100%;
  height:1px;
  margin:7px 0;
  background:var(--line);
}

body[data-stage="desktop"][data-workbench="on"] .dock-collapse{
  margin-top:auto!important;
  color:var(--ink-3)!important;
}

body[data-stage="desktop"][data-workbench="on"] .dock-collapse::after{
  content:"All tools";
  font-family:var(--ff);
  font-size:12.5px;
  font-weight:550;
}

/* Docked conversation and task surface */
body[data-stage="desktop"][data-workbench="on"] #stage{
  position:fixed;
  inset:var(--wb-top) 0 0 var(--wb-rail);
  z-index:40;
  overflow:hidden;
  display:block;
  background:var(--surface);
}

body[data-stage="desktop"][data-workbench="on"] .fwin{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0;
  min-height:0;
  border:0;
  border-radius:0;
  box-shadow:none!important;
  background:var(--surface);
  transform:none!important;
  transition:width .22s var(--ease-out),left .22s var(--ease-out),opacity .16s ease;
}

body[data-stage="desktop"][data-workbench="on"] .fwin::after,
body[data-stage="desktop"][data-workbench="on"] .fwin-grip{
  display:none!important;
}

body[data-stage="desktop"][data-workbench="on"] .fwin:not([data-app="chat"]){
  display:none;
}

body[data-stage="desktop"][data-workbench="on"] .fwin[data-app="chat"]{
  display:flex;
  z-index:1!important;
}

body[data-stage="desktop"][data-workbench="split"] .fwin[data-app="chat"]{
  width:var(--wb-chat)!important;
  border-right:var(--wb-divider) solid var(--line);
}

body[data-stage="desktop"][data-workbench="on"] .fwin.workbench-active:not([data-app="chat"]){
  display:flex;
  left:var(--wb-chat)!important;
  width:calc(100% - var(--wb-chat))!important;
  z-index:2!important;
}

body[data-stage="desktop"][data-workbench="on"] .fwin-bar{
  height:52px;
  padding:0 14px;
  cursor:default;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}

body[data-stage="desktop"][data-workbench="on"] .fwin[data-app="chat"] > .fwin-bar{
  display:none;
}

body[data-stage="desktop"][data-workbench="on"] .fwin-bar:active{
  cursor:default;
}

body[data-stage="desktop"][data-workbench="on"] .fwin-sub{
  display:none;
}

body[data-stage="desktop"][data-workbench="on"] .fwin-ctl .min,
body[data-stage="desktop"][data-workbench="on"] .fwin-ctl .max{
  display:none;
}

body[data-stage="desktop"][data-workbench="on"] .fwc.close{
  width:32px;
  height:32px;
  border-radius:var(--r-md);
}

/* Chat owns the product */
body[data-stage="desktop"][data-workbench="on"] .chatapp{
  min-width:0;
  background:var(--surface);
}

body[data-stage="desktop"][data-workbench="on"] .chat-history{
  width:218px;
  border-right:1px solid var(--line);
  background:var(--surface-2);
}

body[data-stage="desktop"][data-workbench="on"] .chat-main{
  background:var(--surface);
}

body[data-stage="desktop"][data-workbench="on"] .chat-scroll{
  padding:32px clamp(24px,4vw,64px) 20px;
}

/* LUXLIQ meniscus (§9.2) - the composer well is the workbench's one
   wet-focus surface. */
body[data-stage="desktop"][data-workbench="on"] .chat-compose{
  margin:12px clamp(18px,3vw,40px) 20px;
  padding:8px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 8px 28px -22px rgba(20,18,12,.45);
  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));
}

body[data-stage="desktop"][data-workbench="on"] .chat-compose:focus-within{
  border-color:var(--focus-ring,var(--ink));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring,var(--ink)) 14%,transparent),0 8px 28px -22px rgba(20,18,12,.45);
}

body[data-stage="desktop"][data-workbench="on"] .chat-send,
body[data-stage="desktop"][data-workbench="on"] .chat-attach,
body[data-stage="desktop"][data-workbench="on"] .chat-model{
  border-radius:var(--r-md);
}

/* LUXLIQ molten wax (§8.1) - Send is the bead's departure point; molten
   gradient instead of a flat topaz fill, gel-compress on press. */
body[data-stage="desktop"][data-workbench="on"] .chat-send{
  background:linear-gradient(160deg,var(--topaz-2,var(--topaz)),var(--topaz) 62%);
  color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s var(--ease-out),filter .15s var(--ease-out);
}
body[data-stage="desktop"][data-workbench="on"] .chat-send:active{
  transform:scale(.94);
}

body[data-stage="desktop"][data-workbench="on"] .chat-empty{
  width:min(620px,100%);
  margin:auto;
  padding:48px 0 24px;
}

body[data-stage="desktop"][data-workbench="on"] .ce-gem{
  width:42px;
  height:42px;
}

body[data-stage="desktop"][data-workbench="on"] .ce-starters{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Keep utility overlays above the workbench */
body[data-stage="desktop"][data-workbench="on"] #cmd,
body[data-stage="desktop"][data-workbench="on"] #control-center,
body[data-stage="desktop"][data-workbench="on"] #toast,
body[data-stage="desktop"][data-workbench="on"] .spaces-ov,
body[data-stage="desktop"][data-workbench="on"] .plan-ov{
  z-index:320;
}

/* Tablet keeps chat primary and opens tools as a full replacement. */
@media (min-width:641px) and (max-width:1024px){
  :root{--wb-rail:76px;--wb-chat:48%;}

  body[data-stage="desktop"][data-workbench="on"] #dock{
    width:var(--wb-rail);
    align-items:center;
    padding:12px 9px;
  }

  body[data-stage="desktop"][data-workbench="on"] .dock-gem,
  body[data-stage="desktop"][data-workbench="on"] #dock .dock-app,
  body[data-stage="desktop"][data-workbench="on"] #dock .dock-collapse{
    width:46px;
    justify-content:center;
    padding:9px;
  }

  body[data-stage="desktop"][data-workbench="on"] .dock-gem::after,
  body[data-stage="desktop"][data-workbench="on"] #dock .dock-app .tip,
  body[data-stage="desktop"][data-workbench="on"] .dock-collapse::after{
    display:none;
  }

  body[data-stage="desktop"][data-workbench="on"] .chat-history{
    position:absolute;
    inset:0 auto 0 0;
    z-index:12;
    transform:translateX(-100%);
    width:260px;
    box-shadow:var(--shadow-2);
  }

  body[data-stage="desktop"][data-workbench="on"] .chat-history.open{
    transform:none;
  }

  body[data-stage="desktop"][data-workbench="on"] .chat-hist-toggle{
    display:grid;
  }
}

/* Phone uses the existing single-panel navigation with tighter chrome. */
@media (max-width:640px){
  body[data-stage="desktop"][data-workbench="on"] #frontdoor,
  body[data-stage="desktop"][data-workbench="on"] #boot,
  body[data-stage="desktop"][data-workbench="on"] #chatbar,
  body[data-stage="desktop"][data-workbench="on"] #chatbar-disclaimer,
  body[data-stage="desktop"][data-workbench="on"] #companion,
  body[data-stage="desktop"][data-workbench="on"] #juwel-cursor{
    display:none!important;
  }

  body[data-stage="desktop"][data-workbench="on"] #menubar{
    height:52px;
    padding:0 10px;
    background:var(--surface);
  }

  body[data-stage="desktop"][data-workbench="on"] #mb-juwel{
    display:block;
    font-size:13px;
  }

  body[data-stage="desktop"][data-workbench="on"] #mb-space,
  body[data-stage="desktop"][data-workbench="on"] .mb-pill,
  body[data-stage="desktop"][data-workbench="on"] .mb-kbtn,
  body[data-stage="desktop"][data-workbench="on"] #mb-clock,
  body[data-stage="desktop"][data-workbench="on"] #mb-active{
    display:none;
  }

  body[data-stage="desktop"][data-workbench="on"] #stage{
    inset:52px 0 calc(60px + env(safe-area-inset-bottom)) 0;
  }

  body[data-stage="desktop"][data-workbench="on"] .chat-scroll{
    padding:22px 16px 12px;
  }

  body[data-stage="desktop"][data-workbench="on"] .chat-compose{
    margin:8px 10px 10px;
    border-radius:var(--r-lg);
  }

  body[data-stage="desktop"][data-workbench="on"] .ce-starters{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-stage="desktop"][data-workbench="on"] .fwin{
    transition:none;
  }
  body[data-stage="desktop"][data-workbench="on"] .chat-send{
    transition:none;
  }
}