/* Shared web / desktop surfaces. The graph lives behind the glass; research stays legible. */
:root {
  --pane-fill: rgb(252 253 253 / .86);
  --pane-card: rgb(255 255 255 / .56);
  --pane-inset: rgb(42 47 54 / .035);
  --pane-hover: rgb(255 255 255 / .8);
  --pane-line: rgb(38 44 51 / .12);
  --pane-rim: rgb(255 255 255 / .88);
  --pane-shadow: 0 24px 70px -28px rgb(24 31 40 / .28);
  --pane-ease: cubic-bezier(.2, .75, .25, 1);
}

.theme-dark {
  --pane-fill: rgb(9 10 12 / .86);
  --pane-card: rgb(10 11 13 / .55);
  --pane-inset: rgb(255 255 255 / .032);
  --pane-hover: rgb(255 255 255 / .065);
  --pane-line: rgb(255 255 255 / .13);
  --pane-rim: rgb(255 255 255 / .11);
  --pane-shadow: 0 26px 90px -26px rgb(0 0 0 / .65);
}

/* One substantial sheet, with quieter sections inside it instead of nested glass boxes. */
.panel,
.theme-dark:not(.reduce-glass) .panel,
body:not(.theme-dark):not(.reduce-glass) .panel {
  padding: 28px;
  border: 1px solid var(--pane-line);
  border-radius: 28px;
  background: linear-gradient(145deg, var(--pane-inset), transparent 42%), var(--pane-fill);
  box-shadow: inset 0 1px 0 var(--pane-rim), var(--pane-shadow);
  backdrop-filter: blur(26px) saturate(115%);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
  scrollbar-width: thin;
  scrollbar-color: var(--pane-line) transparent;
  overscroll-behavior: contain;
}

.panel[open] { animation: panel-settle .24s var(--pane-ease) both; }
.panel::backdrop,
.theme-dark:not(.reduce-glass) .panel::backdrop {
  background: rgb(0 0 0 / .26);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.panel-head { align-items: flex-start; gap: 20px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--pane-line); }
.panel-head > div { min-width: 0; }
.panel-head h2 { line-height: 1.18; overflow-wrap: anywhere; }
.panel-head .icon-button { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--pane-inset); color: var(--muted); }
.panel-head .icon-button:hover { background: var(--pane-hover); color: var(--text); }
.panel p { line-height: 1.8; }
.panel-button { border-color: var(--pane-line); border-radius: 15px; padding: 14px 16px; margin: 9px 0; background: var(--pane-inset); box-shadow: none; transition: background-color .2s, border-color .2s; }
.panel-button:hover { background: var(--pane-hover); border-color: color-mix(in srgb, var(--pane-line), var(--text) 12%); }
.panel-button:active { background: var(--pane-inset); }
.panel-button strong { line-height: 1.5; }
.panel-button small { margin-top: 5px; }
.research-choice > svg { opacity: .65; }
.capability-group, .library-readiness, .notebook-message, .setting-row { border-color: var(--pane-line); }
.capability-group, .library-readiness { padding-block: 18px; }
.capability-group > summary, .library-readiness > summary, .notebook-snapshot > summary { line-height: 1.6; }
.chat-detail { gap: 9px; }
.chat-detail strong { max-width: 100%; }

