/* Shared presentation layer. Existing stylesheets continue to own layout.
   Keep historical token aliases here while components migrate to this palette. */
:root,
body.chat-home {
  --ui-white: #ffffff;
  --ui-subtle: #f6f8f9;
  --ui-ink: #182622;
  --ui-muted: #5d6b65;
  --ui-line: #dfe6e2;
  --ui-input-line: #83938b;
  --ui-green: #006b54;
  --ui-green-hover: #005340;
  --ui-burgundy: #81364b;
  --ui-hover: #eff6fc;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: var(--font-sans);
  --bg: var(--ui-white);
  --background: var(--ui-white);
  --canvas: var(--ui-white);
  --panel: var(--ui-white);
  --surface: var(--ui-white);
  --surface-muted: var(--ui-subtle);
  --ink: var(--ui-ink);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --border: var(--ui-line);
  --brand: var(--ui-green);
  --brand-strong: var(--ui-green-hover);
  --accent: var(--ui-green);
  --accent-hover: var(--ui-green-hover);
  --accent-text: var(--ui-green);
  --accent-tint: var(--ui-hover);
  --accent-border: var(--ui-green);
  --soft: var(--ui-hover);
  --green: var(--ui-green);
  --green-deep: var(--ui-green-hover);
  --green-dark: var(--ui-green-hover);
  --green-soft: var(--ui-hover);
  --green-wash: var(--ui-subtle);
  --shadow-soft: none;
  --shadow-float: 0 12px 36px rgb(24 38 34 / 10%);
  --radius: 6px;
}

