:root {
  --bg: #0f1115;
  --panel: #171a21;
  --border: #2a2e38;
  --text: #e6e8ec;
  --muted: #8b909c;
  --accent: #5b8cff;
  --user-bubble: #2a3550;
  --assistant-bubble: #1f232c;
  --error: #e05252;
  --ok: #4caf6f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 12px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.nav-links {
  display: flex;
  gap: 4px;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 6px;
}

.nav-links a:hover {
  background: var(--panel);
  color: var(--text);
}

.nav-links a.active {
  background: var(--user-bubble);
  color: var(--text);
}

header h1 {
  margin: 0 0 4px 0;
  font-size: 1.4rem;
}

.subtitle {
  margin: 0 0 16px 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.subtitle a, #docs-content a {
  color: var(--accent);
}

/* --------------------------------------------------------------- */
/* Docs page                                                        */
/* --------------------------------------------------------------- */
#docs-content {
  padding-bottom: 40px;
}

.docs-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 24px 0;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
}

.docs-toc a {
  color: var(--muted);
  text-decoration: none;
}
.docs-toc a:hover { color: var(--text); }

#docs-content section {
  margin-bottom: 28px;
}

#docs-content h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

#docs-content p, #docs-content li {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
}

#docs-content code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}

#docs-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 10px 0;
}

#docs-content th, #docs-content td {
  text-align: left;
  padding: 6px 10px;
  border: 1px solid var(--border);
}

#docs-content th {
  background: var(--panel);
}

#connection-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

#connection-bar label {
  font-size: 0.8rem;
  color: var(--muted);
}

#api-base {
  flex: 1 1 240px;
  min-width: 160px;
  background: #0d0f13;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.85rem;
}

#connect-btn, #send-btn, #reset-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

#reset-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

#connect-btn:hover, #send-btn:hover { opacity: 0.9; }

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.status-unknown { background: #555; }
.status-ok { background: var(--ok); }
.status-error { background: var(--error); }

#status-text {
  font-size: 0.78rem;
  color: var(--muted);
}

#model-info {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
#model-info.hidden { display: none; }

#chat-window {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 2px;
  min-height: 200px;
}

.bubble-row {
  display: flex;
}
.bubble-row.user { justify-content: flex-end; }
.bubble-row.assistant { justify-content: flex-start; }

.bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bubble.user { background: var(--user-bubble); border-bottom-right-radius: 4px; }
.bubble.assistant { background: var(--assistant-bubble); border-bottom-left-radius: 4px; }
.bubble.error { background: rgba(224, 82, 82, 0.15); border: 1px solid var(--error); color: #f3b8b8; }
.bubble.pending { color: var(--muted); font-style: italic; }

#composer {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#message-input {
  flex: 1;
  resize: none;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.92rem;
  font-family: inherit;
}

#disclaimer {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  margin-top: 10px;
}

/* --------------------------------------------------------------- */
/* Responsive: phones (Android/iOS) and narrow desktop windows       */
/* --------------------------------------------------------------- */
@media (max-width: 480px) {
  #app { padding: 10px; }

  header h1 { font-size: 1.2rem; }
  .subtitle { font-size: 0.8rem; }

  #connection-bar { flex-direction: column; align-items: stretch; }
  #api-base { width: 100%; }

  /* Stack the composer vertically so Send/Clear stay full-width,
     easy-to-tap touch targets instead of squeezed side-by-side. */
  #composer { flex-direction: column; }
  #message-input { width: 100%; }
  #send-btn, #reset-btn {
    width: 100%;
    padding: 12px 14px;   /* >= 44px tall touch target */
    font-size: 0.95rem;
  }

  .bubble { max-width: 92%; }

  .nav-links a { padding: 8px 10px; }
}

/* Any coarse pointer (touchscreen), regardless of viewport width --
   covers a small phone browser window resized/split-screened wide. */
@media (pointer: coarse) {
  #connect-btn, #send-btn, #reset-btn {
    min-height: 44px;
  }
  #message-input {
    font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
  }
}