.review-overlay { display: flex; align-items: center; justify-content: center; } .review-preview-modal { width: min(980px, calc(100vw - 40px)); max-height: min(92vh, calc(100vh - 32px)); margin: auto; flex: none; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 4px; background: #fbfdff; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22), 0 2px 12px rgba(15, 23, 42, 0.08); border: 1px solid #e7eef6; } .review-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid #eef2f7; } .review-preview-head h3 { margin-top: 12px; color: #0f172a; font-size: 22px; font-weight: 900; line-height: 1.35; } .review-preview-body { min-height: 0; display: grid; place-items: center; padding: 18px; background: rgba(248, 250, 252, 0.88); } .review-preview-body.image img { max-width: 100%; max-height: calc(92vh - 170px); display: block; border-radius: 4px; object-fit: contain; box-shadow: 0 16px 34px rgba(148, 163, 184, 0.26); } .review-preview-body.pdf iframe { width: 100%; height: min(78vh, 820px); border: 0; border-radius: 4px; background: #fff; } .steward-plan-block { margin-top: 12px; display: grid; gap: 10px; } .steward-task-card, .steward-attachment-card { border: 1px solid #dbe7f2; border-radius: 4px; background: #f8fbfe; } .steward-task-list, .steward-attachment-list { display: grid; gap: 8px; } .steward-task-card, .steward-attachment-card { padding: 10px 12px; } .steward-task-card header, .steward-attachment-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .steward-task-card header span, .steward-attachment-card header span { color: #24618a; font-size: 12px; font-weight: 700; } .steward-task-card header small, .steward-attachment-card header small { margin-left: auto; color: #71879b; font-size: 12px; } .steward-task-card > strong { display: block; color: #1f3448; font-size: 14px; } .steward-task-card p, .steward-attachment-card p { margin: 5px 0 0; color: #5c7185; font-size: 12px; line-height: 1.55; } .steward-task-meta, .steward-attachment-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .steward-task-meta span, .steward-attachment-chip { border: 1px solid #d5e2ee; border-radius: 4px; background: #fff; color: #49677f; font-size: 12px; line-height: 1.4; padding: 3px 7px; } .steward-task-missing { margin-top: 9px; padding-top: 9px; border-top: 1px dashed #d5e2ee; display: grid; gap: 6px; } .steward-task-missing-label { color: #5d7489; font-size: 12px; font-weight: 780; } .steward-task-missing-chip { display: grid; gap: 2px; padding: 7px 8px; border: 1px solid #e1e8f0; border-radius: 4px; background: #ffffff; } .steward-task-missing-chip strong { color: #1f3448; font-size: 12px; font-weight: 820; line-height: 1.35; } .steward-task-missing-chip small { color: #6b7f92; font-size: 11px; line-height: 1.45; } .steward-attachment-chip.include { border-color: #c7deef; background: #eef7fc; color: #24618a; } .steward-attachment-chip.exclude { border-color: #ecd6c4; background: #fff8f2; color: #8a5a24; } .welcome-quick-actions { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(203, 213, 225, 0.82); } .welcome-quick-actions-title { margin: 0 0 16px !important; color: #64748b; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; } .welcome-quick-action-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .welcome-quick-action-btn { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid #cbd5e1; border-radius: 4px; background: #ffffff; color: #334155; font-size: var(--wb-fs-chip); font-weight: 600; line-height: 1.2; transition: all 0.2s ease; } .welcome-quick-action-btn i { font-size: 14px; color: #64748b; transition: color 0.2s ease; } .welcome-quick-action-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--theme-primary); background: var(--theme-primary-soft); color: var(--theme-primary-active); box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.1); } .welcome-quick-action-btn:hover:not(:disabled) i { color: var(--theme-primary-active); } .welcome-quick-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .welcome-grid { display: grid; gap: 12px; } .welcome-card { padding: 14px; border-radius: 4px; background: #f8fafc; } .welcome-card i { color: var(--theme-primary); font-size: var(--wb-fs-welcome); } .welcome-card strong { display: block; margin-top: 10px; } .assistant-modal-enter-active, .assistant-modal-leave-active { transition: opacity 220ms ease; } .assistant-modal-enter-active .assistant-modal, .assistant-modal-leave-active .assistant-modal { transition: transform 260ms ease, opacity 220ms ease; } .assistant-modal-enter-from, .assistant-modal-leave-to { opacity: 0; } .assistant-modal-enter-from .assistant-modal, .assistant-modal-leave-to .assistant-modal { transform: translateY(10px) scale(0.985); opacity: 0; } .insight-switch-enter-active, .insight-switch-leave-active { transition: opacity 180ms ease, transform 180ms ease; } .insight-switch-enter-from, .insight-switch-leave-to { opacity: 0; transform: translateY(8px); } /* 笔记本和中等屏:工作台正文字号整体下调一档 */ @media (max-width: 1680px) { .assistant-modal-stage { --wb-fs-title: 19px; --wb-fs-desc: 12px; --wb-fs-badge: 11px; --wb-fs-bubble: 12px; --wb-fs-bubble-meta: 11px; --wb-fs-bubble-time: 11px; --wb-fs-chip: 11px; --wb-fs-composer: 13px; --wb-fs-tool-icon: 16px; --wb-fs-md-h1: 12px; --wb-fs-md-h2: 12px; --wb-fs-md-h3: 12px; --wb-fs-insight-title: 17px; --wb-fs-insight-num: 17px; --wb-fs-insight-body: 11px; --wb-fs-insight-h4: 14px; --wb-fs-metric: 12px; --wb-fs-metric-strong: 12px; --wb-fs-welcome: 16px; } .assistant-modal-stage .message-answer-markdown :deep(table) { font-size: 12px; } .assistant-modal-stage .intent-pill { font-size: var(--wb-fs-chip); } } @media (max-width: 1440px) { .assistant-modal-stage { --wb-fs-title: 18px; --wb-fs-bubble: 12px; --wb-fs-bubble-meta: 11px; --wb-fs-composer: 12px; --wb-fs-insight-title: 16px; --wb-fs-insight-num: 16px; --wb-fs-md-h1: 12px; --wb-fs-md-h2: 12px; --wb-fs-md-h3: 12px; --wb-fs-insight-h4: 13px; --wb-fs-welcome: 16px; } } /* 大屏:左右分栏,右侧详情区宽度随视口收缩 */ @media (min-width: 1441px) and (max-width: 1680px) { .insight-panel-shell { width: clamp(280px, 26vw, 360px); } } /* 笔记本常见宽度:改为上下布局,对话区占满宽度,避免侧栏挤占 */ @media (max-width: 1440px) { .assistant-layout { flex-direction: column; } .dialog-panel { flex: 1 1 0; height: auto; min-height: 0; max-height: 100%; } .insight-panel-shell { width: 100%; flex: 0 0 auto; max-height: min(38dvh, 400px); transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1); } .insight-panel-shell.collapsed { max-height: 0; } .insight-panel { width: 100%; min-height: min(280px, 32dvh); } .insight-panel-shell.collapsed .insight-panel { transform: translateY(-12px); } .review-side-grid.compact { grid-template-columns: 1fr; } } /* 矮屏笔记本:压缩顶部栏与间距,把高度留给对话列表 */ @media (max-height: 820px) { .assistant-modal-stage { --wb-fs-title: 17px; --wb-fs-bubble: 12px; --wb-fs-composer: 12px; --wb-fs-insight-title: 15px; --wb-fs-insight-num: 15px; } .assistant-header { padding-top: 12px; padding-bottom: 10px; } .assistant-header-actions { top: 12px; right: 12px; } .assistant-layout { padding: 10px; gap: 10px; } .dialog-toolbar { padding: 12px 14px 10px; } .message-list { padding: 12px; gap: 10px; } .composer-shell-body { padding: 4px 10px; } } @media (max-width: 1280px) { .insight-panel-shell:not(.collapsed) { max-height: min(34dvh, 360px); } } @media (max-width: 760px) { :global(.assistant-el-overlay .el-overlay-dialog) { height: 100dvh; max-height: 100dvh; padding: 0; } :global(.assistant-el-dialog.el-dialog.is-fullscreen) { border-radius: 0; padding: 0; } .assistant-overlay { --assistant-viewport-inset: 0; } :global(.assistant-el-overlay) { --assistant-viewport-inset: 0; } .assistant-modal, .assistant-modal-stage { width: 100%; height: 100%; min-height: 0; max-height: 100%; border-radius: 0; } .assistant-modal-stage { height: 100dvh; max-height: 100dvh; border: 0; box-shadow: none; background: #f6f9fc; } .assistant-header { min-height: 58px; padding: calc(10px + env(safe-area-inset-top, 0px)) 138px 10px 12px; align-items: center; flex-direction: row; border-bottom: 1px solid #e5edf5; } .assistant-header-actions { top: calc(9px + env(safe-area-inset-top, 0px)); right: 10px; gap: 6px; width: auto; justify-content: flex-end; } .assistant-toggle-btn, .session-trash-btn, .assistant-close-btn, .close-btn { width: 38px; height: 38px; border-radius: 4px; font-size: 15px; } .assistant-title { font-size: 16px; line-height: 1.25; } .assistant-subtitle { display: none; } .flow-step-card header { align-items: flex-start; } .assistant-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; } .dialog-panel { border: 0; border-radius: 0; box-shadow: none; } .insight-panel-shell { position: absolute; inset: 0; z-index: 70; width: 100%; max-height: none; margin-left: 0; transform: translateX(100%); pointer-events: none; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } .assistant-layout.has-insight .insight-panel-shell { transform: translateX(0); pointer-events: auto; } .insight-panel-shell.collapsed { width: 100%; transform: translateX(100%); } .insight-panel { border-radius: 0; } .composer-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--composer-control-size, 40px); align-items: end; gap: 8px; --composer-control-size: 40px; } .composer-leading-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; } .composer-leading-actions .composer-side-btn, .composer-leading-actions .tool-btn { width: 100%; } .composer-date-anchor, .travel-calculator-anchor { min-width: 0; } .composer-row .composer-shell { min-width: 0; } .composer-shell-body { align-items: flex-start; padding: 6px 10px; } .composer-shell textarea { flex-basis: 100%; min-height: 40px; max-height: 104px; padding: 8px 2px; line-height: 20px; } .travel-calculator-form { grid-template-columns: 1fr; } .dialog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px 10px; overflow: visible; } .dialog-toolbar-label { min-width: 0; } .shortcut-chip-wrap { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; } .shortcut-chip { width: 100%; min-width: 0; justify-content: center; } .shortcut-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .message-list { padding: 12px 10px; gap: 10px; } .message-avatar { width: 32px; height: 32px; } .message-bubble { max-width: 100%; padding: 10px 12px; } .message-suggested-actions { grid-template-columns: 1fr; } .composer { gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e5edf5; background: #fff; } .composer-files-panel { max-height: 30dvh; overflow-y: auto; padding: 10px; } .composer-date-popover, .travel-calculator-popover { position: fixed; left: 10px; right: 10px; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: min(58dvh, 420px); overflow-y: auto; } .composer-date-fields-range { grid-template-columns: 1fr; } .composer-date-range-sep { display: none; } .composer-files-head, .review-insight-title-row, .review-document-stage-head, .review-document-switch-head { align-items: flex-start; flex-direction: column; } .composer-files-actions, .review-document-nav { width: 100%; justify-content: space-between; } .metric-grid { grid-template-columns: 1fr; } .review-side-grid, .review-side-category-grid, .review-document-edit-grid { grid-template-columns: 1fr; } .review-pending-item { grid-template-columns: 42px minmax(0, 1fr); } .review-pending-status { grid-column: 2; justify-self: start; } .review-footer-btn-row { flex-direction: column; } .review-footer-btn { width: 100%; } .review-slot-grid, .review-doc-field-grid, .review-mini-grid { grid-template-columns: 1fr; } .review-document-plain, .review-document-bubble { grid-template-columns: 1fr; } .review-preview-modal { width: calc(100vw - 24px); } .review-confirm-actions { padding: 0 18px 18px; justify-content: stretch; } .primary-dialog-btn, .secondary-dialog-btn, .danger-dialog-btn { width: 100%; } }