/* ==========================================================================
   Diff viewer (dv-), Commit tool window (cm-), Git log tool window (gl-)
   and the three-pane merge resolver (mg-).
   Every colour comes from tokens.css so both themes follow for free.
   ========================================================================== */

/* ============================ diff viewer ================================ */

.dv {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  background: var(--bg-editor);
  outline: none;
  position: relative;
}

/* ---------------------------------------------------------------- toolbar */
.dv-toolbar {
  height: 30px;
  min-height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  background: var(--bg-toolbar);
  border-bottom: 1px solid var(--bd);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  color: var(--fg-dim);
}
.dv-btn {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-s);
  color: var(--fg-dim);
}
.dv-btn:hover { background: var(--bg-hover); color: var(--fg); }
.dv-btn svg { width: 14px; height: 14px; opacity: var(--icon-op); }
.dv-count { padding: 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dv-sep { width: 1px; height: 15px; background: var(--bd-soft); margin: 0 4px; flex: none; }
.dv-spacer { flex: 1; min-width: 6px; }

.dv-seg { display: flex; border: 1px solid var(--bd-soft); border-radius: var(--radius-m); overflow: hidden; flex: none; }
.dv-segbtn { padding: 2px 8px; color: var(--fg-dim); white-space: nowrap; }
.dv-segbtn:hover { background: var(--bg-hover); color: var(--fg); }
.dv-segbtn.on { background: var(--bg-pressed); color: var(--fg); }

.dv-tgl {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 4px; border-radius: var(--radius-m);
  color: var(--fg-muted); white-space: nowrap; flex: none;
}
.dv-tgl:hover { background: var(--bg-hover); color: var(--fg); }
.dv-tgl.on { color: var(--fg); }
.dv-tick { width: 13px; height: 13px; display: grid; place-items: center; opacity: 0; color: var(--accent); }
.dv-tick svg { width: 12px; height: 12px; }
.dv-tgl.on .dv-tick { opacity: 1; }

.dv-stats { padding: 0 4px; font-variant-numeric: tabular-nums; }
.dv-stats .add, .gl-dstat .add, .gl-dnums .add { color: var(--vcs-added); font-weight: 600; }
.dv-stats .del, .gl-dstat .del, .gl-dnums .del { color: var(--vcs-deleted); font-weight: 600; }

/* ------------------------------------------------------------------ panes */
.dv-body { flex: 1; display: flex; min-height: 0; min-width: 0; position: relative; }
.dv-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dv-pane { flex: 1 1 0; }
.dv-head {
  height: 24px; min-height: 24px; flex: none;
  display: flex; align-items: center; padding: 0 8px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bd-soft);
  font-family: var(--font-ui); font-size: var(--fs-ui-s);
  color: var(--fg-dim); overflow: hidden; white-space: nowrap;
}
.dv-head-title { overflow: hidden; text-overflow: ellipsis; }
.dv-pane-main { flex: 1; display: flex; min-height: 0; position: relative; }

.dv-gutter-vp {
  flex: none; width: 52px; position: relative; overflow: hidden;
  background: var(--bg-gutter); border-right: 1px solid var(--bd-soft);
  user-select: none;
}
.dv-gutter { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }
.dv-scroll { flex: 1; min-width: 0; overflow: auto; position: relative; }
.dv-sizer { position: relative; min-height: 100%; }

.dv-row {
  position: absolute; left: 0; right: 0;
  height: var(--lh-editor); line-height: var(--lh-editor);
  padding-left: 6px;
  white-space: pre; tab-size: 4; -moz-tab-size: 4;
  font-family: var(--font-mono); font-size: var(--fs-editor);
  color: var(--sy-text);
  contain: layout style;
}
.dv-row.add { background: var(--vcs-added-bg); }
.dv-row.del { background: var(--vcs-deleted-bg); }
.dv-row.mod { background: var(--vcs-modified-bg); }
.dv-row.filler {
  background: repeating-linear-gradient(135deg,
    var(--bd-soft) 0 1px, transparent 1px 5px);
  opacity: 0.75;
}
.dv-w { background: var(--vcs-word-add); border-radius: 2px; }
.dv-pane-a .dv-w, .dv-row.del .dv-w { background: var(--vcs-word-del); }
.dv-wcaret {
  display: inline-block; width: 2px; height: calc(var(--lh-editor) - 5px);
  vertical-align: text-bottom; background: var(--vcs-modified);
}

