:root {
  --opencodex-wco-env-titlebar-x: env(titlebar-area-x, 0px);
  --opencodex-wco-env-titlebar-width: env(titlebar-area-width, 100vw);
  --opencodex-wco-env-left: var(--opencodex-wco-env-titlebar-x);
  --opencodex-wco-env-right: max(0px, calc(100vw - var(--opencodex-wco-env-titlebar-x) - var(--opencodex-wco-env-titlebar-width)));
  --opencodex-wco-env-top: env(titlebar-area-y, 0px);
  --opencodex-wco-env-height: env(titlebar-area-height, 0px);
  --opencodex-wco-left: var(--opencodex-wco-env-left);
  --opencodex-wco-right: var(--opencodex-wco-env-right);
  --opencodex-wco-top: var(--opencodex-wco-env-top);
  --opencodex-wco-height: var(--opencodex-wco-env-height);
  --opencodex-wco-titlebar-x: var(--opencodex-wco-env-titlebar-x);
  --opencodex-wco-titlebar-width: var(--opencodex-wco-env-titlebar-width);
  --opencodex-wco-right-panel-toolbar-extend: 0px;
  --opencodex-wco-titlebar-background: transparent;
  --opencodex-wco-titlebar-left-background: var(--opencodex-wco-titlebar-background);
  --opencodex-wco-titlebar-right-background: var(--opencodex-wco-titlebar-background);
}
:root[data-opencodex-wco-visible="true"][data-opencodex-wco-titlebar-scheme="dark"] {
  /* 普通 WCO 标题栏按当前应用表面色同步明暗方案，避免系统按钮继续按浅色绘制。 */
  color-scheme: dark !important;
}
:root[data-opencodex-wco-visible="true"][data-opencodex-wco-titlebar-scheme="light"] {
  color-scheme: light !important;
}
:root[data-opencodex-wco-visible="true"] body::before {
  /* WCO 左右系统按钮区域不属于应用 header，用实际采样到的页面底色补齐整条标题栏。 */
  background:
    linear-gradient(
      to right,
      var(--opencodex-wco-titlebar-left-background) 0 var(--opencodex-wco-titlebar-x),
      var(--opencodex-wco-titlebar-background) var(--opencodex-wco-titlebar-x) calc(var(--opencodex-wco-titlebar-x) + var(--opencodex-wco-titlebar-width)),
      var(--opencodex-wco-titlebar-right-background) calc(var(--opencodex-wco-titlebar-x) + var(--opencodex-wco-titlebar-width)) 100%
    );
  content: "";
  height: max(48px, calc(var(--opencodex-wco-top) + var(--opencodex-wco-height)));
  inset-inline: 0;
  inset-block-start: 0;
  pointer-events: none;
  position: fixed;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll],
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] * {
  /* header 自身已经被限制到 WCO 可用矩形内，内部 safe padding 继续叠加会制造左侧空白。 */
  --spacing-token-safe-header-left: 0px !important;
  --spacing-token-safe-header-right: 0px !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] {
  /* 参考 WCO 示例页：直接把 header 放进 titlebar-area-x/width 描述的可用标题栏区域。 */
  inset-inline-start: var(--opencodex-wco-titlebar-x) !important;
  inset-inline-end: auto !important;
  inline-size: var(--opencodex-wco-titlebar-width) !important;
  max-inline-size: var(--opencodex-wco-titlebar-width) !important;
  left: var(--opencodex-wco-titlebar-x) !important;
  right: auto !important;
  width: var(--opencodex-wco-titlebar-width) !important;
  max-width: var(--opencodex-wco-titlebar-width) !important;
  overflow: hidden !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] > [data-test-id="header-shell-slot"]:last-child {
  max-width: 100% !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll][data-opencodex-wco-has-right-leading="true"] > [data-testid="app-shell-header-context-menu-surface"],
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll][data-opencodex-wco-has-right-panel-toolbar="true"] > [data-testid="app-shell-header-context-menu-surface"] {
  /* 侧栏标签打开时，中间上下文区必须退让，否则会占住 WCO 标题栏里的可用横向空间。 */
  flex: 0 1 0px !important;
  inline-size: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  margin-inline-start: 0 !important;
  padding-inline: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] > [data-test-id="header-shell-slot"]:last-child[data-opencodex-wco-has-leading="true"] {
  /* 只有右侧 slot 内存在可收缩标签区时才覆盖官方 min-width；默认固定按钮保持官方完整测量宽度。 */
  flex-shrink: 1 !important;
  min-width: var(--opencodex-wco-right-slot-min, 0px) !important;
  overflow: hidden !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] > [data-test-id="header-shell-slot"]:last-child:not([data-opencodex-wco-has-leading="true"]) {
  flex-shrink: 0 !important;
  overflow: visible !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] > [data-test-id="header-shell-slot"]:last-child[data-opencodex-wco-has-leading="true"] > div {
  display: flex !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] > [data-test-id="header-shell-slot"]:last-child[data-opencodex-wco-has-leading="true"] > div > [data-opencodex-wco-leading="true"] {
  /* 只让 .ms-auto 前面的侧栏标签让位，后面的固定控制按钮保持完整。 */
  flex: 0 1 var(--opencodex-wco-leading-max, 0px) !important;
  inline-size: var(--opencodex-wco-leading-max, 0px) !important;
  max-inline-size: var(--opencodex-wco-leading-max, 0px) !important;
  width: var(--opencodex-wco-leading-max, 0px) !important;
  min-width: 0 !important;
  max-width: var(--opencodex-wco-leading-max, 0px) !important;
  overflow: hidden !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] > [data-test-id="header-shell-slot"]:last-child[data-opencodex-wco-has-leading="true"] > div > [data-opencodex-wco-leading="true"] > * {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-leading="true"] [data-app-shell-tab-strip-controller],
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-leading="true"] [role="tablist"] {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-leading="true"] [data-app-shell-tab-strip-controller] {
  flex: 1 1 auto !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-leading="true"] [data-app-shell-tab-strip-controller="right"] {
  /* data-app-shell-tab-strip-controller 才是整条侧栏标签容器；它负责在剩余宽度内滚动/裁切。 */
  flex: 1 1 auto !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-leading="true"] [data-app-shell-tab-strip-controller="right"] > [role="tablist"] {
  min-inline-size: 0 !important;
  max-inline-size: none !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-leading="true"] [data-app-shell-tab-strip-controller="right"]::-webkit-scrollbar {
  display: none !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-leading="true"] [data-app-shell-tab-controller="right"],
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-leading="true"] [data-tab-id] {
  /* 单个 tab wrapper 官方默认 shrink-0；这里允许它在标签容器内收缩，但不把它误设成整条宽度。 */
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
:root[data-opencodex-wco-visible="true"] header[data-app-shell-header-edge-scroll] > [data-test-id="header-shell-slot"]:last-child[data-opencodex-wco-has-leading="true"] > div > [data-opencodex-wco-fixed="true"] {
  flex: 0 0 auto !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-right-panel-toolbar="true"] {
  /* 顶栏父级只负责放开绘制和右侧避让；左侧扩展交给 strip，避免 flex 把扩展量变成空白。 */
  contain: none !important;
  overflow: visible !important;
  padding-inline-end: max(0.5rem, calc(var(--opencodex-wco-right) + 0.5rem)) !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-right-panel-strip="true"] {
  /* strip 的右边界保持不变，只把左边界拉到左侧 header 图标后，空出来的宽度就会变成标签可滚动区域。 */
  flex: 1 1 auto !important;
  margin-inline-start: calc(-1 * var(--opencodex-wco-right-panel-toolbar-extend, 0px)) !important;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-right-panel-toolbar-clip="true"] {
  /* 官方 right panel 多层容器使用 overflow/paint containment；顶栏向左扩展时只放开这些包裹层。 */
  contain: none !important;
  overflow: visible !important;
}
:root[data-opencodex-wco-visible="true"][data-opencodex-wco-image-preview-open="true"][data-opencodex-wco-image-preview-scheme="dark"] {
  /* 图片预览遮罩色由官方 overlay 计算得出，这里只同步明暗方案给 WCO。 */
  color-scheme: dark !important;
}
:root[data-opencodex-wco-visible="true"][data-opencodex-wco-image-preview-open="true"][data-opencodex-wco-image-preview-scheme="light"] {
  color-scheme: light !important;
}
:root[data-opencodex-wco-visible="true"][data-opencodex-wco-image-preview-open="true"] body::before {
  /* 图片预览打开时覆盖普通标题栏补底，使用官方遮罩的 computed color。 */
  background: var(--opencodex-wco-image-preview-scrim, var(--opencodex-wco-titlebar-background));
  z-index: 31;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-image-preview="true"] {
  /* 确保图片预览内容压过上面的标题栏补底层。 */
  z-index: 32;
}
:root[data-opencodex-wco-visible="true"] [data-opencodex-wco-image-preview-controls="true"] {
  /* 图片预览自己的右上角按钮需要避开 Chrome 的 WCO 菜单/插件按钮。 */
  right: max(0.75rem, calc(var(--opencodex-wco-right) + 0.75rem)) !important;
  top: max(0.75rem, calc(var(--opencodex-wco-top) + 0.75rem)) !important;
}