:root {
  --ink: #202522;
  --muted: #6c746e;
  --paper: #f7f6f2;
  --line: #d9dcd5;
  --white: #fffefa;
  --orange: #ee7658;
  --orange-soft: #f8e7df;
  --green: #b9e4d1;
  --green-soft: #e9eee8;
  --yellow: #d8f36e;
  --dark: #29312f;
  --sans: "Manrope", "Noto Sans SC", sans-serif;
  --mono: "DM Mono", "Noto Sans SC", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.7; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
textarea { resize: none; }
svg { width: 18px; height: 18px; stroke-width: 1.8; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.site-header { position: sticky; z-index: 30; top: 0; display: flex; align-items: center; justify-content: space-between; width: min(1280px, calc(100% - 80px)); height: 74px; margin: auto; border-bottom: 1px solid var(--line); background: rgba(247, 246, 242, .95); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 245px; }
.brand strong { display: block; font-size: 15px; font-weight: 800; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-family: var(--mono); font-size: 9px; }
.brand-mark, .ai-mark { position: relative; display: inline-block; flex: 0 0 auto; width: 28px; height: 28px; }
.brand-mark i, .ai-mark i { position: absolute; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; }
.brand-mark i:nth-child(1), .ai-mark i:nth-child(1) { top: 1px; left: 1px; background: var(--orange); }
.brand-mark i:nth-child(2), .ai-mark i:nth-child(2) { top: 14px; left: 2px; background: var(--yellow); }
.brand-mark i:nth-child(3), .ai-mark i:nth-child(3) { top: 7px; left: 15px; background: var(--green); }
.site-nav { display: flex; align-items: center; gap: 31px; height: 100%; }
.site-nav a { position: relative; padding: 27px 0 25px; color: var(--muted); font-size: 12px; font-weight: 700; }
.site-nav a:hover, .site-nav a.active { color: var(--ink); }
.site-nav a.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--orange); content: ""; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 245px; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: transparent; }
.profile-button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; background: transparent; font-size: 11px; font-weight: 700; }

