@layer business {
/* ============================================================================
   function-panel.css — Function Panel 模式外壳
   方案A：#desktop-panel 在 #app.fp-mode 下复用为 function-panel：
   - 隐藏 desktop 专属子节点（menubar / icons / dock）
   - .desktop-canvas 内只剩铺满的 .fp-docked 窗口
   - 宽度由 --fp-ratio 控制，扣除 navibar 宽度
   ============================================================================ */

#app.fp-mode {
  flex-direction: row;
}

/* function-panel = 复用的 desktop-panel */
#app.fp-mode #desktop-panel {
  flex: 0 0 auto;
  width: calc((100vw - var(--navibar-w, 56px) - 5px) * var(--fp-ratio, 0.42));
  min-width: 0;
}

/* 折叠态：function-panel 隐藏，chat 全宽，navibar 保持可见 */
#app.fp-collapsed #desktop-panel {
  width: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* fp 模式隐藏 desktop 专属子节点 */
#app.fp-mode .desktop-menubar,
#app.fp-mode .desktop-icons,
#app.fp-mode .desktop-dock {
  display: none !important;
}

/* fp 模式 canvas 无网格底纹（铺满窗口已占满），保留背景色 */
#app.fp-mode .desktop-canvas::before {
  display: none;
}

/* ── 铺满窗口 ─────────────────────────────────────────────────────────────── */

#app.fp-mode .desktop-window.fp-docked {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  border-radius: 0;
  border: none;
  box-shadow: none;
  z-index: 1;
  transform: none !important;
  opacity: 1 !important;
}

/* fp 模式隐藏铺满窗口的标题栏与 resize handle（无浮动窗口语义） */
#app.fp-mode .desktop-window.fp-docked .win-titlebar,
#app.fp-mode .desktop-window.fp-docked .win-resize-handle {
  display: none;
}

/* ── 两套分割线显隐 ───────────────────────────────────────────────────────── */

/* fp 模式：隐藏 desktop 分割线（展开按钮在 fp 折叠态共用，见下） */
#app.fp-mode #desktop-divider {
  display: none !important;
}

/* fp 折叠态：展开按钮显示，贴在 navibar 右缘（desktop 模式贴 left:0） */
#app.fp-mode.fp-collapsed #desktop-expand-btn {
  display: flex;
  left: var(--navibar-w, 56px);
}

/* desktop 模式：隐藏 fp 分割线 */
#fp-divider { display: none; }

#app.fp-mode #fp-divider {
  display: block;
  width: 5px;
  flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 400;
  touch-action: none;
}

#app.fp-mode #fp-divider::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 1px;
  width: 3px;
  background: var(--ruled-line-color, rgba(0,0,0,0.08));
  transition: background 0.15s;
}

#app.fp-mode #fp-divider:hover::after,
#app.fp-mode #fp-divider.dragging::after {
  background: var(--color-primary);
}

/* 折叠时隐藏 fp 分割线 */
#app.fp-collapsed #fp-divider { display: none !important; }

/* fp 模式移动端：分割线隐藏（移动端不分栏） */
@media (max-width: 768px) {
  #app.fp-mode #fp-divider { display: none !important; }
}

}