: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;
  -webkit-overflow-scrolling: touch;
}

.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 --- */
/* overflow:hidden aqui evita que o conteudo do xterm (que nao e redimensionado
   de proposito quando o teclado abre/fecha) vaze visualmente por cima da
   barra de digitar enquanto o container encolhe. */
#term { flex: 1; min-height: 0; background: #000; overflow: hidden; }
/* iOS as vezes ignora overflow-y:scroll do xterm-viewport dentro de um flex
   column sem essa propriedade — sem ela o dedo arrasta mas o conteudo nao anda. */
#term .xterm-viewport { -webkit-overflow-scrolling: touch; touch-action: pan-y; }

#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;
}

/* --- alternancia chat / terminal cru (botao "Teclado" / "Chat") --- */
#view-terminal:not(.raw-mode) #term { display: none; }
#view-terminal:not(.raw-mode) #keybar { display: none; }
#view-terminal.raw-mode #chat { display: none; }

/* --- chat em bolhas --- */
#chat {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0.8em; display: flex; flex-direction: column; gap: 0.6em;
}
.msg-bubble {
  max-width: 85%; padding: 0.5em 0.8em; border-radius: 14px; font-size: 0.95rem;
  line-height: 1.4; overflow-wrap: break-word;
}
.msg-bubble.user {
  align-self: flex-end; background: var(--accent); color: white; border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}
.msg-bubble.assistant {
  align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border);
  border-bottom-left-radius: 4px; max-width: 92%;
}
.msg-bubble.assistant p { margin: 0.4em 0; }
.msg-bubble.assistant p:first-child { margin-top: 0; }
.msg-bubble.assistant p:last-child { margin-bottom: 0; }
.msg-bubble.assistant pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6em 0.8em; overflow-x: auto; margin: 0.5em 0;
}
.msg-bubble.assistant code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em;
}
.msg-bubble.assistant :not(pre) > code {
  background: var(--bg); border-radius: 4px; padding: 0.1em 0.35em;
}
.msg-bubble.assistant ul, .msg-bubble.assistant ol { margin: 0.4em 0; padding-left: 1.3em; }

.msg-thinking { margin: 0.4em 0; color: var(--fg-dim); font-size: 0.85em; }
.msg-thinking summary { cursor: pointer; }
.msg-thinking-body { margin-top: 0.3em; white-space: pre-wrap; }

.msg-actions { margin-top: 0.4em; display: flex; flex-wrap: wrap; gap: 0.35em; }
.msg-actions summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.25em 0.6em; border-radius: 20px; background: var(--bg); border: 1px solid var(--border);
  font-size: 0.8rem; color: var(--fg-dim);
}
.msg-actions summary::-webkit-details-marker { display: none; }
.msg-actions .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-dim); flex: 0 0 auto; }
.msg-actions .chip-dot.pending { background: var(--fg-dim); animation: chip-pulse 1s ease-in-out infinite; }
.msg-actions .chip-dot.done { background: var(--ok); }
.msg-actions .chip-dot.error { background: var(--danger); }
.msg-actions .chip-preview {
  margin: 0.3em 0 0; padding: 0.4em 0.6em; border-radius: 8px; background: var(--bg);
  font-size: 0.78rem; color: var(--fg-dim); white-space: pre-wrap; overflow-wrap: break-word;
}
@keyframes chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- 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;
}
#btn-attach {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg-dim); display: flex; align-items: center; justify-content: center;
}
#btn-attach svg { width: 20px; height: 20px; display: block; fill: currentColor; }
#btn-attach[disabled] { opacity: 0.5; }

#btn-send {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--accent); color: white; display: flex; align-items: center; justify-content: center;
}
#btn-send svg { width: 20px; height: 20px; display: block; fill: currentColor; }
#btn-send .ico-mic, #btn-send .ico-stop, #btn-send .ico-send { display: none; }
#btn-send[data-mode="mic"] .ico-mic { display: block; }
#btn-send[data-mode="stop"] { background: var(--danger); }
#btn-send[data-mode="stop"] .ico-stop { display: block; }
#btn-send[data-mode="send"] .ico-send { display: block; }

/* --- faixa "ouvindo" (transcricao ao vivo) --- */
#voz-hint {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom));
  padding: 0.6em 0.8em; border-radius: 20px; z-index: 50;
  font-size: 0.85rem; line-height: 1.2; text-align: center;
  background: var(--accent); color: white; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
#voz-hint.danger { background: var(--danger); }

/* --- 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; }