/* Controls belong to the sheet. A focused input should be easier to find than its border. */
.panel input[type=search],
.panel input[type=password],
.panel input[type=text],
.panel .field textarea,
.workbench-field input,
.workbench-field select,
.workbench-field textarea,
.workbench-column-row input,
.workbench-column-row select,
.workbench-json,
.library-controls select {
  border: 1px solid var(--pane-line);
  border-radius: 12px;
  background: var(--pane-inset);
  color: var(--text);
  box-shadow: none;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.panel input[type=text], .panel input[type=search], .panel input[type=password] { margin-top: 8px; }
.panel input:focus-visible,
.panel select:focus-visible,
.panel textarea:focus-visible {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange), transparent 88%);
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
/* The base textarea reset uses !important; restore a visible keyboard focus here. */
.panel textarea:focus-visible { outline: 2px solid var(--orange) !important; }
.workbench-grid { gap: 20px 24px; }
.workbench-step { margin-top: 28px; padding-top: 22px; }
.workbench-status { border-radius: 0 11px 11px 0; background: var(--pane-inset); padding: 13px 15px; }
.workbench-review, .research-plans .workbench-review { background: var(--pane-inset); border-color: color-mix(in srgb, var(--orange), transparent 68%); border-radius: 18px; padding: 22px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.workbench-upload, .workbench-features { background: transparent; border-color: var(--pane-line); border-radius: 14px; padding: 15px 16px; }
.workbench-preview, .workbench-step, .workbench-table td, .workbench-table th { border-color: var(--pane-line); }
.workbench-preview > summary, .workbench-upload > summary { padding-block: 8px; }
.workbench-button, .workbench-primary, .primary-button { border-radius: 11px; transition: background-color .18s, border-color .18s; }
.workbench-button { background: var(--pane-inset); border-color: var(--pane-line); }
.workbench-primary { background: color-mix(in srgb, var(--orange), transparent 91%); }
.workbench-actions { gap: 10px; align-items: center; }
.plan-page-list .workbench-check { padding: 10px 0; border-bottom: 1px solid var(--pane-line); }
.plan-page-list .workbench-check:last-child { border-bottom: 0; }
.notebook-actions .panel-button { margin: 0; border-radius: 11px; }
.notebook-message { padding-block: 23px; }
.source-page-viewport { border-radius: 14px; }
.source-zoom-controls button { background: var(--pane-inset); border-radius: 9px; }

/* The navigation is a quiet edge of the workspace, not a second focal point. */
.rail,
.theme-dark:not(.reduce-glass) .rail,
body:not(.theme-dark):not(.reduce-glass) .rail {
  background: var(--pane-card);
  border-color: var(--pane-line);
  box-shadow: inset 0 1px 0 var(--pane-rim);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.rail-button, .cap-nav, .all-tools, .chat-item { transition: color .18s, background-color .18s; }
.rail-button { border-radius: 15px; }
.theme-dark .rail-button { color: var(--muted); }
.theme-dark .rail-button.active { background: rgb(237 146 90 / .09); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }
.theme-dark .rail-button:hover { background: var(--pane-hover); }
.cap-nav { padding-block: 11px; }
.all-tools { border-radius: 10px; text-align: left; line-height: 1.6; }
.all-tools:hover { color: var(--text); background: var(--pane-hover); }
.new-chat, .memory-card,
.theme-dark:not(.reduce-glass) .new-chat,
.theme-dark:not(.reduce-glass) .memory-card {
  background: var(--pane-inset);
  border: 1px solid var(--pane-line);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 var(--pane-rim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.new-chat:hover { background: var(--pane-hover); }

/* A shared material joins the starting cards and writing surface. */
.suggestion, .theme-dark .suggestion, .baseline-start-button, .theme-dark .baseline-start-button {
  border-radius: 19px;
  border-color: var(--pane-line);
  background: linear-gradient(135deg, var(--pane-inset), transparent 75%), var(--pane-card);
  box-shadow: inset 0 1px 0 var(--pane-rim), 0 12px 30px -24px rgb(0 0 0 / .5);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  transition: transform .24s var(--pane-ease), border-color .24s, background-color .24s;
}
.suggestion { padding: 20px 19px; }
.baseline-start-button { padding: 16px 19px; }
.suggestion:hover, .theme-dark .suggestion:hover, .baseline-start-button:hover, .theme-dark .baseline-start-button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--pane-line), var(--text) 14%);
  background: var(--pane-card);
  box-shadow: inset 0 1px 0 var(--pane-rim), 0 16px 35px -25px rgb(0 0 0 / .5);
}
.suggestion:active, .baseline-start-button:active { transform: translateY(0); }
.suggestion > span:not(.card-icon):not(.card-arrow), .theme-dark .suggestion > span:not(.card-icon):not(.card-arrow) { color: var(--muted); line-height: 1.65; }
.composer,
.theme-dark:not(.reduce-glass) .composer,
body:not(.theme-dark):not(.reduce-glass) .composer {
  border-radius: 23px;
  background: linear-gradient(130deg, var(--pane-inset), transparent 55%), var(--pane-card);
  border-color: var(--pane-line);
  box-shadow: inset 0 1px 0 var(--pane-rim), 0 18px 40px -27px rgb(0 0 0 / .45);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  transition: border-color .2s, box-shadow .2s;
}
.composer:focus-within, .theme-dark .composer:focus-within {
  outline: none;
  border-color: color-mix(in srgb, var(--orange), transparent 42%);
  box-shadow: inset 0 1px 0 var(--pane-rim), 0 0 0 2px color-mix(in srgb, var(--orange), transparent 94%), 0 18px 40px -27px rgb(0 0 0 / .45);
}
.theme-dark .composer textarea::placeholder { color: var(--muted); }
.send-button, .stop-button { border-radius: 11px; }
.tool-toggle { border-radius: 10px; }
.assumptions-card, .theme-dark .assumptions-card, .research-visual, .theme-dark .research-visual {
  border-radius: 21px;
  border-color: var(--pane-line);
  background: linear-gradient(135deg, var(--pane-inset), transparent 65%), var(--pane-card);
  box-shadow: inset 0 1px 0 var(--pane-rim);
}
.assumption-input-line, .assumption-name input, .theme-dark .assumption-input-line, .theme-dark .assumption-name input { background: var(--pane-inset); border-color: var(--pane-line); border-radius: 10px; }
.visual-heading { padding: 22px 22px 16px; }
.visual-controls { padding-inline: 22px; }
.visual-footnote { background: transparent; }
.toast { border-radius: 16px; background: var(--pane-fill); border-color: var(--pane-line); box-shadow: inset 0 1px 0 var(--pane-rim), var(--pane-shadow); }

@keyframes panel-settle {
  from { opacity: 0; transform: translateY(7px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 850px) {
  .sidebar { border-radius: 20px; background: var(--pane-fill); border-color: var(--pane-line); box-shadow: var(--pane-shadow); }
}
@media (max-width: 600px) {
  .panel, .theme-dark:not(.reduce-glass) .panel, body:not(.theme-dark):not(.reduce-glass) .panel { padding: 20px; border-radius: 23px; }
  .panel-head { padding-bottom: 18px; margin-bottom: 19px; }
  .suggestion { padding: 14px; border-radius: 16px; }
  .baseline-start-button { padding: 13px 14px; border-radius: 16px; }
  .workbench-grid { gap: 17px; }
  .workbench-review, .research-plans .workbench-review { padding: 16px; }
  .visual-heading { padding: 17px; }
  .visual-controls { padding-inline: 15px; }
  .composer, .theme-dark:not(.reduce-glass) .composer, body:not(.theme-dark):not(.reduce-glass) .composer { border-radius: 18px; }
}
@media (max-height: 760px) and (min-width: 601px) {
  .suggestion { padding-block: 13px; }
  .baseline-start-button { padding-block: 12px; }
  .panel, .theme-dark:not(.reduce-glass) .panel, body:not(.theme-dark):not(.reduce-glass) .panel { padding: 23px; max-height: calc(100dvh - 28px); }
  .panel-head { padding-bottom: 17px; margin-bottom: 19px; }
  .cap-nav { padding-block: 9px; }
}

/* The opaque alternatives are deliberate materials, rather than a faded version of glass. */
.reduce-glass { --pane-fill: var(--bg); --pane-card: var(--bg); }
.reduce-glass :is(.panel, .rail, .sidebar, .suggestion, .baseline-start-button, .composer, .research-visual, .assumptions-card, .toast) {
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
}
.reduce-glass .panel::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root, .theme-dark { --pane-fill: var(--bg); --pane-card: var(--bg); }
  :is(body, .theme-dark):not(.reduce-glass) :is(.panel, .rail, .sidebar, .suggestion, .baseline-start-button, .composer, .research-visual, .assumptions-card, .toast) {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none;
  }
  .panel::backdrop, .theme-dark:not(.reduce-glass) .panel::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --pane-line: #717780; }
  .theme-dark { --pane-line: #a1a5ad; --muted: #d3d5da; --faint: #bdc0c8; }
  .panel-button, .workbench-button, .source-zoom-controls button { border-color: var(--pane-line); }
}
@media (prefers-reduced-motion: reduce) {
  .panel[open] { animation: none; }
  .suggestion, .baseline-start-button, .panel-button, .composer, .workbench-button, .workbench-primary { transition: none; }
  .suggestion:hover, .baseline-start-button:hover { transform: none; }
}
@media (hover: none) {
  .suggestion:hover, .theme-dark .suggestion:hover, .baseline-start-button:hover, .theme-dark .baseline-start-button:hover { transform: none; }
}
@media (forced-colors: active) {
  .panel, .rail, .suggestion, .baseline-start-button, .composer, .panel-button, .workbench-review, .assumptions-card, .research-visual { border: 1px solid CanvasText; box-shadow: none; }
  .panel::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}