body,
body.chat-home,
body.ingestion-page {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  letter-spacing: normal;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
button, input, select, textarea { border-radius: 6px; }
button { font-weight: 500; box-shadow: none; }
input, select, textarea { background: var(--surface); border-color: var(--ui-input-line); }
input::placeholder, textarea::placeholder { color: var(--muted); }

:is(button, a, input, select, textarea, summary):focus-visible,
.chat-home :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.primary-action, #homeSendButton { background: var(--green); border-color: var(--green); font-weight: 600; box-shadow: none; }
.primary-action:hover, #homeSendButton:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; transform: none; }
#homeSendButton.stop-action { background: var(--ui-burgundy); border-color: var(--ui-burgundy); }
#homeSendButton.stop-action:hover { background: #66283a; border-color: #66283a; }
.secondary-action { background: var(--surface); color: var(--ink); border-color: var(--ui-input-line); }
.secondary-action:hover { background: var(--ui-hover); }

/* Shared identity and navigation surfaces. */
.chat-sidebar, .chat-sidebar-footer, .admin-sidebar, .right-rail,
.sources-panel { background: var(--surface-muted); }
.brand-beta { border: 0; padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.chat-history h2 { color: var(--muted); border-color: var(--line); font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.chat-history-row, .chat-history-item, .chat-history-edit, .side-nav { border-radius: 5px; }
.chat-history-row.active { background: var(--ui-hover); box-shadow: inset 2px 0 0 var(--green); }
.chat-history-item strong { color: var(--ink); font-weight: 500; }
.chat-history-row:hover, .side-nav:hover, .account-menu-trigger:hover { background: var(--ui-hover); }
.chat-sidebar-footer, .admin-nav { border-color: var(--line); }
.account-menu, .mobile-chat-topbar, .topbar, .mp-profile-head { background: var(--surface); }
.topbar { box-shadow: none; }
.admin-nav p, .admin-sidebar-label { color: var(--muted); }
.data-freshness { background: var(--surface); border-color: var(--line); border-radius: 6px; }

/* Authentication keeps its boundary, with no canvas ornament or heavy shadow. */
.auth-screen { background: var(--surface); }
.auth-screen::before { display: none; }
.auth-panel { background: var(--surface); border-color: var(--line); border-radius: 8px; box-shadow: none; }
.auth-intro h2 { font-size: clamp(26px, 4vw, 32px); line-height: 1.2; }
.auth-tabs { border-radius: 6px; background: var(--surface-muted); }
.auth-tabs button.active { background: var(--surface); color: var(--green); box-shadow: none; }
.auth-form label { font-weight: 500; letter-spacing: normal; text-transform: none; }
.auth-form .primary-action { font-weight: 600; }

.auth-verification-actions .secondary-action { width: 100%; min-height: 44px; }

/* Home: the same two sections, expressed as headings and rows. */
.home-landing-intro h1, .home-empty h2 { font-size: clamp(28px, 4vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.home-landing-eyebrow, .home-panel-heading p { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.home-landing-grid { column-gap: 32px; row-gap: 24px; }
.home-suggestion-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.home-panel-heading h2 { color: var(--ink); font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.home-landing .research-suggestions-track { gap: 0; }
.home-landing .research-suggestion {
  --suggestion-outset: 12px;
  position: relative;
  width: calc(100% + 2 * var(--suggestion-outset));
  margin-inline: calc(0px - var(--suggestion-outset));
  min-height: 74px;
  padding: 16px calc(4px + var(--suggestion-outset));
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  box-shadow: none;
}
.home-landing .research-suggestion::after { content: ''; position: absolute; bottom: -1px; left: var(--suggestion-outset); right: var(--suggestion-outset); border-bottom: 1px solid var(--line); pointer-events: none; }
.home-landing .research-suggestion:hover,
.home-landing .research-suggestion:focus-visible { background: var(--ui-hover); box-shadow: none; }
.home-landing .research-suggestion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-landing .research-suggestion small { color: var(--ui-burgundy); font-size: 11px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.research-suggestion-arrow { color: var(--green); }
.research-suggestion:hover .research-suggestion-arrow { transform: none; }

/* Briefing uses the same flat records and smaller, readable metadata. */
.briefing-home-compact { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.briefing-compact-heading h2 { color: var(--ink); font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.briefing-compact-heading p, .briefing-eyebrow { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.briefing-compact-intro, .briefing-compact-date { color: var(--muted); font-size: 12px; line-height: 1.5; }
.briefing-periods { background: var(--surface-muted); border-color: var(--line); border-radius: 5px; }
.briefing-periods button, .briefing-compact-heading .briefing-periods button { font-size: 12px; font-weight: 500; color: var(--muted); border-radius: 4px; }
.briefing-periods button[aria-pressed="true"] { color: var(--green); background: var(--surface); box-shadow: none; }
.briefing-periods button:hover { background: var(--ui-hover); }
.briefing-compact-cards { gap: 0; }
.briefing-compact-card { padding: 16px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.briefing-compact-card > p, .briefing-card-meta { color: var(--ui-burgundy); font-size: 11px; font-weight: 500; }
.briefing-compact-card h3 { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
.briefing-compact-card > span, .briefing-card > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.briefing-compact-card button, .briefing-compact-card a { color: var(--green); font-size: 12px; font-weight: 500; }
.briefing-compact-card button:hover { color: var(--green-deep); background: transparent; }
.briefing-compact-empty { border: 0; border-top: 1px solid var(--line); border-radius: 0; text-align: left; }
.briefing-compact-empty span { color: var(--muted); font-size: 12px; }
.briefing-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: none; }
.briefing-card h3 a { color: var(--ink); }
.briefing-card-meta span:first-child { color: var(--ui-burgundy); }
.briefing-dateline, .briefing-count, .briefing-chat-hint, .briefing-method,
.briefing-card details { color: var(--muted); border-color: var(--line); }
.briefing-toolbar button, .briefing-toolbar input { border-color: var(--ui-input-line); background: var(--surface); color: var(--ink); }
.briefing-toolbar button[aria-pressed="true"], .briefing-question button { background: var(--green); color: #fff; }
.briefing-question textarea { border-color: var(--ui-input-line); color: var(--ink); background: var(--surface); }
.home-briefing :is(a, button, summary, textarea):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Reading surfaces stay white. Green belongs to actions and references. */
.home-bubble { font-size: 16px; line-height: 1.7; }
.home-message.user .home-bubble { background: var(--surface-muted); font-weight: 500; border-radius: 6px; }
.home-answer-section h2 { color: var(--ink); font-size: 21px; font-weight: 600; line-height: 1.35; }
.home-answer-section h3, .home-answer-section.markdown-section-h3 h3 { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; text-transform: none; }
.home-citation { color: var(--green); }
.home-composer { background: linear-gradient(to top, var(--canvas) 75%, rgb(255 255 255 / 0%)); }
.home-input-row { border-color: var(--ui-input-line); border-radius: 8px; background: var(--surface); box-shadow: none; }
.home-input-row:focus-within { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.research-scope-panel, .model-suite-menu, .mode-model-tooltip,
.freshness-dialog, .output-mode-menu { background: var(--surface); border-color: var(--line); border-radius: 8px; box-shadow: var(--shadow-float); }
.research-scope-chip { background: var(--ui-hover); border-color: var(--line); color: var(--green); }
.research-scope-button.active, .research-scope-button:hover,
.research-scope-button[aria-expanded="true"] { background: var(--ui-hover) !important; border-color: var(--line) !important; }
.model-suite-button { background: var(--surface-muted) !important; }
.model-suite-button:hover, .model-suite-option:hover,
.model-suite-option.selected { background: var(--ui-hover) !important; }

/* Sources and profiles: boundaries between records, not cards within cards. */
.sources-head h2 { font-size: 19px; font-weight: 600; color: var(--ink); }
.home-source-card, .mentioned-mp-card { background: var(--surface); border-color: var(--line); border-radius: 6px; box-shadow: none; }
.home-source-card:hover, .mentioned-mp-card:hover { background: var(--ui-hover); border-color: var(--line); box-shadow: none; transform: none; }
.home-source-card.selected, .mentioned-mp-card.selected { background: var(--ui-hover); box-shadow: inset 0 0 0 1px var(--green); }
.source-card-kicker strong, .source-record-title { color: var(--ink); }
.mp-profile-panel { background: var(--surface); }
.mp-profile-card h3 { font-size: 22px; font-weight: 600; line-height: 1.25; }
.mp-profile-head > div > span, .profile-section-heading > span { color: var(--ui-burgundy); font-size: 11px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.profile-section, .profile-disclosure { padding-inline: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.mp-profile-content .profile-section h4, .mp-profile-content .profile-disclosure h4 { color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.profile-stat-grid { border-color: var(--line); border-radius: 4px; background: var(--line); }
.profile-stat-grid > div { background: var(--surface); }
.profile-stat-grid strong { color: var(--ink); font-size: 21px; font-weight: 600; }
.profile-stat-grid span, .profile-list-item span, .profile-method-note, .profile-coverage-note { font-size: 11px; color: var(--muted); }
.profile-list { gap: 0; }
.profile-list-item { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.profile-list-item strong { font-size: 13px; }
.profile-list-item p, .profile-topic p, .profile-fact-list span { font-size: 12px; color: var(--muted); }
a.profile-list-item:hover { background: var(--ui-hover); border-color: var(--line); }
.profile-coverage-note { border: 0; border-left: 2px solid var(--line); border-radius: 0; background: transparent; }
.profile-status, .profile-status.current { background: var(--surface-muted); color: var(--green); font-size: 10px; font-weight: 500; }
.profile-disclosure summary { color: var(--ink); font-size: 13px; font-weight: 600; }

/* Artifacts and tables keep functional boundaries; their colour is neutral. */
.message-artifact-card, .live-artifact-card, .answer-table-wrap,
.artifact-workbench-header, .artifact-workbench-toolbar, .artifact-workbench-footer,
.artifact-row-drawer { background: var(--surface); border-color: var(--line); box-shadow: none; }
.message-artifact-card, .live-artifact-card, .answer-table-wrap { border-radius: 6px; }
.artifact-preview-header, .live-artifact-header, .live-artifact-footer,
.artifact-preview-footer, .live-chart-renderer, .artifact-workbench { background: var(--surface); }
.answer-table th, .live-artifact-table th { background: var(--surface-muted); color: var(--ink); font-weight: 600; }
.answer-table td, .answer-table th, .live-artifact-table td, .live-artifact-table th { border-color: var(--line); }
.answer-table tbody tr:nth-child(even) { background: var(--surface); }
.answer-table tbody tr:hover, .live-artifact-table tbody tr:hover { background: var(--ui-hover); }
.answer-table td:first-child { color: var(--ink); font-weight: 500; }
.artifact-row-drawer { box-shadow: var(--shadow-float); }

/* Settings, administration, ingestion and legacy share the visual language.
   Navigation and form structure are unchanged. */
.account-settings-header h1 { font-size: clamp(28px, 4vw, 36px); font-weight: 600; }
.account-section-heading h2, .admin-intro h2 { font-size: 24px; font-weight: 600; }
.account-card, .account-usage-metrics article, .output-style-preview,
.export-plan-preview, .setting-grid .setting, .prompt-editor,
.operation-card, .storage-meter, .tester-access, .tester-share,
.ingestion-feed, .panel, .metric { background: var(--surface); border-color: var(--line); border-radius: 6px; box-shadow: none; }
.account-detail-list div, .account-usage-metrics strong { background: var(--surface); color: var(--ink); }
.account-settings-nav .account-developer-link { display: block; padding: 10px 12px; color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; border-radius: 6px; }
.account-settings-nav .account-developer-link:hover { background: var(--ui-hover); color: var(--green); }
@media (max-width: 760px) {
  .account-settings-nav .account-developer-link { grid-column: 1 / -1; border-top: 1px solid var(--ui-line); }
}
.account-settings-nav button, .admin-sections a { border: 1px solid transparent; border-radius: 5px; font-weight: 400; }
.account-settings-nav button.active, .admin-sections a[aria-current="page"] { border-color: var(--ui-input-line); background: var(--surface); color: var(--green); font-weight: 500; box-shadow: none; }
.account-settings-nav button:hover, .admin-sections a:hover,
.admin-back-link:hover, .operation-card:hover { background: var(--ui-hover); }
.admin-sections a, .admin-back-link { font-weight: 500; }
.admin-panel { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 6px !important; box-shadow: none; }
.prompt-editor { background: var(--surface-muted); }
.access-toggle { background: var(--surface-muted) !important; border-color: var(--line) !important; border-radius: 6px !important; }
.ingestion-page { --ingestion: var(--green); }
.ingestion-note { background: var(--surface-muted); color: var(--ink); border-color: var(--line); border-left-color: var(--green); border-radius: 4px; }
.feed-state, .account-status-badge { background: var(--surface-muted); color: var(--green); font-weight: 500; }
.progress-track { background: var(--surface-muted); }
.metric strong, .account-usage-metrics strong { color: var(--ink); font-weight: 600; }
.toolbar { background: var(--surface-muted); }
.export-suggestion-card { border-color: var(--line); border-radius: 6px; background: var(--surface); box-shadow: none; }
.export-suggestion-card:hover { background: var(--ui-hover); border-color: var(--line); }
.export-suggestion-card.selected, .export-suggestion-selection { background: var(--ui-hover); border-color: var(--green); box-shadow: none; }
.export-format-picker input:checked + span { background: var(--ui-hover); }
.export-format-picker input:focus-visible + span { outline-color: var(--green); }
.export-suggestion-card > strong, .export-suggestion-selection strong { font-weight: 600; }
.export-suggestion-tags b, .export-suggestion-tags em { background: var(--surface-muted); color: var(--muted); font-size: 10px; font-weight: 500; }

@media (max-width: 768px) {
  .chat-sidebar { background: var(--surface-muted); box-shadow: none; }
  .chat-sidebar.open { box-shadow: 12px 0 30px rgb(24 38 34 / 10%); }
  .home-landing-grid { row-gap: 28px; }
  .home-landing-intro h1, .home-empty h2 { font-size: 30px; }
  .home-landing .research-suggestion { padding: 14px calc(4px + var(--suggestion-outset)); }
  .mobile-chat-topbar { background: var(--surface); }
  .mp-profile-panel { background: var(--surface); border-radius: 0; box-shadow: none; }
  .account-settings-nav button.active { background: var(--surface); }
}

/* Reading room identity and selected component treatments. */
.chat-sidebar .chat-brand { justify-items: start; padding-inline: 10px; gap: 0; }
.chat-sidebar .chat-brand .brand-home-button { justify-items: start; }
.brand-wordmark, .brand-compact { color: var(--ui-ink); font-family: Georgia, serif; font-size: 27px; font-weight: 400; letter-spacing: -.045em; line-height: 1.2; font-style: normal; }
.brand-wordmark { display: inline-block; white-space: nowrap; }
@media(min-width:769px) {
  .chat-sidebar { padding-top: 14px; }
  .chat-sidebar .chat-brand { padding: 4px 10px; }
  .chat-sidebar .chat-brand .brand-wordmark { font-size: 44px; }
}
.chat-sidebar .chat-brand .brand-wordmark, .admin-sidebar .brand-wordmark,
.topbar .brand-wordmark, .auth-brand .brand-wordmark { width: auto; }
.brand-compact { display: grid; place-items: center; width: 32px; height: 32px; }
/* New account actions reuse the New chat control instead of a separate treatment. */
#newChatButton, .desk-action { display: flex; align-items: center; justify-content: flex-start; line-height: 20px; min-height: 44px; gap: 10px; padding: 10px 12px; border: 1px solid var(--ui-input-line); border-radius: 5px; background: var(--surface); color: var(--green); font-size: 13px; font-weight: 500; box-shadow: none; text-decoration: none; }
#newChatButton:hover, .desk-action:hover { background: var(--ui-hover); border-color: var(--green); color: var(--green); transform: none; }
.desk-action:is(.hidden, [hidden]) { display: none; }

/* The desk floats above the conversation; only its writing surface is opaque. */
.chat-shell { height: var(--chat-viewport-height, 100dvh); max-height: var(--chat-viewport-height, 100dvh); }
.chat-main { grid-template-rows: minmax(0, 1fr); height: 100%; }
.home-chat-thread { grid-row: 1; padding-bottom: calc(var(--composer-space, 125px) + 24px); }
.home-composer { position: absolute; grid-row: auto; left: 50%; right: auto; bottom: 0; width: min(800px, calc(100% - 64px)); transform: translateX(-50%); padding: 0; background: transparent; }
.home-input-row { padding: 12px 16px 14px; border: 1px solid var(--ui-input-line); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--surface); box-shadow: none; }
.home-input-row:focus-within { border-color: var(--ui-input-line); box-shadow: none; outline: none; }
.home-input-row textarea { height: 52px; min-height: 52px; padding: 8px 4px; border-radius: 0; font-size: 16px; line-height: 1.4; overflow-y: hidden; scrollbar-width: thin; }
.composer-toolbar { padding-top: 6px; }
:is(#homeSendButton, .composer-send-button) { min-height: 40px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--green); font-size: 13px; font-weight: 500; }
:is(#homeSendButton, .composer-send-button):hover { background: var(--ui-hover); border: 0; color: var(--green); transform: none; }
:is(#homeSendButton, .composer-send-button).stop-action { background: var(--ui-burgundy); color: #fff; }
:is(#homeSendButton, .composer-send-button).stop-action:hover { background: #66283a; color: #fff; }
#researchScopeButton { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px !important; padding: 8px !important; border-radius: 4px !important; font-weight: 400 !important; }
#researchScopeButton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#researchScopeButton.active::after { content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* Simple account list; identity belongs in the popup, with only a name below. */
.account-menu { border-radius: 6px; gap: 2px; }
.account-menu.open { padding: 8px; box-shadow: 0 8px 24px rgb(24 38 34 / 10%); }
.account-menu-identity { display: grid; gap: 4px; min-width: 0; padding: 8px 10px 14px; }
.account-menu-identity strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.account-menu-identity > span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.account-menu .side-nav { min-height: 40px; padding: 10px; border-radius: 4px; font-size: 13px; font-weight: 400; }
.account-menu .data-freshness { gap: 3px; min-height: 44px; margin: 0; padding: 10px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); }
.account-menu .data-freshness strong { color: var(--ink); font-size: 13px; font-weight: 400; }
.account-menu .data-freshness > span { font-size: 11px; line-height: 1.5; }
.account-menu .data-freshness:hover { background: var(--ui-hover); color: var(--muted); transform: none; }
.account-menu .data-freshness.error > span { color: var(--ui-burgundy); }
.account-menu .admin-nav { gap: 0; margin: 5px 0; padding-top: 8px; }
.account-menu .admin-nav p { margin: 0; padding: 0 10px 4px; font-size: 11px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.account-menu :is(.side-nav, .data-freshness):focus-visible { outline: 0; background: var(--ui-hover); box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.account-credit { padding: 8px 10px; font-size: 11px; color: var(--muted); }
.account-menu-trigger { gap: 10px; border-radius: 5px; }
.account-avatar { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #e8eeeb; color: var(--ink); font-size: 11px; font-weight: 500; }
.account-menu-trigger .account-chip-details { flex: 1; max-width: none; }
.account-menu-trigger .account-chip-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }

@media (max-width: 768px) {
  .home-landing .research-suggestion { --suggestion-outset: 8px; }
  .chat-shell { position: fixed; top: var(--chat-viewport-offset-top, 0px); right: 0; left: 0; }
  .mobile-chat-topbar #openDrawerButton { display: grid; place-items: center; width: 40px; height: 40px; padding: 4px; border-color: transparent; background: transparent; }
  .chat-main { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .mobile-chat-topbar { grid-row: 1; }
  .home-chat-thread { grid-row: 2; padding-bottom: calc(var(--composer-space, 118px) + 18px); }
  .home-composer { width: calc(100% - 24px); padding: 0; }
  .home-input-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px max(12px, env(safe-area-inset-bottom, 0px)); border: 1px solid var(--ui-input-line); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--surface); }
  .home-input-row:focus-within { border-color: var(--ui-input-line); box-shadow: none; }
  .home-input-row textarea { width: 100%; height: 44px; min-height: 44px; padding: 8px 4px; font-size: 16px; line-height: 1.4; }
  .research-scope-summary { padding: 4px 2px 8px; }
  .composer-toolbar { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
  .composer-toolbar-spacer { display: block; flex: 1; }
  #researchScopeButton { width: 44px; height: 44px; min-height: 44px !important; border-radius: 50% !important; }
  :is(#homeSendButton, .composer-send-button) { position: relative; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0; background: var(--green); color: #fff; border-radius: 50%; }
  :is(#homeSendButton, .composer-send-button)::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; pointer-events: none; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5m-6 6 6-6 6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  :is(#homeSendButton, .composer-send-button):hover { background: var(--green-deep); color: #fff; }
  :is(#homeSendButton, .composer-send-button).stop-action { background: var(--ui-burgundy); }
  :is(#homeSendButton, .composer-send-button).stop-action::after { width: 12px; height: 12px; border-radius: 2px; mask: none; }
  .research-scope-panel { left: -4px; width: min(390px, calc(100vw - 40px)); max-height: calc(var(--chat-viewport-height, 100dvh) - 170px); overflow-y: auto; }

}
.account-menu-trigger.account-chip { display: flex; }
.account-chip .account-avatar { color: var(--ink); font-size: 11px; }

#newChatButton .new-chat-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#newChatButton > span { display: block; }

/* Selected history treatment: a boundary for the current chat, open rows around it. */
.chat-sidebar { display: flex; flex-direction: column; gap: 0; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.chat-sidebar > :not(.chat-history) { flex-shrink: 0; }
.chat-sidebar > .chat-brand, .chat-sidebar > #newChatButton, .chat-sidebar > #testerAccess { margin-bottom: 14px; }
.chat-history { flex: 1; gap: 0; overflow: visible; }
.chat-sidebar-footer { position: relative; inset: auto; border-top: 0; }
.chat-sidebar-footer::before { content: ''; position: absolute; top: 0; left: -18px; right: -18px; border-top: 1px solid var(--line); pointer-events: none; }
.chat-history h2 { position: relative; min-height: 18px; margin: 10px 0 0; padding: 0 10px 12px; border: 0; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-transform: none; }
.chat-history h2::after { content: ''; position: absolute; bottom: 0; left: -18px; right: -18px; border-bottom: 1px solid var(--line); pointer-events: none; }
.chat-history-list { gap: 4px; padding: 8px 18px; margin: 0 -18px; }
.chat-history-row { position: relative; grid-template-columns: minmax(0,1fr) 44px; border: 1px solid transparent; border-radius: 5px; }
.chat-history-row.active { border-color: var(--ui-input-line); background: var(--surface); box-shadow: none; }
.chat-history-row.active:hover { background: var(--surface); }
.chat-history-row.history-row-moving { min-height: 0; overflow: hidden; transform-origin: top center; }
.chat-history-item { display: block; min-height: 62px; padding: 10px 0 10px 10px; border-radius: 4px; }
.chat-history-item strong { display: block; font-size: 13px; font-weight: 400; line-height: 1.5; }
.chat-history-row.active .chat-history-item strong { color: var(--green); font-weight: 500; }
.chat-history-item span, .chat-history-edit span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.chat-history-more { position: relative; display: grid; place-items: center; justify-self: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); opacity: 0; }
.chat-history-more::before { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 4px; background: transparent; pointer-events: none; }
.chat-history-more svg { position: relative; display: block; width: 16px; height: 16px; fill: currentColor; }
.chat-history-row:is(:hover,:focus-within,.active) .chat-history-more { opacity: 1; }
.chat-history-more:is(:hover,:focus-visible,[aria-expanded="true"]) { background: transparent; color: var(--ink); opacity: 1; }
.chat-history-more:is(:hover,:focus-visible,[aria-expanded="true"])::before { background: rgb(24 38 34 / 7%); }
.chat-home .chat-history-more:focus-visible { outline: 0; box-shadow: none; }
.chat-history-more:focus-visible::before { outline: 1px solid var(--ui-input-line); outline-offset: 1px; }
.chat-history-actions { position: fixed; inset: auto; z-index: 100; width: 176px; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 22px rgb(24 38 34 / 10%); }
.chat-history-actions[hidden] { display: none; }
.chat-history-actions button { display: block; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--ink); text-align: left; font-size: 12px; font-weight: 400; }
.chat-history-actions button:hover { background: var(--ui-hover); }
.chat-history-actions .chat-history-delete { color: var(--ui-burgundy); }
.chat-history-edit { grid-column: 1 / -1; padding: 10px; }
.chat-title-input { min-height: 40px; font-size: 13px; font-weight: 400; }
@media(max-width:768px), (hover:none), (pointer:coarse) { .chat-history-row { grid-template-columns: minmax(0,1fr) 52px; } .chat-history-more { width: 44px; height: 44px; min-height: 44px; opacity: 1; } }
@media(max-width:768px) { .chat-title-input { font-size: 16px; } }

/* A restrained upper shadow separates overlapping content, without a focus halo. */
.home-composer.is-overlapping .home-input-row { box-shadow: 0 -9px 20px -13px rgb(24 38 34 / 26%); }

/* A bounded writing viewport; the complete padded draft scrolls inside it. */
.home-input-row, .monitoring-setup-composer {
  --desk-side-inset: 12px;
  --desk-text-inset: 15px;
  --desk-control-height: 40px;
  --desk-row-min: calc(22.4px + 2 * var(--desk-text-inset));
  --desk-control-inset: calc((var(--desk-row-min) - var(--desk-control-height)) / 2);
  padding: 0 var(--desk-side-inset);
}
.composer-writing-area {
  width: calc(100% + 2 * var(--desk-side-inset));
  margin-inline: calc(0px - var(--desk-side-inset));
  min-height: var(--desk-row-min);
  max-height: var(--desk-writing-limit, 480px);
  padding-block: var(--desk-text-inset);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: var(--desk-text-inset);
  scrollbar-width: thin;
  border-radius: 4px 4px 0 0;
}
.home-input-row .composer-writing-area textarea {
  display: block;
  width: 100%;
  height: auto;
  min-height: 1.4em;
  margin: 0;
  padding: 0 calc(var(--desk-side-inset) + 3px);
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.composer-toolbar { position: relative; align-items: center; width: calc(100% + 2 * var(--desk-side-inset)); margin-inline: calc(0px - var(--desk-side-inset)); min-height: var(--desk-row-min); padding: var(--desk-control-inset); background: var(--surface); }
.composer-toolbar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--ui-input-line); pointer-events: none; }
@media(max-width:768px) {
  .home-input-row, .monitoring-setup-composer { --desk-side-inset: 9px; --desk-text-inset: 13px; --desk-control-height: 44px; }
  .composer-toolbar { padding-bottom: max(var(--desk-control-inset), env(safe-area-inset-bottom, 0px)); }
}
.freshness-coverage-link { margin: 0 20px 20px; justify-content: center; }
.auth-coverage-link { justify-self: center; align-self: center; }