.qa-shell { display: grid; grid-template-columns: 242px minmax(0, 1fr); width: min(1280px, calc(100% - 80px)); min-height: calc(100vh - 74px); margin: 0 auto; }
.session-sidebar { position: sticky; top: 74px; display: flex; align-self: start; height: calc(100vh - 74px); flex-direction: column; border-right: 1px solid var(--line); padding: 24px 22px 22px 0; transition: width .24s, padding .24s, opacity .2s; }
.sidebar-top { display: flex; align-items: center; gap: 8px; }
.new-chat { display: flex; align-items: center; flex: 1; gap: 9px; min-height: 42px; border: 1px solid var(--ink); padding: 0 13px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 700; }
.new-chat svg { width: 16px; }
.collapse-sidebar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; }
.session-list-wrap { min-height: 0; flex: 1; margin-top: 24px; overflow-y: auto; padding-right: 4px; }
.session-search { display: flex; align-items: center; gap: 8px; height: 38px; margin-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--muted); }
.session-search:focus-within { border-bottom-color: var(--ink); color: var(--ink); }
.session-search svg { flex: 0 0 auto; width: 15px; height: 15px; }
.session-search input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 8px 0; background: transparent; color: var(--ink); font-size: 11px; }
.session-search input::placeholder { color: #9ba29c; }
.sidebar-label { margin: 0 0 12px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.session-list { display: grid; gap: 22px; }
.session-group > div { display: grid; gap: 4px; }
.session-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30px; border-left: 2px solid transparent; }
.session-row:hover, .session-row.active { border-left-color: var(--orange); background: var(--green-soft); }
.session-item { display: grid; gap: 4px; min-width: 0; width: 100%; border: 0; padding: 10px 5px 10px 9px; background: transparent; text-align: left; }
.session-item strong { overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.session-item small { color: var(--muted); font-family: var(--mono); font-size: 8px; }
.session-more { display: grid; align-self: center; width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); opacity: 0; place-items: center; }
.session-row:hover .session-more, .session-row.active .session-more, .session-more:focus-visible { opacity: 1; }
.session-more:hover { color: var(--ink); }
.session-more svg { width: 15px; height: 15px; }
.session-menu { position: absolute; z-index: 14; top: 38px; right: 2px; width: 118px; border: 1px solid var(--line); padding: 5px; background: var(--white); box-shadow: 5px 6px 0 rgba(32, 37, 34, .1); }
.session-menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; padding: 8px 9px; background: transparent; text-align: left; font-size: 10px; }
.session-menu button:hover { background: var(--green-soft); }
.session-menu svg { width: 13px; height: 13px; }
.empty-history { margin: 0; color: #9ba29c; font-size: 10px; }
.sidebar-note { display: flex; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.sidebar-note svg { width: 14px; height: 14px; }

.qa-workspace { position: relative; min-width: 0; }
.open-sidebar { position: absolute; z-index: 4; top: 25px; left: 24px; display: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--paper); }
body.sidebar-collapsed .qa-shell { grid-template-columns: 0 minmax(0, 1fr); }
body.sidebar-collapsed .session-sidebar { visibility: hidden; width: 0; overflow: hidden; padding: 0; opacity: 0; }
body.sidebar-collapsed .open-sidebar { display: grid; }

.initial-view { display: grid; min-height: calc(100vh - 74px); place-items: center; padding: 70px 58px 82px; }
.initial-inner { width: min(820px, 100%); }
.overline { margin: 0 0 20px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.overline::before { display: inline-block; width: 25px; height: 1px; margin: 0 9px 3px 0; background: var(--orange); content: ""; vertical-align: middle; }
.initial-view h1 { margin: 0; font-size: 50px; font-weight: 900; letter-spacing: -.055em; line-height: 1.06; }
.initial-view h1 span { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; }
.initial-lead { max-width: 590px; margin: 22px 0 31px; color: var(--muted); font-size: 13px; line-height: 1.9; }

.question-composer { position: relative; border: 1px solid #cfd4cd; border-radius: 6px; background: var(--white); box-shadow: 6px 7px 0 rgba(32, 37, 34, .07); }
.composer-large { padding: 18px 18px 14px; }
.composer-large textarea { display: block; width: 100%; min-height: 82px; border: 0; outline: 0; padding: 0; background: transparent; color: var(--ink); font-size: 14px; line-height: 1.8; }
.composer-large textarea::placeholder, .composer-compact textarea::placeholder { color: #9ba29c; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; }
.composer-tools { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tool-button { display: inline-flex; align-items: center; gap: 7px; height: 34px; border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; background: transparent; font-size: 10px; font-weight: 700; }
.tool-button:hover, .tool-button[aria-expanded="true"] { border-color: var(--ink); background: var(--green-soft); }
.tool-button svg { width: 15px; height: 15px; }
.input-hint { color: var(--muted); font-size: 9px; }
.send-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ink); color: var(--white); }
.send-button:hover { background: var(--orange); }
.send-button:disabled { cursor: wait; opacity: .5; }
.send-button svg { width: 17px; height: 17px; stroke-width: 2.2; }
.symbol-panel { position: absolute; z-index: 10; top: calc(100% + 9px); left: 0; width: min(660px, 100%); max-height: 430px; overflow-y: auto; border: 1px solid var(--line); padding: 17px; background: var(--paper); box-shadow: 7px 8px 0 rgba(32, 37, 34, .12); }
.symbol-panel[hidden] { display: none; }
.symbol-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.symbol-panel-head strong { font-size: 11px; }
.symbol-panel-head small { color: var(--muted); font-size: 9px; }
.symbol-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.symbol-tabs button { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; padding: 9px 13px; background: transparent; color: var(--muted); font-size: 11px; }
.symbol-tabs button:hover { color: var(--ink); }
.symbol-tabs button.active { border-bottom-color: var(--orange); color: var(--ink); font-weight: 700; }
.symbol-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.symbol-grid button { min-height: 34px; border: 1px solid var(--line); background: var(--white); font-family: var(--mono); font-size: 11px; }
.symbol-grid button:hover { border-color: var(--orange); background: var(--orange-soft); }

.starter-block { margin-top: 32px; }
.starter-block > p { margin: 0 0 10px; color: var(--muted); font-size: 10px; }
.starter-list { border-top: 1px solid var(--line); }
.starter-list button { display: grid; grid-template-columns: 100px minmax(0, 1fr) 22px; align-items: center; width: 100%; min-height: 58px; border: 0; border-bottom: 1px solid var(--line); padding: 0 7px; background: transparent; text-align: left; }
.starter-list button > span { color: var(--orange); font-family: var(--mono); font-size: 9px; }
.starter-list button strong { font-size: 12px; font-weight: 600; }
.starter-list button svg { width: 15px; transition: transform .18s; }
.starter-list button:hover { background: var(--green-soft); }
.starter-list button:hover svg { transform: translate(3px, -3px); }

.conversation-view { display: none; min-height: calc(100vh - 74px); }
body[data-mode="conversation"] .initial-view { display: none; }
body[data-mode="conversation"] .conversation-view { display: block; }
.conversation-inner { width: min(820px, calc(100% - 88px)); margin: 0 auto; padding: 53px 0 34px; }
.conversation-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 45px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.conversation-head .overline { margin-bottom: 10px; }
.conversation-head h1 { margin: 0; font-size: 30px; letter-spacing: -.055em; }
.knowledge-status { display: inline-flex; align-items: center; gap: 7px; color: #4d6d5d; font-size: 11px; font-weight: 700; }
.knowledge-status svg { width: 14px; height: 14px; }
.message { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; margin-bottom: 36px; }
.message-label { color: var(--muted); font-family: var(--mono); font-size: 11px; padding-top: 3px; }
.user-message p { width: fit-content; max-width: 660px; margin: 0; border-left: 2px solid var(--orange); padding: 13px 17px; background: var(--orange-soft); font-size: 14px; }

.thinking { display: flex; align-items: center; gap: 15px; min-height: 80px; margin: 15px 0 45px 52px; }
.thinking > .thinking-copy { display: flex; align-items: flex-start; flex-direction: column; gap: 6px; }
.thinking-line { display: flex; align-items: center; gap: 12px; }
.thinking strong { font-size: 11px; }
.thinking small, [data-followup-elapsed] { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); animation: pulse 1.1s infinite ease-in-out; }
.thinking-dots i:nth-child(2) { animation-delay: .15s; }
.thinking-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 65%, 100% { opacity: .25; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-3px); } }

.assistant-answer { margin-left: 52px; }
.answer-section { padding: 36px 0; }
.conclusion-section { border-top: 0; padding-top: 0; }
.answer-kicker { margin: 0 0 11px; color: var(--orange); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.conclusion-section h2 { position: relative; margin: 0 0 15px; padding-right: 72px; font-size: 28px; letter-spacing: 0; line-height: 1.45; }
.conclusion-section h2 > .source-citations { position: absolute; top: 8px; right: 0; }
.conclusion-section > p:last-child { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.conclusion-section > p strong { color: var(--ink); }
.section-title { display: flex; align-items: baseline; gap: 15px; margin-bottom: 25px; }
.section-title > span { min-width: 30px; color: var(--orange); font-family: var(--mono); font-size: 17px; font-weight: 500; }
.section-title h3 { margin: 0; font-size: 23px; letter-spacing: 0; }
.source-citations { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: super; font-family: var(--mono); font-size: 10px; line-height: 1; }
.source-citations a { display: inline-grid; min-width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; color: var(--orange); place-items: center; }
.source-citations a:hover { background: var(--orange); color: var(--white); }
.structured-explanation { border-block: 1px solid var(--line); }
.structured-explanation.two-column { display: grid; grid-template-columns: 1fr 1fr; }
.structured-explanation > div { padding: 25px 4px; }
.structured-explanation.two-column > div { padding-inline: 25px; }
.structured-explanation.two-column > div + div { border-left: 1px solid var(--line); background: var(--green-soft); }
.structured-explanation strong { display: block; margin-bottom: 9px; font-size: 18px; }
.structured-explanation p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.structured-explanation:not(.two-column) > div + div { border-top: 1px solid var(--line); }
.dimension-compare { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); }
.dimension-compare > div { min-height: 0; padding: 27px 26px 28px; }
.dimension-compare > div + div { border-left: 1px solid var(--line); background: var(--green-soft); }
.dimension-compare strong { display: block; margin-bottom: 10px; font-size: 20px; }
.dimension-compare p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.equation-line { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 10px; border: 0; padding: 18px 22px; background: var(--dark); color: var(--white); }
.equation-line span { color: var(--green); font-size: 11px; font-weight: 700; }
.equation-line b { font-size: 18px; font-weight: 500; }
.boundary-note { display: flex; gap: 10px; margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.boundary-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--orange); }
.subsection-title { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 38px 0 15px; }
.subsection-title span { color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.subsection-title h4 { margin: 0; font-size: 19px; }

.comparison-table { border-top: 1px solid var(--ink); }
.comparison-row { display: grid; grid-template-columns: 1.1fr .85fr 1.35fr 1fr; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line); padding: 0 12px; font-size: 14px; }
.structured-comparison .comparison-row { grid-template-columns: repeat(var(--comparison-columns), minmax(0, 1fr)); gap: 12px; }
.comparison-row strong { font-weight: 600; }
.comparison-row b { color: #3d6652; font-weight: 700; }
.comparison-head { min-height: 46px; color: var(--muted); font-size: 12px; font-weight: 700; }
.diagnosis-band { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; margin: 24px 0 4px; border-left: 3px solid #638d77; padding: 25px 27px; background: var(--green); }
.diagnosis-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #5c7c6c; border-radius: 50%; }
.diagnosis-icon svg { width: 20px; height: 20px; }
.diagnosis-band p { margin: 0 0 6px; color: #496958; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.diagnosis-band strong { display: block; margin-bottom: 8px; font-size: 16px; }
.diagnosis-band div > span { display: block; color: #456253; font-size: 13px; line-height: 1.8; }

.learning-path { display: grid; grid-template-columns: repeat(var(--learning-columns, 3), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.learning-path li { position: relative; min-height: 96px; border-top: 1px solid var(--line); padding: 20px 17px 18px 42px; }
.learning-path li + li { border-left: 1px solid var(--line); }
.learning-path li > span { position: absolute; top: 21px; left: 13px; color: var(--orange); font-family: var(--mono); font-size: 12px; }
.learning-path strong, .learning-path small { display: block; }
.learning-path strong { margin-bottom: 7px; font-size: 14px; }
.learning-path small { color: var(--muted); font-size: 12px; line-height: 1.65; }
.source-section { border-top: 1px solid var(--line); }
.source-links { display: grid; border-top: 1px solid var(--line); }
.source-links a, .source-links article { position: relative; min-height: 82px; border-bottom: 1px solid var(--line); padding: 18px 46px 17px 2px; }
.source-links a:hover { padding-left: 10px; background: var(--green-soft); }
.source-links span, .source-links strong { display: block; }
.source-links span { margin-bottom: 7px; color: var(--orange); font-size: 11px; }
.source-links strong { font-size: 14px; }
.source-links svg { position: absolute; top: 25px; right: 16px; width: 17px; }
.dynamic-answer-section { border-bottom: 1px solid var(--line); padding-bottom: 34px; }
.model-answer-body { max-width: 760px; color: var(--ink); }
.model-answer-body p { margin: 0 0 17px; font-size: 16px; line-height: 1.9; }
.model-answer-body p:last-child { margin-bottom: 0; }
.model-answer-body h3 { margin: 30px 0 13px; font-size: 22px; line-height: 1.45; }
.model-answer-body h4 { margin: 25px 0 11px; font-size: 18px; line-height: 1.5; }
.model-answer-body ul, .model-answer-body ol { margin: 12px 0 20px; padding-left: 24px; }
.model-answer-body li { margin: 8px 0; padding-left: 3px; font-size: 15px; line-height: 1.8; }
.source-citation { display: inline-block; margin-inline: 3px; border-bottom: 1px solid var(--orange); color: var(--orange); font-size: .84em; font-weight: 700; }
.dynamic-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.source-card { min-height: 104px; scroll-margin-top: 90px; border-bottom: 1px solid var(--line); padding: 18px 42px 16px 4px; }
.source-card span, .source-card strong, .source-card small { display: block; }
.source-card span { margin-bottom: 7px; color: var(--orange); font-size: 12px; }
.source-card strong { margin-bottom: 6px; font-size: 15px; line-height: 1.45; }
.source-card small { color: var(--muted); font-size: 11px; line-height: 1.55; }
.request-error { border-top: 2px solid var(--orange); }
.request-error h3 { margin: 0 0 10px; font-size: 20px; }
.request-error p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.retry-answer-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; border: 1px solid var(--ink); padding: 10px 14px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; }
.retry-answer-button:hover { background: var(--ink); color: var(--white); }
.retry-answer-button svg { width: 16px; height: 16px; }

.understanding-check { margin-top: 8px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); padding: 25px 2px 24px; }
.understanding-check h3 { margin: 0; font-size: 18px; }
.check-options { display: flex; gap: 8px; margin-top: 18px; }
.check-options button { border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; background: transparent; font-size: 13px; }
.check-options button:hover { border-color: var(--ink); }
.check-options button.correct { border-color: #5f8d75; background: var(--green); }
.check-options button.wrong { border-color: var(--orange); background: var(--orange-soft); }
.check-feedback { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.followup-area { margin-top: 27px; }
.followup-area > p { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.followup-area > div { display: flex; flex-wrap: wrap; gap: 7px; }
.followup-area button { border: 1px solid var(--line); border-radius: 4px; padding: 9px 12px; background: transparent; font-size: 12px; }
.followup-area button:hover { border-color: var(--ink); background: var(--green-soft); }
.answer-feedback { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.answer-feedback span { margin-right: 5px; }
.answer-feedback button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; background: transparent; }
.answer-feedback button:hover, .answer-feedback button.selected { border-color: var(--line); background: var(--white); color: var(--ink); }
.answer-feedback svg { width: 14px; height: 14px; }

.followup-thread { margin: 35px 0 0 52px; }
.followup-entry { scroll-margin-top: 96px; border-top: 1px solid var(--line); padding: 36px 0 20px; }
.followup-entry .followup-question { margin: 0 0 21px; border-left: 2px solid var(--orange); padding: 12px 15px; background: var(--orange-soft); font-size: 14px; }
.followup-reply { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 13px; }
.followup-reply .ai-mark { transform: scale(.78); transform-origin: top left; }
.followup-reply p { color: var(--muted); }
.followup-reply strong { color: var(--ink); }
.followup-answer-text { min-width: 0; }
.followup-answer-text > .structured-answer > .answer-section:first-child { padding-top: 0; }
.followup-progress { padding: 4px 0 34px; }
.followup-progress p { margin: 0 0 5px; color: var(--ink); font-size: 13px; font-weight: 700; }
.followup-progress small { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.followup-error { color: var(--orange) !important; }

.mode-direct .conclusion-section { max-width: 720px; padding-bottom: 18px; }
.mode-direct .conclusion-section h2 { font-size: 27px; }
.mode-direct .direct-detail { padding: 0 0 18px; }
.mode-direct .direct-detail .structured-explanation { border-bottom: 0; }
.mode-direct .direct-detail .structured-explanation > div { padding-block: 18px; }
.mode-direct .source-section { padding-top: 24px; }
.mode-direct .answer-feedback { margin-top: 10px; }

.conversation-composer-wrap { position: sticky; z-index: 12; bottom: 0; width: min(820px, calc(100% - 88px)); margin: 0 auto; padding: 17px 0 14px; background: linear-gradient(to bottom, rgba(247, 246, 242, 0), var(--paper) 20%, var(--paper)); }
.composer-compact { display: flex; align-items: center; min-height: 56px; padding: 8px 9px 8px 15px; }
.composer-compact textarea { min-width: 0; flex: 1; border: 0; outline: 0; padding: 8px 0; background: transparent; font-size: 12px; line-height: 1.5; }
.compact-actions { display: flex; align-items: center; gap: 7px; }
.compact-actions .tool-button { display: grid; width: 34px; padding: 0; place-items: center; }
.compact-actions .send-button { width: 34px; height: 34px; }
.compact-symbol-panel { top: auto; bottom: calc(100% + 9px); }
.conversation-composer-wrap > p { margin: 8px 0 0; color: #8d948f; text-align: center; font-size: 8px; }

.dialog-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(32, 37, 34, .46); }
.dialog-backdrop[hidden] { display: none; }
.dialog { position: relative; width: min(520px, 100%); border: 1px solid var(--line); padding: 36px; background: var(--paper); box-shadow: 10px 10px 0 rgba(32, 37, 34, .18); }
.dialog h2 { margin: 0 0 10px; font-size: 31px; letter-spacing: -.055em; }
.dialog-note { margin: 0; color: var(--muted); font-size: 12px; }
.dialog-close { position: absolute; top: 17px; right: 19px; display: grid; width: 32px; height: 32px; border: 0; background: transparent; place-items: center; }
.search-form { display: flex; margin-top: 28px; border-bottom: 1px solid var(--ink); }
.search-form input { width: 100%; border: 0; outline: 0; padding: 12px 2px; background: transparent; }
.search-form button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; font-size: 11px; font-weight: 700; white-space: nowrap; }
.search-form svg { width: 14px; }
.search-results { margin-top: 18px; }
.search-results a { display: block; border: 1px solid var(--line); padding: 11px 13px; background: var(--white); font-size: 11px; }
.auth-actions { display: flex; gap: 10px; margin-top: 28px; }
.solid-button, .outline-button { border: 1px solid var(--ink); padding: 11px 19px; font-size: 11px; font-weight: 700; }
.solid-button { background: var(--ink); color: var(--white); }
.outline-button { background: transparent; }
.toast { position: fixed; z-index: 70; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 14px; padding: 12px 15px; background: var(--ink); color: var(--white); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s; }
.toast.show { opacity: 1; pointer-events: auto; transform: none; }
.toast button { border: 0; border-bottom: 1px solid var(--green); padding: 1px 0; background: transparent; color: var(--green); font-size: 11px; font-weight: 700; }

@media (max-width: 1080px) {
  .site-nav { gap: 17px; }
  .brand, .header-tools { min-width: 190px; }
  .qa-shell { grid-template-columns: 215px minmax(0, 1fr); }
  .session-sidebar { padding-right: 18px; }
  .initial-view { padding-inline: 42px; }
}

@media (max-width: 860px) {
  .site-header, .qa-shell { width: min(100% - 36px, 720px); }
  .site-header { height: auto; min-height: 68px; flex-wrap: wrap; padding: 11px 0; gap: 8px; }
  .brand, .header-tools { min-width: auto; }
  .site-nav { order: 3; width: 100%; height: 33px; justify-content: space-between; overflow-x: auto; gap: 18px; }
  .site-nav a { flex: 0 0 auto; padding: 6px 0 8px; font-size: 11px; }
  .qa-shell { display: block; }
  .session-sidebar { position: fixed; z-index: 25; top: 0; left: 0; visibility: hidden; width: min(300px, 84vw); height: 100vh; padding: 24px; background: var(--paper); box-shadow: 12px 0 30px rgba(32, 37, 34, .18); opacity: 0; transform: translateX(-100%); transition: .22s; }
  body.sidebar-mobile-open .session-sidebar { visibility: visible; opacity: 1; transform: none; }
  .open-sidebar, body.sidebar-collapsed .open-sidebar { display: grid; }
  .initial-view { min-height: calc(100vh - 110px); padding: 80px 24px 62px; }
  .initial-view h1 { font-size: 43px; }
  .conversation-inner, .conversation-composer-wrap { width: min(100% - 44px, 700px); }
  .conversation-inner { padding-top: 72px; }
}

@media (max-width: 600px) {
  .initial-view h1 { font-size: 39px; }
  .input-hint { display: none; }
  .starter-list button { grid-template-columns: 82px minmax(0, 1fr) 20px; }
  .conversation-head { align-items: flex-start; flex-direction: column; }
  .conversation-head h1 { font-size: 26px; }
  .message { grid-template-columns: 34px minmax(0, 1fr); }
  .assistant-answer, .thinking, .followup-thread { margin-left: 0; }
  .dimension-compare, .source-links { grid-template-columns: 1fr; }
  .structured-explanation.two-column { grid-template-columns: 1fr; }
  .structured-explanation.two-column > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .dimension-compare > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .equation-line { align-items: flex-start; flex-direction: column; }
  .equation-line b { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .comparison-row { grid-template-columns: 1fr 1fr; gap: 5px; padding: 10px; }
  .comparison-head { display: none; }
  .learning-path { grid-template-columns: 1fr; }
  .learning-path li + li { border-top: 0; border-left: 0; }
  .check-options { align-items: stretch; flex-direction: column; }
  .symbol-grid { grid-template-columns: repeat(3, 1fr); }
  .symbol-tabs button { padding-inline: 10px; }
}