/* JUWEL Global IA v2 — token-only, additive, late-loaded. */
html[data-juwel-global-ia="v2"]{overflow-x:hidden;}
html[data-juwel-global-ia="v2"] body{overflow-x:hidden;}

/* P1-05 / P1-06 — rail scale + rail axis, re-pointed at the visible rail.
   Settings > Personalize writes body[data-docksize] and body[data-dockpos]
   (juwel-os-desktop.js:2561). Both controls were dead under this IA:
     docksize: juwel-os-apps.css:1531 sizes .dock-app / .dock-gem, and line 8
       below hides exactly those nodes, so sm/md/lg all measured 46px wide.
     dockpos:  juwel-os-apps.css:1536 turns #dock horizontal, but the rule at
       line 13 below is more specific and pinned left/top/width back, and
       #jia-global-nav had no row axis at all, so left/bottom were identical.
   The rail that is actually on screen is #jia-global-nav > .jia-destination,
   so the scale lives here as tokens and every rail box below consumes them.
   Widths are chosen so the rail's right edge never crosses #stage's 84px
   gutter at md and the stage follows it at sm/lg. */
html[data-juwel-global-ia="v2"] body{
  --jia-rail-w:60px;--jia-rail-item:46px;--jia-rail-item-h:48px;
  --jia-rail-icon:22px;--jia-rail-font:9px;--jia-rail-h:62px;
  --jia-stage-left:calc(24px + var(--jia-rail-w));
}
html[data-juwel-global-ia="v2"] body[data-docksize="sm"]{
  --jia-rail-w:52px;--jia-rail-item:38px;--jia-rail-item-h:42px;
  --jia-rail-icon:18px;--jia-rail-font:8px;--jia-rail-h:56px;
}
html[data-juwel-global-ia="v2"] body[data-docksize="lg"]{
  --jia-rail-w:72px;--jia-rail-item:58px;--jia-rail-item-h:56px;
  --jia-rail-icon:26px;--jia-rail-font:10px;--jia-rail-h:70px;
}

/* Compatibility registry: exact existing data-dock controls remain callable
   by the app manager and phone drawer, but are never equal-weight chrome. */
html[data-juwel-global-ia="v2"] #dock>.jia-legacy-launchers{display:none!important;}
html[data-juwel-global-ia="v2"] #dock>.dock-app,
html[data-juwel-global-ia="v2"] #dock>.dock-gem,
html[data-juwel-global-ia="v2"] #dock>.dock-div,
html[data-juwel-global-ia="v2"] #dock>.dock-collapse{display:none!important;}

html[data-juwel-global-ia="v2"] body:not([data-device="phone"]) #dock,
html[data-juwel-global-ia="v2"] body[data-shell="chat"]:not([data-device="phone"]):not([data-realm="company"]) #dock{
  display:flex;left:12px;top:50%;right:auto;bottom:auto;width:var(--jia-rail-w);max-height:calc(100dvh - 104px);
  transform:translateY(-50%);padding:6px;overflow:visible;align-items:stretch;
}
#jia-global-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;}
.jia-destination,.jia-mobile-destination{
  appearance:none;border:1px solid transparent;background:transparent;color:var(--ink-2);cursor:pointer;
  font-family:var(--ff-ui);font-weight:600;transition:background-color var(--visc-bead,.22s) var(--ease-flow,var(--ease-out)),color var(--visc-bead,.22s) var(--ease-flow,var(--ease-out)),transform var(--visc-bead,.22s) var(--ease-buoyant,var(--ease-out));
}
.jia-destination{position:relative;display:flex;min-width:var(--jia-rail-item,46px);min-height:var(--jia-rail-item-h,48px);padding:5px 2px;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--r-md);font-size:var(--jia-rail-font,9px);line-height:1;}
.jia-destination-icon{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;}
.jia-destination-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.jia-gem{display:block;width:23px;height:23px;object-fit:contain;}
/* Desktop rail only. The phone strip keeps its fixed 22/23px glyphs (line 66
   below), so docksize never reaches into the compact tab bar. */
