:root {
  --font-size: 15px;
  --line-height: 1.45;
  --msg-gap: 10px;
  --sidebar: #171918;
  --sidebar-raised: #202321;
  --sidebar-hover: #292d2b;
  --sidebar-active: #343936;
  --sidebar-text: #edf0ed;
  --sidebar-muted: #a4aca6;
  --sidebar-line: #343936;
  --paper: #fbfbf9;
  --paper-raised: #ffffff;
  --ink: #1e2320;
  --muted: #6c746e;
  --line: #e4e8e4;
  --line-strong: #d5dbd6;
  --user-bg: #e9f3ef;
  --accent: #1f8f72;
  --accent-dark: #11644f;
  --accent-soft: #dcefe8;
  --tool-bg: #fff7e7;
  --tool-line: #edd9aa;
  --think-bg: #f1effb;
  --think-line: #d9d1f2;
  --danger: #b42318;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Mono", monospace;
  --sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: #1268a2; }

.app {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  color: var(--sidebar-text);
  background: var(--sidebar);
  border-right: 1px solid #0b0c0c;
}
.side-top {
  flex: 0 0 auto;
  padding: 14px 12px 11px;
  border-bottom: 1px solid var(--sidebar-line);
}
.logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin-bottom: 8px;
  padding: 2px 3px;
}
.logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 750;
}
.logo-text { display: flex; flex-direction: column; min-width: 0; }
.logo-text strong { font-size: 14px; font-weight: 700; line-height: 1.2; }
.logo-text span { margin-top: 2px; color: var(--sidebar-muted); font-size: 11px; line-height: 1.2; }
.side-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 5px 10px;
  color: var(--sidebar-muted);
  font-size: 11px;
}
.side-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-summary span:last-child { color: #c8d1ca; }
.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  color: var(--sidebar-muted);
  background: var(--sidebar-raised);
  border: 1px solid var(--sidebar-line);
  border-radius: 8px;
}
.search-wrap:focus-within { border-color: #5e7669; box-shadow: 0 0 0 2px rgba(31,143,114,.18); }
.search-wrap input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--sidebar-text);
  background: transparent;
  font-size: 13px;
}
.search-wrap input::placeholder { color: #7e8881; }
.search-wrap kbd {
  padding: 1px 5px;
  color: #9ba59d;
  border: 1px solid #485049;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
}
.side-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.side-controls select {
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  color: var(--sidebar-text);
  background: var(--sidebar-raised);
  border: 1px solid var(--sidebar-line);
  border-radius: 7px;
  outline: 0;
  font-size: 12px;
}
.side-controls select:focus { border-color: #5e7669; }
.check-line, .settings-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 9px 4px 0;
  color: var(--sidebar-muted);
  font-size: 12px;
  user-select: none;
}
.check-line input, .settings-check input, .chip input { accent-color: var(--accent); }
.check-hint { margin-left: auto; color: #78837b; font-size: 10px; }
.conv-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.conv-list::-webkit-scrollbar, .thread::-webkit-scrollbar { width: 9px; }
.conv-list::-webkit-scrollbar-thumb { background: #3d4640; border: 2px solid var(--sidebar); border-radius: 8px; }
.conv-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 58px;
  gap: 5px;
  margin: 0 0 2px;
  padding: 9px 10px;
  color: var(--sidebar-text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
}
.conv-item:hover { background: var(--sidebar-hover); }
.conv-item.active { background: var(--sidebar-active); }
.conv-item.empty-conv { opacity: .72; }
.conv-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.conv-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.empty-mark {
  flex: 0 0 auto;
  padding: 1px 4px;
  color: #9aa39c;
  border: 1px solid #566058;
  border-radius: 4px;
  font-size: 9px;
}
.conv-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--sidebar-muted);
  font-size: 10px;
  line-height: 1.2;
}
.conv-meta time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
}
.source-roxy { color: #bdebdc; background: #214b3d; }
.source-edge { color: #c9dcff; background: #294365; }
.side-empty { padding: 28px 10px; color: var(--sidebar-muted) !important; }

.chat {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}
.chat-top {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px 22px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
}
.chat-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-title-wrap { min-width: 0; }
.chat-top h1 {
  max-width: min(58vw, 720px);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.chat-sub {
  max-width: min(64vw, 820px);
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.chat-tools { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 9px;
  color: #47504a;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-size: 12px;
  user-select: none;
}
.chip:has(input:checked) { color: var(--accent-dark); background: var(--accent-soft); border-color: #a5d6c5; }
.icon-btn, .mobile-icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #4c5550;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  text-decoration: none;
}
.icon-btn:hover, .mobile-icon-btn:hover { color: var(--accent-dark); background: #f0f5f2; border-color: #a8c8bb; }
.icon-btn:disabled { cursor: not-allowed; opacity: .38; }
.mobile-icon-btn { display: none; border: 0; background: transparent; }

.settings-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto auto;
  align-items: end;
  gap: 10px 18px;
  padding: 11px 22px 12px;
  background: #f3f6f3;
  border-bottom: 1px solid var(--line);
}
.settings-panel.hidden { display: none; }
.settings-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.settings-row label { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.settings-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.settings-check { margin: 0; color: var(--muted); white-space: nowrap; }
.settings-actions { display: flex; justify-content: flex-end; }
.text-btn {
  padding: 7px 10px;
  color: #47504a;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-size: 11px;
}
.text-btn:hover { background: #eef3ef; }

.thread {
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}
.thread::-webkit-scrollbar-thumb { background: #c7cfca; border: 2px solid var(--paper); border-radius: 8px; }
.thread.empty { display: grid; place-items: center; overflow: hidden; }
.welcome { max-width: 420px; padding: 28px; text-align: center; }
.welcome-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  color: #fff;
  background: var(--accent);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}
.welcome h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; }
.welcome p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.stream { width: min(900px, 100%); margin: 0 auto; padding: 16px 24px 26px; }
.turn {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  padding: var(--msg-gap) 0;
}
.turn + .turn { border-top: 1px solid #edf0ed; }
.turn.user { grid-template-columns: minmax(0, 1fr) 32px; }
.turn.user .avatar { grid-column: 2; grid-row: 1; }
.turn.user .bubble { grid-column: 1; grid-row: 1; align-items: flex-end; }
.turn.user .bubble-meta { justify-content: flex-end; }
.turn.tool, .turn.thinking { opacity: .96; }
.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  color: #fff;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}
.avatar.user { background: #3b6f61; }
.avatar.assistant { background: var(--accent); }
.avatar.tool { background: #ad781c; }
.avatar.thinking { background: #6d5ca8; }
.bubble { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.bubble-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 18px; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.bubble-meta .who { color: var(--ink); font-size: 12px; font-weight: 700; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 5px;
  color: #68716b;
  background: #eef1ee;
  border-radius: 4px;
  font-size: 9px;
}
.tag.think { color: #5b4c94; background: #ebe7f8; }
.tag.tool { color: #865d14; background: #fff0cc; }
.tag.file { color: #8b5a17; background: #ffebc2; }
.tag.source-tag { color: var(--accent-dark); background: var(--accent-soft); }
.content {
  max-width: 100%;
  color: #202522;
  font-size: var(--font-size);
  line-height: var(--line-height);
  overflow-wrap: anywhere;
}
.content.md > :first-child { margin-top: 0; }
.content.md > :last-child { margin-bottom: 0; }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { margin: .72em 0 .28em; line-height: 1.25; }
.content h1 { font-size: 1.28em; }
.content h2 { font-size: 1.18em; }
.content h3 { font-size: 1.08em; }
.content h4, .content h5, .content h6 { font-size: 1em; }
.content p { margin: 0 0 .42em; }
.content strong { font-weight: 700; }
.content code { padding: .1em .32em; color: #244438; background: #edf3ef; border-radius: 4px; font-family: var(--mono); font-size: .88em; }
.content pre { max-width: 100%; margin: .5em 0; padding: 11px 12px; overflow: auto; color: #e8eee9; background: #1d2420; border-radius: 7px; }
.content pre code { padding: 0; color: inherit; background: transparent; font-size: 12px; line-height: 1.5; }
.content ul, .content ol { margin: .22em 0 .5em 1.25em; padding: 0; }
.content li { margin: .08em 0; }
.content a { text-decoration: none; }
.content a:hover { text-decoration: underline; }
.content blockquote { margin: .45em 0; padding: .16em 0 .16em .85em; color: #59635c; border-left: 3px solid #cbd4cd; }
.content hr { margin: .7em 0; border: 0; border-top: 1px solid var(--line); }
.content img { display: block; max-width: 100%; margin: .45em 0; border-radius: 7px; }
.user-card { display: inline-block; max-width: min(78ch, 100%); padding: 9px 12px; color: #1d3c32; background: var(--user-bg); border: 1px solid #c8e2d8; border-radius: 8px; }
.user-card.content.md p { margin-bottom: .3em; }
.user-card.content.md p:last-child { margin-bottom: 0; }
.turn.thinking .bubble > .content, .turn.tool .bubble > .content { max-width: 100%; padding: 9px 11px; background: var(--think-bg); border: 1px solid var(--think-line); border-radius: 7px; }
.turn.tool .bubble > .content { background: var(--tool-bg); border-color: var(--tool-line); }
.file-card { width: min(100%, 720px); overflow: hidden; background: #fffaf0; border: 1px solid var(--tool-line); border-radius: 7px; }
.file-head { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; color: #865d14; background: #fff1d2; border-bottom: 1px solid var(--tool-line); font-size: 11px; font-weight: 700; }
.file-preview { max-height: 190px; padding: 9px 10px; overflow: auto; }
.file-full { padding: 8px 10px 10px; border-top: 1px solid var(--tool-line); }
.file-full summary { cursor: pointer; color: #865d14; font-size: 11px; }
.file-full .content { max-height: 500px; margin-top: 8px; overflow: auto; }
.md-table-wrap { max-width: 100%; margin: .5em 0; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.content table { width: 100%; border-collapse: collapse; font-size: .94em; }
.content th, .content td { padding: .4em .62em; vertical-align: top; border-bottom: 1px solid #edf0ed; }
.content th { color: #344039; background: #f1f4f1; font-weight: 700; text-align: left; }
.content tr:last-child td { border-bottom: 0; }
.math-inline { display: inline-block; padding: 0 .12em; color: #26332d; font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; font-style: italic; }
.math-block { display: block; max-width: 100%; margin: .55em 0; padding: .55em .75em; overflow-x: auto; color: #26332d; text-align: center; background: #f2f5f2; border: 1px solid #dfe7e1; border-radius: 7px; }
.math-inner { font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; font-size: 1.05em; line-height: 1.35; white-space: nowrap; }
.tex-frac { display: inline-flex; flex-direction: column; align-items: center; margin: 0 .14em; vertical-align: middle; line-height: 1.05; }
.tex-num { padding: 0 .18em; border-bottom: 1px solid currentColor; }
.tex-den { padding: 0 .18em; }
.tex-text, .tex-op { font-style: normal; }
.tex-over { text-decoration: overline; }
.tex-root { display: inline-flex; align-items: flex-start; }
.tex-radicand { border-top: 1px solid currentColor; }

.chat-foot { padding: 9px 18px 13px; background: var(--paper); border-top: 1px solid var(--line); }
.composer-shell { width: min(900px, 100%); margin: 0 auto; }
.composer-fake { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; color: #8a938c; background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; }
.read-only-dot { width: 7px; height: 7px; flex: 0 0 auto; background: var(--accent); border-radius: 50%; }
.loading, .error { padding: 38px 20px; color: var(--muted); text-align: center; }
.error { color: var(--danger); }
.sidebar-backdrop { display: none; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); transform: translateX(-102%); transition: transform .18s ease; box-shadow: 12px 0 30px rgba(0,0,0,.2); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 19; display: block; visibility: hidden; background: rgba(14,18,15,.42); opacity: 0; transition: opacity .18s ease, visibility .18s ease; }
  body.sidebar-open .sidebar-backdrop { visibility: visible; opacity: 1; }
  .mobile-icon-btn { display: grid; }
  .logo-row .mobile-icon-btn { display: grid; margin-right: 1px; color: var(--sidebar-muted); }
  .chat-top { min-width: 0; padding: 9px 12px; }
  .chat-heading { min-width: 0; flex: 1 1 auto; }
  .chat-top h1 { max-width: 45vw; }
  .chat-sub { max-width: 48vw; }
  .stream { padding-right: 14px; padding-left: 14px; }
  .settings-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 14px; padding-left: 14px; }
  .settings-check { margin-top: 0; }
}

@media (max-width: 560px) {
  .chat-tools { min-width: 0; gap: 4px; flex: 0 1 auto; }
  .chip { justify-content: center; width: 30px; min-height: 30px; padding: 0; font-size: 11px; }
  .chip span { font-size: 0; }
  .chip span::after { font-size: 10px; }
  .chip:has(#showThinking) span::after { content: "思"; }
  .chip:has(#showTools) span::after { content: "工"; }
  .icon-btn { width: 30px; height: 30px; }
  #openUrl { display: none; }
  .chat-top h1 { max-width: 36vw; font-size: 15px; }
  .chat-sub { max-width: 38vw; font-size: 10px; }
  .stream { padding: 10px 10px 20px; }
  .turn, .turn.user { grid-template-columns: 27px minmax(0, 1fr); gap: 8px; }
  .turn.user .avatar { grid-column: 1; }
  .turn.user .bubble { grid-column: 2; align-items: flex-start; }
  .turn.user .bubble-meta { justify-content: flex-start; }
  .avatar { width: 27px; height: 27px; border-radius: 7px; font-size: 10px; }
  .user-card { max-width: 100%; }
  .settings-panel { grid-template-columns: 1fr; }
  .settings-actions { justify-content: flex-start; }
  .chat-foot { padding-right: 10px; padding-left: 10px; }
  .composer-fake { min-height: 34px; padding: 0 10px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-backdrop { transition: none; }
}