/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* VS Code Dark+ theme colors */
  --bg-primary: #1e1e1e;
  --bg-secondary: #252526;
  --bg-tertiary: #1f1f1f;
  --bg-surface: #2d2d2d;
  --bg-hover: #2a2d2e;
  --bg-active: #37373d;
  --bg-selection: #264f78;
  --text-primary: #d4d4d4;
  --text-secondary: #cccccc;
  --text-muted: #858585;
  --text-dim: #5a5a5a;
  --border: #3c3c3c;
  --border-subtle: #2d2d2d;
  --accent-blue: #569cd6;
  --accent-light-blue: #9cdcfe;
  --accent-green: #6a9955;
  --accent-bright-green: #b5cea8;
  --accent-red: #f44747;
  --accent-soft-red: #ce9178;
  --accent-yellow: #dcdcaa;
  --accent-purple: #c586c0;
  --accent-teal: #4ec9b0;
  --accent-orange: #ce9178;
  --accent-mauve: #b4befe;
  --focus-border: #007fd4;

  /* VS Code diff colors */
  --diff-add-bg: rgba(35, 134, 54, 0.2);
  --diff-add-gutter: rgba(35, 134, 54, 0.4);
  --diff-del-bg: rgba(206, 17, 38, 0.2);
  --diff-del-gutter: rgba(206, 17, 38, 0.4);
  --diff-hunk-bg: rgba(86, 156, 214, 0.1);

  /* VS Code syntax colors (Dark+) */
  --syn-keyword: #569cd6;
  --syn-control: #c586c0;
  --syn-string: #ce9178;
  --syn-number: #b5cea8;
  --syn-comment: #6a9955;
  --syn-function: #dcdcaa;
  --syn-variable: #9cdcfe;
  --syn-type: #4ec9b0;
  --syn-constant: #4fc1ff;
  --syn-tag: #569cd6;
  --syn-attribute: #9cdcfe;
  --syn-operator: #d4d4d4;
  --syn-punctuation: #808080;
  --syn-regex: #d16969;
  --syn-decorator: #dcdcaa;

  --scrollbar-thumb: #424242;
  --scrollbar-track: transparent;
  --font-mono: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  --font-mono-weight: 550;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe WPC', system-ui, sans-serif;
}

html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-primary);
  max-width: 100vw;
}

/* Scrollbar — VS Code style */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: rgba(121, 121, 121, 0.4); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(121, 121, 121, 0.7); }
::-webkit-scrollbar-corner { background: var(--bg-primary); }

/* ===== Toolbar ===== */
#toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 35px;
  padding: 0 16px;
  background: #323233;
  border-bottom: 1px solid #1a1a1a;
  gap: 16px;
  -webkit-app-region: drag;
}

.toolbar-left, .toolbar-center, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-left { flex: 0 0 auto; }
.toolbar-center { flex: 1; justify-content: center; }
.toolbar-right { flex: 0 0 auto; }

.logo { flex-shrink: 0; }

.app-title {
  font-weight: 400;
  font-size: 13px;
  color: #cccccc;
}

.repo-info {
  font-size: 12px;
  color: var(--text-muted);
}

select {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 3px 24px 3px 8px;
  font-size: 12px;
  font-family: var(--font-ui);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  -webkit-app-region: no-drag;
}

select:hover { border-color: #505050; }
select:focus { border-color: var(--focus-border); outline: 1px solid var(--focus-border); }

#repo-select { min-width: 200px; }

/* ===== Main Layout ===== */
#app {
  display: flex;
  height: calc(100vh - 35px);
  height: calc(100dvh - 35px);
  overflow: hidden;
}

/* ===== Panels ===== */
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-primary);
}

#panel-commits { width: 380px; min-width: 250px; flex-shrink: 0; background: var(--bg-secondary); }
#panel-files { width: 260px; min-width: 160px; flex-shrink: 0; background: var(--bg-secondary); }
#panel-diff { flex: 1; min-width: 300px; }

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 35px;
  padding: 0 12px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.panel-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  background: #4d4d4d;
  color: #cccccc;
  min-width: 18px;
  text-align: center;
}

/* Refresh button */
.refresh-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.refresh-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.refresh-btn:active {
  color: var(--focus-border);
}

