.research-workspace { position: relative; display: flex; height: 100%; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: var(--color-ground); color: var(--color-text-primary); } .research-header { display: flex; min-height: 50px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; border-bottom: var(--edge-width) solid var(--color-edge); } .research-back-link { min-width: 0; overflow: hidden; border-radius: var(--radius-sm); padding: 5px 7px; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-tertiary); text-overflow: ellipsis; white-space: nowrap; } .research-back-link:hover { background: var(--color-hover); color: var(--color-text-primary); } .research-connection { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--color-text-quaternary); } .research-connection > span { width: 7px; height: 7px; border-radius: 9999px; background: var(--color-warning); } .research-connection[data-status="connected"] > span { background: var(--color-success); } .research-connection[data-status="denied"] > span, .research-connection[data-status="deleted"] > span, .research-connection[data-status="closed"] > span { background: var(--color-destructive); } .research-scroll { min-width: 0; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; } .research-layout { display: grid; width: min(100%, 1440px); min-width: 0; margin: 0 auto; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr); align-items: start; gap: 20px; padding: 28px clamp(20px, 4vw, 56px) 64px; } .research-primary, .research-thread { min-width: 0; } .research-title-block { margin-bottom: 20px; } .research-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-ink); } .research-title-block h1 { max-width: 850px; margin-top: 5px; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; overflow-wrap: anywhere; } .research-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: var(--text-sm); color: var(--color-text-quaternary); } .research-meta span { position: relative; } .research-meta span + span::before { position: absolute; left: -9px; content: "/"; color: var(--color-text-quaternary); } .research-confirmed-query { margin-top: 18px; border-left: 2px solid var(--color-brand); padding: 2px 0 2px 12px; } .research-confirmed-query > span { font-size: 0.6875rem; font-weight: 600; color: var(--color-text-quaternary); } .research-confirmed-query p { margin-top: 2px; font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; } .research-report, .research-draft, .research-report-pending, .research-thread { border: var(--edge-width) solid var(--color-edge); border-radius: var(--radius-xl); background: var(--color-page); box-shadow: var(--shadow-resting); } .research-report, .research-draft, .research-report-pending { padding: clamp(20px, 4vw, 38px); } .research-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; } .research-section-heading h2, .research-draft h2, .research-report-pending h2 { margin-top: 4px; font-size: var(--text-xl); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } .research-report-summary { margin-top: 24px; font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-secondary); overflow-wrap: anywhere; white-space: pre-wrap; } .research-report section { margin-top: 32px; } .research-report h3 { margin-bottom: 12px; font-size: var(--text-lg); font-weight: 600; } .research-findings { display: flex; flex-direction: column; gap: 16px; counter-reset: findings; } .research-findings > li { position: relative; padding-left: 26px; font-size: var(--text-base); line-height: 1.6; white-space: pre-wrap; counter-increment: findings; } .research-findings > li::before { position: absolute; left: 0; font-weight: 600; color: var(--color-brand-ink); content: counter(findings) "."; } .research-citations { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 5px; vertical-align: baseline; } .research-citation { display: inline-flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-brand-wash); font-size: 0.6875rem; font-weight: 700; color: var(--color-brand-ink); } .research-citation:hover, .research-source-link:hover { color: var(--color-brand-hover); text-decoration: underline; } .research-caveats { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-secondary); list-style: square; } .research-caveats li, .research-provenance-note, .research-disclosure, .research-disabled-reason { overflow-wrap: anywhere; } .research-sources { display: flex; flex-direction: column; gap: 7px; } .research-sources li { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: var(--text-sm); color: var(--color-text-quaternary); } .research-source-link { min-width: 0; overflow-wrap: anywhere; color: var(--color-brand-ink); } .research-empty { font-size: var(--text-sm); color: var(--color-text-quaternary); } .research-provenance-note { margin-top: 34px; border-top: var(--edge-width) solid var(--color-edge); padding-top: 15px; font-size: 0.75rem; line-height: 1.5; color: var(--color-text-quaternary); } .research-draft label, .research-composer > label { display: block; margin-top: 22px; font-size: var(--text-sm); font-weight: 600; } .research-draft textarea, .research-composer textarea { display: block; width: 100%; min-height: 116px; margin-top: 8px; resize: vertical; padding: 12px; font-size: var(--text-sm); line-height: 1.5; } .research-disclosure, .research-disabled-reason { margin-top: 9px; font-size: 0.75rem; line-height: 1.45; color: var(--color-text-quaternary); } .research-disabled-reason { color: var(--color-warning-ink); } .research-draft > .btn { margin-top: 18px; } .research-error { margin-top: 10px; font-size: var(--text-sm); line-height: 1.45; color: var(--color-destructive-ink); } .research-job-status { margin-top: 18px; border-radius: var(--radius-md); background: var(--color-inset); padding: 12px; color: var(--color-text-secondary); } .research-job-status[data-state="failed"], .research-job-status[data-state="cancelled"] { background: var(--color-destructive-wash); color: var(--color-destructive-ink); } .research-progress-list { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } .research-progress-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; color: var(--color-text-quaternary); } .research-thread { position: sticky; top: 20px; max-height: calc(100dvh - 90px); overflow: auto; padding: 20px; } .research-turn-count { flex: 0 0 auto; border-radius: 9999px; background: var(--color-gray-200); padding: 3px 8px; font-size: 0.6875rem; color: var(--color-text-quaternary); } .research-empty-thread { margin-top: 20px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-quaternary); } .research-turns { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .research-turn { min-width: 0; border: var(--edge-width) solid var(--color-edge); border-radius: var(--radius-lg); padding: 14px; } .research-turn > header { display: flex; justify-content: space-between; gap: 10px; font-size: 0.6875rem; font-weight: 600; color: var(--color-text-quaternary); } .research-turn-author { margin-top: 10px; font-size: 0.6875rem; font-weight: 600; color: var(--color-brand-ink); } .research-turn-question, .research-turn-answer { margin-top: 4px; font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; } .research-turn-answer { margin-top: 12px; border-left: 2px solid var(--color-gray-300); padding-left: 12px; color: var(--color-text-secondary); } .research-turn-answer .research-citations { margin-top: 8px; margin-left: 0; } .research-composer { margin-top: 22px; border-top: var(--edge-width) solid var(--color-edge); padding-top: 4px; } .research-composer-actions { display: flex; align-items: start; gap: 10px; margin-top: 16px; } .research-search-more { min-width: 0; flex: 1; } .research-search-more .research-disclosure { margin-top: 6px; } .research-refresh-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; border-radius: var(--radius-md); background: var(--color-destructive-wash); padding: 10px 12px; font-size: var(--text-sm); color: var(--color-destructive-ink); } .research-cancel-error { position: absolute; right: 16px; bottom: 16px; left: 16px; z-index: 5; border-radius: var(--radius-md); background: var(--color-destructive-wash); padding: 10px 12px; font-size: var(--text-sm); color: var(--color-destructive-ink); box-shadow: var(--shadow-raised); } .research-route-state { display: grid; height: 100%; place-items: center; background: var(--color-ground); padding: 20px; font-size: var(--text-sm); color: var(--color-text-tertiary); } .research-route-failure { width: min(100%, 440px); border-radius: var(--radius-lg); background: var(--color-page); padding: 24px; box-shadow: var(--shadow-resting); } .research-route-failure h1 { font-size: var(--text-xl); font-weight: 600; } .research-route-alert { margin: 8px 0 20px; } @media (max-width: 1199px) { .research-layout { display: block; padding: 22px 16px 56px; } .research-thread { position: static; max-height: none; overflow: visible; margin-top: 18px; } } @media (max-width: 639px) { .research-header { min-height: calc(48px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); } .research-layout { padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: calc(48px + env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); } .research-report, .research-draft, .research-report-pending, .research-thread { border-radius: var(--radius-lg); padding: 18px; } .research-section-heading { flex-direction: column; gap: 5px; } .research-meta { flex-direction: column; gap: 3px; } .research-meta span + span::before { display: none; } .research-composer-actions { flex-direction: column; } .research-composer-actions > button, .research-search-more, .research-search-more > button { width: 100%; } .research-refresh-error { align-items: start; flex-direction: column; } } :root[data-plan-coarse-pointer] .research-workspace :where(button, .research-control) { min-width: 44px; min-height: 44px; }