.jia-destination .jia-destination-icon{width:var(--jia-rail-icon,22px);height:var(--jia-rail-icon,22px);}
.jia-destination .jia-destination-icon svg{width:var(--jia-rail-icon,22px);height:var(--jia-rail-icon,22px);}
.jia-destination .jia-gem{width:calc(var(--jia-rail-icon,22px) + 1px);height:calc(var(--jia-rail-icon,22px) + 1px);}
.jia-destination-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jia-destination.on,.jia-mobile-destination.on{color:var(--ink-1);background:color-mix(in srgb,var(--topaz) 13%,var(--surface));border-color:color-mix(in srgb,var(--topaz) 22%,var(--line));box-shadow:inset 0 1px 0 var(--edge);}
@media (hover:hover) and (pointer:fine){.jia-destination:hover,.jia-mobile-destination:hover{color:var(--ink-1);background:var(--surface-2);}}
.jia-destination:active,.jia-mobile-destination:active{transform:scale(.96);}
.jia-destination:focus-visible,.jia-mobile-destination:focus-visible,#jia-app-actions button:focus-visible,.jia-app-row:focus-visible,#jia-mobile-back:focus-visible,#jia-mobile-new:focus-visible{outline:none;border-color:var(--focus-edge);box-shadow:inset 0 0 0 999px var(--focus-wash),0 0 0 1px var(--focus-edge);}

/* Global bar is the sole title/action owner for maximized apps. */
#jia-app-actions{display:flex;align-items:center;gap:4px;margin-left:4px;}
#jia-app-actions[hidden]{display:none!important;}
#jia-app-actions button{min-width:44px;min-height:32px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);font:600 11px/1 var(--ff-ui);cursor:pointer;padding:0 10px;}
html[data-juwel-global-ia="v2"] body:not([data-device="phone"]) .fwin.maximized>.fwin-bar{display:none;}
html[data-juwel-global-ia="v2"] #mb-back-chat{display:none!important;}
html[data-juwel-global-ia="v2"] #mb-active{max-width:min(28vw,320px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Focused conversation is a view, not another navigation layer. */
html[data-juwel-global-ia="v2"] body[data-shell="chat"]:not([data-device="phone"]):not([data-realm="company"]) #stage{left:var(--jia-stage-left,84px);}
html[data-juwel-global-ia="v2"] #mb-studio-door{min-width:44px;min-height:32px;}

/* Apps is a bounded instrument inside the existing shell. It measures its
   lower edge against the visible composer at runtime. */
#jia-apps-panel{position:fixed;left:var(--jia-stage-left,84px);top:48px;z-index:139;width:min(320px,calc(100vw - var(--jia-stage-left,84px) - 20px));overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3);}
#jia-apps-panel[hidden]{display:none!important;}
.jia-apps-head{display:flex;flex-direction:column;gap:2px;padding:14px 14px 10px;border-bottom:1px solid var(--line-2);}
.jia-apps-head strong{font-family:var(--ff-display);font-size:17px;color:var(--ink-1);}
.jia-apps-head span{font-size:12px;color:var(--ink-3);}
.jia-apps-list{min-height:0;overflow:auto;padding:6px;}
.jia-app-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-1);cursor:pointer;text-align:left;font:600 13px/1.2 var(--ff-ui);}
.jia-app-row small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3);font:500 10px/1.2 var(--ff-mono);}
@media (hover:hover) and (pointer:fine){.jia-app-row:hover{background:var(--surface-2);}}

