/* PaperLu's look (this is its economics edition): white, a #FAFAFB sidebar, thin lines, and
   its logo teal #1c6d74 for what acts — after apps/web/src/app/globals.css (--pl-*, --teal) */
@font-face {
  font-family: "PaperLu Rounded"; src: url("/brand/Nunito-latin.woff2") format("woff2");
  font-weight: 300 800; font-display: swap;
}
:root {
  --bg: #fbfaf7;
  --panel: #f6f5f1;
  --fg: #1f1e1b;
  --fg-2: #6b6860;
  --muted: #98958c;
  --line: rgba(40, 36, 24, .10);
  --accent: #1c6d74;
  --accent-dark: #134e56;
  --accent-soft: rgba(70, 62, 45, .08);
  --select: rgba(17, 24, 39, .07);
  --link: #1c6d74;
  --bubble: #efede6;
  --code: #f3f2ed;
  --hover: rgba(40, 36, 24, .045);
  --danger: #c4413b;
  --ok: #2f8a53;
  /* The system's own faces, as Claude's and ChatGPT's apps fall back to: on Windows Segoe UI with
     Microsoft YaHei UI, drawn to go together (Inter beside YaHei mixed two x-heights and weights). */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  /* no Chinese web font: Alibaba PuHuiTi was 4.2 MB, ten seconds on the slow uplink, holding up
     the conversation behind it (10-15); Chinese in the system's face, as the prose */
  --side-font: "PaperLu Rounded", ui-rounded, "Avenir Next", "Nunito Sans", "SF Pro Rounded", Inter, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", Consolas, "SFMono-Regular", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1b1d;
    --panel: #141416;
    --fg: #e6e6e8;
    --muted: #8d9097;
    --line: #2c2c30;
    --accent: #53a0a7;
    --accent-dark: #90c1c5;
    --accent-soft: rgba(70, 62, 45, .14);
    --select: rgba(255, 255, 255, .08);
    --fg-2: #b4b6bb;
    --link: #6eb3b8;
    --bubble: #2a2a2e;
    --code: #232327;
    --hover: #26262a;
    --danger: #ef8a84;
    --ok: #7fcf98;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #1b1b1d;
    --panel: #141416;
    --fg: #e6e6e8;
    --muted: #8d9097;
    --line: #2c2c30;
    --accent: #53a0a7;
    --accent-dark: #90c1c5;
    --accent-soft: rgba(70, 62, 45, .14);
    --select: rgba(255, 255, 255, .08);
    --fg-2: #b4b6bb;
    --link: #6eb3b8;
    --bubble: #2a2a2e;
    --code: #232327;
    --hover: #26262a;
    --danger: #ef8a84;
    --ok: #7fcf98;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
.muted { color: var(--muted); }
.error { color: var(--danger); margin: 0; font-size: 14px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* login */
.login { height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); display: flex; flex-direction: column; gap: 8px; }
.login-card h1 { margin: 0; font-size: 26px; }
.login-card p { margin: 0 0 12px; }
.login-card label { font-size: 13px; color: var(--muted); margin-top: 6px; }
.login-card input {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg);
}
.primary {
  margin-top: 14px; padding: 10px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--bg); font-weight: 600;
}