.refresh-btn.spinning svg {
  animation: spin 0.6s linear infinite;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.panel-footer {
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-footer select { width: 100%; }

/* ===== Resizer ===== */
.resizer {
  width: 1px;
  cursor: col-resize;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.15s;
  position: relative;
}

.resizer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  right: -3px;
  bottom: 0;
}

.resizer:hover, .resizer.active { background: var(--focus-border); }

/* ===== Commit List ===== */
.commit-row {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  min-height: 44px;
  transition: background 0.08s ease;
}

.commit-row:hover { background: var(--bg-hover); }
.commit-row.selected {
  background: var(--bg-active);
  border-left: 2px solid var(--focus-border);
}

.commit-graph {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.commit-graph canvas {
  display: block;
}

/* Uncommitted changes row */
.uncommitted-row {
  background: rgba(226, 192, 141, 0.05);
  border-bottom: 1px solid rgba(226, 192, 141, 0.15);
}

.uncommitted-row:hover {
  background: rgba(226, 192, 141, 0.1);
}

.ref-badge.uncommitted-badge {
  background: rgba(226, 192, 141, 0.2);
  color: #e2c08d;
  border: 1px solid rgba(226, 192, 141, 0.35);
}

.file-status.U { color: #73c991; }

.commit-info {
  flex: 1;
  min-width: 0;
  padding: 6px 10px 6px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.commit-subject {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.commit-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.commit-author { color: var(--text-secondary); font-size: 11px; }
.commit-date { color: var(--text-muted); }
.commit-hash {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.ref-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 0px 5px;
  border-radius: 2px;
  margin-right: 4px;
  line-height: 1.6;
  white-space: nowrap;
}

.ref-badge.branch {
  background: rgba(86, 156, 214, 0.2);
  color: var(--accent-blue);
  border: 1px solid rgba(86, 156, 214, 0.35);
}

.ref-badge.tag {
  background: rgba(220, 220, 170, 0.15);
  color: var(--accent-yellow);
  border: 1px solid rgba(220, 220, 170, 0.3);
}

.ref-badge.head {
  background: rgba(78, 201, 176, 0.15);
  color: var(--accent-teal);
  border: 1px solid rgba(78, 201, 176, 0.3);
}

.ref-badge.remote {
  background: rgba(197, 134, 192, 0.15);
  color: var(--accent-purple);
  border: 1px solid rgba(197, 134, 192, 0.3);
}

/* ===== File List ===== */
.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.08s;
  border-bottom: 1px solid var(--border-subtle);
}

.file-item:hover { background: var(--bg-hover); }
.file-item.selected {
  background: var(--bg-active);
  border-left: 2px solid var(--focus-border);
  padding-left: 10px;
}

.file-status {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.file-status.A { color: #73c991; }
.file-status.M { color: #e2c08d; }
.file-status.D { color: #c74e39; }
.file-status.R { color: var(--accent-purple); }
.file-status.C { color: var(--accent-teal); }

.file-path {
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-dir {
  color: var(--text-muted);
}

/* ===== Diff View ===== */
.diff-container {
  padding: 0;
}

.diff-file-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
}

.diff-file-path {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-weight);
  font-size: 14px;
  color: var(--text-primary);
}

.diff-stats {
  font-size: 11px;
  margin-left: auto;
  font-family: var(--font-mono);
}

.diff-stats .additions { color: #73c991; }
.diff-stats .deletions { color: #c74e39; }

.diff-hunk-header {
  padding: 4px 16px;
  background: #1b2433;
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-weight: var(--font-mono-weight);
  font-size: 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border-subtle);
  user-select: none;
  position: sticky;
  left: 0;
}

.diff-line {
  display: flex;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-weight);
  font-size: 14px;
  line-height: 22px;
  white-space: pre;
}

.diff-line .diff-line-no,
.diff-line .diff-line-prefix {
  background: var(--bg-primary);
}

.diff-line.addition {
  background: var(--diff-add-bg);
}

.diff-line.addition .diff-line-no,
.diff-line.addition .diff-line-prefix {
  background: #1a2e1f;
}

.diff-line.deletion {
  background: var(--diff-del-bg);
}

.diff-line.deletion .diff-line-no,
.diff-line.deletion .diff-line-prefix {
  background: #2d1518;
}

.diff-line-no {
  flex-shrink: 0;
  width: 50px;
  text-align: right;
  padding-right: 8px;
  color: var(--text-dim);
  user-select: none;
  font-size: 11px;
  position: sticky;
  z-index: 1;
}

.diff-line-no.old { left: 0; border-right: 1px solid var(--border-subtle); }
.diff-line-no.new { left: 50px; }

.diff-line.addition .diff-line-no { color: rgba(115, 201, 145, 0.5); }
.diff-line.deletion .diff-line-no { color: rgba(199, 78, 57, 0.5); }

.diff-line-prefix {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  user-select: none;
  color: var(--text-dim);
  position: sticky;
  left: 100px;
  z-index: 1;
}

.diff-line.addition .diff-line-prefix { color: #73c991; }
.diff-line.deletion .diff-line-prefix { color: #c74e39; }

.diff-line-content {
  flex: 1;
  padding-right: 16px;
  min-width: 0;
}

.diff-container {
  overflow-x: auto;
}

.diff-container .diff-line {
  min-width: fit-content;
}

/* Syntax highlighting tokens in diff */
.syn-kw { color: var(--syn-keyword); }
.syn-ctrl { color: var(--syn-control); }
.syn-str { color: var(--syn-string); }
.syn-num { color: var(--syn-number); }
.syn-cmt { color: var(--syn-comment); font-style: italic; }
.syn-fn { color: var(--syn-function); }
.syn-var { color: var(--syn-variable); }
.syn-type { color: var(--syn-type); }
.syn-const { color: var(--syn-constant); }
.syn-tag { color: var(--syn-tag); }
.syn-attr { color: var(--syn-attribute); }
.syn-op { color: var(--syn-operator); }
.syn-punc { color: var(--syn-punctuation); }
.syn-regex { color: var(--syn-regex); }
.syn-dec { color: var(--syn-decorator); }

/* Commit detail header in diff panel */
.commit-detail {
  padding: 16px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.commit-detail-subject {
  font-size: 14px;
  font-weight: 600;
  color: #e7e7e7;
  margin-bottom: 12px;
  line-height: 1.4;
}

.commit-detail-body {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.commit-detail-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  font-size: 12px;
}

.commit-detail-label {
  color: var(--text-muted);
  text-align: right;
  font-weight: 500;
}

.commit-detail-value {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: var(--font-mono-weight);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commit-detail-value.hash-value {
  color: var(--accent-blue);
}

/* ===== Empty State ===== */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px;
  text-align: center;
}

/* ===== Loading ===== */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
}

.loading::after {
  content: '';
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--focus-border);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Mobile Back Button & Panel Title ===== */
.mobile-back-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.mobile-back-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.mobile-back-btn:active { color: var(--focus-border); }

.mobile-panel-title {
  display: none;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}

/* ===== Mobile / Responsive ===== */
@media (max-width: 768px) {
  /* Toolbar adjustments */
  #toolbar {
    height: 44px;
    padding: 0 8px;
    gap: 6px;
  }

  .toolbar-left { gap: 4px; }
  .app-title { font-size: 12px; }
  .toolbar-center { flex: 1; min-width: 0; }
  .toolbar-right { display: none; }

  #repo-select {
    min-width: 0;
    width: 100%;
    font-size: 12px;
    padding: 4px 22px 4px 6px;
  }

  .mobile-back-btn {
    display: none; /* shown via JS when needed */
  }

  .mobile-panel-title {
    display: none; /* shown via JS */
  }

  /* Main layout: stack panels, show one at a time */
  #app {
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
    position: relative;
  }

  #app.mobile-mode {
    display: block;
  }

  #app.mobile-mode .panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    width: 100% !important;
    min-width: 0 !important;
    display: none;
  }

  #app.mobile-mode .panel.mobile-active {
    display: flex;
  }

  /* Hide resizers on mobile */
  #app.mobile-mode .resizer {
    display: none;
  }

  /* Panel headers */
  #app.mobile-mode .panel-header {
    height: 38px;
    padding: 0 10px;
  }

  /* Commit rows — larger touch targets, fixed height to match graph canvas */
  #app.mobile-mode .commit-row {
    min-height: 56px;
    padding-right: 8px;
  }

  #app.mobile-mode .commit-graph canvas {
    height: 100% !important;
  }

  #app.mobile-mode .commit-info {
    padding: 8px 8px 8px 4px;
    gap: 3px;
  }

  #app.mobile-mode .commit-subject {
    font-size: 13px;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #app.mobile-mode .commit-meta {
    font-size: 11px;
    gap: 4px;
    flex-wrap: wrap;
  }

  /* File items — larger touch targets */
  #app.mobile-mode .file-item {
    padding: 10px 12px;
    gap: 10px;
    min-height: 44px;
  }

  #app.mobile-mode .file-path {
    font-size: 13px;
  }

  #app.mobile-mode .file-status {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  /* Add chevron to file items to indicate tappable */
  #app.mobile-mode .file-item::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23585858' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Diff view */
  #app.mobile-mode .diff-line {
    font-size: 12px;
    line-height: 19px;
  }

  #app.mobile-mode .diff-line-no {
    width: 36px;
    font-size: 10px;
    padding-right: 4px;
  }

  #app.mobile-mode .diff-line-prefix {
    width: 16px;
    left: 72px;
  }

  #app.mobile-mode .diff-line-content {
    padding-right: 8px;
  }

  #app.mobile-mode .diff-file-header {
    padding: 8px 10px;
    flex-wrap: wrap;
    gap: 4px;
  }

  #app.mobile-mode .diff-file-path {
    font-size: 12px;
    word-break: break-all;
    white-space: normal;
  }

  #app.mobile-mode .diff-hunk-header {
    font-size: 11px;
    padding: 4px 10px;
    overflow-x: auto;
  }

  /* Commit detail on mobile */
  #app.mobile-mode .commit-detail {
    padding: 12px 14px;
  }

  #app.mobile-mode .commit-detail-subject {
    font-size: 14px;
    margin-bottom: 10px;
  }

  #app.mobile-mode .commit-detail-meta {
    font-size: 11px;
    gap: 3px 10px;
  }

  #app.mobile-mode .commit-detail-value {
    font-size: 11px;
    word-break: break-all;
    white-space: normal;
  }

  /* Branch selector footer */
  #app.mobile-mode .panel-footer {
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  #app.mobile-mode .panel-footer select {
    font-size: 13px;
    padding: 6px 28px 6px 10px;
  }

  /* Ref badges — slightly bigger for touch */
  #app.mobile-mode .ref-badge {
    font-size: 10px;
    padding: 1px 6px;
    line-height: 1.7;
  }
}

/* Small phones */
@media (max-width: 400px) {
  .app-title { display: none; }
  .logo { display: none; }
}