/* drafting.css — Agent Draft 自己的版面:首屏、上傳區、舞台、尺寸表。
 * 設計代幣、nav、表單、工作區骨架全部沿用 LocalForge(base/nav/form/workspace/modebar.css),
 * 這裡只放這個產品獨有的元件。顏色維持兩個色相:暖橘(動作)、冷青(AI 標記)。 */

:root { --cool-ink: #1a7b8d; --warm-ink: #b4530f; }
:root[data-theme="dark"] { --cool-ink: var(--brand-cool); --warm-ink: var(--brand-warm); }

/* ---------- 首屏:主視覺在左、文案與上傳在右;圖右側本來就留白,文字落在那裡 ---------- */
.hero {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  align-items: center;
  gap: 24px;
  min-height: 340px;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: min-height 0.3s ease;
}
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/hero.jpg") left center / cover no-repeat;
  opacity: var(--art-opacity);
  mix-blend-mode: var(--art-blend);
  /* 右側淡成表面色,文字才有乾淨的落腳處 */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.35) 70%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.35) 70%, transparent 100%);
}
.hero__copy { grid-column: 2; padding: 32px 36px 32px 0; }
.hero__kicker { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.16em; color: var(--cool-ink); }
.hero__title { margin: 8px 0 0; font-size: 34px; line-height: 1.25; font-weight: 900; letter-spacing: -0.01em; }

/* ---------- 上傳區(左欄最上面)---------- */
.drop {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.drop:hover, .drop--over { border-color: var(--brand-warm); background: color-mix(in srgb, var(--brand-warm) 8%, var(--surface)); }
.drop__icon { font-size: 26px; color: var(--warm-ink); }
.drop__text { font-size: var(--fs-md); line-height: 1.5; }
.drop__text small { color: var(--text-dim); font-size: var(--fs-xs); }
.drop--busy { pointer-events: none; opacity: 0.6; }

/* 分析進度條:冷青→暖橘漸層(與 LocalForge 的 GPU 量表同一套語彙),失敗變全橘 */
.upload { margin: -6px 0 16px; }
.bar { position: relative; height: 6px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-cool), var(--brand-warm)); transition: width 0.6s ease; }
.bar--failed .bar__fill { background: var(--brand-warm); }
.upload .progress { margin-top: 6px; }

/* ---------- 模式列:主視覺換成這個產品的卡片圖;即將推出的模式壓淡 ---------- */
.ws-modebar::before { background-image: url("../img/card.jpg"); }
.ws-mode--soon { color: var(--text-dim); opacity: 0.55; cursor: not-allowed; }

