/* 動手玩：解一次 merge 衝突（conflict）— 見 src/js/widgets/conflict.js、docs/WIDGETS.md 第 9 節
 * class 一律前綴 .w-conflict；顏色／圓角用 base.css 的 CSS 變數；尺寸用 em（講師模式／流體字級會整體放大）。
 * 終端機外框沿用 app.css 的 .term-box／.term（LP.terminal）。
 * 版型切換：JS 依「元件寬 ÷ 字級」在根元素加 .w-conflict-wide（≥44em）／.w-conflict-narrow（<30em），不用 container query。
 * 程式碼長行只在編輯器區塊內左右捲動；衝突按鈕列用 sticky＋--w-conflict-vis（可見寬度）固定在看得到的範圍。 */

.w-conflict { min-width: 0; }
.w-conflict-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1em; min-width: 0; }
.w-conflict-sec { min-width: 0; }
.w-conflict-h { margin: 0 0 .55em; color: var(--c-text); font-size: .95em; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------- 標題＋進度 ---------- */
.w-conflict-head { display: flex; align-items: center; gap: .65em; min-width: 0; }
.w-conflict-head-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em;
  border-radius: .7em; background: var(--c-orange-soft); font-size: 1.2em; line-height: 1;
}
.w-conflict-head-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.4; }
.w-conflict-head-text strong { font-size: 1.04em; overflow-wrap: anywhere; }
.w-conflict-head-text small { color: var(--c-muted); font-size: .8em; font-weight: 700; overflow-wrap: anywhere; }
.w-conflict-tag {
  flex: none; align-self: flex-start; padding: .05em .55em; border-radius: .45em;
  background: var(--c-orange-soft); color: var(--c-orange-dark); font-size: .8em; font-weight: 800;
}

