/* ============================================================
   元件樣式 + class 契約（所有面板模組共用）
   ------------------------------------------------------------
   按鈕:      .btn  .btn--primary .btn--danger .btn--ghost .btn--icon  .btn--sm  .is-active
   工具列:    .tb-group  .tb-sep  .tb-title  .save-dot(.saved/.saving/.dirty/.error)
   面板:      .panel  .panel-head  .panel-title  .panel-body  .section  .section-head  .section-title
   表單:      .field  .field-label  .field-row  .inp  .sel  .ta  .chk  .hint  .inline
   清單/樹:   .list  .row  .row.is-active  .tree  .tree-group  .tree-head  .tree-item(.is-current)
   標籤:      .chip  .chip--type  .badge  .badge--error  .badge--warn  .tag-dot
   卡片:      .card  .card-head  .card-body  .card-actions
   對話/選項: .line-item  .choice-card  .cond-box  .effect-row  .cond-row
   Modal:     .modal .modal-backdrop .modal-panel .modal-head .modal-body .modal-foot
   試玩:      .pt  .pt-stage .pt-speaker .pt-text .pt-choices .pt-choice(.is-disabled)
              .pt-side .pt-vars .var-line(.changed) .pt-log .log-line .pt-controls
   Toast:     #toast-host .toast(.toast--error/.toast--ok)
   雜項:      .empty  .kbd  .muted  .danger-text  .drag-handle  .icon-btn  .seg  .seg-btn.is-active
   ============================================================ */

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-2); color: var(--text-1);
  border: 1px solid var(--border);
  font-size: 13px; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg-3); border-color: var(--border-strong); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn--danger { color: var(--danger); border-color: var(--danger-weak); }
.btn--danger:hover { background: var(--danger-weak); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--bg-3); }
.btn--sm { height: 25px; padding: 0 8px; font-size: 12px; }
.btn--icon { padding: 0; width: 30px; justify-content: center; }
.btn.is-active { background: var(--accent-weak); border-color: var(--accent); color: var(--accent-2); }
.icon-btn {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2);
}
.icon-btn:hover { background: var(--bg-3); color: var(--text-1); }

/* 分段控制 */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg-btn { height: 28px; padding: 0 10px; font-size: 12px; color: var(--text-2); background: var(--bg-2); }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.is-active { background: var(--accent); color: var(--accent-fg); }

/* ---------- 工具列 ---------- */
.tb-group { display: inline-flex; align-items: center; gap: 6px; }
.tb-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.tb-title { font-weight: 600; font-size: 14px; margin-right: 6px; display: inline-flex; align-items: center; gap: 6px; }
.tb-title .logo { font-size: 18px; }
.tb-spacer { flex: 1 1 auto; }
.save-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.save-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.save-dot.saved::before  { background: var(--ok); }
.save-dot.saving::before { background: var(--warn); animation: pulse 1s infinite; }
.save-dot.dirty::before  { background: var(--warn); }
.save-dot.error::before  { background: var(--danger); }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- 面板通用 ---------- */
.panel { display: flex; flex-direction: column; height: 100%; }
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-1); z-index: 1;
}
.panel-title { font-weight: 600; font-size: 13px; flex: 1; }
.panel-body { flex: 1; overflow: auto; padding: 8px; }
.section { border-bottom: 1px solid var(--border); }
.section-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; cursor: pointer; user-select: none;
}
.section-head:hover { background: var(--bg-2); }
.section-title { font-weight: 600; font-size: 12px; letter-spacing: .02em; color: var(--text-2); text-transform: none; flex: 1; }
.section-body { padding: 4px 10px 12px; }
.section.collapsed .section-body { display: none; }
.section .caret { transition: transform .12s; color: var(--text-3); font-size: 10px; }
.section.collapsed .caret { transform: rotate(-90deg); }

