feat: add project-aware agent workspace
This commit is contained in:
+456
-187
@@ -127,6 +127,7 @@
|
||||
--canvas-map-grid: color-mix(in srgb, var(--palette-brand) 8%, transparent);
|
||||
--acrylic-navigation: color-mix(in srgb, var(--surface-navigation) 64%, transparent);
|
||||
--acrylic-panel: color-mix(in srgb, var(--surface-panel) 56%, transparent);
|
||||
--acrylic-panel-white: rgba(255, 255, 255, 0.82);
|
||||
--acrylic-control: color-mix(in srgb, var(--surface-subtle) 74%, transparent);
|
||||
--agent-floating-reading-surface: color-mix(in srgb, var(--surface-panel) 82%, transparent);
|
||||
--agent-floating-reading-item: color-mix(in srgb, var(--palette-paper) 72%, transparent);
|
||||
@@ -430,6 +431,15 @@ button:disabled {
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
.acrylic-panel-white {
|
||||
--surface-reading: rgb(255 255 255 / 0.74);
|
||||
--surface-control: rgb(255 255 255 / 0.52);
|
||||
--surface-divider: rgb(35 38 44 / 0.12);
|
||||
--acrylic-border: rgb(255 255 255 / 0.82);
|
||||
--acrylic-outline: rgb(35 38 44 / 0.14);
|
||||
background-color: var(--acrylic-panel-white);
|
||||
}
|
||||
|
||||
.agent-panel-shell.acrylic-panel,
|
||||
.mobile-workbench-sheet:has(.agent-panel-shell) {
|
||||
background-color: var(--agent-floating-reading-surface);
|
||||
@@ -448,6 +458,72 @@ button:disabled {
|
||||
saturate(var(--acrylic-backdrop-saturation));
|
||||
}
|
||||
|
||||
.agent-collapsed-rail {
|
||||
--action-soft: transparent;
|
||||
--action-soft-pressed: transparent;
|
||||
}
|
||||
|
||||
.agent-orb {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.agent-orb-response,
|
||||
.agent-orb-live,
|
||||
.agent-orb-still,
|
||||
.agent-orb-canvas {
|
||||
position: absolute;
|
||||
display: block;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.agent-orb-still {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.agent-orb-canvas {
|
||||
opacity: 0;
|
||||
transition: opacity 180ms linear;
|
||||
}
|
||||
|
||||
.agent-orb-live[data-ready="true"] .agent-orb-canvas {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.agent-orb-live[data-ready="true"] .agent-orb-still {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 180ms linear, visibility 0s linear 180ms;
|
||||
}
|
||||
|
||||
.agent-orb-contrast {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.agent-orb-live,
|
||||
.agent-orb-still {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.agent-orb-contrast {
|
||||
position: absolute;
|
||||
display: block;
|
||||
inset: 10%;
|
||||
border: 2px solid ButtonText;
|
||||
border-radius: 50%;
|
||||
background: ButtonFace;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.surface-dock,
|
||||
.surface-control,
|
||||
@@ -572,6 +648,7 @@ button:disabled {
|
||||
--surface-well: var(--surface-panel);
|
||||
--acrylic-navigation: var(--surface-navigation);
|
||||
--acrylic-panel: var(--surface-panel);
|
||||
--acrylic-panel-white: #ffffff;
|
||||
--acrylic-control: var(--surface-subtle);
|
||||
--glass-transient: var(--surface-panel);
|
||||
--agent-floating-reading-surface: var(--surface-panel);
|
||||
@@ -601,6 +678,7 @@ button:disabled {
|
||||
--surface-well: var(--surface-panel);
|
||||
--acrylic-navigation: var(--surface-navigation);
|
||||
--acrylic-panel: var(--surface-panel);
|
||||
--acrylic-panel-white: #ffffff;
|
||||
--acrylic-control: var(--surface-subtle);
|
||||
--glass-transient: var(--surface-panel);
|
||||
--agent-floating-reading-surface: var(--surface-panel);
|
||||
@@ -770,11 +848,6 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.agent-history-rename-input {
|
||||
border-color: var(--surface-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-panel-band:not(.agent-panel-floating-acrylic) {
|
||||
background: var(--surface-control);
|
||||
}
|
||||
@@ -942,7 +1015,8 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
}
|
||||
|
||||
.agent-panel-shell,
|
||||
.agent-panel-overlay {
|
||||
.agent-panel-overlay,
|
||||
[data-agent-theme="chat"] {
|
||||
--agent-palette-shell: #E8ECF3;
|
||||
--agent-palette-reading: #F8F9FC;
|
||||
--agent-palette-accent: #465F91;
|
||||
@@ -1120,103 +1194,6 @@ button.agent-history-session-trigger:not(:disabled):active {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-starting="true"] .agent-panel-main-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-starting="true"] .agent-panel-start-composer {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
z-index: auto;
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
width: calc(100% - 24px);
|
||||
max-width: 600px;
|
||||
margin-block: auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-start-composer .agent-panel-input-form {
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
background-color: var(--agent-dock-band);
|
||||
background-image: var(--agent-dock-acrylic-texture);
|
||||
background-blend-mode: exclusion, luminosity, soft-light;
|
||||
box-shadow: var(--agent-dock-acrylic-shadow);
|
||||
backdrop-filter: var(--agent-dock-overlay-backdrop);
|
||||
-webkit-backdrop-filter: var(--agent-dock-overlay-backdrop);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-composer-motion,
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form,
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form textarea {
|
||||
transition-duration: 280ms;
|
||||
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form {
|
||||
transition-property: padding, border-radius, background-color, box-shadow;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form textarea {
|
||||
transition-property: min-height, padding, font-size, line-height;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-start-composer textarea {
|
||||
min-height: 160px;
|
||||
max-height: clamp(160px, calc(100dvh - 480px), 240px);
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-composer-motion,
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form,
|
||||
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form textarea {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-panel-start-heading {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.agent-panel-start-suggestions {
|
||||
min-height: 204px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.agent-panel-start-suggestion {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
min-height: 68px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.agent-panel-start-suggestion:hover {
|
||||
background: var(--action-soft);
|
||||
color: var(--action-blue-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.agent-panel-suggestion-status {
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
@@ -1808,54 +1785,6 @@ button[type="button"]:has(> .investigation-diagram-control-icon):disabled {
|
||||
background: var(--status-warning-soft);
|
||||
}
|
||||
|
||||
.agent-panel-enter {
|
||||
animation:
|
||||
agent-panel-reveal 170ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
agent-panel-fade 150ms ease-out;
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.agent-panel-collapse {
|
||||
animation:
|
||||
agent-panel-dismiss 170ms cubic-bezier(0.5, 0, 0.2, 1) forwards,
|
||||
agent-panel-dim 150ms ease-in forwards;
|
||||
pointer-events: none;
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.agent-rail-enter {
|
||||
animation:
|
||||
agent-rail-shell 170ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||
agent-panel-fade 130ms ease-out;
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.agent-rail-item {
|
||||
animation: agent-rail-item 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.agent-rail-item:nth-child(2) {
|
||||
animation-delay: 24ms;
|
||||
}
|
||||
|
||||
.agent-rail-item:nth-child(3) {
|
||||
animation-delay: 42ms;
|
||||
}
|
||||
|
||||
.agent-rail-item:nth-child(4) {
|
||||
animation-delay: 58ms;
|
||||
}
|
||||
|
||||
@keyframes agent-panel-reveal {
|
||||
from {
|
||||
transform: translateX(-8px) scale(0.985);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-panel-fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -1876,38 +1805,6 @@ button[type="button"]:has(> .investigation-diagram-control-icon):disabled {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-panel-dismiss {
|
||||
from {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-8px) scale(0.985);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-rail-shell {
|
||||
from {
|
||||
transform: translateX(-5px) scale(0.94);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-rail-item {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-3px) scale(0.92);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes agent-stream-token-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -1982,10 +1879,6 @@ button[type="button"]:has(> .investigation-diagram-control-icon):disabled {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-panel-enter,
|
||||
.agent-panel-collapse,
|
||||
.agent-rail-enter,
|
||||
.agent-rail-item,
|
||||
.scheduled-feed-shell-enter,
|
||||
.scheduled-feed-shell-exit,
|
||||
.scheduled-feed-detail-enter {
|
||||
@@ -2058,3 +1951,379 @@ details[open] > summary > .disclosure-accordion-indicator {
|
||||
@container (min-width: 440px) {
|
||||
.answer-ui-stack-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
/* Agent chat: an independent shadcn-style surface, scoped away from the map. */
|
||||
.agent-panel-shell[data-agent-presentation],
|
||||
.agent-panel-overlay[data-agent-presentation],
|
||||
[data-agent-theme="chat"] {
|
||||
--agent-palette-shell: #f8fafc;
|
||||
--agent-palette-reading: #ffffff;
|
||||
--agent-palette-accent: #2563eb;
|
||||
--agent-palette-accent-hover: #1d4ed8;
|
||||
--agent-palette-accent-pressed: #1e40af;
|
||||
--agent-palette-selection: #eff6ff;
|
||||
--agent-dock-surface: #f8fafc;
|
||||
--agent-dock-reading: #ffffff;
|
||||
--agent-dock-band: #f8fafc;
|
||||
--agent-dock-acrylic-texture: none;
|
||||
--agent-dock-overlay-backdrop: none;
|
||||
--agent-dock-overlay-surface: #ffffff;
|
||||
--agent-dock-control-shadow: none;
|
||||
--agent-dock-acrylic-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
|
||||
--agent-user-message-surface: #f1f5f9;
|
||||
--agent-user-message-border: #e2e8f0;
|
||||
--agent-input-placeholder: #64748b;
|
||||
--agent-white-acrylic-surface: #ffffff;
|
||||
--agent-floating-reading-item: #ffffff;
|
||||
--agent-floating-reading-item-hover: #f1f5f9;
|
||||
--agent-floating-reading-active: #eff6ff;
|
||||
--surface-navigation: #ffffff;
|
||||
--surface-panel: #f8fafc;
|
||||
--surface-subtle: #f1f5f9;
|
||||
--surface-control: #f1f5f9;
|
||||
--surface-reading: #ffffff;
|
||||
--surface-dock: #f8fafc;
|
||||
--surface-border: #cbd5e1;
|
||||
--surface-divider: #e2e8f0;
|
||||
--ink: #0f172a;
|
||||
--ink-muted: #64748b;
|
||||
--action-soft: #f1f5f9;
|
||||
--action-soft-pressed: #e2e8f0;
|
||||
--action-border: #e2e8f0;
|
||||
--action-shadow-secondary: none;
|
||||
--acrylic-navigation: #ffffff;
|
||||
--acrylic-panel: #ffffff;
|
||||
--acrylic-control: #ffffff;
|
||||
--acrylic-noise: none;
|
||||
--acrylic-panel-blur: 0px;
|
||||
--acrylic-control-blur: 0px;
|
||||
color: var(--ink);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-header {
|
||||
background: var(--surface-navigation);
|
||||
border-color: var(--surface-divider);
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.agent-chat-avatar {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
.agent-chat-avatar { width: 28px; height: 28px; border-radius: 8px; }
|
||||
.agent-chat-message-header { display: flex; align-items: center; gap: 8px; min-height: 28px; }
|
||||
.agent-chat-message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
|
||||
.agent-chat-context-bar { display: flex; flex-direction: column; flex-shrink: 0; min-width: 0; padding: 12px; background: var(--surface-navigation); }
|
||||
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-conversation {
|
||||
background: #ffffff;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-conversation[data-agent-conversation-state="empty"] {
|
||||
background: #ffffff;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-message {
|
||||
border: 0;
|
||||
padding: 4px 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-user-message {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 14px 14px 4px 14px;
|
||||
background: #f1f5f9;
|
||||
box-shadow: none;
|
||||
}
|
||||
.agent-chat-message-list { padding: 8px 4px; }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-band {
|
||||
background: #ffffff;
|
||||
padding: 8px 12px;
|
||||
border-top: 0;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-form {
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
background-image: none;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 0.04);
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-form:focus-within {
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 2px rgb(37 99 235 / 0.08);
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-body {
|
||||
border: 0;
|
||||
border-radius: 14px 14px 0 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools {
|
||||
min-width: 0;
|
||||
margin: 0 6px 6px;
|
||||
padding: 4px;
|
||||
border-top: 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation="mobile-sheet"] .agent-panel-band { flex-shrink: 0; }
|
||||
.agent-panel-shell[data-agent-presentation="mobile-sheet"] .agent-panel-input-tools { flex-wrap: wrap; }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon {
|
||||
border-radius: 9px;
|
||||
background: #2563eb;
|
||||
box-shadow: none;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon:disabled { background: #94a3b8; }
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-icon-button,
|
||||
.agent-panel-shell[data-agent-presentation] .agent-project-trigger {
|
||||
border-color: transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.agent-chat-empty-state { height: auto; padding: 0 0 20px; gap: 6px; }
|
||||
.agent-panel-shell[data-agent-centered="true"] .agent-panel-body { overflow-y: auto; overscroll-behavior: contain; }
|
||||
.agent-panel-shell[data-agent-centered="true"] .agent-panel-main-content { display: none; }
|
||||
.agent-panel-shell[data-agent-centered="true"] .agent-panel-band {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.agent-panel-shell[data-agent-centered="true"] .agent-panel-band { padding: 24px 16px; }
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar { background: #ffffff; }
|
||||
/* Keep one compact form mounted while the starting group becomes a bottom composer. */
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting] .agent-panel-input-form > [data-slot="input-group"] { gap: 4px; }
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting] .agent-panel-input-tools { padding-block: 4px; }
|
||||
.agent-panel-shell[data-agent-presentation][data-agent-starting] textarea.agent-panel-prompt-textarea {
|
||||
min-height: 64px;
|
||||
max-height: clamp(64px, 24dvh, 160px);
|
||||
padding: 14px 14px 8px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-suggestions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
margin-top: 16px;
|
||||
padding-bottom: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-suggestion {
|
||||
height: auto;
|
||||
min-height: 36px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #e4e4e7;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
color: #52525b;
|
||||
box-shadow: none;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.agent-panel-shell[data-agent-presentation] .agent-chat-suggestion:hover {
|
||||
border-color: #d4d4d8;
|
||||
background: #f4f4f5;
|
||||
color: #18181b;
|
||||
}
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] .agent-panel-input-form { border-color: #e4e4e7; box-shadow: 0 1px 2px rgb(0 0 0 / 0.03); }
|
||||
|
||||
|
||||
.resizable-handle { color: var(--ink-muted); touch-action: none; }
|
||||
.resizable-handle::after { content: ""; position: absolute; inset: 0 -6px; }
|
||||
.resizable-handle[aria-orientation="horizontal"]::after { inset: -6px 0; }
|
||||
.resizable-handle[aria-orientation="horizontal"] .resizable-grip { transform: rotate(90deg); }
|
||||
.resizable-handle:is([data-separator="hover"], [data-separator="active"], :focus-visible) { background: var(--action-blue); }
|
||||
.resizable-handle:is([data-separator="hover"], [data-separator="active"], :focus-visible) .resizable-grip {
|
||||
color: var(--action-blue);
|
||||
border-color: var(--action-blue);
|
||||
}
|
||||
.resizable-handle:focus-visible .resizable-grip { outline: 2px solid var(--action-focus-ring); outline-offset: 2px; }
|
||||
@media (forced-colors: active) {
|
||||
.resizable-handle, .resizable-grip { background: Canvas; color: CanvasText; border-color: ButtonBorder; }
|
||||
.resizable-handle:focus-visible .resizable-grip { outline-color: Highlight; }
|
||||
}
|
||||
|
||||
.answer-ui-root { --surface-reading: #ffffff; --surface-control: #f1f5f9; --surface-border: #e2e8f0; --ink: #0f172a; --ink-muted: #64748b; }
|
||||
.answer-ui-root .answer-ui-stack { gap: 14px; }
|
||||
.answer-ui-root .answer-ui-stack-compact { gap: 10px; }
|
||||
.answer-ui-metric { min-width: 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; box-shadow: none; }
|
||||
.answer-ui-metric-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; row-gap: 4px; }
|
||||
.answer-ui-metric-label { grid-column: 1; grid-row: 1; min-width: 0; }
|
||||
.answer-ui-metric-value { grid-column: 1 / -1; grid-row: 2; }
|
||||
.answer-ui-metric-source { grid-column: 1 / -1; grid-row: 3; }
|
||||
.answer-ui-metric-ask { display: contents; }
|
||||
.answer-ui-metric-ask > button { grid-column: 2; grid-row: 1; }
|
||||
.answer-ui-metric-ask > [role="status"] { grid-column: 1 / -1; grid-row: 4; }
|
||||
/* Only metric-only comparisons form a compact summary strip. Mixed content keeps its own breakpoint. */
|
||||
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) {
|
||||
gap: 0;
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 12px;
|
||||
background: var(--surface-control);
|
||||
}
|
||||
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric + .answer-ui-metric {
|
||||
border-top: 1px solid var(--surface-border);
|
||||
}
|
||||
@container (min-width: 240px) {
|
||||
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric:nth-child(2) { border-top: 0; }
|
||||
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric:nth-child(even) { border-left: 1px solid var(--surface-border); }
|
||||
}
|
||||
.answer-ui-chart { min-width: 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 2px rgb(15 23 42 / 0.03); }
|
||||
.answer-ui-root .answer-ui-chart-series button[aria-pressed] { box-shadow: none; font-weight: 400; }
|
||||
.answer-ui-root .answer-ui-chart-series button[aria-pressed="true"] {
|
||||
border-color: var(--surface-border);
|
||||
background: var(--surface-control);
|
||||
color: var(--ink);
|
||||
}
|
||||
.answer-ui-root .answer-ui-chart-series button[aria-pressed="false"] { color: var(--ink-muted); }
|
||||
.answer-ui-evidence { min-width: 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; }
|
||||
.answer-ui-evidence-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #f1f5f9; color: #64748b; }
|
||||
.answer-ui-location { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 12px; }
|
||||
.answer-ui-form { padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
|
||||
.answer-ui-form :is(input, textarea) { background: #ffffff; }
|
||||
.answer-ui-table { scrollbar-gutter: stable; }
|
||||
|
||||
/* Shared report reading surfaces, independent of the map's material. */
|
||||
.agent-report-workspace,
|
||||
.investigation-report {
|
||||
--ink: #0f172a;
|
||||
--ink-muted: #64748b;
|
||||
--surface-reading: #ffffff;
|
||||
--surface-control: #f8fafc;
|
||||
--surface-subtle: #f8fafc;
|
||||
--surface-border: #e2e8f0;
|
||||
--surface-divider: #e2e8f0;
|
||||
color: var(--ink);
|
||||
background: #ffffff;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
.agent-report-workspace {
|
||||
container-type: inline-size;
|
||||
background-color: var(--surface-dock);
|
||||
}
|
||||
.agent-report-workspace > header { background: transparent; }
|
||||
.agent-report-workspace .answer-ui-root { container-type: inline-size; }
|
||||
.agent-report-workspace .investigation-report { border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
|
||||
.investigation-report .investigation-report-section { border-color: #e2e8f0; box-shadow: none; background: #ffffff; }
|
||||
.investigation-report .investigation-conclusion-preview { display: block; -webkit-line-clamp: unset; }
|
||||
.agent-report-workspace .investigation-report-header h2 { font-size: 20px; line-height: 28px; }
|
||||
.agent-report-workspace .investigation-conclusion-preview { font-size: 16px; line-height: 26px; }
|
||||
.agent-report-workspace .investigation-report-header { padding: 0 0 16px; }
|
||||
.agent-report-workspace .investigation-report > .investigation-report-section {
|
||||
margin: 0;
|
||||
padding: 20px 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--surface-border);
|
||||
/* Override the shared-layout animation radius on the inline cards. */
|
||||
border-radius: 0 !important;
|
||||
scroll-margin-top: 68px;
|
||||
}
|
||||
.agent-report-workspace .investigation-report-section:focus-visible { outline: 2px solid var(--action-focus-ring); outline-offset: 2px; }
|
||||
.investigation-report-navigation { display: none; }
|
||||
.agent-report-workspace .investigation-report-navigation {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 4px;
|
||||
overflow-x: auto;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
background: var(--surface-reading);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.investigation-report-navigation [aria-current="location"] { background: var(--surface-control); color: var(--ink); font-weight: 600; }
|
||||
.agent-report-workspace .investigation-report-navigation + .investigation-report-section { border-top: 0; }
|
||||
.agent-report-workspace [data-expandable-reading] { min-width: 0; }
|
||||
.answer-ui-root [data-interactive-table] input { background: #ffffff; }
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.agent-chat-message-list { padding-inline: 0; }
|
||||
.answer-ui-evidence [data-slot="button"] { gap: 6px; }
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.agent-panel-shell[data-agent-presentation], .agent-panel-overlay[data-agent-presentation], [data-agent-theme="chat"] {
|
||||
--ink: CanvasText;
|
||||
--ink-muted: CanvasText;
|
||||
--surface-border: ButtonBorder;
|
||||
--surface-divider: ButtonBorder;
|
||||
--surface-reading: Canvas;
|
||||
--agent-dock-surface: Canvas;
|
||||
--agent-dock-reading: Canvas;
|
||||
--agent-dock-band: Canvas;
|
||||
}
|
||||
.agent-panel-shell[data-agent-presentation] :is(.agent-panel-header, .agent-panel-message, .agent-panel-user-message, .agent-panel-conversation, .agent-panel-band, .agent-panel-input-form, .agent-panel-input-body, .agent-panel-input-tools),
|
||||
[data-agent-theme="chat"], .agent-report-workspace, .investigation-report,
|
||||
.answer-ui-root :is(.answer-ui-metric, .answer-ui-chart, .answer-ui-evidence, .answer-ui-form, .answer-ui-stack-comparison) { background: Canvas; color: CanvasText; border-color: ButtonBorder; }
|
||||
.answer-ui-root .answer-ui-chart-series button[aria-pressed="true"],
|
||||
.investigation-report-navigation [aria-current="location"] { background: Highlight; color: HighlightText; border-color: Highlight; }
|
||||
}
|
||||
|
||||
/* Agent dialogs share the chat theme and retain the local Dialog backdrop. */
|
||||
.agent-history-overlay {
|
||||
z-index: 110;
|
||||
}
|
||||
.agent-history-dialog {
|
||||
z-index: 111;
|
||||
width: min(760px, calc(100vw - 48px));
|
||||
height: min(720px, 80dvh);
|
||||
max-width: 760px;
|
||||
}
|
||||
body:has(:is(.agent-history-dialog, .agent-topic-dialog)[data-state="open"]) [data-sonner-toaster] { z-index: 109; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-history-dialog,
|
||||
.agent-history-overlay { animation: none; }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.agent-history-dialog {
|
||||
animation: none;
|
||||
inset: 0;
|
||||
top: var(--history-viewport-top, 0px);
|
||||
bottom: auto;
|
||||
width: 100%;
|
||||
height: var(--history-viewport-height, 100dvh);
|
||||
max-width: none;
|
||||
max-height: 100dvh;
|
||||
transform: none;
|
||||
translate: none;
|
||||
border-radius: 0;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user