/* ============================================================
   builder.css — 建置器頁樣式。檔案所有權：WP4 建置器模組。
   顏色一律 var(--*)，禁止 hex（見 CLAUDE.md）。
   唯一允許的「漸層」：畫布網格點陣（radial-gradient 功能性紋理）。
   ============================================================ */

/* ---- 頁面版型：main 填滿視窗高、內部各自捲動 ---- */
main[data-page="builder"] {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}

/* ---- 頂列：標題 + 工具列 ---- */
.builder-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.builder-heading h1 {
  font-size: var(--text-lg);
}

.builder-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.builder-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 var(--space-1);
}

/* ---- 範本下拉選單 ---- */
.template-menu-wrap {
  position: relative;
}

.template-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 60;
  width: 320px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.template-menu-title {
  padding: 0 var(--space-2) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.template-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  transition: background var(--transition-fast);
}

.template-item:hover {
  background: var(--color-surface-alt);
}

/* 線樣式選單：標記目前值（見 main.js edge-style-menu） */
.template-item.active {
  background: var(--color-accent-soft);
}

.template-item strong {
  font-size: var(--text-sm);
  font-weight: 650;
}

.template-item span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 三欄工作區 ---- */
.builder-workspace {
  display: flex;
  flex: 1;
  min-height: 0; /* 讓子欄各自捲動 */
}

/* ---- 元件庫 ---- */
.builder-palette {
  flex: none;
  width: 220px;
  min-height: 0; /* flex 子元素捲動保險，避免內容把版面撐開 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.palette-title {
  font-size: var(--text-sm);
  font-weight: 700;
}

.palette-hint {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.palette-group + .palette-group {
  margin-top: var(--space-4);
}

.palette-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.palette-glyph {
  display: inline-flex;
}

.palette-glyph svg {
  width: 15px;
  height: 15px;
}

.palette-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: background var(--transition-fast);
}

.palette-item:hover {
  background: var(--color-surface-alt);
}

.palette-item-name {
  font-size: var(--text-xs);
  line-height: 1.3;
}

/* ---- 服務徽章（palette / 節點 / 資訊卡共用；徽章白字為設計規格固定） ---- */
.svc-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: #fff; /* 例外聲明：徽章白字不隨主題（深色分類底上恆為白，見 CLAUDE.md 圖示規則） */
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.svc-badge-lg {
  width: 40px;
  height: 40px;
  font-size: 11px;
}

.cat-compute   { background: var(--cat-compute); }
.cat-storage   { background: var(--cat-storage); }
.cat-network   { background: var(--cat-network); }
.cat-database  { background: var(--cat-database); }
.cat-analytics { background: var(--cat-analytics); }
.cat-aiml      { background: var(--cat-aiml); }
.cat-secops    { background: var(--cat-secops); }
.cat-onprem    { background: var(--cat-onprem); }

/* ---- 拖曳 ghost（跟隨游標的浮動預覽） ---- */
.palette-ghost {
  position: fixed;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  opacity: 0.8;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* ---- 畫布 ---- */
.builder-canvas-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

.canvas-viewport {
  flex: 1;
  overflow: auto;
  background: var(--color-surface-alt);
}

/* 縮放容器：尺寸 = CANVAS_W/H * zoom，讓 viewport 捲軸範圍隨縮放正確伸縮；
   #canvas 維持固定 2400x1400 再用 transform:scale 縮放（見 canvas.js setZoom）。 */
.canvas-sizer {
  position: relative;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* 功能性網格點陣（非裝飾漸層） */
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 24px 24px;
}

#canvas.connecting {
  cursor: crosshair;
}

/* 畫布堆疊契約（見 CLAUDE.md）：容器框 1 → 邊線層 2 → 一般節點 3 → edge-del-btn 4。
   SVG 層在容器之上，必須 pointer-events:none 讓容器可點擊/拖曳，
   僅 .edge-hit 恢復 stroke 點擊。 */
.edge-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---- 邊線 ---- */
.edge-line {
  fill: none;
  stroke: var(--color-edge);
  stroke-width: 1.5;
  pointer-events: none;
}

.edge-line.selected {
  stroke: var(--color-accent);
  stroke-width: 2.5;
}

/* 連接線樣式（schema v4 edge.style，見 CLAUDE.md）：省略 style 一律實線 */
.edge-dash-dashed {
  stroke-dasharray: 6 4;
}

.edge-dash-dotted {
  stroke-dasharray: 2 3;
}

.edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 12;
  pointer-events: stroke;
  cursor: pointer;
}

