.terminal-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 8px 28px 14px 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--panel-bg), var(--panel-bg-deep));
  box-shadow: inset 0 0 5px #000;
  overscroll-behavior: contain;
}

.terminal-surface:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 5px #00ffcc44, inset 0 0 5px #000;
}

.terminal-surface .xterm {
  height: 100%;
  padding: 0 0 6px;
}

.terminal-surface .xterm-viewport {
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.terminal-surface .xterm-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.terminal-scrollbar {
  position: absolute;
  top: 8px;
  right: 7px;
  bottom: 14px;
  z-index: 30;
  width: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #555 transparent;
  scrollbar-width: auto;
}

.terminal-scrollbar::-webkit-scrollbar {
  width: 14px;
}

.terminal-scrollbar::-webkit-scrollbar-thumb {
  background: #444;
  border: 3px solid #111;
  border-radius: 999px;
}

.terminal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.terminal-scrollbar-track {
  width: 1px;
  min-height: 100%;
}