:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --text: var(--tg-theme-text-color, #1a1a1a);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --link: var(--tg-theme-link-color, #2a7ae2);
  --btn: var(--tg-theme-button-color, #2a7ae2);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --sec: var(--tg-theme-secondary-bg-color, #f3f3f3);
  /* Telegram fullscreen puts its own controls over the top of the viewport. */
  --top-inset: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --bottom-inset: calc(var(--tg-safe-area-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  font: 14px/1.4 -apple-system, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  padding-bottom: var(--bottom-inset);
  overflow-x: hidden;
}

header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: calc(8px + var(--top-inset)) 8px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--sec);
}

#agent {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--sec);
  border-radius: 8px;
  background: var(--sec);
  color: var(--text);
}

.tabs {
  display: flex;
  gap: 4px;
}

.tab {
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: var(--sec);
  color: var(--text);
}

.tab.active {
  background: var(--btn);
  color: var(--btn-text);
}

nav#crumbs {
  padding: 6px 10px;
  color: var(--hint);
  font-size: 12px;
  word-break: break-all;
}

main {
  padding: 8px;
}

ul#tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul#tree li {
  padding: 10px 8px;
  border-bottom: 1px solid var(--sec);
  cursor: pointer;
}

ul#tree li .kind {
  color: var(--hint);
  margin-right: 8px;
}

/* Opened file takes the whole viewport — no page behind it, no outer scroll. */
article#file {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: calc(8px + var(--top-inset)) 8px calc(8px + var(--bottom-inset));
  background: var(--bg);
}

article#file[hidden] {
  display: none;
}

.file-head {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-weight: 600;
  word-break: break-all;
  flex: none;
}

.file-head button {
  border: none;
  background: var(--sec);
  color: var(--text);
  border-radius: 6px;
  padding: 2px 8px;
}

/* Wrap instead of scrolling sideways: no horizontal scrollbar anywhere. */
pre,
pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  tab-size: 2;
}

pre {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--sec);
  border-radius: 8px;
  padding: 10px;
  margin: 0;
}

article#file pre {
  flex: 1;
  min-height: 0;
}

footer#status {
  padding: 8px 10px;
  color: var(--hint);
  font-size: 12px;
  min-height: 16px;
}

.d2h-wrapper {
  font-size: 12px;
}

/* diff2html defaults to fixed-width code cells that scroll sideways — wrap them. */
.d2h-file-wrapper,
.d2h-files-diff,
.d2h-file-side-diff,
.d2h-code-wrapper {
  overflow-x: hidden;
}

.d2h-diff-table {
  table-layout: fixed;
  width: 100%;
}

.d2h-code-line,
.d2h-code-side-line {
  width: auto;
  padding-right: 0;
}

.d2h-code-line-ctn {
  display: inline-block;
  width: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}