:root { --ink: #243c36; --muted: #718078; --accent: #285e4b; --border: #dde3dc; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fbfcf9; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; }
.app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar { width: 278px; flex-shrink: 0; display: flex; flex-direction: column; padding: 30px 20px 18px; background: #f0f3ed; border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.brand-mark { font-size: 31px; color: var(--accent); }
.new-chat-form { margin: 32px 0 36px; }
.new-chat { background: #fff; border: 1px solid #cdd7cd; color: var(--ink); text-align: left; padding: 12px 14px; border-radius: 9px; font-size: 14px; }
.new-chat:hover { background: #e1e9df; border-color: #a8bcae; }
.new-chat span { margin-right: 9px; font-size: 19px; }
.sidebar-label { font-size: 10px; letter-spacing: 1.8px; color: var(--muted); padding: 0 10px; margin-bottom: 16px; }
.history { flex: 1; overflow-y: auto; min-height: 0; }
.history-item { display: block; text-decoration: none; padding: 12px 10px; border-radius: 8px; margin-bottom: 5px; }
.history-item:hover, .history-item.active { background: #e0e8dc; }
.history-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.history-item small { font-size: 10px; color: var(--muted); }
.history-empty { padding: 8px 10px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.sidebar-footer { border-top: 1px solid var(--border); padding-top: 19px; margin-top: 15px; font-size: 10px; color: var(--muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; background: #618268; border-radius: 50%; margin-right: 7px; }
.main-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 78px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 38px; border-bottom: 1px solid #ebeee7; }
.topbar-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foundation-badge { margin-left: auto; flex-shrink: 0; font-size: 10px; color: #778274; background: #f0f3ea; padding: 6px 10px; border-radius: 20px; }
.sidebar-toggle { display: none; }
.conversation { flex: 1; overflow-y: auto; min-height: 0; padding: 34px 28px; }
.conversation-inner { max-width: 820px; margin: 0 auto; }
.welcome { padding: 36px 0 18px; text-align: center; }
.welcome-mark { display: inline-grid; place-items: center; width: 62px; height: 62px; background: #edf2e8; border: 1px solid #dfe7d8; border-radius: 18px; font-size: 39px; color: #567356; margin-bottom: 26px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; color: #7b8776; margin-bottom: 19px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 3.6vw, 49px); font-weight: 400; letter-spacing: -1.6px; line-height: 1.15; }
.welcome-description { color: var(--muted); font-size: 13px; line-height: 1.85; margin-top: 21px; }
.example-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 36px auto 0; }
.example-card { text-align: left; border: 1px solid var(--border); padding: 19px 16px; border-radius: 11px; background: #fff; }
.example-card span { font-size: 9px; letter-spacing: 1.2px; color: #81907c; }
.example-card p { font-size: 12px; line-height: 1.7; margin: 13px 0 0; }
.composer-wrap { width: 100%; max-width: 876px; margin: 0 auto; padding: 15px 28px 19px; }
.composer { border: 1px solid #cfdacd; border-radius: 15px; padding: 12px; background: #fff; box-shadow: 0 5px 20px #203c3010; }
.composer:focus-within { border-color: #799782; }
.question-input { border: 0; resize: vertical; max-height: 200px; min-height: 65px; font-size: 14px; color: var(--ink); background: transparent; }
.question-input:focus { box-shadow: none; background: transparent; }
.question-input::placeholder { color: #909a90; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 2px 0 10px; }
.composer-actions > span { color: #939b90; font-size: 10px; }
.research-button { background: var(--accent); color: white; border-radius: 8px; font-size: 12px; padding: 10px 16px; }
.research-button:hover, .research-button:focus-visible { background: #194333; color: white; }
.research-button span { margin-left: 14px; }
.composer-help { text-align: center; font-size: 10px; color: #929b8e; margin: 12px 0 0; }
.message { padding: 22px; margin-bottom: 20px; border-radius: 12px; border: 1px solid var(--border); background: white; }
.message-user { background: #eef3e9; }
.message-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 12px; }
.message-meta time { color: var(--muted); font-size: 10px; }
.message-content { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.8; }
.preview-notice { color: var(--muted); font-size: 12px; padding: 12px; text-align: center; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 10; padding: 10px; background: white; }
:focus-visible { outline: 2px solid #547a5e; outline-offset: 3px; }
.agent-research { margin: 30px 0 10px; }
.agent-research h2 { font-size: 22px; }
.research-disclaimer { color: var(--muted); font-size: 12px; line-height: 1.7; }
.research-run { padding-top: 20px; margin-top: 24px; border-top: 1px solid var(--border); }
.research-run-header { display: flex; align-items: start; gap: 14px; justify-content: space-between; }
.research-run h3 { font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.query-status { font-size: 10px; border-radius: 15px; padding: 5px 9px; background: #e4eddf; flex-shrink: 0; }
.status-failed { background: #f7e3df; color: #963f32; }
.status-processing, .status-pending { background: #f7efda; color: #76602d; }
.agent-card { border: 1px solid var(--border); background: white; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.agent-card summary { padding: 18px; cursor: pointer; font-size: 13px; }
.agent-label { font-weight: 650; margin-left: 5px; }
.agent-model { color: var(--muted); font-size: 11px; margin-left: 10px; overflow-wrap: anywhere; }
.agent-outcome { display: block; font-size: 10px; color: var(--muted); margin: 6px 0 0 20px; }
.agent-card-body { padding: 0 20px 20px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.agent-card h4 { margin: 20px 0 9px; font-size: 13px; font-weight: 650; }
.agent-confidence { padding-top: 20px; margin-bottom: 0; }
.agent-error { border-color: #eac8c1; }
.agent-error .agent-outcome, .agent-error-message { color: #963f32; }
.agent-error-message { margin: 18px 0 0; }
.agent-citations { padding-left: 20px; }
.research-progress { font-size: 12px; color: var(--accent); text-align: center; margin: 12px 0 0; }
.research-progress .spinner-border { margin-right: 7px; }
.academic-evidence { margin-top: 45px; }
.evidence-count { color: var(--accent); font-size: 13px; }
.paper-card summary { line-height: 1.7; overflow-wrap: anywhere; }
.paper-authors { margin-top: 16px; color: var(--muted); }
.paper-metadata { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0; color: var(--muted); font-size: 12px; }
.evidence-error { border: 1px solid #eac8c1; border-radius: 10px; padding: 16px; color: #963f32; font-size: 13px; }
.evidence-error p { margin: 8px 0 0; }
.final-research { margin: 30px 0; }
.final-research h2 { font-family: Georgia, serif; font-size: 30px; margin-bottom: 24px; }
.final-research-result { padding: 25px; border: 1px solid #cbdcc9; border-radius: 14px; background: #fff; margin-bottom: 25px; overflow-wrap: anywhere; scroll-margin-top: 10px; }
.final-research h3 { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.final-research h4 { font-size: 16px; margin: 26px 0 14px; }
.final-research h5 { font-size: 13px; font-weight: 650; }
.final-research p, .final-research li { font-size: 13px; line-height: 1.8; }
.final-summary { color: var(--muted); margin-top: 16px; }
.final-confidence { padding: 15px; margin-top: 20px; border-radius: 8px; background: #eef3e9; font-size: 14px; }
.final-confidence p { font-size: 11px; margin: 5px 0 0; }
.final-finding { padding: 16px 0; border-bottom: 1px solid var(--border); }
.final-finding p { margin: 10px 0; }
.source-reference { display: inline-block; margin-right: 8px; font-size: 12px; }
.final-sources { padding-left: 22px; }
.final-sources li { padding-bottom: 15px; scroll-margin-top: 15px; }
.final-sources p { margin: 4px 0; }
.synthesis-details { margin-top: 24px; font-size: 12px; color: var(--muted); }
.synthesis-details summary { cursor: pointer; margin-bottom: 14px; }
@media (max-width: 900px) { .sidebar { width: 235px; padding-inline: 15px; } .brand { font-size: 15px; } .topbar { padding-inline: 22px; } .example-grid { grid-template-columns: 1fr; gap: 8px; } .example-card { padding: 12px 16px; } .example-card p { margin-top: 5px; } .example-card br { display: none; } .welcome { padding-top: 8px; } }
@media (max-width: 640px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; max-height: 32dvh; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--border); } .sidebar-label, .sidebar-footer { display: none; } .new-chat-form { margin: 8px 0; } .new-chat { padding: 5px 10px; } .history-empty { margin: 0; padding: 0; } .main-panel { min-height: 0; } .topbar { height: 58px; padding-inline: 12px; gap: 7px; } .sidebar-toggle { display: block; } .foundation-badge { font-size: 8px; padding-inline: 7px; } .conversation { padding: 20px 16px; } .composer-wrap { padding: 10px 14px 12px; } .welcome-mark { margin-bottom: 18px; } .example-grid { margin-top: 24px; } .js-enabled .sidebar { display: none; } .js-enabled .sidebar.is-open { display: flex; } }