.dv-foldrow {
  background: var(--bg-panel);
  border-top: 1px solid var(--bd-soft); border-bottom: 1px solid var(--bd-soft);
  display: flex; align-items: center; padding-left: 6px;
}
.dv-fold-chip {
  font-family: var(--font-ui); font-size: var(--fs-ui-s);
  color: var(--fg-muted); background: var(--ed-fold-bg);
  border-radius: 8px; padding: 0 8px; line-height: 15px;
}
.dv-foldrow:hover .dv-fold-chip { color: var(--fg); background: var(--bg-pressed); }

/* gutters -------------------------------------------------------------- */
.dv-gt {
  position: absolute; left: 0; right: 0;
  height: var(--lh-editor); line-height: var(--lh-editor);
  display: flex; align-items: center; justify-content: flex-end;
  color: var(--ed-linenum); font-family: var(--font-mono);
  font-size: calc(var(--fs-editor) - 1px); font-variant-numeric: tabular-nums;
}
.dv-num { padding-right: 6px; min-width: 26px; text-align: right; }
.dv-bar { width: 3px; align-self: stretch; flex: none; background: transparent; }
.dv-gt.add { background: var(--vcs-added-bg); }
.dv-gt.del { background: var(--vcs-deleted-bg); }
.dv-gt.mod { background: var(--vcs-modified-bg); }
.dv-gt.add .dv-bar { background: var(--vcs-added); }
.dv-gt.del .dv-bar { background: var(--vcs-deleted); }
.dv-gt.mod .dv-bar { background: var(--vcs-modified); }
.dv-gt.filler { opacity: 0.4; }
.dv-gt-fold { justify-content: center; color: var(--fg-muted); }

/* connector ------------------------------------------------------------- */
.dv-gap { flex: none; width: 46px; background: var(--bg-editor); border-left: 1px solid var(--bd-soft); border-right: 1px solid var(--bd-soft); }
.dv-conn { flex: 1; position: relative; overflow: hidden; }
.dv-conn-svg { position: absolute; inset: 0; display: block; }
.dv-band { cursor: default; }
.dv-band.add { fill: var(--vcs-added-bg); }
.dv-band.del { fill: var(--vcs-deleted-bg); }
.dv-band.mod { fill: var(--vcs-modified-bg); }
.dv-band:hover { filter: brightness(1.35); }
.dv-edge { fill: none; stroke-width: 1; }
.dv-edge.add { stroke: var(--vcs-added); }
.dv-edge.del { stroke: var(--vcs-deleted); }
.dv-edge.mod { stroke: var(--vcs-modified); }

.dv-chevrons { position: absolute; inset: 0; pointer-events: none; }
.dv-chev {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 20px; height: 16px; padding: 0; margin: 0;
  display: grid; place-items: center; pointer-events: auto;
  background: var(--bg-panel); color: var(--fg-dim);
  border: 1px solid var(--bd-soft); border-radius: var(--radius-s);
}
.dv-chev:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.dv-chev svg { width: 12px; height: 12px; }

/* marker bar ------------------------------------------------------------ */
.dv-markercol { flex: none; width: var(--w-marker); background: var(--stripe-bg); border-left: 1px solid var(--bd-soft); }
.dv-mk-bar { flex: 1; position: relative; overflow: hidden; }
.dv-mk-track { position: absolute; inset: 0; }
.dv-mk { position: absolute; left: 2px; right: 5px; min-height: 2px; border-radius: 1px; }
.dv-mk.add { background: var(--vcs-added); }
.dv-mk.del { background: var(--vcs-deleted); }
.dv-mk.mod { background: var(--vcs-modified); }
.dv-mk:hover { filter: brightness(1.4); }
.dv-mk.active { left: 0; right: 3px; box-shadow: 0 0 0 1px var(--fg-dim); }
.dv-mk-thumb {
  position: absolute; left: 1px; right: 1px; border-radius: 4px;
  background: var(--scroll-thumb); opacity: 0.55; min-height: 24px;
}
.dv-mk-bar:hover .dv-mk-thumb { opacity: 0.85; }

