:root {
  --bg: #0b0f17;
  --bg-card: #131a26;
  --fg: #e6edf7;
  --fg-dim: #8896ab;
  --accent: #4f8cff;
  --danger: #ff5f5f;
  --ok: #3ecf6e;
  --border: #23304a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  height: 100%;
  overflow: hidden;
}

.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; }

/* --- tela de pareamento --- */
#view-pairing.active { align-items: center; justify-content: center; padding: 1.5rem; }
.pairing-card { max-width: 320px; width: 100%; text-align: center; }
.pairing-card h1 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.pairing-card p { color: var(--fg-dim); font-size: 0.9rem; margin-bottom: 1.2rem; }
#pairing-code {
  width: 100%; font-size: 1.6rem; letter-spacing: 0.3em; text-align: center;
  padding: 0.6em; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--fg); margin-bottom: 1em;
}
#pairing-submit {
  width: 100%; padding: 0.7em; border-radius: 10px; border: none;
  background: var(--accent); color: white; font-size: 1rem; font-weight: 600;
}
.error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; margin-top: 0.8em; }

#view-connecting.active { align-items: center; justify-content: center; color: var(--fg-dim); }

/* --- topbar --- */
#topbar {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.6em 0.8em; background: var(--bg-card); border-bottom: 1px solid var(--border);
  padding-top: max(0.6em, env(safe-area-inset-top));
}
#btn-menu { background: none; border: none; color: var(--fg); font-size: 1.1rem; padding: 0.2em 0.5em; }
#project-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg-dim); }
.status-dot.up { background: var(--ok); }
.status-dot.down { background: var(--danger); }

/* --- terminal --- */
#term { flex: 1; min-height: 0; background: #000; }

#keybar {
  display: flex; gap: 0.4em; overflow-x: auto; padding: 0.4em;
  background: var(--bg-card); border-top: 1px solid var(--border);
}
#keybar button {
  flex: 0 0 auto; padding: 0.4em 0.8em; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: 0.85rem; white-space: nowrap;
}

/* --- barra de chat --- */
#chat-form {
  display: flex; gap: 0.5em; padding: 0.6em 0.8em;
  padding-bottom: max(0.6em, env(safe-area-inset-bottom));
  background: var(--bg-card); border-top: 1px solid var(--border);
}
#chat-input {
  flex: 1; padding: 0.6em 0.9em; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: 1rem;
}
#chat-form button[type=submit] {
  padding: 0.6em 1.1em; border-radius: 20px; border: none; background: var(--accent);
  color: white; font-weight: 600;
}

/* --- menu de projetos (sheet) --- */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheet.hidden { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.sheet-content {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto;
  background: var(--bg-card); border-radius: 16px 16px 0 0; padding: 1em;
  padding-bottom: max(1em, env(safe-area-inset-bottom));
}
.sheet-content h2 { margin: 0 0 0.6em; font-size: 1.1rem; }
.project-item {
  display: flex; align-items: center; gap: 0.6em; padding: 0.7em 0.4em;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.project-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim); flex: 0 0 auto; }
.project-item .dot.live { background: var(--ok); }
.project-item .label { flex: 1; }
.project-item .hint { color: var(--fg-dim); font-size: 0.8rem; }
#sheet-close {
  width: 100%; margin-top: 0.8em; padding: 0.7em; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg);
}

.xterm { height: 100%; padding: 4px; }