/* Personal assistant web UI. Mobile-first; light and dark themes follow the OS. */

:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1d2025;
  --muted: #6b7280;
  --border: #e3e6ea;
  --accent: #2f6fed;
  --accent-text: #ffffff;
  --user-bg: #2f6fed;
  --user-text: #ffffff;
  --assistant-bg: #ffffff;
  --error-bg: #fdecec;
  --error-text: #a12626;
  --radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171b;
    --surface: #1f2228;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --border: #2e323a;
    --accent: #5b8def;
    --user-bg: #3b6fd8;
    --assistant-bg: #262a31;
    --error-bg: #3a1f22;
    --error-text: #f4a9a9;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* 16px minimum on inputs stops iOS Safari from zooming on focus. */
button, input, textarea { font: inherit; color: inherit; }

.muted { color: var(--muted); }
.small { font-size: 0.8rem; }

button { cursor: pointer; }
button:disabled { opacity: 0.55; cursor: default; }

.primary {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.link-button {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--accent);
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ code entry */

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

.login-card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.login-card h1 { margin: 0; font-size: 1.6rem; font-weight: 650; }
.login-card p { margin: 0; }

#code-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  text-align: center;
}

.status { min-height: 1.45em; font-size: 0.92rem; color: var(--muted); }
.status.error { color: var(--error-text); }

/* ------------------------------------------------------------------ chat */

.chat {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(4px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.topbar .title { font-weight: 650; }
#session-info { margin-left: auto; white-space: nowrap; }

.messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px max(12px, env(safe-area-inset-right)) 16px max(12px, env(safe-area-inset-left));
}

.empty { margin: auto; }

.msg { display: flex; flex-direction: column; max-width: min(85%, 680px); }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant, .msg.pending, .msg.error { align-self: flex-start; align-items: flex-start; }

.bubble {
  padding: 9px 14px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.user .bubble {
  background: var(--user-bg);
  color: var(--user-text);
  border-bottom-right-radius: 6px;
}

.assistant .bubble,
.pending .bubble {
  background: var(--assistant-bg);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
}

.pending .bubble { color: var(--muted); }

.error .bubble {
  background: var(--error-bg);
  color: var(--error-text);
  border-bottom-left-radius: 6px;
}

/* Which backend answered: deliberately small and quiet. */
.meta {
  margin: 3px 8px 0;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.85;
}
.meta.backend-ollama::before { content: "● "; color: #c28a14; }
.meta.backend-claude::before { content: "● "; color: #8a8f98; }

/* Memory changes made by a reply: small, quiet confirmations under the bubble. */
.saved {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.saved-item {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}
.saved-item::before { content: "✓ "; color: #2e9d5b; }
.saved-item.deleted::before { content: "✕ "; color: var(--error-text); }

.retry-button {
  margin: 4px 6px 0;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
}

.dots::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.composer textarea {
  flex: 1;
  min-height: 44px;
  max-height: 160px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg);
  line-height: 1.35;
  resize: none;
}

.composer .primary { border-radius: 22px; }

.noscript { padding: 24px; text-align: center; }