/* Compact: one contextual bar and exactly five global destinations. */
html[data-juwel-global-ia="v2"] body[data-device="phone"][data-stage="desktop"] #mob-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;}
.jia-mobile-context{min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink-1);}
.jia-mobile-context>span{min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;}
.jia-mobile-context b{max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1 var(--ff-display);}
.jia-mobile-context small{max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;color:var(--ink-3);font:500 9px/1 var(--ff-mono);letter-spacing:.05em;}
#jia-mobile-back[hidden],#jia-mobile-new[hidden]{visibility:hidden;display:grid!important;pointer-events:none;}
html[data-juwel-global-ia="v2"] body[data-device="phone"][data-stage="desktop"] #mob-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.jia-mobile-destination{min-width:44px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--r-md);padding:4px 1px;font-size:10px;line-height:1;}
.jia-mobile-destination .jia-destination-icon{width:22px;height:22px;}
html[data-juwel-global-ia="v2"] body[data-device="phone"] #jia-app-actions,
html[data-juwel-global-ia="v2"] body[data-device="phone"] #jia-global-nav{display:none!important;}

/* P1-06 — Bottom is a real axis for the v2 rail, not a repaint of Left.
   Personalize > Dock position > Bottom now lays #jia-global-nav out as a row,
   centres #dock above the footer, drops the stage gutter to 0, and lifts the
   composer clear of the bar so the two never stack on the same pixels.
   The founder decision that is still open is whether Bottom stays offered at
   all; this makes the offered control honest either way, so the control is
   built, not disabled, and nothing was deleted. Phone is excluded: there the
   rail is #mob-tabs and it is already bottom-anchored. */
html[data-juwel-global-ia="v2"] body:not([data-device="phone"])[data-dockpos="bottom"]{--jia-stage-left:0px;}
html[data-juwel-global-ia="v2"] body:not([data-device="phone"])[data-dockpos="bottom"] #dock,
html[data-juwel-global-ia="v2"] body[data-shell="chat"]:not([data-device="phone"]):not([data-realm="company"])[data-dockpos="bottom"] #dock{
  left:50%;top:auto;right:auto;bottom:calc(var(--os-footer-h,32px) + 12px);
  width:auto;max-width:calc(100vw - 24px);height:var(--jia-rail-h);max-height:none;
  transform:translateX(-50%);flex-direction:row;align-items:stretch;
}
html[data-juwel-global-ia="v2"] body:not([data-device="phone"])[data-dockpos="bottom"] #jia-global-nav{
  flex-direction:row;align-items:stretch;width:auto;height:100%;
}
html[data-juwel-global-ia="v2"] body:not([data-device="phone"])[data-dockpos="bottom"] .jia-destination{
  min-width:calc(var(--jia-rail-item,46px) + 16px);padding:5px 8px;
}
html[data-juwel-global-ia="v2"] body:not([data-device="phone"])[data-dockpos="bottom"] #stage,
html[data-juwel-global-ia="v2"] body[data-shell="chat"]:not([data-device="phone"]):not([data-realm="company"])[data-dockpos="bottom"] #stage{
  left:0;bottom:calc(var(--os-footer-h,32px) + var(--jia-rail-h) + 20px);
}
html[data-juwel-global-ia="v2"] body:not([data-device="phone"]):not(.chat-active)[data-dockpos="bottom"] #chatbar{
  bottom:calc(var(--os-footer-h,32px) + var(--jia-rail-h) + 20px);
}
html[data-juwel-global-ia="v2"] body:not([data-device="phone"])[data-dockpos="bottom"] #jia-apps-panel{left:12px;}

/* Frozen breakpoints: compact <=719, medium 720..1099, expanded >=1100. */
@media (min-width:720px) and (max-width:1099px){
  html[data-juwel-global-ia="v2"] #jia-global-nav{gap:3px;}
  html[data-juwel-global-ia="v2"] .jia-destination{min-height:calc(var(--jia-rail-item-h,48px) - 2px);}
}

@media (prefers-reduced-motion:reduce){
  .jia-destination,.jia-mobile-destination,#jia-apps-panel,.jia-app-row{transition:none!important;animation:none!important;}
}