:root {
  --canvas: #f3f4f2;
  --paper: #fffefa;
  --warm: #fbf2e3;
  --ink: #14171c;
  --muted: #68717c;
  --faint: #929aa2;
  --line: #d4d9dc;
  --line-strong: #aeb7be;
  --cobalt: #1b3768;
  --cobalt-soft: #e8edf4;
  --success: #356652;
  --danger: #a04440;
  --max: 1320px;
  --sans: "PingFang SC", "Noto Sans CJK SC", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
*[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, textarea, select { font: inherit; }
button, a, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
.page-shell { min-height: 100dvh; overflow: clip; }
.skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 50;
  padding: 8px 12px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 74px;
  padding: 0 clamp(20px, 4.5vw, 64px);
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 244, 242, .97);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 208px;
  text-decoration: none;
}
.wordmark-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--cobalt);
  color: #fff;
  font: 700 11px/1 var(--mono);
  letter-spacing: -.08em;
}
.wordmark strong { display: block; font-size: 15px; letter-spacing: .08em; }
.wordmark small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 29px);
  margin-right: auto;
  color: var(--muted);
  font-size: 13px;
}
.primary-nav a {
  position: relative;
  padding: 24px 0 22px;
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 15px;
  left: 0;
  height: 1px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--ink); }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform: scaleX(1); }
.account-nav { position: relative; display: flex; align-items: center; gap: 12px; }
.usage-label { color: var(--faint); font: 11px/1 var(--mono); white-space: nowrap; }
.text-button, .minor-button, .footer-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--cobalt);
  font-size: 13px;
}
.text-button { padding: 8px 11px; border: 1px solid var(--line-strong); }
.text-button:hover, .text-button:focus-visible { border-color: var(--cobalt); background: var(--cobalt-soft); }
.user-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.user-menu-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 12px;
}
.user-menu-item:hover, .user-menu-item:focus-visible { background: var(--cobalt-soft); }

