:root {
  --bg: #0c0e14;
  --bg2: #11141d;
  --panel: #141823;
  --panel2: #1a1f2e;
  --border: #232a3a;
  --text: #c9d3e6;
  --muted: #6b7793;
  --accent: #4da3ff;
  --accent2: #ffcc44;
  --add: #2ea043;
  --add-bg: rgba(46,160,67,0.16);
  --del: #f85149;
  --del-bg: rgba(248,81,73,0.16);
  --hot: #ffd34d;
  --topbar-h: 48px;
  --timeline-h: 38px;
  --legend-h: 30px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

button, input, label { font-family: inherit; color: inherit; }

/* ---------------- top bar ---------------- */
#topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.brand .logo { color: var(--accent); font-size: 18px; }
.brand .title { font-weight: 700; letter-spacing: 0.5px; }
.brand .root {
  color: var(--muted); font-size: 12px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.controls { display: flex; align-items: center; gap: 12px; flex: 1; }

.btn {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s;
}
.btn:hover { background: #232b3d; }
.btn.icon { padding: 5px 8px; min-width: 30px; justify-content: center; }
.btn.live { font-weight: 700; letter-spacing: 0.5px; }
.btn.live .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted);
}
.btn.live.on { border-color: var(--add); color: #b9f6c6; }
.btn.live.on .dot { background: var(--add); box-shadow: 0 0 8px var(--add); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.speed { display: flex; align-items: center; gap: 8px; }
.speed label { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }
.speed input[type=range] { width: 160px; accent-color: var(--accent); }
.speedLabel { color: var(--accent); min-width: 64px; font-variant-numeric: tabular-nums; }

.toggle { color: var(--muted); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.toggle input { accent-color: var(--accent); }

.stats { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; }
.stats span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.conn { width: 9px; height: 9px; border-radius: 50%; background: var(--del); display: inline-block; }
.conn.on { background: var(--add); box-shadow: 0 0 8px var(--add); }
.watcher {
  background: var(--panel2); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 10px; font-size: 11px; color: var(--text);
}

/* ---------------- timeline ---------------- */
#timeline {
  height: var(--timeline-h);
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
}
.track {
  position: relative; flex: 1; height: 16px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border);
  cursor: pointer; overflow: hidden;
}
.track .fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, rgba(77,163,255,0.25), rgba(77,163,255,0.45));
}
.track .ticks { position: absolute; inset: 0; pointer-events: none; }
.track .ticks i {
  position: absolute; top: 3px; bottom: 3px; width: 2px; border-radius: 1px;
  background: var(--muted); opacity: 0.5;
}
.track .head {
  position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px;
  background: var(--accent2); box-shadow: 0 0 8px var(--accent2); left: 100%;
}
.tl-label { color: var(--muted); min-width: 220px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------------- main ---------------- */
#main {
  position: absolute; left: 0; right: 0;
  top: calc(var(--topbar-h) + var(--timeline-h));
  bottom: var(--legend-h);
  display: flex;
}
#mapPane { position: relative; flex: 1; min-width: 0; overflow: hidden; background: var(--bg); }
#treemap { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }
#universe { position: absolute; inset: 0; overflow: hidden; background: #04060c; }
#universe canvas { display: block; }
.u-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px; padding: 20px; text-align: center;
}
.u-label {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6;
  transform: translate(-50%, -100%);
  white-space: nowrap; text-align: center; line-height: 1.2;
  padding: 3px 9px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);   /* box shadow, not text shadow -> crisp text */
  -webkit-font-smoothing: antialiased;
}
.u-label .u-act {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.9;
}
.u-label .u-file { display: block; font-size: 13.5px; font-weight: 700; }
.u-hover {
  position: absolute; pointer-events: none; z-index: 6; white-space: nowrap;
  background: rgba(8,12,22,0.88); border: 1px solid rgba(255,255,255,0.18);
  color: #e7edf6; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
}
.u-ext {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4;
  transform: translate(-50%, -50%); white-space: nowrap;
  color: #fff; font-size: 11px; font-weight: 700;
  text-shadow: 0 0 4px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.9);
}
.u-center {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; white-space: nowrap;
  transform: translate(-50%, -50%);
  color: #ffe6a6; font-size: 15px; font-weight: 800; letter-spacing: 0.3px;
  text-shadow: 0 0 9px rgba(255,200,90,0.65), 0 1px 3px rgba(0,0,0,0.95);
}
#universe canvas { cursor: grab; }
#universe canvas:active { cursor: grabbing; }
#viewToggle.on { border-color: var(--accent); color: #cfe6ff; background: #1b2740; }

#diffPane {
  position: relative;
  width: 560px; min-width: 300px; max-width: 72%;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border); background: var(--panel);
}
#diffPane.resizing { user-select: none; }

/* resize handle */
#diffPane::before {
  content: ""; position: absolute; width: 6px; margin-left: -3px; top: 0; bottom: 0;
  cursor: col-resize; z-index: 5;
}

