/* Phone page (web/). Light and dark follow the phone's setting. */
:root {
  --bg: #f6f6f4; --surface: #ffffff; --text: #1d1d1b; --muted: #6b6b66; --line: #e3e3de;
  --accent: #2f7f7e; --accent-text: #ffffff; --accent-soft: #e2f1f0; --warn: #b4532a;
  --user: #e8eef9; --tutor: #eef5ef;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212; --surface: #1c1c1b; --text: #ecece8; --muted: #a2a29b; --line: #2e2e2c;
    --accent: #5fb3b1; --accent-text: #0d1c1c; --accent-soft: #1f3534; --warn: #e48a62;
    --user: #24304a; --tutor: #22302a;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
.hidden { display: none !important; }

.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.top h1 { flex: 1; margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-btn, .back {
  border: 0; background: none; color: var(--accent); font: inherit; font-size: 20px; padding: 4px 6px; cursor: pointer;
}
.back { font-size: 16px; padding-left: 0; }

main { padding: 12px 16px calc(84px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line);
}
.tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
  color: var(--muted); text-decoration: none; font-size: 12px;
}
.tabs a span { font-size: 20px; line-height: 1; }
.tabs a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.card h2 { margin: 0 0 8px; font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.note { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.error { color: var(--warn); }

.stats { display: flex; gap: 10px; }
.stat { flex: 1; }
.stat b { display: block; font-size: 22px; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 10px 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; }
.list a.row { display: block; color: inherit; text-decoration: none; }
.row-title { font-weight: 600; }
.row-meta { font-size: 13px; color: var(--muted); }
.pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); margin-left: 6px; vertical-align: 1px; }
.pill.warn { background: none; border: 1px solid var(--warn); color: var(--warn); }
.soon { color: var(--warn); font-weight: 600; }

details > summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 6px 0; }

.msg { border-radius: 14px; padding: 10px 12px; margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { background: var(--user); margin-left: 12%; }
.msg.assistant { background: var(--tutor); margin-right: 6%; }
.msg .who { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.placeholder { font-style: italic; color: var(--muted); }

.q { border-top: 1px solid var(--line); padding: 12px 0; }
.q:first-of-type { border-top: 0; }
.q h3 { margin: 0 0 6px; font-size: 15px; }
.q .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 8px 0 2px; }
.q p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.result-correct { color: var(--accent); }
.result-wrong, .result-partial { color: var(--warn); }

.guide-item { padding: 8px 0; border-top: 1px solid var(--line); }
.guide-item:first-child { border-top: 0; }
.guide-item p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.signin { text-align: center; padding-top: 6vh; }
.signin img { width: 72px; height: 72px; }
.signin h2 { margin: 12px 0 4px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 340px;
  font: inherit; font-weight: 600; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn + .btn { margin-top: 8px; }
.g { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font: 700 14px/1 Arial, sans-serif; }
.field { display: flex; gap: 8px; max-width: 340px; margin: 8px auto 0; }
.field input {
  flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.field .btn { width: auto; }
.or { margin: 22px 0 6px; font-size: 14px; color: var(--muted); }

/* Chatting and Got it (0.46.0). */
.new-chat { text-decoration: none; margin-bottom: 8px; max-width: none; }
.topic { display: flex; gap: 10px; align-items: flex-start; }
.topic > div { flex: 1; min-width: 0; }
.got {
  flex: none; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--accent); background: none; color: var(--accent);
}
.got:disabled { opacity: 0.5; }
.chat-info { margin-bottom: 8px; }
.course-pick {
  font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 10px; width: 100%;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.msgs { padding-bottom: 76px; }
.msg .noted { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.thinking { color: var(--muted); font-style: italic; }
.composer {
  position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 4;
  display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px; background: var(--bg); border-top: 1px solid var(--line);
}
.composer textarea {
  flex: 1; min-width: 0; resize: none; font: inherit; padding: 9px 12px; border-radius: 18px; max-height: 160px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.composer .send {
  flex: none; font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 18px; cursor: pointer;
  border: 0; background: var(--accent); color: var(--accent-text);
}
.composer .send:disabled { opacity: 0.5; }
@media (min-width: 760px) { .composer { left: 50%; transform: translateX(-50%); width: 720px; } }