main { display: block; }
.hero {
  position: relative;
  max-width: var(--max);
  min-height: 632px;
  margin: 0 auto;
  padding: 78px clamp(24px, 5vw, 70px) 70px;
  display: grid;
  grid-template-columns: minmax(440px, .92fr) minmax(560px, 1.08fr);
  gap: clamp(48px, 7vw, 108px);
  align-items: start;
}
.hero::before {
  content: "";
  position: absolute;
  top: 24px;
  right: clamp(24px, 5vw, 70px);
  left: clamp(24px, 5vw, 70px);
  height: 1px;
  background: var(--line);
}
.eyebrow, .section-kicker, .stage-marker, .block-label, .companion-kicker {
  color: var(--cobalt);
  font: 600 10px/1.2 var(--mono);
  letter-spacing: .13em;
}
.eyebrow { display: inline-flex; align-items: center; gap: 11px; }
.eyebrow-rule { display: block; width: 32px; height: 1px; background: var(--cobalt); }
h1, h2, p { margin: 0; }
h1 {
  max-width: 9.5em;
  margin-top: 23px;
  font-size: clamp(58px, 5.2vw, 76px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.055em;
}
h1 span { display: block; white-space: nowrap; }
.hero-sub {
  max-width: 385px;
  margin-top: 26px;
  color: var(--muted);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.58;
}
.hero-note {
  max-width: 370px;
  margin-top: 46px;
  padding-top: 14px;
  display: flex;
  gap: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.note-index { color: var(--cobalt); font: 13px/1 var(--mono); }

.hero-stage { position: relative; padding-top: 23px; min-width: 0; }
.stage-marker { position: absolute; top: 0; left: 0; color: var(--faint); }
.composer {
  position: relative;
  z-index: 2;
  padding: 27px 30px 21px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
/* Lift the menu's ancestor above the companion only while upload is open. */
.composer:has(#uploadMenu:not([hidden])) { z-index: 5; }
.composer > label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}
.assistant-input {
  display: block;
  width: 100%;
  min-height: 144px;
  margin-top: 11px;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: 0;
  padding: 9px 0 14px;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.55;
}
.assistant-input::placeholder { color: #a3aab1; }
.assistant-input:focus { border-bottom-color: var(--cobalt); box-shadow: 0 1px 0 var(--cobalt); }
.input-help { margin-top: 9px; color: var(--faint); font-size: 11px; }
.composer-tools {
  min-height: 52px;
  margin-top: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.attach-wrap { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; }
.attach-button {
  border: 0;
  padding: 7px 0;
  background: none;
  color: var(--cobalt);
  font-size: 13px;
}
.attach-button:hover, .attach-button:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.upload-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 4;
  min-width: 150px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.upload-menu button {
  display: block;
  width: 100%;
  border: 0;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 12px;
}
.upload-menu button:hover, .upload-menu button:focus-visible { background: var(--cobalt-soft); }
.upload-status { color: var(--muted); font-size: 11px; }
.attachment-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.attachment-chip button { border: 0; padding: 0; background: transparent; color: var(--muted); }
.primary-action {
  min-width: 145px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid var(--cobalt);
  padding: 0 14px 0 17px;
  background: var(--cobalt);
  color: #fff;
  font-size: 14px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.primary-action:hover, .primary-action:focus-visible { background: #142b53; transform: translateY(-1px); }
.primary-action:active { transform: translateY(0); }
.primary-action:disabled { cursor: not-allowed; opacity: .42; transform: none; }
.btn-arrow { font-size: 18px; line-height: 1; }
.cancel-action {
  min-height: 42px;
  border: 1px solid var(--line-strong);
  padding: 0 13px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.cancel-action:hover, .cancel-action:focus-visible { border-color: var(--cobalt); color: var(--cobalt); }
.advanced-settings { margin-top: 19px; border-top: 1px solid var(--line); }
.advanced-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 11px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  list-style: none;
}
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary span { color: var(--cobalt); font-size: 16px; }
.settings-row { display: grid; grid-template-columns: auto 150px 1fr; align-items: center; gap: 12px; padding-top: 13px; color: var(--muted); font-size: 11px; }
.settings-row select {
  height: 32px;
  border: 1px solid var(--line);
  padding: 0 7px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
}
.settings-hint { color: var(--faint); }
.composer-status {
  min-height: 19px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 11px;
}
.composer-status.is-error { color: var(--danger); }
.composer-status.is-success { color: var(--success); }
.chat-area {
  margin-top: 12px;
  border-left: 2px solid var(--cobalt);
  padding: 9px 0 9px 13px;
  color: var(--muted);
  font-size: 12px;
}
.companion {
  min-height: 152px;
  margin-top: 27px;
  padding-top: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 21px;
  border-top: 1px solid var(--line);
}
.companion-copy { max-width: 245px; margin-bottom: 13px; }
.companion-copy p { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.companion-portrait {
  width: 150px;
  height: 178px;
  overflow: hidden;
  flex: 0 0 auto;
}
.companion-portrait img {
  width: 170px;
  height: 170px;
  transform: translateX(-10px);
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}
.companion-avatar { display: none !important; }

.quick-section, .work-section, .capability-section, .compatibility {
  max-width: var(--max);
  margin: 0 auto;
  padding: 70px clamp(24px, 5vw, 70px) 80px;
  border-top: 1px solid var(--line);
}
.quick-section { background: var(--paper); }
.section-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--faint);
}
.quick-layout, .work-grid, .capability-grid {
  display: grid;
  grid-template-columns: minmax(250px, .74fr) minmax(0, 1.26fr);
  gap: clamp(44px, 8vw, 118px);
  margin-top: 37px;
}
h2 { font-size: clamp(34px, 4vw, 53px); font-weight: 600; line-height: 1.08; letter-spacing: -.05em; }
.quick-layout p, .work-intro p, .capability-grid > div > p { max-width: 340px; margin-top: 17px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.quick-list { counter-reset: quick; border-top: 1px solid var(--line); }
.quick-item {
  width: 100%;
  min-height: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 16px;
}
.quick-item::before { counter-increment: quick; content: "0" counter(quick); min-width: 26px; color: var(--cobalt); font: 10px/1 var(--mono); }
.quick-item span:first-of-type { flex: 1; }
.quick-item span:last-child { color: var(--cobalt); transition: transform .18s ease; }
.quick-item:hover, .quick-item:focus-visible { color: var(--cobalt); }
.quick-item:hover span:last-child, .quick-item:focus-visible span:last-child { transform: translateX(5px); }

.work-section { background: var(--canvas); }
.work-grid { grid-template-columns: minmax(260px, .68fr) minmax(340px, 1fr) minmax(200px, .55fr); gap: clamp(28px, 4vw, 58px); }
.recent-block { border-top: 1px solid var(--line); }
.block-heading { min-height: 67px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.block-heading strong { display: block; margin-top: 5px; font-size: 17px; font-weight: 600; }
.minor-button { border-bottom: 1px solid var(--cobalt); padding-bottom: 3px; }
.recent-item { width: 100%; padding: 14px 0; display: flex; justify-content: space-between; gap: 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.recent-item:hover, .recent-item:focus-visible { color: var(--cobalt); }
.recent-item b { display: block; font-weight: 550; }
.recent-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.empty-history { padding: 20px 0; color: var(--muted); font-size: 12px; }
.today-action { align-self: start; padding: 19px 20px; border-left: 3px solid var(--cobalt); background: var(--warm); }
.today-action strong { display: block; margin-top: 17px; font-size: 18px; font-weight: 600; }
.today-action p { margin-top: 9px; color: var(--muted); font-size: 12px; }
.text-link { margin-top: 22px; border: 0; border-bottom: 1px solid var(--cobalt); padding: 0 0 3px; background: none; color: var(--cobalt); font-size: 12px; }

.capability-section { background: var(--paper); }
.capability-list { border-top: 1px solid var(--line); }
.capability-list div { min-height: 64px; padding: 14px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.capability-list span { color: var(--muted); font-size: 12px; }
.capability-list strong { font-weight: 550; text-align: right; }
.compat-slot { margin-top: 25px; padding: 11px 0; border-bottom: 1px dashed var(--line-strong); color: var(--faint); font-size: 11px; }

.compatibility { padding-top: 18px; padding-bottom: 26px; }
.compatibility-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  color: var(--faint);
  font: 10px/1 var(--mono);
  letter-spacing: .1em;
  cursor: pointer;
  list-style: none;
}
.compatibility-head::-webkit-details-marker { display: none; }
.compatibility-head span:first-child { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.compatibility p { max-width: 620px; margin-top: 17px; color: var(--muted); font-size: 12px; }
.compatibility-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.compatibility-tags span { padding: 5px 8px; border: 1px solid var(--line); color: var(--muted); font: 10px/1 var(--mono); }

.footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 23px clamp(24px, 5vw, 70px) 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--faint);
  font-size: 11px;
}
.footer a { text-decoration: none; color: var(--ink); }
.footer-link { border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; color: var(--muted); }
.footer-link:hover, .footer-link:focus-visible { color: var(--cobalt); border-color: var(--cobalt); }

.demo-panel {
  width: min(640px, calc(100% - 48px));
  margin: 0 auto 32px;
  padding: 11px 14px 14px;
  border-top: 1px solid var(--line-strong);
  background: var(--paper);
}
.demo-panel-head { display: flex; align-items: center; gap: 7px; font: 10px/1 var(--mono); letter-spacing: .08em; }
.demo-dot { width: 6px; height: 6px; background: var(--cobalt); }
.demo-close { margin-left: auto; border: 0; padding: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; }
.demo-panel label { display: block; margin-top: 13px; color: var(--muted); font-size: 11px; }
.demo-panel select { width: 100%; min-height: 34px; margin-top: 5px; border: 1px solid var(--line); padding: 0 8px; background: var(--canvas); color: var(--ink); font-size: 12px; }
.demo-panel p { margin-top: 8px; color: var(--faint); font-size: 10px; }
.demo-panel.is-collapsed { width: min(640px, calc(100% - 48px)); padding-bottom: 11px; }
.demo-panel.is-collapsed label, .demo-panel.is-collapsed select, .demo-panel.is-collapsed p { display: none; }

.state-sentinels { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body[data-demo-state="logged-in"] #homepageUsage { color: var(--success); }
body[data-demo-state="logged-in"] #loginBtn { color: var(--success); border-color: #a9cdbb; }
body[data-demo-state="focused"] .assistant-input { border-bottom-color: var(--cobalt); box-shadow: 0 1px 0 var(--cobalt); }
body[data-demo-state="typed"] .assistant-input { border-bottom-color: var(--cobalt); }
body[data-demo-state="uploading"] #uploadStatus { color: var(--cobalt); }
body[data-demo-state="generating"] .primary-action { opacity: .65; }
body[data-demo-state="no-quota"] .primary-action { cursor: not-allowed; opacity: .42; }
body[data-demo-state="error"] .composer { border-color: #d9aaa7; }
body[data-demo-state="history"] .empty-history { display: none; }

@media (max-width: 1180px) {
  .topbar { gap: 18px; }
  .wordmark { min-width: 180px; }
  .primary-nav { gap: 16px; }
  .primary-nav a:nth-child(3), .primary-nav a:nth-child(4), .primary-nav a:nth-child(6) { display: none; }
  .hero { grid-template-columns: minmax(360px, .9fr) minmax(500px, 1.1fr); gap: 42px; }
  h1 { font-size: clamp(54px, 6vw, 72px); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 52px; }
  .hero-stage { max-width: 700px; }
  .quick-layout, .capability-grid { grid-template-columns: 1fr; gap: 31px; }
  .work-grid { grid-template-columns: 1fr 1.2fr; }
  .today-action { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .topbar { min-height: 68px; padding-inline: 18px; }
  .wordmark { min-width: 0; }
  .wordmark small, .primary-nav { display: none; }
  .account-nav { margin-left: auto; }
  .hero { min-height: auto; padding: 56px 22px 58px; gap: 44px; }
  .hero::before { top: 18px; right: 22px; left: 22px; }
  h1 { margin-top: 21px; font-size: clamp(49px, 14vw, 70px); }
  h1 span { white-space: normal; }
  .hero-sub { margin-top: 21px; font-size: 16px; }
  .hero-note { margin-top: 32px; }
  .composer { padding: 22px 19px 18px; }
  .assistant-input { min-height: 133px; font-size: 17px; }
  .composer-tools { align-items: flex-end; flex-wrap: wrap; }
  .attach-wrap { flex-basis: 100%; }
  .primary-action { flex: 1; }
  .settings-row { grid-template-columns: 1fr; gap: 7px; }
  .settings-row select { width: 100%; }
  .companion { justify-content: space-between; gap: 13px; }
  .companion-copy { max-width: 210px; }
  .companion-portrait { width: 112px; height: 143px; }
  .companion-portrait img { width: 132px; height: 132px; transform: translateX(-10px); }
  .quick-section, .work-section, .capability-section, .compatibility { padding-inline: 22px; }
  .work-grid { grid-template-columns: 1fr; gap: 31px; }
  h2 { font-size: 38px; }
  .footer { padding-inline: 22px; align-items: flex-start; flex-direction: column; gap: 9px; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  .hero { padding-inline: 18px; }
  .hero::before { right: 18px; left: 18px; }
  .composer-tools { gap: 11px; }
  .cancel-action { flex: 1; }
  .quick-section, .work-section, .capability-section, .compatibility { padding-inline: 18px; }
  .demo-panel, .demo-panel.is-collapsed { width: calc(100% - 36px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .parallax { transform: none !important; }
}


/* vNext chat shell: Codex-like focus layout */
.page-shell { padding-left: 232px; }
.topbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 232px;
  height: 100dvh;
  min-height: 0;
  padding: 24px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: #f7f8f7;
}
.wordmark { min-width: 0; }
.primary-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  margin: 36px 0 auto;
}
.primary-nav a {
  padding: 10px 12px;
  border-left: 2px solid transparent;
}
.primary-nav a::after { display: none; }
.primary-nav a:hover, .primary-nav a:focus-visible {
  border-left-color: var(--cobalt);
}
.primary-nav a:focus-visible {
  background: var(--cobalt-soft);
}
.primary-nav a.is-active {
  background: var(--cobalt-soft);
}
.account-nav {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.usage-label {
  flex: 1 0 100%;
  min-width: 0;
  max-width: 100%;
  line-height: 1.6;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.mobile-menu-button { display: none; }

main { min-width: 0; }
.hero {
  max-width: none;
  min-height: calc(100dvh - 24px);
  padding: clamp(80px, 13vh, 140px) 24px 48px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hero::before { display: none; }
.hero-copy { display: none; }
.hero-stage {
  width: min(820px, 100%);
  padding-top: 0;
}
.stage-marker { display: none; }
.composer {
  padding: 30px;
  border-color: var(--line-strong);
  border-radius: 12px;
  box-shadow: none;
}
.assistant-input {
  min-height: 190px;
  font-size: 18px;
}
.input-help { margin-top: 10px; }
.composer-tools { margin-top: 17px; }
.companion {
  min-height: 80px;
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
  justify-content: flex-end;
}
.companion-copy { max-width: 260px; margin-bottom: 12px; }
.companion-portrait { width: 112px; height: 126px; }
.companion-portrait img { width: 146px; height: 146px; }

.quick-section, .work-section, .capability-section, .compatibility { display: none; }
.footer { display: none; }
.demo-panel {
  position: fixed;
  left: 256px;
  bottom: 12px;
  z-index: 28;
  width: min(500px, calc(100vw - 280px));
  margin: 0;
}
body.sidebar-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(20, 23, 28, .16);
}
@media (max-width: 720px) {
  .page-shell { padding-left: 0; }
  .topbar {
    inset: 0 0 auto;
    width: auto;
    height: 64px;
    padding: 0 16px;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .wordmark small { display: none; }
  .mobile-menu-button {
    display: grid;
    place-items: center;
    order: -1;
    width: 38px;
    height: 38px;
    margin-right: 6px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
  }
  .mobile-menu-button:hover, .mobile-menu-button:focus-visible { border-color: var(--cobalt); color: var(--cobalt); }
  .primary-nav {
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(280px, 86vw);
    height: auto;
    margin: 0;
    padding: 22px 16px 92px;
    display: flex;
    background: var(--yf-sidebar-fill, var(--paper));
    color: var(--ink);
    border-right: 1px solid var(--line);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .18s ease, visibility .18s ease;
  }
  body.sidebar-open .primary-nav { transform: translateX(0); visibility: visible; }
  .account-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 41;
    width: min(280px, 86vw);
    min-height: 76px;
    margin: 0;
    padding: 14px 16px;
    display: none;
    background: var(--yf-sidebar-fill, var(--paper));
    color: var(--ink);
    border-top: 1px solid var(--line);
  }
  body.sidebar-open .account-nav { display: flex; }
  .account-nav .usage-label { color: var(--muted); }
  .hero {
    min-height: 100dvh;
    padding: 102px 16px 32px;
    align-items: flex-start;
  }
  .hero-stage { width: 100%; }
  .composer {
    padding: 22px 18px 18px;
    border-radius: 10px;
  }
  .assistant-input { min-height: 210px; font-size: 17px; }
  .composer-tools { align-items: flex-end; flex-wrap: wrap; }
  .attach-wrap { flex-basis: 100%; }
  .primary-action { flex: 1; }
  .companion { justify-content: space-between; margin-top: 18px; }
  .companion-copy { max-width: 210px; }
  .companion-portrait { width: 100px; height: 120px; }
  .companion-portrait img { width: 130px; height: 130px; }
  .demo-panel { left: 16px; right: 16px; bottom: 10px; width: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav, .mobile-menu-button { transition: none !important; }
}


/* compact Codex-scale composer */
@media (min-width: 721px) {
  .hero { padding-top: clamp(96px, 16vh, 150px); }
  .hero-stage { width: min(660px, 100%); }
  .composer { padding: 22px 24px 16px; border-radius: 10px; }
  .assistant-input { min-height: 124px; font-size: 16px; }
  .composer-tools { min-height: 44px; margin-top: 12px; }
  .primary-action, .cancel-action { min-height: 36px; }
  .primary-action { min-width: 126px; font-size: 13px; }
  .advanced-settings { margin-top: 13px; }
  .composer-status { margin-top: 11px; }
  .companion { min-height: 60px; margin-top: 12px; }
  .companion-copy { margin-bottom: 7px; }
  .companion-portrait { width: 86px; height: 94px; }
  .companion-portrait img { width: 108px; height: 108px; }
}
@media (max-width: 720px) {
  .hero { padding-top: 90px; }
  .composer { padding: 18px 16px 14px; }
  .assistant-input { min-height: 156px; font-size: 16px; }
  .composer-tools { margin-top: 11px; }
  .advanced-settings { margin-top: 12px; }
  .companion { min-height: 70px; margin-top: 12px; }
  .companion-portrait { width: 86px; height: 100px; }
  .companion-portrait img { width: 108px; height: 108px; }
}


@media (max-width: 1180px) {
  .primary-nav a:nth-child(3),
  .primary-nav a:nth-child(4),
  .primary-nav a:nth-child(6) { display: block; }
}


/* structured composer details */
.composer-header {
  min-height: 42px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}
.composer-heading { display: flex; align-items: baseline; gap: 10px; }
.composer-kicker {
  color: var(--cobalt);
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
}
.composer-heading strong { font-size: 14px; font-weight: 600; }
.composer-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.composer-ready i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: var(--success);
}
.composer > label { color: var(--muted); font-size: 11px; }
.composer-suggestions {
  margin-top: 16px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  border-top: 1px solid var(--line);
}
.suggestion-label {
  margin-right: 3px;
  color: var(--faint);
  font-size: 10px;
}
.composer-suggestion {
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 11px;
}
.composer-suggestion:hover, .composer-suggestion:focus-visible {
  border-color: var(--cobalt);
  background: var(--cobalt-soft);
  color: var(--cobalt);
}
@media (min-width: 721px) {
  .composer { padding: 20px 24px 15px; }
  .composer-header { margin-bottom: 13px; }
  .assistant-input { min-height: 116px; }
  .composer-suggestions { margin-top: 12px; padding-top: 10px; }
}
@media (max-width: 720px) {
  .composer-header { margin-bottom: 13px; }
  .composer-heading { gap: 7px; }
  .composer-heading strong { font-size: 13px; }
  .composer-ready { font-size: 10px; }
  .composer-suggestions { align-items: flex-start; }
  .suggestion-label { flex-basis: 100%; }
}


/* compact floating prompt, closer to Codex proportions */
.hero {
  min-height: calc(100dvh - 24px);
  padding: 80px 24px 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-copy {
  display: block;
  width: min(740px, 100%);
  margin-bottom: 25px;
  text-align: center;
}
.hero-copy .eyebrow, .hero-sub, .hero-note { display: none; }
.hero-copy h1 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 2.2vw, 31px);
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -.04em;
}
.hero-copy h1 span { display: inline; white-space: normal; }
.hero-stage { width: min(740px, 100%); }
.composer {
  padding: 15px 17px 12px;
  border-radius: 18px;
  border-color: #c9d0d5;
  background: rgba(255, 254, 250, .98);
  box-shadow: 0 8px 28px rgba(20, 23, 28, .06);
}
.composer-header {
  min-height: 29px;
  margin-bottom: 6px;
  padding-bottom: 7px;
}
.composer-heading strong { font-size: 13px; }
.composer > label { font-size: 10px; }
.assistant-input {
  min-height: 70px;
  max-height: 130px;
  margin-top: 4px;
  padding: 4px 0 7px;
  border-bottom: 0;
  font-size: 16px;
  line-height: 1.45;
}
.assistant-input:focus { box-shadow: none; }
.input-help { display: none; }
.composer-tools {
  min-height: 31px;
  margin-top: 5px;
}
.attach-button { padding: 4px 0; font-size: 12px; }
.primary-action, .cancel-action { min-height: 33px; }
.primary-action { min-width: 122px; font-size: 12px; }
.advanced-settings { margin-top: 7px; }
.advanced-settings summary {
  padding-top: 7px;
  font-size: 11px;
}
.composer-status {
  min-height: 13px;
  margin-top: 5px;
  font-size: 10px;
}
.composer-suggestions {
  margin-top: 8px;
  padding-top: 7px;
  gap: 5px;
}
.suggestion-label { font-size: 9px; }
.composer-suggestion { min-height: 23px; padding: 0 8px; font-size: 10px; }
.companion {
  min-height: 54px;
  margin-top: 10px;
  justify-content: center;
  gap: 12px;
}
.companion-copy { max-width: 235px; margin-bottom: 3px; }
.companion-copy p { margin-top: 5px; font-size: 11px; }
.companion-portrait { width: 60px; height: 68px; }
.companion-portrait img { width: 78px; height: 78px; }

@media (max-width: 720px) {
  .hero {
    min-height: calc(100dvh - 64px);
    padding: 90px 16px 28px;
  }
  .hero-copy { margin-bottom: 18px; }
  .hero-copy h1 { font-size: 24px; }
  .composer {
    padding: 13px 14px 11px;
    border-radius: 16px;
  }
  .composer-header { margin-bottom: 5px; }
  .assistant-input { min-height: 94px; font-size: 15px; }
  .composer-tools { margin-top: 4px; }
  .advanced-settings { margin-top: 6px; }
  .composer-suggestions { margin-top: 7px; }
  .companion { margin-top: 10px; }
}


/* default prompt state: keep the surface as a compact input bar */
.composer-suggestions { display: none; }
.composer > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.assistant-input {
  min-height: 58px;
  max-height: 100px;
  margin-top: 0;
  padding-top: 3px;
}
.composer-status {
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}
body[data-demo-state="guest"] .composer-status,
body[data-demo-state="logged-in"] .composer-status,
body[data-demo-state="focused"] .composer-status {
  display: none;
}
body[data-demo-state="typed"] .composer-status,
body[data-demo-state="uploading"] .composer-status,
body[data-demo-state="generating"] .composer-status,
body[data-demo-state="history"] .composer-status,
body[data-demo-state="no-quota"] .composer-status,
body[data-demo-state="error"] .composer-status {
  height: auto;
  min-height: 13px;
  margin-top: 5px;
}
@media (max-width: 720px) {
  .assistant-input { min-height: 72px; max-height: 110px; }
}

.assistant-input { height: 74px; min-height: 74px; }
@media (max-width: 720px) {
  .assistant-input { height: 82px; min-height: 82px; }
}


/* use the original assistant-form rhythm: input first, one footer row */
.composer {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  border-color: #c7d0d6;
  box-shadow: 0 10px 28px rgba(20, 23, 28, .055);
}
.composer > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.assistant-input {
  width: 100%;
  height: 92px;
  min-height: 92px;
  max-height: 180px;
  margin: 0;
  padding: 16px 18px 12px;
  border: 0;
  resize: vertical;
  font-size: 16px;
  line-height: 1.55;
}
.assistant-input:focus { box-shadow: none; }
.input-help { display: none; }
.composer-tools {
  min-height: 48px;
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}
.attach-wrap { margin-right: auto; }
.attach-button { padding: 5px 0; }
.primary-action {
  min-width: 124px;
  min-height: 34px;
  border-radius: 4px;
  font-size: 12px;
}
.advanced-settings {
  margin: 0;
  padding: 0 14px;
  border-top: 1px solid var(--line);
}
.advanced-settings summary {
  padding: 8px 0;
  font-size: 11px;
}
.composer-status {
  padding: 0 14px 9px;
  font-size: 10px;
}
body[data-demo-state="guest"] .composer-status,
body[data-demo-state="logged-in"] .composer-status,
body[data-demo-state="focused"] .composer-status {
  display: none;
}
body[data-demo-state="typed"] .composer-status,
body[data-demo-state="uploading"] .composer-status,
body[data-demo-state="generating"] .composer-status,
body[data-demo-state="history"] .composer-status,
body[data-demo-state="no-quota"] .composer-status,
body[data-demo-state="error"] .composer-status {
  height: auto;
  min-height: 13px;
  margin-top: 0;
}
@media (max-width: 720px) {
  .composer { border-radius: 16px; }
  .assistant-input { height: 86px; min-height: 86px; padding: 14px 14px 10px; }
  .composer-tools { min-height: 46px; padding-inline: 12px; }
  .advanced-settings { padding-inline: 12px; }
  .composer-status { padding-inline: 12px; }
}

.inline-model-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  margin: 0 8px 0 auto;
  border: 0;
  padding: 0 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}
.inline-model-trigger:hover, .inline-model-trigger:focus-visible { color: var(--cobalt); }
.inline-model-trigger #chatModelIcon { color: var(--cobalt); font-size: 14px; }
@media (max-width: 720px) {
  .inline-model-trigger { margin-left: auto; margin-right: 4px; font-size: 10px; }
}

/* advanced controls stay in the original collapsible details, out of the default frame */
.advanced-settings {
  margin: 0;
  padding: 0;
  border: 0;
}
.advanced-settings summary { display: none; }
.advanced-settings[open] {
  margin-top: 8px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--line);
}
.advanced-settings[open] .settings-row { padding-top: 0; }
@media (max-width: 720px) {
  .advanced-settings[open] { padding-inline: 12px; }
}

.composer { overflow: visible; position: relative; }
#chatModelMenu {
  position: absolute;
  right: 142px;
  bottom: 48px;
  z-index: 12;
  min-width: 132px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 8px 22px rgba(20, 23, 28, .12);
}
#chatModelMenu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 8px 9px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 11px;
}
#chatModelMenu button:hover, #chatModelMenu button:focus-visible {
  background: var(--cobalt-soft);
  color: var(--cobalt);
}
@media (max-width: 720px) {
  #chatModelMenu {
    right: 114px;
    bottom: 46px;
  }
}

/* Peek companion action language: state changes move the same clipped face
   with small physical cues instead of swapping in another character. */
@keyframes yf-peek-listen {
  0%, 100% { transform: translateY(-4px) rotate(0deg); }
  38% { transform: translateY(-7px) rotate(-.8deg); }
  68% { transform: translateY(-5px) rotate(.45deg); }
}
@keyframes yf-peek-ready {
  0% { transform: translateY(-4px); }
  36% { transform: translateY(-9px) rotate(-.45deg); }
  72% { transform: translateY(-5px) rotate(.25deg); }
  100% { transform: translateY(-4px); }
}
@keyframes yf-peek-wait {
  0%, 100% { transform: translateY(-4px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(.7deg); }
}
@keyframes yf-peek-think {
  0%, 100% { transform: translateY(-4px) rotate(0deg); }
  35% { transform: translateY(-5px) rotate(-1deg); }
  70% { transform: translateY(-4px) rotate(1deg); }
}
@keyframes yf-peek-cheer {
  0% { transform: translateY(-4px) scale(1); }
  38% { transform: translateY(-10px) scale(1.04) rotate(-.8deg); }
  72% { transform: translateY(-6px) scale(1.015) rotate(.35deg); }
  100% { transform: translateY(-4px) scale(1); }
}
@keyframes yf-peek-comfort {
  0%, 100% { transform: translateY(-4px) rotate(0deg); }
  34% { transform: translateY(-5px) rotate(-.8deg); }
  68% { transform: translateY(-4px) rotate(.8deg); }
}
@keyframes yf-peek-poke {
  0% { transform: translateY(-4px) scale(1); }
  35% { transform: translateY(-9px) scale(1.045); }
  70% { transform: translateY(-3px) scale(.99); }
  100% { transform: translateY(-4px) scale(1); }
}
body[data-companion-visual="line"][data-demo-state="focused"] .companion-line-face svg {
  animation: yf-peek-listen 1.35s ease-in-out infinite !important;
}
body[data-companion-visual="line"][data-demo-state="typed"] .companion-line-face svg {
  animation: yf-peek-ready .9s ease-out both !important;
}
body[data-companion-visual="line"][data-demo-state="uploading"] .companion-line-face svg {
  animation: yf-peek-wait 1.35s ease-in-out infinite !important;
}
body[data-companion-visual="line"][data-demo-state="generating"] .companion-line-face svg {
  animation: yf-peek-think 1.2s ease-in-out infinite !important;
}
body[data-companion-visual="line"][data-demo-state="history"] .companion-line-face svg {
  animation: yf-peek-cheer 1.1s ease-out both !important;
}
body[data-companion-visual="line"][data-demo-state="error"] .companion-line-face svg,
body[data-companion-visual="line"][data-demo-state="no-quota"] .companion-line-face svg {
  animation: yf-peek-comfort 2.2s ease-in-out infinite !important;
}
body[data-companion-visual="line"] .companion-portrait.is-poked .companion-line-face svg {
  animation: yf-peek-poke .52s cubic-bezier(.22, .61, .36, 1) both !important;
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .companion-line-face svg,
  body[data-companion-visual="line"] .companion-portrait.is-poked .companion-line-face svg {
    animation: none !important;
    transform: translateY(-4px) !important;
  }
}

/* original native mode select: one small control, no custom opening state */
.mode-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}
.mode-select-wrap label {
  color: var(--muted);
  font-size: 10px;
}
.mode-select-wrap select {
  width: 142px;
  height: 32px;
  border: 1px solid #25292d;
  border-radius: 3px;
  padding: 0 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
}
.mode-select-wrap select:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .mode-select-wrap { gap: 5px; }
  .mode-select-wrap label { font-size: 9px; }
  .mode-select-wrap select { width: 108px; height: 30px; font-size: 11px; }
  .primary-action { flex: 0 0 112px; min-width: 112px; }
}

/* typography polish: keep the existing shell, use a lighter Apple/Codex rhythm */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Noto Sans CJK SC", "Helvetica Neue", system-ui, sans-serif;
}
body {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.55;
  font-kerning: normal;
}
.wordmark strong {
  font-weight: 600;
  letter-spacing: .06em;
}
.wordmark small {
  font-weight: 400;
  letter-spacing: .045em;
}
.primary-nav {
  font-size: 12.5px;
  font-weight: 450;
  letter-spacing: .005em;
}
.hero-copy h1 {
  font-size: clamp(24px, 2.05vw, 29px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.026em;
}
.composer-heading strong {
  font-weight: 550;
  letter-spacing: -.012em;
}
.assistant-input {
  font-weight: 400;
  letter-spacing: -.006em;
}
.attach-button,
.mode-select-wrap label,
.mode-select-wrap select,
.primary-action,
.cancel-action {
  font-weight: 450;
  letter-spacing: -.004em;
}
.mode-select-wrap select { font-size: 12px; }
@media (max-width: 720px) {
  .hero-copy h1 {
    font-size: 23px;
    letter-spacing: -.022em;
  }
  .assistant-input { letter-spacing: -.004em; }
}

/* 小帆状态动效：只做轻微呼吸、倾听和等待反馈，不增加复杂动画 */
@keyframes xiaofan-idle {
  0%, 100% { transform: translate3d(-10px, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-10px, -3px, 0) rotate(-.45deg); }
}
@keyframes xiaofan-listen {
  0% { transform: translate3d(-10px, 2px, 0) rotate(0deg); }
  45% { transform: translate3d(-7px, -1px, 0) rotate(1.2deg); }
  100% { transform: translate3d(-10px, 0, 0) rotate(0deg); }
}
@keyframes xiaofan-ready {
  0%, 100% { transform: translate3d(-10px, 0, 0) rotate(0deg); }
  35% { transform: translate3d(-8px, -4px, 0) rotate(.7deg); }
  70% { transform: translate3d(-11px, -1px, 0) rotate(-.55deg); }
}
@keyframes xiaofan-wait {
  0%, 100% { transform: translate3d(-10px, 0, 0) rotate(0deg); opacity: .9; }
  50% { transform: translate3d(-10px, -2px, 0) rotate(1deg); opacity: 1; }
}
@keyframes xiaofan-think {
  0%, 100% { transform: translate3d(-10px, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-6px, -2px, 0) rotate(1.4deg); }
}
@keyframes xiaofan-cheer {
  0%, 100% { transform: translate3d(-10px, 0, 0) rotate(0deg); }
  22% { transform: translate3d(-10px, -5px, 0) rotate(-1deg); }
  44% { transform: translate3d(-10px, 0, 0) rotate(0deg); }
  66% { transform: translate3d(-10px, -3px, 0) rotate(1deg); }
}
@keyframes companion-copy-in {
  from { opacity: .55; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.companion-portrait img {
  animation: xiaofan-idle 5.4s ease-in-out infinite;
  transform-origin: 50% 100%;
  will-change: transform;
}
.companion-copy { animation: companion-copy-in .34s ease both; }
body[data-demo-state="focused"] .companion-portrait img { animation: xiaofan-listen 1.8s ease-in-out both; }
body[data-demo-state="typed"] .companion-portrait img { animation: xiaofan-ready 1.7s ease-in-out both; }
body[data-demo-state="uploading"] .companion-portrait img { animation: xiaofan-wait 1.15s ease-in-out infinite; }
body[data-demo-state="generating"] .companion-portrait img { animation: xiaofan-think 1.35s ease-in-out infinite; }
body[data-demo-state="history"] .companion-portrait img { animation: xiaofan-cheer 1.9s ease-in-out both; }
body[data-demo-state="no-quota"] .companion-portrait img,
body[data-demo-state="error"] .companion-portrait img { animation: xiaofan-wait 3.6s ease-in-out infinite; }
body[data-demo-state="focused"] .companion-copy,
body[data-demo-state="typed"] .companion-copy,
body[data-demo-state="uploading"] .companion-copy,
body[data-demo-state="generating"] .companion-copy,
body[data-demo-state="history"] .companion-copy,
body[data-demo-state="no-quota"] .companion-copy,
body[data-demo-state="error"] .companion-copy { animation: companion-copy-in .34s ease both; }
@media (prefers-reduced-motion: reduce) {
  .companion-portrait img,
  .companion-copy { animation: none !important; }
}

/* 四表情 sprite：把已有演示状态映射成欢迎、倾听、鼓励和专注 */
.companion-portrait { position: relative; }
.companion-face {
  position: absolute;
  top: -8px;
  right: -7px;
  z-index: 2;
  width: 36px;
  height: 36px;
  background-image: url("vnext-assets/xiaofan-expressions.png");
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: 0 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.companion-face[data-state="focused"],
.companion-face[data-state="uploading"] { background-position: 100% 0; }
.companion-face[data-state="typed"],
.companion-face[data-state="history"] { background-position: 0 100%; }
.companion-face[data-state="generating"] { background-position: 100% 100%; }
.companion-face[data-state="error"] {
  background-position: 0 0;
  filter: saturate(.62) brightness(.98);
}
.companion-face[data-state="no-quota"] {
  background-position: 100% 0;
  filter: saturate(.58) brightness(.98);
}
@keyframes face-enter {
  from { opacity: .25; transform: scale(.88) translateY(3px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes face-listen {
  0% { transform: scale(.92) rotate(-2deg); }
  55% { transform: scale(1.04) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes face-wait {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04) translateY(-1px); }
}
@keyframes face-think {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.05) rotate(2deg); }
}
@keyframes face-cheer {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.08) translateY(-2px); }
  70% { transform: scale(.98) translateY(0); }
}
.companion-face[data-state="guest"],
.companion-face[data-state="logged-in"] { animation: face-enter .34s ease both; }
.companion-face[data-state="focused"],
.companion-face[data-state="typed"] { animation: face-listen .5s ease both; }
.companion-face[data-state="uploading"] { animation: face-wait 1.15s ease-in-out infinite; }
.companion-face[data-state="generating"] { animation: face-think 1.2s ease-in-out infinite; }
.companion-face[data-state="history"] { animation: face-cheer .8s ease both; }
.companion-face[data-state="error"],
.companion-face[data-state="no-quota"] { animation: face-enter .34s ease both; }
@media (min-width: 721px) {
  /* A slightly taller viewport keeps the hair and boat inside the renderer. */
  .companion-portrait { width: 78px; height: 120px; }
  .companion-portrait img { width: 92px; height: 92px; }
  .companion-face { width: 38px; height: 38px; top: -9px; right: -8px; }
}
@media (max-width: 720px) {
  .companion-portrait { width: 72px; height: 112px; }
  .companion-portrait img { width: 78px; height: 78px; }
  .companion-face { width: 31px; height: 31px; top: -6px; right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .companion-face { animation: none !important; }
}

/* 使用透明裁切图，避免四格原稿的白底在小尺寸下形成方块 */
.companion-face {
  background-image: url("vnext-assets/xiaofan-face-welcome.png");
  background-size: contain;
  background-position: center;
}
.companion-face[data-state="focused"],
.companion-face[data-state="uploading"] {
  background-image: url("vnext-assets/xiaofan-face-listen.png");
  background-position: center;
}
.companion-face[data-state="typed"],
.companion-face[data-state="history"] {
  background-image: url("vnext-assets/xiaofan-face-happy.png");
  background-position: center;
}
.companion-face[data-state="generating"] {
  background-image: url("vnext-assets/xiaofan-face-focus.png");
  background-position: center;
}
.companion-face[data-state="error"] {
  background-image: url("vnext-assets/xiaofan-face-welcome.png");
  background-position: center;
}
.companion-face[data-state="no-quota"] {
  background-image: url("vnext-assets/xiaofan-face-listen.png");
  background-position: center;
}

/* 表情作为小帆名字旁的状态徽记，避免与全身图重叠 */
.companion-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.companion-face {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-block;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  border: 1px solid #c9d0d5;
  border-radius: 50%;
  background-color: var(--paper);
  mix-blend-mode: normal;
  vertical-align: middle;
}
@media (max-width: 720px) {
  .companion-face {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }
}
body[data-demo-state="generating"] .companion-portrait.is-complete img { animation: xiaofan-cheer 1.9s ease both; }

/* 2.5D 角色样片：前/左/右/背四个全身姿态交叉切换 */
.companion-portrait { isolation: isolate; }
.companion-portrait .companion-pose {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: normal;
  transform-origin: 50% 100%;
  transition: opacity .32s ease;
  animation: none;
  will-change: opacity, transform;
}
.companion-portrait .companion-pose-front { opacity: 1; }
body[data-demo-state="focused"] .companion-portrait .companion-pose-front,
body[data-demo-state="uploading"] .companion-portrait .companion-pose-front,
body[data-demo-state="error"] .companion-portrait .companion-pose-front { opacity: 0; }
body[data-demo-state="focused"] .companion-portrait .companion-pose-left,
body[data-demo-state="uploading"] .companion-portrait .companion-pose-left,
body[data-demo-state="error"] .companion-portrait .companion-pose-left { opacity: 1; }
body[data-demo-state="generating"] .companion-portrait .companion-pose-front,
body[data-demo-state="no-quota"] .companion-portrait .companion-pose-front { opacity: 0; }
body[data-demo-state="generating"] .companion-portrait .companion-pose-right,
body[data-demo-state="no-quota"] .companion-portrait .companion-pose-back { opacity: 1; }
body[data-demo-state="typed"] .companion-portrait .companion-pose-front,
body[data-demo-state="history"] .companion-portrait .companion-pose-front { opacity: 1; }

@keyframes pose-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -2px, 0) rotate(-.35deg); }
}
@keyframes pose-listen {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  45% { transform: translate3d(-1px, -2px, 0) rotate(1deg); }
}
@keyframes pose-wait {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  50% { transform: translate3d(0, -1px, 0) rotate(.7deg); opacity: .92; }
}
@keyframes pose-think {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(1px, -2px, 0) rotate(1.2deg); }
}
@keyframes pose-ready {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35% { transform: translate3d(0, -3px, 0) rotate(.55deg); }
  70% { transform: translate3d(-1px, -1px, 0) rotate(-.45deg); }
}
@keyframes pose-cheer {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30% { transform: translate3d(0, -4px, 0) rotate(-.7deg); }
  60% { transform: translate3d(0, -1px, 0) rotate(.6deg); }
}
body[data-demo-state="guest"] .companion-portrait .companion-pose-front,
body[data-demo-state="logged-in"] .companion-portrait .companion-pose-front { animation: pose-idle 5.2s ease-in-out infinite; }
body[data-demo-state="focused"] .companion-portrait .companion-pose-left { animation: pose-listen 1.8s ease-in-out infinite; }
body[data-demo-state="uploading"] .companion-portrait .companion-pose-left { animation: pose-wait 1.15s ease-in-out infinite; }
body[data-demo-state="generating"] .companion-portrait .companion-pose-right { animation: pose-think 1.35s ease-in-out infinite; }
body[data-demo-state="typed"] .companion-portrait .companion-pose-front { animation: pose-ready 1.7s ease-in-out both; }
body[data-demo-state="history"] .companion-portrait .companion-pose-front { animation: pose-cheer 1.9s ease-in-out both; }
body[data-demo-state="error"] .companion-portrait .companion-pose-left { animation: pose-wait 3.6s ease-in-out infinite; }
body[data-demo-state="no-quota"] .companion-portrait .companion-pose-back { animation: pose-wait 3.6s ease-in-out infinite; }
body[data-demo-state="generating"] .companion-portrait.is-complete .companion-pose-front { opacity: 1; animation: pose-cheer 1.9s ease both; }
body[data-demo-state="generating"] .companion-portrait.is-complete .companion-pose-right { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .companion-portrait .companion-pose {
    animation: none !important;
    transition: none !important;
  }
}


/* Live2D-ready mount: a local Cubism model is preferred; the offline canvas remains the fallback. */
.companion-live2d,
.companion-live2d-model,
.companion-hand-motion {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.companion-hand-motion { z-index: 3; }
body[data-live2d-status="ready"] .companion-live2d { display: block; }
body[data-live2d-status="ready"] .companion-canvas-fallback { display: none; }
body[data-live2d-status="ready"] .companion-live2d-model { display: block; }
body[data-live2d-status="ready"] .companion-hand-motion { display: none; }
body[data-live2d-status="ready"] .companion-portrait .companion-pose { opacity: 0 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-live2d-status="ready"] .companion-live2d { animation: none !important; }
}

/* The local canvas rig remains available when the real local model cannot mount. */
body[data-live2d-status="canvas-fallback"] .companion-canvas-fallback { display: block; }
body[data-live2d-status="canvas-fallback"] .companion-live2d-model { display: none; }
body[data-live2d-status="canvas-fallback"] .companion-hand-motion { display: block; }
body[data-live2d-status="canvas-fallback"] .companion-portrait .companion-pose {
  opacity: 0 !important;
  animation: none !important;
}
body[data-live2d-status="canvas-fallback"] .companion-canvas-fallback {
  mix-blend-mode: multiply;
}

/* Layered Xiaofan study: one shared root keeps head, neck and body connected;
   the arm pieces are driven by the local spring rig instead of CSS floating. */
.companion-phys-rig {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}
body[data-live2d-status="ready"] .companion-phys-rig {
  display: none !important;
}
body[data-live2d-status="canvas-fallback"][data-physrig-status="ready"] .companion-phys-rig {
  display: block;
}
body[data-live2d-status="ready"] .companion-hand-motion,
body[data-live2d-status="ready"] .companion-portrait .companion-pose {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .companion-phys-rig { animation: none !important; }
}

/* The candidate keeps the old companion copy in the DOM for state/API
   compatibility, but the visual review surface is now Xiaofan himself. */
.companion {
  min-height: 0 !important;
  margin-top: 12px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}
.companion-copy { display: none !important; }
.companion-portrait {
  position: relative;
  z-index: 4;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.companion-portrait.is-dragging { cursor: grabbing; }
.companion-portrait:focus-visible {
  outline: 1px solid var(--cobalt);
  outline-offset: 4px;
}

/* Simple companion mode: a small line face carries the state response while
   the full Xiaofan/Live2D artwork stays in the DOM as a reversible seam. */
body[data-companion-visual="line"] .companion-portrait {
  width: 64px;
  height: 64px;
  overflow: visible;
}
body[data-companion-visual="line"] .companion-portrait .companion-pose,
body[data-companion-visual="line"] .companion-portrait .companion-live2d,
body[data-companion-visual="line"] .companion-portrait .companion-live2d-model,
body[data-companion-visual="line"] .companion-portrait .companion-hand-motion,
body[data-companion-visual="line"] .companion-portrait .companion-phys-rig,
body[data-companion-visual="line"] .companion-avatar {
  display: none !important;
}
.companion-line-face {
  display: none;
  position: absolute;
  inset: 0;
  color: var(--ink);
  transform-origin: 50% 70%;
}
body[data-companion-visual="line"] .companion-line-face { display: block; }
.companion-line-face svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.line-face-shell {
  fill: var(--paper);
  stroke: #7a8792;
  stroke-width: 1.5;
}
.line-face-brow,
.line-face-mouth {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-face-eye { fill: currentColor; stroke: none; }
.line-face-cheek { fill: #c9d6df; stroke: none; opacity: .8; }
.line-face-mouth-think,
.line-face-mouth-sad { display: none; }
@keyframes line-face-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.025); }
}
@keyframes line-face-think {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  45% { transform: rotate(2deg) translateY(-1px); }
  70% { transform: rotate(-1deg) translateY(0); }
}
body[data-companion-visual="line"] .companion-line-face {
  animation: line-face-breathe 4.2s ease-in-out infinite;
}
body[data-companion-visual="line"][data-demo-state="focused"] .companion-line-face,
body[data-companion-visual="line"][data-demo-state="typed"] .companion-line-face {
  animation: line-face-breathe 1.8s ease-in-out infinite;
}
body[data-companion-visual="line"][data-demo-state="generating"] .companion-line-face {
  animation: line-face-think 1.2s ease-in-out infinite;
}
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-mouth-smile,
body[data-companion-visual="line"][data-demo-state="error"] .line-face-mouth-smile,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-mouth-smile { display: none; }
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-mouth-think { display: block; }
body[data-companion-visual="line"][data-demo-state="error"] .line-face-mouth-sad,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-mouth-sad { display: block; }
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-brow-left { transform: rotate(-8deg); transform-origin: 29px 27px; }
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-brow-right { transform: rotate(8deg); transform-origin: 51px 27px; }
body[data-companion-visual="line"][data-demo-state="history"] .line-face-shell,
body[data-companion-visual="line"][data-demo-state="typed"] .line-face-shell { stroke: var(--cobalt); }
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion-portrait { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .companion-line-face { animation: none !important; }
}

/* Final line-face pass: remove the mascot-like container and keep only a few
   precise strokes, closer to a quiet product glyph than an emoji. */
body[data-companion-visual="line"] .companion-line-face {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: none;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 64px;
  height: 52px;
  animation: line-face-breathe 4.2s ease-in-out infinite;
}
.line-face-shell {
  display: block;
  fill: none;
  stroke: #aab5bd;
  stroke-width: 1.25;
}
.line-face-cheek,
.line-face-brow { display: none; }
.line-face-eye {
  fill: var(--cobalt);
  opacity: .95;
}
.line-face-mouth {
  stroke: #34404a;
  stroke-width: 1.7;
}
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-brow,
body[data-companion-visual="line"][data-demo-state="error"] .line-face-brow,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-brow { display: block; }
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .companion-line-face svg { animation: none !important; }
}

/* Idle expression pass: keep the mouth event-driven and give the eyes a few
   quiet, readable beats instead of a continuous float. */
@property --idle-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --idle-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes line-face-idle-glance {
  0%, 12%, 100% { --idle-x: 0px; --idle-y: 0px; }
  18% { --idle-x: -1.8px; --idle-y: -0.5px; }
  25% { --idle-x: -1.8px; --idle-y: -0.5px; }
  32% { --idle-x: 0px; --idle-y: 0px; }
  44% { --idle-x: 1.8px; --idle-y: 0.4px; }
  52% { --idle-x: 1.8px; --idle-y: 0.4px; }
  60% { --idle-x: 0px; --idle-y: 0px; }
  73% { --idle-x: 0px; --idle-y: 1.3px; }
  81% { --idle-x: 0px; --idle-y: 1.3px; }
  88% { --idle-x: 0px; --idle-y: 0px; }
}
@keyframes line-face-blink-soft {
  0%, 48%, 52%, 100% { --blink-scale: 1; }
  50% { --blink-scale: .08; }
  76%, 80% { --blink-scale: 1; }
  78% { --blink-scale: .16; }
}
body[data-companion-visual="line"] .line-face-eye {
  --blink-scale: 1;
  --idle-x: 0px;
  --idle-y: 0px;
  transform: translate(calc(var(--gaze-x, 0px) + var(--idle-x)), calc(var(--gaze-y, 0px) + var(--idle-y))) scaleY(var(--blink-scale));
  transform-box: fill-box;
  transform-origin: center;
  animation: line-face-blink-soft 7.2s ease-in-out infinite, line-face-idle-glance 12s ease-in-out infinite;
}
body[data-companion-visual="line"] .line-face-eye-right {
  animation-delay: .1s, .22s;
}
body[data-companion-visual="line"] .companion-portrait:hover .line-face-mouth-smile {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .line-face-eye { animation: none !important; }
}

/* The companion now peeks over the composer like a small resident of the
   workspace instead of sitting in a separate illustration row. */
body[data-companion-visual="line"] .companion {
  position: absolute;
  top: -70px;
  right: 24px;
  width: 86px;
  height: 70px;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
}
body[data-companion-visual="line"] .companion-copy { display: none; }
body[data-companion-visual="line"] .companion-portrait {
  width: 86px;
  height: 70px;
  overflow: visible;
  pointer-events: auto;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 82px;
  height: 58px;
}
.line-face-eye {
  --blink-scale: 1;
  transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)) scaleY(var(--blink-scale));
  transform-box: fill-box;
  transform-origin: center;
}
.line-face-ear,
.line-face-ear-inner {
  fill: var(--paper);
  stroke: #aab5bd;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-face-ear-inner { fill: none; stroke-width: 1; }
@keyframes line-face-blink {
  0%, 43%, 47%, 100% { --blink-scale: 1; }
  45% { --blink-scale: .08; }
}
body[data-companion-visual="line"] .line-face-eye {
  animation: line-face-blink 6.8s ease-in-out infinite;
}
body[data-companion-visual="line"] .line-face-eye-right { animation-delay: .12s; }
@keyframes line-face-ear-twitch {
  0%, 88%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(7deg); }
}
body[data-companion-visual="line"] .line-face-ear,
body[data-companion-visual="line"] .line-face-ear-inner {
  transform-box: fill-box;
  transform-origin: 100% 70%;
  animation: line-face-ear-twitch 7.2s ease-in-out infinite;
}
body[data-companion-visual="line"] .companion-portrait:hover .companion-line-face svg,
body[data-companion-visual="line"] .companion-portrait.is-poked .companion-line-face svg {
  transform: translateY(-3px) rotate(-3deg);
}
body[data-companion-visual="line"] .companion-portrait:hover .line-face-ear,
body[data-companion-visual="line"] .companion-portrait.is-poked .line-face-ear {
  transform: rotate(12deg);
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -60px;
    right: 10px;
    width: 72px;
    height: 60px;
  }
  body[data-companion-visual="line"] .companion-portrait { width: 72px; height: 60px; }
  body[data-companion-visual="line"] .companion-line-face svg { width: 70px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .line-face-eye,
  body[data-companion-visual="line"] .line-face-ear,
  body[data-companion-visual="line"] .line-face-ear-inner { animation: none !important; }
  body[data-companion-visual="line"] .companion-portrait:hover .companion-line-face svg { transform: none; }
}

/* Integrated companion pass: the face is a small state mark attached to the
   composer edge, rather than a separate floating card. */
body[data-companion-visual="line"] .companion {
  top: -25px;
  left: 22px;
  right: auto;
  width: 64px;
  height: 48px;
  z-index: 4;
}
body[data-companion-visual="line"] .companion-portrait {
  position: relative;
  width: 64px;
  height: 48px;
  overflow: visible;
}
body[data-companion-visual="line"] .companion-portrait::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 31px;
  bottom: -2px;
  width: 1px;
  height: 10px;
  background: var(--line-strong);
  opacity: .8;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 62px;
  height: 44px;
}
body[data-companion-visual="line"] .line-face-shell {
  fill: var(--paper);
  stroke: var(--line-strong);
  stroke-width: 1.05;
}
body[data-companion-visual="line"] .line-face-ear,
body[data-companion-visual="line"] .line-face-ear-inner {
  stroke: var(--line-strong);
}
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-shell,
body[data-companion-visual="line"][data-demo-state="error"] .line-face-shell {
  stroke: var(--cobalt);
}

/* Glyph pass: the companion is only a few quiet strokes. Keep the historic
   shell/ear nodes out of the visual language; they remain absent from the
   candidate SVG so the line face reads as one simple interactive mark. */
body[data-companion-visual="line"] .companion {
  left: 50%;
  right: auto;
  top: -32px;
  width: 92px;
  height: 50px;
  transform: translateX(-50%);
}
body[data-companion-visual="line"] .companion-portrait {
  width: 92px;
  height: 50px;
  cursor: default;
  touch-action: auto;
}
body[data-companion-visual="line"] .companion-portrait::after { display: none; }
body[data-companion-visual="line"] .companion-line-face {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: none;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 86px;
  height: 48px;
  animation: line-face-breathe 4.6s ease-in-out infinite;
}
body[data-companion-visual="line"] .line-face-shell,
body[data-companion-visual="line"] .line-face-ear,
body[data-companion-visual="line"] .line-face-ear-inner {
  display: none !important;
}
body[data-companion-visual="line"] .line-face-cheek { display: none !important; }
body[data-companion-visual="line"] .line-face-brow {
  display: none;
  stroke: #6f7d88;
  stroke-width: 1.55;
}
body[data-companion-visual="line"] .line-face-eye {
  fill: var(--cobalt);
  stroke: none;
}
body[data-companion-visual="line"] .line-face-mouth {
  display: none;
  stroke: #34404a;
  stroke-width: 1.65;
}
body[data-companion-visual="line"][data-demo-state="focused"] .line-face-mouth-smile,
body[data-companion-visual="line"][data-demo-state="typed"] .line-face-mouth-smile,
body[data-companion-visual="line"][data-demo-state="history"] .line-face-mouth-smile,
body[data-companion-visual="line"] .companion-portrait:hover .line-face-mouth-smile,
body[data-companion-visual="line"] .companion-portrait.is-poked .line-face-mouth-smile { display: block; }
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-mouth-think { display: block; }
body[data-companion-visual="line"][data-demo-state="error"] .line-face-mouth-sad,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-mouth-sad { display: block; }
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-brow,
body[data-companion-visual="line"][data-demo-state="error"] .line-face-brow,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-brow { display: block; }
body[data-companion-visual="line"] .companion-portrait:hover .companion-line-face svg,
body[data-companion-visual="line"] .companion-portrait.is-poked .companion-line-face svg {
  transform: none;
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -28px;
    width: 82px;
    height: 44px;
  }
  body[data-companion-visual="line"] .companion-portrait { width: 82px; height: 44px; }
  body[data-companion-visual="line"] .companion-line-face svg { width: 78px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .companion-line-face svg { animation: none !important; }
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -22px;
    left: 16px;
    width: 56px;
    height: 42px;
  }
  body[data-companion-visual="line"] .companion-portrait { width: 56px; height: 42px; }
  body[data-companion-visual="line"] .companion-portrait::after { left: 27px; height: 8px; }
  body[data-companion-visual="line"] .companion-line-face svg { width: 54px; height: 39px; }
}

