Miayui
1868 lines
46 KiB
CSS
1868 lines
46 KiB
CSS
/* Unified conversational assistant. Loaded after the existing console cascade. */
|
|
|
|
.console-v2.assistant-chat-enabled {
|
|
--assistant-drawer-width: clamp(340px, 26vw, 410px);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel {
|
|
grid-template-rows: 56px auto minmax(0, 1fr);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-operation-shell {
|
|
width: var(--assistant-drawer-width);
|
|
height: auto;
|
|
position: fixed;
|
|
top: 72px;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
z-index: 120;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
border-color: rgba(126, 146, 184, 0.25);
|
|
border-radius: 22px;
|
|
box-shadow: 0 26px 70px rgba(25, 44, 82, 0.2), 0 8px 24px rgba(25, 44, 82, 0.1);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transform: translateX(calc(100% + 36px)) scale(0.985);
|
|
transform-origin: right center;
|
|
transition: transform 220ms ease, opacity 180ms ease, visibility 180ms ease;
|
|
}
|
|
|
|
@media (min-width: 901px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .workspace {
|
|
transform-origin: left center;
|
|
transition: opacity 180ms ease, grid-template-columns 220ms ease;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .workspace {
|
|
width: 100vw;
|
|
grid-template-columns: clamp(250px, 19vw, 292px) minmax(0, 1fr);
|
|
margin: 0;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open.v2-sidebar-collapsed .workspace {
|
|
grid-template-columns: 64px minmax(0, 1fr);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .command-panel.v2-sidebar {
|
|
display: block !important;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .main-panel {
|
|
width: 100%;
|
|
grid-template-columns: var(--assistant-drawer-width) minmax(0, 1fr);
|
|
grid-template-rows: 56px auto minmax(0, 1fr);
|
|
column-gap: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .v2-module-switcher {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .v2-operation-shell {
|
|
width: auto;
|
|
height: auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
position: relative;
|
|
top: auto;
|
|
right: auto;
|
|
bottom: auto;
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
margin-left: 0;
|
|
border-radius: 18px;
|
|
box-shadow: 0 14px 38px rgba(25, 44, 82, 0.12);
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .v2-output-shell {
|
|
min-width: 0;
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
}
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .v2-operation-shell {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-output-shell {
|
|
grid-row: 3;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel > .v2-mode-rail {
|
|
min-width: 0;
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-natural-panel {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: 8px;
|
|
padding: 16px 18px 18px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-operation-heading {
|
|
min-height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid rgba(126, 146, 184, 0.16);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-operation-heading h2 {
|
|
margin: 0;
|
|
font-size: clamp(21px, 1.6vw, 26px);
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.assistant-drawer-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.assistant-drawer-actions .context-reset,
|
|
.assistant-drawer-close {
|
|
width: 34px;
|
|
height: 34px;
|
|
min-height: 34px;
|
|
position: static;
|
|
display: grid !important;
|
|
place-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #65748a;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transform: none;
|
|
transition: color 150ms ease, background 150ms ease, transform 150ms ease;
|
|
}
|
|
|
|
.assistant-drawer-actions .context-reset:hover,
|
|
.assistant-drawer-actions .context-reset:focus-visible,
|
|
.assistant-drawer-close:hover,
|
|
.assistant-drawer-close:focus-visible {
|
|
color: #275df5;
|
|
background: #eef3ff;
|
|
outline: none;
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.assistant-drawer-actions svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.assistant-drawer-toggle {
|
|
min-width: 128px;
|
|
height: 52px;
|
|
position: fixed;
|
|
right: auto;
|
|
bottom: 24px;
|
|
left: calc(clamp(250px, 19vw, 292px) + 20px);
|
|
z-index: 119;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
padding: 0 18px;
|
|
color: #fff;
|
|
background: #275df5;
|
|
border: 1px solid rgba(255, 255, 255, 0.48);
|
|
border-radius: 999px;
|
|
box-shadow: 0 14px 34px rgba(39, 93, 245, 0.28);
|
|
font: 760 14px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
|
|
cursor: pointer;
|
|
transition: transform 170ms ease, box-shadow 170ms ease, opacity 140ms ease;
|
|
}
|
|
|
|
.console-v2.v2-sidebar-collapsed .assistant-drawer-toggle {
|
|
left: 84px;
|
|
}
|
|
|
|
@media (min-width: 1201px) and (max-width: 1440px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .main-panel {
|
|
grid-template-columns: 330px minmax(0, 1fr);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .joint-twin-shell.v2-output-page,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .joint-twin-shell[data-open-panels] {
|
|
grid-template-columns: minmax(250px, 1fr) 352px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .joint-twin-shell[data-open-panels="none"] {
|
|
grid-template-columns: minmax(250px, 1fr) 52px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 901px) and (max-width: 1200px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .joint-twin-shell.v2-output-page,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .joint-twin-shell[data-open-panels] {
|
|
grid-template-columns: minmax(250px, 1fr) 292px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .joint-twin-shell[data-open-panels="none"] {
|
|
grid-template-columns: minmax(250px, 1fr) 52px;
|
|
}
|
|
}
|
|
|
|
.assistant-drawer-toggle:hover,
|
|
.assistant-drawer-toggle:focus-visible {
|
|
box-shadow: 0 17px 38px rgba(39, 93, 245, 0.36);
|
|
outline: 3px solid rgba(39, 93, 245, 0.14);
|
|
outline-offset: 3px;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.assistant-drawer-toggle svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.assistant-drawer-toggle b {
|
|
width: 8px;
|
|
height: 8px;
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 7px;
|
|
display: none;
|
|
background: #ffb84d;
|
|
border: 2px solid #275df5;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.console-v2.assistant-drawer-busy .assistant-drawer-toggle b {
|
|
display: block;
|
|
}
|
|
|
|
.console-v2.assistant-drawer-open .assistant-drawer-toggle {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateX(12px);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-natural-grid {
|
|
min-height: 0;
|
|
display: block;
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form {
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: grid !important;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form > .field-label-row,
|
|
.console-v2.assistant-chat-enabled .v2-request-form > .field-group,
|
|
.console-v2.assistant-chat-enabled .v2-request-status,
|
|
.console-v2.assistant-chat-enabled .v2-task-overview,
|
|
.console-v2.assistant-chat-enabled .v2-reasoning-trigger,
|
|
.console-v2.assistant-chat-enabled .v2-reasoning-field {
|
|
display: none !important;
|
|
}
|
|
|
|
.assistant-transcript {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
scrollbar-color: rgba(39, 93, 245, 0.22) transparent;
|
|
scrollbar-width: thin;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.assistant-messages {
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 11px;
|
|
padding: 2px 8px 4px 2px;
|
|
}
|
|
|
|
.assistant-message {
|
|
max-width: min(82%, 860px);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 9px;
|
|
animation: assistant-message-in 180ms ease-out both;
|
|
}
|
|
|
|
.assistant-message-user {
|
|
align-self: flex-end;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.assistant-message-assistant {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.assistant-avatar {
|
|
width: 30px;
|
|
height: 30px;
|
|
flex: 0 0 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
background: #275df5;
|
|
border-radius: 50%;
|
|
box-shadow: 0 6px 14px rgba(39, 93, 245, 0.2);
|
|
}
|
|
|
|
.assistant-avatar svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.assistant-message-body {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.assistant-message-content {
|
|
padding: 10px 13px;
|
|
color: #18242e;
|
|
background: #fff;
|
|
border: 1px solid #e1e6ee;
|
|
border-radius: 7px 16px 16px 16px;
|
|
box-shadow: 0 4px 14px rgba(32, 54, 88, 0.045);
|
|
font: 520 13px/1.65 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.assistant-message-user .assistant-message-content {
|
|
color: #152a58;
|
|
background: #f2f6ff;
|
|
border-color: #cbd8f7;
|
|
border-radius: 16px 7px 16px 16px;
|
|
}
|
|
|
|
.assistant-message-content p {
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.assistant-message-content p:last-child,
|
|
.assistant-message-content ul:last-child,
|
|
.assistant-message-content pre:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.assistant-message-content ul {
|
|
margin: 4px 0 8px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.assistant-message-content li + li {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.assistant-message-content code {
|
|
padding: 1px 5px;
|
|
color: #1741ad;
|
|
background: #edf2ff;
|
|
border-radius: 5px;
|
|
font: 500 0.92em/1.5 "SFMono-Regular", Consolas, monospace;
|
|
}
|
|
|
|
.assistant-message-content pre {
|
|
max-width: 100%;
|
|
margin: 7px 0;
|
|
padding: 11px 13px;
|
|
overflow: auto;
|
|
color: #eaf0ff;
|
|
background: #17213a;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.assistant-message-content pre code {
|
|
padding: 0;
|
|
color: inherit;
|
|
background: transparent;
|
|
}
|
|
|
|
.assistant-inline-heading {
|
|
display: block;
|
|
margin: 6px 0 3px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.assistant-action-status {
|
|
width: fit-content;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 2px;
|
|
color: #64748b;
|
|
font-size: 11px;
|
|
font-weight: 720;
|
|
}
|
|
|
|
.assistant-action-status[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.assistant-action-status svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.assistant-action-status.working svg {
|
|
color: #275df5;
|
|
animation: assistant-spin 900ms linear infinite;
|
|
}
|
|
|
|
.assistant-action-status.success {
|
|
color: #0c9b63;
|
|
}
|
|
|
|
.assistant-action-status.failed {
|
|
color: #d24a55;
|
|
}
|
|
|
|
.assistant-mode-guide .assistant-message-content {
|
|
background: linear-gradient(145deg, #f8faff, #f2f6ff);
|
|
border-color: #cfdbfb;
|
|
}
|
|
|
|
.assistant-message-mode-draft {
|
|
width: auto;
|
|
max-width: none;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.assistant-message-mode-draft .assistant-message-body {
|
|
min-width: 0;
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.assistant-mode-draft {
|
|
width: 100%;
|
|
max-width: 314px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
color: #233044;
|
|
background: #fff;
|
|
border: 1px solid #dce3ed;
|
|
border-radius: 14px;
|
|
box-shadow: 0 8px 24px rgba(32, 54, 88, 0.065);
|
|
}
|
|
|
|
.assistant-mode-draft > header {
|
|
min-height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 10px 12px 9px;
|
|
}
|
|
|
|
.assistant-mode-draft > header > span:first-child {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.assistant-mode-draft > header small {
|
|
color: #718096;
|
|
font-size: 9px;
|
|
font-weight: 680;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.assistant-mode-draft > header strong {
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
line-height: 1.25;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.assistant-mode-draft-badge {
|
|
flex: 0 0 auto;
|
|
padding: 4px 7px;
|
|
color: #3764d9;
|
|
background: #eef3ff;
|
|
border-radius: 999px;
|
|
font-size: 8px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.assistant-mode-draft-list {
|
|
border-top: 1px solid #e5eaf1;
|
|
border-bottom: 1px solid #e5eaf1;
|
|
}
|
|
|
|
.assistant-mode-draft-row {
|
|
min-height: 39px;
|
|
display: grid;
|
|
grid-template-columns: 22px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 12px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.assistant-mode-draft-row + .assistant-mode-draft-row {
|
|
border-top: 1px solid #eef1f5;
|
|
}
|
|
|
|
.assistant-mode-draft-row > svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
color: #6e7b8d;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.assistant-mode-draft-row > span {
|
|
min-width: 0;
|
|
color: #4a5668;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.assistant-mode-draft-row > strong {
|
|
color: #334155;
|
|
font-size: 10px;
|
|
font-weight: 760;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.assistant-mode-draft-actions {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 9px 10px 8px;
|
|
}
|
|
|
|
.assistant-mode-schedule-summary,
|
|
.assistant-mode-schedule-hint,
|
|
.assistant-mode-draft-preview-notice {
|
|
margin: 0;
|
|
padding: 9px 12px;
|
|
color: var(--assistant-muted, #64748b);
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.assistant-mode-schedule-summary {
|
|
color: var(--status-info-foreground, #3764d9);
|
|
background: var(--status-info-soft, #eef3ff);
|
|
font-weight: 750;
|
|
}
|
|
|
|
.assistant-mode-schedule-phase + .assistant-mode-schedule-phase,
|
|
.assistant-mode-schedule-hint,
|
|
.assistant-mode-draft-preview-notice {
|
|
border-top: 1px solid var(--assistant-border, #e5eaf1);
|
|
}
|
|
|
|
.assistant-mode-draft-preview-notice {
|
|
margin: 0;
|
|
color: var(--status-success-foreground, #087854);
|
|
background: var(--status-success-soft, #ebf9f3);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.assistant-mode-schedule-phase > header {
|
|
display: grid;
|
|
gap: 3px;
|
|
padding: 10px 12px 5px;
|
|
color: var(--assistant-heading, #334155);
|
|
font-size: 11px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.assistant-mode-schedule-phase > header small {
|
|
color: var(--assistant-muted, #64748b);
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.assistant-mode-draft-scheduled .assistant-mode-draft-row {
|
|
grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 5px;
|
|
}
|
|
|
|
.assistant-mode-draft-scheduled .assistant-mode-draft-row > strong {
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
text-align: right;
|
|
}
|
|
|
|
.mode-gallery-card-shell:has(> .mode-gallery-schedule-details) > .mode-gallery-card {
|
|
height: auto;
|
|
}
|
|
|
|
.mode-gallery-schedule-details {
|
|
padding: 9px 12px;
|
|
color: var(--foreground, #334155);
|
|
background: var(--card, #fff);
|
|
border: 1px solid var(--border, #e5eaf1);
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.mode-gallery-schedule-details > summary {
|
|
cursor: pointer;
|
|
color: var(--primary, #3764d9);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.mode-gallery-schedule-details ol {
|
|
margin: 10px 0;
|
|
padding-left: 19px;
|
|
}
|
|
|
|
.mode-gallery-schedule-details li + li {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.mode-gallery-schedule-details li > strong,
|
|
.mode-gallery-schedule-details li > small {
|
|
display: block;
|
|
}
|
|
|
|
.mode-gallery-schedule-details small,
|
|
.mode-gallery-schedule-details > p {
|
|
color: var(--muted-foreground, #64748b);
|
|
}
|
|
|
|
.mode-gallery-schedule-details p {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.mode-chip-action-popover li.mode-schedule-popover-summary {
|
|
display: block;
|
|
color: var(--status-info-foreground, #3764d9);
|
|
background: var(--status-info-soft, #eef3ff);
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.mode-schedule-popover-phase {
|
|
color: var(--primary, #3764d9);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.assistant-mode-draft-actions[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.assistant-mode-draft-actions button {
|
|
min-height: 34px;
|
|
border-radius: 9px;
|
|
font: 800 10px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
|
|
cursor: pointer;
|
|
transition: background 150ms ease, border-color 150ms ease, color 150ms ease,
|
|
box-shadow 150ms ease, opacity 150ms ease;
|
|
}
|
|
|
|
.assistant-mode-draft-actions button:disabled {
|
|
cursor: wait;
|
|
opacity: 0.58;
|
|
}
|
|
|
|
.assistant-mode-draft-save {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #0d9b8f, #087b72);
|
|
border: 1px solid #087b72;
|
|
box-shadow: 0 6px 14px rgba(8, 123, 114, 0.16);
|
|
}
|
|
|
|
.assistant-mode-draft-save:hover,
|
|
.assistant-mode-draft-save:focus-visible {
|
|
background: linear-gradient(135deg, #0b8c82, #066c65);
|
|
outline: 3px solid rgba(13, 155, 143, 0.13);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.assistant-mode-draft-save svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.assistant-mode-draft-trial {
|
|
color: #0b8278;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.assistant-mode-draft-trial:hover,
|
|
.assistant-mode-draft-trial:focus-visible {
|
|
color: #066c65;
|
|
background: #eef9f7;
|
|
border-color: #c9e9e4;
|
|
outline: none;
|
|
}
|
|
|
|
.assistant-mode-draft-status {
|
|
margin: 0 10px 9px;
|
|
padding: 7px 9px;
|
|
border-radius: 8px;
|
|
font-size: 9px;
|
|
font-weight: 750;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.assistant-mode-draft-status[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.assistant-mode-draft-status.working {
|
|
color: #365bae;
|
|
background: #eff4ff;
|
|
}
|
|
|
|
.assistant-mode-draft-status.success {
|
|
color: #087854;
|
|
background: #ebf9f3;
|
|
}
|
|
|
|
.assistant-mode-draft-status.failed {
|
|
color: #b53845;
|
|
background: #fff0f2;
|
|
}
|
|
|
|
.assistant-mode-draft-status.superseded {
|
|
color: #687386;
|
|
background: #f1f3f6;
|
|
}
|
|
|
|
.assistant-mode-draft.is-superseded {
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.assistant-mode-draft.is-saved {
|
|
border-color: #bfe3d4;
|
|
}
|
|
|
|
.assistant-mode-created {
|
|
width: 100%;
|
|
max-width: 290px;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 9px 10px;
|
|
color: #163f34;
|
|
background: #f0faf6;
|
|
border: 1px solid #c9eadc;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.assistant-mode-created-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #0c9b63;
|
|
background: #fff;
|
|
border-radius: 9px;
|
|
box-shadow: 0 4px 12px rgba(12, 155, 99, 0.1);
|
|
}
|
|
|
|
.assistant-mode-created-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.assistant-mode-created-copy {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.assistant-mode-created-copy small,
|
|
.assistant-mode-created-copy strong {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.assistant-mode-created-copy small {
|
|
color: #578274;
|
|
font-size: 9px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.assistant-mode-created-copy strong {
|
|
font-size: 12px;
|
|
font-weight: 820;
|
|
}
|
|
|
|
.assistant-mode-created button {
|
|
min-height: 29px;
|
|
padding: 5px 9px;
|
|
color: #087854;
|
|
background: #fff;
|
|
border: 1px solid #b8ddcf;
|
|
border-radius: 8px;
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.assistant-mode-created button:hover,
|
|
.assistant-mode-created button:focus-visible {
|
|
color: #fff;
|
|
background: #0c9b63;
|
|
border-color: #0c9b63;
|
|
outline: none;
|
|
}
|
|
|
|
.assistant-control-suggestions {
|
|
width: 100%;
|
|
max-width: 314px;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
gap: 7px;
|
|
padding: 10px;
|
|
background: color-mix(in oklch, var(--card) 92%, var(--secondary));
|
|
border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border));
|
|
border-radius: 14px;
|
|
box-shadow: 0 8px 24px color-mix(in oklch, var(--foreground) 6%, transparent);
|
|
}
|
|
|
|
.assistant-message-control-suggestions {
|
|
width: auto;
|
|
max-width: none;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.assistant-message-control-suggestions .assistant-message-body {
|
|
min-width: 0;
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.assistant-control-suggestions-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0;
|
|
color: var(--assistant-muted, #64748b);
|
|
font-size: 10px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.assistant-control-suggestions-title svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
color: var(--primary, #275df5);
|
|
}
|
|
|
|
.assistant-control-suggestion-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.assistant-control-suggestion {
|
|
width: 100%;
|
|
min-height: 46px;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr) 16px;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 7px 9px;
|
|
color: var(--assistant-text, #233044);
|
|
text-align: left;
|
|
background: var(--card, #fff);
|
|
border: 1px solid var(--border, #dce3ed);
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease,
|
|
transform 150ms ease, opacity 150ms ease;
|
|
}
|
|
|
|
.assistant-control-suggestion:hover:not(:disabled) {
|
|
background: color-mix(in oklch, var(--primary) 5%, var(--card));
|
|
border-color: color-mix(in oklch, var(--primary) 38%, var(--border));
|
|
box-shadow: 0 5px 14px color-mix(in oklch, var(--primary) 10%, transparent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.assistant-control-suggestion:focus-visible {
|
|
border-color: var(--ring, #275df5);
|
|
outline: 3px solid color-mix(in oklch, var(--ring, #275df5) 18%, transparent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.assistant-control-suggestion:disabled {
|
|
cursor: wait;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.assistant-control-suggestion.is-sending {
|
|
color: var(--status-info-foreground, #1741ad);
|
|
background: var(--status-info-soft, #edf2ff);
|
|
border-color: color-mix(in oklch, var(--status-info, #275df5) 36%, var(--border));
|
|
opacity: 1;
|
|
}
|
|
|
|
.assistant-control-suggestion-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--primary, #275df5);
|
|
background: color-mix(in oklch, var(--primary) 9%, transparent);
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.assistant-control-suggestion-icon svg,
|
|
.assistant-control-suggestion-arrow {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.assistant-control-suggestion-copy {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.assistant-control-suggestion-copy strong,
|
|
.assistant-control-suggestion-copy small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.assistant-control-suggestion-copy strong {
|
|
color: inherit;
|
|
font-size: 11px;
|
|
font-weight: 780;
|
|
}
|
|
|
|
.assistant-control-suggestion-copy small {
|
|
color: var(--assistant-muted, #64748b);
|
|
font-size: 8px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.assistant-control-suggestion-arrow {
|
|
color: var(--assistant-muted, #64748b);
|
|
}
|
|
|
|
.assistant-thinking {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #536277;
|
|
}
|
|
|
|
.assistant-thinking span {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.assistant-thinking i {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #7792d8;
|
|
border-radius: 50%;
|
|
animation: assistant-dot 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.assistant-thinking i:nth-of-type(2) { animation-delay: 120ms; }
|
|
.assistant-thinking i:nth-of-type(3) { animation-delay: 240ms; }
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .command-composer {
|
|
height: auto;
|
|
min-height: 66px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
border: 1px solid #cfd7e3;
|
|
border-radius: 18px;
|
|
box-shadow: 0 9px 24px rgba(32, 54, 88, 0.07);
|
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .command-composer:focus-within {
|
|
border-color: rgba(39, 93, 245, 0.58);
|
|
box-shadow: 0 0 0 3px rgba(39, 93, 245, 0.08), 0 9px 24px rgba(32, 54, 88, 0.07);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form #utterance {
|
|
width: 100%;
|
|
height: 64px;
|
|
min-height: 64px;
|
|
max-height: 116px;
|
|
padding: 12px 100px 25px 16px;
|
|
color: #172033;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: inherit;
|
|
outline: 0;
|
|
font: 520 13px/1.45 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
|
|
overflow-y: hidden;
|
|
resize: none;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form #utterance.is-scrollable {
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-gutter: stable;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form #utterance:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .composer-hint {
|
|
right: 108px;
|
|
bottom: 7px;
|
|
color: #8a96a8;
|
|
font-size: 8.5px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-dictation {
|
|
top: 50%;
|
|
right: 53px;
|
|
bottom: auto;
|
|
z-index: 14;
|
|
display: grid !important;
|
|
color: #56657a;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-dictation.is-armed {
|
|
color: #275df5;
|
|
background: rgba(39, 93, 245, 0.09);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-dictation.is-listening {
|
|
color: #fff;
|
|
background: #275df5;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-dictation.is-processing {
|
|
color: #275df5;
|
|
background: rgba(39, 93, 245, 0.09);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-status {
|
|
right: 98px;
|
|
bottom: 5px;
|
|
left: 14px;
|
|
display: block;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-status:empty {
|
|
display: none;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .primary-action {
|
|
width: 38px;
|
|
height: 38px;
|
|
min-height: 38px;
|
|
top: 50%;
|
|
right: 9px;
|
|
bottom: auto;
|
|
transform: translateY(-50%);
|
|
background: #275df5;
|
|
box-shadow: 0 7px 17px rgba(39, 93, 245, 0.25);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .primary-action:hover:not(:disabled),
|
|
.console-v2.assistant-chat-enabled .v2-request-form .primary-action:focus-visible {
|
|
background: #174ce1;
|
|
transform: translateY(-50%) scale(1.04);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .primary-action.assistant-stop {
|
|
background: #17213a;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .primary-action.assistant-stop svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
@keyframes assistant-message-in {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes assistant-spin { to { transform: rotate(360deg); } }
|
|
|
|
@keyframes assistant-dot {
|
|
0%, 70%, 100% { opacity: 0.35; transform: translateY(0); }
|
|
35% { opacity: 1; transform: translateY(-2px); }
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.console-v2.assistant-chat-enabled {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .workspace {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 100dvh;
|
|
display: block;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .command-panel.v2-sidebar {
|
|
display: none !important;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel {
|
|
width: 100%;
|
|
height: 100dvh;
|
|
min-height: 100dvh;
|
|
grid-template-rows: 52px auto minmax(0, 1fr);
|
|
gap: 8px;
|
|
padding: 0 8px 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-output-shell {
|
|
display: grid !important;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .joint-twin-shell.v2-output-page {
|
|
grid-template-columns: minmax(0, 1fr) !important;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .joint-twin-shell > .twin-band {
|
|
width: 100%;
|
|
max-width: none;
|
|
grid-column: 1 !important;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-unified-right-rail {
|
|
display: none !important;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-operation-shell {
|
|
width: calc(100vw - 16px);
|
|
height: auto;
|
|
min-height: 0;
|
|
top: 8px;
|
|
right: 8px;
|
|
bottom: 8px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-module-switcher {
|
|
min-width: 0;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .assistant-message {
|
|
max-width: 92%;
|
|
}
|
|
|
|
.assistant-drawer-toggle {
|
|
right: auto;
|
|
bottom: 14px;
|
|
left: 14px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-natural-panel {
|
|
padding: 14px 12px 12px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-operation-heading h2 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.assistant-messages {
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.assistant-message {
|
|
max-width: 96%;
|
|
}
|
|
|
|
.assistant-avatar {
|
|
width: 27px;
|
|
height: 27px;
|
|
flex-basis: 27px;
|
|
}
|
|
|
|
.assistant-message-content {
|
|
padding: 9px 11px;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .composer-hint {
|
|
display: none;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form #utterance {
|
|
padding-right: 96px;
|
|
}
|
|
|
|
.assistant-drawer-toggle {
|
|
width: 54px;
|
|
min-width: 54px;
|
|
height: 54px;
|
|
padding: 0;
|
|
}
|
|
|
|
.assistant-drawer-toggle span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.assistant-message,
|
|
.assistant-thinking i,
|
|
.assistant-action-status.working svg,
|
|
.assistant-drawer-toggle,
|
|
.console-v2.assistant-chat-enabled .v2-operation-shell {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
/* Shared AI light-blue palette -------------------------------------------
|
|
Text stays layered: ink blue for headings, blue-gray for reading text,
|
|
muted slate for metadata, and white only on saturated controls. */
|
|
.console-v2.assistant-chat-enabled {
|
|
--assistant-heading: var(--heading-foreground);
|
|
--assistant-text: var(--body-foreground);
|
|
--assistant-muted: var(--subtle-foreground);
|
|
--assistant-surface: var(--card);
|
|
--assistant-surface-soft: color-mix(in oklch, var(--card) 74%, var(--secondary));
|
|
--assistant-border: var(--border);
|
|
--assistant-shadow: color-mix(in oklch, var(--foreground) 12%, transparent);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-operation-shell {
|
|
color: var(--assistant-text);
|
|
background:
|
|
radial-gradient(circle at 88% 0%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 16rem),
|
|
linear-gradient(165deg, var(--assistant-surface), var(--assistant-surface-soft));
|
|
border-color: var(--assistant-border);
|
|
box-shadow:
|
|
0 26px 70px var(--assistant-shadow),
|
|
0 8px 24px color-mix(in oklch, var(--primary) 8%, transparent);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-natural-panel {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-operation-heading {
|
|
border-bottom-color: var(--assistant-border);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-operation-heading h2 {
|
|
color: var(--assistant-heading);
|
|
}
|
|
|
|
.assistant-drawer-actions .context-reset,
|
|
.assistant-drawer-close {
|
|
color: var(--assistant-muted);
|
|
}
|
|
|
|
.assistant-drawer-actions .context-reset:hover,
|
|
.assistant-drawer-actions .context-reset:focus-visible,
|
|
.assistant-drawer-close:hover,
|
|
.assistant-drawer-close:focus-visible {
|
|
color: var(--accent-foreground);
|
|
background: var(--accent);
|
|
}
|
|
|
|
.assistant-drawer-toggle,
|
|
.assistant-avatar,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .primary-action {
|
|
color: var(--primary-foreground);
|
|
background: var(--primary);
|
|
border-color: color-mix(in oklch, var(--primary-foreground) 42%, transparent);
|
|
box-shadow: 0 12px 30px color-mix(in oklch, var(--primary) 28%, transparent);
|
|
}
|
|
|
|
.assistant-drawer-toggle:hover,
|
|
.assistant-drawer-toggle:focus-visible {
|
|
box-shadow: 0 16px 36px color-mix(in oklch, var(--primary) 34%, transparent);
|
|
outline-color: color-mix(in oklch, var(--primary) 18%, transparent);
|
|
}
|
|
|
|
.assistant-drawer-toggle b {
|
|
background: var(--status-warning);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.assistant-transcript {
|
|
scrollbar-color: color-mix(in oklch, var(--primary) 26%, transparent) transparent;
|
|
}
|
|
|
|
.assistant-message-content {
|
|
color: var(--assistant-text);
|
|
background: color-mix(in oklch, var(--assistant-surface) 94%, transparent);
|
|
border-color: var(--assistant-border);
|
|
box-shadow: 0 4px 14px color-mix(in oklch, var(--foreground) 5%, transparent);
|
|
}
|
|
|
|
.assistant-message-user .assistant-message-content {
|
|
color: var(--secondary-foreground);
|
|
background: var(--secondary);
|
|
border-color: color-mix(in oklch, var(--primary) 24%, var(--assistant-border));
|
|
}
|
|
|
|
.assistant-message-content code {
|
|
color: var(--status-info-foreground);
|
|
background: var(--status-info-soft);
|
|
}
|
|
|
|
.assistant-message-content pre {
|
|
color: var(--primary-foreground);
|
|
background: color-mix(in oklch, var(--foreground) 91%, var(--primary));
|
|
}
|
|
|
|
.assistant-action-status,
|
|
.assistant-thinking {
|
|
color: var(--assistant-muted);
|
|
}
|
|
|
|
.assistant-action-status.working svg {
|
|
color: var(--status-info);
|
|
}
|
|
|
|
.assistant-action-status.success {
|
|
color: var(--status-success-foreground);
|
|
}
|
|
|
|
.assistant-action-status.failed {
|
|
color: var(--status-error-foreground);
|
|
}
|
|
|
|
.assistant-mode-guide .assistant-message-content {
|
|
background: linear-gradient(145deg, var(--card), var(--secondary));
|
|
border-color: color-mix(in oklch, var(--primary) 24%, var(--border));
|
|
}
|
|
|
|
.assistant-mode-draft {
|
|
color: var(--assistant-text);
|
|
background: var(--assistant-surface);
|
|
border-color: var(--assistant-border);
|
|
box-shadow: 0 8px 24px color-mix(in oklch, var(--foreground) 7%, transparent);
|
|
}
|
|
|
|
.assistant-mode-draft > header strong,
|
|
.assistant-mode-draft-row > strong,
|
|
.assistant-mode-created-copy strong {
|
|
color: var(--assistant-heading);
|
|
}
|
|
|
|
.assistant-mode-draft > header small,
|
|
.assistant-mode-draft-row > svg,
|
|
.assistant-mode-created-copy small {
|
|
color: var(--assistant-muted);
|
|
}
|
|
|
|
.assistant-mode-draft-badge {
|
|
color: var(--status-info-foreground);
|
|
background: var(--status-info-soft);
|
|
}
|
|
|
|
.assistant-mode-draft-list,
|
|
.assistant-mode-draft-row + .assistant-mode-draft-row {
|
|
border-color: var(--assistant-border);
|
|
}
|
|
|
|
.assistant-mode-draft-row > span {
|
|
color: var(--assistant-text);
|
|
}
|
|
|
|
.assistant-mode-draft-save {
|
|
color: var(--primary-foreground);
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
box-shadow: 0 6px 14px color-mix(in oklch, var(--primary) 20%, transparent);
|
|
}
|
|
|
|
.assistant-mode-draft-save:hover,
|
|
.assistant-mode-draft-save:focus-visible {
|
|
color: var(--primary-foreground);
|
|
background: color-mix(in oklch, var(--primary) 86%, var(--heading-foreground));
|
|
outline-color: color-mix(in oklch, var(--primary) 16%, transparent);
|
|
}
|
|
|
|
.assistant-mode-draft-trial,
|
|
.assistant-mode-created button {
|
|
color: var(--primary);
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.assistant-mode-draft-trial:hover,
|
|
.assistant-mode-draft-trial:focus-visible,
|
|
.assistant-mode-created button:hover,
|
|
.assistant-mode-created button:focus-visible {
|
|
color: var(--primary-foreground);
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.assistant-mode-draft-status.working {
|
|
color: var(--status-info-foreground);
|
|
background: var(--status-info-soft);
|
|
}
|
|
|
|
.assistant-mode-draft-status.success {
|
|
color: var(--status-success-foreground);
|
|
background: var(--status-success-soft);
|
|
}
|
|
|
|
.assistant-mode-draft-status.failed {
|
|
color: var(--status-error-foreground);
|
|
background: var(--status-error-soft);
|
|
}
|
|
|
|
.assistant-mode-draft-status.superseded {
|
|
color: var(--assistant-muted);
|
|
background: var(--muted);
|
|
}
|
|
|
|
.assistant-mode-draft.is-saved {
|
|
border-color: color-mix(in oklch, var(--status-success) 36%, var(--border));
|
|
}
|
|
|
|
.assistant-mode-created {
|
|
color: var(--status-success-foreground);
|
|
background: var(--status-success-soft);
|
|
border-color: color-mix(in oklch, var(--status-success) 32%, var(--border));
|
|
}
|
|
|
|
.assistant-mode-created-icon {
|
|
color: var(--status-success-foreground);
|
|
background: var(--card);
|
|
box-shadow: 0 4px 12px color-mix(in oklch, var(--status-success) 12%, transparent);
|
|
}
|
|
|
|
.assistant-thinking i {
|
|
background: color-mix(in oklch, var(--primary) 62%, var(--muted-foreground));
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .command-composer {
|
|
background: var(--card);
|
|
border-color: var(--input);
|
|
box-shadow: 0 9px 24px color-mix(in oklch, var(--foreground) 8%, transparent);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form .command-composer:focus-within {
|
|
border-color: var(--ring);
|
|
box-shadow:
|
|
0 0 0 3px color-mix(in oklch, var(--ring) 15%, transparent),
|
|
0 9px 24px color-mix(in oklch, var(--foreground) 8%, transparent);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-request-form #utterance {
|
|
color: var(--assistant-text);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .composer-hint,
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-dictation {
|
|
color: var(--assistant-muted);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-dictation.is-armed,
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-dictation.is-processing {
|
|
color: var(--status-info-foreground);
|
|
background: var(--status-info-soft);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .speech-dictation.is-listening {
|
|
color: var(--primary-foreground);
|
|
background: var(--primary);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .primary-action:hover:not(:disabled),
|
|
.console-v2.assistant-chat-enabled .v2-request-form .primary-action:focus-visible {
|
|
background: color-mix(in oklch, var(--primary) 86%, var(--heading-foreground));
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled .v2-request-form .primary-action.assistant-stop {
|
|
background: var(--heading-foreground);
|
|
}
|
|
|
|
/* The AI assistant uses the same persistent top-right panel control. */
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync #v2PanelControlDock > .assistant-drawer-toggle,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open #v2PanelControlDock > .assistant-drawer-toggle {
|
|
width: 38px !important;
|
|
height: 38px !important;
|
|
min-width: 38px !important;
|
|
min-height: 38px !important;
|
|
position: relative !important;
|
|
inset: auto !important;
|
|
display: inline-grid !important;
|
|
padding: 0 !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
pointer-events: auto !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
@media (min-width: 901px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open.v2-sidebar-collapsed .workspace {
|
|
grid-template-columns: 0 minmax(0, 1fr);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open.v2-sidebar-collapsed .command-panel.v2-sidebar {
|
|
width: 0;
|
|
min-width: 0;
|
|
display: flex !important;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .joint-twin-shell[data-open-panels="none"] {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync:not(.v2-sidebar-collapsed) .command-panel.v2-sidebar {
|
|
width: min(86vw, 320px);
|
|
height: auto;
|
|
position: fixed;
|
|
top: 60px;
|
|
bottom: 8px;
|
|
left: 8px;
|
|
z-index: 140;
|
|
display: flex !important;
|
|
padding: 12px;
|
|
overflow: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
box-shadow: 0 22px 58px color-mix(in oklch, var(--foreground) 20%, transparent);
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .joint-twin-shell .v2-unified-right-rail:not([hidden]) {
|
|
width: min(86vw, 360px);
|
|
height: auto;
|
|
position: fixed;
|
|
top: 60px;
|
|
right: 8px;
|
|
bottom: 8px;
|
|
z-index: 140;
|
|
display: grid !important;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
box-shadow: 0 22px 58px color-mix(in oklch, var(--foreground) 20%, transparent);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-operation-shell {
|
|
/* Share the content row on compact screens, never cover the mode rail. */
|
|
position: relative;
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
width: 100%;
|
|
top: auto;
|
|
right: auto;
|
|
bottom: auto;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-module-switcher {
|
|
position: relative;
|
|
z-index: 150;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync #v2PanelControlDock > .assistant-drawer-toggle,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open #v2PanelControlDock > .assistant-drawer-toggle {
|
|
width: 36px !important;
|
|
height: 36px !important;
|
|
min-width: 36px !important;
|
|
min-height: 36px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 460px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync #v2PanelControlDock > .assistant-drawer-toggle,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open #v2PanelControlDock > .assistant-drawer-toggle {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
min-width: 32px !important;
|
|
min-height: 32px !important;
|
|
}
|
|
}
|
|
|
|
/* Compact command receipt inside each AI assistant response. */
|
|
.assistant-message-with-dispatched-controls {
|
|
width: 100%;
|
|
max-width: none;
|
|
align-self: stretch;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr);
|
|
column-gap: 9px;
|
|
row-gap: 7px;
|
|
}
|
|
|
|
.assistant-message-with-dispatched-controls > .assistant-avatar {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.assistant-message-with-dispatched-controls .assistant-message-body {
|
|
min-width: 0;
|
|
display: contents;
|
|
}
|
|
|
|
.assistant-message-with-dispatched-controls .assistant-message-body > :not(
|
|
.assistant-dispatched-controls-vue-host,
|
|
.assistant-dispatched-controls
|
|
) {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.assistant-dispatched-controls-vue-host {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
.assistant-message-with-dispatched-controls .assistant-dispatched-controls-vue-host,
|
|
.assistant-message-with-dispatched-controls .assistant-message-body > .assistant-dispatched-controls {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.assistant-dispatched-controls {
|
|
width: 100%;
|
|
max-width: none;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
color: var(--assistant-text, #233044);
|
|
background: color-mix(in oklch, var(--card) 91%, var(--accent));
|
|
border: 1px solid color-mix(in oklch, var(--primary) 18%, var(--border));
|
|
border-radius: 14px;
|
|
box-shadow: 0 8px 24px color-mix(in oklch, var(--foreground) 7%, transparent);
|
|
}
|
|
|
|
.assistant-dispatched-controls > summary {
|
|
min-height: 46px;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr) auto 18px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 7px 11px;
|
|
color: var(--heading-foreground, #1e2f46);
|
|
cursor: pointer;
|
|
list-style: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.assistant-dispatched-controls > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.assistant-dispatched-controls > summary:focus-visible {
|
|
outline: 2px solid color-mix(in oklch, var(--primary) 42%, transparent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.assistant-dispatched-controls-heading-icon,
|
|
.assistant-dispatched-control-icon {
|
|
display: inline-grid;
|
|
place-items: center;
|
|
color: var(--primary, #2771e7);
|
|
}
|
|
|
|
.assistant-dispatched-controls-heading-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: color-mix(in oklch, var(--primary) 9%, var(--card));
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.assistant-dispatched-controls-heading-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke-width: 1.9;
|
|
}
|
|
|
|
.assistant-dispatched-controls > summary > b {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.assistant-dispatched-controls-count {
|
|
min-width: 25px;
|
|
height: 22px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
padding: 0 7px;
|
|
color: var(--primary, #2771e7);
|
|
background: color-mix(in oklch, var(--primary) 10%, var(--card));
|
|
border-radius: 999px;
|
|
font-size: 10px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.assistant-dispatched-controls-chevron {
|
|
width: 17px;
|
|
height: 17px;
|
|
color: var(--muted-foreground, #67768b);
|
|
transition: transform 160ms ease;
|
|
}
|
|
|
|
.assistant-dispatched-controls[open] > summary .assistant-dispatched-controls-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.assistant-dispatched-controls-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
border-top: 1px solid color-mix(in oklch, var(--primary) 17%, var(--border));
|
|
}
|
|
|
|
.assistant-dispatched-controls-list > li {
|
|
min-height: 55px;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.assistant-dispatched-controls-list > li + li {
|
|
border-top: 1px solid color-mix(in oklch, var(--primary) 17%, var(--border));
|
|
}
|
|
|
|
.assistant-dispatched-control-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.assistant-dispatched-control-icon svg {
|
|
width: 17px;
|
|
height: 17px;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.assistant-dispatched-control-label {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--muted-foreground, #5b687a);
|
|
font-size: 12px;
|
|
font-weight: 680;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.assistant-dispatched-control-value {
|
|
max-width: 112px;
|
|
overflow: hidden;
|
|
color: var(--heading-foreground, #26364b);
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* The function-mode strip is now the only homepage header. */
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .main-panel {
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel > .v2-mode-rail {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-output-shell,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .v2-output-shell {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel > .v2-mode-rail .v2-module-switcher,
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .main-panel > .v2-mode-rail .v2-module-switcher {
|
|
width: auto;
|
|
min-width: max-content;
|
|
min-height: 0;
|
|
position: static;
|
|
inset: auto;
|
|
z-index: auto;
|
|
display: block;
|
|
grid-column: auto;
|
|
grid-row: auto;
|
|
gap: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
@media (min-width: 901px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync.assistant-drawer-open .v2-operation-shell {
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .main-panel {
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-output-shell {
|
|
grid-row: 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.console-v2.assistant-chat-enabled.v2-passive-display.v2-interactive-sync .v2-operation-shell {
|
|
top: 108px;
|
|
}
|
|
|
|
.assistant-dispatched-controls {
|
|
max-width: none;
|
|
}
|
|
}
|