/* layout */
.app { height: 100%; display: flex; }
.sidebar {
  width: 260px; flex: none; background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 16px 12px; gap: 12px;
}
.brand { font-weight: 700; font-size: 18px; padding: 0 8px; }
/* sidebar tree: projects as folders with their conversations */
.section-head {
  display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 0;
  font-size: 12px; color: var(--muted); letter-spacing: .04em;
}
.icon-btn {
  border: 0; background: none; color: var(--muted); padding: 0 5px; border-radius: 6px;
  font-size: 15px; line-height: 22px; min-width: 24px;
}
.icon-btn:hover { background: var(--bg); color: var(--accent); }
.tree { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.project-row {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px;
  cursor: pointer; min-width: 0; color: var(--fg);
}
.project-row:hover { background: var(--bg); }
.project-row .caret { width: 10px; flex: none; color: var(--muted); font-size: 11px; }
.project-row .folder { flex: none; font-size: 13px; }
.project-row .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.project-group.current > .project-row .title { color: var(--accent); }
.row-actions { display: flex; gap: 2px; flex: none; visibility: hidden; position: relative; }
.project-row:hover .row-actions, .project-row:focus-within .row-actions { visibility: visible; }
.row-menu {
  position: absolute; right: 0; top: 26px; z-index: 5; display: flex; flex-direction: column; min-width: 96px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.row-menu button { border: 0; background: none; color: var(--fg); text-align: left; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.row-menu button:hover { background: var(--panel); }
.row-menu button.danger:hover { color: var(--danger); }
.project-group .chat-list { padding-left: 22px; display: flex; flex-direction: column; gap: 1px; }
.tree-note { padding: 4px 10px; font-size: 13px; color: var(--muted); }
.chat-snippet { padding: 0 10px 6px 30px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal.usage-modal { width: min(640px, 92vw); max-width: none; }
.trash-row .link, .share-row .link { color: var(--accent); cursor: pointer; }
.share-actions { display: flex; gap: 10px; }
button.file-download { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.usage-note { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.usage-list { max-height: 50vh; overflow: auto; margin-bottom: 12px; }
.usage-row { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 10px; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--line, rgba(0,0,0,.06)); }
.usage-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-when, .usage-model { color: var(--muted); }
.usage-credits { text-align: right; font-variant-numeric: tabular-nums; }
/* the space details (app.js showSpace): a name and its size; a project opens on click */
.usage-row.space-row { grid-template-columns: 1fr auto; }
.space-project { width: 100%; border-width: 1px 0 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.space-project:hover { color: var(--accent); }
.tree-more {
  align-self: flex-start; border: 0; background: none; color: var(--muted); font-size: 12.5px;
  padding: 3px 10px; border-radius: 6px;
}
.tree-more:hover { color: var(--accent); background: var(--bg); }
.dot.queued { background: var(--muted); }
.chat-title .crumb { color: var(--muted); font-weight: 500; }
.chat-title .crumb-sep { color: var(--muted); margin: 0 6px; }

.new-chat {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--fg); text-align: left;
}
.new-chat:hover { border-color: var(--accent); color: var(--accent); }
.chat-item {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px;
  color: var(--fg); cursor: pointer; min-width: 0;
}
.chat-item:hover { background: var(--bg); }
.chat-item.active { background: var(--accent-soft); }
.chat-item .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.chat-item .dot, .project-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.chat-item .delete {
  border: 0; background: none; color: var(--muted); padding: 0 4px; visibility: hidden;
}
.chat-item:hover .delete { visibility: visible; }
.chat-item .delete:hover { color: var(--danger); }
.account {
  display: flex; justify-content: space-between; align-items: center; padding: 8px;
  border-top: 1px solid var(--line); font-size: 14px;
}
.link { border: 0; background: none; color: var(--muted); padding: 0; }
.link:hover { color: var(--accent); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 48px; }
.chat-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-btn {
  flex: none; border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  border-radius: 8px; padding: 3px 10px; font-size: 13.5px;
}
.topbar-btn:hover, .topbar-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.icon { display: none; border: 0; background: none; color: var(--fg); font-size: 20px; padding: 2px 6px; }
.scroller { flex: 1; overflow-y: auto; padding: 8px 16px 56px; }
.empty { max-width: 760px; margin: 18vh auto 0; text-align: center; }
.empty h2 { font-size: 26px; margin: 0 0 8px; }
.messages { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* messages */
.msg-user { align-self: flex-end; max-width: 85%; background: var(--bubble); padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; }
.turn { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* The answer reads as prose (Claude, ChatGPT: ~16px, line height 1.6-1.75), a step above the UI's
   14px; a little space between Chinese and Latin or digits where the browser can (text-autospace). */
.answer { min-width: 0; word-break: break-word; text-autospace: normal; } /* size: the theme block below */
.answer strong { font-weight: 600; }
.answer > :first-child { margin-top: 0; }
.answer > :last-child { margin-bottom: 0; }
.answer pre { background: var(--code); padding: 12px; border-radius: 8px; overflow-x: auto; font: 13px/1.55 var(--mono); }
.answer code { font-family: var(--mono); font-size: 13px; background: var(--code); padding: 1px 4px; border-radius: 4px; }
.answer pre code { background: none; padding: 0; }
/* tables as Codex draws them: a smaller face than the prose, no grid, a strong rule under the
   header and faint ones between rows, cells flush left with the space after them */
.answer .table-wrap { margin: .4em 0 1.2em; overflow-x: auto; }
.answer .viz { position: relative; margin: .4em 0 1em; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.answer .viz-frame { display: block; width: 100%; height: 360px; border: 0; }
/* the whole figure opens it large (the frame would keep the click); a hint in the corner on hover */
.answer .viz-cover { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.answer .viz-hint {
  position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 6px; font-size: 12px; pointer-events: none;
  color: #fff; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .12s;
}
.answer .viz:hover .viz-hint { opacity: 1; }
@media (hover: none) { .answer .viz-hint { opacity: 1; } }
.answer table { border-collapse: separate; border-spacing: 0; width: fit-content; font-size: 12.5px; line-height: 1.6; }
.answer th, .answer td { padding: 9px 22px 9px 0; vertical-align: top; text-align: start; text-wrap: pretty; }
.answer td { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.answer th { padding-block: 7px; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); }
/* a header word stays whole (题数 not 题/数); a right- or center-aligned column holds numbers or short labels */
.answer th { word-break: keep-all; }
.answer th[align], .answer td[align], .answer th.short, .answer td.short { white-space: nowrap; }
.answer th[align="right"], .answer td[align="right"] { text-align: right; }
.answer th[align="center"], .answer td[align="center"] { text-align: center; }
.answer th:last-child, .answer td:last-child { padding-right: 0; }
.answer tbody tr:last-child td { border-bottom: 0; }
.answer p { margin: 0 0 .9em; }
.answer a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.answer a:hover { text-decoration-color: var(--accent); }
.answer ul, .answer ol { margin: .3em 0 .9em; padding-left: 1.4em; }
.answer li { margin: .1em 0; }
.answer li::marker { color: var(--muted); }
.answer h1, .answer h2, .answer h3, .answer h4 { line-height: 1.45; margin: 1.4em 0 .5em; font-weight: 600; }
.answer h1 { font-size: 1.3em; }
.answer h2 { font-size: 1.2em; margin-top: 1.6em; }
.answer h3 { font-size: 1.08em; }
/* a chain of steps (paragraph renderer): dots on a thin line, the last one, where it ends, filled */
.answer ol.flow { list-style: none; margin: .5em 0 1.1em; padding: 0; }
.answer ol.flow li { position: relative; margin: 0; padding: 0 0 12px 24px; line-height: 1.65; }
.answer ol.flow li:last-child { padding-bottom: 0; font-weight: 600; }
.answer ol.flow li::before {
  content: ""; position: absolute; left: 3px; top: calc(.825em - 5px); width: 10px; height: 10px; box-sizing: border-box;
  border: 2px solid var(--accent); border-radius: 50%; background: var(--bg);
}
.answer ol.flow li:last-child::before { background: var(--accent); }
.answer ol.flow li::after {
  content: ""; position: absolute; left: 7.5px; top: calc(.825em + 7px); bottom: -3px; width: 1px;
  background: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.answer ol.flow li:last-child::after { display: none; }
.answer h4 { font-size: 1em; }
.answer blockquote { margin: .8em 0; padding: 2px 14px; border-left: 3px solid var(--line); color: var(--muted); }
.answer hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }

/* activity: one plain line per action, grouped between the agent's messages (like Codex) */
.activity, .act-row { min-width: 0; font-size: 13.5px; color: var(--muted); }
.activity-head, .act-line, .worked-head {
  display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; padding: 3px 0;
  border: 0; background: none; color: var(--muted); font-size: 13.5px; line-height: 1.5; text-align: left;
}
.act-icon { flex: none; display: inline-flex; width: 15px; height: 15px; opacity: .8; }
.act-icon svg, .act-caret svg { width: 100%; height: 100%; }
.act-verb { flex: none; color: var(--fg); font-weight: 500; }
.activity-head .act-verb, .worked-head span:not(.act-icon):not(.act-caret) { color: var(--muted); font-weight: 400; }
.act-detail { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-extra { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: .85; }
.act-row.failed .act-icon, .act-row.failed .act-extra { color: var(--danger); opacity: 1; }
.act-caret {
  flex: none; display: inline-flex; width: 13px; height: 13px; opacity: 0; transition: transform .15s, opacity .15s;
}
.activity-head:hover, .act-line:hover, .worked-head:hover { color: var(--fg); }
.activity-head:hover .act-verb, .worked-head:hover span { color: var(--fg) !important; }
.activity-head:hover .act-caret, .act-line:hover .act-caret, .worked-head:hover .act-caret,
.activity.done > .activity-head .act-caret, .worked-head .act-caret { opacity: .7; }
.activity.open > .activity-head .act-caret, .act-row.open > .act-line .act-caret,
.worked.open > .worked-head .act-caret { transform: rotate(90deg); }
.activity-body {
  display: none; flex-direction: column; margin: 1px 0 4px 7px; padding-left: 14px;
  border-left: 1px solid var(--line);
}
.activity.open > .activity-body { display: flex; }
.activity.single > .activity-head { display: none; }
.activity.single > .activity-body { display: flex; margin: 0; padding: 0; border: 0; }
.worked-body .answer { font-size: 14.5px; }
.act-body { display: none; margin: 4px 0 10px 23px; }
.act-row.open > .act-body { display: block; }
.act-body pre {
  margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--code); color: var(--fg);
  max-height: 360px; overflow: auto; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word;
}
.act-body .answer { color: var(--fg); font-size: 14px; max-height: 420px; overflow-y: auto; padding-right: 6px; }
.act-results { margin: 0; padding-left: 1.4em; color: var(--muted); }
.act-results li { margin: 4px 0; }
.act-results a { color: var(--fg); text-decoration: none; }
.act-results a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.act-host { margin-left: 8px; font-size: 12px; color: var(--muted); }

/* the running action: a light sweeping across its words, as in Codex */
.shimmer {
  color: transparent !important; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--muted) 38%, var(--fg) 50%, var(--muted) 62%);
  background-size: 250% 100%; animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* thinking: while live, a small window with the newest lines, fading out at the top */
.think-preview {
  margin: 0 0 6px 23px; padding-left: 10px; border-left: 2px solid var(--line);
  max-height: 4.8em; overflow: hidden; word-break: break-word; line-height: 1.6;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
  mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
.act-row.open > .think-preview { display: none; }
.think-body { word-break: break-word; line-height: 1.65; max-height: 420px; overflow-y: auto; }
.think-body > :first-child, .think-preview > :first-child { margin-top: 0; }
.think-body p, .think-preview p { margin: 0 0 .5em; }
.think-body strong, .think-preview strong { font-weight: 600; color: var(--fg); }

/* a finished turn: the work folds into one line above the answer ("Worked for …" in Codex) */
.worked { min-width: 0; }
.worked-body {
  display: none; flex-direction: column; gap: 10px; margin: 4px 0 2px 7px; padding: 4px 0 4px 16px;
  border-left: 1px solid var(--line);
}
.worked.open > .worked-body { display: flex; }

/* plan */
.plan { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 14px; }
.plan-head { margin-bottom: 6px; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.todo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.todo li { position: relative; padding-left: 24px; line-height: 1.5; }
.todo li::before {
  content: ""; position: absolute; left: 2px; top: .3em; width: 13px; height: 13px; box-sizing: border-box;
  border: 1.5px solid var(--muted); border-radius: 50%;
}
.todo li.done { color: var(--muted); }
.todo li.done::before { border-color: var(--accent); background: var(--accent); }
.todo li.done::after {
  content: ""; position: absolute; left: 6.5px; top: calc(.3em + 3px); width: 3px; height: 6px;
  border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

.turn-end { font-size: 12.5px; color: var(--muted); }
.turn-cost { font-size: 12px; color: var(--muted); margin-top: 4px; }
.turn-end.fail { color: var(--danger); white-space: pre-wrap; }
.working { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--muted); }
.working-secs { font-size: 12.5px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .shimmer { animation: none; color: var(--muted) !important; background: none; }
  .act-caret { transition: none; }
}

/* composer */
.composer {
  max-width: 760px; width: calc(100% - 32px); margin: 0 auto; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: 18px; padding: 10px 10px 8px 12px; background: var(--bg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
}
.composer-bar { display: flex; align-items: center; gap: 6px; }
.composer-spacer { flex: 1; }
.composer:focus-within { border-color: var(--accent); }
.composer textarea {
  width: 100%; min-height: 26px; padding: 2px 2px 0; border: 0; outline: none; resize: none; font: inherit; color: var(--fg);
  background: transparent; max-height: 220px;
}
.send, .stop {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--bg); font-size: 16px;
}
.send:disabled { opacity: .35; cursor: default; }
.attach {
  flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: none;
  color: var(--muted); font-size: 17px; line-height: 1;
}
.attach:hover { background: var(--panel); color: var(--fg); }
/* attachments inside the composer, as in Codex: thumbnails and file cards, × on hover */
.attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }
.attachment { position: relative; flex: none; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.attachment-image { width: 64px; height: 64px; overflow: hidden; background: #fff; }
.attachment-image img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.attachment-file { display: flex; align-items: center; gap: 8px; height: 64px; max-width: 220px; padding: 0 28px 0 10px; }
.attachment-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); font-size: 18px; }
.attachment-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.attachment-kind { font-size: 11.5px; color: var(--muted); }
/* a long paste, as Codex desktop shows it: a file card titled with the paste's first line */
.attachment-paste { width: 240px; max-width: 100%; box-sizing: border-box; cursor: pointer; color: var(--fg); }
.attachment-paste:hover, .attachment-paste:focus-visible { border-color: var(--accent); outline: none; }
.paste-icon { color: var(--muted); }
.paste-icon svg { width: 20px; height: 20px; }
.paste-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paste-insert {
  padding: 0; border: 0; background: none; font: inherit; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.paste-insert:hover { color: var(--fg); }
.msg-images .attachment-paste { padding-right: 14px; }
.paste-view { display: flex; flex-direction: column; width: min(760px, 100%); }
.paste-view-head { display: flex; align-items: baseline; gap: 10px; }
.paste-view-head .muted { font-size: 13px; }
.paste-view-body {
  flex: 1; min-height: 0; max-height: 62vh; overflow: auto; margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  font-family: inherit; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.attachment.uploading img { opacity: .55; }
.attachment-spinner {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.attachment-file .attachment-spinner { left: 27px; }
/* an upload: a ring that fills, and a line under the tiles with how far (sendFile) */
.attachment-ring {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; transform: rotate(-90deg);
  border-radius: 50%; background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.attachment-file .attachment-ring { position: static; flex: none; width: 34px; height: 34px; margin: 0; box-shadow: none; }
.attachment-ring circle { fill: none; stroke-width: 3.5; }
.attachment-ring .track { stroke: color-mix(in srgb, var(--accent) 16%, transparent); }
.attachment-ring .bar {
  stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 96;
  transition: stroke-dashoffset .25s var(--ease, ease-out);
}
.attachment-ring.busy { animation: spin-ring .9s linear infinite; }
.attachment-ring.busy .bar { stroke-dashoffset: 72; }
@keyframes spin-ring { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.upload-note { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; min-height: 20px; font-size: 12.5px; color: var(--muted); }
.upload-bar { position: relative; flex: none; width: 96px; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, var(--line)); }
.upload-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--accent); transition: width .25s var(--ease, ease-out); }
.upload-text { font-variant-numeric: tabular-nums; }
.upload-cancel { margin-left: auto; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.upload-cancel:hover { background: var(--hover); color: var(--fg); }
.upload-cancel[hidden] { display: none; }
.send-waiting .send { opacity: .55; }
@keyframes spin { to { transform: rotate(360deg); } }
.attachment-remove {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; line-height: 20px; text-align: center;
  opacity: 0; transition: opacity .12s;
}
.attachment:hover .attachment-remove, .attachment-remove:focus-visible { opacity: 1; }
@media (hover: none) { .attachment-remove { opacity: 1; } }
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; background: rgba(0, 0, 0, .78); cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; border-radius: 8px; background: #fff; }
.lightbox-name { color: #eee; font-size: 13px; }
.lightbox-figure { flex: 1; width: min(100%, 1600px); min-height: 0; border: 0; border-radius: 8px; background: #fff; cursor: default; }
.lightbox-bar { display: flex; gap: 8px; cursor: default; }
.lightbox-btn { padding: 5px 12px; border: 0; border-radius: 6px; font-size: 13px; color: #1f2328; background: #fff; cursor: pointer; }
.lightbox-btn:hover { background: #e8e8e8; }
/* goal mode (Codex's /goal): a switch in the composer, a tag on the message, rounds, outcome */
.goal-toggle {
  flex: none; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--muted); font-size: 13px; white-space: nowrap;
}
.goal-toggle:hover { color: var(--fg); }
.goal-toggle[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.effort {
  flex: none; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--muted); font-size: 13px; cursor: pointer;
}
.effort:hover { color: var(--fg); }
.composer.goal-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.msg-images { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 85%; margin-bottom: -4px; }
.msg-images .thumb { height: 96px; }
.msg-file { padding-right: 14px; cursor: pointer; font: inherit; color: var(--fg); text-align: left; }
.msg-file:hover { border-color: var(--accent); }
.msg-user-wrap.steer .msg-images { align-self: flex-end; margin-bottom: 6px; }
.act-image { display: block; max-width: min(100%, 360px); max-height: 260px; border-radius: 8px; border: 1px solid var(--line); }
.msg-user.goal { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.goal-tag { margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--accent); }
.round {
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); letter-spacing: .04em;
}
.round::before, .round::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.goal-end { align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-size: 13px; }
.goal-end.done { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.goal-end.paused { background: var(--panel); color: var(--muted); }
.goal-end.blocked { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.main.dropping .composer { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.file-delete { flex: none; border: 0; background: none; color: var(--muted); padding: 0; font-size: 13.5px; }
.file-delete:hover { color: var(--danger); }
.stop { background: var(--fg); font-size: 12px; }
.hint { text-align: center; font-size: 12px; margin: 6px 0 12px; }

/* files panel (right) */
.files-panel {
  position: relative; width: var(--files-width, clamp(400px, 42vw, 760px)); flex: none; min-height: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: var(--bg);
}
/* drag handle on the panel's left edge */
.files-resize { position: absolute; inset: 0 auto 0 -3px; width: 7px; cursor: col-resize; z-index: 2; }
.files-resize:hover, .files-resize.dragging { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.canvas-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 8px 0 10px; border-bottom: 1px solid var(--line); }
.canvas-tab-list { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.canvas-tab {
  flex: none; display: flex; align-items: center; gap: 4px; max-width: 200px; padding: 6px 10px;
  border-radius: 8px 8px 0 0; color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.canvas-tab:hover { color: var(--fg); background: var(--panel); }
.canvas-tab.active { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.canvas-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.canvas-tab-close {
  border: 0; background: none; color: var(--muted); padding: 0 2px; font-size: 14px; line-height: 1; border-radius: 4px;
}
.canvas-tab-close:hover { color: var(--fg); background: var(--line); }
.canvas-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.canvas-pane[hidden] { display: none; }
.files-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 16px; }
#files-usage { flex: 1; font-size: 12.5px; }
.files-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 16px; }
.files-section { padding: 10px 8px 4px; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.file-row {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 5px 8px;
  border: 0; border-radius: 7px; background: none; color: var(--fg); text-align: left; font-size: 13.5px; cursor: pointer;
}
.file-row:hover { background: var(--panel); }
.file-icon { flex: none; width: 18px; text-align: center; font-size: 13px; }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.file-change { flex: none; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; }
.folder > summary { list-style: none; }
.folder > summary::-webkit-details-marker { display: none; }
.folder > summary .caret { display: inline-flex; width: 13px; height: 13px; color: var(--muted); transition: transform .22s var(--ease, ease); }
.folder > summary .caret svg { width: 100%; height: 100%; }
.folder[open] > summary .caret { transform: rotate(90deg); }
.folder > summary:hover .caret { color: var(--fg); }
.folder > .folder-children { padding-left: 14px; }
.file-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.file-view-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 16px;
  border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.file-view-head .file-name { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.file-download { flex: none; color: var(--accent); text-decoration: none; font-weight: 600; }
.file-download:hover { text-decoration: underline; }
.file-content { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; }
/* charts usually have a transparent or white background; keep them readable in dark mode */
.file-image { display: block; max-width: 100%; height: auto; border-radius: 6px; background: #fff; }
.file-pdf { display: block; width: 100%; height: 100%; min-height: 70vh; border: 0; }
.file-html { display: block; width: 100%; height: 100%; min-height: 70vh; border: 0; background: #fff; border-radius: 6px; }
/* the browser tab */
.browser-bar { display: flex; align-items: center; gap: 2px; padding: 8px 10px; }
.browser-url {
  flex: 1; min-width: 0; height: 30px; margin-left: 4px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--fg); font-size: 13px;
}
.browser-url:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.browser-status { margin: 0 10px 6px; padding: 4px 10px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; }
.browser-view { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 0 10px 10px; outline: none; }
.browser-view:focus-within .browser-frame { box-shadow: 0 0 0 2px var(--accent-soft); }
.browser-ripple {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 35%, transparent); pointer-events: none;
  animation: ripple .45s ease-out forwards;
}
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
/* the hidden text box that takes the user's typing (see bindBrowser) */
.browser-keys {
  position: absolute; left: 0; top: 0; width: 1px; height: 1em; padding: 0; border: 0; margin: 0;
  opacity: 0; resize: none; overflow: hidden; font-size: 14px; pointer-events: none;
}
.browser-frame { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; cursor: default; background: #fff; touch-action: none; user-select: none; -webkit-user-drag: none; }
.browser-empty { margin: 40px 16px; text-align: center; font-size: 13.5px; line-height: 1.8; }
.file-text { margin: 0; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; }
.file-table table { font-size: 12.5px; }
/* spreadsheet-like: one line per cell, the table scrolls sideways */
.file-table th, .file-table td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-table th { background: var(--panel); }
.sheet-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sheet-tab {
  padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--muted); font-size: 12.5px;
}
.sheet-tab:hover { color: var(--fg); }
.sheet-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.doc-preview { font-size: 14px; }
.doc-preview table { margin: .6em 0; }
.doc-preview img { max-width: 100%; height: auto; }
.slides { display: flex; flex-direction: column; gap: 10px; }
.slides > p { margin: 0; font-size: 12.5px; }
.slide {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04); font-size: 13.5px;
}
.slide-no { margin-bottom: 4px; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.slide-title { margin-bottom: 4px; font-size: 15px; font-weight: 600; }
.slide p { margin: 2px 0; }

/* file card under a turn */
.files-card {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px;
}
.files-card-images { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb {
  height: 112px; width: auto; min-width: 48px; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.thumb { cursor: zoom-in; }
.thumb img { display: block; height: 100%; width: auto; max-width: 260px; object-fit: contain; transition: transform .18s ease; }
.thumb:hover img { transform: scale(1.06); }
.files-card-list { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); font-size: 13px;
}
.file-chip:hover, .thumb:hover { border-color: var(--accent); }

@media (max-width: 1100px) {
  .files-panel {
    position: fixed; inset: 0 0 0 auto; z-index: 20; width: min(420px, 100%);
    box-shadow: 0 0 40px rgba(0, 0, 0, .25);
  }
}

@media (max-width: 720px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  .icon { display: inline-block; }
}

/* in-page dialogs and toasts */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .35);
  display: grid; place-items: center; padding: 16px;
}
.modal {
  width: min(380px, 100%); background: var(--bg); color: var(--fg); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.modal h3 { margin: 0; font-size: 17px; }
.modal p { margin: 0; font-size: 14px; }
.modal-input {
  font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg);
}
.modal-input:focus { outline: none; border-color: var(--accent); }
.modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal-cancel, .modal-ok { padding: 7px 16px; border-radius: 8px; font-size: 14px; }
.modal-cancel { border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.modal-ok { border: 0; background: var(--accent); color: var(--bg); font-weight: 600; }
.modal-ok.danger { background: var(--danger); }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px;
  max-width: min(480px, calc(100% - 32px)); box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
}
.goal-bar {
  max-width: 760px; width: calc(100% - 32px); margin: 0 auto 8px; display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg)); font-size: 13.5px;
}
.goal-bar[hidden] { display: none; }
.goal-status { flex: none; font-weight: 600; color: var(--accent); }
.goal-bar.done .goal-status { color: var(--ok); }
.goal-bar.idle .goal-status { color: var(--muted); }
.goal-objective {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.goal-bar.expanded { align-items: flex-start; }
.goal-bar.expanded .goal-objective { white-space: normal; }
.goal-time { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-action {
  flex: none; padding: 3px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--fg); font-size: 13px;
}
.goal-action:hover { border-color: var(--accent); color: var(--accent); }
.goal-action.goal-close { padding: 0 8px; border: 0; background: none; color: var(--muted); font-size: 17px; }


/* ---------- Codex look: overrides of the rules above ---------- */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.sidebar { width: 252px; padding: 14px 10px; gap: 6px; border-right: 1px solid var(--line); }
.brand { font-size: 15px; font-weight: 600; padding: 2px 10px 8px; }
.new-chat {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); font-size: 13.5px;
}
.new-chat:hover { background: var(--hover); color: var(--fg); border: 0; }
.nav-icon { display: inline-flex; width: 16px; height: 16px; color: var(--muted); }
.nav-icon svg, .icon-btn svg, .topbar-icon svg, .attach svg, .folder svg { width: 100%; height: 100%; }
.section-head { padding: 12px 10px 2px; font-size: 12px; letter-spacing: 0; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 0;
  padding: 5px; border-radius: 7px; color: var(--muted);
}
.icon-btn:hover { background: var(--hover); color: var(--fg); }
.project-row { padding: 5px 10px; border-radius: 8px; gap: 8px; }
.project-row:hover { background: var(--hover); }
.project-row .caret { display: none; }
.project-row .folder { display: inline-flex; width: 16px; height: 16px; color: var(--muted); }
.project-row .title { font-size: 13.5px; font-weight: 500; }
.project-group.current > .project-row .title { color: var(--fg); }
.project-group .chat-list { padding-left: 24px; }
.chat-item { padding: 5px 10px; border-radius: 8px; }
.chat-item:hover { background: var(--hover); }
.chat-item.active { background: var(--hover); }
.chat-item .title { font-size: 13.5px; color: color-mix(in srgb, var(--fg) 88%, var(--muted)); }
.chat-item.active .title { color: var(--fg); }
.tree-more { padding: 3px 10px; font-size: 12.5px; }
.tree-more:hover { color: var(--fg); background: var(--hover); }
.account { border-top: 0; font-size: 13px; color: var(--muted); padding: 8px 10px; }

.topbar { padding: 8px 14px 8px 20px; min-height: 46px; border-bottom: 1px solid transparent; }
.chat-title { font-weight: 500; font-size: 14px; }
.topbar-icon {
  flex: none; display: inline-flex; width: 30px; height: 30px; padding: 6px; border: 0; border-radius: 8px;
  background: none; color: var(--muted);
}
.topbar-icon:hover, .topbar-icon[aria-expanded="true"] { background: var(--hover); color: var(--fg); }
/* the project's folder, named: researchers do not read a bare panel icon as "files" */
.topbar-files { width: auto; align-items: center; gap: 5px; padding: 6px 10px 6px 8px; font: inherit; font-size: 13px; }
.topbar .topbar-files svg { width: 17px; height: 17px; flex: none; }
.messages { max-width: 720px; gap: 16px; }
.msg-user { background: var(--bubble); padding: 8px 14px; border-radius: 16px; font-size: 14px; line-height: 1.75; }
.answer { font-size: 14px; line-height: 1.8; } /* as Codex desktop: the prose at the UI's size */
.answer a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); }
.answer a:hover { text-decoration-color: var(--link); }
.activity, .act-row, .activity-head, .act-line, .worked-head { font-size: 13px; }
.act-verb { font-weight: 400; color: var(--muted); }
.act-line:hover .act-verb { color: var(--fg); }
.plan { background: var(--bg); border-radius: 12px; }
.todo li.done::before { border-color: var(--ok); background: var(--ok); }

.composer {
  max-width: 720px; border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); border-radius: 22px; padding: 12px 12px 8px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.composer:focus-within { border-color: color-mix(in srgb, var(--fg) 20%, transparent); }
.composer textarea { min-height: 44px; font-size: 14px; }
.composer textarea::placeholder { color: #a8acb3; }
.composer-bar { gap: 4px; margin-left: -6px; }
.attach { width: 30px; height: 30px; padding: 6px; border: 0; color: var(--muted); }
.attach:hover { background: var(--hover); color: var(--fg); }
.goal-toggle { height: 28px; padding: 0 10px; border: 0; background: none; color: var(--muted); font-size: 13px; border-radius: 8px; }
.goal-toggle:hover { background: var(--hover); color: var(--fg); }
.goal-toggle[aria-pressed="true"] { background: #fff4e5; color: #b45309; font-weight: 500; border: 0; }
.composer.goal-on { border-color: #f5c27a; box-shadow: 0 0 0 3px #fff4e5; }
.model-name { font-size: 13px; color: var(--fg); }
.effort { height: 28px; padding: 0 4px; border: 0; background: none; color: var(--muted); font-size: 13px; border-radius: 8px; }
.effort:hover { background: var(--hover); color: var(--fg); }
.send, .stop { width: 30px; height: 30px; margin-left: 4px; background: var(--fg); color: var(--bg); font-size: 15px; }
.send:disabled { opacity: .2; }
#composer + * { margin-top: 0; }
.main > .composer { margin-bottom: 14px; }
.goal-bar { max-width: 720px; }

/* side panel */
.files-panel { width: var(--files-width, clamp(420px, 46vw, 900px)); border-left: 1px solid var(--line); }
.canvas-tabs { gap: 2px; padding: 8px 8px; border-bottom: 1px solid var(--line); }
.canvas-tab-list { flex: 0 1 auto; gap: 4px; }
.canvas-tab {
  gap: 6px; max-width: 220px; padding: 4px 6px 4px 10px; border: 1px solid transparent; border-radius: 8px;
  font-size: 13px; color: var(--muted); border-bottom-width: 1px;
}
.canvas-tab:hover { background: var(--hover); color: var(--fg); }
.canvas-tab.active { background: var(--bg); border-color: var(--line); color: var(--fg); font-weight: 400; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.tab-icon { flex: none; display: inline-flex; width: 14px; height: 14px; }
.tab-icon svg, .tab-close-icon svg, .nt-icon svg { width: 100%; height: 100%; }
.canvas-tab-close { display: inline-flex; width: 18px; height: 18px; padding: 3px; border-radius: 5px; color: var(--muted); opacity: .7; }
.canvas-tab-close:hover { background: var(--hover); opacity: 1; }
.tab-close-icon { display: inline-flex; width: 100%; height: 100%; }
.browser-bar { gap: 2px; padding: 8px 12px; }
.browser-url {
  height: 32px; margin-left: 6px; padding: 0 16px; border: 1px solid transparent; background: var(--panel);
  text-align: center; font-size: 13px;
}
.browser-url:focus { text-align: left; border-color: var(--line); }
.browser-status { background: var(--panel); color: var(--muted); }
.browser-frame { border-radius: 8px; }

/* new-tab page */
.newtab { overflow-y: auto; padding: 18px 24px 24px; gap: 22px; }
.nt-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--fg); }
.nt-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.nt-tool {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--fg); font-size: 13px; text-align: left;
}
.nt-tool:hover { background: var(--panel); }
.nt-icon { flex: none; display: inline-flex; width: 16px; height: 16px; color: var(--muted); }
.nt-label { flex: 1; }
.nt-hint { font-size: 12px; color: var(--muted); }
.nt-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.nt-site {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 0;
  border-radius: 10px; background: none; color: var(--fg); font-size: 12.5px;
}
.nt-site:hover { background: var(--panel); }
.nt-badge {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--fg);
}
.nt-site-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-recent {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); text-align: left;
}
.nt-recent:hover { background: var(--panel); }
.nt-recent-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--panel); font-size: 14px; }
.nt-recent-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.nt-recent-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-recent-dir { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-time { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nt-empty { margin: 0; font-size: 13px; }
.files-head { padding: 10px 12px 6px 16px; }

/* the browser tab: who drives, what the agent does */
.browser-control {
  display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 0 12px 8px; padding: 4px 6px 4px 12px;
  border-radius: 10px; background: var(--panel); font-size: 13px;
}
.browser-control .control-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-control.user { background: #eef4ff; color: #1d4ed8; }
.browser-control.help { background: #fff4e5; color: #9a4a06; }
.browser-control.nudge { animation: nudge .5s; }
@keyframes nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.control-btn {
  flex: none; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg); font-size: 13px;
}
.control-btn:hover { background: var(--hover); }
.control-btn.primary { border-color: transparent; background: var(--fg); color: var(--bg); }
.control-btn.primary:hover { opacity: .88; background: var(--fg); }
.browser-view.watching .browser-frame { cursor: pointer; }
.browser-view:not(.watching) .browser-frame { cursor: pointer; box-shadow: 0 0 0 2px #93b4f8; }
.browser-caption {
  position: absolute; left: 22px; bottom: 22px; max-width: calc(100% - 44px);
  padding: 5px 12px; border-radius: 999px; background: rgba(20, 20, 24, .78); color: #fff; font-size: 12.5px;
  pointer-events: none; z-index: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-ring {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid #f59e0b; border-radius: 50%;
  pointer-events: none; z-index: 2; animation: agent-ring 1.2s ease-out forwards;
}
@keyframes agent-ring { 0% { transform: scale(.4); opacity: 1; } 70% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.act-shot { display: flex; flex-direction: column; gap: 6px; }
.act-shot .act-image { max-width: min(100%, 480px); cursor: zoom-in; }
.act-shot-url { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-recent-icon svg { width: 15px; height: 15px; }

/* what a turn made: thumbnails and file cards (Codex lists a turn's files the same way) */
.files-card { gap: 6px; padding: 8px; border-radius: 12px; }
.files-card-head { padding: 2px 6px 2px; font-size: 12.5px; color: var(--muted); }
.files-card-images { padding: 0 4px; }
.deliverable {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 6px; border-radius: 10px; cursor: pointer;
}
.deliverable:hover { background: var(--panel); }
.deliverable-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); font-size: 17px; }
.deliverable-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.deliverable-name { font-size: 14px; font-weight: 500; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deliverable-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deliverable-btn {
  flex: none; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--fg); font-size: 12.5px; line-height: 26px; text-decoration: none;
}
.deliverable-btn:hover { background: var(--hover); }
.deliverable-more { align-self: flex-start; margin: 2px 6px; border: 0; background: none; color: var(--muted); font-size: 12.5px; padding: 2px 0; }
.deliverable-more:hover { color: var(--fg); }
/* a file the agent mentions: its name as a link in the prose (as Codex shows it), opens in the side panel */
.file-link {
  display: inline; padding: 0; border: 0; background: none; color: var(--link);
  font: inherit; cursor: pointer;
}
.file-link-icon { display: inline-block; width: 1em; height: 1em; margin-right: 3px; vertical-align: -.14em; }
.file-link-icon svg { display: block; width: 100%; height: 100%; }
.file-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* file changes: counts on the row, the diff when opened */
.act-row[data-kind="edit"] .act-extra { color: var(--muted); }
.change-box { display: flex; flex-direction: column; gap: 6px; }
.change-open { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--link); font-size: 12.5px; }
.change-open:hover { text-decoration: underline; }
.diff { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.diff-file {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--panel);
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.diff-file:not(:first-child) { border-top: 1px solid var(--line); }
.diff-name { flex: 1; min-width: 0; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.diff-count { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.diff-lines { margin: 0; padding: 4px 0; max-height: 420px; overflow: auto; font: 12px/1.55 var(--mono); background: var(--bg) !important; border-radius: 0 !important; }
.diff-line { display: block; padding: 0 12px; white-space: pre-wrap; word-break: break-word; color: var(--fg); }
.diff-line.add { background: #e8f6ec; color: #135c2a; }
.diff-line.del { background: #fbeaea; color: #8f1d1d; }
.diff-line.hunk { color: var(--muted); background: var(--panel); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .diff-line.add { background: #12301d; color: #8fe0a8; }
  :root:not([data-theme="light"]) .diff-line.del { background: #3a1717; color: #f1a3a3; }
}
:root[data-theme="dark"] .diff-line.add { background: #12301d; color: #8fe0a8; }
:root[data-theme="dark"] .diff-line.del { background: #3a1717; color: #f1a3a3; }
.file-content .diff { border-radius: 8px; }
.file-content .diff-lines { max-height: none; }

/* copy: under an answer or a message on hover, on code blocks */
.answer { position: relative; }
.answer-actions { display: flex; gap: 2px; margin-top: 4px; opacity: 0; transition: opacity .12s; }
.turn:not(.done) .answer-actions, .worked-body .answer-actions { display: none; }
.answer:hover > .answer-actions, .msg-user-wrap:hover > .answer-actions, .answer-actions:focus-within { opacity: 1; }
.answer-actions.user { justify-content: flex-end; }
.msg-time { order: 99; align-self: center; padding: 0 8px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.answer-actions.user .msg-time { order: -1; }
.msg-user-wrap { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; max-width: 85%; }
.msg-user-wrap > .msg-user { max-width: 100%; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: 7px;
  background: none; color: var(--muted); font-size: 12px;
}
.copy-btn:hover { background: var(--hover); color: var(--fg); }
.copy-icon { display: inline-flex; width: 14px; height: 14px; }
.copy-icon svg { width: 100%; height: 100%; }
.code-wrap { position: relative; }
.code-wrap > .copy-btn { position: absolute; top: 6px; right: 6px; opacity: 0; background: var(--bg); border: 1px solid var(--line); }
.code-wrap:hover > .copy-btn { opacity: 1; }

/* back to the bottom */
.main { position: relative; }
.jump-down {
  position: absolute; left: 50%; bottom: 150px; z-index: 3; width: 34px; height: 34px; margin-left: -17px; padding: 8px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--fg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.jump-down svg { width: 100%; height: 100%; }
.jump-down:hover { background: var(--hover); }

/* messages waiting for the turn to finish */
.queued { max-width: 720px; width: calc(100% - 32px); margin: 0 auto 6px; display: flex; flex-direction: column; gap: 4px; }
.queued-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border: 1px dashed var(--line);
  border-radius: 12px; background: var(--panel); font-size: 13px;
}
.queued-tag { flex: none; font-size: 12px; color: var(--muted); }
.queued-row[draggable="true"] { cursor: grab; }
.queued-row.dragging { opacity: .5; }
.queued-grip { flex: none; color: var(--muted); font-size: 12px; letter-spacing: -2px; margin-left: -4px; user-select: none; }
.queued-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queued-cancel { flex: none; border: 0; background: none; color: var(--muted); font-size: 12.5px; padding: 2px 6px; border-radius: 6px; }
.queued-cancel:hover { background: var(--hover); color: var(--fg); }

/* a new conversation */
.empty { margin-top: 16vh; }
.empty h2 { font-size: 28px; font-weight: 600; letter-spacing: .01em; }
.empty > p { max-width: 520px; margin: 0 auto 22px; font-size: 14px; line-height: 1.8; }
.examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 620px; margin: 0 auto; }
.example {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg);
  font-size: 13.5px; text-align: left; line-height: 1.5;
}
.example:hover { background: var(--panel); }
@media (max-width: 720px) { .examples { grid-template-columns: 1fr; } }

/* sidebar: brand row, search, collapse; a spinner on a running conversation; a ⋯ menu */
.brand-row { display: flex; align-items: center; gap: 2px; padding: 0 2px 6px 0; }
.brand-row .brand { flex: 1; padding: 2px 10px; }
.chat-search {
  margin: 0 4px 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--fg); font: inherit; font-size: 13px; outline: none;
}
.chat-search:focus { border-color: #cfcfd4; }
.app.sidebar-collapsed .sidebar { display: none; }
.chat-item { position: relative; }
.chat-item .title { flex: 1; }
.chat-project { flex: none; max-width: 40%; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spinner {
  flex: none; width: 12px; height: 12px; border: 1.6px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: var(--fg); border-radius: 50%; animation: spin .9s linear infinite;
}
.spinner.queued { animation: none; border-top-color: color-mix(in srgb, var(--muted) 35%, transparent); }
.chat-more {
  flex: none; display: none; width: 22px; height: 22px; padding: 3px; border: 0; border-radius: 6px; background: none; color: var(--muted);
}
.chat-item:hover .chat-more, .chat-more:focus-visible { display: inline-flex; }
.chat-item:hover .spinner { display: none; }
.chat-more:hover { background: var(--bg); color: var(--fg); }
.chat-more-icon { display: inline-flex; width: 100%; height: 100%; }
.chat-more-icon svg { width: 100%; height: 100%; }
.chat-item .delete { display: none; }

/* popover menus */
.popover {
  position: fixed; z-index: 40; min-width: 200px; max-width: 320px; padding: 6px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); box-shadow: 0 10px 32px rgba(0, 0, 0, .12);
  max-height: var(--popover-max, none); overflow-y: auto; overscroll-behavior: contain;
}
.popover:has(> .popover-cols) { overflow: visible; }
.popover-title { padding: 4px 10px 6px; font-size: 12px; color: var(--muted); }
.popover-group { padding: 8px 10px 2px; font-size: 12px; color: var(--muted); }
.popover-title + .popover-group { padding-top: 2px; }
.popover-sep { height: 1px; margin: 5px 6px; background: var(--line); }
.popover-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px 7px 6px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); text-align: left; font-size: 13.5px;
}
.popover-item:hover { background: var(--hover); }
.popover-item.danger { color: var(--danger); }
.popover-check { flex: none; display: inline-flex; width: 16px; height: 16px; color: var(--fg); }
.popover-check-icon, .popover-check-icon svg { width: 100%; height: 100%; display: inline-flex; }
.popover-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.popover-hint { font-size: 12px; color: var(--muted); }
.popover-keys { flex: none; font-size: 11.5px; color: var(--muted); padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; }
.popover-cols { display: flex; gap: 4px; }
.popover-col { flex: 1 1 0; min-width: 0; }
.popover-col:first-child { max-height: min(420px, calc(var(--popover-max, 100vh) - 14px)); overflow-y: auto; overscroll-behavior: contain; }
.popover-col:last-child { flex: 0 0 112px; }
.popover-col > .popover-group:first-child { padding-top: 2px; }
.popover-vsep { flex: none; width: 1px; margin: 4px 0; background: var(--line); }
.popover.model-menu { width: 380px; max-width: calc(100vw - 16px); }

/* composer: + menu, the goal chip while on, the model and thinking picker */
.goal-toggle[aria-pressed="true"] { display: inline-flex; align-items: center; }
.model-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); font-size: 13px;
}
.model-btn:hover { background: var(--hover); }
.effort-label { color: var(--muted); }
.model-chev { display: inline-flex; width: 14px; height: 14px; color: var(--muted); }
.model-chev svg { width: 100%; height: 100%; }
.model-name { font-size: 13px; }

/* quick open */
.palette-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .18); display: flex; justify-content: center; padding-top: 12vh; }
.palette {
  width: min(560px, calc(100% - 32px)); height: fit-content; max-height: 60vh; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); overflow: hidden;
}
.palette-input { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); outline: none; font: inherit; font-size: 15px; background: var(--bg); color: var(--fg); }
.palette-list { overflow-y: auto; padding: 6px; }
.palette-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--fg); text-align: left; font-size: 13.5px;
}
.palette-row.selected, .palette-row:hover { background: var(--hover); }
.palette-icon { flex: none; width: 18px; text-align: center; }
.palette-name { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-dir { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-empty { padding: 14px; color: var(--muted); font-size: 13px; }

/* the account row opens a menu: appearance, shortcuts, sign out */
.account { padding: 0; }
.account-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); font-size: 13.5px; text-align: left;
}
.account-btn:hover { background: var(--hover); }
.avatar {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.shortcuts { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; font-size: 13.5px; }
.shortcuts kbd {
  font: 12px var(--mono); padding: 2px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
  background: var(--panel); color: var(--fg); white-space: nowrap;
}
/* inputs in dark mode */
.chat-search, .palette-input, .browser-url { color-scheme: inherit; }

/* dark: the tinted bars keep their meaning, darker */
:root[data-theme="dark"] .browser-control.user { background: #172338; color: #9bbcff; }
:root[data-theme="dark"] .browser-control.help { background: #33240f; color: #f3c27a; }
:root[data-theme="dark"] .goal-toggle[aria-pressed="true"] { background: #33240f; color: #f3c27a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .browser-control.user { background: #172338; color: #9bbcff; }
  :root:not([data-theme="light"]) .browser-control.help { background: #33240f; color: #f3c27a; }
  :root:not([data-theme="light"]) .goal-toggle[aria-pressed="true"] { background: #33240f; color: #f3c27a; }
}

/* editing a sent message */
.msg-edit { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--bubble); }
.msg-edit-input { font: inherit; font-size: 14px; border: 0; background: none; color: var(--fg); resize: none; outline: none; min-height: 44px; }
.msg-edit-bar { display: flex; align-items: center; gap: 8px; }
.msg-edit-note { flex: 1; font-size: 12px; color: var(--muted); }

/* the changes a turn made, with undo */
.changes-card { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.changes-card.reverted { opacity: .7; }
.changes-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0 8px; font-size: 13px; }
.changes-title { color: var(--fg-2); font-weight: 500; }
.changes-count { display: inline-flex; gap: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.changes-count .plus { color: var(--ok); }
.changes-count .minus { color: var(--danger); }
.changes-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border: 0;
  border-radius: 7px; background: none; color: var(--fg-2); font-size: 12.5px; white-space: nowrap; transition: background .15s, color .15s;
}
.changes-btn:hover { background: var(--hover); color: var(--fg); }
.changes-btn.danger { color: var(--danger); }
.changes-btn-icon { display: inline-flex; width: 13px; height: 13px; }
.changes-btn-icon svg { width: 100%; height: 100%; }
.changes-files { display: flex; flex-direction: column; gap: 4px; }
.changes-file {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--fg); text-align: left; transition: border-color .15s, box-shadow .15s;
}
.changes-file:hover { border-color: rgba(28, 109, 116, .32); box-shadow: 0 1px 6px rgba(70, 62, 45, .08); }
.changes-file-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.changes-file-icon .act-icon { width: 17px; height: 17px; color: inherit; }
.changes-file-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.changes-file-name { overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.changes-file-meta { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.change-links { display: flex; gap: 14px; }
.compaction { color: var(--muted); }

/* context meter */
.context-ring { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; }
.context-ring[hidden] { display: none; }
.context-ring:hover { background: var(--hover); }
.context-ring svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.context-ring circle { fill: none; stroke-width: 2.6; }
.ring-bg { stroke: color-mix(in srgb, var(--muted) 30%, transparent); }
.ring-fg { stroke: var(--muted); stroke-linecap: round; stroke-dasharray: 44; stroke-dashoffset: calc(44 * (1 - var(--share, 0))); }
.context-ring.high .ring-fg { stroke: var(--danger); }

/* @ files and / commands */
.composer { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; max-height: 280px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.suggest[hidden] { display: none; }
.suggest-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); font-size: 13.5px; text-align: left;
}
.suggest-row.selected, .suggest-row:hover { background: var(--hover); }
.suggest-name { flex: none; font-family: var(--mono); font-size: 13px; }
.suggest-hint { flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-empty { padding: 8px 10px; color: var(--muted); font-size: 13px; }

/* pinned and scheduled conversations in the sidebar */
.chat-pin { display: inline-flex; flex: none; width: 13px; height: 13px; color: var(--muted); }
.chat-pin svg { width: 100%; height: 100%; }

/* 记忆 */
.memory-modal { gap: 10px; }
.memory-head { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 14.5px; font-weight: 600; }
.memory-about { flex: none; width: 100%; min-height: 112px; box-sizing: border-box; resize: vertical; font: inherit; font-size: 14px; line-height: 1.55; }
.memory-about-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.memory-saved { font-size: 12.5px; }
.memory-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--muted); cursor: pointer; }
.memory-list { display: flex; flex-direction: column; gap: 6px; }
.memory-list.off { opacity: .55; }
.memory-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.memory-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.memory-title { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.memory-type { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 12px; }
.memory-body { font-size: 13px; color: var(--muted); }
.memory-body p { margin: 0 0 4px; }

/* archived conversations, scheduled tasks */
.modal.wide { width: min(620px, 100%); max-height: 86vh; overflow-y: auto; }
.archived-list, .automations-list { display: flex; flex-direction: column; gap: 4px; }
.archived-row, .automation { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.archived-row:hover, .automation:hover { background: var(--hover); }
.archived-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; color: var(--fg); padding: 0; text-align: left; }
.archived-title { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archived-project { font-size: 12px; color: var(--muted); }
.automations-head { display: flex; align-items: center; justify-content: space-between; }
.automation { align-items: flex-start; border: 1px solid var(--line); }
.automation.off { opacity: .65; }
.automation-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.automation-name { font-size: 14px; font-weight: 500; }
.automation-meta { font-size: 12.5px; color: var(--muted); }
.automation-last { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--link); font-size: 12.5px; text-align: left; }
.automation-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 50%; }
.automation-form { display: flex; flex-direction: column; gap: 12px; }
.automation-field { display: flex; flex-direction: column; gap: 5px; }
.automation-label { font-size: 12.5px; color: var(--muted); }
.automation-prompt { min-height: 96px; resize: vertical; font-size: 14px; }
.automation-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.automation-when select[hidden] { display: none; }
.automation-hint { font-size: 12px; }
@media (max-width: 640px) {
  .automation { flex-direction: column; }
  .automation-actions { max-width: none; justify-content: flex-start; }
}

/* unread: finished while the user was elsewhere (Codex's blue dot) */
.unread-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; }
.chat-item.unread .title { color: var(--fg); font-weight: 500; }
.chat-item:hover .unread-dot { display: none; }

/* sub-agents: the model's calls in the conversation, the bar above the composer, the panel */
.agent-call { display: flex; flex-direction: column; gap: 6px; }
.agent-call-label { font-size: 12px; color: var(--muted); margin-top: 6px; }
.agent-call-text { font-size: 13.5px; white-space: pre-wrap; padding: 8px 10px; border-radius: 8px; background: var(--panel); }
.agent-call-meta { font-size: 12px; color: var(--muted); }
.agent-call-answer { font-size: 13.5px; }
.agent-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.agent-dot.running, .agent-dot.pendingInit { background: #3b82f6; animation: agent-pulse 1.4s ease-in-out infinite; }
.agent-dot.completed { background: #22a559; }
.agent-dot.failed, .agent-dot.errored { background: var(--danger); }
@keyframes agent-pulse { 50% { opacity: .35; } }
.agents-bar { margin: 0 auto 6px; width: calc(100% - 32px); max-width: 720px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 4px 6px; }
.agents-bar[hidden] { display: none; }
.agents-bar-head { display: flex; align-items: center; gap: 6px; }
.agents-bar-toggle { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--fg); font-size: 13px; padding: 4px 6px; border-radius: 7px; }
.agents-bar-toggle:hover { background: var(--hover); }
.agents-bar-toggle .act-caret { transition: transform .15s; }
.agents-bar.open .agents-bar-toggle .act-caret { transform: rotate(90deg); }
.agents-bar-icon { display: inline-flex; width: 15px; height: 15px; color: var(--muted); }
.agents-bar-icon svg { width: 100%; height: 100%; }
.agents-bar-stop { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 7px; font-size: 12.5px; padding: 3px 10px; }
.agents-bar-stop:hover { background: var(--hover); }
.agents-bar-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: var(--fg); padding: 6px 8px; border-radius: 8px; font-size: 13px; text-align: left; }
.agents-bar-row:hover { background: var(--hover); }
.agents-bar-line { display: flex; align-items: center; gap: 6px; }
.agents-bar-line .agents-bar-row { flex: 1; min-width: 0; }
.agents-detail-head .agents-bar-stop { margin-left: auto; }
.agents-bar-name { flex: none; font-weight: 500; }
.agents-bar-task, .agents-row-task { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agents-bar-status, .agents-row-status { flex: none; font-size: 12px; color: var(--muted); }
.agents-pane { overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.agents-pane[hidden] { display: none; }
.agents-title { margin: 0 0 6px; font-size: 15px; }
.agents-group { font-size: 12px; color: var(--muted); margin-top: 8px; }
.agents-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 10px 12px; border-radius: 10px; text-align: left; }
.agents-row:hover { background: var(--hover); }
.agents-row .agent-dot { margin-top: 6px; }
.agents-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agents-row-name, .agents-detail-name { font-size: 14px; font-weight: 600; }
.agents-row-meta { font-size: 12px; color: var(--muted); }
.agents-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--muted); font-size: 12.5px; padding: 2px 0; }
.agents-back:hover { color: var(--fg); }
.agents-back-icon { display: inline-flex; width: 13px; height: 13px; transform: rotate(180deg); }
.agents-back-icon svg { width: 100%; height: 100%; }
.agents-detail-head { display: flex; align-items: center; gap: 8px; }
.agents-steps { display: flex; flex-direction: column; gap: 2px; }
.agents-steps .agent-note { margin: 6px 0 6px 22px; font-size: 13px; color: var(--muted); }

/* formulas (KaTeX) */
.math-block { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.answer .katex { font-size: 1.05em; }

/* the agent's question above the composer */
.question {
  margin: 0 auto 8px; width: calc(100% - 32px); max-width: 720px; box-sizing: border-box; padding: 10px 14px 0;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
  display: flex; flex-direction: column; gap: 6px;
  /* many or long options: the card scrolls inside, the chat and the composer keep their room */
  max-height: 45vh; overflow-y: auto; overscroll-behavior: contain;
}
.question[hidden] { display: none; }
.question-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.question-icon { display: inline-flex; width: 16px; height: 16px; }
.question-icon svg { width: 100%; height: 100%; }
.question-title { flex: 1; }
.question-label { font-size: 12px; color: var(--muted); }
.question-text { font-size: 14px; font-weight: 500; white-space: pre-wrap; }
.question-options { display: flex; flex-direction: column; gap: 4px; }
.question-option {
  display: flex; width: 100%; text-align: left; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--fg); font-size: 13.5px; line-height: 1.45;
}
.question-option:hover, .question-option:focus-visible { background: var(--hover); }
.question-option.chosen { border-color: var(--fg); }
.question-option-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.question-option-desc { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.question-recommended { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--fg); }
.question-input { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--fg); }
.question-input:focus { outline: none; border-color: var(--fg); }
.question-bar { display: flex; align-items: center; gap: 8px; position: sticky; bottom: 0; padding: 6px 0 10px; background: var(--bg); }
.ask-q { font-size: 13.5px; }
/* 先出计划: the plan to approve, read in place; 动手前先问我: the command or file it is about */
.question:has(.question-plan) { max-height: 65vh; }
.question-plan { font-size: 14px; padding: 4px 2px; border-bottom: 1px solid var(--line); }
.question-note { resize: vertical; min-height: 44px; }
.question-action {
  margin: 0; padding: 8px 10px; border-radius: 9px; background: var(--hover); font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all; max-height: 180px; overflow-y: auto;
}
/* 我的技能, 连接器 */
.skill-body { min-height: 180px; font-family: inherit; }
.connector-status:empty { display: none; }
.connector-status.bad { color: var(--danger); }

/* a message sent into the running turn */
.msg-user-wrap.steer { margin: 4px 0; }
.steer-note { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* a running command's newest output */
.act-note { margin: 2px 0 4px 26px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.act-note.tool-progress > div { overflow-wrap: anywhere; }
.cmd-preview {
  margin: 2px 0 4px 26px; padding: 6px 10px; max-height: 6.5em; overflow: hidden; border-radius: 8px;
  background: var(--panel); color: var(--muted); font: 12px/1.45 var(--mono); white-space: pre-wrap; word-break: break-all;
}
.turn-end.notice { color: var(--muted); }

/* your messages down the right edge */
.msg-nav { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 7px; max-height: 60vh; overflow: hidden; }
.msg-nav[hidden] { display: none; }
.msg-nav-mark { width: 14px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: var(--line); cursor: pointer; transition: width .12s, background .12s; }
.msg-nav-mark:hover { width: 20px; background: var(--muted); }
.msg-nav-mark.current { background: var(--fg); }
@media (max-width: 900px) { .msg-nav { display: none; } }

/* side chats */
.side-pane { display: flex; flex-direction: column; min-height: 0; }
.side-pane[hidden] { display: none; }
.side-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.side-empty-title { font-size: 15px; font-weight: 600; }
.side-empty { font-size: 13px; line-height: 1.6; margin: 0; }
.side-user { align-self: flex-end; max-width: 88%; background: var(--bubble); padding: 7px 12px; border-radius: 14px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.side-answer { font-size: 14px; }
.side-working { font-size: 13px; }
.side-composer { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 12px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.side-input { flex: 1; border: 0; outline: none; resize: none; font: inherit; font-size: 14px; background: none; color: var(--fg); max-height: 160px; }
.side-composer .send, .side-composer .stop { flex: none; }
.ask-side-chip {
  position: fixed; z-index: 40; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--fg); font-size: 12.5px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.ask-side-chip[hidden] { display: none; }
.ask-side-chip:hover { background: var(--hover); }

/* generated images */
.gen-image-inline { display: block; margin: 6px 0 8px 26px; max-width: min(420px, calc(100% - 26px)); border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; }
.gen-image { max-width: 100%; }

/* the canvas: editing in place, asking the agent */
.file-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.file-action { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 7px; font-size: 12.5px; padding: 3px 10px; white-space: nowrap; }
.file-action:hover { background: var(--hover); }
.file-action[hidden] { display: none; }
.md-editor { min-height: 320px; }
.md-editor.vditor { border: 0; }
.edit-table td { outline: none; min-width: 64px; cursor: text; }
.edit-table td:focus { box-shadow: inset 0 0 0 2px #3b82f6; background: var(--bg); }
.edit-table td.in-range { background: color-mix(in srgb, #3b82f6 14%, transparent); }
.grid th { position: sticky; background: var(--panel); color: var(--muted); font-weight: 500; font-size: 11.5px; text-align: center; }
.grid tr:first-child th { top: 0; z-index: 2; }
.grid .row-head { left: 0; z-index: 1; min-width: 36px; }
.sheet-grid { overflow: auto; max-height: calc(100vh - 170px); }
.ask-edit {
  position: fixed; z-index: 60; width: min(380px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); box-shadow: 0 12px 36px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 8px;
}
.ask-edit-title { font-size: 13.5px; font-weight: 600; }
.ask-edit-where { font-size: 12px; color: var(--muted); }
.ask-edit-quote { font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--line); padding: 2px 8px; max-height: 6em; overflow: hidden; }
.ask-edit-input { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); resize: vertical; }
.ask-edit-input:focus { outline: none; border-color: var(--fg); }
.docx-box { overflow: auto; background: var(--panel); padding: 12px; border-radius: 8px; }
.docx-box .docx-wrapper { background: transparent !important; padding: 0 !important; }
.docx-box section.docx { box-shadow: 0 2px 10px rgba(0, 0, 0, .12); margin-bottom: 12px !important; }
.pptx-box { display: flex; flex-direction: column; gap: 10px; }
.pptx-slide { cursor: pointer; border-radius: 6px; outline: 2px solid transparent; outline-offset: 2px; }
.pptx-slide:hover { outline-color: var(--line); }
.pptx-slide.selected { outline-color: #3b82f6; }
.pptx-box .pptx-preview-wrapper { background: transparent !important; height: auto !important; overflow: visible !important; }
.pptx-box .pptx-preview-slide-wrapper { position: relative; margin: 0 auto 14px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); background: #fff; }
.pptx-slide::after { content: attr(data-page); position: absolute; left: 8px; bottom: 6px; font-size: 11px; color: #888; }

/* ONLYOFFICE in the canvas */
.office-host { position: absolute; inset: 0; }
#file-content:has(.office-host) { position: relative; overflow: hidden; padding: 0; }

.office-sleep { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 240px; border: 0; background: var(--panel); color: var(--fg); cursor: pointer; }
.office-sleep:hover { background: var(--hover); }
.office-sleep-title { font-size: 15px; font-weight: 600; }
.office-sleep-note { font-size: 13px; color: var(--muted); max-width: 320px; text-align: center; line-height: 1.6; }
.office-busy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #f59e0b 14%, transparent); font-size: 13px; }

/* the start page's project: in its title, and on a strip behind the box (Codex desktop) */
.project-pick {
  margin: 0 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--fg) 35%, transparent);
  text-underline-offset: 7px; text-decoration-thickness: 1.5px;
}
.project-pick:hover { text-decoration-color: var(--fg); }
.composer-where {
  position: relative; max-width: 720px; width: calc(100% - 32px); margin: 0 auto -20px; box-sizing: border-box;
  padding: 5px 10px 25px; border-radius: 18px 18px 0 0; background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  display: flex; gap: 4px;
}
.composer-where[hidden] { display: none; }
.composer-where + .composer { position: relative; z-index: 1; }
.where-item {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px;
  background: none; color: color-mix(in srgb, var(--fg) 80%, transparent); font-size: 13.5px; cursor: pointer;
}
.where-item:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.where-icon, .where-icon svg { display: inline-flex; width: 16px; height: 16px; }

/* ---------- PaperLu's look: overrides of the rules above ---------- */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.sidebar { background: var(--panel); font-family: var(--side-font); }
.brand { display: flex; align-items: center; gap: 7px; }
.brand-mark { width: 26px; height: 26px; display: block; }
.brand-wordmark { height: 17px; width: auto; display: block; }
.edition {
  padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 600; line-height: 18px; font-family: var(--side-font); white-space: nowrap; flex: none;
}
.chat-item.active, .project-row.active { background: var(--select); }
.chat-item .dot, .project-row .dot, .unread-dot { background: var(--accent); }
.agent-dot.running, .agent-dot.pendingInit { background: var(--accent); }

/* login */
.login-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 4px !important; }
.login-brand img { width: 34px; height: 34px; }
.login-brand .wordmark { width: auto; height: 22px; }
.login-card input:focus { outline: none; border-color: var(--accent); }

/* a new conversation: PaperLu's research home (clouds, the deer, its title in black) */
.empty { margin-top: 11vh; }
.empty h2 {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  font-size: 26px; font-weight: 700; color: var(--fg); letter-spacing: 0;
}
.hero-mark { width: 46px; height: 46px; transform: translateY(-3px); }
.empty > p.muted { margin: 4px auto 0; font-size: 13.5px; color: var(--muted); }
.examples-label { margin: 22px auto 9px !important; text-align: center; font-size: 12px; color: var(--muted); }
.examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
.example {
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--fg-2); font-size: 13px; line-height: 1.45; text-align: center;
  transition: background .14s, border-color .14s, color .14s;
}
.example:hover { background: #f3f4f6; border-color: #9ca3af; color: #4b5563; }
.clouds { position: relative; height: 58px; width: min(360px, 82vw); margin: 0 auto 6px; pointer-events: none; }
.cloud {
  position: absolute; display: block; height: 18px; border-radius: 999px; background: var(--bg);
  border: 1px solid rgba(15, 23, 42, .12); animation: cloud-float 4.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; bottom: 4px; border-radius: 50%; background: inherit; border: inherit;
  border-bottom-color: transparent;
}
.cloud::before { width: 18px; height: 18px; left: 9px; }
.cloud::after { width: 25px; height: 25px; left: 25px; }
.cloud-1 { left: 16px; top: 21px; width: 74px; opacity: .96; animation-delay: -.4s; }
.cloud-2 { left: 122px; top: 5px; width: 92px; transform: scale(1.05); animation-delay: -1.5s; }
.cloud-3 { right: 36px; top: 26px; width: 68px; opacity: .93; transform: scale(.88); animation-delay: -2.2s; }
.cloud-4 { right: 112px; top: 34px; width: 54px; opacity: .82; transform: scale(.72); animation-delay: -3.1s; }
.wind {
  position: absolute; display: block; height: 2px; border-radius: 999px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(28, 109, 116, .30), transparent);
  animation: wind-drift 3.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
.wind-1 { left: 38px; top: 11px; width: 76px; animation-delay: -.2s; }
.wind-2 { left: 207px; top: 17px; width: 92px; animation-delay: -1.2s; }
.wind-3 { left: 82px; top: 48px; width: 68px; animation-delay: -2.1s; }
@keyframes cloud-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes wind-drift { 0% { opacity: 0; translate: -18px 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; translate: 26px 0; } }
@media (prefers-reduced-motion: reduce) { .cloud, .wind { animation: none; opacity: 1; } }

/* the box: PaperLu's SearchBar (radius 24, a soft shadow, a round teal send button) */
.composer {
  border: 1px solid #e5e7eb; border-radius: 24px; background: var(--bg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
  transition: border-color .16s, box-shadow .16s;
}
.composer:focus-within { border-color: #d9dee8; box-shadow: 0 14px 36px rgba(15, 23, 42, .08); }
.composer textarea { caret-color: rgba(28, 109, 116, .78); }
.composer textarea::placeholder { color: #9ca3af; }
.send {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff;
  box-shadow: 0 5px 14px rgba(28, 109, 116, .22);
}
.send:hover:not(:disabled) { filter: brightness(.96); }
.send:disabled { opacity: .45; box-shadow: none; }
.composer-where { max-width: 720px; border-radius: 22px 22px 0 0; background: #f4f5f6; }
.modal-ok, .primary { background: var(--accent); color: #fff; }
.answer a { color: var(--link); }

/* the new-tab page's visited pages: a link to all of them, and that list (search, days) */
.nt-more { margin: 6px 0 0 4px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--accent); font-size: 13px; cursor: pointer; }
.nt-more:hover { background: var(--accent-soft); }
.nt-history-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nt-history-head .nt-title { margin: 0; }
.nt-back { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px 3px 4px; border: 0; border-radius: 6px; background: none; color: var(--fg-2); font-size: 13px; cursor: pointer; }
.nt-back:hover { background: var(--hover); }
.nt-back-icon, .nt-back-icon svg { display: inline-flex; width: 16px; height: 16px; }
.nt-back-icon svg { transform: rotate(180deg); }
.nt-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: 13px; }
.nt-search:focus { outline: none; border-color: var(--accent); }
.nt-day { margin: 12px 4px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------- the goal (Codex desktop's): a row on the composer's rail, its editor in the side
   panel, "设为目标" under the message that set it, "已在 … 内达成目标" beside the answer ---------- */
.goal-bar {
  max-width: 720px; width: calc(100% - 32px); margin: 0 auto -20px; box-sizing: border-box; position: relative;
  display: flex; align-items: center; gap: 2px; padding: 4px 8px 24px 6px; border: 0; border-radius: 22px 22px 0 0;
  background: #f4f5f6; font-size: 13.5px;
}
.goal-bar[hidden] { display: none; }
.goal-bar + .composer-where, .goal-bar ~ .composer { position: relative; z-index: 1; }
.goal-body {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px; border: 0;
  border-radius: 8px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.goal-body:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.goal-icon, .goal-icon svg { flex: none; display: inline-flex; width: 15px; height: 15px; color: color-mix(in srgb, var(--muted) 80%, transparent); }
.goal-status { flex: none; font-weight: 400; color: var(--fg); }
.goal-objective { min-width: 0; margin-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.goal-dot { flex: none; color: var(--muted); }
.goal-time { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.goal-btn {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.goal-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.goal-btn:disabled { opacity: .4; cursor: default; }
.goal-btn-icon, .goal-btn-icon svg { display: inline-flex; width: 16px; height: 16px; }

/* goal mode: a quiet chip in the composer, its icon turning into × on hover */
.composer.goal-on { border-color: #e5e7eb; box-shadow: 0 12px 32px rgba(15, 23, 42, .06); }
.goal-toggle, .goal-toggle[aria-pressed="true"] {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 13px; font-weight: 400;
}
.goal-toggle[hidden] { display: none; }
.goal-toggle:hover { background: var(--hover); color: var(--fg); }
.goal-chip-icon, .goal-chip-x, .goal-chip-icon svg, .goal-chip-x svg { display: inline-flex; width: 15px; height: 15px; }
.goal-chip-x, .goal-toggle:hover .goal-chip-icon { display: none; }
.goal-toggle:hover .goal-chip-x { display: inline-flex; }
:root .goal-toggle[aria-pressed="true"] { background: none; color: var(--muted); }

/* the message that set it, and the answer that achieved it */
.goal-sent { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.goal-sent-icon, .goal-sent-icon svg { display: inline-flex; width: 13px; height: 13px; }
.goal-achieved { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 12px; line-height: 20px; color: var(--muted); }
.goal-achieved-sep { height: 12px; border-left: 1px solid var(--line); }
.goal-achieved-icon, .goal-achieved-icon svg { display: inline-flex; width: 14px; height: 14px; }

/* the editor: when it was saved, revert and save, the objective */
.goal-editor { display: flex; flex-direction: column; padding: 0; }
.goal-editor[hidden] { display: none; }
.goal-editor-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.goal-editor-updated { font-size: 13px; color: var(--muted); white-space: nowrap; }
.goal-save {
  height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.goal-save:disabled { opacity: .4; cursor: default; }
.goal-editor-text {
  flex: 1; min-height: 240px; margin: 0; padding: 14px 16px; border: 0; outline: none; resize: none;
  background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; line-height: 1.7;
}

/* a conversation waiting for the user's answer, in the sidebar */
.needs-input {
  flex: none; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; line-height: 18px; white-space: nowrap;
}

.queued-paused .queued-text { color: var(--muted); }

/* where a branch came from */
.branch-note {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 18px 0 6px;
  border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer;
}
.branch-note:hover { color: var(--accent); }
.branch-note-icon, .branch-note-icon svg { display: inline-flex; width: 14px; height: 14px; }

.retry-btn {
  margin-left: 10px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--fg); font-size: 12.5px; cursor: pointer;
}
.retry-btn:hover { border-color: var(--accent); color: var(--accent); }

.toast-action {
  margin-left: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* 在聊天中查找 */
.find-bar {
  position: absolute; top: 52px; right: 24px; z-index: 20; display: flex; align-items: center; gap: 4px;
  padding: 5px 6px 5px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
}
.find-bar[hidden] { display: none; }
.find-bar input { width: 200px; border: 0; outline: none; background: none; color: var(--fg); font: inherit; font-size: 13.5px; }
.find-count { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
mark.find-hit { background: #fdeaa1; color: inherit; border-radius: 2px; }
mark.find-hit.current { background: #f6b93b; }

/* a long message of the user's, folded (显示更多 / 收起) */
.msg-user.folded { max-height: 15.5em; overflow: hidden; position: relative; }
.msg-user.folded::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em;
  background: linear-gradient(transparent, var(--bubble)); pointer-events: none;
}
.msg-more {
  display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--accent);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.msg-user.folded .msg-more { position: absolute; right: 14px; bottom: 6px; z-index: 1; margin: 0; }

/* a scheduled task the agent made (已创建定时聊天) */
.auto-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg);
}
.auto-card-icon, .auto-card-icon svg { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--accent); }
.auto-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.auto-card-title { font-size: 13.5px; }
.auto-card-meta { font-size: 12px; color: var(--muted); }

/* the chat's summary: plan, 输出内容, 来源 */
.summary-pane { padding: 16px 18px; overflow: auto; }
.summary-pane[hidden] { display: none; }
.sum-section { margin-bottom: 22px; }
.sum-sub { margin: 12px 4px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sum-list { display: flex; flex-direction: column; }
.sum-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 4px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); font: inherit; text-align: left;
}
button.sum-row { cursor: pointer; }
button.sum-row:hover { background: var(--panel); }
.sum-icon, .sum-icon svg { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; font-size: 14px; color: var(--muted); }
.sum-row-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.sum-row-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-row-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-more { align-self: flex-start; margin: 2px 0 0 4px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--accent); font-size: 12.5px; cursor: pointer; }
.sum-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px; }
.sum-tool { padding: 2px 8px; border-radius: 999px; background: var(--panel); font-size: 12px; color: var(--fg-2); }

.project-pin, .project-pin svg { flex: none; display: inline-flex; width: 13px; height: 13px; color: var(--muted); }

/* embedded in PaperLu: its sidebar lists the projects and chats */
.embedded .sidebar, .embedded #toggle-sidebar, .embedded #expand-sidebar, .embedded #collapse-sidebar { display: none !important; }


/* a tool's document opened in its row (variable map, data sources, a page read): smaller than an answer */
.answer.tool-doc { font-size: 13px; line-height: 1.65; }
.answer.tool-doc h1 { font-size: 1.15em; margin: .4em 0 .4em; }
.answer.tool-doc h2, .answer.tool-doc h3, .answer.tool-doc h4 { font-size: 1.05em; margin: 1em 0 .3em; }
.answer.tool-doc p { margin: .3em 0; }
.answer.tool-doc li { margin: .1em 0; }

/* "上 N 条消息": a long conversation opens on its last turns (as Codex desktop) */
.earlier-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; width: 100%; padding: 0 0 8px; border: 0;
  border-bottom: 1px solid var(--line); background: none; color: var(--muted); font-size: 13px; cursor: pointer; text-align: left;
}
.earlier-btn:hover { color: var(--fg); }
.earlier-icon { width: 14px; height: 14px; }
.earlier-icon svg { width: 100%; height: 100%; }

/* how much the model has written this turn, growing beside the working line */
.working-out { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- the agent's steps, after Claude's apps, in PaperLu's teal: a rail with a node a
   step (a turning ring on the step at work), the sites a search found as their icons, the
   results as a card; what opens slides open ---------- */
.shimmer {
  background-image: linear-gradient(100deg, var(--muted) 35%, var(--accent) 50%, var(--muted) 65%);
  animation-delay: var(--phase, 0s);
}
.activity-body { margin: 2px 0 6px; padding-left: 0; border-left: 0; }
.activity-body > .act-row { position: relative; padding-left: 32px; }
.activity-body > .act-row::before {
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 1px; background: var(--line);
}
.activity-body > .act-row:first-child::before { top: 14px; }
.activity-body > .act-row:last-child::before { bottom: auto; height: 14px; }
.activity-body > .act-row:only-child::before { display: none; }
.activity-body > .act-row > .act-line { min-height: 28px; }
.activity-body > .act-row > .act-line > .act-icon {
  position: absolute; left: 0; top: 3px; z-index: 1; width: 23px; height: 23px; padding: 5px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--muted); opacity: 1;
  transition: color .15s, border-color .15s, background .15s;
}
.activity-body > .act-row > .act-line:hover > .act-icon { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 22%, transparent); }
.activity-body > .act-row.live > .act-line > .act-icon {
  color: var(--accent); border-color: transparent; background: color-mix(in srgb, var(--accent) 9%, var(--bg));
}
.activity-body > .act-row.live > .act-line > .act-icon::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--accent);
  border-right-color: color-mix(in srgb, var(--accent) 35%, transparent);
  animation: spin .9s linear infinite; animation-delay: var(--phase, 0s);
}
.activity-body > .act-row.failed > .act-line > .act-icon {
  color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 6%, var(--bg));
}
.activity-body > .act-row.just-done > .act-line > .act-icon { animation: node-done .6s ease-out; }
@keyframes node-done {
  0% { transform: scale(.82); color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  55% { transform: scale(1.08); box-shadow: 0 0 0 6px transparent; }
  100% { transform: none; }
}
.activity-body > .act-row > .act-body { margin: 2px 0 10px; }
.activity-body > .act-row > .think-preview { margin-left: 0; }
.activity-body > .act-row > .act-note, .activity-body > .act-row > .cmd-preview { margin-left: 0; }
.act-row.enter { animation: rise .3s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }

/* what opens grows to its height and what closes shrinks away (where the browser can animate
   to auto: Chrome and Edge 129+; elsewhere it opens at once, as before) */
:root { interpolate-size: allow-keywords; }
.act-body, .activity-body, .worked-body {
  overflow: clip; overflow-clip-margin: 6px;
  transition: height .28s cubic-bezier(.2, .7, .2, 1), opacity .22s ease, display .28s allow-discrete;
}
.act-row:not(.open) > .act-body, .activity:not(.open):not(.single) > .activity-body,
.worked:not(.open) > .worked-body { height: 0; opacity: 0; }
@starting-style {
  .act-row.open > .act-body, .activity.open > .activity-body, .worked.open > .worked-body { height: 0; opacity: 0; }
}

/* sites: the site's icon over its first letter, tinted */
.site-icon {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--tint, var(--muted)) 15%, var(--bg)); color: var(--tint, var(--muted));
}
.site-letter { font: 700 9.5px/1 var(--side-font); }
.site-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; background: var(--bg); transition: opacity .2s; }
.site-icon.loaded img { opacity: 1; }
.site-icon.doc { padding: 2px; background: var(--accent-soft); color: var(--accent); }
.site-icon.doc svg { width: 100%; height: 100%; }
.site-icon.inline { width: 14px; height: 14px; border-radius: 4px; margin-right: -3px; }
.site-stack { flex: none; display: inline-flex; align-items: center; padding-left: 2px; }
.site-stack .site-icon { width: 17px; height: 17px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--bg); }
.site-stack .site-icon + .site-icon { margin-left: -6px; }
/* a stack shows the sites' own icons; a letter stands in only when none of them has one (10-30) */
.site-stack:has(.site-icon.loaded) .site-icon:not(.loaded) { display: none; }
.site-stack:has(.site-icon.loaded) .site-icon.loaded { margin-left: 0; }
.site-stack:has(.site-icon.loaded) .site-icon.loaded ~ .site-icon.loaded { margin-left: -6px; }
.act-row.just-done .site-stack .site-icon { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + .1s); }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }

/* a search's results: a card of rows, each the page's icon, title, site and date */
.results-card {
  list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column;
  max-height: 340px; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.result { min-width: 0; animation: rise .28s ease-out backwards; animation-delay: calc(min(var(--i, 0), 12) * 22ms); }
.result-link {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; border-radius: 8px;
  color: var(--fg); text-decoration: none; transition: background .12s;
}
a.result-link:hover { background: var(--accent-soft); }
a.result-link:hover .result-title { color: var(--accent-dark); }
.result-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.result-meta { flex: none; display: flex; gap: 6px; min-width: 0; max-width: 46%; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-host { min-width: 0; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; }
.result-date { flex: none; }
.result-host + .result-date::before { content: "·"; margin-right: 6px; }

/* the line under a running turn: the spark turning and breathing */
.working { align-items: center; }
.working-mark { flex: none; display: inline-flex; width: 16px; height: 16px; animation: spark-turn 2.6s cubic-bezier(.6, 0, .4, 1) infinite; }
.working-mark svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)); }
@keyframes spark-turn {
  0% { transform: rotate(0) scale(.78); }
  45% { transform: rotate(135deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(.78); }
}
@media (prefers-reduced-motion: reduce) {
  .activity-body > .act-row.live > .act-line > .act-icon::after, .working-mark, .act-row.enter, .result,
  .act-row.just-done > .act-line > .act-icon, .act-row.just-done .site-stack .site-icon,
  .act-body, .activity-body, .worked-body { transition: none; }
}

/* ---------- feel: things arrive and answer the hand; dark-safe colours where light ones were fixed ---------- */
.msg-user-wrap.enter { animation: rise-in .34s cubic-bezier(.2, .7, .2, 1); transform-origin: right bottom; }
.answer.enter { animation: fade-in .45s ease-out; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

.composer { border-color: color-mix(in srgb, var(--fg) 11%, transparent); }
.composer:not(.goal-on):focus-within {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent), 0 14px 36px rgba(15, 23, 42, .08);
}
.composer-where, .goal-bar { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
.send:not(:disabled) {
  background: linear-gradient(135deg, #2c8b93 0%, #1c6d74 55%, #134e56 100%);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s, filter .18s;
}
.send:hover:not(:disabled) { transform: translateY(-1px) scale(1.07); box-shadow: 0 8px 20px rgba(28, 109, 116, .34); filter: none; }
.send:active:not(:disabled) { transform: scale(.9); transition-duration: .08s; }

.example { transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s, border-color .2s, color .2s, background .2s; }
.example:hover {
  background: var(--bg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-dark);
  transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent);
}
.example:active { transform: scale(.97); transition-duration: .08s; }
.empty > * { animation: rise .55s cubic-bezier(.2, .7, .2, 1) backwards; }
.empty > :nth-child(2) { animation-delay: .06s; }
.empty > :nth-child(3) { animation-delay: .12s; }
.empty > :nth-child(4) { animation-delay: .18s; }
.empty > :nth-child(n + 5) { animation-delay: .24s; }

.chat-item, .project-row, .new-chat, .icon-btn, .topbar-icon, .copy-btn, .act-line, .activity-head, .worked-head, .jump-down {
  transition: background-color .15s, color .15s, transform .15s;
}
.jump-down:hover { transform: translateY(2px); }
/* menus, dialogs, pictures and notes open with a small pop instead of appearing */
.popover { animation: pop-menu .16s cubic-bezier(.2, .8, .3, 1); transform-origin: top left; }
@keyframes pop-menu { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.modal-backdrop { animation: fade-in .18s ease-out; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-backdrop > * { animation: pop-dialog .26s cubic-bezier(.2, .9, .3, 1.05); }
@keyframes pop-dialog { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.lightbox { animation: fade-in .2s ease-out; }
.toast { animation: toast-in .3s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }
/* a running conversation in the sidebar: the ring in the teal */
.spinner:not(.queued) { border-top-color: var(--accent); }

/* the plan as a task list that moves */
.plan-head { display: flex; align-items: center; gap: 8px; }
.plan-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.plan-bar { height: 3px; margin: 0 0 9px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 7%, transparent); overflow: hidden; }
.plan-bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #56a1a6, var(--accent) 70%, #f47a50);
  animation: plan-fill .7s cubic-bezier(.2, .7, .2, 1);
}
@keyframes plan-fill { from { width: var(--from, 0%); } }
.todo li { transition: color .2s; }
.todo li.now { color: var(--fg); font-weight: 500; }
.todo li.now::before {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
.todo li.just::before { animation: check-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.todo li.just::after { animation: fade-in .3s .12s backwards; }
@keyframes check-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: none; } }

/* a source pill in an answer */
.answer a.cite {
  display: inline-flex; align-items: center; gap: 5px; max-width: 22em; margin: 0 2px; padding: 1px 9px 1px 4px;
  vertical-align: 1px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark);
  font-size: 12px; line-height: 1.6; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.answer a.cite > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.answer a.cite .site-icon { width: 14px; height: 14px; border-radius: 50%; }
.answer a.cite:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--bg)); transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* 引用 over selected text, as Claude's Reply: a small dark-teal pill */
.select-bar {
  position: fixed; z-index: 41; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 14px;
  border: 0; border-radius: 10px; background: var(--accent-dark); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-dark) 35%, transparent), 0 1px 2px rgba(0, 0, 0, .12);
  animation: pop-menu .14s cubic-bezier(.2, .8, .3, 1); transition: transform .12s, filter .12s;
}
.select-bar:hover { filter: brightness(1.1); transform: translateY(-1px); }
.select-bar-icon { display: inline-flex; width: 14px; height: 14px; }
.select-bar-icon svg { width: 100%; height: 100%; stroke-width: 2.2; }
/* a quote: in the composer with its ×, and above the message it went with */
.quote-card {
  position: relative; flex: 1 0 100%; box-sizing: border-box; display: flex; align-items: flex-start; gap: 8px; max-width: 100%;
  padding: 7px 30px 7px 10px; border-radius: 10px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg)); font-size: 13px; line-height: 1.55; color: color-mix(in srgb, var(--fg) 78%, transparent);
}
.quote-card-icon { flex: none; display: inline-flex; width: 14px; height: 14px; margin-top: 3px; color: var(--accent-dark); }
.quote-card-icon svg { width: 100%; height: 100%; }
.quote-card-text { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.quote-card-remove {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--muted); cursor: pointer;
}
.quote-card-remove:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.msg-user-wrap > .quote-card { align-self: flex-end; width: auto; max-width: min(520px, 85%); flex: none; margin-bottom: 6px; padding-right: 12px; }


/* a link's card */
.link-card {
  position: fixed; z-index: 45; width: min(340px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); pointer-events: none;
  animation: card-in .18s cubic-bezier(.2, .8, .3, 1);
}
.link-card.above { animation-name: card-in-above; }
@keyframes card-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes card-in-above { from { opacity: 0; transform: translateY(4px); } }
.link-card-site { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.link-card-date { margin-left: auto; font-variant-numeric: tabular-nums; }
.link-card-title { margin-top: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card-url { margin-top: 3px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .plan-bar > span, .todo li.now::before, .todo li.just::before, .todo li.just::after, .link-card { animation: none; }
  .popover, .modal-backdrop, .modal-backdrop > *, .lightbox, .toast { animation: none; }
  .msg-user-wrap.enter, .answer.enter, .empty > * { animation: none; }
  .send, .example { transition: none; }
}

/* ---------- type: one scale through the conversation (10-30, the user: size and face are what
   make it look right). Prose 15px as Claude's apps set it, the steps a step below, tables and
   notes below that; headings by weight more than size; a little air between Chinese characters. ---------- */
.answer { font-size: 15px; line-height: 1.8; letter-spacing: .012em; }
.answer p { margin: 0 0 .85em; }
.answer h1 { font-size: 1.3em; margin: 1.5em 0 .55em; }
.answer h2 { font-size: 1.18em; margin: 1.45em 0 .5em; }
.answer h3 { font-size: 1.06em; margin: 1.3em 0 .45em; }
.answer h4 { font-size: 1em; margin: 1.2em 0 .4em; }
.answer h1, .answer h2, .answer h3, .answer h4 { font-weight: 600; letter-spacing: .02em; color: var(--fg); }
.answer strong { font-weight: 600; }
.answer table { font-size: 13.5px; line-height: 1.65; letter-spacing: .01em; }
.answer th { font-size: 12.5px; color: var(--fg-2); }
.answer li { margin: .2em 0; }
.answer blockquote { border-left-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.msg-user { font-size: 15px; line-height: 1.75; padding: 9px 16px; border-radius: 18px; letter-spacing: .012em; }
.activity, .act-row, .activity-head, .act-line, .worked-head { font-size: 13.5px; }
.act-extra, .result-meta { font-size: 12.5px; }
.act-body .answer.tool-doc { font-size: 13.5px; }
.think-body, .think-preview { font-size: 13px; line-height: 1.7; }

/* the chat-memory gauge: a teal ring and its share, not a grey ring that reads as loading */
.context-ring { width: auto; gap: 5px; padding: 0 8px 0 6px; border-radius: 999px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.context-ring svg { width: 16px; height: 16px; }
.ring-bg { stroke: color-mix(in srgb, var(--fg) 9%, transparent); }
.ring-fg { stroke: var(--accent); transition: stroke-dashoffset .6s cubic-bezier(.2, .7, .2, 1); }
.context-ring.high .ring-fg { stroke: #f47a50; }
.context-ring.high { color: #c8613d; }
.ctx-pct:empty { display: none; }

/* ---------- restraint (10-30, the user: "一堆小字，AI 味太重", "丑"): fewer things, quieter.
   Menus are a column of plain items; links are coloured words, underlined on hover; the steps'
   nodes are their icons without rings; the working mark is one teal shape. ---------- */
.popover { min-width: 184px; padding: 5px; border-radius: 12px; border-color: color-mix(in srgb, var(--fg) 9%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .10); }
.popover-item { gap: 10px; min-height: 34px; padding: 6px 12px; border-radius: 8px; font-size: 14px; align-items: center; }
.popover-label { font-size: 14px; }
.popover-hint { display: none; }
.popover-sep { margin: 5px 8px; background: color-mix(in srgb, var(--fg) 7%, transparent); }
.popover-title, .popover-group { padding: 8px 12px 4px; font-size: 12px; }

.answer a { text-decoration: none; color: var(--link); }
.answer a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 3px; }
.answer a.cite, .answer a.cite:hover { text-decoration: none; }
.answer a.cite {
  padding: 0 7px 0 3px; background: color-mix(in srgb, var(--fg) 5%, transparent); color: var(--fg-2); font-size: 12.5px;
}
.answer a.cite:hover { background: var(--accent-soft); color: var(--accent-dark); box-shadow: none; }

.activity-body > .act-row > .act-line > .act-icon { border-color: transparent; background: var(--bg); padding: 4px; }
.activity-body > .act-row > .act-line:hover > .act-icon { border-color: transparent; }
.activity-body > .act-row.live > .act-line > .act-icon { background: var(--bg); }
.activity-body > .act-row.failed > .act-line > .act-icon { border-color: transparent; background: var(--bg); }
.activity-body > .act-row::before { background: color-mix(in srgb, var(--fg) 8%, transparent); }

.working-mark svg { filter: none; }
.working-mark path { fill: var(--accent); }
.empty h2 { margin-bottom: 26px; }
.turn-cost { opacity: 0; transition: opacity .15s; }
.turn:hover .turn-cost { opacity: 1; }

/* ---------- Antigravity's scale, read from antigravity.google's own CSS (10-30): text 15px on
   22px with +.16px tracking, interface 14.5px, nothing under 12.5px; corners 8 / 16 / 24 / round;
   one easing, ease-out-quart. Chinese stays in the system face (a Latin web face beside YaHei
   mixes two x-heights). ---------- */
:root { --ease: cubic-bezier(.165, .84, .44, 1); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg) 16%, transparent) transparent; }

/* the conversation */
.answer { font-size: 15px; line-height: 1.75; letter-spacing: .011em; }
.answer table { font-size: 14px; }
.answer th { font-size: 13px; }
.msg-user { font-size: 15px; border-radius: 20px; }
.activity, .act-row, .activity-head, .act-line, .worked-head { font-size: 14px; }
.act-extra, .result-meta, .think-secs, .tool-secs { font-size: 13px; }
.result-title { font-size: 14px; }
.think-body, .think-preview { font-size: 13.5px; }
.turn-cost, .turn-end { font-size: 13px; }
.results-card, .plan { border-radius: 16px; }

/* the sidebar */
.chat-item .title, .project-row .title, .new-chat { font-size: 14.5px; }
.section-head { font-size: 12.5px; }

/* menus: 14.5px items, a narrow tick column only where ticks are, round corners, a thin scrollbar */
.popover { border-radius: 16px; padding: 6px; }
.popover-item { min-height: 36px; padding: 7px 12px; gap: 10px; font-size: 14.5px; }
.popover-label { font-size: 14.5px; }
.popover-check { width: 14px; height: 14px; }
.popover-group, .popover-title { padding: 10px 12px 4px; font-size: 12.5px; letter-spacing: .02em; }
.popover.model-menu { width: 330px; }
.popover-col:last-child { flex-basis: 96px; }
.popover-vsep { background: color-mix(in srgb, var(--fg) 7%, transparent); }

/* the box: one quiet border that darkens on focus, no ring; a send button that is grey until
   there is something to send, then the teal */
.composer { border-radius: 24px; }
.composer textarea { font-size: 15px; letter-spacing: .011em; }
.composer textarea::placeholder { color: color-mix(in srgb, var(--fg) 36%, transparent); }
.composer:not(.goal-on):focus-within {
  border-color: color-mix(in srgb, var(--fg) 20%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 40px rgba(15, 23, 42, .08);
}
.send:disabled { opacity: 1; background: color-mix(in srgb, var(--fg) 9%, transparent); color: color-mix(in srgb, var(--fg) 38%, transparent); box-shadow: none; }
.send:not(:disabled) { background: var(--accent); }
.context-ring { background: none; font-size: 13px; }
.context-ring:hover { background: var(--hover); }
#model-btn { font-size: 14px; }

/* motion: the one curve */
.popover, .select-bar, .link-card { animation-timing-function: var(--ease); }
.act-body, .activity-body, .worked-body { transition-timing-function: var(--ease), ease, linear; }
.act-row.enter, .result, .msg-user-wrap.enter { animation-timing-function: var(--ease); }

.site-icon.known img { transition: none; }

.answer h1, .answer h2, .answer h3, .answer h4, .empty h2 { letter-spacing: -.005em; }

/* the conversation fades out under the top bar and above the box instead of being cut off */
.scroller {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
}
.messages.swap-in { animation: rise .32s var(--ease); }
@media (prefers-reduced-motion: reduce) { .messages.swap-in { animation: none; } }

/* an answer's sources: two columns of quiet rows */
.answer .source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin: .4em 0 1em; padding: 0; list-style: none; }
.answer .source-list li { margin: 0; min-width: 0; }
.answer .source-list a {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 8px; border-radius: 10px;
  color: var(--fg); text-decoration: none; font-size: 14px; line-height: 1.45; transition: background .15s var(--ease);
}
.answer .source-list a:hover { background: var(--hover); text-decoration: none; }
.answer .source-list .site-icon { width: 16px; height: 16px; border-radius: 4px; }
.source-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-host { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .answer .source-list { grid-template-columns: 1fr; } }
.answer .source-label { margin: 1.1em 0 .2em; font-size: 13px; color: var(--muted); }
.answer .source-label + .source-list { margin-top: 0; }

/* the start page: the title and the box together, a little above the middle, as Claude's,
   DeepSeek's and Doubao's start pages sit; the box glides down when the conversation begins */
.main:has(#empty:not([hidden])) > .scroller {
  flex: 0 0 auto; margin-top: auto; overflow: visible; padding-bottom: 22px;
  -webkit-mask-image: none; mask-image: none;
}
.main:has(#empty:not([hidden])) > .composer { margin-bottom: auto; }
.main:has(#empty:not([hidden])) { padding-bottom: 12vh; }
.main:has(#empty:not([hidden])) .empty { margin-top: 0; }
.composer { view-transition-name: composer; }
.composer-where { view-transition-name: composer-where; }
::view-transition-group(composer), ::view-transition-group(composer-where) { animation-duration: .45s; animation-timing-function: var(--ease); }

/* the chat-memory gauge, always there and quiet: a fine ring, no grey box, its share on hover */
.context-ring { padding: 0 6px; height: 28px; }
.context-ring svg { width: 15px; height: 15px; }
.context-ring circle { stroke-width: 2.2; }
.ring-bg { stroke: color-mix(in srgb, var(--fg) 8%, transparent); }

/* send and stop: drawn icons, not the characters ↑ and ■ */
.send, .stop { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.send svg { width: 17px; height: 17px; }
.stop svg { width: 18px; height: 18px; }

/* the gauge as a small pie, filled by its share: an arc that short read as a spinner */
.context-ring svg { display: none; }
.context-ring::before {
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--share, 0) * 360deg), color-mix(in srgb, var(--fg) 10%, transparent) 0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent);
}
.context-ring.high::before { background: conic-gradient(#f47a50 calc(var(--share, 0) * 360deg), color-mix(in srgb, var(--fg) 10%, transparent) 0); }

/* drawn glyphs where characters stood (×, ＋, ⋯, ↑, ↓) */
.attachment-remove { display: inline-flex; align-items: center; justify-content: center; }
.attachment-remove-icon, .attachment-remove-icon svg { display: inline-flex; width: 11px; height: 11px; }
.icon-btn-glyph, .icon-btn-glyph svg { display: inline-flex; width: 15px; height: 15px; }
.find-bar .icon-btn svg { width: 15px; height: 15px; }

/* the side panel slides in from the right, as Claude's artifact panel does */
.files-panel:not([hidden]) { animation: panel-in .34s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateX(28px); } }
@media (prefers-reduced-motion: reduce) { .files-panel:not([hidden]) { animation: none; } }

.file-glyph { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--muted); opacity: 1; }
.file-glyph svg { width: 100%; height: 100%; }
#files-upload svg, #files-refresh svg { width: 15px; height: 15px; }

/* models by maker, each in its colour */
.maker-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 5px;
  background: var(--tint); color: #fff; font: 700 10px/1 var(--font); letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.popover-group.maker-group { display: flex; align-items: center; gap: 8px; padding-top: 12px; color: var(--fg-2); font-weight: 500; }
.popover-item.tinted { position: relative; }
.popover-item.tinted:hover { background: color-mix(in srgb, var(--tint) 8%, transparent); }
.popover-item.tinted.checked { background: color-mix(in srgb, var(--tint) 12%, transparent); font-weight: 500; }
.popover-item.tinted.checked .popover-check { color: var(--tint); }
.popover-item.tinted.checked::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--tint);
}
#model-btn { display: inline-flex; align-items: center; gap: 7px; }
#model-btn .maker-mark { width: 15px; height: 15px; border-radius: 4.5px; font-size: 9.5px; }

/* lists in answers: each item holds together, items apart */
.answer ol > li, .answer ul > li { line-height: 1.7; margin: .35em 0; }

/* the chat-memory card */
.popover.ctx-card { min-width: 0; width: 236px; padding: 14px 14px 12px; }
.ctx-card-top { display: flex; align-items: baseline; justify-content: space-between; }
.ctx-card-label { font-size: 13px; color: var(--muted); }
.ctx-card-pct { font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--fg); }
.ctx-card-bar { height: 4px; margin: 8px 0 12px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 8%, transparent); overflow: hidden; }
.ctx-card-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); animation: plan-fill .6s var(--ease); --from: 0%; }
.ctx-card-bar.high > span { background: #f47a50; }
.ctx-card-btn {
  width: 100%; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); border-radius: 10px;
  background: var(--bg); color: var(--fg); font-size: 13px; transition: background .15s var(--ease), border-color .15s var(--ease);
}
.ctx-card-btn:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-dark); }

/* the line under the box */
.composer-stats {
  max-width: 720px; width: calc(100% - 32px); margin: -6px auto 10px; display: flex; justify-content: center; align-items: center;
  gap: 18px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.composer-stats[hidden] { display: none; }
.composer-stats .stat { display: inline-flex; align-items: center; gap: 6px; }
.stat-icon, .stat-icon svg { display: inline-flex; width: 14px; height: 14px; }
.composer-stats .context-ring { height: auto; padding: 2px 6px; font-size: 12.5px; }

/* density as Claude's apps set it (measured off the user's screen, 10-30): text 15px on 1.65,
   lists a little tighter, paragraphs apart; a slim box */
.answer { font-size: 15px; line-height: 1.65; }
.answer p { margin: 0 0 .75em; }
.answer ol > li, .answer ul > li { line-height: 1.6; margin: .3em 0; }
.answer h1, .answer h2, .answer h3 { margin-top: 1.25em; }
.msg-user { line-height: 1.6; }
.composer { padding: 10px 10px 8px 16px; }
.composer textarea { min-height: 26px; }

/* the model menu, finer: the tick at the end, thinking levels as rising bars */
.popover.model-menu { width: 360px; padding: 6px; }
.popover.model-menu .popover-col:last-child { flex-basis: 118px; }
.popover.model-menu .popover-item { min-height: 34px; padding: 6px 10px 6px 12px; border-radius: 9px; }
.popover.model-menu .popover-item.tinted.checked::before { display: none; }
.popover.model-menu .popover-item.checked { font-weight: 500; }
.trailing-check { display: inline-flex; flex: none; width: 15px; height: 15px; margin-left: auto; color: var(--tint, var(--accent)); }
.trailing-check svg { width: 100%; height: 100%; }
.popover.model-menu .popover-text { flex: 1 1 auto; }
.level-bars { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.level-bars > span { width: 3px; border-radius: 1.5px; background: color-mix(in srgb, var(--fg) 14%, transparent); transition: background .2s var(--ease); }
.level-bars > span:nth-child(1) { height: 5px; } .level-bars > span:nth-child(2) { height: 7px; } .level-bars > span:nth-child(3) { height: 9px; }
.level-bars > span:nth-child(4) { height: 11px; } .level-bars > span:nth-child(5) { height: 13px; }
.level-bars > span.on { background: var(--accent); }
.popover-item:hover .level-bars > span.on { background: var(--accent-dark); }
.popover.model-menu .popover-group:not(.maker-group) { padding-left: 12px; }
.popover.model-menu .popover-item.checked:not(.tinted) { background: var(--accent-soft); }

/* the new tab: tools as tiles with a coloured icon, quiet section labels, files on tinted squares */
#pane-newtab { padding-top: 22px; }
.nt-section { margin-bottom: 26px; }
.nt-title { margin: 0 0 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
.nt-tools { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.nt-tool {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 16px; background: var(--bg); text-align: left;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.nt-tool:hover { background: var(--bg); transform: translateY(-2px); border-color: color-mix(in srgb, var(--fg) 12%, transparent); box-shadow: 0 10px 28px rgba(15, 23, 42, .08); }
.nt-tool .nt-icon { width: 38px; height: 38px; padding: 9px; border-radius: 11px; color: #fff; }
.nt-tool-folder .nt-icon { background: linear-gradient(140deg, #308a91, #1c6d74); }
.nt-tool-globe .nt-icon { background: linear-gradient(140deg, #5b8def, #3a5af4); }
.nt-tool-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-label { font-size: 14.5px; font-weight: 500; color: var(--fg); }
.nt-hint { font-size: 12.5px; color: var(--muted); }
.nt-recent { padding: 8px 10px; border-radius: 12px; gap: 12px; transition: background .15s var(--ease); }
.nt-recent:hover { background: var(--hover); }
.nt-recent-icon.file-glyph { width: 36px; height: 36px; padding: 9px; border-radius: 10px; background: color-mix(in srgb, currentColor 10%, transparent); }
.nt-recent-name { font-size: 14px; }
.nt-recent-dir { font-size: 12.5px; }
.nt-empty { font-size: 13.5px; color: var(--muted); }

/* the stats as quiet buttons, each with its card */
.composer-stats .stat { padding: 3px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: default; transition: background .15s var(--ease); }
.composer-stats .stat:hover, .composer-stats .stat:focus-visible { background: var(--hover); color: var(--fg-2); }
.stat-card {
  position: fixed; z-index: 46; width: 280px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 14px; background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 36px rgba(15, 23, 42, .12);
  font-size: 13px; animation: card-in-above .18s var(--ease); pointer-events: none;
}
.stat-card-head { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; margin-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--fg); }
.stat-card-title { font-weight: 600; }
.stat-card-total { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-card-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--fg-2); }
.stat-card-value { color: var(--fg); font-variant-numeric: tabular-nums; }
/* the turn's usage beside its answer's buttons */
.answer-usage { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* under answers and messages, the buttons as icons alone (their names on hover), as Claude's */
.answer-actions { gap: 2px; align-items: center; }
.answer-actions .copy-btn { width: 28px; height: 28px; padding: 6px; justify-content: center; border-radius: 8px; }
.answer-actions .copy-label { display: none; }
.answer-actions .copy-btn .copy-icon, .answer-actions .copy-btn .copy-icon svg { width: 15px; height: 15px; }
.answer-actions .copy-btn.copied { color: var(--accent); }
.answer-actions .msg-time { margin: 0 6px; font-size: 12.5px; color: var(--muted); }

/* the new tab, quiet as Claude's side panel: small icons, a list, labels in the text colour */
.nt-title { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--fg); margin-bottom: 8px; }
.nt-tools { display: flex; flex-direction: column; gap: 0; }
.nt-tool, .nt-tool:hover { padding: 7px 8px; border: 0; border-radius: 8px; background: none; transform: none; box-shadow: none; gap: 10px; }
.nt-tool:hover { background: var(--hover); }
.nt-tool .nt-icon { width: 16px; height: 16px; padding: 0; border-radius: 0; background: none !important; color: var(--muted); }
.nt-tool-text { flex-direction: row; align-items: baseline; gap: 10px; }
.nt-label { font-size: 14px; font-weight: 400; }
.nt-hint { font-size: 12.5px; }
.nt-recent { padding: 6px 8px; gap: 10px; }
.nt-recent-icon.file-glyph { width: 16px; height: 16px; padding: 0; border-radius: 0; background: none; }
.nt-section { margin-bottom: 22px; }

#files-refresh.turning svg { animation: spin .7s var(--ease) infinite; }
.answer-actions .msg-time { order: 5; }
.answer-actions .answer-usage { order: 6; margin-left: 0; }
#pane-newtab .nt-section { margin: 0 0 18px; padding: 0; }
#pane-newtab .nt-section + .nt-section { margin-top: 0; }

/* restraint again (10-30, the user: "卡通卡哇伊"): no lettered squares, no pie, no bars; the
   gauge a fine ring as DeepSeek's harness draws it; the chosen model on a faint grey */
.context-ring::before { display: none; }
.context-ring svg { display: inline-flex; width: 16px; height: 16px; }
.context-ring circle { stroke-width: 2; }
.ring-bg { stroke: color-mix(in srgb, var(--fg) 12%, transparent); }
.ring-fg { stroke: var(--accent); }
.context-ring.high .ring-fg { stroke: #e0703e; }
.popover.model-menu .popover-item.checked, .popover.model-menu .popover-item.checked:not(.tinted) { background: var(--hover); font-weight: 500; }
.trailing-check { color: var(--fg-2); }
#model-btn { gap: 6px; color: var(--fg-2); }

.popover-item-icon { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--fg-2); }
.popover-item-icon svg { width: 100%; height: 100%; }

/* the makers' logos: bare, small, beside the name */
.maker-logo { flex: none; width: 15px; height: 15px; display: inline-block; }
.popover-group.maker-group { gap: 8px; color: var(--fg-2); font-weight: 500; }
.popover-group.maker-group .maker-logo { width: 14px; height: 14px; }
#model-btn .maker-logo { width: 15px; height: 15px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maker-logo.mono { filter: invert(1); } }
:root[data-theme="dark"] .maker-logo.mono { filter: invert(1); }

/* as Claude's app sets a conversation (10-30, measured off the user's screenshots): a hairline
   under the top bar; text a touch smaller and closer, lists tight, headings by weight alone; a
   narrower column */
.topbar { min-height: 48px; padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.chat-title { font-size: 14px; }
.messages { max-width: 680px; }
.answer { font-size: 14.5px; line-height: 1.6; letter-spacing: .005em; }
.answer p { margin: 0 0 .8em; }
.answer ol > li, .answer ul > li { line-height: 1.55; margin: .2em 0; }
.answer ul, .answer ol { margin: .2em 0 .8em; padding-left: 1.3em; }
.answer h1 { font-size: 1.2em; } .answer h2 { font-size: 1.1em; } .answer h3, .answer h4 { font-size: 1em; }
.answer h1, .answer h2, .answer h3, .answer h4 { font-weight: 600; letter-spacing: 0; margin: 1.2em 0 .45em; line-height: 1.45; }
.answer table { font-size: 13.5px; line-height: 1.55; }
.answer th, .answer td { padding-top: 7px; padding-bottom: 7px; }
.msg-user { font-size: 14.5px; line-height: 1.55; padding: 8px 14px; border-radius: 16px; }
.composer, .composer-stats { max-width: 680px; }
.composer textarea { font-size: 14.5px; }

/* the start page as Google's Antigravity 2.0 sets its page (10-30, the user's reference): white
   space, faint light gathering in the corners in our colours (teal, a violet, a little warmth),
   a clean bold title with one word in a gradient; no cartoon clouds */
.clouds { display: none; }
.main:has(#empty:not([hidden])) {
  background:
    radial-gradient(42% 55% at 6% 78%, rgba(70, 62, 45, .17), transparent 70%),
    radial-gradient(38% 50% at 96% 88%, rgba(150, 120, 255, .14), transparent 70%),
    radial-gradient(30% 38% at 88% 8%, rgba(244, 122, 80, .07), transparent 70%),
    var(--bg);
}
:root[data-theme="dark"] .main:has(#empty:not([hidden])) {
  background:
    radial-gradient(42% 55% at 6% 78%, rgba(70, 62, 45, .12), transparent 70%),
    radial-gradient(38% 50% at 96% 88%, rgba(150, 120, 255, .10), transparent 70%),
    var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .main:has(#empty:not([hidden])) {
    background:
      radial-gradient(42% 55% at 6% 78%, rgba(70, 62, 45, .12), transparent 70%),
      radial-gradient(38% 50% at 96% 88%, rgba(150, 120, 255, .10), transparent 70%),
      var(--bg);
  }
}
.main:has(#empty:not([hidden])) .topbar { background: transparent; }
.empty h2 { font-size: 30px; font-weight: 700; letter-spacing: -.015em; gap: 12px; }
.empty .hero-mark { width: 40px; height: 40px; }
.empty .project-pick, .empty .project-pick span {
  background: linear-gradient(95deg, #1c6d74 0%, #2f8fd8 55%, #7c5cf0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.empty .project-pick { text-decoration: none; border-bottom: 2px solid color-mix(in srgb, #2f8fd8 22%, transparent); }
.main:has(#empty:not([hidden])) .composer { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 48px rgba(15, 23, 42, .08); border-color: rgba(15, 23, 42, .08); }
.example { background: rgba(255, 255, 255, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.main:has(#empty:not([hidden])) .composer-where { background: transparent; color: var(--fg-2); padding-left: 22px; }

/* the field behind the start page (plain white under it, as antigravity.google) */
.main:has(#empty:not([hidden])) { background: var(--bg); }
.start-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.start-field[hidden] { display: none; }
.main > .topbar, .main > .scroller, .main > .composer-where, .main > .composer, .main > .composer-stats { position: relative; z-index: 1; }
.main:has(#empty:not([hidden])) .empty h2 { font-size: 34px; letter-spacing: -.02em; }

/* the logos to one apparent size: a spiky or full-bleed mark drawn a little smaller */
.maker-logo[data-maker="Claude"] { transform: scale(.86); }
.maker-logo[data-maker="GLM"] { transform: scale(.84); }
.maker-logo[data-maker="MiMo"] { transform: scale(.9); }
.maker-logo[data-maker="Kimi"] { transform: scale(.9); }
.maker-logo[data-maker="Gemini"] { transform: scale(.9); }
/* a model's cost against DeepSeek V4.1 Flash, quiet at the row's end (10-30) */
.popover-meta { margin-left: auto; padding-left: 14px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.popover-meta + .trailing-check { margin-left: 8px; }
.popover.model-menu:has(.popover-meta) { width: 410px; }
.popover.model-menu .popover-label { white-space: nowrap; }
.maker-logo[data-maker="GPT"], .maker-logo[data-maker="Qwen"] { transform: scale(.94); }

/* our colours, as the logo and PaperLu's 新建任务 page: the project's name in the logo's teal
   gradient, the strip over the box in its teal tint */
.empty .project-pick, .empty .project-pick span { background: linear-gradient(95deg, #56a1a6 0%, #1c6d74 55%, #134e56 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.empty .project-pick { border-bottom-color: rgba(28, 109, 116, .22); }
.main:has(#empty:not([hidden])) .composer-where { background: linear-gradient(135deg, rgba(70, 62, 45, .12), rgba(70, 62, 45, .08)); color: var(--accent-dark); }

/* ---------- the start page as Claude's (10-30, the user's reference): a modest greeting, a narrow
   box, the project as one line of small text under it, the examples quiet under that, everything
   on one left edge; no field, no stats, no fades ---------- */
.scroller { -webkit-mask-image: none; mask-image: none; }
.main:has(#empty:not([hidden])) { padding-bottom: 14vh; }
.main:has(#empty:not([hidden])) .empty h2 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; gap: 10px; margin: 0 0 20px; }
.main:has(#empty:not([hidden])) .empty .hero-mark { width: 28px; height: 28px; transform: none; }
.empty .project-pick, .empty .project-pick span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent); }
.empty .project-pick { border-bottom: 0; text-decoration: none; }
.main:has(#empty:not([hidden])) > .composer { order: 1; max-width: 640px; width: calc(100% - 32px); }
.main:has(#empty:not([hidden])) > .composer-where {
  order: 2; max-width: 640px; width: calc(100% - 32px); margin: 8px auto 0; padding: 0 16px; border: 0; border-radius: 0;
  background: none !important; box-shadow: none; font-size: 13px; color: var(--fg-2) !important;
}
.main:has(#empty:not([hidden])) > .composer-stats { display: none; }
.main:has(#empty:not([hidden])) .scroller { order: 0; }
.main:has(#empty:not([hidden])) .examples-wrap, .main:has(#empty:not([hidden])) .examples { display: none; }
.main:has(#empty:not([hidden])) > .composer { margin-bottom: 0; }
.main:has(#empty:not([hidden])) > .composer-where { margin-bottom: auto; }
/* the stat cards and the line under the box, as DeepSeek's harness sets them (10-30): small and tight */
.composer-stats { font-size: 12px; gap: 10px; margin-top: -4px; }
.composer-stats .stat { padding: 2px 7px; }
.stat-icon, .stat-icon svg { width: 13px; height: 13px; }
.stat-card { width: 248px; padding: 10px 12px; font-size: 12px; border-radius: 12px; }
.stat-card-head { padding-bottom: 7px; margin-bottom: 4px; font-size: 12.5px; }
.stat-card-title, .stat-card-total { font-weight: 500; }
.stat-card-row { padding: 2.5px 0; }
.answer-usage { font-size: 12px; }

/* an icon beside words: the words' box trimmed to the letters (cap height to baseline) so the two
   centre on what the eye sees, not on the font's uneven ascent and descent (10-30, the user: logo
   and text not centred) */
#model-btn .model-name, #model-btn .effort-label, .composer-stats .stat > span:last-child,
.popover-item .popover-label, .popover-group.maker-group, .answer-usage > span:last-child,
.act-line > .act-verb, .activity-head > .act-verb {
  text-box: trim-both cap alphabetic;
}
#model-btn { align-items: center; line-height: 1; }

/* ---------- the agent's start page as PaperLu's 新建任务 (10-30, the user: the two looked unrelated).
   Measured off 3001 in screen pixels: a 31px bold heading by a 41px mark; the examples as pills
   above the box, on its left edge; a 749px tray in the teal gradient holding the white box, the
   project on the tray under it; 16.8px input, 13.8px controls, a 38px teal send. ---------- */
.main:has(#empty:not([hidden])) .empty { max-width: 749px; width: calc(100% - 32px); margin: 0 auto; text-align: left; }
.main:has(#empty:not([hidden])) .empty h2 { justify-content: center; font-size: 31px; font-weight: 700; letter-spacing: 0; gap: 12px; margin: 0 0 40px; }
.main:has(#empty:not([hidden])) .empty .hero-mark { width: 41px; height: 41px; }
.main:has(#empty:not([hidden])) .examples { display: flex !important; flex-wrap: wrap; justify-content: flex-start; gap: 8px; max-width: none; margin: 0 0 12px; }
.main:has(#empty:not([hidden])) .example {
  padding: 7px 14px; border: 1px solid #e7ebef; border-radius: 999px; background: rgba(255, 255, 255, .66);
  color: #64748b; font-size: 13.8px; line-height: 1.4; transform: none; box-shadow: none;
}
.main:has(#empty:not([hidden])) .example:hover { background: rgba(70, 62, 45, .10); border-color: rgba(70, 62, 45, .18); color: #134e56; transform: none; box-shadow: none; }
.main:has(#empty:not([hidden])) > .composer {
  max-width: 741px; width: calc(100% - 40px); position: relative; z-index: 2; border: 0; border-radius: 24px; padding: 12px 10px 8px 16px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06) !important;
}
.main:has(#empty:not([hidden])) > .composer textarea { font-size: 16.8px; min-height: 64px; }
.main:has(#empty:not([hidden])) #model-btn { font-size: 13.8px; }
.main:has(#empty:not([hidden])) .send { width: 38px; height: 38px; }
.main:has(#empty:not([hidden])) > .composer-where {
  position: relative; z-index: 1; max-width: 749px; width: calc(100% - 32px); margin: -150px auto auto !important; padding: 150px 16px 12px;
  border-radius: 24px; background: linear-gradient(135deg, rgba(70, 62, 45, .12), rgba(70, 62, 45, .08)) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .07); font-size: 13.8px; color: #475569 !important;
}

/* the tray: a 4px teal ring round the box, flowing into the strip under it that holds the project */
.main:has(#empty:not([hidden])) > .composer { box-shadow: 0 0 0 4px rgba(70, 62, 45, .11), 0 2px 6px rgba(15, 23, 42, .06) !important; }
.main:has(#empty:not([hidden])) > .composer-where {
  margin: -24px auto auto !important; padding: 34px 16px 12px; border-radius: 0 0 24px 24px; max-width: 749px; width: calc(100% - 32px);
}

/* in a conversation, as Claude's: a slim box and the line under it close to it (10-30: too much air) */
.main:not(:has(#empty:not([hidden]))) > .composer { margin-bottom: 2px; padding: 8px 8px 6px 14px; }
.main:not(:has(#empty:not([hidden]))) > .composer textarea { min-height: 24px; }
.main:not(:has(#empty:not([hidden]))) .send { width: 30px; height: 30px; }
.composer-stats { margin: 0 auto 6px; }

/* the side panel as Claude's: narrow for lists (this conversation, files, new tab), wide only for
   what is read in it (a document, the browser); 13px rows, the kind or name at the end */
/* narrow by default; a width the user drags to wins (10-30: the !important here stopped dragging) */
.files-panel[data-kind="summary"], .files-panel[data-kind="files"], .files-panel[data-kind="newtab"] { width: var(--files-width, clamp(280px, 21vw, 340px)); }
#pane-summary { padding: 14px 14px; }
.sum-section { margin-bottom: 18px; }
.sum-section .nt-title { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--fg); letter-spacing: 0; }
.sum-sub { margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
.sum-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 4px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 13px; color: var(--fg-2); }
button.sum-row:hover { background: var(--hover); color: var(--fg); }
.sum-row-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.sum-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-row-meta { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.sum-icon, .sum-icon svg { display: inline-flex; flex: none; width: 14px; height: 14px; color: var(--muted); }
.sum-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.sum-tool { padding: 1px 7px; border-radius: 6px; background: var(--hover); font-size: 12px; color: var(--fg-2); }
#pane-summary .todo li { font-size: 13px; }
#pane-newtab .nt-hint:empty { display: none; }

/* the chat-memory card small, as DeepSeek's (10-30) */
.popover.ctx-card { width: 200px; padding: 10px 12px; border-radius: 12px; }
.ctx-card-label { font-size: 12px; }
.ctx-card-pct { font-size: 14px; font-weight: 500; }
.ctx-card-bar { height: 3px; margin: 6px 0 9px; }
.ctx-card-btn { padding: 4px 8px; border-radius: 8px; font-size: 12px; }
#pane-summary { overflow-x: hidden; }
#pane-summary *, #pane-summary .sum-section { min-width: 0; max-width: 100%; }
.canvas-tab { min-width: 0; flex: 0 1 auto; }
.canvas-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-panel[data-kind="summary"] .canvas-tab, .files-panel[data-kind="files"] .canvas-tab, .files-panel[data-kind="newtab"] .canvas-tab { max-width: 120px; padding-left: 8px; padding-right: 6px; font-size: 12.5px; }
.files-panel:is([data-kind="summary"], [data-kind="files"], [data-kind="newtab"]) .canvas-tab { max-width: none; }
.files-panel:is([data-kind="summary"], [data-kind="files"], [data-kind="newtab"]) .canvas-tab:not(.active) .canvas-tab-label,
.files-panel:is([data-kind="summary"], [data-kind="files"], [data-kind="newtab"]) .canvas-tab:not(.active) .canvas-tab-close { display: none; }
.files-panel:is([data-kind="summary"], [data-kind="files"], [data-kind="newtab"]) .canvas-tab:not(.active) { padding: 0 7px; }

/* a finished turn's line as Claude's: grey words, a small caret right after them */
.worked-head { gap: 4px; font-size: 13.5px; color: var(--muted); }
.worked-head .act-caret { width: 11px; height: 11px; opacity: .8; }

.main:has(#empty:not([hidden])) .examples { justify-content: center !important; }

/* the start page laid out as Claude's (10-30, the user's screenshots): the greeting as one unit
   centred over the box, its mark the height of its letters, regular weight, close to the box; the
   examples under it all */
.main:has(#empty:not([hidden])) .empty h2 {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px;
  font-size: 30px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2;
}
.main:has(#empty:not([hidden])) .empty h2 > span { text-box: trim-both cap alphabetic; }
.main:has(#empty:not([hidden])) .empty .hero-mark { width: 32px; height: 32px; transform: translateY(-1px); }
.main:has(#empty:not([hidden])) > .examples {
  display: flex !important; order: 3; flex-wrap: wrap; justify-content: center !important; gap: 8px;
  max-width: 749px; width: calc(100% - 32px); margin: 18px auto auto;
}
.main:has(#empty:not([hidden])) > .composer-where { margin-bottom: 0 !important; }
.main:not(:has(#empty:not([hidden]))) > .examples { display: none !important; }
/* the greeting in PaperLu's own weight and mark (10-30, the user: 500 rendered thin in YaHei, the
   mark too small): 31px bold by a 41px mark, as 3001's start page; Claude's placing kept */
.main:has(#empty:not([hidden])) .empty h2 { font-size: 31px; font-weight: 700; letter-spacing: 0; gap: 12px; margin-bottom: 22px; }
.main:has(#empty:not([hidden])) .empty .hero-mark { width: 41px; height: 41px; transform: translateY(-2px); }
/* the project's name keeps its dotted underline: it is a menu (10-30, the user missed it) */
.empty .project-pick {
  text-decoration: underline dotted color-mix(in srgb, var(--accent) 55%, transparent); text-decoration-thickness: 2px;
  text-underline-offset: 7px; border-bottom: 0;
}
.empty .project-pick:hover { text-decoration-color: var(--accent); }
/* the greeting's words trimmed to the Chinese glyphs' ink so the mark centres on what is seen */
.main:has(#empty:not([hidden])) .empty h2 > span { text-box: trim-both ideographic-ink; }
.main:has(#empty:not([hidden])) .empty .hero-mark { transform: none; }
/* Chinese beside Latin or an icon centres on the Chinese glyphs' ink (高 sat low on the Latin cap
   line, 10-30): ideographic-ink for words that hold Chinese, cap/alphabetic for Latin alone */
#model-btn .effort-label, .composer-stats .stat > span:last-child, .popover-item .popover-label,
.popover-group.maker-group, .answer-usage > span:last-child, .act-line > .act-verb, .activity-head > .act-verb {
  text-box: trim-both ideographic-ink;
}

/* the examples above the box, as 3001's start page (10-30, the user: put them back) */
.main:has(#empty:not([hidden])) .empty h2 { margin-bottom: 30px; }
.main:has(#empty:not([hidden])) .empty .examples { display: flex !important; justify-content: center !important; margin: 0 0 14px; }
.main:has(#empty:not([hidden])) > .composer-where { margin-bottom: auto !important; }

/* back to the bottom, as Claude's: a round button that reads over the text (a clear edge, a soft
   lift), rising in when the reader has scrolled up (10-30) */
.jump-down {
  width: 32px; height: 32px; margin-left: -16px; padding: 7px; bottom: 132px;
  border-color: color-mix(in srgb, var(--fg) 14%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
  transition: opacity .2s var(--ease), transform .2s var(--ease), display .2s allow-discrete, background-color .15s;
}
.jump-down[hidden] { display: none; opacity: 0; transform: translateY(6px); }
@starting-style { .jump-down:not([hidden]) { opacity: 0; transform: translateY(6px); } }

/* a running step's words (the light sweeping through them) are painted from their background:
   the box trimmed to the glyphs' ink left their tops and bottoms unpainted (10-30, the user: 被挡住了).
   The background reaches past the trim; the layout does not move */
.act-verb.shimmer { padding-block: .3em; margin-block: -.3em; }

/* the line under the box keeps its room before it has anything to say (a first answer still
   running): without it the box sat on the window's bottom edge, then jumped up once the counts
   came (10-30, the user: 贴这么底下干嘛). The start page has no such line */
.composer-stats { min-height: 26px; }

/* messages waiting for the turn: a tray in the theme's teal behind the box, one row each, its
   actions always there - 现在发送 as a small teal pill (10-31: grey, and two icons only on hover, 太丑) */
.queued {
  max-width: 656px; width: calc(100% - 56px); margin: 0 auto -20px; box-sizing: border-box; position: relative;
  gap: 2px; padding: 6px 6px 26px; border-radius: 16px 16px 0 0;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--bg)), color-mix(in srgb, var(--accent) 4%, var(--bg)));
  animation: rise .2s var(--ease);
}
.queued[hidden] { display: none; }
.queued ~ .composer { position: relative; z-index: 1; }
.queued-row {
  height: 36px; gap: 10px; padding: 0 4px 0 6px; border: 0; border-radius: 10px; background: none;
  font-size: 13.5px; transition: background .12s var(--ease);
}
.queued-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.queued-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--accent-dark);
}
.queued-icon svg { width: 14px; height: 14px; }
.queued-text { color: var(--fg); }
.queued-act {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; border-radius: 8px; background: none; color: color-mix(in srgb, var(--fg) 55%, transparent); cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease), transform .12s var(--ease);
}
.queued-act[hidden] { display: none; }
.queued-act:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-dark); }
.queued-act.danger:hover { background: color-mix(in srgb, #e5484d 10%, transparent); color: #d93d42; }
.queued-act-icon, .queued-act-icon svg { display: inline-flex; width: 15px; height: 15px; }
.queued-steer {
  width: auto; gap: 4px; height: 26px; padding: 0 10px 0 8px; margin-right: 2px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg)); color: var(--accent-dark); font-size: 12.5px; font-weight: 500;
}
.queued-steer .queued-act-icon, .queued-steer .queued-act-icon svg { width: 13px; height: 13px; }
.queued-steer:hover { background: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.queued-paused { color: var(--muted); }

/* the model column's head: 模型, and over the numbers what they are (10-31); it stays while the
   list scrolls */
.popover-group.has-meta {
  display: flex; align-items: center; position: sticky; top: 0; z-index: 1; background: var(--bg);
}
.popover-group.has-meta .popover-meta { padding-right: 31px; font-size: inherit; }

/* embedded on a phone, PaperLu's menu button sits over the top-left corner: the title starts after it (10-31) */
@media (max-width: 768px) {
  .embedded .topbar { padding-left: calc(60px + env(safe-area-inset-left, 0px)); }
}

/* the project under the box and its menu, as Claude's (10-31: "字体大小和美观度不如Claude") */
.where-item {
  height: 30px; gap: 6px; padding: 0 8px 0 9px; border-radius: 9px; font-size: 14px; font-weight: 500;
  color: color-mix(in srgb, var(--fg) 82%, transparent); transition: background .12s var(--ease), color .12s var(--ease);
}
.where-item:hover, .where-item[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-dark); }
.where-item .where-icon, .where-item .where-icon svg { width: 15px; height: 15px; }
.where-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.where-chevron { display: inline-flex; width: 13px; height: 13px; color: var(--muted); transform: rotate(90deg); transition: transform .18s var(--ease); }
.where-chevron svg { width: 100%; height: 100%; }
.where-item[aria-expanded="true"] .where-chevron { transform: rotate(-90deg); }
.popover.project-menu {
  width: 300px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 8px; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 14px 40px rgba(15, 23, 42, .14); overflow: visible;
}
.project-menu-search {
  display: flex; align-items: center; gap: 9px; margin: 0 2px 6px; padding: 6px 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); cursor: text;
}
.project-menu-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 2px 0; color: var(--fg); font: inherit; font-size: 14px; }
.project-menu-search input::placeholder { color: var(--muted); }
.project-menu-search-icon, .project-menu-search-icon svg { display: inline-flex; width: 16px; height: 16px; color: var(--muted); }
.project-menu-group { padding: 4px 10px 4px; font-size: 12.5px; color: var(--muted); }
.project-menu-list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.project-menu .popover-item { min-height: 36px; gap: 10px; padding: 6px 10px; font-size: 14px; }
.project-menu-icon, .project-menu-icon svg { flex: none; display: inline-flex; width: 16px; height: 16px; color: color-mix(in srgb, var(--fg) 62%, transparent); }
.project-menu-item .popover-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-menu-item.current .project-menu-icon { color: var(--accent-dark); }
.project-menu-check, .project-menu-check svg { flex: none; display: inline-flex; width: 15px; height: 15px; color: var(--accent); }
.project-menu-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }
.project-menu-new:hover .project-menu-icon { color: var(--accent-dark); }