/* The line companion is anchored to the composer; it responds to a click
   and gaze only, never to drag gestures or scroll parallax. */
body[data-companion-visual="line"] .companion-portrait {
  cursor: default;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-drag: none;
}
body[data-companion-visual="line"] .companion-portrait * {
  user-select: none;
  -webkit-user-drag: none;
}

/* Final integrated form: the open contour is the character silhouette, while
   the composer remains the only surface/container on the page. */
body[data-companion-visual="line"] .companion {
  top: -25px;
  left: 22px;
  right: auto;
  width: 64px;
  height: 48px;
  z-index: 4;
}
body[data-companion-visual="line"] .companion-portrait {
  position: relative;
  width: 64px;
  height: 48px;
  overflow: visible;
}
body[data-companion-visual="line"] .companion-portrait::after {
  content: "";
  position: absolute;
  left: 31px;
  bottom: -2px;
  z-index: 0;
  width: 1px;
  height: 10px;
  background: var(--line-strong);
  opacity: .8;
}
body[data-companion-visual="line"] .companion-line-face { position: relative; z-index: 1; }
body[data-companion-visual="line"] .companion-line-face svg {
  width: 62px;
  height: 44px;
}
body[data-companion-visual="line"] .line-face-shell { fill: var(--paper); stroke: none; }
body[data-companion-visual="line"] .line-face-shell-edge {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-companion-visual="line"] .line-face-ear,
body[data-companion-visual="line"] .line-face-ear-inner { stroke: var(--line-strong); }
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-shell-edge,
body[data-companion-visual="line"][data-demo-state="error"] .line-face-shell-edge { stroke: var(--cobalt); }
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -22px;
    left: 16px;
    width: 56px;
    height: 42px;
  }
  body[data-companion-visual="line"] .companion-portrait { width: 56px; height: 42px; }
  body[data-companion-visual="line"] .companion-portrait::after { left: 27px; height: 8px; }
  body[data-companion-visual="line"] .companion-line-face svg { width: 54px; height: 39px; }
}

