/* 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: 10px; 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-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 { top: 60px; } .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; } }