.w-conflict-progress { display: grid; gap: .45em; min-width: 0; }
.w-conflict-steps { display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; list-style: none; }
.w-conflict-step {
  display: inline-flex; align-items: center; gap: .4em; padding: .2em .8em .2em .3em;
  border: .125em solid var(--c-line); border-radius: 999px; background: var(--c-surface-2);
  color: var(--c-muted); font-size: .82em; font-weight: 800; white-space: nowrap;
}
.w-conflict-step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 1.65em; height: 1.65em;
  border-radius: 50%; background: var(--c-line-strong); color: #fff; font-size: .85em; line-height: 1;
}
.w-conflict-step.is-current { border-color: var(--c-blue); background: var(--c-blue-soft); color: var(--c-blue-dark); }
.w-conflict-step.is-current .w-conflict-step-n { background: var(--c-blue); }
.w-conflict-step.is-done { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-dark); }
.w-conflict-step.is-done .w-conflict-step-n { background: var(--c-primary); }
.w-conflict-status { margin: 0; color: var(--c-muted); font-size: .85em; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- 第 1 段：終端機＋白話說明 ---------- */
.w-conflict .term-box { margin: 0; }
.w-conflict .term { font-size: .8em; }
/* 手機寬度：像真的終端機一樣把長行折到下一行（不用左右捲才看得到檔名） */
.w-conflict-narrow .term { white-space: pre-wrap; overflow-wrap: anywhere; }
/* 關鍵行：底色往左右多鋪一點（box-shadow 不影響排版，也不會撐出捲軸） */
.w-conflict .term-line.w-conflict-hot {
  width: max-content; min-width: 100%; border-radius: .25em;
  background: rgba(255, 133, 133, .16); box-shadow: -.45em 0 0 rgba(255, 133, 133, .16), .45em 0 0 rgba(255, 133, 133, .16);
}
.w-conflict-narrow .term-line.w-conflict-hot { width: auto; }
.w-conflict .term-line.w-conflict-hot-warn {
  background: rgba(255, 197, 61, .2); box-shadow: -.45em 0 0 rgba(255, 197, 61, .2), .45em 0 0 rgba(255, 197, 61, .2);
  color: #ffd479; font-weight: 700;
}
.w-conflict-gloss { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45em; margin: .6em 0 0; padding: 0; list-style: none; }
.w-conflict-wide .w-conflict-gloss { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-conflict-gloss li {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2em; min-width: 0; padding: .5em .75em;
  border: .125em solid var(--c-line); border-radius: .75em; background: var(--c-surface); font-size: .85em; line-height: 1.45;
}
.w-conflict-gloss code {
  max-width: 100%; border-color: transparent; background: var(--c-code-bg); color: #ff9b9b; font-weight: 700; overflow-wrap: anywhere;
}
.w-conflict-gloss li:nth-child(3) code { color: #ffd479; }
.w-conflict-gloss span { overflow-wrap: anywhere; }
.w-conflict-plain {
  display: flex; gap: .55em; margin: .6em 0 0; padding: .65em .9em; border: .125em solid #f3dc9a; border-radius: .875em;
  background: var(--c-gold-soft); line-height: 1.55; overflow-wrap: anywhere;
}
.w-conflict-plain-icon { flex: none; }

/* ---------- 第 2 段：編輯器（類 VS Code 深色主題） ---------- */
.w-conflict-legend { display: flex; flex-wrap: wrap; gap: .25em 1em; margin: 0 0 .55em; color: var(--c-muted); font-size: .8em; font-weight: 700; line-height: 1.5; }
.w-conflict-legend span { display: flex; align-items: flex-start; gap: .35em; min-width: 0; overflow-wrap: anywhere; }
.w-conflict-legend i { flex: none; display: block; width: .9em; height: .9em; margin-top: .3em; border-radius: .2em; }
.w-conflict-legend .is-cur i { background: var(--c-primary); }
.w-conflict-legend .is-inc i { background: var(--c-blue); }

.w-conflict-editor {
  min-width: 0; overflow: hidden; border: .125em solid #151922; border-radius: var(--radius);
  background: var(--c-code-bg); color: var(--c-code-text); box-shadow: 0 .2em 0 #c9cdd4;
}
.w-conflict-tabbar { display: flex; align-items: stretch; justify-content: space-between; min-width: 0; background: #151922; font-size: .8em; }
.w-conflict-tab {
  display: flex; align-items: center; gap: .5em; min-width: 0; padding: .5em .95em;
  border-top: .16em solid var(--c-blue); background: var(--c-code-bg); color: #e6e9ef; font-family: var(--mono);
}
.w-conflict-tab-icon { flex: none; color: #e8a33d; font-size: .85em; font-weight: 800; }
.w-conflict-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-conflict-tab-badge { flex: none; padding: 0 .5em; border-radius: .4em; font-family: var(--font); font-size: .88em; font-weight: 800; }
.w-conflict-tab-badge.is-bad { background: rgba(239, 68, 68, .22); color: #ffa3a3; }
.w-conflict-tab-badge.is-ok { background: rgba(34, 181, 115, .24); color: #86e4b4; }
.w-conflict-tabbar-meta {
  display: flex; flex: 0 1 auto; align-items: center; min-width: 0; padding: 0 .95em;
  overflow: hidden; color: #8a94a6; font-weight: 700; text-overflow: ellipsis; white-space: nowrap;
}
.w-conflict-narrow .w-conflict-tabbar-meta { display: none; }

.w-conflict-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.w-conflict-scroll:focus-visible { outline-offset: -.19rem; }
.w-conflict-lines { width: max-content; min-width: 100%; padding: .55em 0; font-family: var(--mono); font-size: .86em; line-height: 1.75; }
.w-conflict-narrow .w-conflict-lines { font-size: .8em; }
.w-conflict-line { display: flex; min-width: 100%; }
.w-conflict-ln {
  position: sticky; left: 0; z-index: 1; flex: none; width: 3.4em; padding: 0 .9em 0 .3em;
  background: var(--c-code-bg); color: #6f7a8c; text-align: right; user-select: none;
}
.w-conflict-narrow .w-conflict-ln { width: 2.8em; padding-right: .7em; }
.w-conflict-code { flex: 1 0 auto; padding: 0 1.2em 0 .6em; white-space: pre; }
.w-conflict-deco { color: #9aa4b5; font-family: var(--font); font-size: .92em; }
.w-conflict-tok-tag { color: #7cc4ff; }
.w-conflict-tok-str { color: #f1b37a; }
.w-conflict-tok-com { color: #8d98ab; font-style: italic; }

/* 衝突區塊：目前＝綠底、傳入＝藍底；標記行（<<<<<<< ／ ======= ／ >>>>>>>）淡色底＋淡色字 */
.w-conflict-k-cur .w-conflict-code { background: rgba(34, 181, 115, .26); }
.w-conflict-k-inc .w-conflict-code { background: rgba(31, 157, 224, .26); }
.w-conflict-k-mk-cur .w-conflict-code { background: rgba(34, 181, 115, .12); }
.w-conflict-k-mk-inc .w-conflict-code { background: rgba(31, 157, 224, .12); }
.w-conflict-k-mk-sep .w-conflict-code { background: rgba(255, 255, 255, .05); }
.w-conflict-mk .w-conflict-code { color: rgba(230, 233, 239, .6); }
.w-conflict-k-cur .w-conflict-ln, .w-conflict-k-mk-cur .w-conflict-ln, .w-conflict-line.is-from-cur .w-conflict-ln { box-shadow: inset -.2em 0 0 var(--c-primary); }
.w-conflict-k-inc .w-conflict-ln, .w-conflict-k-mk-inc .w-conflict-ln, .w-conflict-line.is-from-inc .w-conflict-ln { box-shadow: inset -.2em 0 0 var(--c-blue); }
.w-conflict-k-mk-sep .w-conflict-ln { box-shadow: inset -.2em 0 0 #5b6475; }

/* 選完：被選的行短暫高亮（減少動態時只留左邊的色條） */
.w-conflict-line.is-new .w-conflict-code { animation: w-conflict-flash 2s var(--ease) both; }
@keyframes w-conflict-flash {
  0%, 35% { background-color: rgba(255, 197, 61, .36); }
  100% { background-color: rgba(255, 197, 61, 0); }
}

/* 做錯（留著標記就 add／commit）：標記行閃紅 */
.w-conflict-line.is-alert .w-conflict-code { background: rgba(239, 68, 68, .5); color: #fff; }
.w-conflict-editor.is-alert { border-color: var(--c-red); animation: w-conflict-pulse .9s ease-out 1; }
@keyframes w-conflict-pulse {
  0% { box-shadow: 0 .2em 0 #c9cdd4, 0 0 0 0 rgba(239, 68, 68, .55); }
  100% { box-shadow: 0 .2em 0 #c9cdd4, 0 0 0 .6em rgba(239, 68, 68, 0); }
}

/* 衝突區塊上方那排按鈕（VS Code 的 CodeLens 位置） */
.w-conflict-lens {
  position: sticky; left: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .4em .5em;
  width: var(--w-conflict-vis, 100%); padding: .4em .8em .45em 4em; font-family: var(--font); font-size: 1.1em; line-height: 1.3;
}
.w-conflict-narrow .w-conflict-lens { padding-left: .7em; }
.w-conflict-lens-q { color: #9aa4b5; font-size: .82em; font-weight: 800; }
.w-conflict-narrow .w-conflict-lens-q { flex-basis: 100%; }
.w-conflict-pick {
  appearance: none; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45em; min-width: 0; min-height: 2.5em;
  padding: .35em .8em; border: .1em solid rgba(255, 255, 255, .25); border-radius: .6em; background: rgba(255, 255, 255, .06);
  color: #eef1f6; font-size: .9em; font-weight: 800; text-align: left; cursor: pointer; transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.w-conflict-narrow .w-conflict-pick { flex: 1 1 100%; }
.w-conflict-pick-en { color: #a9b2c2; font-family: var(--mono); font-size: .82em; font-weight: 600; }
.w-conflict-pick-current { border-color: rgba(34, 181, 115, .8); }
.w-conflict-pick-current:hover { background: rgba(34, 181, 115, .24); }
.w-conflict-pick-incoming { border-color: rgba(31, 157, 224, .85); }
.w-conflict-pick-incoming:hover { background: rgba(31, 157, 224, .24); }
.w-conflict-pick-both { border-color: rgba(139, 92, 246, .85); }
.w-conflict-pick-both:hover { background: rgba(139, 92, 246, .26); }
.w-conflict-pick:focus-visible { outline: .1875rem solid #7cc4ff; outline-offset: .1em; }

.w-conflict-statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: .3em 1em; min-width: 0; padding: .25em .9em;
  background: var(--c-blue-dark); color: #fff; font-size: .75em; font-weight: 700; line-height: 1.6; flex-wrap: wrap;
}
.w-conflict-statusbar.is-done { background: var(--c-primary-dark); }
.w-conflict-sb-branch { display: inline-flex; align-items: center; gap: .35em; min-width: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.w-conflict-sb-icon { display: inline-flex; flex: none; width: 1.1em; height: 1.1em; }
.w-conflict-sb-icon svg { width: 100%; height: 100%; }
.w-conflict-sb-state { min-width: 0; overflow-wrap: anywhere; }

/* ---------- 回饋框 ---------- */
.w-conflict-fbslot:empty { display: none; }
.w-conflict-fb {
  display: flex; gap: .6em; min-width: 0; margin-top: .65em; padding: .7em .9em;
  border: .125em solid var(--c-line); border-radius: .875em; background: var(--c-surface); line-height: 1.55;
}
.w-conflict-fb:focus { outline: none; }
.w-conflict-fb:focus-visible { outline: .1875rem solid var(--c-blue); outline-offset: .125rem; }
.w-conflict-fb.is-ok { border-color: #9fdcbc; background: var(--c-primary-soft); }
.w-conflict-fb.is-warn { border-color: #ffc98a; background: var(--c-orange-soft); }
.w-conflict-fb.is-err { border-color: #f5a3a3; background: var(--c-red-soft); }
.w-conflict-fb.is-info { border-color: #a9d8f3; background: var(--c-blue-soft); }
.w-conflict-fb-icon { flex: none; font-size: 1.15em; line-height: 1.35; }
.w-conflict-fb-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.w-conflict-fb-title { display: block; }
.w-conflict-fb-md p, .w-conflict-done-md p { margin: .25em 0 0; }
.w-conflict-fb-note { margin-top: .35em; color: var(--c-muted); font-size: .88em; }
.w-conflict-fb-note p { margin: 0; }
.w-conflict-fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .8em; margin-top: .6em; }
.w-conflict-fb-next { color: var(--c-muted); font-size: .88em; font-weight: 700; }
.w-conflict-fb code, .w-conflict-done code { overflow-wrap: anywhere; }

/* ---------- 第 3 段：指令按鈕＋終端機輸出 ---------- */
.w-conflict-cmds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); gap: .55em; }
.w-conflict-cmd {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .15em;
  min-width: 0; min-height: 2.75rem; padding: .5em .85em; border: .125em solid #151922; border-radius: .875em;
  background: var(--c-code-bg); color: var(--c-code-text); text-align: left; cursor: pointer;
  box-shadow: 0 .25em 0 #0d1017; transition: transform .08s, box-shadow .08s, filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.w-conflict-cmd:hover { filter: brightness(1.18); }
.w-conflict-cmd:active { transform: translateY(.25em); box-shadow: 0 0 0 #0d1017; }
.w-conflict-cmd-code {
  max-width: 100%; padding: 0; border: 0; background: none; color: #8be9a8; font-size: .9em; font-weight: 700;
  white-space: normal; overflow-wrap: anywhere;
}
.w-conflict-cmd-zh { color: #b4bccb; font-size: .8em; font-weight: 700; }
.w-conflict-abort .w-conflict-cmd-code { color: #ffb4b4; }
.w-conflict-cmd.is-next { border-color: var(--c-blue); box-shadow: 0 .25em 0 var(--c-blue-dark), 0 0 0 .22em rgba(31, 157, 224, .35); }
.w-conflict-cmd.is-ran .w-conflict-cmd-zh::after { content: '　' attr(data-ran); color: #8be9a8; }   /* data-ran＝L('✓ 已執行')，跟著語系 */
.w-conflict-cmd[disabled] { cursor: not-allowed; filter: none; opacity: .5; transform: none; box-shadow: 0 .25em 0 #0d1017; }

.w-conflict .w-conflict-logbox { margin-top: .65em; }
.w-conflict .w-conflict-log { max-height: 17em; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.w-conflict .term-line.w-conflict-dim { color: #8d98ab; }
.w-conflict .term-line.w-conflict-okline { color: #8be9a8; font-weight: 700; }

/* ---------- 完成 ---------- */
.w-conflict-doneslot:empty { display: none; }
.w-conflict-done {
  display: flex; gap: .8em; min-width: 0; margin-top: .8em; padding: .9em 1em;
  border: .15em solid var(--c-gold); border-radius: var(--radius); background: var(--c-gold-soft); line-height: 1.55;
}
.w-conflict-done:focus { outline: none; }
.w-conflict-done:focus-visible { outline: .1875rem solid var(--c-blue); outline-offset: .125rem; }
.w-conflict-done.is-meh { border-color: #ffc98a; background: var(--c-orange-soft); }
.w-conflict-done-icon { flex: none; width: 2.6em; height: 2.6em; }
.w-conflict-done-emoji { flex: none; font-size: 1.8em; line-height: 1.2; }
.w-conflict-done-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.w-conflict-done-title { display: block; font-size: 1.08em; }
.w-conflict-done-actions { margin-top: .65em; }
.w-conflict-done.is-pop { animation: w-conflict-pop .45s var(--ease) both; }
@keyframes w-conflict-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .w-conflict *, .w-conflict *::before, .w-conflict *::after { animation: none !important; transition: none !important; }
}