/* 2026-10-02 cute integrated companion: a larger little face resting on the
   composer edge. It is a visual state marker, never a draggable widget. */
body[data-companion-visual="line"] .companion {
  top: -54px;
  left: 50%;
  right: auto;
  width: 112px;
  height: 76px;
  transform: translateX(-50%);
  pointer-events: none;
}
body[data-companion-visual="line"] .companion-portrait {
  width: 112px;
  height: 76px;
  cursor: default;
  touch-action: auto;
  pointer-events: auto;
}
body[data-companion-visual="line"] .companion-portrait:focus-visible {
  outline: 0;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 108px;
  height: 70px;
}
body[data-companion-visual="line"] .line-face-eye {
  rx: 5.2px;
  ry: 8.2px;
}
body[data-companion-visual="line"] .line-face-mouth {
  opacity: 0;
  transition: opacity .18s ease;
}
body[data-companion-visual="line"] .line-face-mouth-smile { display: none; }
body[data-companion-visual="line"] .line-face-mouth-think,
body[data-companion-visual="line"] .line-face-mouth-sad { display: none; }
body[data-companion-visual="line"][data-demo-state="focused"] .line-face-mouth-smile,
body[data-companion-visual="line"][data-demo-state="typed"] .line-face-mouth-smile,
body[data-companion-visual="line"][data-demo-state="history"] .line-face-mouth-smile,
body[data-companion-visual="line"] .companion-portrait:hover .line-face-mouth-smile,
body[data-companion-visual="line"] .companion-portrait.is-poked .line-face-mouth-smile {
  display: block;
  opacity: 1;
}
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-mouth-think,
body[data-companion-visual="line"][data-demo-state="error"] .line-face-mouth-sad,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-mouth-sad {
  display: block;
  opacity: 1;
}
body[data-companion-visual="line"] .companion-portrait::after {
  left: 55px;
  bottom: -1px;
  height: 12px;
}
body[data-companion-visual="line"] .line-face-shell {
  fill: var(--paper);
  stroke: var(--line-strong);
  stroke-width: 1.05;
}
body[data-companion-visual="line"] .line-face-shell-edge { display: none; }
body[data-companion-visual="line"] .line-face-ear-left { transform-origin: 100% 70%; }
body[data-companion-visual="line"] .line-face-ear-inner-left { transform-origin: 100% 70%; }
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -48px;
    left: 50%;
    right: auto;
    width: 96px;
    height: 66px;
    transform: translateX(-50%);
  }
  body[data-companion-visual="line"] .companion-portrait {
    width: 96px;
    height: 66px;
  }
  body[data-companion-visual="line"] .companion-line-face svg {
    width: 92px;
    height: 60px;
  }
  body[data-companion-visual="line"] .companion-portrait::after {
    left: 47px;
    height: 10px;
  }
}

/* Sketch clean-up pass: normalize the hand-drawn cat reference into one
   continuous, mirrored contour while keeping the expressive eyes separate. */
body[data-companion-visual="line"] .line-face-cat-outline {
  fill: none !important;
  stroke: #263b5d !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body[data-companion-visual="line"] .line-face-cat-inner-ear {
  display: none !important;
}
body[data-companion-visual="line"] .line-face-cat-whisker,
body[data-companion-visual="line"] .line-face-cat-nose {
  fill: none !important;
  stroke: #263b5d !important;
  stroke-width: 1.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body[data-companion-visual="line"] .line-face-cat-whisker {
  opacity: .88;
}
body[data-companion-visual="line"] .line-face-eye {
  fill: #263b5d !important;
}

/* Peek mode: the cat sits behind the composer so only the upper half of its
   face and two tiny ear tips remain visible above the border. */
body[data-companion-visual="line"] .companion {
  top: -44px !important;
  width: 108px !important;
  height: 44px !important;
}
body[data-companion-visual="line"] .companion-portrait {
  width: 108px !important;
  height: 44px !important;
  overflow: hidden !important;
  align-self: flex-end;
}
body[data-companion-visual="line"] .companion-line-face {
  align-items: flex-start !important;
  height: 68px !important;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 108px !important;
  height: 68px !important;
  transform: translateY(-4px);
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -39px !important;
    width: 98px !important;
    height: 39px !important;
  }
  body[data-companion-visual="line"] .companion-portrait {
    width: 98px !important;
    height: 39px !important;
  }
  body[data-companion-visual="line"] .companion-line-face {
    height: 62px !important;
  }
  body[data-companion-visual="line"] .companion-line-face svg {
    width: 98px !important;
    height: 62px !important;
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .companion-line-face svg { transform: translateY(-4px) !important; }
}

/* The face blinks as one expression: both eyes close and open together. */
body[data-companion-visual="line"] .line-face-eye-right {
  animation-delay: 0s, 0s !important;
}

/* Slight scale-up for the peek companion, keeping the same clipped pose. */
body[data-companion-visual="line"] .companion {
  top: -48px !important;
  width: 118px !important;
  height: 48px !important;
}
body[data-companion-visual="line"] .companion-portrait {
  width: 118px !important;
  height: 48px !important;
}
body[data-companion-visual="line"] .companion-line-face {
  height: 74px !important;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 118px !important;
  height: 74px !important;
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -43px !important;
    width: 108px !important;
    height: 43px !important;
  }
  body[data-companion-visual="line"] .companion-portrait {
    width: 108px !important;
    height: 43px !important;
  }
  body[data-companion-visual="line"] .companion-line-face {
    height: 68px !important;
  }
  body[data-companion-visual="line"] .companion-line-face svg {
    width: 108px !important;
    height: 68px !important;
  }
}

/* Rounded upper-body silhouette: the cat is a quiet shape marker, not a
   typing animation. Its open lower edge meets the composer border. */
body[data-companion-visual="line"] .companion {
  top: -68px;
  width: 108px;
  height: 76px;
}
body[data-companion-visual="line"] .companion-portrait {
  width: 104px;
  height: 76px;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 104px;
  height: 74px;
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -59px;
    width: 98px;
    height: 68px;
  }
  body[data-companion-visual="line"] .companion-portrait {
    width: 94px;
    height: 68px;
  }
  body[data-companion-visual="line"] .companion-line-face svg {
    width: 94px;
    height: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .line-face-mouth { transition: none; }
}

/* 2026-10-02 minimal line expression: no shell, no ears, no widget frame. */
body[data-companion-visual="line"] .companion {
  top: -32px;
  left: 50%;
  right: auto;
  width: 92px;
  height: 50px;
  transform: translateX(-50%);
  pointer-events: none;
}
body[data-companion-visual="line"] .companion-portrait {
  width: 92px;
  height: 50px;
  cursor: default;
  touch-action: auto;
  pointer-events: auto;
}
body[data-companion-visual="line"] .companion-portrait::after { display: none !important; }
body[data-companion-visual="line"] .companion-line-face { display: flex; align-items: center; justify-content: center; }
body[data-companion-visual="line"] .companion-line-face svg {
  width: 86px;
  height: 48px;
  animation: line-face-breathe 4.6s ease-in-out infinite;
}
body[data-companion-visual="line"] .line-face-shell,
body[data-companion-visual="line"] .line-face-ear,
body[data-companion-visual="line"] .line-face-ear-inner,
body[data-companion-visual="line"] .line-face-shell-edge,
body[data-companion-visual="line"] .line-face-cheek { display: none !important; }
body[data-companion-visual="line"] .line-face-brow { display: none; }
body[data-companion-visual="line"] .line-face-eye {
  fill: var(--cobalt);
  stroke: none;
  rx: 5.5px;
  ry: 9.6px;
}
body[data-companion-visual="line"] .line-face-mouth { display: none; opacity: 1; }
body[data-companion-visual="line"][data-demo-state="focused"] .line-face-mouth-smile,
body[data-companion-visual="line"][data-demo-state="typed"] .line-face-mouth-smile,
body[data-companion-visual="line"][data-demo-state="history"] .line-face-mouth-smile,
body[data-companion-visual="line"] .companion-portrait:hover .line-face-mouth-smile,
body[data-companion-visual="line"] .companion-portrait.is-poked .line-face-mouth-smile { display: block; }
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-mouth-think { display: block; }
body[data-companion-visual="line"][data-demo-state="error"] .line-face-mouth-sad,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-mouth-sad { display: block; }
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-brow,
body[data-companion-visual="line"][data-demo-state="error"] .line-face-brow,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-brow { display: block; }
body[data-companion-visual="line"] .companion-portrait:hover .companion-line-face svg,
body[data-companion-visual="line"] .companion-portrait.is-poked .companion-line-face svg { transform: none; }
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion { top: -28px; width: 82px; height: 44px; }
  body[data-companion-visual="line"] .companion-portrait { width: 82px; height: 44px; }
  body[data-companion-visual="line"] .companion-line-face svg { width: 78px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .companion-line-face svg { animation: none !important; }
}

/* 2026-10-02 standby expression pass: the mouth is event-driven; the eyes
   carry the quiet idle personality with a few discrete glances and blinks. */