.diffHeader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--border);
  background: var(--panel2);
}
.dh-title { font-weight: 600; font-size: 12.5px; }
.logCount { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.diffHeader .btn { padding: 3px 10px; font-size: 11px; }
.badge { padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.badge.modified { background: rgba(77,163,255,.18); color: #9ecbff; }
.badge.created  { background: var(--add-bg); color: #7ee2a0; }
.badge.deleted  { background: var(--del-bg); color: #ff9b95; }
.badge.moved    { background: rgba(255,204,68,.18); color: #ffe08a; }
.stat-add { color: var(--add); }
.stat-del { color: var(--del); }

.log { flex: 1; overflow: auto; }
.logitem { border-bottom: 1px solid var(--border); }
.logitem.current { box-shadow: inset 3px 0 0 var(--accent2); background: rgba(255,204,68,0.05); }
.li-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--panel2); cursor: pointer; font-size: 12px;
}
.li-head:hover { background: #232b3d; }
.li-path {
  font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.li-stats { display: flex; gap: 6px; flex: 0 0 auto; }
.li-time { color: var(--muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.li-diff {
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.5; overflow-x: auto;
}
.diff-empty, .diff-note { color: var(--muted); padding: 14px; line-height: 1.6; }
.diff-note { font-style: italic; }

.hunk-head {
  color: #7c9bd6; background: var(--bg2);
  padding: 2px 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: sticky; left: 0; white-space: pre;
}
.dline { display: flex; white-space: pre; }
.dline .gut {
  flex: 0 0 auto; width: 84px; text-align: right; padding: 0 8px;
  color: var(--muted); opacity: .7; user-select: none;
  border-right: 1px solid var(--border); background: var(--bg2);
}
.dline .gut span { display: inline-block; width: 32px; }
.dline .sign { flex: 0 0 16px; text-align: center; color: var(--muted); }
.dline .txt { flex: 1; padding-right: 12px; }
.dline.add { background: var(--add-bg); }
.dline.add .sign { color: var(--add); }
.dline.del { background: var(--del-bg); }
.dline.del .sign { color: var(--del); }
.dline.ctx { }

/* ---------------- mosaic tiles ---------------- */
.mosaic-content { position: relative; width: 100%; }
.mosaic-more {
  position: absolute; left: 0; right: 0; padding: 5px 8px;
  color: var(--muted); font-size: 11px; font-style: italic;
}
.cell {
  position: absolute; left: 0; top: 0; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.4); border-radius: 3px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2px 6px; box-sizing: border-box;
  transition: transform .42s cubic-bezier(.22,.61,.36,1), width .42s ease, height .42s ease;
  will-change: transform;
}
.cell .nm {
  font-size: 12.5px; font-weight: 600; line-height: 1.25;
  color: inherit; text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.cell .sub {
  font-size: 10px; line-height: 1.2; color: inherit; opacity: 0.72;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* dark text on light tiles drops the dark shadow (which would be unreadable) */
.cell.darktext .nm, .cell.darktext .sub { text-shadow: 0 1px 1px rgba(255,255,255,0.22); }
.cell.tiny .sub { display: none; }
.cell.tiny .nm { font-size: 11px; }
.cell.flash { animation: cellflash .5s ease; }
@keyframes cellflash {
  0% { filter: brightness(2.3); }    /* transform now holds tile position */
  100% { filter: brightness(1); }
}
.cell.selected { outline: 2px solid #fff; outline-offset: -2px; z-index: 41; }
#treemap.nobulkanim .cell { transition: none !important; }

.tooltip {
  position: absolute; z-index: 50; pointer-events: none;
  background: #05070c; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 9px; font-size: 11.5px; max-width: 340px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
.tooltip .tp { color: var(--text); word-break: break-all; }
.tooltip .tm { color: var(--muted); margin-top: 3px; }
.tooltip .tr { color: #6fa8ff; }   /* "read by …" — tinted like the blue read glow */
.hidden { display: none !important; }

.emptyHint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  color: var(--muted); font-size: 14px; pointer-events: none; text-align: center;
}

/* ---------------- legend ---------------- */
#legend {
  height: var(--legend-h); display: flex; align-items: center; gap: 14px;
  padding: 0 14px; background: var(--bg2); border-top: 1px solid var(--border);
  overflow-x: auto; white-space: nowrap;
}
.leg {
  display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px;
  cursor: pointer; padding: 2px 6px; border-radius: 10px; border: 1px solid transparent;
  user-select: none; transition: background .12s, border-color .12s, opacity .12s;
}
.leg:hover { background: #232b3d; border-color: var(--border); }
.leg .sw { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.leg .leg-count { color: var(--muted); opacity: .65; font-variant-numeric: tabular-nums; }
.leg.off { opacity: .4; text-decoration: line-through; }
.leg.off .sw { filter: grayscale(1) brightness(.6); }
.leg-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.leg-all { cursor: pointer; color: var(--accent); font-size: 11px; }
.leg-all:hover { text-decoration: underline; }

/* read status lines in the change log (one per detected read, newest-first) */
.logread {
  display: flex; align-items: baseline; gap: 5px; cursor: pointer;
  padding: 3px 12px; font-size: 11.5px; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden;
}
.logread:hover { background: #232b3d; }
.logread .lr-who { color: #6fa8ff; flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.logread .lr-verb { color: var(--muted); flex: 0 0 auto; }
.logread .lr-file { color: var(--text); overflow: hidden; text-overflow: ellipsis; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #2b3346; border-radius: 6px; border: 2px solid var(--panel); }
::-webkit-scrollbar-track { background: transparent; }