cmux-remote/public/css/terminal.css

@font-face {
  font-family: 'SymbolsNerdFont';
  src: url('/fonts/SymbolsNerdFontMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
  unicode-range: U+23FB-23FE, U+2665, U+26A1, U+2B58, U+E000-E00A, U+E0A0-E0A2, U+E0A3, U+E0B0-E0C8, U+E0CA, U+E0CC-E0D7, U+E200-E2A9, U+E300-E3E3, U+E5FA-E6B7, U+E700-E7C5, U+EA60-EBEB, U+F000-F2FF, U+F400-F533, U+F0001-F1AF0;
}

.terminal-container.browser-mode {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.browser-view[hidden],
.browser-zoom-btn[hidden] { display: none; }

.browser-view {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  background: #000;
}

.browser-loading[hidden] { display: none; }
.browser-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 30;
  overflow: hidden;
}
.browser-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -40% 0;
  animation: browser-sweep 1.6s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s;
}
.browser-loading.flash::after {
  opacity: 1;
}
@keyframes browser-sweep {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

.browser-zoom-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s;
}
.browser-zoom-btn:active { background: rgba(255, 255, 255, 0.2); }

/* Lightbox */
.img-zoom-overlay[hidden] { display: none; }
.img-zoom-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 500;
  display: flex;
  align-items: stretch;
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.img-zoom-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.img-zoom-close:active { background: rgba(255, 255, 255, 0.3); }

.img-zoom-container {
  flex: 1;
  overflow: hidden;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.img-zoom-container.dragging { cursor: grabbing; }

.img-zoom-img {
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
}

.terminal-output {
  margin: 0;
  padding: 14px 16px;
  font-family: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Menlo', 'Monaco', 'Consolas', 'SymbolsNerdFont', 'Symbols Nerd Font Mono', monospace;
  font-size: 15px;
  line-height: 1.2;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-primary);
  contain: style;
  min-height: 100%;
  -webkit-user-select: text;
  user-select: text;
  font-feature-settings: "liga" 0, "calt" 0;
}

.terminal-output::selection,
.terminal-output *::selection {
  background: var(--accent-glow);
  color: inherit;
}

/* Claude Code pattern highlighting */

.hl-tool {
  color: var(--blue);
}

.hl-thinking {
  color: var(--yellow);
}

.hl-output {
  color: var(--gray);
}

.hl-prompt {
  color: var(--green);
  font-weight: 600;
}

.hl-success {
  color: var(--green);
}

.hl-error {
  color: var(--red);
}

.hl-path {
  color: var(--cyan);
}

.hl-box {
  color: var(--text-dimmed);
}

.hl-dim {
  color: var(--text-dimmed);
}

.hl-header {
  color: var(--yellow);
  font-weight: 600;
}

.hl-linenum {
  color: var(--text-dimmed);
}

.hl-added {
  color: var(--green);
}

.hl-removed {
  color: var(--red);
}


/* QR block — font-size set dynamically in terminal-view.js to fit width */
.qr-block {
  display: block;
  line-height: 1.0;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px) {
  .terminal-output {
    padding: 16px 24px;
    font-size: 13.5px;
  }
}