@property --yf-blink-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --yf-idle-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --yf-idle-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes yf-line-face-blink {
  0%, 39%, 43%, 73%, 77%, 100% { --yf-blink-scale: 1; }
  41% { --yf-blink-scale: .08; }
  75% { --yf-blink-scale: .16; }
}
@keyframes yf-line-face-idle-glance {
  0%, 14%, 100% { --yf-idle-x: 0px; --yf-idle-y: 0px; }
  20%, 27% { --yf-idle-x: -1.8px; --yf-idle-y: -.4px; }
  34% { --yf-idle-x: 0px; --yf-idle-y: 0px; }
  45%, 52% { --yf-idle-x: 1.8px; --yf-idle-y: .35px; }
  59% { --yf-idle-x: 0px; --yf-idle-y: 0px; }
  70%, 78% { --yf-idle-x: 0px; --yf-idle-y: 1.2px; }
  86% { --yf-idle-x: 0px; --yf-idle-y: 0px; }
}
body[data-companion-visual="line"] .line-face-eye {
  --yf-blink-scale: 1;
  --yf-idle-x: 0px;
  --yf-idle-y: 0px;
  transform: translate(calc(var(--gaze-x, 0px) + var(--yf-idle-x)), calc(var(--gaze-y, 0px) + var(--yf-idle-y))) scaleY(var(--yf-blink-scale));
  transform-box: fill-box;
  transform-origin: center;
  animation: yf-line-face-blink 8s ease-in-out infinite, yf-line-face-idle-glance 15s ease-in-out infinite;
}
body[data-companion-visual="line"] .line-face-eye-right {
  animation-delay: .12s, .28s;
}
body[data-companion-visual="line"] .line-face-mouth,
body[data-companion-visual="line"] .line-face-mouth-smile,
body[data-companion-visual="line"] .line-face-mouth-think,
body[data-companion-visual="line"] .line-face-mouth-sad {
  display: none !important;
  opacity: 0 !important;
}
/* The legacy mouth paths stay hidden; expression paths below are the only
   state-driven mouth treatment for the peek face. */
body[data-companion-visual="line"] .line-face-shell,
body[data-companion-visual="line"] .line-face-shell-edge,
body[data-companion-visual="line"] .line-face-ear,
body[data-companion-visual="line"] .line-face-ear-inner,
body[data-companion-visual="line"] .line-face-brow,
body[data-companion-visual="line"] .line-face-cheek,
body[data-companion-visual="line"] .companion-portrait::after {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .line-face-eye,
  body[data-companion-visual="line"] .companion-line-face svg {
    animation: none !important;
    transform: none !important;
  }
}

/* Cursor gaze is the only pointer response: the portrait itself and its
   composer anchor stay still while the two eyes ease toward the cursor. */
body[data-companion-visual="line"] .line-face-eye {
  transition: transform .18s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .line-face-eye { transition: none !important; }
}

/* 2026-10-02 cat contour: a continuous upper-body outline replaces a
   mascot badge. The ears and round lower jaw stay on the same clean path. */
body[data-companion-visual="line"] .line-face-cat-outline {
  fill: none;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
body[data-companion-visual="line"] .line-face-cat-outline {
  stroke: #708091;
  stroke-width: 1.8;
}
body[data-companion-visual="line"] .line-face-cat-inner-ear,
body[data-companion-visual="line"] .line-face-cat-whisker,
body[data-companion-visual="line"] .line-face-cat-nose {
  fill: none;
  stroke: #708091;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

/* Give the rounded cat contour enough air to read as a face while keeping it
   attached to the composer edge rather than turning it into a card. */
body[data-companion-visual="line"] .companion {
  top: -38px;
  width: 104px;
  height: 58px;
}
body[data-companion-visual="line"] .companion-portrait {
  width: 100px;
  height: 58px;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 100px;
  height: 58px;
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -34px;
    width: 94px;
    height: 52px;
  }
  body[data-companion-visual="line"] .companion-portrait {
    width: 90px;
    height: 52px;
  }
  body[data-companion-visual="line"] .companion-line-face svg {
    width: 90px;
    height: 50px;
  }
}

/* Final rounded cat silhouette sizing. */
body[data-companion-visual="line"] .companion {
  top: -68px;
  width: 108px;
  height: 76px;
}
body[data-companion-visual="line"] .companion-portrait {
  width: 104px;
  height: 76px;
}
body[data-companion-visual="line"] .companion-line-face svg {
  width: 104px;
  height: 74px;
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion {
    top: -59px;
    width: 98px;
    height: 68px;
  }
  body[data-companion-visual="line"] .companion-portrait {
    width: 94px;
    height: 68px;
  }
  body[data-companion-visual="line"] .companion-line-face svg {
    width: 94px;
    height: 66px;
  }
}

/* Micro-interactions: an occasional tiny ear tip, visible expression line,
   and a quiet speech bubble make the same peek face feel responsive. */
/* Keep the legacy mouth paths in the DOM for compatibility, but do not let
   them stack with the new event-driven expression line. */
body[data-companion-visual="line"] .line-face-mouth {
  display: none !important;
}
/* The tiny nose reads as a stray mouth at peek scale; keep the path in the
   SVG for compatibility but leave the idle face as eyes + outline only. */
body[data-companion-visual="line"] .line-face-cat-nose {
  display: none !important;
}
body[data-companion-visual="line"] .line-face-ear-tip,
body[data-companion-visual="line"] .line-face-expression {
  display: none;
  fill: none;
  stroke: #263b5d;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
body[data-companion-visual="line"] .line-face-ear-tip {
  stroke-width: 1.8;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
body[data-companion-visual="line"] .line-face-expression {
  stroke-width: 1.7;
}
body[data-companion-visual="line"][data-demo-state="focused"] .line-face-ear-tip,
body[data-companion-visual="line"][data-demo-state="uploading"] .line-face-ear-tip,
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-ear-tip,
body[data-companion-visual="line"] .companion-portrait.is-poked .line-face-ear-tip {
  display: block;
  animation: yf-ear-twitch .85s ease-in-out both;
}
body[data-companion-visual="line"][data-demo-state="typed"] .line-face-expression-smile,
body[data-companion-visual="line"][data-demo-state="history"] .line-face-expression-smile,
body[data-companion-visual="line"] .companion-portrait.is-poked .line-face-expression-smile {
  display: block;
}
body[data-companion-visual="line"][data-demo-state="generating"] .line-face-expression-think {
  display: block;
}
body[data-companion-visual="line"][data-demo-state="error"] .line-face-expression-sad,
body[data-companion-visual="line"][data-demo-state="no-quota"] .line-face-expression-sad {
  display: block;
}
@keyframes yf-ear-twitch {
  0%, 100% { transform: rotate(0deg); }
  34% { transform: rotate(-7deg); }
  64% { transform: rotate(5deg); }
}

body[data-companion-visual="line"] .companion-bubble {
  position: absolute;
  left: 50%;
  top: -58px;
  z-index: 7;
  max-width: 150px;
  padding: 7px 10px;
  border: 1px solid #d5dce1;
  border-radius: 11px;
  background: rgba(255, 254, 250, .97);
  color: #415269;
  box-shadow: 0 5px 16px rgba(34, 47, 60, .08);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
body[data-companion-visual="line"] .companion-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-right: 1px solid #d5dce1;
  border-bottom: 1px solid #d5dce1;
  background: rgba(255, 254, 250, .97);
  transform: translateX(-50%) rotate(45deg);
}
body[data-companion-visual="line"] .companion-bubble.is-popping {
  animation: companion-bubble-pop .22s ease-out both;
}
@keyframes companion-bubble-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(3px) scale(.94); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@media (max-width: 720px) {
body[data-companion-visual="line"] .companion-bubble {
    top: -52px;
    max-width: 132px;
    padding: 6px 9px;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .line-face-ear-tip,
  body[data-companion-visual="line"] .companion-bubble.is-popping {
    animation: none !important;
  }
}

/* Use the supplied Yuanfan company mark in the candidate sidebar. The
   original asset stays untouched; the cropped derivative lives in vnext-assets. */
body .wordmark-logo {
  display: block;
  width: 190px;
  height: 54px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 720px) {
  body .wordmark-logo {
    width: 132px;
    height: 38px;
  }
}

/* Original homepage type rhythm and eyebrow treatment, adapted to the
   light candidate shell. The company logo remains the single YFLOS mark. */
:root {
  --original-home-font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.hero-brand-eyebrow {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 auto 19px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #334e68;
  font-family: var(--original-home-font);
  letter-spacing: .02em;
}
.hero-brand-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 600;
}
.hero-brand-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #4fa9d1;
  animation: hero-brand-dot 2.8s ease-in-out infinite;
}
.hero-brand-sub {
  color: #6d8191;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: .08em;
  white-space: nowrap;
}
.hero-brand-sub b {
  color: #294d72;
  font-weight: 650;
  letter-spacing: .12em;
}
.hero-copy h1 {
  font-family: var(--original-home-font);
  font-weight: 400;
  letter-spacing: -.028em;
}
@keyframes hero-brand-dot {
  0%, 100% { opacity: .72; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.12); }
}
@media (max-width: 720px) {
  .hero-brand-eyebrow { margin-bottom: 15px; }
  .hero-brand-line { font-size: 12px; }
  .hero-brand-sub { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-brand-dot { animation: none !important; }
}

/* Role-based destination: the workbench lives beside the account controls,
   keeping the student navigation focused on places a learner visits. */
.account-nav {
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 9px;
}
.access-menu {
  position: relative;
  flex: 1 0 100%;
}
.access-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .01em;
}
.access-trigger:hover,
.access-trigger:focus-visible,
.access-trigger[aria-expanded="true"] { color: var(--cobalt); }
.access-trigger-mark {
  color: var(--faint);
  font-size: 14px;
  line-height: 1;
  transition: transform .16s ease;
}
.access-trigger[aria-expanded="true"] .access-trigger-mark { transform: rotate(90deg); }
.access-menu-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 44;
  width: 190px;
  padding: 5px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 8px 22px rgba(20, 23, 28, .08);
}
.access-menu-panel a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 10px;
  color: var(--ink);
  text-decoration: none;
}
.access-menu-panel a:hover,
.access-menu-panel a:focus-visible { background: var(--cobalt-soft); }
.access-menu-panel strong { font-size: 12px; font-weight: 550; }
.access-menu-panel small { color: var(--muted); font-size: 10px; }
@media (max-width: 720px) {
  .account-nav {
    min-height: 106px;
    align-content: center;
  }
  .access-menu-panel {
    right: auto;
    left: 0;
    width: min(220px, calc(100vw - 64px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .access-trigger-mark { transition: none; }
}

/* Composer footer: keep upload as a single plus and use the original three
   mode glyphs inside a compact, icon-first picker. */
.attach-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 4px;
  color: var(--cobalt);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}
.attach-button:hover,
.attach-button:focus-visible { background: var(--cobalt-soft); color: var(--ink); text-decoration: none; }
.mode-select-wrap {
  position: relative;
  gap: 0;
  margin-left: auto;
}
.mode-select-wrap label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mode-trigger {
  width: 34px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 4px;
  padding: 0 3px;
  background: transparent;
  color: var(--muted);
}
.mode-trigger:hover,
.mode-trigger:focus-visible,
.mode-trigger[aria-expanded="true"] { background: var(--cobalt-soft); color: var(--cobalt); }
.mode-trigger-icon { display: inline-flex; align-items: center; justify-content: center; }
.mode-trigger-chevron { color: var(--faint); font-size: 13px; line-height: 1; transform: translateY(-1px); }
#chatModelLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mode-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
#chatModelMenu.mode-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 12;
  width: 154px;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  box-shadow: 0 8px 22px rgba(20, 23, 28, .1);
}
#chatModelMenu.mode-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 11px;
}
#chatModelMenu.mode-menu button:hover,
#chatModelMenu.mode-menu button:focus-visible,
#chatModelMenu.mode-menu button.is-selected { background: var(--cobalt-soft); color: var(--cobalt); }
.mode-menu-ico { display: inline-flex; width: 16px; align-items: center; justify-content: center; }
@media (max-width: 720px) {
  .mode-trigger { width: 31px; }
  #chatModelMenu.mode-menu { right: 0; bottom: calc(100% + 7px); }
}

/* Keep the sidebar legible as navigation: one quiet current-state marker,
   while hover remains reversible and does not change layout. */
.primary-nav a.is-active {
  border-left-color: var(--cobalt);
  background: var(--cobalt-soft);
  color: var(--ink);
}

/* Navigation destinations stay below the first action. They are real local
   anchors for review, while the existing production/plugin contracts remain
   unchanged. */
.quick-section,
.work-section,
.capability-section,
.nav-destination {
  display: block;
  scroll-margin-top: 86px;
}
.nav-destination {
  max-width: var(--max);
  margin: 0 auto;
  padding: 76px clamp(24px, 5vw, 70px) 80px;
  border-top: 1px solid var(--line);
  background: var(--canvas);
}
.nav-destination:nth-of-type(even) { background: var(--paper); }
.destination-copy { max-width: 680px; margin-top: 37px; }
.destination-copy h2 { max-width: 13em; }
.destination-copy p {
  max-width: 560px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.destination-note {
  display: inline-block;
  margin-top: 18px;
  color: var(--faint);
  font: 10px/1.4 var(--mono);
}
.destination-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.destination-points span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

body .footer {
  max-width: none;
  margin: 0;
  padding: 34px clamp(24px, 5vw, 70px) 36px;
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(280px, 1.4fr);
  gap: 18px 36px;
  align-items: start;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
}
.footer-brand-block { display: flex; flex-direction: column; gap: 5px; }
.footer-brand-block a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.footer-brand-block span,
.footer-legal { color: var(--faint); font-size: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 11px; }
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--cobalt); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  grid-column: 2;
}
.footer-legal a { color: var(--muted); }
.footer-legal span { flex-basis: 100%; }
.footer-review-row {
  display: flex;
  gap: 12px;
  align-items: center;
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 10px;
}
.footer-faq { grid-column: 1 / -1; }
.footer-faq summary { color: var(--muted); cursor: pointer; font-size: 11px; }
.footer-faq p { max-width: 560px; margin-top: 8px; color: var(--ink); font-size: 14px; line-height: 1.75; }

@media (max-width: 720px) {
  .nav-destination { padding: 60px 22px; }
  body .footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 22px;
  }
  .footer-links,
  .footer-legal,
  .footer-review-row,
  .footer-faq { width: 100%; }
  .footer-review-row { align-items: flex-start; flex-direction: column; }
}

/* Sidebar navigation opens one content view at a time. There is no
   scroll-snap or scroll-driven section switching in the candidate. */
body.route-mode main > [data-route-view] { display: none; }
body.route-mode main > [data-route-view].is-route-active { display: block; }
body.route-mode main > [data-route-view][hidden] { display: none !important; }
body.route-mode main > .compatibility { display: none; }

/* Route changes get a quiet entrance instead of a hard content swap. The
   outgoing view is removed immediately, while the selected view settles into
   place with a short opacity and lift motion. */
body.route-mode main > [data-route-view].is-route-entering {
  animation: yflos-route-enter .46s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes yflos-route-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.primary-nav a {
  transition:
    color .26s ease,
    background-color .3s ease,
    border-color .3s ease,
    transform .3s cubic-bezier(.22, .61, .36, 1);
}
.primary-nav a::after {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  body.route-mode main > [data-route-view].is-route-entering {
    animation: none !important;
  }
}

/* Hover should not look like a second current route in review screenshots. */
.primary-nav a:not(.is-active):hover {
  background: transparent;
  border-left-color: var(--cobalt);
}

/* Review-only state controls stay out of the candidate's first frame until
   the reviewer explicitly opens them from the footer. */
.demo-panel.is-collapsed { display: none; }

/* Keep the single-action home view visually centered on wide screens. The
   composer remains compact, but the title and input sit in the visual centre
   of the available workspace instead of hugging the top edge. */
@media (min-width: 721px) {
  body.route-mode main > #home.hero {
    min-height: calc(100dvh - 24px);
    padding-top: clamp(132px, 20vh, 196px);
    padding-bottom: clamp(72px, 12vh, 120px);
  }
}

@media (max-width: 720px) {
  body.route-mode main > #home.hero {
    padding-top: 92px;
    padding-bottom: 30px;
  }
}

/* The route visibility selector is intentionally specific; restore the
   hero's flex layout after it makes the active view visible so centering and
   the single-action stack still work. */
body.route-mode main > #home.hero.is-route-active { display: flex; gap: 0; }

/* 2026-10-02 section rebuild: keep every original module visible in its own
   local route while preserving the quiet Codex-scale shell. */