/* ---------- 表單 ---------- */
.field { margin-bottom: 10px; }
.field-label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.field-row { display: flex; gap: 6px; align-items: center; }
.field-row > .inp, .field-row > .sel { flex: 1; min-width: 0; }
.inp, .sel, .ta {
  width: 100%; height: 30px; padding: 0 8px;
  background: var(--bg-2); color: var(--text-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px;
}
.ta { height: auto; min-height: 58px; padding: 6px 8px; resize: vertical; line-height: 1.45; }
.inp:focus, .sel:focus, .ta:focus { border-color: var(--accent); }
.inp::placeholder, .ta::placeholder { color: var(--text-3); }
.inp--sm { height: 26px; font-size: 12px; }
.sel { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
.chk { width: 15px; height: 15px; accent-color: var(--accent); }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.hint { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.muted { color: var(--text-2); }
.danger-text { color: var(--danger); }

/* ---------- 清單 / 樹 ---------- */
.list { display: flex; flex-direction: column; gap: 2px; }
.row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px;
}
.row:hover { background: var(--bg-2); }
.row.is-active { background: var(--accent-weak); color: var(--accent-2); }
.row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tree-group { margin-bottom: 6px; }
.tree-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; font-size: 11px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .03em;
}
.tree-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 18px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px;
}
.tree-item:hover { background: var(--bg-2); }
.tree-item.is-current { background: var(--accent-weak); color: var(--accent-2); }
.tree-item .tag-dot { flex: 0 0 auto; }

/* ---------- 標籤 / chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 10px;
  font-size: 11px; background: var(--bg-3); color: var(--text-2);
}
.chip--type { color: #fff; font-weight: 600; }
.tag-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 11px; font-weight: 600; background: var(--bg-3); color: var(--text-2);
}
.badge--error { background: var(--danger-weak); color: var(--danger); }
.badge--warn { background: var(--warn-weak); color: var(--warn); }
.kbd {
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2);
}

/* ---------- 卡片 ---------- */
.card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; }
.card-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.card-head .grow { flex: 1; font-weight: 600; font-size: 13px; }
.card-body { padding: 8px 10px; }
.card-actions { display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border); }
.drag-handle { cursor: grab; color: var(--text-3); }
.drag-handle:active { cursor: grabbing; }

/* 對話行 */
.line-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; }
.line-item .line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.line-item.dragging { opacity: .5; }
.line-item.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.line-item.drop-after { box-shadow: 0 2px 0 var(--accent); }

/* 選項 / 分支卡 */
.choice-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.choice-card .cc-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--warn-weak); }
.choice-card.is-branch .cc-head { background: var(--node-branch); color: #fff; }
.choice-card .cc-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }

/* 條件 / 效果 */
.cond-box { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 8px; background: var(--bg-1); }
.cond-row, .effect-row { display: flex; gap: 5px; align-items: center; margin-bottom: 6px; }
.cond-row:last-child, .effect-row:last-child { margin-bottom: 0; }
.cond-row .sel, .cond-row .inp, .effect-row .sel, .effect-row .inp { height: 27px; font-size: 12px; }
.cond-group { border-left: 2px solid var(--border-strong); padding-left: 8px; margin-left: 2px; }
.logic-pill { font-size: 11px; color: var(--text-2); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal-panel { position: relative; z-index: 1; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); width: min(560px, 92vw); max-height: 88vh; display: flex; flex-direction: column; }
.modal-panel.wide { width: min(1040px, 96vw); height: min(860px, 92vh); }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal-head .grow { flex: 1; font-weight: 600; font-size: 15px; }
.modal-body { flex: 1; overflow: auto; padding: 16px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

/* ---------- 試玩 ---------- */
.pt { display: grid; grid-template-columns: 1fr 320px; height: 100%; min-height: 0; }
.pt-main { display: flex; flex-direction: column; min-height: 0; padding: 18px; }
.pt-stage { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 8px; }
.pt-scene-title { font-size: 12px; color: var(--text-3); }
.pt-line { max-width: 640px; }
.pt-speaker { font-weight: 700; color: var(--accent-2); margin-bottom: 4px; }
.pt-speaker.narrator { color: var(--text-3); font-style: italic; font-weight: 500; }
.pt-text { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; font-size: 15px; line-height: 1.6; }
.pt-text.history { opacity: .5; }
.pt-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; max-width: 640px; }
.pt-choice { text-align: left; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-2); font-size: 14px; }
.pt-choice:hover { border-color: var(--accent); background: var(--bg-3); }
.pt-choice.is-disabled { opacity: .5; cursor: not-allowed; }
.pt-choice .why { display: block; font-size: 11px; color: var(--warn); margin-top: 3px; }
.pt-ended { text-align: center; padding: 20px; color: var(--text-2); }
.pt-controls { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 8px; }
.pt-side { border-left: 1px solid var(--border); background: var(--bg-1); display: flex; flex-direction: column; min-height: 0; }
.pt-side .tabs { display: flex; border-bottom: 1px solid var(--border); }
.pt-side .tab { flex: 1; height: 34px; font-size: 12px; color: var(--text-2); }
.pt-side .tab.is-active { color: var(--text-1); box-shadow: inset 0 -2px 0 var(--accent); }
.pt-side .tab-body { flex: 1; overflow: auto; padding: 10px; }
.pt-vars-group { margin-bottom: 12px; }
.pt-vars-group h4 { font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.var-line { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; font-size: 12px; }
.var-line .vname { flex: 1; color: var(--text-2); }
.var-line .vval { font-family: var(--font-mono); font-weight: 600; }
.var-line.changed { background: var(--accent-weak); }
.var-line.changed .vval { color: var(--accent-2); }
.log-line { font-size: 11px; font-family: var(--font-mono); padding: 2px 4px; color: var(--text-2); border-left: 2px solid transparent; }
.log-line.effect { color: var(--ok); border-color: var(--ok); }
.log-line.warn { color: var(--warn); border-color: var(--warn); }
.log-line.info { color: var(--text-3); }

/* ---------- 畫布疊層 ---------- */
.ctx-menu { position: absolute; z-index: 30; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: 4px; min-width: 180px; pointer-events: auto; }
.ctx-menu .mi { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 4px; font-size: 13px; cursor: pointer; }
.ctx-menu .mi:hover { background: var(--accent-weak); color: var(--accent-2); }
.ctx-menu .mi.danger:hover { background: var(--danger-weak); color: var(--danger); }
.ctx-menu .sep { height: 1px; background: var(--border); margin: 4px 0; }
.canvas-hint { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); text-align: center; color: var(--text-3); pointer-events: none; }
.canvas-hint h3 { font-size: 16px; color: var(--text-2); margin-bottom: 6px; }
.zoom-badge { position: absolute; right: 12px; bottom: 12px; pointer-events: auto; display: flex; gap: 4px; align-items: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }

/* ---------- 空狀態 / Toast ---------- */
.empty { text-align: center; color: var(--text-3); padding: 24px 12px; font-size: 13px; }
#toast-host { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: 10px 14px; font-size: 13px; max-width: 420px; animation: toast-in .16s ease; }
.toast--error { border-left-color: var(--danger); }
.toast--ok { border-left-color: var(--ok); }
.toast--warn { border-left-color: var(--warn); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* 各型別色（供 chip / dot / tree） */
.t-start    { --tc: var(--node-start); }
.t-dialogue { --tc: var(--node-dialogue); }
.t-choice   { --tc: var(--node-choice); }
.t-branch   { --tc: var(--node-branch); }
.t-action   { --tc: var(--node-action); }
.t-jump     { --tc: var(--node-jump); }
.t-end      { --tc: var(--node-end); }
.chip--type.t-start, .chip--type.t-dialogue, .chip--type.t-choice,
.chip--type.t-branch, .chip--type.t-action, .chip--type.t-jump, .chip--type.t-end { background: var(--tc); }
.tag-dot.t-start, .tag-dot.t-dialogue, .tag-dot.t-choice,
.tag-dot.t-branch, .tag-dot.t-action, .tag-dot.t-jump, .tag-dot.t-end { background: var(--tc); }