:root {
  --bg: #f6f7f9; --card: #fff; --fg: #1d2330; --muted: #5f6778; --line: #e3e6ec;
  --accent: #2a62d6; --good: #17803f; --bad: #c2410c; --bubble-user: #2f6fed; --bubble-user-fg: #fff;
  --on-accent: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111418; --card: #1a1f26; --fg: #e6e9ef; --muted: #8b93a5; --line: #2a313b;
          --accent: #6b9bff; --bubble-user: #3b6fd8; --on-accent: #0b1220; --good: #4cc27a; --bad: #f2875a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 15px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", sans-serif; }
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 1.35rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.error { color: var(--bad); font-weight: 600; }

.top { position: sticky; top: 0; z-index: 5; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
       padding: .6rem 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; color: var(--fg); }
.top nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.top nav a, .top nav .soon { padding: .25rem .6rem; border-radius: 6px; }
.top nav a.on { background: var(--accent); color: var(--on-accent); }
.top nav .soon { color: var(--muted); opacity: .55; cursor: not-allowed; }
.top nav .soon::after { content: " ·待接入"; font-size: .7rem; }
.logout button { background: none; color: var(--muted); border: 1px solid var(--line); }

main { max-width: 1000px; margin: 0 auto; padding: 16px; }
main.narrow { max-width: 420px; padding-top: 10vh; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.stack { display: flex; flex-direction: column; gap: .8rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--muted); }
input, select, textarea, button { font: inherit; color: var(--fg); }
input, select, textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; min-width: 0; }
button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: .5rem .9rem; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--fg); }
.stat small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { font-size: 1.15rem; font-weight: 600; } .stat small { color: var(--muted); font-size: .75rem; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters input[name=q], .filters input[name=text] { flex: 1 1 220px; }

.list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.list .row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.list .row:last-child { border-bottom: 0; }
.list .row.v-important { border-left: 3px solid var(--good); }
.list .row.v-unimportant { opacity: .6; }
.list .main { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--fg); }
.subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.list.compact .row { padding: 6px 10px; }
.empty { padding: 16px; color: var(--muted); text-align: center; }
.judge { display: flex; gap: 4px; flex-shrink: 0; }
.judge button { background: transparent; border: 1px solid var(--line); color: var(--fg); padding: .2rem .5rem; }
.judge button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.judge.big { margin: .6rem 0 1rem; flex-wrap: wrap; }
.pager { display: flex; justify-content: space-between; margin-top: 12px; }
.subject { overflow-wrap: anywhere; }
.body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; background: var(--bg); padding: 12px; border-radius: 8px; max-height: 70vh; overflow: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.table th { white-space: nowrap; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.table td:first-child { overflow-wrap: anywhere; }

/* chat */
/* chat page: header + main fill exactly one screen, the log scrolls inside */
body:has(main.chat-layout) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
main.chat-layout { max-width: 1100px; width: 100%; display: grid; grid-template-columns: 220px 1fr; gap: 16px;
                   flex: 1; min-height: 0; padding-bottom: 0; }
.threads { overflow: auto; padding-bottom: 16px; }
.threads ul { list-style: none; padding: 0; margin: 10px 0 0; }
.threads li { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; }
.threads li.on { background: var(--card); border: 1px solid var(--line); }
.threads li a { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threads li small { color: var(--muted); font-size: .72rem; }
.wide { width: 100%; }
.chat { display: flex; flex-direction: column; min-height: 0; }
.log { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px; }
.msg { display: flex; } .msg.user { justify-content: flex-end; }
.bubble { max-width: 85%; padding: 10px 13px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
          white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user .bubble { background: var(--bubble-user); color: var(--bubble-user-fg); border-color: transparent; }
.bubble .tools { display: block; color: var(--muted); font-size: .78rem; margin-bottom: 4px; }
/* the tools behind a reply, folded to one line */
details.tools { color: var(--muted); font-size: .8rem; margin: 0 0 4px 2px; max-width: 92%; }
details.tools summary { cursor: pointer; list-style: none; }
details.tools summary::-webkit-details-marker { display: none; }
details.tools ol { margin: 4px 0 2px; padding-left: 1.4em; }
details.tools li { overflow-wrap: anywhere; }
.bubble.pending { color: var(--muted); }
.composer { display: flex; gap: 8px; padding: 10px 0 max(16px, env(safe-area-inset-bottom)); background: var(--bg); }
.composer textarea { flex: 1; resize: none; }

/* tablets: drop the "·待接入" suffix so the nav stays one row (greyed + title tooltip still mark it) */
@media (max-width: 1100px) {
  .top nav { flex-wrap: nowrap; }
  .top nav .soon::after { content: none; }
}
@media (max-width: 720px) {
  /* header: brand + logout on row 1, nav as one horizontally scrolling row */
  .top { gap: .4rem .75rem; padding: .4rem 12px 0; }
  .brand { flex: 1; }
  .top nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
             margin: 0 -12px; padding: 0 12px .4rem; -webkit-overflow-scrolling: touch; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a, .top nav .soon { white-space: nowrap; flex-shrink: 0; }
  main { padding: 12px; }
  main.narrow { padding-top: 6vh; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .stat { padding: 8px 10px; } .stat span { font-size: 1rem; }
  .filters input[name=q] { flex: 1 0 100%; }
  .filters select { flex: 1 1 0; min-width: 6em; }
  .filters button { flex: 0 0 auto; }
  select { min-width: 5em; }
  main.chat-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 8px; }
  .threads { max-height: 96px; padding-bottom: 0; }
  .threads ul { margin-top: 6px; }
  .bubble { max-width: 92%; }
  .table th:nth-child(5), .table td:nth-child(5) { display: none; }
  .table td:first-child { word-break: break-all; }
  /* iOS zooms into inputs with font-size < 16px */
  input, select, textarea { font-size: 16px; }
}

/* touch devices: >= 40px tap targets */
@media (pointer: coarse), (max-width: 720px) {
  .top nav a, .top nav .soon, .logout button { min-height: 40px; display: inline-flex; align-items: center; }
  .judge button { min-width: 44px; min-height: 40px; }
  button, select, input { min-height: 40px; }
  .pager a, .back { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .4rem; }
  .table td a { display: inline-block; padding: .35rem 0; }
}

/* chat ratings + memory page (personal-70) */
.msg.assistant { flex-direction: column; align-items: flex-start; }
.rate { display: flex; gap: 4px; margin-top: 4px; }
.rate button { background: transparent; border: 1px solid var(--line); color: var(--fg); padding: .15rem .55rem; min-height: 32px; }
.rate button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (pointer: coarse), (max-width: 720px) { .rate button { min-height: 40px; min-width: 44px; } }
.badge { display: inline-block; font-size: .72rem; padding: 0 .4rem; border-radius: 4px; background: var(--line); color: var(--fg); margin-right: 4px; vertical-align: 1px; }
.badge.k-lesson { background: #f5d76e; color: #3d3000; }
.badge.k-preference { background: #b7e4c7; color: #10331d; }
.ok { color: var(--good); font-weight: 600; }
.grow { flex: 1 1 320px; margin: 0; }
.section { margin-top: 1.4rem; }
.wrap { white-space: normal; }