.route-content {
  min-height: calc(100dvh - 74px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(46px, 7vh, 82px) clamp(24px, 5vw, 70px) 72px;
  border-top: 1px solid var(--line);
  background: var(--canvas);
}
.route-content:nth-of-type(even) { background: var(--paper); }
.route-heading { max-width: 760px; margin-top: 32px; }
.route-eyebrow {
  margin: 0 0 10px;
  color: var(--cobalt);
  font: 600 11px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.route-heading h2 { margin: 0; max-width: 19em; font-size: clamp(25px, 3vw, 40px); line-height: 1.18; letter-spacing: -.035em; font-weight: 520; }
.route-heading > p:last-child { max-width: 650px; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.route-grid-two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; margin-top: 32px; }
.route-grid-three { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr); gap: 18px; margin-top: 32px; }
.route-panel { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,254,250,.78); }
.route-panel-muted { padding: 24px; background: transparent; }
.route-panel-muted strong { display: block; margin-top: 9px; font-size: 18px; font-weight: 520; }
.route-panel-muted p { margin: 10px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.route-cta, .row-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; padding: 0 14px; border: 1px solid var(--cobalt); border-radius: 6px; background: var(--cobalt); color: #fff; font-size: 12px; }
.route-cta:hover, .route-cta:focus-visible, .row-action:hover, .row-action:focus-visible { background: #152e58; }
.route-cta:disabled, .row-action:disabled { opacity: .45; cursor: not-allowed; }
.quick-list { display: grid; gap: 8px; }
.quick-item { min-height: 64px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-align: left; }
.quick-item:hover, .quick-item:focus-visible { border-color: var(--cobalt); background: #fff; }
.quick-item span:first-child { display: grid; gap: 2px; font-size: 13px; }
.quick-item small { color: var(--faint); font: 10px/1.2 var(--mono); }
.quick-item > span:last-child { color: var(--cobalt); }
.recent-block { padding: 18px; }
.block-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.block-heading strong { display: block; margin-top: 2px; font-size: 16px; font-weight: 520; }
.block-heading-actions { display: inline-flex; align-items: center; gap: 6px; }
.folder-chip-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.batch-bar { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.minor-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--cobalt); font-size: 11px; }
.minor-button:hover, .minor-button:focus-visible { border-color: var(--cobalt); background: var(--cobalt-soft); }
.compact-folder-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 9px 0 12px; border-bottom: 1px solid var(--line); }
.folder-chip, .filter-pill { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 10px; }
.folder-chip.is-active, .filter-pill.is-active { border-color: var(--cobalt); background: var(--cobalt-soft); color: var(--cobalt); }
.recent-list { display: grid; gap: 2px; margin-top: 7px; }
.recent-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border: 0; border-bottom: 1px solid #e4e7e8; background: transparent; color: var(--ink); text-align: left; }
.recent-item:hover, .recent-item:focus-visible { color: var(--cobalt); }
.recent-item b, .recent-item small { display: block; }
.recent-item b { font-size: 13px; font-weight: 500; }
.recent-item small { margin-top: 2px; color: var(--faint); font-size: 10px; }
.today-action { min-height: 170px; padding: 21px; display: flex; flex-direction: column; align-items: flex-start; }
.today-action strong { margin-top: 9px; font-size: 16px; font-weight: 520; }
.today-action p { margin: 8px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.text-link, .route-link-button { padding: 0; border: 0; background: transparent; color: var(--cobalt); font-size: 12px; }
.route-link-button { display: flex; width: 100%; justify-content: space-between; margin-top: 8px; }
.route-divider { width: 100%; margin: 16px 0 12px; border-top: 1px solid var(--line); }
.wrong-book-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 30px; }
.wrong-book-stats div { padding: 17px 16px; border-left: 2px solid var(--cobalt); background: var(--paper); }
.wrong-book-stats b, .wrong-book-stats span { display: block; }
.wrong-book-stats b { font: 500 24px/1 var(--mono); }
.wrong-book-stats span { margin-top: 7px; color: var(--muted); font-size: 11px; }
.wrong-book-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 24px 0 12px; }
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.wrong-book-list { overflow: hidden; }
.wrong-book-row { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.wrong-book-row:last-child { border-bottom: 0; }
.wrong-book-row strong, .wrong-book-row small { display: block; }
.wrong-book-row strong { font-size: 13px; font-weight: 520; }
.wrong-book-row small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.subject-tag { align-self: start; padding-top: 4px; color: var(--cobalt); font: 600 10px/1.2 var(--mono); }
.subject-tag.physics { color: #527277; }
.subject-tag.chinese { color: #806a50; }
.rank-form, .rank-result { padding: 22px; }
.rank-form { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 12px; }
.rank-form label { color: var(--muted); font-size: 12px; }
.rank-form input, .rank-form select, .parent-bind-row input { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--ink); font-size: 12px; }
.rank-form .route-cta { grid-column: 2; justify-self: start; margin-top: 5px; }
.rank-result { display: flex; flex-direction: column; justify-content: center; min-height: 228px; }
.rank-result strong { margin-top: 10px; font-size: 20px; font-weight: 520; }
.rank-result p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.rank-meter { height: 8px; margin: 20px 0 2px; overflow: hidden; border-radius: 999px; background: #e6e9e9; }
.rank-meter span { display: block; height: 100%; border-radius: inherit; background: var(--cobalt); }
.value-flow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin-top: 32px; border: 1px solid var(--line); background: var(--line); }
.value-flow div { min-height: 145px; padding: 20px; background: var(--paper); }
.value-flow span, .value-flow strong, .value-flow p { display: block; }
.value-flow span { color: var(--faint); font: 11px/1 var(--mono); }
.value-flow strong { margin-top: 28px; font-size: 17px; font-weight: 520; }
.value-flow p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.value-mock { margin-top: 18px; padding: 18px; }
.mock-bar { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font: 10px/1.2 var(--mono); }
.value-mock > strong { display: block; margin-top: 18px; font-size: 14px; font-weight: 520; }
.value-mock > p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.mock-columns { display: flex; align-items: end; gap: 12px; height: 94px; margin-top: 20px; }
.mock-columns i { display: flex; flex: 1; align-items: flex-end; justify-content: center; min-height: 18px; padding-bottom: 7px; border-top: 2px solid var(--cobalt); color: var(--muted); font-size: 10px; font-style: normal; background: var(--cobalt-soft); }
.value-roles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.value-roles article { min-height: 120px; padding: 16px; border: 1px solid var(--line); background: transparent; }
.value-roles b, .value-roles span, .value-roles small { display: block; }
.value-roles b { font-size: 14px; font-weight: 600; }
.value-roles span { margin-top: 4px; color: var(--ink); font-size: 12px; }
.value-roles small { margin-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.assess-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 30px; }
.assess-grid article { min-height: 190px; padding: 18px; border: 1px solid var(--line); background: var(--paper); }
.assess-grid span, .assess-grid strong, .assess-grid p, .assess-grid small { display: block; }
.assess-grid span { color: var(--faint); font: 11px/1 var(--mono); }
.assess-grid strong { margin-top: 24px; font-size: 15px; font-weight: 520; }
.assess-grid p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.assess-grid small { margin-top: 17px; color: var(--cobalt); font-size: 10px; }
.assessment-report { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.2fr); gap: 22px; margin-top: 18px; padding: 20px; }
.assessment-report strong, .assessment-report p { display: block; }
.assessment-report strong { margin-top: 10px; font-size: 16px; font-weight: 520; }
.assessment-report p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.report-bars { display: grid; align-content: center; gap: 9px; }
.report-bars i { position: relative; display: block; height: 24px; min-width: 30px; background: var(--cobalt-soft); border-left: 2px solid var(--cobalt); font-style: normal; }
.report-bars i span, .report-bars i b { position: absolute; top: 4px; font-size: 10px; font-weight: 500; }
.report-bars i span { left: 9px; color: var(--ink); }
.report-bars i b { right: 8px; color: var(--cobalt); }
.report-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.report-actions button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); background: transparent; color: var(--faint); font-size: 10px; }
.route-footnote { margin: 18px 0 0; color: var(--faint); font-size: 11px; }
.fellow-reward { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 18px 20px; }
.fellow-reward strong { display: block; margin-top: 7px; font-size: 14px; font-weight: 520; }
.reward-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.reward-pills span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 10px/1 var(--mono); }
.fellow-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.75fr); gap: 20px; margin-top: 12px; padding: 20px; }
.fellow-status { padding-right: 20px; border-right: 1px solid var(--line); }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--faint); }
.fellow-status strong { font-size: 14px; font-weight: 520; }
.fellow-status p { max-width: 540px; margin: 12px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.fellow-status .minor-button { margin-left: 5px; }
.fellow-steps { display: grid; align-content: center; gap: 13px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.fellow-steps span { display: flex; align-items: center; gap: 9px; }
.fellow-steps b { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cobalt); font: 10px/1 var(--mono); }
.parent-layout { margin-top: 30px; }
.parent-layout > .route-panel { padding: 20px; }
.parent-layout strong { display: block; margin-top: 8px; font-size: 15px; font-weight: 520; }
.parent-bind-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 20px; }
.parent-bind-row .route-cta { min-height: 36px; }
.child-card-head { display: flex; align-items: center; gap: 10px; }
.child-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cobalt); color: #fff; font: 11px/1 var(--mono); }
.child-card-head strong, .child-card-head small { margin: 0; display: block; }
.child-card-head small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.status-chip { margin-left: auto; padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--faint); font-size: 10px; }
.child-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 20px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.child-metrics span { color: var(--muted); font-size: 10px; }
.child-metrics b { display: block; color: var(--ink); font: 500 18px/1 var(--mono); }
.coach-summary { margin-top: 16px; }
.coach-summary p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

/* Keep the cat at the original peek position. If the title needs breathing
   room, move the copy block rather than pushing the character into the box. */
body[data-companion-visual="line"] .companion { top: -68px !important; }
body[data-companion-visual="line"] .companion-bubble { top: -58px !important; }
body[data-companion-visual="line"] .hero-copy { position: relative; top: -50px; }

@media (max-width: 900px) {
  .primary-nav { gap: 12px; }
  .route-grid-three { grid-template-columns: 1fr; }
  .assess-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .primary-nav { overflow-y: auto; gap: 3px; }
  .route-content { min-height: calc(100dvh - 64px); padding: 42px 18px 54px; }
  .route-grid-two, .route-grid-three, .assessment-report, .fellow-body { grid-template-columns: 1fr; }
  .route-heading { margin-top: 24px; }
  .route-heading h2 { font-size: 28px; }
  .wrong-book-stats, .value-flow, .value-roles { grid-template-columns: 1fr; }
  .wrong-book-toolbar, .fellow-reward { align-items: flex-start; flex-direction: column; }
  .wrong-book-row { grid-template-columns: 44px minmax(0,1fr); gap: 10px; }
  .wrong-book-row .row-action { grid-column: 2; justify-self: start; }
  .rank-form { grid-template-columns: 1fr; }
  .rank-form .route-cta { grid-column: 1; }
  .parent-bind-row { grid-template-columns: 1fr; }
  .fellow-status { padding-right: 0; padding-bottom: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  body[data-companion-visual="line"] .companion { top: -40px !important; }
  body[data-companion-visual="line"] .companion-bubble { top: -52px !important; }
  body[data-companion-visual="line"] .hero-copy { top: 0; }
  body[data-companion-visual="line"] .hero-brand-eyebrow { margin-bottom: -5px; transform: translateY(-30px); }
  body[data-companion-visual="line"] .hero-copy h1 { position: relative; top: -25px; }
}

/* 题目中心与“我的问题”共用同一份历史记录，只切换分类入口。 */
.work-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr); }
.history-entry-tabs { display: inline-flex; gap: 5px; margin-bottom: 14px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(245,247,246,.82); }
.history-entry-tab { padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.history-entry-tab.is-active { background: var(--cobalt); color: #fff; }
.history-summary { display: grid; grid-template-columns: repeat(3, minmax(110px, 180px)); gap: 8px; margin-top: 26px; }
.history-summary div { display: grid; gap: 5px; padding: 13px 15px; border-left: 2px solid var(--cobalt); background: var(--paper); }
.history-summary b { color: var(--ink); font: 500 20px/1 var(--mono); }
.history-summary span { color: var(--muted); font-size: 11px; }
.history-subject-bar { align-items: flex-start; }
.history-subject-bar .folder-chip-list { display: grid; grid-template-columns: repeat(5, minmax(52px, 1fr)); flex: 1; gap: 6px; }
.history-subject-bar .folder-chip { min-height: 26px; }
.history-status-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.history-record-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e4e7e8; }
.history-record-row .recent-item { flex: 1; border-bottom: 0; }
.history-classify-control { display: none; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--faint); font-size: 10px; }
.history-classify-control select { min-height: 28px; padding: 0 22px 0 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--ink); font-size: 11px; }
.recent-block.is-managing .history-classify-control { display: inline-flex; }
.history-quick-list { display: grid; gap: 7px; margin-top: 9px; }
.history-quick-list .quick-item { min-height: 48px; padding: 9px 11px; }
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
  .history-entry-tabs { margin-top: 2px; }
  .history-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-summary div { padding: 11px 10px; }
  .history-subject-bar .folder-chip-list { grid-template-columns: repeat(3, minmax(52px, 1fr)); }
  .history-classify-control { padding-right: 2px; }
  .history-classify-control span { display: none; }
  .history-classify-control select { max-width: 74px; }
}
@media (min-width: 721px) {
  /* Keep the cat fixed and bring the composer up to its lower edge. */
  body[data-companion-visual="line"] .composer { transform: translateY(-20px); }
}

/* Adjustable desktop workbench shell. The candidate keeps every navigation
   destination, while letting the student choose how much room the sidebar
   occupies. The resizer is hidden on mobile, where the existing drawer is the
   clearer interaction. */
:root { --sidebar-width: 232px; }
.page-shell { padding-left: var(--sidebar-width); }
.topbar {
  width: var(--sidebar-width);
  padding-inline: 8px;
}
.wordmark {
  min-width: 0;
}
.wordmark-logo {
  width: min(190px, calc(var(--sidebar-width) - 54px));
  max-width: min(190px, calc(var(--sidebar-width) - 54px));
}
.demo-panel { left: calc(var(--sidebar-width) + 24px); }
.sidebar-collapse-button {
  position: absolute;
  top: 18px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 21px;
  line-height: 1;
}
.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible {
  border-color: var(--cobalt);
  background: var(--cobalt-soft);
  color: var(--cobalt);
}
.sidebar-resizer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-width) - 4px);
  z-index: 32;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 2px;
  height: 48px;
  border-radius: 2px;
  background: transparent;
  transform: translateY(-50%);
  transition: background-color .16s ease, height .16s ease;
}
.sidebar-resizer:hover::after,
.sidebar-resizer:focus-visible::after,
body.sidebar-resizing .sidebar-resizer::after {
  height: 72px;
  background: var(--cobalt);
}
.sidebar-resizer:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cobalt) 42%, transparent);
  outline-offset: -1px;
}
body.sidebar-resizing,
body.sidebar-resizing * { cursor: col-resize !important; user-select: none !important; }
body.sidebar-resizing .topbar,
body.sidebar-resizing .page-shell { transition: none !important; }

body.sidebar-collapsed .topbar { padding-inline: 14px; }
body.sidebar-collapsed .wordmark {
  width: 42px;
  overflow: hidden;
}
body.sidebar-collapsed .wordmark-logo {
  width: 190px;
  max-width: none;
  height: 54px;
  object-fit: cover;
  object-position: left center;
}
body.sidebar-collapsed .primary-nav a {
  justify-content: center;
  padding-inline: 4px;
  border-left: 0;
  border-right: 2px solid transparent;
  text-align: center;
}
.primary-nav .nav-short { display: none; }
body.sidebar-collapsed .primary-nav .nav-label { display: none; }
body.sidebar-collapsed .primary-nav .nav-short { display: inline; font-size: 11px; line-height: 1.2; }
body.sidebar-collapsed .primary-nav a:hover,
body.sidebar-collapsed .primary-nav a:focus-visible,
body.sidebar-collapsed .primary-nav a.is-active {
  border-right-color: var(--cobalt);
  border-left-color: transparent;
}
body.sidebar-collapsed .account-nav {
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding-inline: 0;
}
body.sidebar-collapsed .account-nav .access-menu,
body.sidebar-collapsed .account-nav .usage-label { display: none; }
body.sidebar-collapsed .account-nav #loginBtn {
  min-width: 38px;
  padding-inline: 5px;
  font-size: 11px;
}
body.sidebar-collapsed .wordmark,
body.sidebar-collapsed .primary-nav,
body.sidebar-collapsed .account-nav {
  display: none;
}
body.sidebar-collapsed .topbar {
  align-items: center;
  padding: 18px 0;
}
body.sidebar-collapsed .sidebar-collapse-button {
  right: 50%;
  transform: translateX(50%);
}
body.sidebar-collapsed .sidebar-collapse-button:hover,
body.sidebar-collapsed .sidebar-collapse-button:focus-visible {
  transform: translateX(50%);
}

/* Collapsed means the rail leaves the layout entirely. Keep only the expand
   control floating over the page edge, so no blank column remains beside the
   student's workspace. */
body.sidebar-collapsed .topbar {
  width: 0;
  min-width: 0;
  padding: 0;
  border-right: 0;
  background: transparent;
  pointer-events: none;
}
body.sidebar-collapsed .sidebar-collapse-button {
  position: fixed;
  top: 18px;
  right: auto;
  left: 12px;
  transform: none;
  pointer-events: auto;
}
body.sidebar-collapsed .sidebar-collapse-button:hover,
body.sidebar-collapsed .sidebar-collapse-button:focus-visible {
  transform: none;
}
body.sidebar-collapsed .sidebar-resizer { display: none; }

/* Companion idle loop and touch feedback. The motion is deliberately short
   and local to the portrait so it feels alive without moving the composer. */