.edge-arrow {
  fill: var(--color-edge);
}

.edge-preview {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

.edge-preview[hidden] {
  display: none;
}

/* 邊刪除鈕：常駐於畫布、選取邊時定位到 Bezier 中點顯示（見 canvas.js updateEdgeDelBtn） */
.edge-del-btn {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.edge-del-btn[hidden] {
  display: none;
}

.edge-del-btn:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ---- 容器框（如 VPC；可拖動、右下角可 resize、框內可放元件） ---- */
.node-container {
  position: absolute;
  z-index: 1;
  background: var(--container-fill);
  /* 2px 而非 1.5px：非整數框線在 dpr 1.25 螢幕會被向下取整成 1 裝置像素
     （實測 computed 0.8px），大範圍容器框會退化成髮絲線；
     且 --cat-network 綠在亮主題畫布上對比僅約 3.1:1，需靠線寬補足存在感。 */
  border: 2px dashed var(--color-edge);
  border-radius: var(--radius-lg);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

/* 容器框線用分類色（目前僅 network 的 VPC） */
.cat-border-network   { border-color: var(--cat-network); }
.cat-border-compute   { border-color: var(--cat-compute); }
.cat-border-storage   { border-color: var(--cat-storage); }
.cat-border-database  { border-color: var(--cat-database); }
.cat-border-analytics { border-color: var(--cat-analytics); }
.cat-border-aiml      { border-color: var(--cat-aiml); }
.cat-border-secops    { border-color: var(--cat-secops); }
.cat-border-onprem    { border-color: var(--cat-onprem); }

.node-container.dragging {
  cursor: grabbing;
}

.node-container.selected {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.node-container.connect-src {
  outline: 2px dashed var(--color-accent);
  outline-offset: 1px;
}

/* ---- 分區框（frame）：純視覺分組，無把手、無服務徽章、實線框 ---- */
.node-frame {
  position: absolute;
  z-index: 1;
  background: var(--container-fill);
  border: 2px solid var(--frame-color);
  border-radius: var(--radius-lg);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.frame-f1 { --frame-color: var(--frame-1); }
.frame-f2 { --frame-color: var(--frame-2); }
.frame-f3 { --frame-color: var(--frame-3); }
.frame-f4 { --frame-color: var(--frame-4); }
.frame-f5 { --frame-color: var(--frame-5); }
.frame-f6 { --frame-color: var(--frame-6); }
.frame-f7 { --frame-color: var(--frame-7); }
.frame-f8 { --frame-color: var(--frame-8); }

.node-frame .frame-label {
  color: var(--frame-color);
  font-weight: 650;
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
}

.node-frame.dragging {
  cursor: grabbing;
}

.node-frame.selected {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.container-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  pointer-events: none; /* 標籤不擋容器本體的拖曳 */
}

.container-label .svc-badge {
  width: 24px;
  height: 24px;
  font-size: 8px;
}

.container-name {
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

.node-container .node-del {
  top: 8px;
  right: 8px;
}

.node-container:hover .node-del,
.node-container.selected .node-del {
  display: inline-flex;
}

.node-resize {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-right: 3px solid var(--color-edge);
  border-bottom: 3px solid var(--color-edge);
  border-bottom-right-radius: var(--radius-lg);
  cursor: nwse-resize;
  touch-action: none;
}

.node-resize:hover {
  border-color: var(--color-accent);
}

/* ---- 節點 ---- */
.node {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 150px;
  min-height: 70px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.node.dragging {
  cursor: grabbing;
  box-shadow: var(--shadow-md);
}

.node.selected {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.node.connect-src {
  outline: 2px dashed var(--color-accent);
  outline-offset: 1px;
}

.node-name {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
  min-width: 0;
}

.node-del {
  position: absolute;
  top: -8px;
  right: -8px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1;
}

.node:hover .node-del,
.node.selected .node-del {
  display: inline-flex;
}

.node-del:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.node-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  background: var(--color-edge);
  cursor: crosshair;
  opacity: 0;
  pointer-events: none;
  transition: background var(--transition-fast), transform var(--transition-fast),
    opacity var(--transition-fast);
}

.node-handle-right {
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  opacity: 1;
  pointer-events: auto;
}

.node-handle-left {
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
}

.node-handle-top {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.node-handle-bottom {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}

/* hover 顯示：非連線模式滑鼠移到節點/容器上時，全部把手可見；移開恢復預設（僅右把手） */
.node:hover .node-handle,
.node-container:hover .node-handle {
  opacity: 1;
  pointer-events: auto;
}

/* 連線模式：滑鼠所在節點顯示全部把手 */
#canvas.connecting .node:hover .node-handle,
#canvas.connecting .node-container:hover .node-handle {
  opacity: 1;
  pointer-events: auto;
}

/* 連線起點節點：全部把手常駐顯示 */
.node.connect-src .node-handle,
.node-container.connect-src .node-handle {
  opacity: 1;
  pointer-events: auto;
}

/* 有線錨定的側持續顯示（見 canvas.js updateAnchoredHandles）：即使非 hover/連線模式，
   已有邊連接的那一側把手也常駐可見，讓使用者能辨認既有連線方向。 */
.node.anchored-left .node-handle-left,
.node-container.anchored-left .node-handle-left,
.node.anchored-right .node-handle-right,
.node-container.anchored-right .node-handle-right,
.node.anchored-top .node-handle-top,
.node-container.anchored-top .node-handle-top,
.node.anchored-bottom .node-handle-bottom,
.node-container.anchored-bottom .node-handle-bottom {
  opacity: 1;
  pointer-events: auto;
}

.node-handle-right:hover,
.node-handle-left:hover {
  background: var(--color-accent);
  transform: translateY(-50%) scale(1.25);
}

.node-handle-top:hover,
.node-handle-bottom:hover {
  background: var(--color-accent);
  transform: translateX(-50%) scale(1.25);
}

/* ---- 容器（VPC）把手：尺寸加大，可見性強化（見 CLAUDE.md） ---- */
.node-container .node-handle {
  width: 16px;
  height: 16px;
}

.node-container .node-handle-right {
  right: -9px;
}

.node-container .node-handle-left {
  left: -9px;
}

/* ---- 框選矩形（拖曳畫布空白產生） ---- */
.select-rect {
  position: absolute;
  z-index: 5;
  border: 1px dashed var(--color-accent);
  background: var(--select-rect-fill);
  pointer-events: none;
}

.select-rect[hidden] {
  display: none;
}

/* ---- 畫布提示 ---- */
.canvas-empty-hint {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 320px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  pointer-events: none;
}

.canvas-empty-hint[hidden] {
  display: none;
}

.canvas-connect-hint {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-accent-soft);
  /* accent-soft 底上的小字用 accent-hover 才過 AA 4.5:1（見 base.css nav 註記） */
  color: var(--color-accent-hover);
  font-size: var(--text-xs);
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}

.canvas-connect-hint[hidden] {
  display: none;
}

/* ---- 縮放浮動控制（右下角，見 canvas.js setZoom/Ctrl+滾輪） ---- */
.zoom-controls {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 5;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 var(--space-2);
  border: none;
  border-left: 1px solid var(--color-border);
  background: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.zoom-btn:first-child {
  border-left: none;
}

.zoom-btn:hover {
  background: var(--color-surface-alt);
}

.zoom-btn-reset {
  min-width: 48px;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ---- 資訊面板 ---- */
.builder-infopanel {
  flex: none;
  width: 300px;
  min-height: 0; /* flex 子元素捲動保險，避免內容把版面撐開 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
}

.infopanel-title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.infopanel-empty {
  font-size: var(--text-sm);
}

.infopanel-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.infopanel-name {
  font-size: var(--text-base);
  font-weight: 650;
  line-height: 1.3;
}

.infopanel-cat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.infopanel-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.infopanel-desc {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.infopanel-subtitle {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.infopanel-usecases {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.infopanel-usecases li + li {
  margin-top: var(--space-1);
}

.infopanel-pricing {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.infopanel-del {
  width: 100%;
  justify-content: center;
}

/* ---- 分區框編輯器 ---- */
.frame-editor-row {
  margin-bottom: var(--space-4);
}

.infopanel-input {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.infopanel-input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.frame-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.frame-swatch {
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-surface);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--color-border);
  cursor: pointer;
  padding: 0;
}

.frame-swatch.active {
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* ---- 磁力對齊按鈕啟用態 ---- */
.btn[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
}

/* ---- 架構健檢（advisor；顯示於資訊面板空狀態） ---- */
.advisor-score-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.advisor-score {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.advisor-score-meta {
  font-size: var(--text-xs);
}

.advisor-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.advisor-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width var(--transition-base); /* 功能性轉場：分數變化回饋 */
}

.advisor-allpass {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.advisor-empty {
  font-size: var(--text-sm);
}

.advisor-findings {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.advisor-finding {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}

.advisor-msg {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.advisor-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
}

.advisor-finding.level-warn .advisor-dot { background: var(--color-danger); }
.advisor-finding.level-info .advisor-dot { background: var(--color-edge); }

.advisor-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

.advisor-suggest-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.advisor-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2) 2px 2px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: var(--text-xs);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.advisor-chip:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

.advisor-suggest-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.advisor-chip-add {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.advisor-chip-add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.svc-badge-sm {
  /* 20px/8px 而非 18px/7px：8px 是全站徽章縮寫的最小字級
     （container-label 24px/8px），7px 低於可讀下限；縮寫最長 3 字仍放得下。 */
  width: 20px;
  height: 20px;
  font-size: 8px;
  border-radius: 4px;
}

/* ---- toast ---- */
.builder-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  z-index: 300;
  transform: translateX(-50%) translateY(8px);
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.builder-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- 行動版 banner（桌面隱藏） ---- */
.builder-mobile-banner {
  display: none;
}

/* ---- 響應式 ---- */
@media (max-width: 767px) {
  main[data-page="builder"] {
    height: auto;
    min-height: calc(100vh - var(--header-height));
    overflow: visible;
  }

  .builder-mobile-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent-soft);
    /* accent-soft 底上的小字用 accent-hover 才過 AA 4.5:1（見 base.css nav 註記） */
    color: var(--color-accent-hover);
    font-size: var(--text-xs);
  }

  .builder-mobile-banner[hidden] {
    display: none;
  }

  .mobile-banner-close {
    border: none;
    background: none;
    color: inherit;
    font-size: var(--text-base);
    line-height: 1;
    padding: var(--space-1);
  }

  /* 手機採唯讀優先：隱藏元件庫，保留畫布捲動與點選看資訊卡（見 CLAUDE.md） */
  .builder-palette {
    display: none;
  }

  .builder-workspace {
    flex: none; /* 蓋過桌面版 flex:1，否則 height 會被 flex-basis 取代 */
    height: 70vh;
  }

  /* 資訊面板改為底部滑出（.has-content 由 infopanel.js 切換） */
  .builder-infopanel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    width: auto;
    max-height: 45vh;
    border-left: none;
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(105%);
    transition: transform var(--transition-base);
  }

  .builder-infopanel.has-content {
    transform: translateY(0);
  }
}

/* ---- 修正：桌面版元件庫服務變多時撐開整頁（見 CLAUDE.md 驗收第 5 點）----
   根因：body 只有 min-height:100%（無明確 height），而 main[data-page="builder"]
   繼承 base.css 的 main{flex:1}（= flex-basis:0%）。flex 版面配置對主軸尺寸
   優先採計 flex-basis 而非 height，當容器（body）無明確高度可分配自由空間時，
   height:calc(100vh - ...) 就不會生效，main 退回以子內容的 min-content 撐開，
   #palette 服務一多即整頁被撐大、無法內部捲動（與上方手機斷點註解同一根因，
   手機版已用 flex:none 解過，此處補齊桌面版）。
   修法：flex-grow/shrink 歸零、flex-basis 直接吃 height 算式，讓 main 主軸尺寸
   不再受子內容影響，#palette/.builder-infopanel 的 overflow-y:auto 才吃得到
   剩餘高度、恢復內部捲動。 */
main[data-page="builder"] {
  flex: 0 0 calc(100vh - var(--header-height));
}