/* Terminal shares the application layout. Only visual tokens/details change. */
@font-face {
  font-family: TerminalPlex;
  src: url('/assets/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: TerminalPlex;
  src: url('/assets/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500 900;
  font-display: swap;
}
.terminal-index {
  display: none;
}
body[data-style='terminal'] {
  color-scheme: dark;
  --bg: #101714;
  --surface: #17221c;
  --glass: #17221ce8;
  --field: #111b16;
  --ink: #d5e7da;
  --muted: #9bb6a5;
  --border: #8bc39a26;
  --accent: #8addaa;
  --accent-solid: #69bd8b;
  --teal: #8addaa;
  --danger: #edb3bb;
  --shadow: none;
  font-family: TerminalPlex, monospace;
  background: var(--bg);
}
body[data-style='terminal'] :is(button, input, select, textarea) {
  font-family: inherit;
}
body[data-style='terminal'] :is(h1, h2, h3, strong) {
  color: #edf7f0;
  font-weight: 500;
}
body[data-style='terminal']
  :is(
    .glass,
    dialog,
    .composer,
    .emoji-panel,
    .file-card,
    .poll-card,
    .request-card,
    .account-banner,
    .auth-modes button
  ) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: none;
  backdrop-filter: none;
}
body[data-style='terminal'] :is(input, select, textarea) {
  background: var(--field);
  border-color: var(--border);
  color: var(--ink);
  border-radius: 3px;
}
body[data-style='terminal']
  :is(.button, .icon-button, .send-button, .reaction) {
  border-radius: 3px;
  box-shadow: none;
}
body[data-style='terminal'] :is(.button, .icon-button) {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
body[data-style='terminal'] :is(.button.primary, .send-button) {
  background: var(--accent-solid);
  color: #0d1c13;
  border-color: transparent;
}
body[data-style='terminal'] .text-button {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 5px 8px;
}
body[data-style='terminal'] .text-button:hover {
  color: var(--ink);
  background: #8addaa0b;
}
body[data-style='terminal'] .nav-button.selected {
  background: #8addaa0c;
  color: var(--accent);
  border-left: 2px solid var(--accent);
}
body[data-style='terminal']
  :is(
    .message-name,
    .feature-icon,
    .file-symbol,
    .welcome-mark,
    .code-mark,
    .intro h1 > span
  ) {
  color: var(--accent);
}
body[data-style='terminal'] .message-content {
  color: var(--ink);
  line-height: 1.65;
}
body[data-style='terminal']
  :is(.avatar, .room-symbol, .square-icon, .welcome-mark) {
  background: #8addaa08;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 3px;
}
body[data-style='terminal'] :is(.site-header, .room-header) {
  background: #101714e8;
  border-bottom: 1px solid var(--border);
}
body[data-style='terminal'] .profile-text strong {
  font-size: 13px;
}
body[data-style='terminal'] .room-welcome {
  border-bottom: 1px solid var(--border);
}
body[data-style='terminal'] .brand > span::after {
  content: '_';
  color: var(--accent);
  margin-left: 0.35ch;
}
body[data-style='terminal'] .brand-light {
  color: var(--muted);
}
body[data-style='terminal'] .ambient {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background: none;
}
body[data-style='terminal'] .ambient::before {
  content: '';
  position: absolute;
  inset: -56px;
  background:
    linear-gradient(#80c79805 1px, transparent 1px),
    linear-gradient(90deg, #80c79805 1px, transparent 1px);
  background-size: 56px 56px;
  animation: terminal-grid 35s linear infinite;
}
body[data-style='terminal'] .ambient::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -100px;
  height: 100px;
  background: linear-gradient(transparent, #80c79805, transparent);
  animation: terminal-scan 22s linear infinite;
}
body[data-style='terminal']:is(.reduce-motion, .no-background-motion)
  .ambient::before,
body[data-style='terminal']:is(.reduce-motion, .no-background-motion)
  .ambient::after {
  animation: none;
}
body[data-style='terminal'].page-hidden .ambient::before,
body[data-style='terminal'].page-hidden .ambient::after {
  animation-play-state: paused;
}
@keyframes terminal-grid {
  to {
    transform: translate(56px, 56px);
  }
}
@keyframes terminal-scan {
  to {
    transform: translateY(calc(100vh + 200px));
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-style='terminal'] .ambient::before,
  body[data-style='terminal'] .ambient::after {
    animation: none;
  }
}