@keyframes yf-companion-idle-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-2px) rotate(-.7deg); }
  72% { transform: translateY(1px) rotate(.4deg); }
}
@keyframes yf-companion-idle-sway {
  0%, 100% { transform: rotate(0deg); }
  28% { transform: rotate(-2.2deg) translateX(-1px); }
  66% { transform: rotate(1.8deg) translateX(1px); }
}
@keyframes yf-companion-idle-peek {
  0%, 100% { transform: translateY(1px); }
  34% { transform: translateY(-4px); }
  62% { transform: translateY(-1px); }
}
@keyframes yf-companion-touch {
  0% { transform: translateY(0) scale(1); }
  28% { transform: translateY(3px) rotate(1.4deg) scale(.985); }
  62% { transform: translateY(-1px) rotate(-.8deg) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes yf-companion-wink {
  0%, 30%, 100% { transform: translate(calc(var(--gaze-x, 0px) + var(--yf-idle-x, 0px)), calc(var(--gaze-y, 0px) + var(--yf-idle-y, 0px))) scaleY(1); }
  46%, 66% { transform: translate(calc(var(--gaze-x, 0px) + var(--yf-idle-x, 0px)), calc(var(--gaze-y, 0px) + var(--yf-idle-y, 0px))) scaleY(.08); }
}
@keyframes yf-companion-eyes-pop {
  0% { opacity: 0; transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)) scale(.35); }
  58% { opacity: 1; transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)) scale(1.12); }
  100% { opacity: 1; transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px)) scale(1); }
}
body[data-companion-visual="line"] .line-face-eye-shape {
  display: none;
  fill: var(--cobalt);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
body[data-companion-visual="line"] .companion-portrait.is-eyes-heart .line-face-eye,
body[data-companion-visual="line"] .companion-portrait.is-eyes-star .line-face-eye,
body[data-companion-visual="line"] .companion-portrait.is-eyes-closed .line-face-eye,
body[data-companion-visual="line"] .companion-portrait.is-eyes-squint .line-face-eye,
body[data-companion-visual="line"] .companion-portrait.is-eyes-chevron .line-face-eye {
  display: none;
}
body[data-companion-visual="line"] .companion-portrait.is-eyes-heart .line-face-eye-heart,
body[data-companion-visual="line"] .companion-portrait.is-eyes-star .line-face-eye-star,
body[data-companion-visual="line"] .companion-portrait.is-eyes-closed .line-face-eye-closed,
body[data-companion-visual="line"] .companion-portrait.is-eyes-squint .line-face-eye-squint,
body[data-companion-visual="line"] .companion-portrait.is-eyes-chevron .line-face-eye-chevron {
  display: block;
  animation: yf-companion-eyes-pop .48s cubic-bezier(.22, .61, .36, 1) both;
}
body[data-companion-visual="line"] .line-face-eye-closed,
body[data-companion-visual="line"] .line-face-eye-squint,
body[data-companion-visual="line"] .line-face-eye-chevron {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-companion-visual="line"] .companion-portrait.is-idle-breathe .companion-line-face svg {
  animation: yf-companion-idle-breathe 1.45s ease-in-out both;
}
body[data-companion-visual="line"] .companion-portrait.is-idle-sway .companion-line-face svg {
  animation: yf-companion-idle-sway 1.25s ease-in-out both;
}
body[data-companion-visual="line"] .companion-portrait.is-idle-peek .companion-line-face svg {
  animation: yf-companion-idle-peek 1.35s ease-in-out both;
}
body[data-companion-visual="line"] .companion-portrait.is-idle-ear .line-face-ear-tip {
  display: block;
  animation: yf-ear-twitch .85s ease-in-out both;
}
body[data-companion-visual="line"] .companion-portrait.is-idle-wink .line-face-eye-right {
  animation: yf-companion-wink .9s ease-in-out both;
}
body[data-companion-visual="line"] .companion-portrait.is-touching .companion-line-face svg {
  animation: yf-companion-touch .65s cubic-bezier(.22, .61, .36, 1) both;
}
body[data-companion-visual="line"] .companion-portrait.is-touching {
  cursor: grabbing;
}
@keyframes yf-companion-poke {
  0% { transform: translateY(0) scale(1); }
  24% { transform: translateY(4px) scale(.94, .98); }
  48% { transform: translateY(-5px) scale(1.04, 1.02); }
  72% { transform: translateY(1px) scale(.99, 1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes yf-prop-pop {
  0% { opacity: 0; transform: scale(.55) translateY(8px) rotate(-9deg); }
  58% { opacity: 1; transform: scale(1.08) translateY(-2px) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
@keyframes yf-lightstick-call {
  0%, 100% { transform: rotate(-18deg) translateY(0); }
  30% { transform: rotate(-32deg) translateY(-3px); }
  62% { transform: rotate(-9deg) translateY(1px); }
}
@keyframes yf-pencil-tap {
  0%, 100% { transform: rotate(22deg) translateY(0); }
  45% { transform: rotate(14deg) translateY(-3px); }
  70% { transform: rotate(25deg) translateY(1px); }
}
@keyframes yf-star-twinkle {
  0%, 100% { transform: scale(.8) rotate(-10deg); opacity: .5; }
  42% { transform: scale(1.18) rotate(12deg); opacity: 1; }
  72% { transform: scale(.96) rotate(0deg); opacity: .9; }
}
body[data-companion-visual="line"] .companion-portrait.is-poked .companion-line-face svg,
body[data-companion-visual="line"] .companion-portrait.is-touching .companion-line-face svg {
  animation: yf-companion-poke .66s cubic-bezier(.22, .61, .36, 1) both;
}
body[data-companion-visual="line"] .companion-prop-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
body[data-companion-visual="line"] .companion-prop {
  position: absolute;
  display: none;
  pointer-events: none;
}
body[data-companion-visual="line"] .companion-portrait.is-prop-lightstick .companion-prop-lightstick {
  right: -25px;
  top: 21px;
  display: block;
  width: 12px;
  height: 38px;
  transform-origin: 50% 100%;
  animation: yf-prop-pop .62s ease-out both, yf-lightstick-call 1.05s .55s ease-in-out infinite;
}
body[data-companion-visual="line"] .companion-prop-lightstick i {
  position: absolute;
  top: 0;
  left: -1px;
  width: 14px;
  height: 14px;
  border: 2px solid #f7c85e;
  border-radius: 50%;
  background: #fff5b8;
  box-shadow: 0 0 5px #ffe87c, 0 0 13px rgba(255, 203, 79, .85);
}
body[data-companion-visual="line"] .companion-prop-lightstick b {
  position: absolute;
  top: 12px;
  left: 4px;
  width: 4px;
  height: 25px;
  border-radius: 999px;
  background: linear-gradient(#fff6be, #f2b83f 38%, #6d4c24);
  box-shadow: 0 0 3px rgba(255, 205, 91, .45);
}
body[data-companion-visual="line"] .companion-portrait.is-prop-pencil .companion-prop-pencil {
  left: -24px;
  top: 36px;
  display: block;
  width: 34px;
  height: 7px;
  transform-origin: 90% 50%;
  animation: yf-prop-pop .58s ease-out both, yf-pencil-tap 1.25s .48s ease-in-out infinite;
}
body[data-companion-visual="line"] .companion-prop-pencil i {
  position: absolute;
  left: 3px;
  top: 0;
  width: 25px;
  height: 7px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #f3b8c5 0 5px, #f7d7a2 5px 10px);
  box-shadow: 0 1px 2px rgba(38, 59, 93, .22);
}
body[data-companion-visual="line"] .companion-prop-pencil b {
  position: absolute;
  right: 0;
  top: 1px;
  width: 0;
  height: 0;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  border-left: 6px solid #5e6670;
}
body[data-companion-visual="line"] .companion-portrait.is-prop-star .companion-prop-star {
  right: -17px;
  top: 1px;
  display: block;
  color: #e5a84b;
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 0 7px rgba(229, 168, 75, .65);
  animation: yf-star-twinkle .9s ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
  body[data-companion-visual="line"] .companion-portrait.is-idle-breathe .companion-line-face svg,
  body[data-companion-visual="line"] .companion-portrait.is-idle-sway .companion-line-face svg,
  body[data-companion-visual="line"] .companion-portrait.is-idle-peek .companion-line-face svg,
  body[data-companion-visual="line"] .companion-portrait.is-idle-wink .line-face-eye-right,
  body[data-companion-visual="line"] .companion-portrait.is-touching .companion-line-face svg {
    animation: none !important;
  }
  body[data-companion-visual="line"] .companion-prop {
    animation: none !important;
  }
  body[data-companion-visual="line"] .line-face-eye-shape {
    animation: none !important;
  }
}

@media (min-width: 721px) {
  /* Keep the active home view flush with the viewport so the footer's paper
     background cannot show as a white strip at the bottom. */
  body.route-mode main > #home.hero { min-height: 100dvh; }
}

@media (max-width: 720px) {
  .page-shell { padding-left: 0; }
  .topbar { width: auto; }
  .demo-panel { left: 16px; }
  .sidebar-collapse-button,
  .sidebar-resizer { display: none; }
}

/* Keep companion speech in the gap below the heading. The desktop bubble
   sits beside the cat instead of floating through the title; wrapped copy
   stays inside the reserved row and remains readable for longer. */
body[data-companion-visual="line"] .companion-bubble {
  top: 2px !important;
  right: calc(100% + 10px) !important;
  left: auto !important;
  width: max-content;
  max-width: 188px !important;
  white-space: normal !important;
  line-height: 1.4;
  transform: none;
}
body[data-companion-visual="line"] .companion-bubble::after {
  top: auto;
  right: -5px;
  bottom: 9px;
  left: auto;
  transform: rotate(-45deg);
}
body[data-companion-visual="line"] .companion-bubble.is-popping {
  animation: companion-bubble-pop-calm .3s ease-out both;
}
@keyframes companion-bubble-pop-calm {
  from { opacity: 0; transform: translateY(3px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 720px) {
  body[data-companion-visual="line"] .companion-bubble {
    top: 2px !important;
    right: auto !important;
    left: 50% !important;
    max-width: min(188px, calc(100vw - 46px)) !important;
    transform: translateX(-50%);
  }
  body[data-companion-visual="line"] .companion-bubble::after {
    right: auto;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* Touch gets a softer, longer settle than a desktop poke. This rule comes
   after the shared poke animation so the touch state cannot be overwritten by
   the fast click feedback. */
body[data-companion-visual="line"] .companion-portrait.is-touching .companion-line-face svg {
  animation: yf-companion-touch 1.12s cubic-bezier(.22, .61, .36, 1) both;
}

/* Soft sidebar open/close motion. The shell width drives the workspace and
   the button follows the same edge, while the navigation fades separately so
   labels never flash while the rail is narrowing. */
@media (min-width: 721px) {
  .page-shell {
    transition: padding-left .46s cubic-bezier(.22, .61, .36, 1);
  }
  .topbar {
    overflow: hidden;
    z-index: 35;
    transition:
      width .46s cubic-bezier(.22, .61, .36, 1),
      padding-inline .38s ease,
      border-color .32s ease,
      background-color .32s ease;
  }
  .sidebar-resizer {
    transition: left .46s cubic-bezier(.22, .61, .36, 1), opacity .25s ease;
  }
  .sidebar-collapse-button {
    position: fixed;
    top: 18px;
    right: auto;
    left: calc(var(--sidebar-width) - 36px);
    transition:
      left .46s cubic-bezier(.22, .61, .36, 1),
      border-color .22s ease,
      background-color .22s ease,
      color .22s ease,
      transform .22s ease;
  }
  .wordmark,
  .primary-nav,
  .account-nav {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity .26s ease .12s,
      transform .42s cubic-bezier(.22, .61, .36, 1) .06s,
      visibility 0s linear .12s;
  }
  body.sidebar-collapsed .wordmark,
  body.sidebar-collapsed .primary-nav,
  body.sidebar-collapsed .account-nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-9px);
    transition:
      opacity .2s ease,
      transform .34s cubic-bezier(.55, .08, .68, .53),
      visibility 0s linear .2s;
  }
  body.sidebar-collapsed .wordmark {
    display: inline-flex;
  }
  body.sidebar-collapsed .sidebar-collapse-button {
    left: 12px;
    right: auto;
    transform: none;
  }
  body.sidebar-resizing .page-shell,
  body.sidebar-resizing .topbar,
  body.sidebar-resizing .sidebar-resizer,
  body.sidebar-resizing .sidebar-collapse-button {
    transition: none !important;
  }
}

/* The collapse control reads as a soft edge handle instead of a floating
   square. Its centre follows the sidebar boundary while the collapsed state
   keeps a small standalone circle at the page edge. */
@media (min-width: 721px) {
  .sidebar-collapse-button {
    left: calc(var(--sidebar-width) - 14px);
    width: 28px;
    height: 28px;
    z-index: 34;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    box-shadow: 0 3px 10px rgba(34, 47, 60, .08);
    color: var(--muted);
    font-size: 18px;
    font-weight: 400;
  }
  .sidebar-collapse-button span {
    display: block;
    transform: translateX(-.5px);
    transition: transform .24s ease;
  }
  .sidebar-collapse-button:hover,
  .sidebar-collapse-button:focus-visible {
    box-shadow: 0 5px 14px rgba(34, 47, 60, .14);
  }
  body.sidebar-collapsed .sidebar-collapse-button {
    left: 10px;
    border-radius: 50%;
  }
  body.sidebar-collapsed .sidebar-collapse-button span {
    transform: translateX(.5px);
  }
}

/* The account theme editor is fixed to the viewport and lives inside the
   navigation rail. Keep the rail animation, but let the editor escape the
   rail's clipping boundary when it opens. */
@media (min-width: 721px) {
  .topbar,
  body.sidebar-collapsed .topbar {
    overflow: visible;
  }
}

/* Move the handle away from the logo/header corner. Centering it on the rail
   makes the control read as part of the full-height divider instead of a
   badge stuck to the top edge. */
@media (min-width: 721px) {
  .sidebar-collapse-button {
    top: 50%;
    transform: translateY(-50%);
  }
  .sidebar-collapse-button:hover,
  .sidebar-collapse-button:focus-visible {
    transform: translateY(-50%) scale(1.04);
  }
  body.sidebar-collapsed .sidebar-collapse-button {
    top: 50%;
    transform: translateY(-50%);
  }
  body.sidebar-collapsed .sidebar-collapse-button:hover,
  body.sidebar-collapsed .sidebar-collapse-button:focus-visible {
    transform: translateY(-50%) scale(1.04);
  }
}

/* Final handle treatment: keep the hit area for accessibility, but let the
   control visually dissolve into the navigation edge as one quiet arrow. */
@media (min-width: 721px) {
  .sidebar-collapse-button {
    width: 28px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--faint);
    font-size: 17px;
    font-weight: 400;
  }
  .sidebar-collapse-button span {
    transform: translateX(-.5px);
    transition: color .22s ease, transform .22s ease;
  }
  .sidebar-collapse-button:hover,
  .sidebar-collapse-button:focus-visible {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--cobalt);
  }
  .sidebar-collapse-button:hover span,
  .sidebar-collapse-button:focus-visible span {
    transform: translateX(-.5px) scale(1.08);
  }
  .sidebar-collapse-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cobalt) 36%, transparent);
    outline-offset: 2px;
  }
  body.sidebar-collapsed .sidebar-collapse-button {
    left: 4px;
  }
  body.sidebar-collapsed .sidebar-collapse-button span {
    transform: translateX(.5px);
  }
}
:root .crm-history-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid #d5dde0; min-width: 0; }
:root .crm-history-panel h2 { margin: 0 0 8px; font-size: 13px; }
:root .crm-history-note { margin: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
:root .crm-history-list { list-style: none; padding: 0; margin: 10px 0; max-height: 34vh; overflow: auto; }
:root .crm-history-list li { margin: 5px 0; }
:root .crm-history-item { width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
:root .crm-history-item[aria-current="true"] { border-color: #7393a6; background: #eef3f5; }
:root .crm-history-panel [hidden] { display: none !important; }
:root .crm-history-panel button:focus-visible { outline: 2px solid #547b94; outline-offset: 2px; }

body.sidebar-collapsed .topbar .crm-history-panel { display: none; }


/* Keep history and account controls reachable when the viewport is short.
   The navigation owns its scroll; account menus take part in footer layout. */
.primary-nav {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.primary-nav > * { flex-shrink: 0; }
.account-nav {
  flex: 0 0 auto;
  min-height: 0;
  max-height: 45dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: flex-start;
}
.account-nav .user-menu,
.account-nav .access-menu-panel {
  position: static;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}
@media (min-width: 721px) {
  .topbar > .wordmark { flex-shrink: 0; }
  .topbar .primary-nav {
    flex: 1 1 auto;
    margin-top: min(24px, 3dvh);
    margin-bottom: 0;
  }
  /* A fixed theme editor must not acquire this scroll container as its
     containing block. The collapsed account remains hidden by existing CSS. */
  .topbar .account-nav { transform: none; }
}
@media (max-width: 720px) {
  /* The fixed account footer may grow when its menus open. Keep the last
     navigation/history item scrollable above its bounded maximum height. */
  .primary-nav { padding-bottom: calc(45dvh + 24px); }
}

/* === DSH 2026-10-16：测评卡片由 4 列窄卡改为 2×2 宽卡并接入角色图 ===
   依据用户选择 A：贴近旧版 .ac-card 设计（图 102×102 在文字左侧，2 列）。
   仅覆盖 .assess-grid 及其新增 .assess-card-main/.assess-art/.assess-body；
   不改动其它任何选择器，不改字体/配色 token。 */
.assess-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.assess-grid article { min-height: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; }
.assess-card-main { display: flex; gap: 14px; align-items: center; flex: 1; }
.assess-art { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--cobalt-soft); }
.assess-art picture, .assess-art img { display: block; width: 100%; height: 100%; }
.assess-art img { object-fit: cover; }
.assess-body { flex: 1; min-width: 0; }
.assess-grid strong { margin-top: 8px; }
.assess-grid small { margin-top: 9px; }
.assess-grid article .text-link { margin-top: 14px; align-self: flex-start; }
@media (max-width: 900px) { .assess-grid { grid-template-columns: minmax(0, 1fr); } }

/* === DSH 2026-10-16：对话记录由左栏 <nav> 搬入「我的问题」主内容区后的适配 ===
   原样式按左栏窄栏设计：上方分隔线、竖向按钮堆叠、列表限高 34vh。
   注意 .crm-history-item 同时带 .conversation-action 类，故宽度覆盖必须限定
   到 .conversation-actions-group 的直接子元素，不能误伤列表项。 */
/* 与兄弟区块的 .route-panel 视觉一致：卡片化。
   注意此处必须显式写 padding，否则上一版的 padding-top:0（特异性更高）会盖掉卡片内边距。 */
.work-section .crm-history-panel { margin-top: 20px; padding: 20px; border: 1px solid var(--yf-border); border-radius: 12px; background: var(--yf-surface-fill,var(--yf-surface)); color: var(--yf-text); }
.work-section .crm-history-panel h2 { font-size: 15px; margin: 0 0 10px; color: var(--yf-text); }
.work-section .crm-history-panel .conversation-actions-group { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.work-section .crm-history-panel .conversation-actions-group > .conversation-action { width: auto; min-width: 96px; }
.work-section .crm-history-list { max-height: none; margin: 14px 0 0; }
.work-section .crm-history-list li { margin: 8px 0; }
.work-section .crm-history-item { padding: 12px 14px; font-size: 12px; line-height: 1.6; }
.work-section .crm-history-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 3.2em; overflow: hidden; min-width: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.work-section .crm-history-title-details { margin: 4px 0 0; min-width: 0; font-size: 12px; line-height: 1.6; color: var(--yf-muted); }
.work-section .crm-history-title-details summary { width: fit-content; max-width: 100%; box-sizing: border-box; min-height: 44px; min-width: 44px; padding: 11px 8px; cursor: pointer; overflow-wrap: anywhere; }
.work-section .crm-history-title-details summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.work-section .crm-history-title-full { padding: 6px 2px; color: var(--yf-text); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; max-width: 100%; max-height: 24rem; overflow: auto; }
.work-section .crm-history-title .katex, .work-section .crm-history-title-full .katex { font-size: 1em; }
.work-section .crm-history-title .crm-formula-node { display: inline; padding: 0; max-width: none; overflow: visible; }
.work-section .crm-history-title .katex-display,
.work-section .crm-history-title .katex-display > .katex,
.work-section .crm-history-title .katex-display > .katex > .katex-html { display: inline; margin: 0; max-width: none; min-width: 0; overflow: visible; }
.work-section .crm-history-meta { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; opacity: .85; }
.work-section .crm-history-item-status { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; }
.work-section .route-footnote .text-link { display: inline-block; margin-top: 8px; }
/* === DSH 2026-10-16：学习搭子模块样式（迁自旧版首页内联 CSS） ===
   来源：yuanfanai.cn 首页 <style> 中的「学习搭子·新版 UI（海报轮播+邀请码卡+成员卡+玻璃按钮）」
   与 .rw-* 奖励条。UI059 只迁移视觉角色及必要弹层样式。
   UI059 接入首页主题角色，保留海报图像及原有布局。 */
.fp-poster{position:relative;width:100%;aspect-ratio:1280/540;border-radius:16px;overflow:hidden;margin-bottom:16px;background:#0a192f}
.fp-track{display:flex;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.fp-slide{flex:none;width:100%;height:100%}
.fp-slide img{width:100%;height:100%;object-fit:cover;display:block}
.fp-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:36px;height:36px;border-radius:50%;border:0;background:rgba(4,16,28,.55);color:#fff;font-size:24px;cursor:pointer}
.fp-prev{left:12px}
.fp-next{right:12px}
.fp-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px;z-index:8}
.fp-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer}
.fp-dots i.on{background:#22d3ee;width:22px;border-radius:5px}
.fp-balance{font-size:14px;margin-bottom:6px}
.fp-rules-bar{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:var(--yf-muted)}
.fp-q{width:20px;height:20px;border-radius:50%;border:1px solid var(--yf-border);background:var(--yf-surface-soft-fill,var(--yf-surface-soft));color:var(--yf-text);font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.fp-q-title{width:22px;height:22px;font-size:14px;vertical-align:middle;margin-left:8px}
.fp-rules{display:none;font-size:12px;color:var(--yf-text);line-height:1.8;margin:0 0 12px;padding:12px 14px;border-radius:10px;background:var(--yf-surface-soft-fill,var(--yf-surface-soft));border:1px solid var(--yf-border)}
.fp-rules.show{display:block}
.fp-invite{margin:12px 0 14px;padding:14px 16px;border-radius:14px;background:var(--yf-surface-soft-fill,var(--yf-surface-soft));border:1px solid var(--yf-border)}
.fp-invite-label{font-size:12px;color:var(--yf-text);margin-bottom:8px}
.fp-code-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fp-code{font-size:28px;font-weight:800;letter-spacing:6px;color:var(--yf-text);font-family:monospace;text-shadow:none}
.fp-copy{flex:none;padding:8px 18px;border:0;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;background:var(--yf-primary-fill,var(--yf-primary));color:var(--yf-on-primary)}
.fp-invite-hint{font-size:11px;color:var(--yf-muted);margin-top:8px}
.fp-members{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.fp-member{flex:none;width:130px;text-align:center;background:var(--yf-surface-soft-fill,var(--yf-surface-soft));border:1px solid var(--yf-border);border-radius:12px;padding:12px}
.fp-avatar{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--yf-on-primary)}
.fp-name{font-size:13px;color:var(--yf-text)}
.fp-name em{display:inline-block;margin-left:4px;font-style:normal;font-size:10px;color:var(--yf-text)}
.fp-prog{height:5px;border-radius:4px;background:var(--yf-surface-soft-fill,var(--yf-surface-soft));margin-top:8px;overflow:hidden}
.fp-prog i{display:block;height:100%;background:var(--yf-surface-soft-fill,var(--yf-surface-soft))}
.fp-qtext{font-size:11px;margin-top:6px}
.fp-team-state{margin-top:12px;font-size:13px}
.fp-back{margin-top:16px;text-align:center}
.fp-back-btn{padding:10px 22px;border:0;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;color:var(--yf-text);background:var(--yf-surface-soft-fill,var(--yf-surface-soft));border:1px solid var(--yf-border);transition:background .2s}
.fp-back-btn:hover{background:var(--yf-surface-soft-fill,var(--yf-surface-soft))}
.fp-back i{display:block;font-style:normal;font-size:11px;color:var(--yf-muted);margin-top:6px}
.fp-btns{display:flex;gap:14px;margin:8px 0 12px;flex-wrap:wrap}
.fp-btn{position:relative;flex:1;min-width:230px;height:56px;display:flex;align-items:center;gap:12px;padding:0 18px;border-radius:16px;border:1px solid var(--yf-border);color:var(--yf-text);cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;transition:transform .25s,box-shadow .25s}
.fp-btn:hover{transform:scale(1.03)}
.fp-btn .fp-ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--yf-surface-soft-fill,var(--yf-surface-soft));display:flex;align-items:center;justify-content:center;font-size:20px}
.fp-btn .fp-tt{display:flex;flex-direction:column;text-align:left}
.fp-btn .fp-tt b{font-size:15px;font-weight:700}
.fp-btn .fp-tt i{font-style:normal;font-size:11px;color:var(--yf-on-primary);margin-top:2px}
.fp-btn .fp-ar{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;background:var(--yf-surface-soft-fill,var(--yf-surface-soft));display:flex;align-items:center;justify-content:center;font-size:15px}
.fp-btn-main{background:var(--yf-primary-fill,var(--yf-primary))}
.fp-btn-main .fp-ico,.fp-btn-main .fp-ar{color:var(--yf-on-primary)}
.fp-btn-join{background:var(--yf-surface-soft-fill,var(--yf-surface-soft))}
.fp-btn-join .fp-ico,.fp-btn-join .fp-ar{color:var(--yf-text)}
.fp-join-row{display:flex;gap:8px;margin-bottom:8px}
.fp-join-row input{flex:1;padding:11px;border:1px solid var(--yf-border);border-radius:10px;background:var(--yf-surface-fill,var(--yf-surface));color:var(--yf-text);font-size:14px;outline:none;text-transform:uppercase}
.fp-btn-join-sm{padding:11px 20px;border:0;border-radius:10px;background:var(--yf-primary-fill,var(--yf-primary));color:var(--yf-on-primary);font-size:14px;cursor:pointer}
.fp-msg{margin-top:10px;font-size:12px;color:var(--yf-text)}
.fp-rmod{position:fixed;inset:0;z-index:10030;display:none;align-items:center;justify-content:center;padding:20px}
.fp-rmod.show{display:flex}
.fp-rmod-back{position:absolute;inset:0;background:rgba(4,10,20,.65);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.fp-rmod-card{position:relative;width:min(520px,100%);max-height:80vh;overflow:auto;padding:24px 26px;border-radius:18px;background:var(--yf-surface-fill,var(--yf-surface));border:1px solid var(--yf-border);box-shadow:0 26px 64px rgba(0,0,0,.55);color:var(--yf-text)}
.fp-rmod-head{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:700;color:var(--yf-text);margin-bottom:14px}
.fp-rmod-x{background:none;border:none;color:var(--yf-text);font-size:18px;cursor:pointer}
.fp-rmod-body{font-size:13.5px;color:var(--yf-text);line-height:1.8}
.fp-rmod-body p{margin:0 0 10px}
.fp-rmod-body b{color:var(--yf-text)}
.fp-rmod-foot{color:var(--yf-muted);font-size:12px;margin-top:6px}
.rw-tag{font-size:11px;color:var(--yf-text);letter-spacing:.14em}
.rw-cnt{display:flex;gap:8px}
.rw-item{flex:none;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--yf-text);background:var(--yf-surface-soft-fill,var(--yf-surface-soft));border:1px solid var(--yf-border)}
.rw-item.quick{color:var(--yf-text);border-color:var(--yf-border)}
.rw-item.solution{color:var(--yf-text);border-color:var(--yf-border)}
.rw-item.coach{color:var(--yf-text);border-color:var(--yf-border)}

@media(max-width:640px){
  .fp-arrow{min-width:44px;min-height:44px}
}
@media(max-width:640px){
  .fp-code{font-size:22px}
}

/* UI059: retain the migrated fellow container geometry and use current reading surfaces. */
#fellow .fellow-dark{position:relative;margin-top:20px;padding:26px 24px;border-radius:16px;background:var(--yf-surface-fill,var(--yf-surface));box-shadow:0 18px 44px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
#fellow .fellow-dark>*{position:relative;z-index:1}
#fellow .fellow-reward-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
#fellow #fellowModuleBody{color:var(--yf-text);font-size:13px;line-height:1.7}
/* Only an open rules layer may lift the stacking ancestor above fixed navigation. */
#fellow #fellowModuleBody.fp-rules-active{z-index:10030}
@media (max-width:720px){#fellow .fellow-dark{padding:20px 16px}}


/* ===== DSH 2026-10-16：测评中心四个入口按钮 =====================================
   原来这里是 <a class="text-link"> 的 12px 下划线文本（.text-link 只定义了
   border-bottom 下划线，没有任何按钮形态），视觉上不像可点的按钮。
   按本设计系统既有的主按钮语言统一（语义主操作底色及文字、圆角 6px），
   做整卡宽按钮：文案居左、箭头居右。
   作用域限定 .assess-grid article，只影响测评区那 4 个入口，不碰其它 .text-link。 */
.assess-grid article .text-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  align-self: stretch; margin-top: 16px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--yf-primary); border-radius: 6px;
  background:var(--yf-primary-fill,var(--yf-primary));color:var(--yf-on-primary);
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.assess-grid article .text-link span { display: inline; color: inherit; font: inherit; }
.assess-grid article .text-link i {
  font-style: normal; font-size: 14px; line-height: 1; opacity: .9;
  transition: transform .18s ease;
}
.assess-grid article .text-link:hover,
.assess-grid article .text-link:focus-visible {
  background: var(--yf-primary-fill,var(--yf-primary)); border-color: var(--yf-primary); color: var(--yf-on-primary);
}
.assess-grid article .text-link:hover i { transform: translate(2px, -2px); }
.assess-grid article .text-link:active { transform: translateY(1px); }
.assess-grid article .text-link:focus-visible { outline: 2px solid var(--yf-text); outline-offset: 2px; }
.assess-grid article .text-link:visited { color: var(--yf-on-primary); }

/* Empty invitation feedback belongs to the field; retain the existing join flow. */
#fellowCode[aria-invalid="true"] { border-color: var(--yf-danger); outline: 2px solid var(--yf-danger); outline-offset: 2px; }

/* UI059: visible rules/refresh/manual-copy controls use the same component roles. */
#fellow .fp-btn-main,#fellow .fp-copy,#fellow .fp-btn-join-sm{background:var(--yf-primary-fill,var(--yf-primary));color:var(--yf-on-primary);border-color:var(--yf-primary)}
#fellow .fp-btn-main .fp-ico,#fellow .fp-btn-main .fp-ar,#fellow .fp-btn-main .fp-tt i{color:var(--yf-on-primary)}
#fellow .fp-btn-main .fp-ico,#fellow .fp-btn-main .fp-ar{background:transparent}
#fellow button,.fp-rmod button{min-height:44px}
#fellow .fp-arrow{min-width:44px}
#fellow .fp-btn-join .fp-ico,#fellow .fp-btn-join .fp-ar,#fellow .fp-btn-join .fp-tt i{color:var(--yf-text)}
#fellow .fp-prog i{background:var(--yf-success)}
#fellow .fp-name em{color:var(--yf-text)}
.fp-rules-open,.fp-refresh-btn,.fp-copy-manual textarea{min-height:44px;border:1px solid var(--yf-border);border-radius:10px;background:var(--yf-surface-fill,var(--yf-surface));color:var(--yf-text);font:inherit}
.fp-rules-open,.fp-refresh-btn{padding:10px 14px;cursor:pointer}
.fp-copy-manual{margin-top:12px;padding:12px;border:1px solid var(--yf-border);border-radius:10px;background:var(--yf-surface-soft-fill,var(--yf-surface-soft));color:var(--yf-text)}
.fp-copy-manual label{display:grid;gap:8px;color:var(--yf-text)}
.fp-copy-manual textarea{box-sizing:border-box;width:100%;max-width:100%;padding:10px;resize:vertical;overflow-wrap:anywhere}
#fellow :is(button,input,textarea):focus-visible,.fp-rmod :focus-visible{outline:2px solid var(--yf-text);outline-offset:3px}
#fellow :is(button):hover,.fp-rules-open:hover,.fp-refresh-btn:hover,.fp-rmod-x:hover{border-color:var(--yf-primary)}
#fellow button:disabled,.fp-rmod button:disabled{opacity:1;cursor:not-allowed;border-style:dashed;transform:none}
#fellowCode[aria-invalid="true"]{border-color:var(--yf-danger);outline:2px solid var(--yf-danger);outline-offset:2px}
#fellow .fp-join-row input::placeholder{color:var(--yf-muted);opacity:1}
.fp-rmod[hidden]{display:none!important}
.fp-rmod-card{max-height:calc(100dvh - 24px);display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;background:var(--yf-surface-fill,var(--yf-surface));color:var(--yf-text)}
.fp-rmod-head{flex:none;gap:12px}
.fp-rmod-x{flex:none;display:inline-grid;place-items:center;min-width:44px;min-height:44px;color:var(--yf-text);cursor:pointer}
.fp-rmod-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;color:var(--yf-text)}
.fp-rmod-foot{flex:none;color:var(--yf-muted)}
.assess-grid article .text-link,.assess-grid article .text-link:hover,.assess-grid article .text-link:focus-visible,.assess-grid article .text-link:visited{background:var(--yf-primary-fill,var(--yf-primary));border-color:var(--yf-primary);color:var(--yf-on-primary)}
.assess-grid article .text-link[aria-disabled=true]{opacity:1;cursor:not-allowed;border-style:dashed;transform:none}

/* UI059 narrow-screen fellow actions keep both title and description in flow. */
@media(max-width:640px){
  #fellow .fp-btn{height:auto;min-height:56px;min-width:0;width:100%;flex:1 1 100%;padding:12px 18px;overflow:visible}
  #fellow .fp-btn .fp-tt{flex:1 1 0;min-width:0;white-space:normal;overflow-wrap:anywhere}
  #fellow .fp-btn .fp-tt b,#fellow .fp-btn .fp-tt i{white-space:normal;overflow-wrap:anywhere}
  #fellow .fp-join-row .fp-btn-join-sm{white-space:nowrap;min-width:68px;flex:0 0 auto}
  #fellow .fp-join-row input{min-width:0}
}

/* AI disclosure stays in message flow, outside replaceable answer content. */
.chat-ai-disclosure {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--yf-muted, var(--muted));
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Follow-up draft actions keep their touch targets while wrapping on narrow screens. */
:root .crm-followup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
:root .crm-followup-actions > .conversation-action { width: auto; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
:root .crm-followup-actions > .crm-history-note { flex: 1 1 160px; }

:root .crm-followup-actions > .crm-history-followup-restore { flex: 1 1 200px; }

/* Reading-edit drafts follow the current theme and stay operable on narrow screens. */
:root .crm-reading-draft-notice,
:root .crm-reading-draft-notice > div {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
:root .crm-reading-draft-notice > p,
:root .crm-reading-draft-notice > div > p { margin: 0; }
:root .crm-reading-draft-notice :is(label, textarea, details) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
:root .crm-reading-draft-notice :is(button, summary) {
  min-width: 44px;
  min-height: 44px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px !important;
  border: 1px solid var(--yf-border, var(--line)) !important;
  border-radius: 10px !important;
  background: var(--yf-surface-fill, var(--yf-surface, var(--paper))) !important;
  color: var(--yf-text, var(--ink)) !important;
  font: inherit;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
:root .crm-reading-draft-notice button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  appearance: none;
}
:root .crm-reading-draft-notice summary { display: list-item; list-style-position: inside; }
:root .crm-reading-draft-notice button:not(:disabled):not([aria-disabled="true"]):hover,
:root .crm-reading-draft-notice summary:not([aria-disabled="true"]):hover {
  border-color: var(--yf-primary, var(--cobalt)) !important;
  color: var(--yf-primary, var(--cobalt)) !important;
}
:root .crm-reading-draft-notice :is(button, summary):focus-visible {
  outline: 2px solid var(--yf-primary, var(--cobalt));
  outline-offset: 2px;
}
:root .crm-reading-draft-notice button:disabled,
:root .crm-reading-draft-notice :is(button, summary)[aria-disabled="true"] {
  border-style: dashed !important;
  color: var(--yf-muted, var(--muted)) !important;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}