/* modes and empty state --------------------------------------------------- */
.dv-pane-u { display: none; }
.dv.unified .dv-pane-a, .dv.unified .dv-pane-b, .dv.unified .dv-gap { display: none; }
.dv.unified .dv-pane-u { display: flex; }
.dv.unified .dv-gutter-vp { width: 76px; }
.dv.unified .dv-num { min-width: 30px; }

.dv-empty {
  position: absolute; inset: 24px 0 0 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: var(--bg-editor); color: var(--fg-muted);
  font-family: var(--font-ui); z-index: 3;
}
.dv-empty svg { width: 26px; height: 26px; opacity: 0.4; }
.dv.identical .dv-empty { display: flex; }
.dv.identical .dv-markercol, .dv.identical .dv-gap { visibility: hidden; }

/* the dialog wrapper ------------------------------------------------------ */
.dialog.dv-dialog, .dialog.mg-dialog { display: flex; flex-direction: column; }
.dv-dialog .dlg-body, .mg-dialog .dlg-body {
  flex: 1; min-height: 0; padding: 0; display: flex; overflow: hidden;
}
.dv-dialog .dlg-body > .dv, .mg-dialog .dlg-body > .mg { flex: 1; min-width: 0; }

/* ============================ merge resolver ============================= */

.mg { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; background: var(--bg-editor); }
.mg-toolbar {
  height: 30px; min-height: 30px; flex: none; display: flex; align-items: center; gap: 4px;
  padding: 0 8px; background: var(--bg-toolbar); border-bottom: 1px solid var(--bd);
  font-family: var(--font-ui); font-size: var(--fs-ui);
}
.mg-count { color: var(--vcs-conflict); font-weight: 600; }
.mg-count.done { color: var(--vcs-added); }
.mg-body { flex: 1; display: flex; min-height: 0; }
.mg-col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--bd); position: relative; }
.mg-col:last-child { border-right: none; }
.mg-head {
  height: 24px; min-height: 24px; display: flex; align-items: center; padding: 0 8px;
  background: var(--bg-panel); border-bottom: 1px solid var(--bd-soft);
  font-family: var(--font-ui); font-size: var(--fs-ui-s); color: var(--fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.mg-scroll { flex: 1; overflow: auto; position: relative; }
.mg-sizer { position: relative; min-height: 100%; }
.mg-row { padding-left: 0; }
.mg-ln {
  display: inline-block; width: 38px; padding-right: 8px; text-align: right;
  color: var(--ed-linenum); background: var(--bg-gutter);
  border-right: 1px solid var(--bd-soft); margin-right: 6px;
}
.mg-row.mg-theirs { background: var(--vcs-modified-bg); }
.mg-row.mg-ours { background: var(--vcs-added-bg); }
.mg-row.mg-marker { background: var(--bg-hover); color: var(--vcs-conflict); font-weight: 600; }
.mg-acts {
  position: absolute; top: 24px; right: 0; bottom: 0; width: 90px;
  overflow: hidden; pointer-events: none; z-index: 2;
}
.mg-actions {
  position: absolute; right: 10px; display: flex; gap: 3px;
  height: var(--lh-editor); align-items: center; pointer-events: auto;
  padding: 0 3px; border-radius: var(--radius-s);
  background: var(--bg-panel); box-shadow: var(--shadow-tooltip);
}
.mg-act {
  width: 20px; height: 16px; padding: 0; line-height: 1;
  background: var(--bg-panel); color: var(--fg-dim);
  border: 1px solid var(--bd-soft); border-radius: var(--radius-s);
  font-family: var(--font-ui); font-size: 12px;
}
.mg-act:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* ========================== commit tool window =========================== */

.cm { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tw-body.cm { overflow: hidden; }
.cm-tree { flex: 1; min-height: 60px; overflow: auto; }
.cm.empty .cm-tree { display: flex; }
.cm-preview {
  flex: none; height: 38%; min-height: 120px;
  border-top: 1px solid var(--bd); display: flex; min-height: 0;
}
.cm-preview.hidden { display: none; }
.cm-preview .dv-toolbar { height: 26px; min-height: 26px; }
.cm-preview .dv-tgl span, .cm-preview .dv-stats { display: none; }

.cm-msgbox { flex: none; border-top: 1px solid var(--bd); padding: 4px 6px 6px; }
.cm-msghead {
  display: flex; align-items: center; gap: 6px; height: 20px;
  font-size: var(--fs-ui-s); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.cm-counter { text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cm-counter.over { color: var(--sq-warning); }
.cm-histbtn { width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--radius-s); color: var(--fg-dim); }
.cm-histbtn:hover { background: var(--bg-hover); color: var(--fg); }
.cm-histbtn svg { width: 14px; height: 14px; }
.cm-msg {
  width: 100%; resize: vertical; min-height: 54px;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--bd); border-radius: var(--radius-m);
  padding: 5px 7px; font-family: var(--font-mono); font-size: var(--fs-editor);
  line-height: 1.45; user-select: text;
}
.cm-msg:focus { border-color: var(--bd-focus); }
.cm-msg::placeholder { color: var(--fg-muted); }

.cm-options {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px;
  padding: 4px 8px 6px; color: var(--fg-dim);
}
.cm-opt { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.cm-opt input { accent-color: var(--accent); margin: 0; }

.cm-footer { flex: none; display: flex; gap: 6px; padding: 0 8px 8px; }
.cm-btn {
  flex: 1; height: 26px; padding: 0 10px;
  border: 1px solid var(--bd-strong); border-radius: var(--radius-m);
  background: var(--bg-panel); color: var(--fg); white-space: nowrap;
}
.cm-btn:hover:not(:disabled) { background: var(--bg-hover); }
.cm-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.cm-btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.cm-btn:disabled { opacity: 0.45; }

/* rows ------------------------------------------------------------------- */
.cm-check {
  width: 13px; height: 13px; flex: none; margin-right: 4px;
  display: grid; place-items: center;
  border: 1px solid var(--bd-strong); border-radius: 2px;
  background: var(--bg-input); color: var(--accent-fg);
}
.cm-check svg { width: 11px; height: 11px; }
.cm-check.on, .cm-check.mixed { background: var(--accent); border-color: var(--accent); }
.cm-check.off svg { display: none; }
.tree-row.cm-cl .tree-label { font-weight: 600; }
.tree-row.cm-dir .tree-label { color: var(--fg-dim); }
.tree-row.cm-file .tree-badge { font-family: var(--font-mono); font-weight: 700; }
.tree-row.cm-st-modified .tree-badge { color: var(--vcs-modified); }
.tree-row.cm-st-added .tree-badge, .tree-row.cm-st-untracked .tree-badge { color: var(--vcs-added); }
.tree-row.cm-st-deleted .tree-badge { color: var(--vcs-deleted); }
.tree-row.cm-st-conflict .tree-badge, .tree-row.cm-st-conflict .tree-label { color: var(--vcs-conflict); }
.cm-resolve {
  margin-left: 8px; padding: 0 6px; border-radius: 8px;
  background: var(--vcs-conflict); color: var(--fg-inverse);
  font-size: var(--fs-ui-s); white-space: nowrap;
}
.cm-resolve:hover { filter: brightness(1.15); }

.cm-form { display: flex; flex-direction: column; gap: 6px; }
.cm-form input {
  height: 26px; padding: 0 7px; background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--bd); border-radius: var(--radius-m);
}
.cm-confirm p { margin: 0 0 8px; }
.cm-confirm .mono { font-family: var(--font-mono); font-size: var(--fs-ui-s); color: var(--fg-dim); }

/* ========================== git log tool window ========================== */

.gl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tw-body.gl { overflow: hidden; }
.gl-tabs { flex: none; }
.gl-summary { color: var(--fg-muted); font-size: var(--fs-ui-s); padding-right: 6px; }
.gl-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gl-pane.hidden { display: none; }

.gl-filters {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-bottom: 1px solid var(--bd-soft);
}
.gl-flabel { display: grid; place-items: center; color: var(--fg-muted); }
.gl-flabel svg { width: 14px; height: 14px; }
.gl-sel, .gl-search {
  height: 22px; background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--bd); border-radius: var(--radius-m);
  padding: 0 5px; max-width: 220px; min-width: 90px;
}
.gl-search { flex: 1; min-width: 120px; user-select: text; }
.gl-sel:focus, .gl-search:focus { border-color: var(--bd-focus); }

.gl-split { flex: 1; display: flex; min-height: 0; }
.gl-table { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.gl-thead {
  flex: none; display: flex; align-items: center; height: 21px;
  padding-right: 8px; border-bottom: 1px solid var(--bd-soft);
  color: var(--fg-muted); font-size: var(--fs-ui-s);
}
.gl-list { flex: 1; overflow: auto; outline: none; }
.gl-list .list-row { display: flex; align-items: center; height: 22px; padding-right: 8px; }
.gl-cgraph { width: 26px; flex: none; display: flex; align-items: center; justify-content: center; }
.gl-csubj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-cauthor { width: 150px; flex: none; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-cdate { width: 74px; flex: none; color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
.gl-graph line { stroke: var(--bd-strong); stroke-width: 1.4; }
.gl-graph circle { fill: var(--accent); }
.gl-ref {
  display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 7px;
  background: var(--bg-pressed); color: var(--fg-dim);
  font-size: var(--fs-ui-s); vertical-align: 1px;
}
.gl-ref.head { background: var(--accent-soft); color: var(--fg); }
.gl-hit { background: var(--ed-search); color: inherit; border-radius: 2px; }

/* details ---------------------------------------------------------------- */
.gl-details {
  width: 42%; min-width: 240px; flex: none; overflow: auto;
  border-left: 1px solid var(--bd); padding: 8px 10px;
  background: var(--bg-panel); user-select: text;
}
.gl-dempty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--fg-muted); user-select: none;
}
.gl-dempty svg { width: 24px; height: 24px; opacity: 0.35; }
.gl-dsubject { font-weight: 600; margin-bottom: 5px; }
.gl-dbody { white-space: pre-wrap; color: var(--fg-dim); margin-bottom: 8px; }
.gl-dmeta { display: grid; gap: 2px; margin-bottom: 10px; }
.gl-dmeta .k { display: inline-block; width: 54px; color: var(--fg-muted); }
.gl-dhash { cursor: default; }
.gl-dhash:hover { color: var(--accent); }
.gl-dfiles-head {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-muted); font-size: var(--fs-ui-s);
  border-top: 1px solid var(--bd-soft); padding-top: 5px; margin-bottom: 3px;
}
.gl-dstat { margin-left: auto; }
.gl-dfile { display: flex; align-items: center; gap: 5px; height: 21px; padding: 0 3px; border-radius: var(--radius-s); }
.gl-dfile:hover { background: var(--bg-hover); }
.gl-dicon { width: 15px; height: 15px; flex: none; }
.gl-dicon svg { width: 15px; height: 15px; }
.gl-dname { white-space: nowrap; }
.gl-st-A .gl-dname { color: var(--vcs-added); }
.gl-st-D .gl-dname { color: var(--vcs-deleted); text-decoration: line-through; }
.gl-ddir { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); font-size: var(--fs-ui-s); }
.gl-dnums { flex: none; font-variant-numeric: tabular-nums; font-size: var(--fs-ui-s); }

/* console ---------------------------------------------------------------- */
.gl-console {
  flex: 1; overflow: auto; padding: 6px 10px;
  font-family: var(--font-mono); font-size: var(--fs-editor); line-height: var(--lh-editor);
  background: var(--bg-editor); color: var(--sy-text); user-select: text;
}
.gl-cline { white-space: pre-wrap; }
.gl-cline.cmd { color: var(--accent); }
.gl-cline.ok { color: var(--vcs-added); }
.gl-cline.dim { color: var(--fg-muted); }

/* ------------------------------------------------------------- responsive */
body.narrow .gl-cauthor { width: 110px; }
body.tiny .gl-details { display: none; }
body.tiny .dv-tgl span { display: none; }