/* ---------- 左欄補充 ---------- */
.progress { margin: 8px 0 0; min-height: 1.4em; color: var(--text-dim); font-size: var(--fs-sm); font-family: var(--font-mono); }
.progress:empty { margin: 0; min-height: 0; }
.datum { margin: 0 0 14px; padding: 0; border: 0; }
.datum legend { padding: 0; }
.datum__opt { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: var(--fs-md); }
.lib { margin-top: 18px; }
.lib__title { margin: 0 0 8px; font-size: var(--fs-sm); color: var(--text-dim); font-weight: 500; }
.lib__item { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; }
.lib__open { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.lib__item--current .lib__open { border-color: var(--brand-cool); }
.lib__open b { overflow-wrap: anywhere; }
.lib__open small { color: var(--text-dim); font-size: var(--fs-2xs); font-family: var(--font-mono); }

/* ---------- 右欄:零件 ---------- */
.part { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.part__title { margin: 0; font-size: var(--fs-lg); line-height: 1.4; overflow-wrap: anywhere; }
.part__meta { margin: 0; color: var(--text-dim); font-size: var(--fs-xs); font-family: var(--font-mono); }
.part__stage { display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.part__stage:fullscreen { padding: 16px; }
.part__stage:fullscreen .part__view { flex: 1; aspect-ratio: auto; }
.part__toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.part__modes, .part__downloads, .part__zoom { display: flex; gap: 6px; flex-wrap: wrap; }
.part__downloads { margin-left: auto; }
.part__modes .btn--on { border-color: var(--brand-warm); color: var(--warm-ink); }
.btn--xs { font-size: var(--fs-xs); padding: 3px 10px; }
.part__iso { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; }
.part__isolabel { font-size: var(--fs-2xs); font-family: var(--font-mono); color: var(--text-dim); letter-spacing: 0.08em; padding: 0 4px; }
.stage2d [data-iso] { cursor: move; }
/* 3D 小圖的互動元素:整片透明框(拖 = 移動)、右下角方塊(拖 = 縮放)、上方圓點(拖 = 旋轉) */
/* 點一下小圖 = 選取(框 + 把手出現);點圖面其他地方 = 失焦(全部消失)。滑過只淡淡提示框。 */
.stage2d .iso-box { fill: rgba(63,182,200,0.02); stroke: #3fb6c8; stroke-width: 8; stroke-dasharray: 40 24; stroke-opacity: 0; cursor: move; }
.stage2d .iso-box:hover { stroke-opacity: 0.35; }
.stage2d .iso-box.is-active { stroke-opacity: 0.9; fill: rgba(63,182,200,0.06); }
.stage2d .iso-grip, .stage2d .iso-rotate { display: none; }
.stage2d .iso-box.is-active ~ .iso-grip { display: block; fill: #f59022; stroke: #fff; stroke-width: 6; cursor: nwse-resize; }
.stage2d .iso-box.is-active ~ .iso-rotate { display: block; fill: #3fb6c8; stroke: #fff; stroke-width: 6; cursor: grab; }
/* 轉盤:疊在小圖的位置上,底色略白讓線框讓位;拖曳轉動時 SVG 的線框先藏起來 */
.iso-live { position: absolute; z-index: 2; border: 1px dashed #3fb6c8; border-radius: 6px; background: rgba(255,255,255,0.92); cursor: grab; }
.iso-live canvas { display: block; width: 100%; height: 100%; }
.iso-live:active { cursor: grabbing; }
.stage2d.is-live [data-iso] { opacity: 0.15; }
.stage2d .iso-rotate:active { cursor: grabbing; }
.btn--update { border-color: transparent; background: var(--brand-warm); color: #17140f; font-weight: 700; }
.btn--off { opacity: 0.45; cursor: not-allowed; pointer-events: auto; }
.part__view { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-soft); overflow: hidden; }
.part__view canvas { display: block; width: 100%; height: 100%; }
.part__view--2d { background: #fff; cursor: grab; user-select: none; -webkit-user-select: none; }
.stage2d svg text { user-select: none; -webkit-user-select: none; }
.part__view--2d:active { cursor: grabbing; }
.stage2d { position: absolute; inset: 0; transform-origin: 0 0; }
.stage2d svg { display: block; width: 100%; height: 100%; }
.stage2d .dim { cursor: pointer; }
.stage2d .dim:hover, .stage2d .dim--hot { fill: #d95c14 !important; font-weight: 700; }
.part__viewmsg { margin: 0; min-height: 1.4em; font-size: var(--fs-xs); color: var(--text-dim); }
/* 重畫中:圖壓淡、右上角一個小標,讓人知道線 3 秒後會跟上文字 */
.part__view--2d.is-busy .stage2d { opacity: 0.55; }
.stage2d__busy { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--warm-ink); font-size: var(--fs-xs); font-family: var(--font-mono); }

/* AI 建議:冷青左條 */
.ai { padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand-cool); border-radius: 8px; background: var(--surface); }
.ai__title { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--text-mid); font-weight: 500; }
.ai__notes { margin: 0; font-size: var(--fs-sm); }
.ai__notes:empty::before { content: "沒有額外提醒。"; color: var(--text-dim); }
.mchip { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim);
  font-size: var(--fs-2xs); font-family: var(--font-mono); font-weight: 400; vertical-align: middle; }
.mchip--ok { border-color: var(--cool-ink); color: var(--cool-ink); }
.mchip--warn { border-color: var(--warm-ink); color: var(--warm-ink); }

/* ---------- 尺寸表 ---------- */
.dims__title { margin: 0 0 2px; font-size: var(--fs-md); font-weight: 700; }
.dims__title small { font-weight: 400; color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-xs); }
.dims__hint { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--text-dim); }
.dims__wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dims__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dims__table th, .dims__table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.dims__table thead th { font-weight: 500; color: var(--text-mid); background: var(--surface-soft); font-size: var(--fs-xs); white-space: nowrap; }
.dims__table tbody tr:last-child td { border-bottom: 0; }
.dims__table td.mono { font-family: var(--font-mono); white-space: nowrap; }
.dims__table tr.row--ai td:first-child { box-shadow: inset 4px 0 0 var(--brand-cool); }
.dims__table tr.row--hot td { background: color-mix(in srgb, var(--brand-warm) 12%, transparent); }
.dims__table .reason { color: var(--text-dim); font-size: var(--fs-2xs); display: block; }
.dims__table select, .dims__table input { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-soft); color: var(--text); font: inherit; font-size: var(--fs-sm); }
.dims__table input.tol-custom { width: 8.5em; margin-left: 6px; font-family: var(--font-mono); }
.dims__table input.tol-custom[hidden] { display: none; }
.dims__table input.note { width: 11em; }
.stage2d .dim { cursor: grab; }
.stage2d .dim:active { cursor: grabbing; }

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__art { -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
  .hero__copy { grid-column: 1; padding: 180px 24px 28px; }
  .hero__title { font-size: 26px; }
}