html, body {
  height: 100%;
  margin: 0;
  background: #070a08;
  overflow: hidden;
  font-family: "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

/* ---- pane tree ---------------------------------------------------------- */
#panes {
  position: absolute;
  inset: 0;
  display: flex;
}
#panes > * { flex: 1 1 0; }

.split {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-basis: 0;
}
.split.row    { flex-direction: row; }
.split.column { flex-direction: column; }

.pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex-basis: 0;
  box-sizing: border-box;
  border: 1px solid #14231a;
  background: #070a08;
}
.pane.focused { border-color: #2f7a45; }
/* a lone pane needs no frame */
#panes.single .pane { border-color: transparent; }

.pane .term {
  position: absolute;
  inset: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  overflow: hidden;
}
.xterm .xterm-viewport { background-color: #070a08 !important; }

/* ---- key bar (nano-style) ------------------------------------------------
   Shown while a prompt reads lines from the terminal ('cat > FILE'). It takes
   a strip off the bottom of the pane instead of covering the terminal, so the
   line being typed never disappears behind it. */
.pane .hint-bar { display: none; }
.pane.hinted .term { bottom: 26px; }
.pane.hinted .hint-bar {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  line-height: 26px;
  padding: 0 44px 0 12px;   /* room for the menu button in the corner pane */
  box-sizing: border-box;
  border-top: 1px solid #1f3a29;
  background: #0b120d;
  color: #5a6b5e;
  font-size: 12px;
  white-space: pre;         /* the gaps between the keys are part of the text */
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.pane.hinted .hint-bar kbd {
  font-family: inherit;
  font-size: 12px;
  padding: 1px 5px;
  margin: 0 1px;
  border: 1px solid #2f7a45;
  border-radius: 3px;
  background: #14231a;
  color: #7dffa8;
}

.divider {
  flex: 0 0 5px;
  background: #0f1a13;
  z-index: 1;
  touch-action: none;
}
.divider:hover, .divider.dragging { background: #2f7a45; }
.split.row    > .divider { cursor: col-resize; }
.split.column > .divider { cursor: row-resize; }

/* ---- menu ---------------------------------------------------------------- */
#menu-btn {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 10;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #1f3a29;
  border-radius: 4px;
  background: #0b120d;
  color: #5a6b5e;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}
#menu-btn:hover, #menu-btn[aria-expanded="true"] { opacity: 1; color: #7dffa8; border-color: #2f7a45; }

#menu {
  position: fixed;
  right: 10px;
  bottom: 40px;
  z-index: 10;
  min-width: 300px;
  padding: 6px 0;
  border: 1px solid #1f3a29;
  border-radius: 6px;
  background: #0b120d;
  color: #b7f0c1;
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
#menu .item, #menu .hint {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 14px;
}
#menu .item { cursor: pointer; }
#menu .item:hover { background: #14231a; color: #7dffa8; }
#menu .hint { color: #5a6b5e; }
#menu .sep { height: 1px; margin: 4px 0; background: #1f3a29; }
#menu kbd {
  font-family: inherit;
  font-size: 12px;
  color: #7fd6ff;
  white-space: nowrap;
}

/* thin, dark scrollbars in the terminal's green: a white bar per pane is noise.
   The thumb sits quietly in the frame colour and lights up while the pane is
   hovered, so it can still be found. */
.xterm .xterm-viewport { scrollbar-width: thin; scrollbar-color: #1f3a29 transparent; }
.pane:hover .xterm .xterm-viewport { scrollbar-color: #2f7a45 transparent; }
.xterm .xterm-viewport::-webkit-scrollbar { width: 6px; }
.xterm .xterm-viewport::-webkit-scrollbar-thumb { background: #1f3a29; border-radius: 3px; }
.pane:hover .xterm .xterm-viewport::-webkit-scrollbar-thumb { background: #2f7a45; }
.xterm .xterm-viewport::-webkit-scrollbar-track { background: transparent; }