From f6f787ff386603d5181bb2cc71fd8e525b725f45 Mon Sep 17 00:00:00 2001 From: caoxiaozhu Date: Thu, 21 May 2026 23:53:03 +0800 Subject: [PATCH] refactor(frontend): split large reimbursement and audit modules --- web/index.html | 1 + web/public/assets/favicon.svg | 5 + .../views/approval-center-view-part2.css | 336 + .../styles/views/approval-center-view.css | 336 - .../assets/styles/views/audit-view-part2.css | 1255 ++++ web/src/assets/styles/views/audit-view.css | 1261 +--- ...travel-reimbursement-create-view-part2.css | 1490 ++++ ...travel-reimbursement-create-view-part3.css | 1090 +++ ...travel-reimbursement-create-view-part4.css | 465 ++ .../travel-reimbursement-create-view.css | 3670 +--------- .../travel-request-detail-view-part2.css | 945 +++ .../views/travel-request-detail-view.css | 1115 +-- .../components/business/PersonalWorkbench.vue | 6 +- web/src/composables/useBackendHealth.js | 16 +- web/src/composables/useLoginView.js | 23 +- web/src/router/index.js | 2 +- web/src/services/api.js | 4 +- web/src/services/system.js | 7 +- web/src/utils/expenseAssistantActions.js | 40 + web/src/utils/reimbursementTextInference.js | 2 +- web/src/utils/suggestedActionKey.js | 6 + web/src/views/ApprovalCenterView.vue | 1 + web/src/views/AuditView.vue | 3 +- web/src/views/PersonalWorkbenchView.vue | 4 +- .../views/TravelReimbursementCreateView.vue | 215 +- web/src/views/TravelRequestDetailView.vue | 102 +- web/src/views/scripts/AuditView.js | 1745 +---- .../scripts/TravelReimbursementCreateView.js | 6273 ++--------------- .../views/scripts/TravelRequestDetailView.js | 727 +- web/src/views/scripts/auditViewMetadata.js | 328 + web/src/views/scripts/auditViewModel.js | 1315 ++++ .../views/scripts/auditViewRuntimeModel.js | 109 + .../travelReimbursementAttachmentModel.js | 428 ++ .../travelReimbursementConversationModel.js | 767 ++ .../travelReimbursementExpenseQueryModel.js | 268 + .../travelReimbursementReviewConstants.js | 149 + .../travelReimbursementReviewDocuments.js | 155 + .../scripts/travelReimbursementReviewModel.js | 1463 ++++ .../travelRequestDetailExpenseModel.js | 545 ++ .../scripts/travelRequestDetailInsights.js | 74 +- .../useTravelReimbursementAttachments.js | 305 + .../useTravelReimbursementComposerTools.js | 396 ++ .../scripts/useTravelReimbursementFlow.js | 704 ++ .../useTravelReimbursementReviewActions.js | 252 + .../useTravelReimbursementReviewDrawer.js | 422 ++ .../useTravelReimbursementSessionState.js | 335 + .../useTravelReimbursementSubmitComposer.js | 474 ++ web/tests/api-request.test.mjs | 1 + web/tests/backend-health-timeout.test.mjs | 43 + web/tests/reimbursementTextInference.test.mjs | 2 +- ...eimbursement-review-drawer-switch.test.mjs | 45 + ...travel-request-detail-risk-advice.test.mjs | 72 +- ...vel-request-detail-submit-confirm.test.mjs | 19 +- 53 files changed, 15637 insertions(+), 14179 deletions(-) create mode 100644 web/public/assets/favicon.svg create mode 100644 web/src/assets/styles/views/approval-center-view-part2.css create mode 100644 web/src/assets/styles/views/audit-view-part2.css create mode 100644 web/src/assets/styles/views/travel-reimbursement-create-view-part2.css create mode 100644 web/src/assets/styles/views/travel-reimbursement-create-view-part3.css create mode 100644 web/src/assets/styles/views/travel-reimbursement-create-view-part4.css create mode 100644 web/src/assets/styles/views/travel-request-detail-view-part2.css create mode 100644 web/src/utils/expenseAssistantActions.js create mode 100644 web/src/utils/suggestedActionKey.js create mode 100644 web/src/views/scripts/auditViewMetadata.js create mode 100644 web/src/views/scripts/auditViewModel.js create mode 100644 web/src/views/scripts/auditViewRuntimeModel.js create mode 100644 web/src/views/scripts/travelReimbursementAttachmentModel.js create mode 100644 web/src/views/scripts/travelReimbursementConversationModel.js create mode 100644 web/src/views/scripts/travelReimbursementExpenseQueryModel.js create mode 100644 web/src/views/scripts/travelReimbursementReviewConstants.js create mode 100644 web/src/views/scripts/travelReimbursementReviewDocuments.js create mode 100644 web/src/views/scripts/travelReimbursementReviewModel.js create mode 100644 web/src/views/scripts/travelRequestDetailExpenseModel.js create mode 100644 web/src/views/scripts/useTravelReimbursementAttachments.js create mode 100644 web/src/views/scripts/useTravelReimbursementComposerTools.js create mode 100644 web/src/views/scripts/useTravelReimbursementFlow.js create mode 100644 web/src/views/scripts/useTravelReimbursementReviewActions.js create mode 100644 web/src/views/scripts/useTravelReimbursementReviewDrawer.js create mode 100644 web/src/views/scripts/useTravelReimbursementSessionState.js create mode 100644 web/src/views/scripts/useTravelReimbursementSubmitComposer.js create mode 100644 web/tests/backend-health-timeout.test.mjs diff --git a/web/index.html b/web/index.html index 8ae61bb..4b1509f 100644 --- a/web/index.html +++ b/web/index.html @@ -3,6 +3,7 @@ + ReimburseOps - 企业报销智能运营台 diff --git a/web/public/assets/favicon.svg b/web/public/assets/favicon.svg new file mode 100644 index 0000000..f1c923a --- /dev/null +++ b/web/public/assets/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/src/assets/styles/views/approval-center-view-part2.css b/web/src/assets/styles/views/approval-center-view-part2.css new file mode 100644 index 0000000..0766248 --- /dev/null +++ b/web/src/assets/styles/views/approval-center-view-part2.css @@ -0,0 +1,336 @@ +.opinion-wrap textarea { + width: 100%; + min-height: 100px; + resize: none; + border: 1px solid #d7e0ea; + border-radius: 4px; + padding: 10px 12px; + color: #0f172a; + font-size: 13px; + line-height: 1.55; + transition: border-color 160ms ease, box-shadow 160ms ease; +} + +.opinion-wrap textarea::placeholder { + color: #94a3b8; +} + +.opinion-wrap textarea:focus { + border-color: #10b981; + box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); + outline: none; +} + +/* ── Side Cards ── */ +.side-card { + border-radius: 4px; + background: #fff; + border: 1px solid #edf2f7; + box-shadow: 0 1px 3px rgba(0, 0, 0, .04); + overflow: hidden; + transition: box-shadow 200ms ease; +} + +.side-card:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, .06); } + +.side-card .card-header { + padding: 12px 16px; +} + +.side-card.compact { + border-radius: 4px; +} + +/* ── Risk Card ── */ +.risk-total { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; + padding: 5px 12px; + border-radius: 3px; + font-size: 11px; +} + +.risk-total span { font-weight: 750; } + +.risk-total.high { + background: #fee2e2; + color: #dc2626; +} + +.risk-total.high strong { font-size: 16px; font-weight: 900; } + +.risk-items { + padding: 4px 14px 14px; + display: grid; + gap: 8px; +} + +.risk-row { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + border-radius: 4px; + border: 1px solid #f1f5f9; + transition: all 160ms ease; +} + +.risk-row:hover { border-color: #e2e8f0; background: #fafbfd; } + +.risk-icon { + width: 30px; height: 30px; + display: grid; place-items: center; + border-radius: 4px; + font-size: 16px; + flex-shrink: 0; +} + +.risk-row.high .risk-icon { background: #fef2f2; color: #ef4444; } +.risk-row.medium .risk-icon { background: #fff7ed; color: #f97316; } + +.risk-text { + flex: 1; + color: #334155; + font-size: 13px; + line-height: 1.4; +} + +.risk-level { + padding: 3px 8px; + border-radius: 3px; + font-size: 12px; + font-weight: 800; + flex-shrink: 0; +} + +.risk-level.high { background: #fef2f2; color: #ef4444; } +.risk-level.medium { background: #fff7ed; color: #f97316; } + +/* ── Side Dual ── */ +.side-dual { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.reminder-list { + margin: 0; + padding: 10px 16px 14px; + display: grid; + gap: 8px; + list-style: none; +} + +.reminder-list li { + display: flex; + align-items: flex-start; + gap: 8px; + color: #334155; + font-size: 12px; + line-height: 1.5; +} + +.reminder-list li i { + margin-top: 2px; + color: #f59e0b; + font-size: 14px; + flex-shrink: 0; +} + +.info-list { + display: grid; + grid-template-columns: auto 1fr; + gap: 6px 14px; + margin: 0; + padding: 10px 16px 14px; + font-size: 13px; +} + +.info-list dt { color: #94a3b8; font-weight: 700; } +.info-list dd { margin: 0; color: #0f172a; font-weight: 850; } + +/* ── Modal Footer ── */ +.modal-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 16px 28px; + background: #fff; + border-top: 1px solid #e8eef6; +} + +.footer-right { + display: flex; + gap: 10px; +} + +.action-btn { + height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 7px; + padding: 0 20px; + border-radius: 4px; + font-size: 14px; + font-weight: 800; + transition: all 180ms ease; + border: 1px solid transparent; +} + +.action-btn.back { + background: #f8fafc; + border-color: #e2e8f0; + color: #475569; +} + +.action-btn.back:hover { + background: #f1f5f9; + border-color: #cbd5e1; + color: #0f172a; +} + +.action-btn.supplement { + background: #fff; + border-color: #fed7aa; + color: #ea580c; +} + +.action-btn.supplement:hover { + background: #fff7ed; + box-shadow: 0 4px 12px rgba(234, 88, 12, .12); +} + +.action-btn.reject { + background: #fff; + border-color: #fecaca; + color: #ef4444; +} + +.action-btn.reject:hover { + background: #fef2f2; + box-shadow: 0 4px 12px rgba(239, 68, 68, .12); +} + +.action-btn.approve { + background: #059669; + color: #fff; + box-shadow: 0 4px 16px rgba(5, 150, 105, .25); +} + +.action-btn.approve:hover { + background: #047857; + box-shadow: 0 8px 24px rgba(5, 150, 105, .30); +} + +.action-btn:active { transform: scale(.97); } + +/* ── Modal Transitions ── */ +.detail-modal-enter-active { transition: opacity 260ms ease; } +.detail-modal-enter-active .detail-modal { transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 280ms ease; } + +.detail-modal-leave-active { transition: opacity 200ms ease; } +.detail-modal-leave-active .detail-modal { transition: transform 220ms ease, opacity 200ms ease; } + +.detail-modal-enter-from { opacity: 0; } +.detail-modal-enter-from .detail-modal { transform: translateY(16px); opacity: 0; } + +.detail-modal-leave-to { opacity: 0; } +.detail-modal-leave-to .detail-modal { transform: translateY(8px); opacity: 0; } + +/* ── Responsive ── */ +@media (max-width: 1320px) { + .list-toolbar, .list-foot { grid-template-columns: 1fr; } + + .detail-hero { + grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr)); + } + + .hero-summary-panel { + grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); + } + + .detail-expense-table { + overflow-x: auto; + } + + .detail-expense-table table { + min-width: 980px; + } + + .detail-modal { + width: calc(100vw - 40px); + height: calc(100vh - 40px); + } + + .body-grid { grid-template-columns: 1fr; } + .metrics-strip { grid-template-columns: repeat(2, 1fr); } + .side-dual { grid-template-columns: 1fr; } +} + +@media (max-width: 760px) { + .approval-list { padding: 16px; } + .status-tabs { gap: 18px; overflow-x: auto; } + .filter-set { width: 100%; } + .filter-btn, .page-size { width: 100%; } + .list-foot { justify-items: stretch; } + .pager, .page-size { justify-self: stretch; } + + .detail-hero { + grid-template-columns: 1fr 1fr; + gap: 12px; + padding: 16px; + } + + .applicant-card, + .hero-summary-panel, + .progress-line { + grid-column: 1 / -1; + } + + .hero-summary-panel { + grid-template-columns: 1fr; + } + + .hero-summary-item { + padding: 14px 0; + } + + .detail-card { + padding: 14px 16px; + } + + .detail-card-head { + flex-direction: column; + align-items: stretch; + } + + .detail-total { + align-self: flex-start; + } + + .detail-expense-table table { + min-width: 980px; + } + + .detail-modal { + width: 100vw; + height: 100vh; + max-width: 100vw; + max-height: 100vh; + border-radius: 0; + } + + .modal-header { padding: 16px 18px; flex-wrap: wrap; } + .header-right { width: 100%; justify-content: flex-end; } + .metrics-strip { grid-template-columns: 1fr 1fr; } + .summary-grid { grid-template-columns: 1fr; } + .progress-track { overflow-x: auto; padding-bottom: 8px; } + .node-label strong { font-size: 11px; } + .modal-footer { flex-direction: column; padding: 14px 18px; } + .footer-right { width: 100%; } + .action-btn { flex: 1; } +} diff --git a/web/src/assets/styles/views/approval-center-view.css b/web/src/assets/styles/views/approval-center-view.css index 6e44f6e..07cf677 100644 --- a/web/src/assets/styles/views/approval-center-view.css +++ b/web/src/assets/styles/views/approval-center-view.css @@ -1477,339 +1477,3 @@ tbody tr:last-child td { border-bottom: 0; } padding: 12px 14px; } -.opinion-wrap textarea { - width: 100%; - min-height: 100px; - resize: none; - border: 1px solid #d7e0ea; - border-radius: 4px; - padding: 10px 12px; - color: #0f172a; - font-size: 13px; - line-height: 1.55; - transition: border-color 160ms ease, box-shadow 160ms ease; -} - -.opinion-wrap textarea::placeholder { - color: #94a3b8; -} - -.opinion-wrap textarea:focus { - border-color: #10b981; - box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); - outline: none; -} - -/* ── Side Cards ── */ -.side-card { - border-radius: 4px; - background: #fff; - border: 1px solid #edf2f7; - box-shadow: 0 1px 3px rgba(0, 0, 0, .04); - overflow: hidden; - transition: box-shadow 200ms ease; -} - -.side-card:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, .06); } - -.side-card .card-header { - padding: 12px 16px; -} - -.side-card.compact { - border-radius: 4px; -} - -/* ── Risk Card ── */ -.risk-total { - display: flex; - flex-direction: column; - align-items: center; - gap: 2px; - padding: 5px 12px; - border-radius: 3px; - font-size: 11px; -} - -.risk-total span { font-weight: 750; } - -.risk-total.high { - background: #fee2e2; - color: #dc2626; -} - -.risk-total.high strong { font-size: 16px; font-weight: 900; } - -.risk-items { - padding: 4px 14px 14px; - display: grid; - gap: 8px; -} - -.risk-row { - display: flex; - align-items: center; - gap: 10px; - padding: 10px 12px; - border-radius: 4px; - border: 1px solid #f1f5f9; - transition: all 160ms ease; -} - -.risk-row:hover { border-color: #e2e8f0; background: #fafbfd; } - -.risk-icon { - width: 30px; height: 30px; - display: grid; place-items: center; - border-radius: 4px; - font-size: 16px; - flex-shrink: 0; -} - -.risk-row.high .risk-icon { background: #fef2f2; color: #ef4444; } -.risk-row.medium .risk-icon { background: #fff7ed; color: #f97316; } - -.risk-text { - flex: 1; - color: #334155; - font-size: 13px; - line-height: 1.4; -} - -.risk-level { - padding: 3px 8px; - border-radius: 3px; - font-size: 12px; - font-weight: 800; - flex-shrink: 0; -} - -.risk-level.high { background: #fef2f2; color: #ef4444; } -.risk-level.medium { background: #fff7ed; color: #f97316; } - -/* ── Side Dual ── */ -.side-dual { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} - -.reminder-list { - margin: 0; - padding: 10px 16px 14px; - display: grid; - gap: 8px; - list-style: none; -} - -.reminder-list li { - display: flex; - align-items: flex-start; - gap: 8px; - color: #334155; - font-size: 12px; - line-height: 1.5; -} - -.reminder-list li i { - margin-top: 2px; - color: #f59e0b; - font-size: 14px; - flex-shrink: 0; -} - -.info-list { - display: grid; - grid-template-columns: auto 1fr; - gap: 6px 14px; - margin: 0; - padding: 10px 16px 14px; - font-size: 13px; -} - -.info-list dt { color: #94a3b8; font-weight: 700; } -.info-list dd { margin: 0; color: #0f172a; font-weight: 850; } - -/* ── Modal Footer ── */ -.modal-footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 16px 28px; - background: #fff; - border-top: 1px solid #e8eef6; -} - -.footer-right { - display: flex; - gap: 10px; -} - -.action-btn { - height: 40px; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 7px; - padding: 0 20px; - border-radius: 4px; - font-size: 14px; - font-weight: 800; - transition: all 180ms ease; - border: 1px solid transparent; -} - -.action-btn.back { - background: #f8fafc; - border-color: #e2e8f0; - color: #475569; -} - -.action-btn.back:hover { - background: #f1f5f9; - border-color: #cbd5e1; - color: #0f172a; -} - -.action-btn.supplement { - background: #fff; - border-color: #fed7aa; - color: #ea580c; -} - -.action-btn.supplement:hover { - background: #fff7ed; - box-shadow: 0 4px 12px rgba(234, 88, 12, .12); -} - -.action-btn.reject { - background: #fff; - border-color: #fecaca; - color: #ef4444; -} - -.action-btn.reject:hover { - background: #fef2f2; - box-shadow: 0 4px 12px rgba(239, 68, 68, .12); -} - -.action-btn.approve { - background: #059669; - color: #fff; - box-shadow: 0 4px 16px rgba(5, 150, 105, .25); -} - -.action-btn.approve:hover { - background: #047857; - box-shadow: 0 8px 24px rgba(5, 150, 105, .30); -} - -.action-btn:active { transform: scale(.97); } - -/* ── Modal Transitions ── */ -.detail-modal-enter-active { transition: opacity 260ms ease; } -.detail-modal-enter-active .detail-modal { transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 280ms ease; } - -.detail-modal-leave-active { transition: opacity 200ms ease; } -.detail-modal-leave-active .detail-modal { transition: transform 220ms ease, opacity 200ms ease; } - -.detail-modal-enter-from { opacity: 0; } -.detail-modal-enter-from .detail-modal { transform: translateY(16px); opacity: 0; } - -.detail-modal-leave-to { opacity: 0; } -.detail-modal-leave-to .detail-modal { transform: translateY(8px); opacity: 0; } - -/* ── Responsive ── */ -@media (max-width: 1320px) { - .list-toolbar, .list-foot { grid-template-columns: 1fr; } - - .detail-hero { - grid-template-columns: minmax(0, 1.8fr) repeat(4, minmax(0, 1fr)); - } - - .hero-summary-panel { - grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); - } - - .detail-expense-table { - overflow-x: auto; - } - - .detail-expense-table table { - min-width: 980px; - } - - .detail-modal { - width: calc(100vw - 40px); - height: calc(100vh - 40px); - } - - .body-grid { grid-template-columns: 1fr; } - .metrics-strip { grid-template-columns: repeat(2, 1fr); } - .side-dual { grid-template-columns: 1fr; } -} - -@media (max-width: 760px) { - .approval-list { padding: 16px; } - .status-tabs { gap: 18px; overflow-x: auto; } - .filter-set { width: 100%; } - .filter-btn, .page-size { width: 100%; } - .list-foot { justify-items: stretch; } - .pager, .page-size { justify-self: stretch; } - - .detail-hero { - grid-template-columns: 1fr 1fr; - gap: 12px; - padding: 16px; - } - - .applicant-card, - .hero-summary-panel, - .progress-line { - grid-column: 1 / -1; - } - - .hero-summary-panel { - grid-template-columns: 1fr; - } - - .hero-summary-item { - padding: 14px 0; - } - - .detail-card { - padding: 14px 16px; - } - - .detail-card-head { - flex-direction: column; - align-items: stretch; - } - - .detail-total { - align-self: flex-start; - } - - .detail-expense-table table { - min-width: 980px; - } - - .detail-modal { - width: 100vw; - height: 100vh; - max-width: 100vw; - max-height: 100vh; - border-radius: 0; - } - - .modal-header { padding: 16px 18px; flex-wrap: wrap; } - .header-right { width: 100%; justify-content: flex-end; } - .metrics-strip { grid-template-columns: 1fr 1fr; } - .summary-grid { grid-template-columns: 1fr; } - .progress-track { overflow-x: auto; padding-bottom: 8px; } - .node-label strong { font-size: 11px; } - .modal-footer { flex-direction: column; padding: 14px 18px; } - .footer-right { width: 100%; } - .action-btn { flex: 1; } -} diff --git a/web/src/assets/styles/views/audit-view-part2.css b/web/src/assets/styles/views/audit-view-part2.css new file mode 100644 index 0000000..86ac896 --- /dev/null +++ b/web/src/assets/styles/views/audit-view-part2.css @@ -0,0 +1,1255 @@ +.compare-cell-panel { + min-height: 0; + grid-template-rows: auto minmax(0, 1fr); +} + +.compare-panel header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.compare-panel header strong { + color: #0f172a; + font-size: 14px; +} + +.compare-panel p, +.compare-panel small { + color: #64748b; +} + +.compare-sheet-list { + display: grid; + gap: 8px; +} + +.compare-sheet-list article { + min-height: 40px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 0 12px; + border: 1px solid #e2e8f0; + border-radius: 12px; + background: #fff; +} + +.compare-sheet-list strong { + min-width: 0; + color: #0f172a; + font-size: 13px; + font-weight: 850; + overflow-wrap: anywhere; +} + +.compare-sheet-list b { + min-height: 24px; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + padding: 0 9px; + border-radius: 999px; + font-size: 12px; + font-weight: 850; +} + +.compare-sheet-list b.success { + background: #dcfce7; + color: #059669; +} + +.compare-sheet-list b.danger { + background: #fee2e2; + color: #dc2626; +} + +.compare-table-wrap { + min-height: 0; + overflow: auto; + border: 1px solid #e2e8f0; + border-radius: 14px; +} + +.compare-table-wrap table { + width: 100%; + border-collapse: collapse; +} + +.compare-table-wrap th, +.compare-table-wrap td { + padding: 10px 12px; + border-bottom: 1px solid #eef2f7; + text-align: left; + vertical-align: top; +} + +.compare-table-wrap th { + color: #475569; + font-size: 12px; + background: #f8fafc; +} + +.compare-table-wrap td { + color: #0f172a; + font-size: 13px; +} + +.compare-table-wrap td b { + min-height: 22px; + display: inline-flex; + align-items: center; + padding: 0 8px; + border-radius: 999px; + font-size: 11px; +} + +.compare-table-wrap td b.success { + background: #dcfce7; + color: #059669; +} + +.compare-table-wrap td b.warning { + background: #fef3c7; + color: #d97706; +} + +.compare-table-wrap td b.danger { + background: #fee2e2; + color: #dc2626; +} + +.review-submit-form { + display: grid; + gap: 12px; +} + +.review-submit-form label { + display: grid; + gap: 7px; +} + +.review-submit-form label span { + color: #475569; + font-size: 12px; + font-weight: 850; +} + +.review-submit-form input, +.review-submit-form select { + width: 100%; + min-height: 42px; + padding: 0 12px; + border: 1px solid #cbd5e1; + border-radius: 12px; + background: #fff; + color: #0f172a; + font-size: 14px; +} + +.review-submit-form input:focus, +.review-submit-form select:focus { + outline: 0; + border-color: rgba(16, 185, 129, 0.5); + box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); +} + +.review-submit-hint { + margin: 0; + padding: 10px 12px; + border-radius: 12px; + background: #fff7ed; + color: #c2410c; + font-size: 12px; + line-height: 1.6; +} + +@media (max-width: 1280px) { + .spreadsheet-editor-body { + grid-template-columns: 1fr; + } +} + +@media (max-width: 900px) { + .rule-drawer, + .timeline-drawer { + width: 100%; + } + + .compare-summary-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .change-detail-meta { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +.rule-spreadsheet-toolbar { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +.spreadsheet-mode-pill { + min-height: 28px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + background: #eff6ff; + color: #1d4ed8; + font-size: 12px; + font-weight: 800; +} + +.spreadsheet-upload-input { + display: none; +} + +.spreadsheet-meta-strip { + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.spreadsheet-meta-strip span { + min-height: 28px; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 0 10px; + border-radius: 999px; + background: #f8fafc; + color: #475569; + font-size: 12px; + font-weight: 750; +} + +.spreadsheet-meta-strip strong { + color: #0f172a; + font-weight: 850; +} + +.rule-spreadsheet-stage { + position: relative; + min-height: 720px; + overflow: hidden; + border: 1px solid #dbe4ee; + border-radius: 14px; + background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); +} + +.rule-spreadsheet-host { + width: 100%; + height: 100%; + min-height: 720px; +} + +.rule-spreadsheet-host.hidden { + visibility: hidden; +} + +.rule-spreadsheet-state { + position: absolute; + inset: 0; + display: grid; + place-items: center; + gap: 8px; + padding: 24px; + background: + radial-gradient(circle at 50% 38%, rgba(224, 242, 254, 0.72), rgba(248, 250, 252, 0) 58%), + rgba(248, 250, 252, 0.94); + color: #475569; + font-size: 13px; + font-weight: 800; + text-align: center; + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); +} + +.rule-spreadsheet-state > .table-loading { + width: 100%; +} + +.rule-spreadsheet-state i { + font-size: 22px; +} + +.rule-spreadsheet-state.error { + color: #dc2626; +} + +.preview-mode-note { + display: inline-flex; + align-items: center; + gap: 8px; + margin-top: 14px; + padding: 10px 12px; + border: 1px solid rgba(14, 165, 233, 0.22); + border-radius: 12px; + background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(224, 242, 254, 0.9)); + color: #075985; + font-size: 12px; + font-weight: 760; + line-height: 1.5; +} + +.preview-mode-note i { + font-size: 16px; +} + +.markdown-card .field { + min-height: 0; + grid-template-rows: auto minmax(0, 1fr); +} + +.markdown-editor { + min-height: 520px; + height: 100%; + font-family: "Cascadia Mono", "Consolas", monospace; + font-size: 13px; + line-height: 1.65; + white-space: pre; +} + +.markdown-editor.disabled { + background: #f8fafc; + color: #475569; +} + +.json-template-meta { + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.json-template-meta span { + min-height: 28px; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 0 10px; + border-radius: 999px; + background: #f8fafc; + color: #475569; + font-size: 12px; + font-weight: 750; +} + +.json-template-meta strong { + color: #0f172a; + font-weight: 850; +} + +.json-editor { + min-height: 320px; + font-family: "Cascadia Mono", "Consolas", monospace; + font-size: 13px; + line-height: 1.65; + white-space: pre; +} + +.json-editor.disabled { + background: #f8fafc; + color: #475569; +} + +.subtle-banner, +.editor-foot { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} + +.subtle-banner { + min-height: 38px; + margin-bottom: 10px; + padding: 0 12px; + border: 1px solid #e0f2fe; + border-radius: 10px; + background: #f0f9ff; + color: #0369a1; + font-size: 12px; + font-weight: 700; +} + +.subtle-banner > .table-loading { + width: 100%; +} + +.rule-drawer-state > .table-loading { + width: 100%; +} + +.editor-foot { + margin-top: 12px; + color: #64748b; + font-size: 12px; + line-height: 1.5; +} + +.skill-review-side { + align-content: start; + padding-right: 8px; +} + +.review-card { + position: sticky; + top: 0; +} + +.reviewer-card { + border-color: rgba(16, 185, 129, 0.24); + background: linear-gradient(180deg, #ffffff, #f8fffc); +} + +.review-list { + display: grid; + gap: 0; +} + +.review-row { + display: grid; + gap: 6px; + padding: 12px 0; + border-top: 1px solid #edf2f7; +} + +.review-row:first-child { + border-top: 0; + padding-top: 0; +} + +.review-row span { + color: #64748b; + font-size: 12px; + font-weight: 800; +} + +.review-row strong { + color: #0f172a; + font-size: 13px; + font-weight: 850; + line-height: 1.45; +} + +.version-list { + display: grid; + gap: 0; +} + +.version-row { + display: grid; + gap: 6px; + width: 100%; + padding: 10px 12px; + border-top: 1px solid #edf2f7; + border-right: 0; + border-bottom: 0; + border-left: 0; + background: transparent; + text-align: left; + transition: background 180ms ease; +} + +.version-row:first-child { + border-top: 0; +} + +.version-row:hover { + border-radius: 10px; + background: #f8fafc; +} + +.version-row.active { + border-radius: 10px; + background: rgba(16, 185, 129, 0.08); +} + +.version-main { + display: grid; + gap: 6px; + width: 100%; + padding: 0; + border: 0; + background: transparent; + text-align: left; + cursor: pointer; +} + +.version-row-head { + display: grid; + grid-template-columns: minmax(52px, 1fr) 46px 82px; + align-items: center; + gap: 8px; +} + +.version-row strong { + color: #0f172a; + font-size: 13px; + font-weight: 850; +} + +.version-row span { + color: #94a3b8; + font-size: 11px; + font-weight: 800; + white-space: nowrap; + text-align: right; +} + +.version-current-slot { + min-width: 46px; + display: grid; + place-items: center; + text-align: center; +} + +.version-current-slot .current-version { + min-height: 20px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 7px; + border-radius: 999px; + background: #dcfce7; + color: #059669; + font-size: 11px; + font-weight: 850; +} + +.version-current-slot .current-version.working { + background: #dbeafe; + color: #2563eb; +} + +.version-row p { + color: #64748b; + font-size: 12px; + line-height: 1.5; +} + +.version-row-foot { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.version-state { + min-height: 22px; + display: inline-flex; + align-items: center; + padding: 0 8px; + border-radius: 999px; + font-size: 11px; + font-weight: 850; +} + +.version-state.success { + background: #dcfce7; + color: #059669; +} + +.version-state.warning { + background: #fef3c7; + color: #d97706; +} + +.version-state.danger { + background: #fee2e2; + color: #dc2626; +} + +.version-state.draft { + background: #e2e8f0; + color: #475569; +} + +.version-state.disabled { + background: #f1f5f9; + color: #64748b; +} + +.version-restore-btn { + min-height: 24px; + padding: 0 9px; + border: 0; + border-radius: 999px; + background: #fff7ed; + color: #ea580c; + font-size: 11px; + font-weight: 850; + cursor: pointer; +} + +.version-restore-btn:disabled { + cursor: not-allowed; + opacity: 0.55; +} + +.empty-side-note { + min-height: 120px; + display: grid; + place-items: center; + gap: 8px; + color: #64748b; + font-size: 13px; + text-align: center; +} + +.empty-side-note i { + font-size: 24px; + color: #94a3b8; +} + +.version-modal-summary { + display: grid; + grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); + align-items: center; + gap: 10px; + margin-top: 4px; +} + +.version-modal-summary div { + padding: 12px; + border: 1px solid #edf2f7; + border-radius: 10px; + background: #f8fafc; +} + +.version-modal-summary span, +.version-modal-note span { + display: block; + color: #64748b; + font-size: 12px; + font-weight: 800; +} + +.version-modal-summary strong, +.version-modal-note strong { + display: block; + margin-top: 6px; + color: #0f172a; + font-size: 15px; + font-weight: 850; +} + +.version-modal-summary i { + color: #94a3b8; + text-align: center; +} + +.version-modal-note { + margin-top: 12px; + padding: 12px; + border: 1px solid #edf2f7; + border-radius: 10px; + background: #fff; +} + +.prompt-stack { + display: grid; + gap: 14px; +} + +.prompt-block { + padding: 14px; + border: 1px solid #edf2f7; + border-radius: 12px; + background: #fbfdff; +} + +.prompt-block header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + margin-bottom: 10px; +} + +.prompt-block strong { + color: #0f172a; + font-size: 14px; + font-weight: 850; +} + +.prompt-block header span { + color: #64748b; + font-size: 12px; + font-weight: 700; +} + +.contract-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; +} + +.contract-panel { + padding: 14px; + border: 1px solid #edf2f7; + border-radius: 12px; + background: #fbfdff; +} + +.contract-panel h4 { + margin: 0 0 10px; + color: #0f172a; + font-size: 14px; + font-weight: 850; +} + +.contract-panel ul { + display: grid; + gap: 8px; + margin: 0; + padding-left: 18px; + color: #475569; + font-size: 13px; + line-height: 1.6; +} + +.test-row, +.tool-row, +.history-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 10px; + padding: 12px 0; + border-top: 1px solid #edf2f7; +} + +.test-row:first-child, +.tool-row:first-child, +.history-row:first-child { + border-top: 0; + padding-top: 0; +} + +.test-row strong, +.tool-row strong, +.history-row strong { + display: block; + color: #0f172a; + font-size: 13px; + font-weight: 800; +} + +.test-row span, +.tool-row span, +.history-row span, +.history-row small { + display: block; + margin-top: 4px; + color: #64748b; + font-size: 12px; + line-height: 1.5; +} + +.test-state, +.tool-state { + display: inline-flex; + align-items: center; + min-height: 24px; + padding: 0 8px; + border-radius: 999px; + font-size: 11px; + font-weight: 800; + white-space: nowrap; +} + +.test-state.success, +.tool-state.safe { + background: #dcfce7; + color: #059669; +} + +.test-state.warning, +.tool-state.active { + background: #fff7ed; + color: #ea580c; +} + +.test-state.danger, +.tool-state.danger { + background: #fee2e2; + color: #dc2626; +} + +.review-action-strip { + display: flex; + gap: 10px; + flex-wrap: wrap; + margin-top: 16px; +} + +.action-help { + margin-top: 12px; + color: #64748b; + font-size: 12px; + line-height: 1.6; +} + +.tag-list { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.tag-list span { + min-height: 28px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + background: #eff6ff; + color: #2563eb; + font-size: 12px; + font-weight: 800; +} + +.publish-card { + display: grid; + gap: 14px; +} + +.publish-card p, +.publish-summary span { + margin-top: 6px; + color: #64748b; + font-size: 13px; + line-height: 1.55; +} + +.publish-summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + min-height: 42px; + padding: 0 12px; + border-radius: 10px; + background: #f8fafc; +} + +.publish-summary strong { + color: #059669; + font-size: 14px; + font-weight: 850; +} + +.detail-actions { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px 0 0; + border-top: 1px solid #e5eaf0; +} + +.detail-action-group { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +.back-action, +.minor-action, +.major-action { + height: 38px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 0 14px; + border-radius: 8px; + font-size: 13px; + font-weight: 760; +} + +.back-action { + border: 1px solid #d7e0ea; + background: #fff; + color: #475569; +} + +.minor-action { + border: 1px solid #d7e0ea; + background: #fff; + color: #334155; +} + +.minor-action.success-action { + border-color: rgba(5, 150, 105, 0.26); + color: #059669; +} + +.minor-action.danger-action { + border-color: rgba(220, 38, 38, 0.2); + color: #dc2626; +} + +.major-action { + border: 1px solid #059669; + background: #059669; + color: #fff; + box-shadow: 0 4px 12px rgba(5, 150, 105, .16); +} + +.back-action:hover, +.minor-action:hover, +.major-action:hover, +.mini-btn:hover { + transform: translateY(-1px); +} + +.back-action:disabled, +.minor-action:disabled, +.major-action:disabled, +.mini-btn:disabled { + opacity: 0.52; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +.detail-meta-actions { + align-items: center; +} + +.footer-note { + color: #64748b; + font-size: 12px; + font-weight: 700; +} + +.mini-btn { + min-height: 36px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 0 12px; + border: 1px solid #d7e0ea; + border-radius: 8px; + background: #fff; + color: #334155; + font-size: 13px; + font-weight: 760; +} + +.mini-btn.primary { + border-color: #059669; + background: #059669; + color: #fff; +} + +@media (max-width: 1320px) { + .detail-hero { + grid-template-columns: 1fr; + } + + .hero-stats, + .form-grid, + .contract-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .rule-spreadsheet-stage, + .rule-spreadsheet-host { + min-height: 620px; + } + + .detail-grid { + grid-template-columns: 1fr; + } + + .detail-grid.skill-md-detail-grid { + grid-template-columns: 1fr; + } + + .skill-review-side { + padding-right: 0; + } + + .review-card { + position: static; + } +} + +@media (max-width: 860px) { + .skill-list, + .detail-card, + .side-card, + .detail-hero { + padding: 16px; + } + + .list-toolbar, + .card-head, + .detail-actions, + .detail-action-group, + .toolbar-actions, + .detail-inline-state { + flex-direction: column; + align-items: stretch; + } + + .status-tabs, + .filter-set { + overflow-x: auto; + } + + .search-filter, + .picker-trigger, + .picker-filter, + .toolbar-actions > * { + width: 100%; + } + + .picker-popover { + width: min(100vw - 64px, 320px); + } + + .hero-stats, + .form-grid, + .contract-grid { + grid-template-columns: 1fr; + } + + .review-action-strip { + flex-direction: column; + } + + .version-modal-summary { + grid-template-columns: 1fr; + } + + .version-modal-summary i { + transform: rotate(90deg); + } + + .field.span-2 { + grid-column: span 1; + } +} + +.json-risk-skill-detail .detail-scroll { + display: grid; + grid-template-rows: auto minmax(0, 1fr); +} + +.json-risk-editor-shell { + min-height: 0; + height: 100%; + display: flex; + flex-direction: column; + gap: 10px; + padding: 10px; +} + +.json-risk-editor-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 16px; +} + +.json-risk-editor-title { + min-width: 0; + display: flex; + align-items: flex-start; + gap: 12px; +} + +.json-risk-editor-title h2 { + color: #0f172a; + font-size: 18px; + font-weight: 850; +} + +.json-risk-editor-title p { + margin-top: 2px; + max-width: 760px; + color: #64748b; + font-size: 12px; + line-height: 1.4; +} + +.json-risk-head-subtitle { + display: -webkit-box; + margin: 6px 0 0; + max-width: 760px; + overflow: hidden; + color: #64748b; + font-size: 13px; + line-height: 1.55; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.json-risk-head-category { + margin: 6px 0 0; + color: #be123c; + font-size: 12px; + font-weight: 600; +} + +.skill-name-cell .skill-list-subtitle { + display: -webkit-box; + overflow: hidden; + color: #94a3b8; + font-size: 12px; + line-height: 1.45; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.json-risk-editor-actions { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +.json-risk-mode-pill { + min-height: 28px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + background: #fff1f2; + color: #be123c; + font-size: 12px; + font-weight: 800; +} + +.json-risk-editor-body { + flex: 1 1 auto; + min-height: 0; + display: block; +} + +.json-risk-main-stage { + min-height: 0; + display: grid; + gap: 12px; +} + +.json-risk-description-card { + border-color: #fecdd3; + background: linear-gradient(180deg, #fffafb 0%, #ffffff 100%); +} + +.json-risk-description-text { + margin: 0; + padding: 0 4px 8px; + color: #334155; + font-size: 14px; + line-height: 1.75; + white-space: pre-wrap; + word-break: break-word; +} + +.json-risk-description-source { + margin: 0; + padding: 8px 12px 4px; + border-top: 1px solid #ffe4e6; + color: #94a3b8; + font-size: 12px; + line-height: 1.5; +} + +.json-risk-summary-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.json-risk-summary-grid span { + min-height: 34px; + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px 12px; + border-radius: 10px; + background: #f8fafc; + color: #475569; + font-size: 12px; +} + +.json-risk-summary-grid strong { + color: #0f172a; + font-size: 11px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.json-risk-flow-diagram { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); + gap: 10px; + align-items: center; +} + +.json-risk-flow-column { + display: grid; + gap: 6px; + padding: 12px; + border-radius: 12px; + border: 1px solid #e2e8f0; + background: #f8fafc; +} + +.json-risk-flow-column.center { + text-align: center; + background: #fff1f2; + border-color: #fecdd3; +} + +.json-risk-flow-column code { + font-size: 11px; + color: #334155; +} + +.json-risk-flow-label { + font-size: 11px; + font-weight: 800; + color: #64748b; + text-transform: uppercase; +} + +.json-risk-flow-arrow { + color: #94a3b8; + font-size: 18px; + font-weight: 800; +} + +.json-risk-editor-toolbar { + display: flex; + align-items: center; + gap: 8px; +} + +.json-risk-editor { + min-height: 280px; +} + +.json-risk-version-center { + min-height: 0; + display: grid; + gap: 12px; + align-content: start; + padding: 12px; + border-radius: 12px; + border: 1px solid #e2e8f0; + background: #ffffff; +} diff --git a/web/src/assets/styles/views/audit-view.css b/web/src/assets/styles/views/audit-view.css index eac68bd..39ffd80 100644 --- a/web/src/assets/styles/views/audit-view.css +++ b/web/src/assets/styles/views/audit-view.css @@ -359,8 +359,8 @@ text-align: left; } -.table-state > .table-loading, -.detail-inline-state > .table-loading { +.table-state > .table-loading, +.detail-inline-state > .table-loading { width: 100%; } @@ -460,7 +460,7 @@ tbody tr:hover { background: #f8fbff; } -.skill-name-cell { +.skill-name-cell { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; @@ -1486,1258 +1486,3 @@ tbody tr:hover { gap: 10px; } -.compare-cell-panel { - min-height: 0; - grid-template-rows: auto minmax(0, 1fr); -} - -.compare-panel header { - display: flex; - align-items: center; - justify-content: space-between; -} - -.compare-panel header strong { - color: #0f172a; - font-size: 14px; -} - -.compare-panel p, -.compare-panel small { - color: #64748b; -} - -.compare-sheet-list { - display: grid; - gap: 8px; -} - -.compare-sheet-list article { - min-height: 40px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 0 12px; - border: 1px solid #e2e8f0; - border-radius: 12px; - background: #fff; -} - -.compare-sheet-list strong { - min-width: 0; - color: #0f172a; - font-size: 13px; - font-weight: 850; - overflow-wrap: anywhere; -} - -.compare-sheet-list b { - min-height: 24px; - display: inline-flex; - align-items: center; - flex: 0 0 auto; - padding: 0 9px; - border-radius: 999px; - font-size: 12px; - font-weight: 850; -} - -.compare-sheet-list b.success { - background: #dcfce7; - color: #059669; -} - -.compare-sheet-list b.danger { - background: #fee2e2; - color: #dc2626; -} - -.compare-table-wrap { - min-height: 0; - overflow: auto; - border: 1px solid #e2e8f0; - border-radius: 14px; -} - -.compare-table-wrap table { - width: 100%; - border-collapse: collapse; -} - -.compare-table-wrap th, -.compare-table-wrap td { - padding: 10px 12px; - border-bottom: 1px solid #eef2f7; - text-align: left; - vertical-align: top; -} - -.compare-table-wrap th { - color: #475569; - font-size: 12px; - background: #f8fafc; -} - -.compare-table-wrap td { - color: #0f172a; - font-size: 13px; -} - -.compare-table-wrap td b { - min-height: 22px; - display: inline-flex; - align-items: center; - padding: 0 8px; - border-radius: 999px; - font-size: 11px; -} - -.compare-table-wrap td b.success { - background: #dcfce7; - color: #059669; -} - -.compare-table-wrap td b.warning { - background: #fef3c7; - color: #d97706; -} - -.compare-table-wrap td b.danger { - background: #fee2e2; - color: #dc2626; -} - -.review-submit-form { - display: grid; - gap: 12px; -} - -.review-submit-form label { - display: grid; - gap: 7px; -} - -.review-submit-form label span { - color: #475569; - font-size: 12px; - font-weight: 850; -} - -.review-submit-form input, -.review-submit-form select { - width: 100%; - min-height: 42px; - padding: 0 12px; - border: 1px solid #cbd5e1; - border-radius: 12px; - background: #fff; - color: #0f172a; - font-size: 14px; -} - -.review-submit-form input:focus, -.review-submit-form select:focus { - outline: 0; - border-color: rgba(16, 185, 129, 0.5); - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); -} - -.review-submit-hint { - margin: 0; - padding: 10px 12px; - border-radius: 12px; - background: #fff7ed; - color: #c2410c; - font-size: 12px; - line-height: 1.6; -} - -@media (max-width: 1280px) { - .spreadsheet-editor-body { - grid-template-columns: 1fr; - } -} - -@media (max-width: 900px) { - .rule-drawer, - .timeline-drawer { - width: 100%; - } - - .compare-summary-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .change-detail-meta { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -.rule-spreadsheet-toolbar { - display: flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; -} - -.spreadsheet-mode-pill { - min-height: 28px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - background: #eff6ff; - color: #1d4ed8; - font-size: 12px; - font-weight: 800; -} - -.spreadsheet-upload-input { - display: none; -} - -.spreadsheet-meta-strip { - display: flex; - gap: 10px; - flex-wrap: wrap; -} - -.spreadsheet-meta-strip span { - min-height: 28px; - display: inline-flex; - align-items: center; - gap: 6px; - padding: 0 10px; - border-radius: 999px; - background: #f8fafc; - color: #475569; - font-size: 12px; - font-weight: 750; -} - -.spreadsheet-meta-strip strong { - color: #0f172a; - font-weight: 850; -} - -.rule-spreadsheet-stage { - position: relative; - min-height: 720px; - overflow: hidden; - border: 1px solid #dbe4ee; - border-radius: 14px; - background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); -} - -.rule-spreadsheet-host { - width: 100%; - height: 100%; - min-height: 720px; -} - -.rule-spreadsheet-host.hidden { - visibility: hidden; -} - -.rule-spreadsheet-state { - position: absolute; - inset: 0; - display: grid; - place-items: center; - gap: 8px; - padding: 24px; - background: - radial-gradient(circle at 50% 38%, rgba(224, 242, 254, 0.72), rgba(248, 250, 252, 0) 58%), - rgba(248, 250, 252, 0.94); - color: #475569; - font-size: 13px; - font-weight: 800; - text-align: center; - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); -} - -.rule-spreadsheet-state > .table-loading { - width: 100%; -} - -.rule-spreadsheet-state i { - font-size: 22px; -} - -.rule-spreadsheet-state.error { - color: #dc2626; -} - -.preview-mode-note { - display: inline-flex; - align-items: center; - gap: 8px; - margin-top: 14px; - padding: 10px 12px; - border: 1px solid rgba(14, 165, 233, 0.22); - border-radius: 12px; - background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(224, 242, 254, 0.9)); - color: #075985; - font-size: 12px; - font-weight: 760; - line-height: 1.5; -} - -.preview-mode-note i { - font-size: 16px; -} - -.markdown-card .field { - min-height: 0; - grid-template-rows: auto minmax(0, 1fr); -} - -.markdown-editor { - min-height: 520px; - height: 100%; - font-family: "Cascadia Mono", "Consolas", monospace; - font-size: 13px; - line-height: 1.65; - white-space: pre; -} - -.markdown-editor.disabled { - background: #f8fafc; - color: #475569; -} - -.json-template-meta { - display: flex; - gap: 10px; - flex-wrap: wrap; -} - -.json-template-meta span { - min-height: 28px; - display: inline-flex; - align-items: center; - gap: 6px; - padding: 0 10px; - border-radius: 999px; - background: #f8fafc; - color: #475569; - font-size: 12px; - font-weight: 750; -} - -.json-template-meta strong { - color: #0f172a; - font-weight: 850; -} - -.json-editor { - min-height: 320px; - font-family: "Cascadia Mono", "Consolas", monospace; - font-size: 13px; - line-height: 1.65; - white-space: pre; -} - -.json-editor.disabled { - background: #f8fafc; - color: #475569; -} - -.subtle-banner, -.editor-foot { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - flex-wrap: wrap; -} - -.subtle-banner { - min-height: 38px; - margin-bottom: 10px; - padding: 0 12px; - border: 1px solid #e0f2fe; - border-radius: 10px; - background: #f0f9ff; - color: #0369a1; - font-size: 12px; - font-weight: 700; -} - -.subtle-banner > .table-loading { - width: 100%; -} - -.rule-drawer-state > .table-loading { - width: 100%; -} - -.editor-foot { - margin-top: 12px; - color: #64748b; - font-size: 12px; - line-height: 1.5; -} - -.skill-review-side { - align-content: start; - padding-right: 8px; -} - -.review-card { - position: sticky; - top: 0; -} - -.reviewer-card { - border-color: rgba(16, 185, 129, 0.24); - background: linear-gradient(180deg, #ffffff, #f8fffc); -} - -.review-list { - display: grid; - gap: 0; -} - -.review-row { - display: grid; - gap: 6px; - padding: 12px 0; - border-top: 1px solid #edf2f7; -} - -.review-row:first-child { - border-top: 0; - padding-top: 0; -} - -.review-row span { - color: #64748b; - font-size: 12px; - font-weight: 800; -} - -.review-row strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; - line-height: 1.45; -} - -.version-list { - display: grid; - gap: 0; -} - -.version-row { - display: grid; - gap: 6px; - width: 100%; - padding: 10px 12px; - border-top: 1px solid #edf2f7; - border-right: 0; - border-bottom: 0; - border-left: 0; - background: transparent; - text-align: left; - transition: background 180ms ease; -} - -.version-row:first-child { - border-top: 0; -} - -.version-row:hover { - border-radius: 10px; - background: #f8fafc; -} - -.version-row.active { - border-radius: 10px; - background: rgba(16, 185, 129, 0.08); -} - -.version-main { - display: grid; - gap: 6px; - width: 100%; - padding: 0; - border: 0; - background: transparent; - text-align: left; - cursor: pointer; -} - -.version-row-head { - display: grid; - grid-template-columns: minmax(52px, 1fr) 46px 82px; - align-items: center; - gap: 8px; -} - -.version-row strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; -} - -.version-row span { - color: #94a3b8; - font-size: 11px; - font-weight: 800; - white-space: nowrap; - text-align: right; -} - -.version-current-slot { - min-width: 46px; - display: grid; - place-items: center; - text-align: center; -} - -.version-current-slot .current-version { - min-height: 20px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 7px; - border-radius: 999px; - background: #dcfce7; - color: #059669; - font-size: 11px; - font-weight: 850; -} - -.version-current-slot .current-version.working { - background: #dbeafe; - color: #2563eb; -} - -.version-row p { - color: #64748b; - font-size: 12px; - line-height: 1.5; -} - -.version-row-foot { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; -} - -.version-state { - min-height: 22px; - display: inline-flex; - align-items: center; - padding: 0 8px; - border-radius: 999px; - font-size: 11px; - font-weight: 850; -} - -.version-state.success { - background: #dcfce7; - color: #059669; -} - -.version-state.warning { - background: #fef3c7; - color: #d97706; -} - -.version-state.danger { - background: #fee2e2; - color: #dc2626; -} - -.version-state.draft { - background: #e2e8f0; - color: #475569; -} - -.version-state.disabled { - background: #f1f5f9; - color: #64748b; -} - -.version-restore-btn { - min-height: 24px; - padding: 0 9px; - border: 0; - border-radius: 999px; - background: #fff7ed; - color: #ea580c; - font-size: 11px; - font-weight: 850; - cursor: pointer; -} - -.version-restore-btn:disabled { - cursor: not-allowed; - opacity: 0.55; -} - -.empty-side-note { - min-height: 120px; - display: grid; - place-items: center; - gap: 8px; - color: #64748b; - font-size: 13px; - text-align: center; -} - -.empty-side-note i { - font-size: 24px; - color: #94a3b8; -} - -.version-modal-summary { - display: grid; - grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); - align-items: center; - gap: 10px; - margin-top: 4px; -} - -.version-modal-summary div { - padding: 12px; - border: 1px solid #edf2f7; - border-radius: 10px; - background: #f8fafc; -} - -.version-modal-summary span, -.version-modal-note span { - display: block; - color: #64748b; - font-size: 12px; - font-weight: 800; -} - -.version-modal-summary strong, -.version-modal-note strong { - display: block; - margin-top: 6px; - color: #0f172a; - font-size: 15px; - font-weight: 850; -} - -.version-modal-summary i { - color: #94a3b8; - text-align: center; -} - -.version-modal-note { - margin-top: 12px; - padding: 12px; - border: 1px solid #edf2f7; - border-radius: 10px; - background: #fff; -} - -.prompt-stack { - display: grid; - gap: 14px; -} - -.prompt-block { - padding: 14px; - border: 1px solid #edf2f7; - border-radius: 12px; - background: #fbfdff; -} - -.prompt-block header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - margin-bottom: 10px; -} - -.prompt-block strong { - color: #0f172a; - font-size: 14px; - font-weight: 850; -} - -.prompt-block header span { - color: #64748b; - font-size: 12px; - font-weight: 700; -} - -.contract-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 14px; -} - -.contract-panel { - padding: 14px; - border: 1px solid #edf2f7; - border-radius: 12px; - background: #fbfdff; -} - -.contract-panel h4 { - margin: 0 0 10px; - color: #0f172a; - font-size: 14px; - font-weight: 850; -} - -.contract-panel ul { - display: grid; - gap: 8px; - margin: 0; - padding-left: 18px; - color: #475569; - font-size: 13px; - line-height: 1.6; -} - -.test-row, -.tool-row, -.history-row { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 10px; - padding: 12px 0; - border-top: 1px solid #edf2f7; -} - -.test-row:first-child, -.tool-row:first-child, -.history-row:first-child { - border-top: 0; - padding-top: 0; -} - -.test-row strong, -.tool-row strong, -.history-row strong { - display: block; - color: #0f172a; - font-size: 13px; - font-weight: 800; -} - -.test-row span, -.tool-row span, -.history-row span, -.history-row small { - display: block; - margin-top: 4px; - color: #64748b; - font-size: 12px; - line-height: 1.5; -} - -.test-state, -.tool-state { - display: inline-flex; - align-items: center; - min-height: 24px; - padding: 0 8px; - border-radius: 999px; - font-size: 11px; - font-weight: 800; - white-space: nowrap; -} - -.test-state.success, -.tool-state.safe { - background: #dcfce7; - color: #059669; -} - -.test-state.warning, -.tool-state.active { - background: #fff7ed; - color: #ea580c; -} - -.test-state.danger, -.tool-state.danger { - background: #fee2e2; - color: #dc2626; -} - -.review-action-strip { - display: flex; - gap: 10px; - flex-wrap: wrap; - margin-top: 16px; -} - -.action-help { - margin-top: 12px; - color: #64748b; - font-size: 12px; - line-height: 1.6; -} - -.tag-list { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.tag-list span { - min-height: 28px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - background: #eff6ff; - color: #2563eb; - font-size: 12px; - font-weight: 800; -} - -.publish-card { - display: grid; - gap: 14px; -} - -.publish-card p, -.publish-summary span { - margin-top: 6px; - color: #64748b; - font-size: 13px; - line-height: 1.55; -} - -.publish-summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - min-height: 42px; - padding: 0 12px; - border-radius: 10px; - background: #f8fafc; -} - -.publish-summary strong { - color: #059669; - font-size: 14px; - font-weight: 850; -} - -.detail-actions { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 12px 0 0; - border-top: 1px solid #e5eaf0; -} - -.detail-action-group { - display: flex; - justify-content: flex-end; - gap: 8px; -} - -.back-action, -.minor-action, -.major-action { - height: 38px; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - padding: 0 14px; - border-radius: 8px; - font-size: 13px; - font-weight: 760; -} - -.back-action { - border: 1px solid #d7e0ea; - background: #fff; - color: #475569; -} - -.minor-action { - border: 1px solid #d7e0ea; - background: #fff; - color: #334155; -} - -.minor-action.success-action { - border-color: rgba(5, 150, 105, 0.26); - color: #059669; -} - -.minor-action.danger-action { - border-color: rgba(220, 38, 38, 0.2); - color: #dc2626; -} - -.major-action { - border: 1px solid #059669; - background: #059669; - color: #fff; - box-shadow: 0 4px 12px rgba(5, 150, 105, .16); -} - -.back-action:hover, -.minor-action:hover, -.major-action:hover, -.mini-btn:hover { - transform: translateY(-1px); -} - -.back-action:disabled, -.minor-action:disabled, -.major-action:disabled, -.mini-btn:disabled { - opacity: 0.52; - cursor: not-allowed; - transform: none; - box-shadow: none; -} - -.detail-meta-actions { - align-items: center; -} - -.footer-note { - color: #64748b; - font-size: 12px; - font-weight: 700; -} - -.mini-btn { - min-height: 36px; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 6px; - padding: 0 12px; - border: 1px solid #d7e0ea; - border-radius: 8px; - background: #fff; - color: #334155; - font-size: 13px; - font-weight: 760; -} - -.mini-btn.primary { - border-color: #059669; - background: #059669; - color: #fff; -} - -@media (max-width: 1320px) { - .detail-hero { - grid-template-columns: 1fr; - } - - .hero-stats, - .form-grid, - .contract-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .rule-spreadsheet-stage, - .rule-spreadsheet-host { - min-height: 620px; - } - - .detail-grid { - grid-template-columns: 1fr; - } - - .detail-grid.skill-md-detail-grid { - grid-template-columns: 1fr; - } - - .skill-review-side { - padding-right: 0; - } - - .review-card { - position: static; - } -} - -@media (max-width: 860px) { - .skill-list, - .detail-card, - .side-card, - .detail-hero { - padding: 16px; - } - - .list-toolbar, - .card-head, - .detail-actions, - .detail-action-group, - .toolbar-actions, - .detail-inline-state { - flex-direction: column; - align-items: stretch; - } - - .status-tabs, - .filter-set { - overflow-x: auto; - } - - .search-filter, - .picker-trigger, - .picker-filter, - .toolbar-actions > * { - width: 100%; - } - - .picker-popover { - width: min(100vw - 64px, 320px); - } - - .hero-stats, - .form-grid, - .contract-grid { - grid-template-columns: 1fr; - } - - .review-action-strip { - flex-direction: column; - } - - .version-modal-summary { - grid-template-columns: 1fr; - } - - .version-modal-summary i { - transform: rotate(90deg); - } - - .field.span-2 { - grid-column: span 1; - } -} - -.json-risk-skill-detail .detail-scroll { - display: grid; - grid-template-rows: auto minmax(0, 1fr); -} - -.json-risk-editor-shell { - min-height: 0; - height: 100%; - display: flex; - flex-direction: column; - gap: 10px; - padding: 10px; -} - -.json-risk-editor-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; -} - -.json-risk-editor-title { - min-width: 0; - display: flex; - align-items: flex-start; - gap: 12px; -} - -.json-risk-editor-title h2 { - color: #0f172a; - font-size: 18px; - font-weight: 850; -} - -.json-risk-editor-title p { - margin-top: 2px; - max-width: 760px; - color: #64748b; - font-size: 12px; - line-height: 1.4; -} - -.json-risk-head-subtitle { - display: -webkit-box; - margin: 6px 0 0; - max-width: 760px; - overflow: hidden; - color: #64748b; - font-size: 13px; - line-height: 1.55; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; -} - -.json-risk-head-category { - margin: 6px 0 0; - color: #be123c; - font-size: 12px; - font-weight: 600; -} - -.skill-name-cell .skill-list-subtitle { - display: -webkit-box; - overflow: hidden; - color: #94a3b8; - font-size: 12px; - line-height: 1.45; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; -} - -.json-risk-editor-actions { - display: flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; -} - -.json-risk-mode-pill { - min-height: 28px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - background: #fff1f2; - color: #be123c; - font-size: 12px; - font-weight: 800; -} - -.json-risk-editor-body { - flex: 1 1 auto; - min-height: 0; - display: block; -} - -.json-risk-main-stage { - min-height: 0; - display: grid; - gap: 12px; -} - -.json-risk-description-card { - border-color: #fecdd3; - background: linear-gradient(180deg, #fffafb 0%, #ffffff 100%); -} - -.json-risk-description-text { - margin: 0; - padding: 0 4px 8px; - color: #334155; - font-size: 14px; - line-height: 1.75; - white-space: pre-wrap; - word-break: break-word; -} - -.json-risk-description-source { - margin: 0; - padding: 8px 12px 4px; - border-top: 1px solid #ffe4e6; - color: #94a3b8; - font-size: 12px; - line-height: 1.5; -} - -.json-risk-summary-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.json-risk-summary-grid span { - min-height: 34px; - display: flex; - flex-direction: column; - gap: 4px; - padding: 10px 12px; - border-radius: 10px; - background: #f8fafc; - color: #475569; - font-size: 12px; -} - -.json-risk-summary-grid strong { - color: #0f172a; - font-size: 11px; - font-weight: 800; - text-transform: uppercase; - letter-spacing: 0.04em; -} - -.json-risk-flow-diagram { - display: grid; - grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); - gap: 10px; - align-items: center; -} - -.json-risk-flow-column { - display: grid; - gap: 6px; - padding: 12px; - border-radius: 12px; - border: 1px solid #e2e8f0; - background: #f8fafc; -} - -.json-risk-flow-column.center { - text-align: center; - background: #fff1f2; - border-color: #fecdd3; -} - -.json-risk-flow-column code { - font-size: 11px; - color: #334155; -} - -.json-risk-flow-label { - font-size: 11px; - font-weight: 800; - color: #64748b; - text-transform: uppercase; -} - -.json-risk-flow-arrow { - color: #94a3b8; - font-size: 18px; - font-weight: 800; -} - -.json-risk-editor-toolbar { - display: flex; - align-items: center; - gap: 8px; -} - -.json-risk-editor { - min-height: 280px; -} - -.json-risk-version-center { - min-height: 0; - display: grid; - gap: 12px; - align-content: start; - padding: 12px; - border-radius: 12px; - border: 1px solid #e2e8f0; - background: #ffffff; -} diff --git a/web/src/assets/styles/views/travel-reimbursement-create-view-part2.css b/web/src/assets/styles/views/travel-reimbursement-create-view-part2.css new file mode 100644 index 0000000..5d30f53 --- /dev/null +++ b/web/src/assets/styles/views/travel-reimbursement-create-view-part2.css @@ -0,0 +1,1490 @@ +.travel-calculator-mini-head span { + color: #64748b; + font-size: 11px; + font-weight: 750; +} + +.travel-calculator-form { + display: grid; + grid-template-columns: 92px minmax(0, 1fr); + gap: 8px; +} + +.travel-calculator-field { + display: grid; + gap: 6px; + min-width: 0; +} + +.travel-calculator-field span { + color: #64748b; + font-size: 11px; + font-weight: 800; +} + +.travel-calculator-field input { + width: 100%; + min-height: 36px; + padding: 0 10px; + border: 1px solid rgba(203, 213, 225, 0.92); + border-radius: 10px; + background: #fff; + color: #0f172a; + font-size: 12px; + font-weight: 700; +} + +.travel-calculator-field input:focus { + border-color: rgba(59, 130, 246, 0.46); + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); + outline: none; +} + +.travel-calculator-error { + margin: 0; + color: #dc2626; + font-size: 11px; + font-weight: 750; + line-height: 1.5; +} + +.composer-date-mode-tabs { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; + padding: 4px; + border-radius: 12px; + background: rgba(241, 245, 249, 0.92); +} + +.composer-date-mode-btn { + min-height: 34px; + border: 0; + border-radius: 10px; + background: transparent; + color: #64748b; + font-size: 12px; + font-weight: 800; +} + +.composer-date-mode-btn.active { + background: #fff; + color: #0f172a; + box-shadow: 0 4px 10px rgba(148, 163, 184, 0.18); +} + +.composer-date-fields { + display: grid; + gap: 8px; +} + +.composer-date-fields-range { + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: end; + gap: 8px; +} + +.composer-date-field { + display: grid; + gap: 6px; + min-width: 0; +} + +.composer-date-field span { + color: #64748b; + font-size: 11px; + font-weight: 800; +} + +.composer-date-field input { + width: 100%; + min-height: 36px; + padding: 0 10px; + border: 1px solid rgba(203, 213, 225, 0.92); + border-radius: 10px; + background: #fff; + color: #0f172a; + font-size: 12px; + font-weight: 700; +} + +.composer-date-range-sep { + align-self: center; + color: #94a3b8; + font-size: 12px; + font-weight: 800; +} + +.composer-date-hint { + margin: 0; + color: #dc2626; + font-size: 11px; + line-height: 1.5; +} + +.composer-date-popover-actions { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +.composer-date-cancel-btn, +.composer-date-apply-btn { + min-height: 34px; + padding: 0 14px; + border-radius: 10px; + font-size: 12px; + font-weight: 800; +} + +.composer-date-cancel-btn { + border: 1px solid rgba(203, 213, 225, 0.92); + background: #fff; + color: #64748b; +} + +.composer-date-apply-btn { + border: 0; + background: linear-gradient(135deg, #22c55e, #10b981); + color: #fff; +} + +.composer-date-apply-btn:disabled { + opacity: 0.48; + cursor: not-allowed; +} + +.composer-shell { + min-width: 0; + min-height: var(--composer-control-size, 44px); + border: 1px solid rgba(214, 225, 234, 0.95); + border-radius: 999px; + background: rgba(255, 255, 255, 0.98); + box-shadow: + 0 10px 22px rgba(226, 232, 240, 0.24), + 0 1px 4px rgba(15, 23, 42, 0.03); +} + +.composer-shell-body { + min-height: var(--composer-control-size, 44px); + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 6px; + padding: 4px 12px; +} + +.composer-biz-time-tag { + display: inline-flex; + align-items: center; + gap: 4px; + max-width: min(100%, 320px); + min-height: 28px; + padding: 0 8px 0 10px; + border-radius: 999px; + border: 1px solid rgba(59, 130, 246, 0.28); + background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(16, 185, 129, 0.12)); + color: #1d4ed8; + font-size: 11px; + font-weight: 800; + flex: none; +} + +.composer-biz-time-tag i { + font-size: 14px; + color: #2563eb; +} + +.composer-biz-time-tag-label { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.composer-biz-time-tag-remove { + width: 18px; + height: 18px; + display: grid; + place-items: center; + padding: 0; + border: 0; + border-radius: 999px; + background: rgba(255, 255, 255, 0.72); + color: #3b82f6; + flex: none; +} + +.composer-biz-time-tag-remove:disabled { + opacity: 0.48; +} + +.composer-files-panel { + display: grid; + gap: 10px; + padding: 14px; + border: 1px solid rgba(226, 232, 240, 0.9); + border-radius: 18px; + background: linear-gradient(180deg, rgba(248, 251, 255, 0.92) 0%, rgba(242, 247, 251, 0.78) 100%); +} + +.composer-files-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.composer-files-head strong { + color: #0f172a; + font-size: 12px; + font-weight: 850; +} + +.composer-files-actions { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; + justify-content: flex-end; +} + +.composer-file-link { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 0; + border: 0; + background: transparent; + color: #2563eb; + font-size: 11px; + font-weight: 800; +} + +.composer-file-link.danger { + color: #dc2626; +} + +.composer-file-link:disabled { + opacity: 0.48; +} + +.composer-file-chip-row { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.composer-file-chip { + max-width: min(100%, 280px); +} + +.file-chip.summary { + border: 1px dashed rgba(96, 165, 250, 0.34); + background: rgba(239, 246, 255, 0.92); + cursor: pointer; +} + +.file-chip-label { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.file-chip-remove { + width: 18px; + height: 18px; + display: grid; + place-items: center; + padding: 0; + border: 0; + border-radius: 999px; + background: rgba(255, 255, 255, 0.82); + color: inherit; + flex: none; +} + +.file-chip-remove:disabled { + opacity: 0.48; +} + +.composer-files-expanded { + display: grid; + gap: 8px; + max-height: 176px; + overflow-y: auto; + padding-right: 2px; +} + +.composer-expanded-file { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 10px 12px; + border-radius: 14px; + border: 1px solid rgba(219, 230, 240, 0.92); + background: rgba(255, 255, 255, 0.88); +} + +.composer-expanded-file-copy { + min-width: 0; + display: flex; + align-items: center; + gap: 8px; + color: #334155; +} + +.composer-expanded-file-copy span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 12px; + font-weight: 700; +} + +.composer-expanded-file-remove { + width: 28px; + height: 28px; + display: grid; + place-items: center; + border: 0; + border-radius: 10px; + background: rgba(248, 250, 252, 0.92); + color: #64748b; +} + +.composer-expanded-file-remove:disabled { + opacity: 0.48; +} + +.composer-shell textarea { + flex: 1 1 120px; + width: auto; + min-width: 0; + min-height: 36px; + max-height: 120px; + resize: none; + border: 0; + padding: 8px 4px; + background: transparent; + color: #0f172a; + font-size: var(--wb-fs-composer); + line-height: 20px; +} + +.composer-shell textarea::placeholder { + color: #94a3b8; +} + +.composer-shell textarea:focus { + outline: none; +} + +.composer-shell textarea:disabled { + color: #94a3b8; +} + +.composer-row { + display: flex; + align-items: center; + gap: 10px; +} + +.composer-row .composer-shell { + flex: 1 1 auto; +} + +.composer-side-btn, +.composer-row .tool-btn, +.composer-row .send-btn { + width: var(--composer-control-size, 44px); + height: var(--composer-control-size, 44px); + display: grid; + place-items: center; + border: 0; + border-radius: 999px; + flex: none; +} + +.tool-btn { + background: #ffffff; + color: #475569; + font-size: var(--wb-fs-tool-icon); + border: 1px solid #dbe6f0; + box-shadow: 0 4px 12px rgba(241, 245, 249, 0.76); +} + +.tool-btn:disabled { + opacity: 0.48; + cursor: not-allowed; +} + +.send-btn { + background: linear-gradient(135deg, #22c55e, #10b981); + color: #fff; + font-size: var(--wb-fs-tool-icon); + box-shadow: 0 8px 18px rgba(16, 185, 129, 0.18); +} + +.send-btn:disabled { + opacity: 0.48; + cursor: not-allowed; + box-shadow: none; +} + +.insight-panel { + position: relative; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + width: 100%; + height: 100%; + overflow: hidden; + background: + linear-gradient(180deg, rgba(239, 245, 243, 0.9) 0%, rgba(231, 238, 236, 0.84) 100%); + opacity: 1; + transform: translateX(0) scale(1); + transform-origin: right center; + transition: + opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), + transform 320ms cubic-bezier(0.22, 1, 0.36, 1), + box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1); + will-change: transform, opacity; +} + +.insight-panel-shell.collapsed .insight-panel { + opacity: 0; + transform: translateX(44px) scale(0.985); + pointer-events: none; +} + +.insight-panel::before { + content: ""; + position: absolute; + top: -18px; + right: -34px; + width: 240px; + height: 150px; + border-radius: 0 0 0 140px; + background: + radial-gradient(circle at 0 100%, rgba(16, 185, 129, 0.14), transparent 54%), + linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(96, 165, 250, 0.06)); + opacity: 0.9; + pointer-events: none; +} + +.insight-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 14px; + padding: 18px 18px 14px; + border-bottom: 1px solid rgba(205, 215, 224, 0.82); + position: relative; + z-index: 1; +} + +.insight-head.review-mode { + justify-content: space-between; +} + +.insight-head-eyebrow { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +.insight-head-badge { + min-height: 24px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + background: rgba(240, 253, 244, 0.95); + color: #059669; + font-size: 11px; + font-weight: 800; + border: 1px solid rgba(16, 185, 129, 0.12); +} + +.review-insight-title-row { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +.review-insight-title-copy { + min-width: 0; +} + +.review-insight-title-copy h3 { + margin: 0; +} + +.review-insight-tools { + display: inline-flex; + align-items: center; + gap: 8px; + flex: 0 0 auto; + align-self: center; +} + +.review-insight-switch-icon-btn { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + border: 1px solid rgba(203, 213, 225, 0.92); + background: rgba(248, 250, 252, 0.96); + color: #94a3b8; + font-size: 14px; + flex: 0 0 auto; + transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease; +} + +.review-insight-switch-icon-btn.available { + border-color: rgba(245, 158, 11, 0.28); + background: rgba(255, 247, 237, 0.94); + color: #d97706; +} + +.review-insight-switch-icon-btn.active { + border-color: rgba(217, 119, 6, 0.42); + background: rgba(254, 243, 199, 0.98); + color: #b45309; + box-shadow: 0 6px 14px rgba(245, 158, 11, 0.16); +} + +.review-insight-switch-icon-btn.risk.available { + border-color: rgba(239, 68, 68, 0.28); + background: rgba(254, 242, 242, 0.96); + color: #dc2626; +} + +.review-insight-switch-icon-btn.risk.active { + border-color: rgba(220, 38, 38, 0.42); + background: rgba(254, 226, 226, 0.98); + color: #b91c1c; + box-shadow: 0 6px 14px rgba(239, 68, 68, 0.16); +} + +.review-insight-switch-icon-btn.flow.available { + border-color: rgba(37, 99, 235, 0.28); + background: rgba(239, 246, 255, 0.96); + color: #2563eb; +} + +.review-insight-switch-icon-btn.flow.active { + border-color: rgba(37, 99, 235, 0.42); + background: rgba(219, 234, 254, 0.98); + color: #1d4ed8; + box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16); +} + +.review-insight-switch-icon-btn.flow.running i { + animation: flowPulse 1.2s ease-in-out infinite; +} + +.review-insight-switch-icon-btn:hover:not(:disabled) { + transform: translateY(-1px); +} + +.review-insight-switch-icon-btn:disabled { + cursor: not-allowed; + opacity: 1; + color: #cbd5e1; + background: rgba(248, 250, 252, 0.9); +} + +.intent-pill { + min-height: 30px; + display: inline-flex; + align-items: center; + padding: 0 13px; + border-radius: 999px; + font-size: var(--wb-fs-chip); + font-weight: 800; +} + +.intent-pill.welcome { + background: #eef2ff; + color: #4f46e5; +} + +.intent-pill.draft { + background: #ecfdf5; + color: #059669; +} + +.intent-pill.approval { + background: #fff7ed; + color: #ea580c; +} + +.intent-pill.recognition { + background: #eff6ff; + color: #2563eb; +} + +.intent-pill.note { + background: #fdf2f8; + color: #db2777; +} + +.insight-head h3 { + margin-top: 10px; + color: #0f172a; + font-size: var(--wb-fs-insight-title); + font-weight: 900; + line-height: 1.25; +} + +.insight-head p { + margin-top: 6px; + color: #64748b; + font-size: var(--wb-fs-insight-body); + line-height: 1.6; +} + +.confidence-card { + min-width: 92px; + padding: 10px 12px; + border-radius: 14px; + background: rgba(250, 252, 252, 0.9); + border: 1px solid rgba(202, 213, 223, 0.9); + box-shadow: 0 8px 18px rgba(203, 213, 225, 0.3); + text-align: right; +} + +.confidence-card span { + display: block; + color: #94a3b8; + font-size: 11px; + font-weight: 800; +} + +.confidence-card strong { + display: block; + margin-top: 4px; + color: #0f172a; + font-size: var(--wb-fs-insight-num); + font-weight: 900; +} + +.insight-body { + min-height: 0; + display: grid; + align-content: start; + gap: 12px; + padding: 14px 18px 18px; + overflow-y: auto; + position: relative; + z-index: 1; +} + +.review-side-card { + display: grid; + gap: 10px; + padding: 14px; + border-radius: 18px; + border: 1px solid rgba(197, 209, 221, 0.88); + background: rgba(249, 251, 251, 0.88); + box-shadow: 0 10px 20px rgba(226, 232, 240, 0.3); +} + +.review-side-overview-card { + gap: 12px; + background: linear-gradient(180deg, rgba(251, 252, 252, 0.92) 0%, rgba(240, 246, 244, 0.86) 100%); +} + +.review-side-intent-row { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + color: #475569; + font-size: var(--wb-fs-metric); +} + +.review-side-intent-row i { + color: #059669; + font-size: 16px; +} + +.review-side-intent-row strong { + color: #0f172a; + font-size: var(--wb-fs-bubble); + font-weight: 850; +} + +.review-side-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.review-side-grid.compact { + gap: 8px; +} + +.review-side-metric-card { + display: grid; + grid-template-columns: 32px minmax(0, 1fr); + gap: 8px; + align-items: start; + padding: 12px; + border-radius: 14px; + border: 1px solid rgba(206, 216, 226, 0.88); + background: rgba(251, 252, 252, 0.82); + position: relative; + cursor: pointer; + transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; +} + +.review-side-metric-card.wide { + grid-column: 1 / -1; + min-height: 104px; +} + +.review-side-metric-card.invalid { + border-color: rgba(239, 68, 68, 0.34); + background: rgba(254, 242, 242, 0.72); +} + +.review-side-metric-card.editable:hover, +.review-side-metric-card.editing { + border-color: rgba(16, 185, 129, 0.34); + background: rgba(248, 252, 250, 0.92); + transform: translateY(-1px); +} + +.review-side-metric-icon { + width: 32px; + height: 32px; + display: grid; + place-items: center; + border-radius: 10px; + background: rgba(240, 253, 244, 0.95); + color: #059669; + font-size: 15px; +} + +.review-side-metric-copy { + display: grid; + gap: 4px; +} + +.review-side-metric-copy small { + color: #64748b; + font-size: 11px; + font-weight: 800; +} + +.review-side-metric-copy strong { + color: #0f172a; + font-size: var(--wb-fs-metric-strong); + font-weight: 850; + line-height: 1.35; + word-break: break-word; +} + +.review-inline-input { + width: 100%; + min-height: 34px; + padding: 0 10px; + border: 1px solid rgba(16, 185, 129, 0.2); + border-radius: 10px; + background: rgba(255, 255, 255, 0.96); + color: #0f172a; + font-size: 12px; + font-weight: 700; +} + +.review-inline-textarea { + min-height: 82px; + padding: 9px 10px; + resize: vertical; + line-height: 1.55; + font-family: inherit; +} + +.review-inline-input.invalid { + border-color: rgba(239, 68, 68, 0.4); + color: #b91c1c; + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08); +} + +.review-inline-input:focus { + outline: none; + border-color: rgba(16, 185, 129, 0.42); + box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08); +} + +.review-inline-select-list { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.review-inline-select-option { + min-height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 10px; + border-radius: 999px; + border: 1px solid rgba(203, 213, 225, 0.92); + background: rgba(255, 255, 255, 0.96); + color: #475569; + font-size: 11px; + font-weight: 700; +} + +.review-inline-select-option.active { + border-color: rgba(16, 185, 129, 0.36); + background: rgba(240, 253, 244, 0.94); + color: #047857; +} + +.review-inline-error { + color: #dc2626; + font-size: 11px; + font-weight: 800; + line-height: 1.45; +} + +.review-side-edit-hint { + position: absolute; + top: 8px; + right: 8px; + min-height: 20px; + display: inline-flex; + align-items: center; + padding: 0 6px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.92); + border: 1px solid rgba(226, 232, 240, 0.92); + color: #94a3b8; + font-size: 10px; + font-weight: 800; + opacity: 0; + transition: opacity 0.18s ease; +} + +.review-side-edit-hint.upload { + color: #059669; +} + +.review-side-metric-card:hover .review-side-edit-hint, +.review-side-metric-card.editing .review-side-edit-hint { + opacity: 1; +} + +.review-side-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.review-side-head strong { + color: #0f172a; + font-size: 14px; + font-weight: 900; +} + +.review-side-head-copy { + display: grid; + gap: 4px; + min-width: 0; +} + +.review-side-head-copy p { + margin: 0; + color: #64748b; + font-size: 11px; + line-height: 1.55; +} + +.review-side-confidence { + color: #10b981; + font-size: 12px; + font-weight: 900; +} + +.review-side-category-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.review-side-category-card { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 8px; + padding: 12px; + min-height: 66px; + border-radius: 14px; + border: 1px solid rgba(226, 232, 240, 0.94); + background: rgba(255, 255, 255, 0.68); + cursor: pointer; + transition: border-color 0.18s ease, background 0.18s ease; +} + +.review-side-category-card.active { + border-color: rgba(52, 211, 153, 0.62); + background: rgba(240, 253, 244, 0.9); + box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08); +} + +.review-side-category-copy { + display: grid; + gap: 4px; + min-width: 0; +} + +.review-side-category-copy strong { + color: #0f172a; + font-size: 12px; + font-weight: 850; + line-height: 1.35; + white-space: nowrap; +} + +.review-side-category-copy p { + margin: 0; + color: #64748b; + font-size: 10px; + line-height: 1.4; +} + +.review-side-group-check { + color: #10b981; + font-size: 18px; +} + +.review-other-category-popover { + display: flex; + flex-wrap: wrap; + gap: 8px; + padding-top: 2px; +} + +.review-other-category-option { + min-height: 30px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 12px; + border-radius: 999px; + border: 1px solid rgba(203, 213, 225, 0.92); + background: rgba(255, 255, 255, 0.94); + color: #475569; + font-size: 11px; + font-weight: 750; +} + +.review-other-category-option.active { + border-color: rgba(16, 185, 129, 0.36); + background: rgba(240, 253, 244, 0.94); + color: #047857; +} + +.review-side-risk-card { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 249, 238, 0.8) 100%); +} + +.review-side-risk-summary { + margin: 0; + color: #334155; + font-size: 12px; + line-height: 1.6; +} + +.review-side-risk-list { + display: grid; + gap: 8px; + margin: 0; +} + +.review-side-risk-item { + width: 100%; + display: grid; + grid-template-columns: 30px minmax(0, 1fr) auto; + align-items: center; + gap: 10px; + min-height: 66px; + padding: 10px; + border: 1px solid rgba(226, 232, 240, 0.95); + border-radius: 14px; + background: rgba(255, 255, 255, 0.76); + color: #334155; + text-align: left; + transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; +} + +.review-side-risk-item:hover { + border-color: rgba(249, 115, 22, 0.38); + box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); + transform: translateY(-1px); +} + +.review-side-risk-icon { + width: 30px; + height: 30px; + display: grid; + place-items: center; + border-radius: 10px; + background: rgba(14, 165, 233, 0.12); + color: #0284c7; + font-size: 16px; +} + +.review-side-risk-item.medium .review-side-risk-icon { + background: rgba(245, 158, 11, 0.14); + color: #b45309; +} + +.review-side-risk-item.high .review-side-risk-icon { + background: rgba(239, 68, 68, 0.12); + color: #dc2626; +} + +.review-side-risk-item.low .review-side-risk-icon { + background: rgba(14, 165, 233, 0.12); + color: #0284c7; +} + +.review-side-risk-copy { + min-width: 0; + display: grid; + gap: 3px; +} + +.review-side-risk-copy strong { + color: #0f172a; + font-size: 12px; + font-weight: 900; +} + +.review-side-risk-copy p { + margin: 0; + color: #64748b; + font-size: 12px; + line-height: 1.55; +} + +.review-side-risk-meta { + display: inline-flex; + align-items: center; + gap: 2px; + color: #64748b; + font-size: 11px; + font-weight: 850; + white-space: nowrap; +} + +.review-side-link { + width: fit-content; + display: inline-flex; + align-items: center; + gap: 4px; + padding: 0; + border: 0; + background: transparent; + color: #059669; + font-size: 12px; + font-weight: 850; +} + +.review-side-link:disabled { + opacity: 0.5; +} + +.review-side-empty { + display: grid; + justify-items: start; + gap: 8px; + padding: 14px; + border: 1px dashed rgba(203, 213, 225, 0.92); + border-radius: 16px; + background: rgba(255, 255, 255, 0.52); +} + +.review-side-empty-icon { + width: 36px; + height: 36px; + display: grid; + place-items: center; + border-radius: 12px; + background: rgba(240, 244, 248, 0.96); + color: #94a3b8; + font-size: 18px; +} + +.review-side-empty strong { + color: #475569; + font-size: 13px; + font-weight: 850; +} + +.review-side-empty p { + margin: 0; + color: #94a3b8; + font-size: 12px; + line-height: 1.6; +} + +.review-side-save-pill { + position: sticky; + bottom: 0; + justify-self: end; + min-height: 36px; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 0 14px; + border: 1px solid rgba(16, 185, 129, 0.22); + border-radius: 999px; + background: rgba(255, 255, 255, 0.94); + color: #059669; + font-size: 12px; + font-weight: 850; + box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); +} + +.review-side-save-pill:disabled { + opacity: 0.5; + box-shadow: none; +} + +.review-document-switch-card { + gap: 14px; +} + +.review-ticket-drawer { + min-height: 0; +} + +.review-document-switch-head { + align-items: flex-start; +} + +.review-document-nav { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 4px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.92); + border: 1px solid rgba(226, 232, 240, 0.92); + white-space: nowrap; +} + +.review-document-nav span { + color: #334155; + font-size: 11px; + font-weight: 850; +} + +.review-document-nav-btn { + width: 28px; + height: 28px; + display: grid; + place-items: center; + border: 0; + border-radius: 999px; + background: rgba(241, 245, 249, 0.96); + color: #334155; +} + +.review-document-nav-btn:disabled { + opacity: 0.4; +} + +.review-document-stage { + display: grid; + gap: 12px; + min-height: 0; +} + +.review-document-stage-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} + +.review-document-stage-copy { + min-width: 0; + display: grid; + gap: 6px; +} + +.review-document-stage-copy strong { + color: #0f172a; + font-size: 13px; + font-weight: 850; + line-height: 1.5; + word-break: break-word; +} + +.review-document-index-chip { + width: fit-content; + min-height: 24px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + background: rgba(236, 253, 245, 0.92); + color: #059669; + font-size: 11px; + font-weight: 850; +} + +.review-document-meta-chip-row { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.review-document-meta-chip { + min-height: 26px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + background: rgba(248, 250, 252, 0.94); + border: 1px solid rgba(226, 232, 240, 0.92); + color: #475569; + font-size: 11px; + font-weight: 800; +} + +.review-document-meta-chip.confidence { + background: rgba(236, 253, 245, 0.92); + color: #047857; + border-color: rgba(167, 243, 208, 0.92); +} + +.review-document-scroll { + display: grid; + gap: 12px; + max-height: 430px; + overflow-y: auto; + padding-right: 4px; +} + +.review-document-preview-card { + min-height: 168px; + overflow: hidden; + border-radius: 16px; + border: 1px solid rgba(226, 232, 240, 0.94); + background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); +} + +.review-document-preview-card.clickable { + cursor: zoom-in; +} + +.review-document-preview-card.clickable img { + transition: transform 0.18s ease; +} + +.review-document-preview-card.clickable:hover img { + transform: scale(1.02); +} + +.review-document-preview-card.image img { + display: block; + width: 100%; + height: 188px; + object-fit: cover; +} + +.review-document-preview-placeholder { + min-height: 168px; + display: grid; + place-items: center; + gap: 6px; + padding: 18px; + text-align: center; +} + +.review-document-preview-placeholder i { + color: #64748b; + font-size: 34px; +} + +.review-document-preview-placeholder strong { + color: #0f172a; + font-size: 13px; + font-weight: 850; +} + +.review-document-preview-placeholder p { + margin: 0; + color: #64748b; + font-size: 12px; + line-height: 1.65; +} + +.review-document-edit-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.review-document-edit-field { + display: grid; + gap: 8px; +} + +.review-document-edit-field span { + color: #334155; + font-size: 12px; + font-weight: 800; +} + +.review-document-edit-field input, +.review-document-edit-field textarea { + width: 100%; + border: 1px solid rgba(219, 230, 240, 0.96); + border-radius: 14px; + background: rgba(255, 255, 255, 0.96); + color: #0f172a; + font-size: 13px; + line-height: 1.6; + padding: 10px 12px; + resize: vertical; +} + +.review-document-edit-field input:focus, +.review-document-edit-field textarea:focus { + outline: none; + border-color: rgba(16, 185, 129, 0.36); + box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08); +} + +.review-document-edit-field textarea { + min-height: 88px; +} + +.review-document-warning-list { + display: grid; + gap: 8px; +} + +.review-document-warning-item { + display: grid; + grid-template-columns: 18px minmax(0, 1fr); + gap: 8px; + align-items: start; + padding: 10px 12px; + border-radius: 14px; + background: rgba(255, 247, 237, 0.92); + border: 1px solid rgba(253, 186, 116, 0.6); + color: #c2410c; + font-size: 12px; + line-height: 1.6; +} + +.review-side-empty.compact { + padding: 12px; +} + +.insight-card { + padding: 16px; + border: 1px solid #e7eef6; + border-radius: 20px; + background: rgba(255, 255, 255, 0.95); + box-shadow: 0 14px 24px rgba(241, 245, 249, 0.86); +} + +.insight-card.primary { + background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); +} + +.card-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 14px; +} + +.card-head h4 { + color: #0f172a; + font-size: 15px; + font-weight: 850; +} + +.knowledge-question-list { + display: grid; + gap: 10px; +} + +.knowledge-question-btn { + width: 100%; + display: grid; + grid-template-columns: 28px minmax(0, 1fr) 18px; + align-items: center; + gap: 10px; + padding: 12px 14px; + border: 1px solid rgba(226, 232, 240, 0.92); + border-radius: 16px; + background: rgba(248, 250, 252, 0.86); + color: #1e293b; + text-align: left; + transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; +} + +.knowledge-question-btn:hover:not(:disabled) { + border-color: rgba(16, 185, 129, 0.3); + background: rgba(240, 253, 244, 0.9); + transform: translateY(-1px); +} + +.knowledge-question-btn:disabled { + opacity: 0.48; + cursor: not-allowed; + transform: none; +} + +.knowledge-question-btn i { + justify-self: end; + color: #059669; + font-size: 16px; +} + +.knowledge-question-index { + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + background: rgba(226, 232, 240, 0.9); + color: #0f172a; + font-size: 12px; + font-weight: 850; +} + +.knowledge-question-index.gold { + background: linear-gradient(135deg, #fbbf24, #f59e0b); + color: #7c2d12; + box-shadow: 0 6px 14px rgba(245, 158, 11, 0.22); +} + +.knowledge-question-index.silver { + background: linear-gradient(135deg, #e2e8f0, #cbd5e1); + color: #334155; + box-shadow: 0 6px 14px rgba(148, 163, 184, 0.18); +} + diff --git a/web/src/assets/styles/views/travel-reimbursement-create-view-part3.css b/web/src/assets/styles/views/travel-reimbursement-create-view-part3.css new file mode 100644 index 0000000..f5484f4 --- /dev/null +++ b/web/src/assets/styles/views/travel-reimbursement-create-view-part3.css @@ -0,0 +1,1090 @@ +.knowledge-question-index.bronze { + background: linear-gradient(135deg, #fdba74, #ea580c); + color: #7c2d12; + box-shadow: 0 6px 14px rgba(234, 88, 12, 0.18); +} + +.knowledge-question-copy { + min-width: 0; + color: #334155; + font-size: 13px; + font-weight: 750; + line-height: 1.5; +} + +.status-pill { + min-height: 28px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + font-size: 12px; + font-weight: 800; + white-space: nowrap; +} + +.status-pill.success { + background: #ecfdf5; + color: #059669; +} + +.status-pill.warning { + background: #fff7ed; + color: #ea580c; +} + +.status-pill.note { + background: #fdf2f8; + color: #db2777; +} + +.metric-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.metric-grid.single { + grid-template-columns: 1fr; +} + +.metric-item { + padding: 12px 14px; + border-radius: 16px; + background: #f8fafc; +} + +.metric-item span { + display: block; + color: #94a3b8; + font-size: 11px; + font-weight: 800; +} + +.metric-item strong { + display: block; + margin-top: 6px; + color: #0f172a; + font-size: 14px; + font-weight: 850; + line-height: 1.5; +} + +.timeline-list, +.bullet-list { + display: grid; + gap: 12px; + padding: 0; + margin: 0; + list-style: none; +} + +.timeline-list li { + display: grid; + grid-template-columns: 14px minmax(0, 1fr); + gap: 12px; + align-items: start; +} + +.timeline-dot { + width: 10px; + height: 10px; + margin-top: 5px; + border-radius: 999px; + background: #cbd5e1; +} + +.timeline-list li.done .timeline-dot, +.timeline-list li.current .timeline-dot { + background: #10b981; +} + +.timeline-list strong { + display: block; + color: #0f172a; + font-size: 13px; + font-weight: 800; +} + +.timeline-list p, +.bullet-list li, +.welcome-card p, +.note-block p { + color: #64748b; + font-size: var(--wb-fs-metric); + line-height: 1.6; +} + +.receipt-list { + display: grid; + gap: 10px; +} + +.receipt-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 12px; + align-items: center; + padding: 12px 14px; + border-radius: 16px; + background: #f8fafc; +} + +.receipt-row strong, +.welcome-card strong, +.note-block strong { + color: #0f172a; + font-size: var(--wb-fs-bubble); + font-weight: 850; +} + +.action-card { + background: #fff; +} + +.receipt-row p, +.receipt-row span { + color: #64748b; + font-size: 12px; +} + +.receipt-side { + text-align: right; +} + +.receipt-side strong { + display: block; +} + +.review-flow-panel { + min-height: 0; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + gap: 12px; +} + +.review-flow-summary { + display: flex; + align-items: center; + gap: 10px; + min-height: 34px; + color: #64748b; + font-size: 12px; + font-weight: 800; +} + +.review-flow-summary .flow-icon-btn { + margin-left: auto; +} + +.review-flow-list { + min-height: 0; + display: grid; + align-content: start; + gap: 0; + overflow-y: auto; + padding-right: 2px; +} + +.review-flow-panel .flow-step-card { + border-radius: 14px; + box-shadow: none; +} + +.review-flow-panel .flow-empty-state { + min-height: 260px; +} + +.flow-empty-state.compact { + padding: 22px; +} + +.review-message-block { + margin-top: 8px; +} + +.review-summary { + margin: 0; + color: #1f2937; + font-size: var(--wb-fs-bubble); + line-height: 1.58; + white-space: pre-line; +} + +.review-plain-followup { + display: grid; + gap: 7px; + padding: 0; + color: #334155; + font-size: var(--wb-fs-bubble); + line-height: 1.58; +} + +.review-plain-followup p { + margin: 0; +} + +.review-plain-lead { + color: #334155; +} + +.review-plain-list { + display: grid; + gap: 4px; + margin: 0; + padding: 0 0 0 18px; +} + +.review-plain-list li { + padding-left: 2px; + color: #475569; +} + +.review-plain-label { + color: #1f2937; + font-weight: 760; + margin-right: 2px; +} + +.review-plain-note { + color: #64748b; +} + +.review-inline-save-copy { + color: #475569; +} + +.review-inline-draft-link { + display: inline; + padding: 0; + border: 0; + background: transparent; + color: #2563eb; + font: inherit; + font-weight: 850; + line-height: inherit; + text-decoration: underline; + text-underline-offset: 3px; + cursor: pointer; +} + +.review-inline-draft-link:hover:not(:disabled) { + color: #1d4ed8; +} + +.review-inline-draft-link:disabled { + color: #94a3b8; + cursor: not-allowed; +} + +.review-section-card { + display: grid; + gap: 10px; + padding: 12px 14px; + border-radius: 16px; + border: 1px solid rgba(226, 232, 240, 0.92); + background: rgba(255, 255, 255, 0.76); +} + +.review-section-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.review-section-head strong { + color: #0f172a; + font-size: 12px; + font-weight: 900; +} + +.review-section-head span { + min-height: 22px; + display: inline-flex; + align-items: center; + padding: 0 8px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.92); + border: 1px solid #e2e8f0; + color: #475569; + font-size: 10px; + font-weight: 800; +} + +.review-alert-card { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(251, 248, 243, 0.82) 100%); +} + +/* 已删除：review-alert-chip-row 相关样式（冗余气泡） */ +/* 已删除：主对话框中的风险提示（与右侧边栏重复，已移除） */ + +/* 风险提示样式已统一到 review-pending-item */ +.review-risk-brief-list { + display: none; /* 隐藏原有的独立风险提示列表 */ +} + +.review-risk-brief { + display: none; /* 隐藏原有的独立风险提示项 */ +} + +.review-pending-list { + display: grid; + gap: 8px; +} + +.review-pending-list.plain { + gap: 0; +} + +.review-pending-item { + display: grid; + grid-template-columns: 36px minmax(0, 1fr) auto; + gap: 10px; + align-items: center; + padding: 11px 12px; + border-radius: 14px; + background: rgba(255, 255, 255, 0.88); + border: 1px solid rgba(226, 232, 240, 0.92); +} + +.review-pending-list.plain .review-pending-item { + padding: 10px 0; + border: 0; + border-radius: 0; + background: transparent; + border-bottom: 1px solid rgba(226, 232, 240, 0.7); +} + +.review-pending-list.plain .review-pending-item:last-child { + border-bottom: 0; + padding-bottom: 0; +} + +.review-pending-list.plain .review-pending-item:first-child { + padding-top: 2px; +} + +.review-pending-icon { + width: 36px; + height: 36px; + display: grid; + place-items: center; + border-radius: 10px; + background: rgba(236, 253, 245, 0.95); + color: #059669; + font-size: 16px; +} + +/* 风险级别的图标样式（已删除主对话框中的风险提示，保留样式备用） */ +.review-pending-icon.high { + background: rgba(254, 226, 226, 0.95); + color: #dc2626; +} + +.review-pending-icon.warning { + background: rgba(255, 237, 213, 0.95); + color: #ea580c; +} + +.review-pending-list.plain .review-pending-icon { + background: rgba(236, 253, 245, 0.62); +} + +.review-pending-list.plain .review-pending-icon.high { + background: rgba(254, 226, 226, 0.62); +} + +.review-pending-list.plain .review-pending-icon.warning { + background: rgba(255, 237, 213, 0.62); +} + +.review-pending-copy { + display: grid; + gap: 4px; +} + +.review-pending-copy strong { + color: #0f172a; + font-size: 13px; + font-weight: 850; +} + +.review-pending-copy p { + margin: 0; + color: #64748b; + font-size: 11px; + line-height: 1.5; +} + +.review-pending-status { + min-height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 10px; + border-radius: 999px; + font-size: 10px; + font-weight: 800; + white-space: nowrap; +} + +.review-pending-status.warning { + background: rgba(255, 241, 242, 0.96); + color: #e11d48; + border: 1px solid #fecdd3; +} + +.review-pending-status.danger { + background: rgba(254, 242, 242, 0.96); + color: #dc2626; + border: 1px solid #fca5a5; +} + +.review-pending-status.ready { + background: rgba(240, 253, 244, 0.96); + color: #059669; + border: 1px solid #86efac; +} + +.review-footer-actions { + display: grid; + gap: 8px; + padding-top: 6px; + border-top: 1px solid rgba(226, 232, 240, 0.72); +} + +.review-footer-btn-row { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.review-footer-btn { + min-height: 36px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 14px; + border-radius: 12px; + border: 1px solid #dbe6f0; + background: rgba(255, 255, 255, 0.92); + color: #334155; + font-size: 12px; + font-weight: 800; + box-shadow: 0 3px 10px rgba(241, 245, 249, 0.58); +} + +.review-footer-btn.primary { + border-color: rgba(16, 185, 129, 0.26); + background: linear-gradient(135deg, #10b981, #059669); + color: #fff; + box-shadow: 0 6px 14px rgba(16, 185, 129, 0.16); +} + +.review-footer-btn:disabled { + cursor: not-allowed; + opacity: 0.6; + box-shadow: none; +} + +.review-summary { + margin: 0; + color: #1f2937; + font-size: var(--wb-fs-bubble); + line-height: 1.58; +} + +.review-inline-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: flex-start; +} + +.review-inline-btn, +.primary-dialog-btn, +.secondary-dialog-btn, +.danger-dialog-btn { + min-height: 38px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 16px; + border-radius: 999px; + font-size: 12px; + font-weight: 800; +} + +.review-inline-btn { + border: 1px solid #dbe6f0; + background: #fff; + color: #334155; +} + +.review-inline-btn.primary, +.primary-dialog-btn { + border: 1px solid rgba(16, 185, 129, 0.22); + background: linear-gradient(135deg, #10b981, #059669); + color: #fff; + box-shadow: 0 10px 22px rgba(16, 185, 129, 0.18); +} + +.review-inline-btn.secondary, +.secondary-dialog-btn { + border: 1px solid #dbe6f0; + background: #fff; + color: #334155; +} + +.danger-dialog-btn { + border: 1px solid rgba(239, 68, 68, 0.22); + background: linear-gradient(135deg, #ef4444, #dc2626); + color: #fff; + box-shadow: 0 10px 22px rgba(239, 68, 68, 0.18); +} + +.review-inline-btn:disabled, +.primary-dialog-btn:disabled, +.secondary-dialog-btn:disabled, +.danger-dialog-btn:disabled { + cursor: not-allowed; + opacity: 0.62; + box-shadow: none; +} + +.review-inline-note { + margin: 0; + color: #64748b; + font-size: 12px; + line-height: 1.6; +} + +.review-inline-guidance { + margin: 0; + color: #0f766e; + font-size: 12px; + line-height: 1.7; +} + +.review-status-banner { + display: grid; + gap: 8px; + padding: 14px 16px; + border-radius: 18px; + border: 1px solid #dbeafe; + background: linear-gradient(180deg, #f8fbff 0%, #f0f7ff 100%); +} + +.review-status-banner.ready { + border-color: #bbf7d0; + background: linear-gradient(180deg, #f5fffa 0%, #ecfdf5 100%); +} + +.review-status-banner.pending { + border-color: #fde68a; + background: linear-gradient(180deg, #fffdf7 0%, #fffbeb 100%); +} + +.review-status-tag { + width: fit-content; + min-height: 26px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.86); + color: #0f172a; + font-size: 12px; + font-weight: 850; + border: 1px solid rgba(148, 163, 184, 0.22); +} + +.review-inline-section { + display: grid; + gap: 10px; + padding: 14px 16px; + border-radius: 18px; + border: 1px solid #e2e8f0; + background: rgba(255, 255, 255, 0.88); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66); +} + +.review-inline-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.review-inline-head > strong { + color: #0f172a; + font-size: 12px; + font-weight: 850; +} + +.review-inline-head > span { + min-height: 24px; + display: inline-flex; + align-items: center; + padding: 0 9px; + border-radius: 999px; + background: #fff; + color: #475569; + font-size: 11px; + font-weight: 800; + border: 1px solid #e2e8f0; +} + +.review-inline-caption { + margin: 0; + color: #64748b; + font-size: 12px; + line-height: 1.65; +} + +.review-inline-list { + display: grid; + gap: 8px; +} + +.review-missing-chip-row { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.review-missing-chip { + min-height: 30px; + display: inline-flex; + align-items: center; + padding: 0 12px; + border-radius: 999px; + background: #fff; + color: #0f172a; + font-size: 12px; + font-weight: 800; + border: 1px solid #fed7aa; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); +} + +.review-inline-item { + display: grid; + gap: 4px; + padding: 10px 12px; + border-radius: 14px; + border: 1px solid #e2e8f0; + background: #fff; +} + +.review-inline-item.warning { + background: #fff7ed; + border-color: #fed7aa; +} + +.review-inline-item.high { + background: #fff1f2; + border-color: #fecdd3; +} + +.review-inline-item span { + color: #0f172a; + font-size: 12px; + font-weight: 800; +} + +.review-inline-item p { + margin: 0; + color: #64748b; + font-size: 12px; + line-height: 1.65; +} + +.review-inline-footer { + display: grid; + gap: 10px; + padding-top: 2px; + border-top: 1px dashed rgba(203, 213, 225, 0.78); +} + +.review-mini-grid, +.review-slot-grid, +.review-doc-field-grid { + display: grid; + gap: 10px; +} + +.review-mini-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.review-slot-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.review-slot-card, +.review-doc-field-card, +.review-brief-card, +.review-claim-card, +.review-document-card { + border: 1px solid #e2e8f0; + border-radius: 16px; + background: #f8fbff; +} + +.review-slot-card { + display: grid; + gap: 8px; + padding: 12px 14px; +} + +.review-slot-card.compact { + gap: 4px; + padding: 10px 12px; +} + +.review-slot-card header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.review-slot-card span, +.review-doc-field-card span, +.review-brief-card strong, +.review-document-card header span { + color: #64748b; + font-size: 11px; + font-weight: 800; +} + +.review-slot-card strong, +.review-doc-field-card strong, +.review-claim-card strong, +.review-document-card header strong { + color: #0f172a; + font-size: 13px; + font-weight: 850; +} + +.review-slot-card p, +.review-brief-card p, +.review-claim-card p, +.review-document-card p { + margin: 0; + color: #64748b; + font-size: 12px; + line-height: 1.6; +} + +.review-slot-card.missing { + border-color: #fecdd3; + background: #fff7f7; +} + +.review-slot-card.inferred { + border-color: #dbeafe; + background: #f8fbff; +} + +.review-slot-meta-list { + display: grid; + gap: 8px; +} + +.review-slot-meta-item { + padding: 9px 10px; + border-radius: 12px; + background: rgba(255, 255, 255, 0.82); + border: 1px solid rgba(226, 232, 240, 0.9); +} + +.review-slot-meta-item span { + color: #94a3b8; + font-size: 11px; + font-weight: 800; +} + +.review-slot-meta-item strong { + display: block; + margin-top: 4px; + font-size: 12px; +} + +.review-brief-list, +.review-claim-list, +.review-document-list { + display: grid; + gap: 10px; +} + +.review-brief-card, +.review-claim-card, +.review-document-card { + padding: 12px 14px; +} + +.review-brief-card.warning { + background: #fff7ed; + border-color: #fed7aa; +} + +.review-brief-card.high { + background: #fff1f2; + border-color: #fecdd3; +} + +.review-claim-card header, +.review-document-card header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; + margin-bottom: 8px; +} + +.review-document-card { + display: grid; + gap: 10px; +} + +.document-preview { + min-height: 124px; + overflow: hidden; + border-radius: 14px; + background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); + border: 1px dashed #dbe3ec; +} + +.document-preview.image img { + display: block; + width: 100%; + height: 180px; + object-fit: cover; +} + +.document-preview-placeholder { + min-height: 124px; + display: grid; + place-items: center; + gap: 6px; + color: #64748b; + text-align: center; +} + +.document-preview-placeholder i { + font-size: 28px; +} + +.review-doc-field-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.review-doc-field-card { + padding: 10px 12px; +} + +.action-list.compact { + grid-template-columns: 1fr; +} + +.action-card.primary { + border-color: #bbf7d0; + background: #f0fdf4; +} + +.action-card.secondary { + background: #fff; +} + +.action-card.warning { + border-color: #fed7aa; + background: #fff7ed; +} + +.note-block { + display: grid; + gap: 8px; + padding: 14px; + border-radius: 16px; + background: #f8fafc; +} + +.note-block span { + color: #94a3b8; + font-size: 11px; + font-weight: 800; +} + +.review-conclusion strong { + font-size: var(--wb-fs-insight-h4); + line-height: 1.6; +} + +.insight-text-section { + display: grid; + gap: 12px; + padding: 2px 0 0; +} + +.insight-text-section h4 { + color: #0f172a; + font-size: var(--wb-fs-insight-h4); + font-weight: 850; +} + +.insight-text-list, +.review-document-plain-list { + display: grid; + gap: 12px; +} + +.recognition-bubble { + display: grid; + gap: 10px; + padding: 16px 18px; + border-radius: 22px; + border: 1px solid rgba(191, 219, 254, 0.9); + background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%); + box-shadow: 0 16px 28px rgba(241, 245, 249, 0.9); +} + +.recognition-bubble.secondary { + border-color: #e2e8f0; + background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); +} + +.recognition-bubble-label { + color: #0f766e; + font-size: 11px; + font-weight: 850; + letter-spacing: 0.02em; +} + +.recognition-bubble.secondary .recognition-bubble-label { + color: #475569; +} + +.recognition-bubble-copy { + display: grid; + gap: 8px; +} + +.recognition-bubble-line, +.recognition-bubble-note { + margin: 0; + color: #334155; + font-size: 13px; + line-height: 1.75; +} + +.recognition-bubble-line { + font-weight: 700; + color: #0f172a; +} + +.recognition-bubble-note { + color: #64748b; +} + +.review-document-bubble { + display: grid; + grid-template-columns: minmax(0, 1fr) 140px; + gap: 14px; + align-items: start; + padding: 16px; + border-radius: 22px; + background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); + border: 1px solid rgba(226, 232, 240, 0.95); + box-shadow: 0 16px 28px rgba(241, 245, 249, 0.92); +} + +.review-document-copy { + display: grid; + gap: 6px; +} + +.review-document-index { + color: #1d4ed8; + font-size: 11px; + font-weight: 850; +} + +.review-document-copy strong { + color: #0f172a; + font-size: 13px; + font-weight: 850; + line-height: 1.6; +} + +.review-document-copy p { + margin: 0; + color: #64748b; + font-size: 12px; + line-height: 1.7; +} + +.review-overlay { + z-index: 10001; +} + +.review-confirm-modal { + width: min(720px, calc(100vw - 40px)); + border-radius: 24px; + background: + radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 28%), + linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%); + 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-confirm-modal { + padding: 24px; + display: grid; + gap: 18px; +} + +.review-confirm-modal h3 { + margin-top: 12px; + color: #0f172a; + font-size: 22px; + font-weight: 900; + line-height: 1.35; +} + +.review-confirm-modal p { + margin-top: 8px; + color: #64748b; + font-size: 14px; + line-height: 1.7; +} + +.review-confirm-actions { + display: flex; + justify-content: flex-end; + gap: 12px; + flex-wrap: wrap; +} + +.review-upload-decision-modal { + display: grid; + gap: 18px; +} + +.review-upload-decision-copy { + display: grid; + gap: 10px; +} + +.review-upload-decision-actions { + justify-content: stretch; +} + +.review-upload-decision-actions .primary-dialog-btn, +.review-upload-decision-actions .secondary-dialog-btn { + flex: 1 1 168px; +} + diff --git a/web/src/assets/styles/views/travel-reimbursement-create-view-part4.css b/web/src/assets/styles/views/travel-reimbursement-create-view-part4.css new file mode 100644 index 0000000..e5cb425 --- /dev/null +++ b/web/src/assets/styles/views/travel-reimbursement-create-view-part4.css @@ -0,0 +1,465 @@ +.review-preview-modal { + width: min(980px, calc(100vw - 40px)); + max-height: min(92vh, calc(100vh - 32px)); + display: grid; + grid-template-rows: auto minmax(0, 1fr); + overflow: hidden; + border-radius: 24px; + background: + radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 28%), + linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%); + 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: 20px; + 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: 18px; + background: #fff; +} + +.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 22px; + color: #64748b; + font-size: 12px; + font-weight: 800; +} + +.welcome-quick-action-grid { + display: flex; + flex-wrap: wrap; + gap: 7px; +} + +.welcome-quick-action-btn { + min-height: 30px; + display: inline-flex; + align-items: center; + gap: 5px; + padding: 0 11px; + border: 1px solid rgba(191, 219, 254, 0.92); + border-radius: 999px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.94) 100%); + color: #1d4ed8; + font-size: var(--wb-fs-chip); + font-weight: 700; + line-height: 1.2; + box-shadow: 0 4px 10px rgba(59, 130, 246, 0.07); + transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; +} + +.welcome-quick-action-btn i { + font-size: 13px; + color: #2563eb; +} + +.welcome-quick-action-btn:hover:not(:disabled) { + transform: translateY(-1px); + border-color: rgba(59, 130, 246, 0.34); + box-shadow: 0 7px 14px rgba(59, 130, 246, 0.12); +} + +.welcome-quick-action-btn:disabled { + opacity: 0.48; + cursor: not-allowed; +} + +.welcome-grid { + display: grid; + gap: 12px; +} + +.welcome-card { + padding: 14px; + border-radius: 18px; + background: #f8fafc; +} + +.welcome-card i { + color: #10b981; + 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 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 auto; + min-height: 0; + } + + .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; + } +} + +/* 矮屏笔记本（如 1366×768）：压缩顶栏与间距，把高度留给对话列表 */ +@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) { + .assistant-overlay { + --assistant-viewport-inset: 10px; + } + + .assistant-modal, + .assistant-modal-stage { + border-radius: 18px; + } + + .assistant-header { + padding: 18px 18px 16px; + align-items: flex-start; + flex-direction: column; + } + + .assistant-header-actions { + top: 18px; + right: 18px; + gap: 10px; + width: auto; + justify-content: space-between; + } + + .assistant-toggle-btn, + .session-trash-btn, + .assistant-close-btn, + .close-btn { + width: 40px; + height: 40px; + border-radius: 14px; + font-size: 16px; + } + + .flow-step-card header { + align-items: flex-start; + } + + .assistant-layout { + padding: 14px; + } + + .composer-row { + gap: 8px; + --composer-control-size: 40px; + } + + .composer-shell textarea { + min-height: 32px; + } + + .travel-calculator-form { + grid-template-columns: 1fr; + } + + .dialog-toolbar { + padding: 16px 16px 12px; + } + + .shortcut-chip { + width: 100%; + justify-content: center; + } + + .message-list { + padding: 16px; + } + + .message-row, + .message-row.user { + grid-template-columns: 34px minmax(0, 1fr); + } + + .message-row.user .message-avatar { + order: 0; + } + + .message-row.user .message-bubble { + order: 0; + justify-self: stretch; + } + + .message-suggested-actions { + grid-template-columns: 1fr; + } + + .composer { + padding: 0 16px 16px; + } + + .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; + } + + .review-upload-decision-actions { + width: 100%; + } + + .primary-dialog-btn, + .secondary-dialog-btn, + .danger-dialog-btn { + width: 100%; + } +} diff --git a/web/src/assets/styles/views/travel-reimbursement-create-view.css b/web/src/assets/styles/views/travel-reimbursement-create-view.css index b0b99d1..2a36c76 100644 --- a/web/src/assets/styles/views/travel-reimbursement-create-view.css +++ b/web/src/assets/styles/views/travel-reimbursement-create-view.css @@ -43,22 +43,22 @@ --wb-fs-title: 22px; --wb-fs-desc: 13px; --wb-fs-badge: 12px; - --wb-fs-bubble: 14px; - --wb-fs-bubble-meta: 13px; - --wb-fs-bubble-time: 12px; + --wb-fs-bubble: 13px; + --wb-fs-bubble-meta: 12px; + --wb-fs-bubble-time: 11px; --wb-fs-chip: 12px; --wb-fs-composer: 14px; --wb-fs-tool-icon: 18px; - --wb-fs-md-h1: 18px; - --wb-fs-md-h2: 16px; - --wb-fs-md-h3: 14px; + --wb-fs-md-h1: 13px; + --wb-fs-md-h2: 13px; + --wb-fs-md-h3: 13px; --wb-fs-insight-title: 19px; --wb-fs-insight-num: 19px; --wb-fs-insight-body: 12px; --wb-fs-insight-h4: 15px; --wb-fs-metric: 13px; --wb-fs-metric-strong: 13px; - --wb-fs-welcome: 20px; + --wb-fs-welcome: 18px; position: relative; flex: 1; min-width: 0; @@ -624,12 +624,13 @@ .message-bubble { max-width: min(100%, 720px); - padding: 14px 16px; + padding: 12px 14px; border: 1px solid rgba(210, 220, 230, 0.94); border-radius: 20px; background: rgba(253, 254, 254, 0.94); color: #24324a; - line-height: 1.65; + font-size: var(--wb-fs-bubble); + line-height: 1.58; box-shadow: 0 10px 22px rgba(226, 232, 240, 0.48); } @@ -653,88 +654,77 @@ } .message-bubble p { + margin: 0; color: #334155; - font-size: var(--wb-fs-bubble); + font-size: inherit; } .message-answer-content { display: grid; - gap: 12px; + gap: 7px; } -.message-answer-content :deep(p), -.message-answer-content :deep(ul), -.message-answer-content :deep(ol), -.message-answer-content :deep(blockquote), -.message-answer-content :deep(pre) { +.message-answer-content p, +.message-answer-content ul, +.message-answer-content ol, +.message-answer-content blockquote, +.message-answer-content pre { margin: 0; } -.message-answer-markdown :deep(h1), -.message-answer-markdown :deep(h2), -.message-answer-markdown :deep(h3), -.message-answer-markdown :deep(h4) { +.message-answer-markdown h1, +.message-answer-markdown h2, +.message-answer-markdown h3, +.message-answer-markdown h4 { margin: 0; color: #0f172a; - line-height: 1.35; -} - -.message-answer-markdown :deep(h1) { - font-size: var(--wb-fs-md-h1); -} - -.message-answer-markdown :deep(h2) { - font-size: var(--wb-fs-md-h2); -} - -.message-answer-markdown :deep(h3), -.message-answer-markdown :deep(h4) { font-size: var(--wb-fs-md-h3); + font-weight: 750; + line-height: 1.46; } .message-answer-markdown { overflow-x: auto; font-size: var(--wb-fs-bubble); color: #334155; - line-height: 1.65; + line-height: 1.58; } -/* v-html 注入的 Markdown 节点无 scoped 标记，需用 :deep 与用户气泡 p 对齐字号 */ -.message-answer-markdown :deep(p), -.message-answer-markdown :deep(li), -.message-answer-markdown :deep(td), -.message-answer-markdown :deep(th), -.message-answer-markdown :deep(blockquote) { +.message-answer-markdown p, +.message-answer-markdown li, +.message-answer-markdown td, +.message-answer-markdown th, +.message-answer-markdown blockquote { font-size: inherit; color: inherit; - line-height: 1.65; + line-height: 1.58; } -.message-answer-markdown :deep(ul), -.message-answer-markdown :deep(ol) { - padding-left: 22px; +.message-answer-markdown ul, +.message-answer-markdown ol { + padding-left: 20px; } -.message-answer-markdown :deep(strong) { +.message-answer-markdown strong { color: #0f172a; } -.message-answer-markdown :deep(blockquote) { - padding: 10px 12px; - border-left: 4px solid #93c5fd; - border-radius: 0 12px 12px 0; - background: #eff6ff; +.message-answer-markdown blockquote { + padding: 8px 10px; + border-left: 3px solid #cbd5e1; + border-radius: 0 10px 10px 0; + background: rgba(248, 250, 252, 0.84); color: #475569; } -.message-answer-markdown :deep(code) { +.message-answer-markdown code { padding: 2px 6px; border-radius: 6px; background: #e2e8f0; font-size: 12px; } -.message-answer-markdown :deep(pre) { +.message-answer-markdown pre { overflow-x: auto; padding: 12px; border-radius: 14px; @@ -742,18 +732,18 @@ color: #e2e8f0; } -.message-answer-markdown :deep(pre code) { +.message-answer-markdown pre code { padding: 0; background: transparent; color: inherit; } -.message-answer-markdown :deep(a) { +.message-answer-markdown a { color: #2563eb; text-decoration: underline; } -.message-answer-markdown :deep(table) { +.message-answer-markdown table { width: auto; max-width: 100%; border: 1px solid #dbe4ee; @@ -763,26 +753,26 @@ font-size: inherit; } -.message-answer-markdown :deep(th), -.message-answer-markdown :deep(td) { +.message-answer-markdown th, +.message-answer-markdown td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; white-space: nowrap; } -.message-answer-markdown :deep(th) { +.message-answer-markdown th { background: #eff6ff; color: #0f172a; font-weight: 850; } -.message-answer-markdown :deep(td) { +.message-answer-markdown td { color: #334155; font-weight: 650; } -.message-answer-markdown :deep(tbody tr:last-child td) { +.message-answer-markdown tbody tr:last-child td { border-bottom: 0; } @@ -1484,3563 +1474,3 @@ font-weight: 900; } -.travel-calculator-mini-head span { - color: #64748b; - font-size: 11px; - font-weight: 750; -} - -.travel-calculator-form { - display: grid; - grid-template-columns: 92px minmax(0, 1fr); - gap: 8px; -} - -.travel-calculator-field { - display: grid; - gap: 6px; - min-width: 0; -} - -.travel-calculator-field span { - color: #64748b; - font-size: 11px; - font-weight: 800; -} - -.travel-calculator-field input { - width: 100%; - min-height: 36px; - padding: 0 10px; - border: 1px solid rgba(203, 213, 225, 0.92); - border-radius: 10px; - background: #fff; - color: #0f172a; - font-size: 12px; - font-weight: 700; -} - -.travel-calculator-field input:focus { - border-color: rgba(59, 130, 246, 0.46); - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); - outline: none; -} - -.travel-calculator-error { - margin: 0; - color: #dc2626; - font-size: 11px; - font-weight: 750; - line-height: 1.5; -} - -.composer-date-mode-tabs { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px; - padding: 4px; - border-radius: 12px; - background: rgba(241, 245, 249, 0.92); -} - -.composer-date-mode-btn { - min-height: 34px; - border: 0; - border-radius: 10px; - background: transparent; - color: #64748b; - font-size: 12px; - font-weight: 800; -} - -.composer-date-mode-btn.active { - background: #fff; - color: #0f172a; - box-shadow: 0 4px 10px rgba(148, 163, 184, 0.18); -} - -.composer-date-fields { - display: grid; - gap: 8px; -} - -.composer-date-fields-range { - grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); - align-items: end; - gap: 8px; -} - -.composer-date-field { - display: grid; - gap: 6px; - min-width: 0; -} - -.composer-date-field span { - color: #64748b; - font-size: 11px; - font-weight: 800; -} - -.composer-date-field input { - width: 100%; - min-height: 36px; - padding: 0 10px; - border: 1px solid rgba(203, 213, 225, 0.92); - border-radius: 10px; - background: #fff; - color: #0f172a; - font-size: 12px; - font-weight: 700; -} - -.composer-date-range-sep { - align-self: center; - color: #94a3b8; - font-size: 12px; - font-weight: 800; -} - -.composer-date-hint { - margin: 0; - color: #dc2626; - font-size: 11px; - line-height: 1.5; -} - -.composer-date-popover-actions { - display: flex; - justify-content: flex-end; - gap: 8px; -} - -.composer-date-cancel-btn, -.composer-date-apply-btn { - min-height: 34px; - padding: 0 14px; - border-radius: 10px; - font-size: 12px; - font-weight: 800; -} - -.composer-date-cancel-btn { - border: 1px solid rgba(203, 213, 225, 0.92); - background: #fff; - color: #64748b; -} - -.composer-date-apply-btn { - border: 0; - background: linear-gradient(135deg, #22c55e, #10b981); - color: #fff; -} - -.composer-date-apply-btn:disabled { - opacity: 0.48; - cursor: not-allowed; -} - -.composer-shell { - min-width: 0; - min-height: var(--composer-control-size, 44px); - border: 1px solid rgba(214, 225, 234, 0.95); - border-radius: 999px; - background: rgba(255, 255, 255, 0.98); - box-shadow: - 0 10px 22px rgba(226, 232, 240, 0.24), - 0 1px 4px rgba(15, 23, 42, 0.03); -} - -.composer-shell-body { - min-height: var(--composer-control-size, 44px); - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 6px; - padding: 4px 12px; -} - -.composer-biz-time-tag { - display: inline-flex; - align-items: center; - gap: 4px; - max-width: min(100%, 320px); - min-height: 28px; - padding: 0 8px 0 10px; - border-radius: 999px; - border: 1px solid rgba(59, 130, 246, 0.28); - background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(16, 185, 129, 0.12)); - color: #1d4ed8; - font-size: 11px; - font-weight: 800; - flex: none; -} - -.composer-biz-time-tag i { - font-size: 14px; - color: #2563eb; -} - -.composer-biz-time-tag-label { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.composer-biz-time-tag-remove { - width: 18px; - height: 18px; - display: grid; - place-items: center; - padding: 0; - border: 0; - border-radius: 999px; - background: rgba(255, 255, 255, 0.72); - color: #3b82f6; - flex: none; -} - -.composer-biz-time-tag-remove:disabled { - opacity: 0.48; -} - -.composer-files-panel { - display: grid; - gap: 10px; - padding: 14px; - border: 1px solid rgba(226, 232, 240, 0.9); - border-radius: 18px; - background: linear-gradient(180deg, rgba(248, 251, 255, 0.92) 0%, rgba(242, 247, 251, 0.78) 100%); -} - -.composer-files-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; -} - -.composer-files-head strong { - color: #0f172a; - font-size: 12px; - font-weight: 850; -} - -.composer-files-actions { - display: flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; - justify-content: flex-end; -} - -.composer-file-link { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 0; - border: 0; - background: transparent; - color: #2563eb; - font-size: 11px; - font-weight: 800; -} - -.composer-file-link.danger { - color: #dc2626; -} - -.composer-file-link:disabled { - opacity: 0.48; -} - -.composer-file-chip-row { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.composer-file-chip { - max-width: min(100%, 280px); -} - -.file-chip.summary { - border: 1px dashed rgba(96, 165, 250, 0.34); - background: rgba(239, 246, 255, 0.92); - cursor: pointer; -} - -.file-chip-label { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.file-chip-remove { - width: 18px; - height: 18px; - display: grid; - place-items: center; - padding: 0; - border: 0; - border-radius: 999px; - background: rgba(255, 255, 255, 0.82); - color: inherit; - flex: none; -} - -.file-chip-remove:disabled { - opacity: 0.48; -} - -.composer-files-expanded { - display: grid; - gap: 8px; - max-height: 176px; - overflow-y: auto; - padding-right: 2px; -} - -.composer-expanded-file { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - padding: 10px 12px; - border-radius: 14px; - border: 1px solid rgba(219, 230, 240, 0.92); - background: rgba(255, 255, 255, 0.88); -} - -.composer-expanded-file-copy { - min-width: 0; - display: flex; - align-items: center; - gap: 8px; - color: #334155; -} - -.composer-expanded-file-copy span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 12px; - font-weight: 700; -} - -.composer-expanded-file-remove { - width: 28px; - height: 28px; - display: grid; - place-items: center; - border: 0; - border-radius: 10px; - background: rgba(248, 250, 252, 0.92); - color: #64748b; -} - -.composer-expanded-file-remove:disabled { - opacity: 0.48; -} - -.composer-shell textarea { - flex: 1 1 120px; - width: auto; - min-width: 0; - min-height: 36px; - max-height: 120px; - resize: none; - border: 0; - padding: 8px 4px; - background: transparent; - color: #0f172a; - font-size: var(--wb-fs-composer); - line-height: 20px; -} - -.composer-shell textarea::placeholder { - color: #94a3b8; -} - -.composer-shell textarea:focus { - outline: none; -} - -.composer-shell textarea:disabled { - color: #94a3b8; -} - -.composer-row { - display: flex; - align-items: center; - gap: 10px; -} - -.composer-row .composer-shell { - flex: 1 1 auto; -} - -.composer-side-btn, -.composer-row .tool-btn, -.composer-row .send-btn { - width: var(--composer-control-size, 44px); - height: var(--composer-control-size, 44px); - display: grid; - place-items: center; - border: 0; - border-radius: 999px; - flex: none; -} - -.tool-btn { - background: #ffffff; - color: #475569; - font-size: var(--wb-fs-tool-icon); - border: 1px solid #dbe6f0; - box-shadow: 0 4px 12px rgba(241, 245, 249, 0.76); -} - -.tool-btn:disabled { - opacity: 0.48; - cursor: not-allowed; -} - -.send-btn { - background: linear-gradient(135deg, #22c55e, #10b981); - color: #fff; - font-size: var(--wb-fs-tool-icon); - box-shadow: 0 8px 18px rgba(16, 185, 129, 0.18); -} - -.send-btn:disabled { - opacity: 0.48; - cursor: not-allowed; - box-shadow: none; -} - -.insight-panel { - position: relative; - display: grid; - grid-template-rows: auto minmax(0, 1fr); - width: 100%; - height: 100%; - overflow: hidden; - background: - linear-gradient(180deg, rgba(239, 245, 243, 0.9) 0%, rgba(231, 238, 236, 0.84) 100%); - opacity: 1; - transform: translateX(0) scale(1); - transform-origin: right center; - transition: - opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), - transform 320ms cubic-bezier(0.22, 1, 0.36, 1), - box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1); - will-change: transform, opacity; -} - -.insight-panel-shell.collapsed .insight-panel { - opacity: 0; - transform: translateX(44px) scale(0.985); - pointer-events: none; -} - -.insight-panel::before { - content: ""; - position: absolute; - top: -18px; - right: -34px; - width: 240px; - height: 150px; - border-radius: 0 0 0 140px; - background: - radial-gradient(circle at 0 100%, rgba(16, 185, 129, 0.14), transparent 54%), - linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(96, 165, 250, 0.06)); - opacity: 0.9; - pointer-events: none; -} - -.insight-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 14px; - padding: 18px 18px 14px; - border-bottom: 1px solid rgba(205, 215, 224, 0.82); - position: relative; - z-index: 1; -} - -.insight-head.review-mode { - justify-content: space-between; -} - -.insight-head-eyebrow { - display: flex; - align-items: center; - gap: 10px; - flex-wrap: wrap; -} - -.insight-head-badge { - min-height: 24px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - background: rgba(240, 253, 244, 0.95); - color: #059669; - font-size: 11px; - font-weight: 800; - border: 1px solid rgba(16, 185, 129, 0.12); -} - -.review-insight-title-row { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; -} - -.review-insight-title-copy { - min-width: 0; -} - -.review-insight-title-copy h3 { - margin: 0; -} - -.review-insight-tools { - display: inline-flex; - align-items: center; - gap: 8px; - flex: 0 0 auto; - align-self: center; -} - -.review-insight-switch-icon-btn { - width: 28px; - height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 999px; - border: 1px solid rgba(203, 213, 225, 0.92); - background: rgba(248, 250, 252, 0.96); - color: #94a3b8; - font-size: 14px; - flex: 0 0 auto; - transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease; -} - -.review-insight-switch-icon-btn.available { - border-color: rgba(245, 158, 11, 0.28); - background: rgba(255, 247, 237, 0.94); - color: #d97706; -} - -.review-insight-switch-icon-btn.active { - border-color: rgba(217, 119, 6, 0.42); - background: rgba(254, 243, 199, 0.98); - color: #b45309; - box-shadow: 0 6px 14px rgba(245, 158, 11, 0.16); -} - -.review-insight-switch-icon-btn.risk.available { - border-color: rgba(239, 68, 68, 0.28); - background: rgba(254, 242, 242, 0.96); - color: #dc2626; -} - -.review-insight-switch-icon-btn.risk.active { - border-color: rgba(220, 38, 38, 0.42); - background: rgba(254, 226, 226, 0.98); - color: #b91c1c; - box-shadow: 0 6px 14px rgba(239, 68, 68, 0.16); -} - -.review-insight-switch-icon-btn.flow.available { - border-color: rgba(37, 99, 235, 0.28); - background: rgba(239, 246, 255, 0.96); - color: #2563eb; -} - -.review-insight-switch-icon-btn.flow.active { - border-color: rgba(37, 99, 235, 0.42); - background: rgba(219, 234, 254, 0.98); - color: #1d4ed8; - box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16); -} - -.review-insight-switch-icon-btn.flow.running i { - animation: flowPulse 1.2s ease-in-out infinite; -} - -.review-insight-switch-icon-btn:hover:not(:disabled) { - transform: translateY(-1px); -} - -.review-insight-switch-icon-btn:disabled { - cursor: not-allowed; - opacity: 1; - color: #cbd5e1; - background: rgba(248, 250, 252, 0.9); -} - -.intent-pill { - min-height: 30px; - display: inline-flex; - align-items: center; - padding: 0 13px; - border-radius: 999px; - font-size: var(--wb-fs-chip); - font-weight: 800; -} - -.intent-pill.welcome { - background: #eef2ff; - color: #4f46e5; -} - -.intent-pill.draft { - background: #ecfdf5; - color: #059669; -} - -.intent-pill.approval { - background: #fff7ed; - color: #ea580c; -} - -.intent-pill.recognition { - background: #eff6ff; - color: #2563eb; -} - -.intent-pill.note { - background: #fdf2f8; - color: #db2777; -} - -.insight-head h3 { - margin-top: 10px; - color: #0f172a; - font-size: var(--wb-fs-insight-title); - font-weight: 900; - line-height: 1.25; -} - -.insight-head p { - margin-top: 6px; - color: #64748b; - font-size: var(--wb-fs-insight-body); - line-height: 1.6; -} - -.confidence-card { - min-width: 92px; - padding: 10px 12px; - border-radius: 14px; - background: rgba(250, 252, 252, 0.9); - border: 1px solid rgba(202, 213, 223, 0.9); - box-shadow: 0 8px 18px rgba(203, 213, 225, 0.3); - text-align: right; -} - -.confidence-card span { - display: block; - color: #94a3b8; - font-size: 11px; - font-weight: 800; -} - -.confidence-card strong { - display: block; - margin-top: 4px; - color: #0f172a; - font-size: var(--wb-fs-insight-num); - font-weight: 900; -} - -.insight-body { - min-height: 0; - display: grid; - align-content: start; - gap: 12px; - padding: 14px 18px 18px; - overflow-y: auto; - position: relative; - z-index: 1; -} - -.review-side-card { - display: grid; - gap: 10px; - padding: 14px; - border-radius: 18px; - border: 1px solid rgba(197, 209, 221, 0.88); - background: rgba(249, 251, 251, 0.88); - box-shadow: 0 10px 20px rgba(226, 232, 240, 0.3); -} - -.review-side-overview-card { - gap: 12px; - background: linear-gradient(180deg, rgba(251, 252, 252, 0.92) 0%, rgba(240, 246, 244, 0.86) 100%); -} - -.review-side-intent-row { - display: flex; - align-items: center; - gap: 8px; - flex-wrap: wrap; - color: #475569; - font-size: var(--wb-fs-metric); -} - -.review-side-intent-row i { - color: #059669; - font-size: 16px; -} - -.review-side-intent-row strong { - color: #0f172a; - font-size: var(--wb-fs-bubble); - font-weight: 850; -} - -.review-side-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.review-side-grid.compact { - gap: 8px; -} - -.review-side-metric-card { - display: grid; - grid-template-columns: 32px minmax(0, 1fr); - gap: 8px; - align-items: start; - padding: 12px; - border-radius: 14px; - border: 1px solid rgba(206, 216, 226, 0.88); - background: rgba(251, 252, 252, 0.82); - position: relative; - cursor: pointer; - transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; -} - -.review-side-metric-card.wide { - grid-column: 1 / -1; - min-height: 104px; -} - -.review-side-metric-card.invalid { - border-color: rgba(239, 68, 68, 0.34); - background: rgba(254, 242, 242, 0.72); -} - -.review-side-metric-card.editable:hover, -.review-side-metric-card.editing { - border-color: rgba(16, 185, 129, 0.34); - background: rgba(248, 252, 250, 0.92); - transform: translateY(-1px); -} - -.review-side-metric-icon { - width: 32px; - height: 32px; - display: grid; - place-items: center; - border-radius: 10px; - background: rgba(240, 253, 244, 0.95); - color: #059669; - font-size: 15px; -} - -.review-side-metric-copy { - display: grid; - gap: 4px; -} - -.review-side-metric-copy small { - color: #64748b; - font-size: 11px; - font-weight: 800; -} - -.review-side-metric-copy strong { - color: #0f172a; - font-size: var(--wb-fs-metric-strong); - font-weight: 850; - line-height: 1.35; - word-break: break-word; -} - -.review-inline-input { - width: 100%; - min-height: 34px; - padding: 0 10px; - border: 1px solid rgba(16, 185, 129, 0.2); - border-radius: 10px; - background: rgba(255, 255, 255, 0.96); - color: #0f172a; - font-size: 12px; - font-weight: 700; -} - -.review-inline-textarea { - min-height: 82px; - padding: 9px 10px; - resize: vertical; - line-height: 1.55; - font-family: inherit; -} - -.review-inline-input.invalid { - border-color: rgba(239, 68, 68, 0.4); - color: #b91c1c; - box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08); -} - -.review-inline-input:focus { - outline: none; - border-color: rgba(16, 185, 129, 0.42); - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08); -} - -.review-inline-select-list { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.review-inline-select-option { - min-height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 10px; - border-radius: 999px; - border: 1px solid rgba(203, 213, 225, 0.92); - background: rgba(255, 255, 255, 0.96); - color: #475569; - font-size: 11px; - font-weight: 700; -} - -.review-inline-select-option.active { - border-color: rgba(16, 185, 129, 0.36); - background: rgba(240, 253, 244, 0.94); - color: #047857; -} - -.review-inline-error { - color: #dc2626; - font-size: 11px; - font-weight: 800; - line-height: 1.45; -} - -.review-side-edit-hint { - position: absolute; - top: 8px; - right: 8px; - min-height: 20px; - display: inline-flex; - align-items: center; - padding: 0 6px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.92); - border: 1px solid rgba(226, 232, 240, 0.92); - color: #94a3b8; - font-size: 10px; - font-weight: 800; - opacity: 0; - transition: opacity 0.18s ease; -} - -.review-side-edit-hint.upload { - color: #059669; -} - -.review-side-metric-card:hover .review-side-edit-hint, -.review-side-metric-card.editing .review-side-edit-hint { - opacity: 1; -} - -.review-side-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.review-side-head strong { - color: #0f172a; - font-size: 14px; - font-weight: 900; -} - -.review-side-head-copy { - display: grid; - gap: 4px; - min-width: 0; -} - -.review-side-head-copy p { - margin: 0; - color: #64748b; - font-size: 11px; - line-height: 1.55; -} - -.review-side-confidence { - color: #10b981; - font-size: 12px; - font-weight: 900; -} - -.review-side-category-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.review-side-category-card { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 8px; - padding: 12px; - min-height: 66px; - border-radius: 14px; - border: 1px solid rgba(226, 232, 240, 0.94); - background: rgba(255, 255, 255, 0.68); - cursor: pointer; - transition: border-color 0.18s ease, background 0.18s ease; -} - -.review-side-category-card.active { - border-color: rgba(52, 211, 153, 0.62); - background: rgba(240, 253, 244, 0.9); - box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08); -} - -.review-side-category-copy { - display: grid; - gap: 4px; - min-width: 0; -} - -.review-side-category-copy strong { - color: #0f172a; - font-size: 12px; - font-weight: 850; - line-height: 1.35; - white-space: nowrap; -} - -.review-side-category-copy p { - margin: 0; - color: #64748b; - font-size: 10px; - line-height: 1.4; -} - -.review-side-group-check { - color: #10b981; - font-size: 18px; -} - -.review-other-category-popover { - display: flex; - flex-wrap: wrap; - gap: 8px; - padding-top: 2px; -} - -.review-other-category-option { - min-height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 12px; - border-radius: 999px; - border: 1px solid rgba(203, 213, 225, 0.92); - background: rgba(255, 255, 255, 0.94); - color: #475569; - font-size: 11px; - font-weight: 750; -} - -.review-other-category-option.active { - border-color: rgba(16, 185, 129, 0.36); - background: rgba(240, 253, 244, 0.94); - color: #047857; -} - -.review-side-risk-card { - background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 249, 238, 0.8) 100%); -} - -.review-side-risk-summary { - margin: 0; - color: #334155; - font-size: 12px; - line-height: 1.6; -} - -.review-side-risk-list { - display: grid; - gap: 8px; - margin: 0; -} - -.review-side-risk-item { - width: 100%; - display: grid; - grid-template-columns: 30px minmax(0, 1fr) auto; - align-items: center; - gap: 10px; - min-height: 66px; - padding: 10px; - border: 1px solid rgba(226, 232, 240, 0.95); - border-radius: 14px; - background: rgba(255, 255, 255, 0.76); - color: #334155; - text-align: left; - transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; -} - -.review-side-risk-item:hover { - border-color: rgba(249, 115, 22, 0.38); - box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); - transform: translateY(-1px); -} - -.review-side-risk-icon { - width: 30px; - height: 30px; - display: grid; - place-items: center; - border-radius: 10px; - background: rgba(14, 165, 233, 0.12); - color: #0284c7; - font-size: 16px; -} - -.review-side-risk-item.medium .review-side-risk-icon { - background: rgba(245, 158, 11, 0.14); - color: #b45309; -} - -.review-side-risk-item.high .review-side-risk-icon { - background: rgba(239, 68, 68, 0.12); - color: #dc2626; -} - -.review-side-risk-item.low .review-side-risk-icon { - background: rgba(14, 165, 233, 0.12); - color: #0284c7; -} - -.review-side-risk-copy { - min-width: 0; - display: grid; - gap: 3px; -} - -.review-side-risk-copy strong { - color: #0f172a; - font-size: 12px; - font-weight: 900; -} - -.review-side-risk-copy p { - margin: 0; - color: #64748b; - font-size: 12px; - line-height: 1.55; -} - -.review-side-risk-meta { - display: inline-flex; - align-items: center; - gap: 2px; - color: #64748b; - font-size: 11px; - font-weight: 850; - white-space: nowrap; -} - -.review-side-link { - width: fit-content; - display: inline-flex; - align-items: center; - gap: 4px; - padding: 0; - border: 0; - background: transparent; - color: #059669; - font-size: 12px; - font-weight: 850; -} - -.review-side-link:disabled { - opacity: 0.5; -} - -.review-side-empty { - display: grid; - justify-items: start; - gap: 8px; - padding: 14px; - border: 1px dashed rgba(203, 213, 225, 0.92); - border-radius: 16px; - background: rgba(255, 255, 255, 0.52); -} - -.review-side-empty-icon { - width: 36px; - height: 36px; - display: grid; - place-items: center; - border-radius: 12px; - background: rgba(240, 244, 248, 0.96); - color: #94a3b8; - font-size: 18px; -} - -.review-side-empty strong { - color: #475569; - font-size: 13px; - font-weight: 850; -} - -.review-side-empty p { - margin: 0; - color: #94a3b8; - font-size: 12px; - line-height: 1.6; -} - -.review-side-save-pill { - position: sticky; - bottom: 0; - justify-self: end; - min-height: 36px; - display: inline-flex; - align-items: center; - gap: 6px; - padding: 0 14px; - border: 1px solid rgba(16, 185, 129, 0.22); - border-radius: 999px; - background: rgba(255, 255, 255, 0.94); - color: #059669; - font-size: 12px; - font-weight: 850; - box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); -} - -.review-side-save-pill:disabled { - opacity: 0.5; - box-shadow: none; -} - -.review-document-switch-card { - gap: 14px; -} - -.review-ticket-drawer { - min-height: 0; -} - -.review-document-switch-head { - align-items: flex-start; -} - -.review-document-nav { - display: inline-flex; - align-items: center; - gap: 8px; - padding: 4px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.92); - border: 1px solid rgba(226, 232, 240, 0.92); - white-space: nowrap; -} - -.review-document-nav span { - color: #334155; - font-size: 11px; - font-weight: 850; -} - -.review-document-nav-btn { - width: 28px; - height: 28px; - display: grid; - place-items: center; - border: 0; - border-radius: 999px; - background: rgba(241, 245, 249, 0.96); - color: #334155; -} - -.review-document-nav-btn:disabled { - opacity: 0.4; -} - -.review-document-stage { - display: grid; - gap: 12px; - min-height: 0; -} - -.review-document-stage-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; -} - -.review-document-stage-copy { - min-width: 0; - display: grid; - gap: 6px; -} - -.review-document-stage-copy strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; - line-height: 1.5; - word-break: break-word; -} - -.review-document-index-chip { - width: fit-content; - min-height: 24px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - background: rgba(236, 253, 245, 0.92); - color: #059669; - font-size: 11px; - font-weight: 850; -} - -.review-document-meta-chip-row { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.review-document-meta-chip { - min-height: 26px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - background: rgba(248, 250, 252, 0.94); - border: 1px solid rgba(226, 232, 240, 0.92); - color: #475569; - font-size: 11px; - font-weight: 800; -} - -.review-document-meta-chip.confidence { - background: rgba(236, 253, 245, 0.92); - color: #047857; - border-color: rgba(167, 243, 208, 0.92); -} - -.review-document-scroll { - display: grid; - gap: 12px; - max-height: 430px; - overflow-y: auto; - padding-right: 4px; -} - -.review-document-preview-card { - min-height: 168px; - overflow: hidden; - border-radius: 16px; - border: 1px solid rgba(226, 232, 240, 0.94); - background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); -} - -.review-document-preview-card.clickable { - cursor: zoom-in; -} - -.review-document-preview-card.clickable img { - transition: transform 0.18s ease; -} - -.review-document-preview-card.clickable:hover img { - transform: scale(1.02); -} - -.review-document-preview-card.image img { - display: block; - width: 100%; - height: 188px; - object-fit: cover; -} - -.review-document-preview-placeholder { - min-height: 168px; - display: grid; - place-items: center; - gap: 6px; - padding: 18px; - text-align: center; -} - -.review-document-preview-placeholder i { - color: #64748b; - font-size: 34px; -} - -.review-document-preview-placeholder strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; -} - -.review-document-preview-placeholder p { - margin: 0; - color: #64748b; - font-size: 12px; - line-height: 1.65; -} - -.review-document-edit-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; -} - -.review-document-edit-field { - display: grid; - gap: 8px; -} - -.review-document-edit-field span { - color: #334155; - font-size: 12px; - font-weight: 800; -} - -.review-document-edit-field input, -.review-document-edit-field textarea { - width: 100%; - border: 1px solid rgba(219, 230, 240, 0.96); - border-radius: 14px; - background: rgba(255, 255, 255, 0.96); - color: #0f172a; - font-size: 13px; - line-height: 1.6; - padding: 10px 12px; - resize: vertical; -} - -.review-document-edit-field input:focus, -.review-document-edit-field textarea:focus { - outline: none; - border-color: rgba(16, 185, 129, 0.36); - box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08); -} - -.review-document-edit-field textarea { - min-height: 88px; -} - -.review-document-warning-list { - display: grid; - gap: 8px; -} - -.review-document-warning-item { - display: grid; - grid-template-columns: 18px minmax(0, 1fr); - gap: 8px; - align-items: start; - padding: 10px 12px; - border-radius: 14px; - background: rgba(255, 247, 237, 0.92); - border: 1px solid rgba(253, 186, 116, 0.6); - color: #c2410c; - font-size: 12px; - line-height: 1.6; -} - -.review-side-empty.compact { - padding: 12px; -} - -.insight-card { - padding: 16px; - border: 1px solid #e7eef6; - border-radius: 20px; - background: rgba(255, 255, 255, 0.95); - box-shadow: 0 14px 24px rgba(241, 245, 249, 0.86); -} - -.insight-card.primary { - background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); -} - -.card-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - margin-bottom: 14px; -} - -.card-head h4 { - color: #0f172a; - font-size: 15px; - font-weight: 850; -} - -.knowledge-question-list { - display: grid; - gap: 10px; -} - -.knowledge-question-btn { - width: 100%; - display: grid; - grid-template-columns: 28px minmax(0, 1fr) 18px; - align-items: center; - gap: 10px; - padding: 12px 14px; - border: 1px solid rgba(226, 232, 240, 0.92); - border-radius: 16px; - background: rgba(248, 250, 252, 0.86); - color: #1e293b; - text-align: left; - transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; -} - -.knowledge-question-btn:hover:not(:disabled) { - border-color: rgba(16, 185, 129, 0.3); - background: rgba(240, 253, 244, 0.9); - transform: translateY(-1px); -} - -.knowledge-question-btn:disabled { - opacity: 0.48; - cursor: not-allowed; - transform: none; -} - -.knowledge-question-btn i { - justify-self: end; - color: #059669; - font-size: 16px; -} - -.knowledge-question-index { - width: 28px; - height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 999px; - background: rgba(226, 232, 240, 0.9); - color: #0f172a; - font-size: 12px; - font-weight: 850; -} - -.knowledge-question-index.gold { - background: linear-gradient(135deg, #fbbf24, #f59e0b); - color: #7c2d12; - box-shadow: 0 6px 14px rgba(245, 158, 11, 0.22); -} - -.knowledge-question-index.silver { - background: linear-gradient(135deg, #e2e8f0, #cbd5e1); - color: #334155; - box-shadow: 0 6px 14px rgba(148, 163, 184, 0.18); -} - -.knowledge-question-index.bronze { - background: linear-gradient(135deg, #fdba74, #ea580c); - color: #7c2d12; - box-shadow: 0 6px 14px rgba(234, 88, 12, 0.18); -} - -.knowledge-question-copy { - min-width: 0; - color: #334155; - font-size: 13px; - font-weight: 750; - line-height: 1.5; -} - -.status-pill { - min-height: 28px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - font-size: 12px; - font-weight: 800; - white-space: nowrap; -} - -.status-pill.success { - background: #ecfdf5; - color: #059669; -} - -.status-pill.warning { - background: #fff7ed; - color: #ea580c; -} - -.status-pill.note { - background: #fdf2f8; - color: #db2777; -} - -.metric-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; -} - -.metric-grid.single { - grid-template-columns: 1fr; -} - -.metric-item { - padding: 12px 14px; - border-radius: 16px; - background: #f8fafc; -} - -.metric-item span { - display: block; - color: #94a3b8; - font-size: 11px; - font-weight: 800; -} - -.metric-item strong { - display: block; - margin-top: 6px; - color: #0f172a; - font-size: 14px; - font-weight: 850; - line-height: 1.5; -} - -.timeline-list, -.bullet-list { - display: grid; - gap: 12px; - padding: 0; - margin: 0; - list-style: none; -} - -.timeline-list li { - display: grid; - grid-template-columns: 14px minmax(0, 1fr); - gap: 12px; - align-items: start; -} - -.timeline-dot { - width: 10px; - height: 10px; - margin-top: 5px; - border-radius: 999px; - background: #cbd5e1; -} - -.timeline-list li.done .timeline-dot, -.timeline-list li.current .timeline-dot { - background: #10b981; -} - -.timeline-list strong { - display: block; - color: #0f172a; - font-size: 13px; - font-weight: 800; -} - -.timeline-list p, -.bullet-list li, -.welcome-card p, -.note-block p { - color: #64748b; - font-size: var(--wb-fs-metric); - line-height: 1.6; -} - -.receipt-list { - display: grid; - gap: 10px; -} - -.receipt-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 12px; - align-items: center; - padding: 12px 14px; - border-radius: 16px; - background: #f8fafc; -} - -.receipt-row strong, -.welcome-card strong, -.note-block strong { - color: #0f172a; - font-size: var(--wb-fs-bubble); - font-weight: 850; -} - -.action-card { - background: #fff; -} - -.receipt-row p, -.receipt-row span { - color: #64748b; - font-size: 12px; -} - -.receipt-side { - text-align: right; -} - -.receipt-side strong { - display: block; -} - -.review-flow-panel { - min-height: 0; - display: grid; - grid-template-rows: auto minmax(0, 1fr); - gap: 12px; -} - -.review-flow-summary { - display: flex; - align-items: center; - gap: 10px; - min-height: 34px; - color: #64748b; - font-size: 12px; - font-weight: 800; -} - -.review-flow-summary .flow-icon-btn { - margin-left: auto; -} - -.review-flow-list { - min-height: 0; - display: grid; - align-content: start; - gap: 0; - overflow-y: auto; - padding-right: 2px; -} - -.review-flow-panel .flow-step-card { - border-radius: 14px; - box-shadow: none; -} - -.review-flow-panel .flow-empty-state { - min-height: 260px; -} - -.flow-empty-state.compact { - padding: 22px; -} - -.review-message-block { - margin-top: 12px; -} - -.review-summary { - margin: 0; - color: #1f2937; - font-size: 13px; - line-height: 1.75; - white-space: pre-line; -} - -.review-card-shell { - display: grid; - gap: 12px; - padding: 15px; - border-radius: 18px; - border: 1px solid rgba(37, 99, 235, 0.14); - background: - radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 30%), - linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); - box-shadow: - 0 14px 30px rgba(15, 23, 42, 0.06), - 0 1px 0 rgba(255, 255, 255, 0.9) inset; -} - -.review-flow-card { - display: grid; - gap: 10px; - padding-top: 2px; - border-top: 1px solid rgba(226, 232, 240, 0.72); -} - -.review-disclosure-card { - display: grid; - gap: 0; - border-top: 1px solid rgba(226, 232, 240, 0.72); - padding-top: 6px; -} - -.review-disclosure-card summary { - list-style: none; -} - -.review-disclosure-card summary::-webkit-details-marker { - display: none; -} - -.review-disclosure-summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 10px 12px; - border-radius: 16px; - border: 1px solid rgba(226, 232, 240, 0.92); - background: rgba(255, 255, 255, 0.78); - cursor: pointer; - transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; -} - -.review-disclosure-summary:hover { - border-color: rgba(16, 185, 129, 0.2); - background: rgba(255, 255, 255, 0.92); - box-shadow: 0 6px 16px rgba(226, 232, 240, 0.24); -} - -.review-disclosure-copy { - min-width: 0; - display: grid; - gap: 4px; -} - -.review-disclosure-copy strong { - color: #0f172a; - font-size: 12px; - font-weight: 900; - line-height: 1.4; -} - -.review-disclosure-copy p { - margin: 0; - color: #64748b; - font-size: 11px; - line-height: 1.55; -} - -.review-disclosure-toggle { - width: 28px; - height: 28px; - flex: none; - display: grid; - place-items: center; - border-radius: 999px; - background: rgba(240, 253, 244, 0.86); - color: #059669; - font-size: 16px; - transition: transform 0.18s ease, background 0.18s ease; -} - -.review-disclosure-card[open] .review-disclosure-toggle { - transform: rotate(180deg); - background: rgba(220, 252, 231, 0.92); -} - -.review-disclosure-body { - display: grid; - gap: 10px; - padding: 12px 4px 0; -} - -.review-followup-panel { - display: grid; - gap: 0; - border: 1px solid #e2e8f0; - border-radius: 14px; - background: #fff; - overflow: hidden; -} - -.review-followup-panel.pending { - border-color: #e2e8f0; - background: #fff; -} - -.review-followup-panel.ready { - border-color: #d1fae5; - background: #fff; -} - -.review-followup-panel summary { - list-style: none; -} - -.review-followup-panel summary::-webkit-details-marker { - display: none; -} - -.review-followup-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; - padding: 12px; - cursor: pointer; - transition: background 0.18s ease; -} - -.review-followup-head:hover { - background: #f8fafc; -} - -.review-followup-head-main { - min-width: 0; - display: flex; - align-items: flex-start; - gap: 10px; -} - -.review-followup-mark { - width: 34px; - height: 34px; - display: grid; - place-items: center; - flex: none; - border-radius: 10px; - background: #f8fafc; - border: 1px solid #e2e8f0; - color: #64748b; - font-size: 17px; -} - -.review-followup-panel.pending .review-followup-mark { - background: #fffbeb; - border-color: #fde68a; - color: #b45309; -} - -.review-followup-panel.ready .review-followup-mark { - background: #ecfdf5; - border-color: #bbf7d0; - color: #059669; -} - -.review-followup-title-copy { - min-width: 0; - display: grid; - gap: 4px; -} - -.review-followup-title-copy strong { - color: #0f172a; - font-size: 13px; - font-weight: 900; - line-height: 1.35; -} - -.review-followup-title-copy p { - margin: 0; - color: #64748b; - font-size: 11px; - line-height: 1.55; -} - -.review-followup-preview { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 2px; -} - -.review-followup-panel[open] .review-followup-preview { - display: none; -} - -.review-followup-preview span { - min-height: 22px; - display: inline-flex; - align-items: center; - max-width: 160px; - padding: 0 8px; - border-radius: 999px; - background: #f8fafc; - border: 1px solid #e2e8f0; - color: #475569; - font-size: 10px; - font-weight: 800; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.review-followup-side { - display: inline-flex; - align-items: center; - gap: 8px; - flex: none; -} - -.review-followup-count { - min-height: 26px; - display: inline-flex; - align-items: center; - justify-content: center; - flex: none; - padding: 0 10px; - border-radius: 999px; - border: 1px solid #e2e8f0; - background: #f8fafc; - color: #475569; - font-size: 11px; - font-weight: 850; - white-space: nowrap; -} - -.review-followup-panel.pending .review-followup-count { - border-color: #fde68a; - background: #fffbeb; - color: #b45309; -} - -.review-followup-panel.ready .review-followup-count { - border-color: rgba(16, 185, 129, 0.22); - background: #ecfdf5; - color: #047857; -} - -.review-followup-chevron { - width: 26px; - height: 26px; - display: grid; - place-items: center; - border-radius: 999px; - color: #94a3b8; - font-size: 16px; - transition: transform 0.18s ease, color 0.18s ease; -} - -.review-followup-panel[open] .review-followup-chevron { - transform: rotate(180deg); - color: #475569; -} - -.review-followup-body { - display: grid; - gap: 10px; - padding: 0 12px 12px; -} - -.review-followup-list { - display: grid; - gap: 0; - border-top: 1px solid #e2e8f0; -} - -.review-followup-item { - display: grid; - grid-template-columns: 30px minmax(0, 1fr) auto; - align-items: center; - gap: 10px; - min-height: 52px; - padding: 10px 0; - border-bottom: 1px solid #f1f5f9; -} - -.review-followup-item:last-child { - border-bottom: 0; -} - -.review-followup-icon { - width: 30px; - height: 30px; - display: grid; - place-items: center; - border-radius: 9px; - background: #f8fafc; - color: #64748b; - font-size: 16px; -} - -.review-followup-item.warning .review-followup-icon { - background: #fffbeb; - color: #b45309; -} - -.review-followup-item.danger .review-followup-icon { - background: #fff1f2; - color: #e11d48; -} - -.review-followup-item.ready .review-followup-icon { - background: #ecfdf5; - color: #059669; -} - -.review-followup-copy { - min-width: 0; - display: grid; - gap: 4px; -} - -.review-followup-copy strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; - line-height: 1.35; -} - -.review-followup-copy p { - margin: 0; - color: #64748b; - font-size: 11px; - line-height: 1.5; -} - -.review-followup-status { - min-height: 24px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 8px; - border-radius: 999px; - background: transparent; - border: 1px solid #e2e8f0; - color: #64748b; - font-size: 10px; - font-weight: 850; - white-space: nowrap; -} - -.review-followup-item.warning .review-followup-status { - border-color: #fde68a; - background: transparent; - color: #b45309; -} - -.review-followup-item.danger .review-followup-status { - border-color: #fecdd3; - background: transparent; - color: #e11d48; -} - -.review-followup-item.ready .review-followup-status { - border-color: #bbf7d0; - background: transparent; - color: #047857; -} - -.review-followup-helper { - margin: 0; - padding: 9px 10px; - border-radius: 10px; - background: #f8fafc; - border: 1px solid #eef2f7; - color: #64748b; - font-size: 11px; - line-height: 1.6; -} - -.review-card-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; -} - -.review-card-head-main { - min-width: 0; - display: flex; - align-items: flex-start; - gap: 10px; -} - -.review-card-icon { - width: 32px; - height: 32px; - display: grid; - place-items: center; - border-radius: 10px; - background: linear-gradient(135deg, #2563eb, #0f766e); - color: #fff; - font-size: 16px; - box-shadow: 0 8px 16px rgba(37, 99, 235, 0.16); -} - -.review-card-head-copy { - display: grid; - gap: 4px; -} - -.review-card-head-copy strong { - color: #0f172a; - font-size: 14px; - font-weight: 900; - line-height: 1.35; -} - -.review-card-head-copy p { - margin: 0; - color: #64748b; - font-size: 11px; - line-height: 1.55; -} - -.review-card-state { - min-height: 26px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - font-size: 11px; - font-weight: 850; - white-space: nowrap; -} - -.review-card-state.ready { - background: rgba(240, 253, 244, 0.95); - color: #059669; - border: 1px solid rgba(16, 185, 129, 0.14); -} - -.review-card-state.pending { - background: rgba(255, 251, 235, 0.95); - color: #b45309; - border: 1px solid rgba(245, 158, 11, 0.16); -} - -.review-section-card { - display: grid; - gap: 10px; - padding: 12px 14px; - border-radius: 16px; - border: 1px solid rgba(226, 232, 240, 0.92); - background: rgba(255, 255, 255, 0.76); -} - -.review-section-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.review-section-head strong { - color: #0f172a; - font-size: 12px; - font-weight: 900; -} - -.review-section-head span { - min-height: 22px; - display: inline-flex; - align-items: center; - padding: 0 8px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.92); - border: 1px solid #e2e8f0; - color: #475569; - font-size: 10px; - font-weight: 800; -} - -.review-alert-card { - background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(251, 248, 243, 0.82) 100%); -} - -/* 已删除：review-alert-chip-row 相关样式（冗余气泡） */ -/* 已删除：主对话框中的风险提示（与右侧边栏重复，已移除） */ - -/* 风险提示样式已统一到 review-pending-item */ -.review-risk-brief-list { - display: none; /* 隐藏原有的独立风险提示列表 */ -} - -.review-risk-brief { - display: none; /* 隐藏原有的独立风险提示项 */ -} - -.review-pending-list { - display: grid; - gap: 8px; -} - -.review-pending-list.plain { - gap: 0; -} - -.review-pending-item { - display: grid; - grid-template-columns: 36px minmax(0, 1fr) auto; - gap: 10px; - align-items: center; - padding: 11px 12px; - border-radius: 14px; - background: rgba(255, 255, 255, 0.88); - border: 1px solid rgba(226, 232, 240, 0.92); -} - -.review-pending-list.plain .review-pending-item { - padding: 10px 0; - border: 0; - border-radius: 0; - background: transparent; - border-bottom: 1px solid rgba(226, 232, 240, 0.7); -} - -.review-pending-list.plain .review-pending-item:last-child { - border-bottom: 0; - padding-bottom: 0; -} - -.review-pending-list.plain .review-pending-item:first-child { - padding-top: 2px; -} - -.review-pending-icon { - width: 36px; - height: 36px; - display: grid; - place-items: center; - border-radius: 10px; - background: rgba(236, 253, 245, 0.95); - color: #059669; - font-size: 16px; -} - -/* 风险级别的图标样式（已删除主对话框中的风险提示，保留样式备用） */ -.review-pending-icon.high { - background: rgba(254, 226, 226, 0.95); - color: #dc2626; -} - -.review-pending-icon.warning { - background: rgba(255, 237, 213, 0.95); - color: #ea580c; -} - -.review-pending-list.plain .review-pending-icon { - background: rgba(236, 253, 245, 0.62); -} - -.review-pending-list.plain .review-pending-icon.high { - background: rgba(254, 226, 226, 0.62); -} - -.review-pending-list.plain .review-pending-icon.warning { - background: rgba(255, 237, 213, 0.62); -} - -.review-pending-copy { - display: grid; - gap: 4px; -} - -.review-pending-copy strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; -} - -.review-pending-copy p { - margin: 0; - color: #64748b; - font-size: 11px; - line-height: 1.5; -} - -.review-pending-status { - min-height: 24px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 10px; - border-radius: 999px; - font-size: 10px; - font-weight: 800; - white-space: nowrap; -} - -.review-pending-status.warning { - background: rgba(255, 241, 242, 0.96); - color: #e11d48; - border: 1px solid #fecdd3; -} - -.review-pending-status.danger { - background: rgba(254, 242, 242, 0.96); - color: #dc2626; - border: 1px solid #fca5a5; -} - -.review-pending-status.ready { - background: rgba(240, 253, 244, 0.96); - color: #059669; - border: 1px solid #86efac; -} - -.review-footer-actions { - display: grid; - gap: 8px; - padding-top: 6px; - border-top: 1px solid rgba(226, 232, 240, 0.72); -} - -.review-footer-btn-row { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.review-footer-btn { - min-height: 36px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 14px; - border-radius: 12px; - border: 1px solid #dbe6f0; - background: rgba(255, 255, 255, 0.92); - color: #334155; - font-size: 12px; - font-weight: 800; - box-shadow: 0 3px 10px rgba(241, 245, 249, 0.58); -} - -.review-footer-btn.primary { - border-color: rgba(16, 185, 129, 0.26); - background: linear-gradient(135deg, #10b981, #059669); - color: #fff; - box-shadow: 0 6px 14px rgba(16, 185, 129, 0.16); -} - -.review-footer-btn:disabled { - cursor: not-allowed; - opacity: 0.6; - box-shadow: none; -} - -.review-summary { - margin: 0; - color: #1f2937; - font-size: 14px; - line-height: 1.7; -} - -.review-inline-actions { - display: flex; - flex-wrap: wrap; - gap: 8px; - justify-content: flex-start; -} - -.review-inline-btn, -.primary-dialog-btn, -.secondary-dialog-btn, -.danger-dialog-btn { - min-height: 38px; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0 16px; - border-radius: 999px; - font-size: 12px; - font-weight: 800; -} - -.review-inline-btn { - border: 1px solid #dbe6f0; - background: #fff; - color: #334155; -} - -.review-inline-btn.primary, -.primary-dialog-btn { - border: 1px solid rgba(16, 185, 129, 0.22); - background: linear-gradient(135deg, #10b981, #059669); - color: #fff; - box-shadow: 0 10px 22px rgba(16, 185, 129, 0.18); -} - -.review-inline-btn.secondary, -.secondary-dialog-btn { - border: 1px solid #dbe6f0; - background: #fff; - color: #334155; -} - -.danger-dialog-btn { - border: 1px solid rgba(239, 68, 68, 0.22); - background: linear-gradient(135deg, #ef4444, #dc2626); - color: #fff; - box-shadow: 0 10px 22px rgba(239, 68, 68, 0.18); -} - -.review-inline-btn:disabled, -.primary-dialog-btn:disabled, -.secondary-dialog-btn:disabled, -.danger-dialog-btn:disabled { - cursor: not-allowed; - opacity: 0.62; - box-shadow: none; -} - -.review-inline-note { - margin: 0; - color: #64748b; - font-size: 12px; - line-height: 1.6; -} - -.review-inline-guidance { - margin: 0; - color: #0f766e; - font-size: 12px; - line-height: 1.7; -} - -.review-status-banner { - display: grid; - gap: 8px; - padding: 14px 16px; - border-radius: 18px; - border: 1px solid #dbeafe; - background: linear-gradient(180deg, #f8fbff 0%, #f0f7ff 100%); -} - -.review-status-banner.ready { - border-color: #bbf7d0; - background: linear-gradient(180deg, #f5fffa 0%, #ecfdf5 100%); -} - -.review-status-banner.pending { - border-color: #fde68a; - background: linear-gradient(180deg, #fffdf7 0%, #fffbeb 100%); -} - -.review-status-tag { - width: fit-content; - min-height: 26px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.86); - color: #0f172a; - font-size: 12px; - font-weight: 850; - border: 1px solid rgba(148, 163, 184, 0.22); -} - -.review-inline-section { - display: grid; - gap: 10px; - padding: 14px 16px; - border-radius: 18px; - border: 1px solid #e2e8f0; - background: rgba(255, 255, 255, 0.88); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66); -} - -.review-inline-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.review-inline-head > strong { - color: #0f172a; - font-size: 12px; - font-weight: 850; -} - -.review-inline-head > span { - min-height: 24px; - display: inline-flex; - align-items: center; - padding: 0 9px; - border-radius: 999px; - background: #fff; - color: #475569; - font-size: 11px; - font-weight: 800; - border: 1px solid #e2e8f0; -} - -.review-inline-caption { - margin: 0; - color: #64748b; - font-size: 12px; - line-height: 1.65; -} - -.review-inline-list { - display: grid; - gap: 8px; -} - -.review-missing-chip-row { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.review-missing-chip { - min-height: 30px; - display: inline-flex; - align-items: center; - padding: 0 12px; - border-radius: 999px; - background: #fff; - color: #0f172a; - font-size: 12px; - font-weight: 800; - border: 1px solid #fed7aa; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); -} - -.review-inline-item { - display: grid; - gap: 4px; - padding: 10px 12px; - border-radius: 14px; - border: 1px solid #e2e8f0; - background: #fff; -} - -.review-inline-item.warning { - background: #fff7ed; - border-color: #fed7aa; -} - -.review-inline-item.high { - background: #fff1f2; - border-color: #fecdd3; -} - -.review-inline-item span { - color: #0f172a; - font-size: 12px; - font-weight: 800; -} - -.review-inline-item p { - margin: 0; - color: #64748b; - font-size: 12px; - line-height: 1.65; -} - -.review-inline-footer { - display: grid; - gap: 10px; - padding-top: 2px; - border-top: 1px dashed rgba(203, 213, 225, 0.78); -} - -.review-mini-grid, -.review-slot-grid, -.review-doc-field-grid { - display: grid; - gap: 10px; -} - -.review-mini-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.review-slot-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.review-slot-card, -.review-doc-field-card, -.review-brief-card, -.review-claim-card, -.review-document-card { - border: 1px solid #e2e8f0; - border-radius: 16px; - background: #f8fbff; -} - -.review-slot-card { - display: grid; - gap: 8px; - padding: 12px 14px; -} - -.review-slot-card.compact { - gap: 4px; - padding: 10px 12px; -} - -.review-slot-card header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; -} - -.review-slot-card span, -.review-doc-field-card span, -.review-brief-card strong, -.review-document-card header span { - color: #64748b; - font-size: 11px; - font-weight: 800; -} - -.review-slot-card strong, -.review-doc-field-card strong, -.review-claim-card strong, -.review-document-card header strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; -} - -.review-slot-card p, -.review-brief-card p, -.review-claim-card p, -.review-document-card p { - margin: 0; - color: #64748b; - font-size: 12px; - line-height: 1.6; -} - -.review-slot-card.missing { - border-color: #fecdd3; - background: #fff7f7; -} - -.review-slot-card.inferred { - border-color: #dbeafe; - background: #f8fbff; -} - -.review-slot-meta-list { - display: grid; - gap: 8px; -} - -.review-slot-meta-item { - padding: 9px 10px; - border-radius: 12px; - background: rgba(255, 255, 255, 0.82); - border: 1px solid rgba(226, 232, 240, 0.9); -} - -.review-slot-meta-item span { - color: #94a3b8; - font-size: 11px; - font-weight: 800; -} - -.review-slot-meta-item strong { - display: block; - margin-top: 4px; - font-size: 12px; -} - -.review-brief-list, -.review-claim-list, -.review-document-list { - display: grid; - gap: 10px; -} - -.review-brief-card, -.review-claim-card, -.review-document-card { - padding: 12px 14px; -} - -.review-brief-card.warning { - background: #fff7ed; - border-color: #fed7aa; -} - -.review-brief-card.high { - background: #fff1f2; - border-color: #fecdd3; -} - -.review-claim-card header, -.review-document-card header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; - margin-bottom: 8px; -} - -.review-document-card { - display: grid; - gap: 10px; -} - -.document-preview { - min-height: 124px; - overflow: hidden; - border-radius: 14px; - background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); - border: 1px dashed #dbe3ec; -} - -.document-preview.image img { - display: block; - width: 100%; - height: 180px; - object-fit: cover; -} - -.document-preview-placeholder { - min-height: 124px; - display: grid; - place-items: center; - gap: 6px; - color: #64748b; - text-align: center; -} - -.document-preview-placeholder i { - font-size: 28px; -} - -.review-doc-field-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.review-doc-field-card { - padding: 10px 12px; -} - -.action-list.compact { - grid-template-columns: 1fr; -} - -.action-card.primary { - border-color: #bbf7d0; - background: #f0fdf4; -} - -.action-card.secondary { - background: #fff; -} - -.action-card.warning { - border-color: #fed7aa; - background: #fff7ed; -} - -.note-block { - display: grid; - gap: 8px; - padding: 14px; - border-radius: 16px; - background: #f8fafc; -} - -.note-block span { - color: #94a3b8; - font-size: 11px; - font-weight: 800; -} - -.review-conclusion strong { - font-size: var(--wb-fs-insight-h4); - line-height: 1.6; -} - -.insight-text-section { - display: grid; - gap: 12px; - padding: 2px 0 0; -} - -.insight-text-section h4 { - color: #0f172a; - font-size: var(--wb-fs-insight-h4); - font-weight: 850; -} - -.insight-text-list, -.review-document-plain-list { - display: grid; - gap: 12px; -} - -.recognition-bubble { - display: grid; - gap: 10px; - padding: 16px 18px; - border-radius: 22px; - border: 1px solid rgba(191, 219, 254, 0.9); - background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%); - box-shadow: 0 16px 28px rgba(241, 245, 249, 0.9); -} - -.recognition-bubble.secondary { - border-color: #e2e8f0; - background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); -} - -.recognition-bubble-label { - color: #0f766e; - font-size: 11px; - font-weight: 850; - letter-spacing: 0.02em; -} - -.recognition-bubble.secondary .recognition-bubble-label { - color: #475569; -} - -.recognition-bubble-copy { - display: grid; - gap: 8px; -} - -.recognition-bubble-line, -.recognition-bubble-note { - margin: 0; - color: #334155; - font-size: 13px; - line-height: 1.75; -} - -.recognition-bubble-line { - font-weight: 700; - color: #0f172a; -} - -.recognition-bubble-note { - color: #64748b; -} - -.review-document-bubble { - display: grid; - grid-template-columns: minmax(0, 1fr) 140px; - gap: 14px; - align-items: start; - padding: 16px; - border-radius: 22px; - background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); - border: 1px solid rgba(226, 232, 240, 0.95); - box-shadow: 0 16px 28px rgba(241, 245, 249, 0.92); -} - -.review-document-copy { - display: grid; - gap: 6px; -} - -.review-document-index { - color: #1d4ed8; - font-size: 11px; - font-weight: 850; -} - -.review-document-copy strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; - line-height: 1.6; -} - -.review-document-copy p { - margin: 0; - color: #64748b; - font-size: 12px; - line-height: 1.7; -} - -.review-overlay { - z-index: 10001; -} - -.review-confirm-modal, -.review-edit-modal { - width: min(720px, calc(100vw - 40px)); - border-radius: 24px; - background: - radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 28%), - linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%); - 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-confirm-modal { - padding: 24px; - display: grid; - gap: 18px; -} - -.review-confirm-modal h3, -.review-edit-head h3 { - margin-top: 12px; - color: #0f172a; - font-size: 22px; - font-weight: 900; - line-height: 1.35; -} - -.review-confirm-modal p, -.review-edit-head p { - margin-top: 8px; - color: #64748b; - font-size: 14px; - line-height: 1.7; -} - -.review-confirm-actions, -.review-edit-actions { - display: flex; - justify-content: flex-end; - gap: 12px; - flex-wrap: wrap; -} - -.review-upload-decision-modal { - display: grid; - gap: 18px; -} - -.review-upload-decision-copy { - display: grid; - gap: 10px; -} - -.review-upload-decision-actions { - justify-content: stretch; -} - -.review-upload-decision-actions .primary-dialog-btn, -.review-upload-decision-actions .secondary-dialog-btn { - flex: 1 1 168px; -} - -.review-edit-modal { - max-height: min(860px, calc(100vh - 48px)); - display: grid; - grid-template-rows: auto minmax(0, 1fr) auto; - overflow: hidden; -} - -.review-edit-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; - padding: 22px 24px 18px; - border-bottom: 1px solid #eef2f7; -} - -.review-edit-form { - min-height: 0; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 16px; - padding: 20px 24px; - overflow-y: auto; -} - -.review-edit-field { - display: grid; - gap: 8px; -} - -.review-edit-field.attachments, -.review-edit-field.business, -.review-edit-field.basic { - min-width: 0; -} - -.review-edit-field span { - color: #334155; - font-size: 13px; - font-weight: 800; -} - -.review-edit-field span em { - margin-left: 4px; - color: #dc2626; - font-style: normal; -} - -.review-edit-field input, -.review-edit-field textarea { - width: 100%; - border: 1px solid #dbe6f0; - border-radius: 16px; - background: #fff; - color: #0f172a; - font-size: 14px; - line-height: 1.6; - padding: 12px 14px; - resize: vertical; -} - -.review-edit-field input:focus, -.review-edit-field textarea:focus { - outline: none; - border-color: #60a5fa; - box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14); -} - -.review-edit-field textarea { - min-height: 96px; -} - -.review-edit-field.attachments, -.review-edit-field textarea, -.review-edit-field .textarea { - grid-column: span 2; -} - -.review-edit-actions { - padding: 0 24px 24px; -} - -.review-preview-modal { - width: min(980px, calc(100vw - 40px)); - max-height: min(92vh, calc(100vh - 32px)); - display: grid; - grid-template-rows: auto minmax(0, 1fr); - overflow: hidden; - border-radius: 24px; - background: - radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 28%), - linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%); - 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: 20px; - 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: 18px; - background: #fff; -} - -.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 10px; - color: #64748b; - font-size: 12px; - font-weight: 800; -} - -.welcome-quick-action-grid { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.welcome-quick-action-btn { - min-height: 36px; - display: inline-flex; - align-items: center; - gap: 6px; - padding: 0 14px; - border: 1px solid rgba(191, 219, 254, 0.92); - border-radius: 999px; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.94) 100%); - color: #1d4ed8; - font-size: 12px; - font-weight: 750; - box-shadow: 0 6px 14px rgba(59, 130, 246, 0.08); - transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; -} - -.welcome-quick-action-btn i { - font-size: 15px; - color: #2563eb; -} - -.welcome-quick-action-btn:hover:not(:disabled) { - transform: translateY(-1px); - border-color: rgba(59, 130, 246, 0.34); - box-shadow: 0 10px 18px rgba(59, 130, 246, 0.14); -} - -.welcome-quick-action-btn:disabled { - opacity: 0.48; - cursor: not-allowed; -} - -.welcome-grid { - display: grid; - gap: 12px; -} - -.welcome-card { - padding: 14px; - border-radius: 18px; - background: #f8fafc; -} - -.welcome-card i { - color: #10b981; - 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: 13px; - --wb-fs-bubble-meta: 12px; - --wb-fs-bubble-time: 11px; - --wb-fs-chip: 11px; - --wb-fs-composer: 13px; - --wb-fs-tool-icon: 16px; - --wb-fs-md-h1: 16px; - --wb-fs-md-h2: 15px; - --wb-fs-md-h3: 13px; - --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: 18px; - } - - .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: 15px; - --wb-fs-md-h2: 14px; - --wb-fs-insight-h4: 13px; - --wb-fs-welcome: 17px; - } -} - -/* 大屏：左右分栏；右侧详情区宽度随视口收缩 */ -@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 auto; - min-height: 0; - } - - .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; - } -} - -/* 矮屏笔记本（如 1366×768）：压缩顶栏与间距，把高度留给对话列表 */ -@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) { - .assistant-overlay { - --assistant-viewport-inset: 10px; - } - - .assistant-modal, - .assistant-modal-stage { - border-radius: 18px; - } - - .assistant-header { - padding: 18px 18px 16px; - align-items: flex-start; - flex-direction: column; - } - - .assistant-header-actions { - top: 18px; - right: 18px; - gap: 10px; - width: auto; - justify-content: space-between; - } - - .assistant-toggle-btn, - .session-trash-btn, - .assistant-close-btn, - .close-btn { - width: 40px; - height: 40px; - border-radius: 14px; - font-size: 16px; - } - - .flow-step-card header { - align-items: flex-start; - } - - .assistant-layout { - padding: 14px; - } - - .composer-row { - gap: 8px; - --composer-control-size: 40px; - } - - .composer-shell textarea { - min-height: 32px; - } - - .travel-calculator-form { - grid-template-columns: 1fr; - } - - .dialog-toolbar { - padding: 16px 16px 12px; - } - - .shortcut-chip { - width: 100%; - justify-content: center; - } - - .message-list { - padding: 16px; - } - - .message-row, - .message-row.user { - grid-template-columns: 34px minmax(0, 1fr); - } - - .message-row.user .message-avatar { - order: 0; - } - - .message-row.user .message-bubble { - order: 0; - justify-self: stretch; - } - - .message-suggested-actions { - grid-template-columns: 1fr; - } - - .composer { - padding: 0 16px 16px; - } - - .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; - } - - .review-card-head { - flex-direction: column; - } - - .review-followup-head { - flex-direction: column; - } - - .review-followup-side { - width: 100%; - justify-content: space-between; - } - - .review-followup-count { - align-self: flex-start; - } - - .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-followup-item { - grid-template-columns: 34px minmax(0, 1fr); - } - - .review-followup-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-edit-modal { - width: calc(100vw - 24px); - } - - .review-preview-modal { - width: calc(100vw - 24px); - } - - .review-edit-form { - grid-template-columns: 1fr; - padding: 18px; - } - - .review-edit-field.attachments, - .review-edit-field textarea, - .review-edit-field .textarea { - grid-column: auto; - } - - .review-edit-actions, - .review-confirm-actions { - padding: 0 18px 18px; - justify-content: stretch; - } - - .review-upload-decision-actions { - width: 100%; - } - - .primary-dialog-btn, - .secondary-dialog-btn, - .danger-dialog-btn { - width: 100%; - } -} diff --git a/web/src/assets/styles/views/travel-request-detail-view-part2.css b/web/src/assets/styles/views/travel-request-detail-view-part2.css new file mode 100644 index 0000000..9d2e2c0 --- /dev/null +++ b/web/src/assets/styles/views/travel-request-detail-view-part2.css @@ -0,0 +1,945 @@ +.validation-pill.pending { + background: #fff7ed; + border-color: #fed7aa; + color: #c2410c; +} + +.validation-pill.warning { + background: #fef2f2; + border-color: #fecaca; + color: #b91c1c; +} + +.validation-summary { + margin: 0; + color: #475569; + font-size: 13px; + line-height: 1.6; +} + +.validation-sections { + display: grid; + gap: 18px; + margin-top: 16px; +} + +.validation-section { + display: grid; + gap: 10px; + padding-top: 14px; + border-top: 1px solid #e5e7eb; +} + +.validation-section:first-child { + padding-top: 0; + border-top: none; +} + +.validation-section-title { + display: flex; + align-items: center; + gap: 8px; + margin: 0; + color: #0f172a; + font-size: 13px; + font-weight: 800; + line-height: 1.4; +} + +.validation-section-title::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 999px; + background: #10b981; + box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); +} + +.validation-section--risk .validation-section-title { + color: #b91c1c; +} + +.validation-section--risk .validation-section-title::before { + background: #ef4444; + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); +} + +.validation-list { + display: grid; + gap: 6px; + margin: 0; + padding: 0 0 0 18px; + color: #0f766e; + font-size: 13px; + line-height: 1.55; +} + +.validation-list li::marker { + color: #14b8a6; +} + +.validation-section--risk .risk-advice-list { + display: grid; + gap: 10px; + margin-top: 0; +} + +.validation-section--risk .risk-advice-card-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.validation-section--risk .risk-advice-card-head span { + min-height: 20px; + display: inline-flex; + align-items: center; + padding: 0 8px; + border-radius: 999px; + background: #fef2f2; + color: #b91c1c; + font-size: 10px; + font-weight: 800; + white-space: nowrap; +} + +.validation-section--risk .risk-advice-card.medium .risk-advice-card-head span { + background: #fff7ed; + color: #c2410c; +} + +.validation-section--risk .risk-advice-card.low .risk-advice-card-head span { + background: #eff6ff; + color: #2563eb; +} + +.validation-section--risk .risk-advice-card-head strong { + min-width: 0; + color: #0f172a; + font-size: 12px; + line-height: 1.4; + text-align: right; +} + +.validation-section--risk .risk-advice-point { + margin: 0; + color: #334155; + font-size: 13px; + line-height: 1.5; +} + +.validation-section--risk .risk-advice-meta { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: 8px; +} + +.validation-section--risk .risk-advice-meta > div { + min-width: 0; + display: grid; + gap: 4px; + padding: 8px 9px; + border-radius: 8px; + background: #f8fafc; +} + +.validation-section--risk .risk-advice-meta span { + color: #64748b; + font-size: 10px; + font-weight: 800; +} + +.risk-advice-card.medium { + border-color: #fed7aa; + background: #fffaf2; +} + +.risk-advice-card.low { + border-color: #bfdbfe; + background: #f8fbff; +} + +.risk-advice-card-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.risk-advice-card-head span { + min-height: 24px; + display: inline-flex; + align-items: center; + padding: 0 9px; + border-radius: 999px; + background: #fee2e2; + color: #b91c1c; + font-size: 11px; + font-weight: 850; + white-space: nowrap; +} + +.risk-advice-card.medium .risk-advice-card-head span { + background: #ffedd5; + color: #c2410c; +} + +.risk-advice-card.low .risk-advice-card-head span { + background: #dbeafe; + color: #2563eb; +} + +.risk-advice-card-head strong { + min-width: 0; + color: #0f172a; + font-size: 13px; + line-height: 1.45; + text-align: right; +} + +.risk-advice-point { + margin: 0; + color: #7f1d1d; + font-size: 14px; + font-weight: 800; + line-height: 1.5; +} + +.risk-advice-card.medium .risk-advice-point { + color: #9a3412; +} + +.risk-advice-meta { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: 12px; +} + +.risk-advice-meta > div { + min-width: 0; + display: grid; + gap: 6px; + padding: 10px; + border-radius: 8px; + background: rgba(255, 255, 255, .72); +} + +.risk-advice-meta span { + color: #64748b; + font-size: 11px; + font-weight: 850; +} + +.risk-advice-meta ul { + display: grid; + gap: 4px; + margin: 0; + padding-left: 16px; + color: #334155; + font-size: 12px; + line-height: 1.55; +} + +.risk-advice-meta p { + margin: 0; + color: #334155; + font-size: 12px; + line-height: 1.55; +} + +.detail-overlay { + position: fixed; + inset: 0; + z-index: 9999; + display: grid; + place-items: center; + background: rgba(15, 23, 42, .45); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); +} + +.detail-modal { + position: relative; + width: calc(100vw - 80px); + max-width: 1440px; + height: calc(100vh - 64px); + max-height: 960px; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + border-radius: 28px; + background: #f8fafc; + box-shadow: + 0 0 0 1px rgba(15, 23, 42, .08), + 0 20px 60px rgba(15, 23, 42, .18), + 0 4px 16px rgba(15, 23, 42, .06); + overflow: hidden; +} + +.ai-entry-modal { + max-width: 1320px; +} + +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + padding: 24px 28px; + background: linear-gradient(135deg, #fff 0%, #f9fbff 100%); + border-bottom: 1px solid #e8eef6; +} + +.header-left { + display: flex; + align-items: center; + gap: 16px; +} + +.req-badge { + padding: 6px 14px; + border-radius: 999px; + background: #eff6ff; + border: 1px solid rgba(29, 78, 216, .16); + color: #1d4ed8; + font-size: 13px; + font-weight: 850; + letter-spacing: .02em; +} + +.header-title-group h2 { + color: #0f172a; + font-size: 20px; + font-weight: 900; + letter-spacing: -.01em; +} + +.header-title-group p { + margin-top: 3px; + color: #64748b; + font-size: 13px; +} + +.header-right { + display: flex; + align-items: center; + gap: 10px; +} + +.close-btn { + width: 36px; + height: 36px; + display: grid; + place-items: center; + border: 1px solid #e2e8f0; + border-radius: 999px; + background: #fff; + color: #64748b; + font-size: 18px; + transition: all 160ms ease; +} + +.close-btn:hover { + border-color: #cbd5e1; + background: #f1f5f9; + color: #0f172a; +} + +.modal-body { + min-height: 0; + padding: 20px 28px; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #cbd5e1 transparent; +} + +.ai-entry-grid { + min-height: 100%; + display: grid; + grid-template-columns: minmax(0, 1.2fr) 360px; + gap: 20px; +} + +.ai-chat-card, +.ai-preview-card { + min-height: 0; + border-radius: 22px; + background: #fff; + border: 1px solid #edf2f7; + box-shadow: 0 1px 3px rgba(0, 0, 0, .04); +} + +.ai-chat-card { + display: grid; + grid-template-rows: minmax(0, 1fr) auto; + overflow: hidden; +} + +.ai-chat-scroll { + min-height: 0; + display: grid; + align-content: start; + gap: 12px; + padding: 18px; + overflow: auto; + background: + linear-gradient(180deg, rgba(240, 253, 244, .5) 0%, rgba(255, 255, 255, 0) 140px), + #fff; +} + +.ai-chat-bubble { + display: grid; + grid-template-columns: 34px minmax(0, 1fr); + gap: 10px; +} + +.ai-chat-bubble.user { + grid-template-columns: minmax(0, 1fr) 34px; +} + +.ai-chat-bubble.user .ai-chat-avatar { + order: 2; + background: #dbeafe; + color: #2563eb; +} + +.ai-chat-bubble.user .ai-chat-content { + order: 1; + justify-self: end; + background: #eff6ff; +} + +.ai-chat-avatar { + width: 34px; + height: 34px; + display: grid; + place-items: center; + border-radius: 999px; + background: #ecfdf5; + color: #059669; + font-size: 18px; +} + +.ai-chat-content { + max-width: min(100%, 640px); + padding: 12px 14px; + border-radius: 18px; + background: #f8fafc; + border: 1px solid #edf2f7; +} + +.ai-chat-content header { + margin-bottom: 6px; +} + +.ai-chat-content strong { + color: #0f172a; + font-size: 13px; + font-weight: 850; +} + +.ai-chat-content p { + color: #334155; + font-size: 13px; + line-height: 1.6; +} + +.ai-composer { + display: grid; + gap: 12px; + padding: 14px 16px 16px; + border-top: 1px solid #edf2f7; + background: linear-gradient(180deg, #fff, #fbfdff); +} + +.ai-file-input { + display: none; +} + +.ai-composer-surface { + min-height: 78px; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: end; + gap: 12px; + padding: 8px 8px 8px 14px; + border: 1px solid #cbd8e5; + border-radius: 22px; + background: linear-gradient(180deg, #fff, #fbfdff); + box-shadow: 0 1px 2px rgba(15, 23, 42, .04); + transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; +} + +.ai-composer-surface:focus-within { + border-color: rgba(16, 185, 129, .58); + background: #fff; + box-shadow: 0 0 0 3px rgba(16, 185, 129, .11), 0 10px 24px rgba(15, 23, 42, .06); +} + +.ai-composer textarea { + width: 100%; + min-height: 60px; + height: 60px; + resize: none; + border: 0; + border-radius: 0; + padding: 8px 0; + background: transparent; + color: #0f172a; + font-size: 14px; + line-height: 1.6; +} + +.ai-composer textarea:focus { + outline: none; +} + +.ai-composer-actions { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 8px; + padding-bottom: 2px; +} + +.ai-upload-list { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.ai-upload-chip { + display: inline-flex; + align-items: center; + gap: 6px; + min-height: 32px; + padding: 0 12px; + border-radius: 999px; + background: #eef6ff; + border: 1px solid #d7e8fb; + color: #334155; + font-size: 12px; + font-weight: 700; +} + +.ai-upload-chip i { + color: #2563eb; +} + +.ai-upload-btn, +.ai-send-btn { + width: 48px; + height: 48px; + display: grid; + place-items: center; + padding: 0; + border-radius: 12px; + font-size: 20px; + transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease; +} + +.ai-upload-btn { + border: 0; + background: #f1f5f9; + color: #475569; + box-shadow: none; +} + +.ai-upload-btn:hover { + background: #e2e8f0; + color: #0f172a; +} + +.ai-send-btn { + border: 0; + background: #10b981; + color: #fff; + box-shadow: 0 8px 18px rgba(16, 185, 129, .20); +} + +.ai-send-btn:hover { + background: #0ea672; + box-shadow: 0 10px 22px rgba(16, 185, 129, .24); +} + +.ai-upload-btn:active, +.ai-send-btn:active { + transform: scale(.96); +} + +.ai-preview-card { + padding: 18px; + display: grid; + align-content: start; + gap: 16px; +} + +.ai-preview-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} + +.ai-preview-head h3 { + margin: 0; + color: #0f172a; + font-size: 16px; + font-weight: 850; +} + +.ai-preview-head p { + margin-top: 4px; + color: #64748b; + font-size: 12px; + line-height: 1.5; +} + +.ai-preview-fields { + display: grid; + gap: 10px; +} + +.preview-field { + padding: 12px 14px; + border-radius: 18px; + background: #f8fafc; + border: 1px solid #edf2f7; +} + +.preview-field.full { + min-height: 90px; +} + +.preview-field span { + display: block; + color: #64748b; + font-size: 11px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: .04em; +} + +.preview-field strong { + display: block; + margin-top: 5px; + color: #0f172a; + font-size: 14px; + font-weight: 850; + line-height: 1.5; +} + +.preview-field p { + margin-top: 4px; + color: #475569; + font-size: 12px; + line-height: 1.55; +} + +.ai-preview-empty { + min-height: 280px; + display: grid; + place-items: center; + gap: 10px; + padding: 24px; + border: 1px dashed #cbd5e1; + border-radius: 20px; + color: #94a3b8; + text-align: center; +} + +.ai-preview-empty i { + font-size: 32px; + color: #10b981; +} + +.ai-preview-actions { + display: flex; + gap: 10px; + margin-top: 4px; +} + +.ai-preview-secondary, +.ai-preview-primary { + height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 7px; + padding: 0 20px; + border-radius: 999px; + font-size: 13px; + font-weight: 800; + transition: all 180ms ease; + flex: 1; +} + +.ai-preview-secondary { + border: 1px solid #fed7aa; + background: #fff7ed; + color: #c2410c; +} + +.ai-preview-primary { + border: 1px solid #059669; + background: #059669; + color: #fff; + box-shadow: 0 8px 20px rgba(5, 150, 105, .18); +} + +.ai-preview-secondary:hover { + background: #ffedd5; +} + +.ai-preview-primary:hover { + background: #047857; +} + +.ai-preview-secondary:disabled, +.ai-preview-primary:disabled, +.approve-action:disabled, +.return-action:disabled, +.ai-send-btn:disabled { + opacity: .45; + cursor: not-allowed; + box-shadow: none; +} + +.detail-modal-enter-active { transition: opacity 260ms ease; } +.detail-modal-enter-active .detail-modal { transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 280ms ease; } + +.detail-modal-leave-active { transition: opacity 200ms ease; } +.detail-modal-leave-active .detail-modal { transition: transform 220ms ease, opacity 200ms ease; } + +.detail-modal-enter-from { opacity: 0; } +.detail-modal-enter-from .detail-modal { transform: translateY(16px); opacity: 0; } + +.detail-modal-leave-to { opacity: 0; } +.detail-modal-leave-to .detail-modal { transform: translateY(8px); opacity: 0; } + +@media (max-width: 1320px) { + .hero-banner-main { + grid-template-columns: 1fr; + gap: 16px; + min-height: 0; + } + + .hero-fact-grid { + grid-template-columns: repeat(5, minmax(132px, 1fr)); + overflow-x: auto; + } + + .hero-fact { + min-width: 132px; + } + + .detail-expense-table { + overflow-x: auto; + } + + .detail-expense-table table { + min-width: 1080px; + } + + .ai-entry-grid { + grid-template-columns: 1fr; + } + + .detail-modal { + width: calc(100vw - 40px); + height: calc(100vh - 40px); + } +} + +@media (max-width: 760px) { + .detail-hero { gap: 10px; padding: 16px; } + .progress-card { padding: 16px; } + + .applicant-card { + grid-template-columns: 60px minmax(0, 1fr); + gap: 12px; + } + + .portrait { + width: 60px; + height: 60px; + } + + .applicant-copy { + gap: 8px; + } + + .applicant-card h2 { + font-size: 16px; + } + + .applicant-profile-meta { + display: grid; + gap: 10px; + } + + .applicant-profile-meta__role { + display: grid; + gap: 6px; + } + + .applicant-profile-meta__role .applicant-meta-item + .applicant-meta-item { + margin-left: 0; + } + + .applicant-profile-meta__role .applicant-meta-item + .applicant-meta-item::before { + content: none; + } + + .hero-fact-grid { + grid-template-columns: 1fr 1fr; + gap: 0; + overflow: hidden; + border-top: 1px solid #edf2f7; + } + + .hero-fact { + min-width: 0; + min-height: 78px; + padding: 14px 12px 12px; + border-left: 0; + border-bottom: 1px solid #edf2f7; + } + + .hero-fact:nth-child(2n) { + border-left: 1px solid #edf2f7; + } + + .hero-fact:last-child:nth-child(odd) { + grid-column: 1 / -1; + } + + .hero-fact:nth-last-child(-n + 2) { + border-bottom: 0; + } + + .hero-fact strong { + white-space: normal; + } + + .detail-card { + padding: 14px 16px; + } + + .detail-card-head { + flex-direction: column; + align-items: stretch; + } + + .detail-card-actions { + width: 100%; + justify-content: flex-start; + } + + .smart-entry-btn { align-self: flex-start; } + + .detail-expense-table table { + min-width: 1080px; + } + + .detail-actions { + flex-direction: column; + } + + .approval-action-group { + width: 100%; + } + + .validation-head { + flex-direction: column; + } + + .detail-modal { + width: 100vw; + height: 100vh; + max-width: 100vw; + max-height: 100vh; + border-radius: 0; + } + + .modal-header { padding: 16px 18px; flex-wrap: wrap; } + .modal-body { padding: 16px 18px; } + .ai-composer-actions { flex-direction: column; align-items: stretch; } + .ai-preview-actions { flex-direction: column; } + + .attachment-preview-mask { + padding: 14px; + } + + .attachment-preview-card { + width: min(calc(100vw - 28px), 920px); + max-height: calc(100vh - 28px); + padding: 18px; + border-radius: 20px; + } + + .attachment-preview-head { + flex-wrap: wrap; + } + + .attachment-preview-toolbar { + order: 2; + width: 100%; + justify-content: flex-start; + } + + .attachment-preview-body { + grid-template-columns: minmax(0, 1fr); + } + + .attachment-insight-pane { + max-height: 320px; + } + + .risk-advice-meta { + grid-template-columns: minmax(0, 1fr); + } + + .attachment-preview-image, + .attachment-preview-frame { + min-height: 360px; + } +} +.validation-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; + margin-bottom: 10px; +} + +.validation-head h3 { + margin-bottom: 4px; + color: #0f172a; + font-size: 15px; + font-weight: 800; +} + +.validation-head p { + margin: 0; + color: #64748b; + font-size: 12px; + line-height: 1.55; +} + +.validation-pill { + min-height: 24px; + display: inline-flex; + align-items: center; + padding: 0 10px; + border-radius: 999px; + border: 1px solid transparent; + font-size: 11px; + font-weight: 800; +} + +.validation-pill.ready { + background: #f0fdf4; + border-color: #bbf7d0; + color: #166534; +} diff --git a/web/src/assets/styles/views/travel-request-detail-view.css b/web/src/assets/styles/views/travel-request-detail-view.css index be61191..b28423b 100644 --- a/web/src/assets/styles/views/travel-request-detail-view.css +++ b/web/src/assets/styles/views/travel-request-detail-view.css @@ -566,6 +566,11 @@ border-color: #e2e8f0; } +.detail-note.readonly p { + margin: 0; + white-space: pre-wrap; +} + .detail-note-editor { display: grid; gap: 10px; @@ -601,6 +606,54 @@ gap: 8px; } +.detail-note-tag-list, +.risk-card-tag-list { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.risk-note-tag { + display: inline-flex; + align-items: center; + min-height: 22px; + padding: 0 8px; + border-radius: 999px; + font-size: 11px; + font-weight: 850; + line-height: 1; +} + +.risk-note-tag.high { + background: #fef2f2; + color: #dc2626; +} + +.risk-note-tag.medium { + background: #fff7ed; + color: #c2410c; +} + +.risk-note-tag.low { + background: #eff6ff; + color: #2563eb; +} + +.risk-note-tag.hotel { + background: #fdf2f8; + color: #be185d; +} + +.risk-note-tag.traffic { + background: #ecfeff; + color: #0e7490; +} + +.risk-note-tag.neutral { + background: #f1f5f9; + color: #475569; +} + .leader-approval-card { border-color: rgba(5, 150, 105, .18); background: linear-gradient(180deg, #ffffff 0%, #f7fdfb 100%); @@ -690,6 +743,28 @@ .detail-expense-table .col-attachment { width: 22%; } .detail-expense-table .col-action { width: 9%; } +.expense-time { + position: relative; +} + +.expense-time.has-major-risk { + padding-left: 30px; +} + +.expense-risk-indicator { + position: absolute; + left: 8px; + top: 50%; + width: 18px; + height: 18px; + display: inline-grid; + place-items: center; + transform: translateY(-50%); + color: #dc2626; + font-size: 18px; + line-height: 1; +} + .cell-editor { display: grid; gap: 7px; @@ -1440,137 +1515,106 @@ word-break: break-word; } +.risk-override-panel { + display: grid; + gap: 12px; +} + +.risk-override-nav { + display: grid; + grid-template-columns: 34px minmax(0, 1fr) 34px; + align-items: center; + gap: 8px; +} + +.risk-override-nav span { + display: inline-flex; + justify-content: center; + color: #64748b; + font-size: 12px; + font-weight: 850; +} + +.risk-override-nav-btn { + width: 34px; + height: 34px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid #e2e8f0; + border-radius: 999px; + background: #fff; + color: #475569; +} + +.risk-override-nav-btn:disabled { + cursor: not-allowed; + opacity: .48; +} + +.risk-override-card { + display: grid; + gap: 10px; + padding: 12px; + border: 1px solid #fecaca; + border-radius: 10px; + background: #fffafa; +} + +.risk-override-card-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 10px; +} + +.risk-override-card-head span { + flex: 0 0 auto; + min-height: 22px; + display: inline-flex; + align-items: center; + padding: 0 8px; + border-radius: 999px; + background: #fef2f2; + color: #dc2626; + font-size: 11px; + font-weight: 850; +} + +.risk-override-card-head strong { + min-width: 0; + color: #0f172a; + font-size: 13px; + line-height: 1.45; + text-align: right; +} + +.risk-override-card p { + margin: 0; + color: #334155; + font-size: 12px; + line-height: 1.6; +} + +.risk-override-card textarea { + min-height: 88px; + border-color: #fecaca; + background: #fff; + color: #0f172a; +} + +.risk-override-card textarea:focus { + border-color: #ef4444; + box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); + outline: none; +} + .validation-card { border: 1px solid #e5e7eb; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } -.validation-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; - margin-bottom: 10px; -} - -.validation-head h3 { - margin-bottom: 4px; - color: #0f172a; - font-size: 15px; - font-weight: 800; -} - -.validation-head p { - margin: 0; - color: #64748b; - font-size: 12px; - line-height: 1.55; -} - -.validation-pill { - min-height: 24px; - display: inline-flex; - align-items: center; - padding: 0 10px; - border-radius: 999px; - border: 1px solid transparent; - font-size: 11px; - font-weight: 800; -} - -.validation-pill.ready { - background: #f0fdf4; - border-color: #bbf7d0; - color: #166534; -} - -.validation-pill.pending { - background: #fff7ed; - border-color: #fed7aa; - color: #c2410c; -} - -.validation-pill.warning { - background: #fef2f2; - border-color: #fecaca; - color: #b91c1c; -} - -.validation-summary { - margin: 0; - color: #475569; - font-size: 13px; - line-height: 1.6; -} - -.validation-sections { - display: grid; - gap: 18px; - margin-top: 16px; -} - -.validation-section { - display: grid; - gap: 10px; - padding-top: 14px; - border-top: 1px solid #e5e7eb; -} - -.validation-section:first-child { - padding-top: 0; - border-top: none; -} - -.validation-section-title { - display: flex; - align-items: center; - gap: 8px; - margin: 0; - color: #0f172a; - font-size: 13px; - font-weight: 800; - line-height: 1.4; -} - -.validation-section-title::before { - content: ''; - width: 6px; - height: 6px; - border-radius: 999px; - background: #10b981; - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); -} - -.validation-section--risk .validation-section-title { - color: #b91c1c; -} - -.validation-section--risk .validation-section-title::before { - background: #ef4444; - box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); -} - -.validation-list { - display: grid; - gap: 6px; - margin: 0; - padding: 0 0 0 18px; - color: #0f766e; - font-size: 13px; - line-height: 1.55; -} - -.validation-list li::marker { - color: #14b8a6; -} - -.validation-section--risk .risk-advice-list { - display: grid; - gap: 10px; - margin-top: 0; -} - .validation-section--risk .risk-advice-card { display: grid; gap: 8px; @@ -1591,72 +1635,6 @@ background: #f8fbff; } -.validation-section--risk .risk-advice-card-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; -} - -.validation-section--risk .risk-advice-card-head span { - min-height: 20px; - display: inline-flex; - align-items: center; - padding: 0 8px; - border-radius: 999px; - background: #fef2f2; - color: #b91c1c; - font-size: 10px; - font-weight: 800; - white-space: nowrap; -} - -.validation-section--risk .risk-advice-card.medium .risk-advice-card-head span { - background: #fff7ed; - color: #c2410c; -} - -.validation-section--risk .risk-advice-card.low .risk-advice-card-head span { - background: #eff6ff; - color: #2563eb; -} - -.validation-section--risk .risk-advice-card-head strong { - min-width: 0; - color: #0f172a; - font-size: 12px; - line-height: 1.4; - text-align: right; -} - -.validation-section--risk .risk-advice-point { - margin: 0; - color: #334155; - font-size: 13px; - line-height: 1.5; -} - -.validation-section--risk .risk-advice-meta { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - gap: 8px; -} - -.validation-section--risk .risk-advice-meta > div { - min-width: 0; - display: grid; - gap: 4px; - padding: 8px 9px; - border-radius: 8px; - background: #f8fafc; -} - -.validation-section--risk .risk-advice-meta span { - color: #64748b; - font-size: 10px; - font-weight: 800; -} - .validation-section--risk .risk-advice-meta ul, .validation-section--risk .risk-advice-meta p { margin: 0; @@ -1665,758 +1643,3 @@ line-height: 1.5; } -.risk-advice-card.medium { - border-color: #fed7aa; - background: #fffaf2; -} - -.risk-advice-card.low { - border-color: #bfdbfe; - background: #f8fbff; -} - -.risk-advice-card-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.risk-advice-card-head span { - min-height: 24px; - display: inline-flex; - align-items: center; - padding: 0 9px; - border-radius: 999px; - background: #fee2e2; - color: #b91c1c; - font-size: 11px; - font-weight: 850; - white-space: nowrap; -} - -.risk-advice-card.medium .risk-advice-card-head span { - background: #ffedd5; - color: #c2410c; -} - -.risk-advice-card.low .risk-advice-card-head span { - background: #dbeafe; - color: #2563eb; -} - -.risk-advice-card-head strong { - min-width: 0; - color: #0f172a; - font-size: 13px; - line-height: 1.45; - text-align: right; -} - -.risk-advice-point { - margin: 0; - color: #7f1d1d; - font-size: 14px; - font-weight: 800; - line-height: 1.5; -} - -.risk-advice-card.medium .risk-advice-point { - color: #9a3412; -} - -.risk-advice-meta { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - gap: 12px; -} - -.risk-advice-meta > div { - min-width: 0; - display: grid; - gap: 6px; - padding: 10px; - border-radius: 8px; - background: rgba(255, 255, 255, .72); -} - -.risk-advice-meta span { - color: #64748b; - font-size: 11px; - font-weight: 850; -} - -.risk-advice-meta ul { - display: grid; - gap: 4px; - margin: 0; - padding-left: 16px; - color: #334155; - font-size: 12px; - line-height: 1.55; -} - -.risk-advice-meta p { - margin: 0; - color: #334155; - font-size: 12px; - line-height: 1.55; -} - -.detail-overlay { - position: fixed; - inset: 0; - z-index: 9999; - display: grid; - place-items: center; - background: rgba(15, 23, 42, .45); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); -} - -.detail-modal { - position: relative; - width: calc(100vw - 80px); - max-width: 1440px; - height: calc(100vh - 64px); - max-height: 960px; - display: grid; - grid-template-rows: auto minmax(0, 1fr); - border-radius: 28px; - background: #f8fafc; - box-shadow: - 0 0 0 1px rgba(15, 23, 42, .08), - 0 20px 60px rgba(15, 23, 42, .18), - 0 4px 16px rgba(15, 23, 42, .06); - overflow: hidden; -} - -.ai-entry-modal { - max-width: 1320px; -} - -.modal-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 20px; - padding: 24px 28px; - background: linear-gradient(135deg, #fff 0%, #f9fbff 100%); - border-bottom: 1px solid #e8eef6; -} - -.header-left { - display: flex; - align-items: center; - gap: 16px; -} - -.req-badge { - padding: 6px 14px; - border-radius: 999px; - background: #eff6ff; - border: 1px solid rgba(29, 78, 216, .16); - color: #1d4ed8; - font-size: 13px; - font-weight: 850; - letter-spacing: .02em; -} - -.header-title-group h2 { - color: #0f172a; - font-size: 20px; - font-weight: 900; - letter-spacing: -.01em; -} - -.header-title-group p { - margin-top: 3px; - color: #64748b; - font-size: 13px; -} - -.header-right { - display: flex; - align-items: center; - gap: 10px; -} - -.close-btn { - width: 36px; - height: 36px; - display: grid; - place-items: center; - border: 1px solid #e2e8f0; - border-radius: 999px; - background: #fff; - color: #64748b; - font-size: 18px; - transition: all 160ms ease; -} - -.close-btn:hover { - border-color: #cbd5e1; - background: #f1f5f9; - color: #0f172a; -} - -.modal-body { - min-height: 0; - padding: 20px 28px; - overflow-y: auto; - scrollbar-width: thin; - scrollbar-color: #cbd5e1 transparent; -} - -.ai-entry-grid { - min-height: 100%; - display: grid; - grid-template-columns: minmax(0, 1.2fr) 360px; - gap: 20px; -} - -.ai-chat-card, -.ai-preview-card { - min-height: 0; - border-radius: 22px; - background: #fff; - border: 1px solid #edf2f7; - box-shadow: 0 1px 3px rgba(0, 0, 0, .04); -} - -.ai-chat-card { - display: grid; - grid-template-rows: minmax(0, 1fr) auto; - overflow: hidden; -} - -.ai-chat-scroll { - min-height: 0; - display: grid; - align-content: start; - gap: 12px; - padding: 18px; - overflow: auto; - background: - linear-gradient(180deg, rgba(240, 253, 244, .5) 0%, rgba(255, 255, 255, 0) 140px), - #fff; -} - -.ai-chat-bubble { - display: grid; - grid-template-columns: 34px minmax(0, 1fr); - gap: 10px; -} - -.ai-chat-bubble.user { - grid-template-columns: minmax(0, 1fr) 34px; -} - -.ai-chat-bubble.user .ai-chat-avatar { - order: 2; - background: #dbeafe; - color: #2563eb; -} - -.ai-chat-bubble.user .ai-chat-content { - order: 1; - justify-self: end; - background: #eff6ff; -} - -.ai-chat-avatar { - width: 34px; - height: 34px; - display: grid; - place-items: center; - border-radius: 999px; - background: #ecfdf5; - color: #059669; - font-size: 18px; -} - -.ai-chat-content { - max-width: min(100%, 640px); - padding: 12px 14px; - border-radius: 18px; - background: #f8fafc; - border: 1px solid #edf2f7; -} - -.ai-chat-content header { - margin-bottom: 6px; -} - -.ai-chat-content strong { - color: #0f172a; - font-size: 13px; - font-weight: 850; -} - -.ai-chat-content p { - color: #334155; - font-size: 13px; - line-height: 1.6; -} - -.ai-composer { - display: grid; - gap: 12px; - padding: 14px 16px 16px; - border-top: 1px solid #edf2f7; - background: linear-gradient(180deg, #fff, #fbfdff); -} - -.ai-file-input { - display: none; -} - -.ai-composer-surface { - min-height: 78px; - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: end; - gap: 12px; - padding: 8px 8px 8px 14px; - border: 1px solid #cbd8e5; - border-radius: 22px; - background: linear-gradient(180deg, #fff, #fbfdff); - box-shadow: 0 1px 2px rgba(15, 23, 42, .04); - transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; -} - -.ai-composer-surface:focus-within { - border-color: rgba(16, 185, 129, .58); - background: #fff; - box-shadow: 0 0 0 3px rgba(16, 185, 129, .11), 0 10px 24px rgba(15, 23, 42, .06); -} - -.ai-composer textarea { - width: 100%; - min-height: 60px; - height: 60px; - resize: none; - border: 0; - border-radius: 0; - padding: 8px 0; - background: transparent; - color: #0f172a; - font-size: 14px; - line-height: 1.6; -} - -.ai-composer textarea:focus { - outline: none; -} - -.ai-composer-actions { - display: flex; - justify-content: flex-end; - align-items: center; - gap: 8px; - padding-bottom: 2px; -} - -.ai-upload-list { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.ai-upload-chip { - display: inline-flex; - align-items: center; - gap: 6px; - min-height: 32px; - padding: 0 12px; - border-radius: 999px; - background: #eef6ff; - border: 1px solid #d7e8fb; - color: #334155; - font-size: 12px; - font-weight: 700; -} - -.ai-upload-chip i { - color: #2563eb; -} - -.ai-upload-btn, -.ai-send-btn { - width: 48px; - height: 48px; - display: grid; - place-items: center; - padding: 0; - border-radius: 12px; - font-size: 20px; - transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease; -} - -.ai-upload-btn { - border: 0; - background: #f1f5f9; - color: #475569; - box-shadow: none; -} - -.ai-upload-btn:hover { - background: #e2e8f0; - color: #0f172a; -} - -.ai-send-btn { - border: 0; - background: #10b981; - color: #fff; - box-shadow: 0 8px 18px rgba(16, 185, 129, .20); -} - -.ai-send-btn:hover { - background: #0ea672; - box-shadow: 0 10px 22px rgba(16, 185, 129, .24); -} - -.ai-upload-btn:active, -.ai-send-btn:active { - transform: scale(.96); -} - -.ai-preview-card { - padding: 18px; - display: grid; - align-content: start; - gap: 16px; -} - -.ai-preview-head { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 12px; -} - -.ai-preview-head h3 { - margin: 0; - color: #0f172a; - font-size: 16px; - font-weight: 850; -} - -.ai-preview-head p { - margin-top: 4px; - color: #64748b; - font-size: 12px; - line-height: 1.5; -} - -.ai-preview-fields { - display: grid; - gap: 10px; -} - -.preview-field { - padding: 12px 14px; - border-radius: 18px; - background: #f8fafc; - border: 1px solid #edf2f7; -} - -.preview-field.full { - min-height: 90px; -} - -.preview-field span { - display: block; - color: #64748b; - font-size: 11px; - font-weight: 800; - text-transform: uppercase; - letter-spacing: .04em; -} - -.preview-field strong { - display: block; - margin-top: 5px; - color: #0f172a; - font-size: 14px; - font-weight: 850; - line-height: 1.5; -} - -.preview-field p { - margin-top: 4px; - color: #475569; - font-size: 12px; - line-height: 1.55; -} - -.ai-preview-empty { - min-height: 280px; - display: grid; - place-items: center; - gap: 10px; - padding: 24px; - border: 1px dashed #cbd5e1; - border-radius: 20px; - color: #94a3b8; - text-align: center; -} - -.ai-preview-empty i { - font-size: 32px; - color: #10b981; -} - -.ai-preview-actions { - display: flex; - gap: 10px; - margin-top: 4px; -} - -.ai-preview-secondary, -.ai-preview-primary { - height: 40px; - display: inline-flex; - align-items: center; - justify-content: center; - gap: 7px; - padding: 0 20px; - border-radius: 999px; - font-size: 13px; - font-weight: 800; - transition: all 180ms ease; - flex: 1; -} - -.ai-preview-secondary { - border: 1px solid #fed7aa; - background: #fff7ed; - color: #c2410c; -} - -.ai-preview-primary { - border: 1px solid #059669; - background: #059669; - color: #fff; - box-shadow: 0 8px 20px rgba(5, 150, 105, .18); -} - -.ai-preview-secondary:hover { - background: #ffedd5; -} - -.ai-preview-primary:hover { - background: #047857; -} - -.ai-preview-secondary:disabled, -.ai-preview-primary:disabled, -.approve-action:disabled, -.return-action:disabled, -.ai-send-btn:disabled { - opacity: .45; - cursor: not-allowed; - box-shadow: none; -} - -.detail-modal-enter-active { transition: opacity 260ms ease; } -.detail-modal-enter-active .detail-modal { transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 280ms ease; } - -.detail-modal-leave-active { transition: opacity 200ms ease; } -.detail-modal-leave-active .detail-modal { transition: transform 220ms ease, opacity 200ms ease; } - -.detail-modal-enter-from { opacity: 0; } -.detail-modal-enter-from .detail-modal { transform: translateY(16px); opacity: 0; } - -.detail-modal-leave-to { opacity: 0; } -.detail-modal-leave-to .detail-modal { transform: translateY(8px); opacity: 0; } - -@media (max-width: 1320px) { - .hero-banner-main { - grid-template-columns: 1fr; - gap: 16px; - min-height: 0; - } - - .hero-fact-grid { - grid-template-columns: repeat(5, minmax(132px, 1fr)); - overflow-x: auto; - } - - .hero-fact { - min-width: 132px; - } - - .detail-expense-table { - overflow-x: auto; - } - - .detail-expense-table table { - min-width: 1080px; - } - - .ai-entry-grid { - grid-template-columns: 1fr; - } - - .detail-modal { - width: calc(100vw - 40px); - height: calc(100vh - 40px); - } -} - -@media (max-width: 760px) { - .detail-hero { gap: 10px; padding: 16px; } - .progress-card { padding: 16px; } - - .applicant-card { - grid-template-columns: 60px minmax(0, 1fr); - gap: 12px; - } - - .portrait { - width: 60px; - height: 60px; - } - - .applicant-copy { - gap: 8px; - } - - .applicant-card h2 { - font-size: 16px; - } - - .applicant-profile-meta { - display: grid; - gap: 10px; - } - - .applicant-profile-meta__role { - display: grid; - gap: 6px; - } - - .applicant-profile-meta__role .applicant-meta-item + .applicant-meta-item { - margin-left: 0; - } - - .applicant-profile-meta__role .applicant-meta-item + .applicant-meta-item::before { - content: none; - } - - .hero-fact-grid { - grid-template-columns: 1fr 1fr; - gap: 0; - overflow: hidden; - border-top: 1px solid #edf2f7; - } - - .hero-fact { - min-width: 0; - min-height: 78px; - padding: 14px 12px 12px; - border-left: 0; - border-bottom: 1px solid #edf2f7; - } - - .hero-fact:nth-child(2n) { - border-left: 1px solid #edf2f7; - } - - .hero-fact:last-child:nth-child(odd) { - grid-column: 1 / -1; - } - - .hero-fact:nth-last-child(-n + 2) { - border-bottom: 0; - } - - .hero-fact strong { - white-space: normal; - } - - .detail-card { - padding: 14px 16px; - } - - .detail-card-head { - flex-direction: column; - align-items: stretch; - } - - .detail-card-actions { - width: 100%; - justify-content: flex-start; - } - - .smart-entry-btn { align-self: flex-start; } - - .detail-expense-table table { - min-width: 1080px; - } - - .detail-actions { - flex-direction: column; - } - - .approval-action-group { - width: 100%; - } - - .validation-head { - flex-direction: column; - } - - .detail-modal { - width: 100vw; - height: 100vh; - max-width: 100vw; - max-height: 100vh; - border-radius: 0; - } - - .modal-header { padding: 16px 18px; flex-wrap: wrap; } - .modal-body { padding: 16px 18px; } - .ai-composer-actions { flex-direction: column; align-items: stretch; } - .ai-preview-actions { flex-direction: column; } - - .attachment-preview-mask { - padding: 14px; - } - - .attachment-preview-card { - width: min(calc(100vw - 28px), 920px); - max-height: calc(100vh - 28px); - padding: 18px; - border-radius: 20px; - } - - .attachment-preview-head { - flex-wrap: wrap; - } - - .attachment-preview-toolbar { - order: 2; - width: 100%; - justify-content: flex-start; - } - - .attachment-preview-body { - grid-template-columns: minmax(0, 1fr); - } - - .attachment-insight-pane { - max-height: 320px; - } - - .risk-advice-meta { - grid-template-columns: minmax(0, 1fr); - } - - .attachment-preview-image, - .attachment-preview-frame { - min-height: 360px; - } -} diff --git a/web/src/components/business/PersonalWorkbench.vue b/web/src/components/business/PersonalWorkbench.vue index c29bbc0..880c36d 100644 --- a/web/src/components/business/PersonalWorkbench.vue +++ b/web/src/components/business/PersonalWorkbench.vue @@ -84,7 +84,7 @@

- + @@ -160,7 +160,7 @@ const props = defineProps({ assistantModalOpen: { type: Boolean, default: false } }) -const emit = defineEmits(['openAssistant']) +const emit = defineEmits(['open-assistant']) const { currentUser } = useSystemState() const { toast } = useToast() const assistantDraft = ref('') @@ -244,7 +244,7 @@ function resetWorkbenchDraft() { } function emitAssistant(payload) { - emit('openAssistant', payload) + emit('open-assistant', payload) resetWorkbenchDraft() } diff --git a/web/src/composables/useBackendHealth.js b/web/src/composables/useBackendHealth.js index d5bcc5b..c477b4b 100644 --- a/web/src/composables/useBackendHealth.js +++ b/web/src/composables/useBackendHealth.js @@ -6,6 +6,12 @@ const backendHealthy = ref(true) const backendChecking = ref(false) const backendError = ref('') let lastCheckedAt = 0 +const DEFAULT_HEALTH_TIMEOUT_MS = 2500 +const REQUEST_TIMEOUT_CODE = 'REQUEST_TIMEOUT' + +function isRequestTimeout(error) { + return error?.code === REQUEST_TIMEOUT_CODE +} export async function checkBackendHealth(options = {}) { const force = Boolean(options.force) @@ -18,7 +24,9 @@ export async function checkBackendHealth(options = {}) { backendChecking.value = true try { - const payload = await fetchBackendHealth() + const payload = await fetchBackendHealth({ + timeoutMs: Number(options.timeoutMs || DEFAULT_HEALTH_TIMEOUT_MS) + }) const ok = payload?.status === 'ok' backendHealthy.value = ok @@ -28,6 +36,12 @@ export async function checkBackendHealth(options = {}) { lastCheckedAt = now return ok } catch (error) { + if (isRequestTimeout(error) && options.allowStaleOnTimeout) { + backendError.value = error?.message || '后端正在处理耗时任务，已先展示页面。' + lastCheckedAt = now + return backendHealthy.value !== false + } + backendHealthy.value = false backendError.value = error?.message || '无法连接后端服务。' lastCheckedAt = now diff --git a/web/src/composables/useLoginView.js b/web/src/composables/useLoginView.js index d770bba..6b76f9b 100644 --- a/web/src/composables/useLoginView.js +++ b/web/src/composables/useLoginView.js @@ -1,4 +1,4 @@ -import { ref } from 'vue' +import { h, ref } from 'vue' export function useLoginView() { const username = ref('') @@ -29,14 +29,19 @@ export function useLoginView() { ] const LogoMark = { - template: ` - - ` + name: 'LoginLogoMark', + render() { + return h('span', { class: 'logo-mark', 'aria-hidden': 'true' }, [ + h('svg', { viewBox: '0 0 36 36' }, [ + h('path', { + d: 'M19.8 4.5c5.7 1.1 9.9 5.7 10.5 11.6-2.8-.9-5.5-.7-7.9.6-2.8 1.5-4.5 4.3-5.2 8.2-4.4-2.8-6.5-6.5-6.3-11.1.2-4.2 3.5-7.8 8.9-9.3Z' + }), + h('path', { + d: 'M9 7.6c-3 3.5-4 7.3-2.9 11.2 1.2 4.2 4.6 7 10.1 8.5-2 1.8-4.6 2.6-7.6 2.3C5.1 26.7 3.5 23.1 3.7 19 4 14.4 5.7 10.6 9 7.6Z' + }) + ]) + ]) + } } return { diff --git a/web/src/router/index.js b/web/src/router/index.js index 922c1b9..e4907b1 100644 --- a/web/src/router/index.js +++ b/web/src/router/index.js @@ -106,7 +106,7 @@ router.beforeEach((to) => { } if (authActive && to.meta.requiresAuth) { - return checkBackendHealth().then((ok) => { + return checkBackendHealth({ allowStaleOnTimeout: true }).then((ok) => { if (!ok && to.name !== 'backend-unavailable') { return { name: 'backend-unavailable' } } diff --git a/web/src/services/api.js b/web/src/services/api.js index 684cad8..ec7058b 100644 --- a/web/src/services/api.js +++ b/web/src/services/api.js @@ -269,7 +269,9 @@ export async function apiRequest(path, options = {}) { globalThis.clearTimeout(timeoutId) } if (error?.name === 'AbortError') { - throw new Error(String(timeoutMessage || '').trim() || '接口请求超时，请稍后重试。') + const timeoutError = new Error(String(timeoutMessage || '').trim() || '接口请求超时，请稍后重试。') + timeoutError.code = 'REQUEST_TIMEOUT' + throw timeoutError } if (String(error?.message || '').includes('ByteString')) { throw new Error('当前登录用户信息包含浏览器不支持的请求头字符，请重新登录后重试。') diff --git a/web/src/services/system.js b/web/src/services/system.js index 039e86b..0dff25f 100644 --- a/web/src/services/system.js +++ b/web/src/services/system.js @@ -1,5 +1,8 @@ import { apiRequest } from './api.js' -export function fetchBackendHealth() { - return apiRequest('/health') +export function fetchBackendHealth(options = {}) { + return apiRequest('/health', { + timeoutMs: Number(options.timeoutMs || 2500), + timeoutMessage: '后端健康检查超时，可能正在处理耗时任务。' + }) } diff --git a/web/src/utils/expenseAssistantActions.js b/web/src/utils/expenseAssistantActions.js new file mode 100644 index 0000000..858decc --- /dev/null +++ b/web/src/utils/expenseAssistantActions.js @@ -0,0 +1,40 @@ +const EXPENSE_SCENE_SELECTION_OPTIONS = [ + { key: 'travel', label: '差旅费', description: '出差行程、住宿、跨城交通等费用', icon: 'mdi mdi-bag-suitcase-outline' }, + { key: 'transport', label: '交通费', description: '市内交通、打车、停车、通行等费用', icon: 'mdi mdi-car-outline' }, + { key: 'hotel', label: '住宿费', description: '单独住宿或酒店发票报销', icon: 'mdi mdi-bed-outline' }, + { key: 'entertainment', label: '业务招待费', description: '客户接待、餐饮招待等费用', icon: 'mdi mdi-food-fork-drink' }, + { key: 'office', label: '办公费', description: '办公用品、低值易耗品等费用', icon: 'mdi mdi-briefcase-outline' }, + { key: 'other', label: '其他费用', description: '暂不属于以上类型的费用', icon: 'mdi mdi-dots-horizontal-circle-outline' } +] + +const EXPENSE_INTENT_CONFIRMATION_ACTION = { + label: '我要报销', + description: '按报销流程继续，并选择具体费用场景', + icon: 'mdi mdi-receipt-text-check-outline', + action_type: 'confirm_expense_intent' +} + +export function buildExpenseSceneSelectionActions(rawText) { + const originalMessage = String(rawText || '').trim() + return EXPENSE_SCENE_SELECTION_OPTIONS.map((option) => ({ + label: option.label, + description: option.description, + icon: option.icon, + action_type: 'select_expense_type', + payload: { + expense_type: option.key, + expense_type_label: option.label, + original_message: originalMessage + } + })) +} + +export function buildExpenseIntentConfirmationActions(rawText) { + const originalMessage = String(rawText || '').trim() + return [{ + ...EXPENSE_INTENT_CONFIRMATION_ACTION, + payload: { + original_message: originalMessage + } + }] +} diff --git a/web/src/utils/reimbursementTextInference.js b/web/src/utils/reimbursementTextInference.js index 968a68a..20cc89a 100644 --- a/web/src/utils/reimbursementTextInference.js +++ b/web/src/utils/reimbursementTextInference.js @@ -6,7 +6,7 @@ const DEFAULT_INTENT_LABELS = { explain: '解释', compare: '对比', risk_check: '风险检查', - draft: '草稿生成', + draft: '信息核对', operate: '动作请求' } diff --git a/web/src/utils/suggestedActionKey.js b/web/src/utils/suggestedActionKey.js new file mode 100644 index 0000000..c30a57e --- /dev/null +++ b/web/src/utils/suggestedActionKey.js @@ -0,0 +1,6 @@ +export function buildSuggestedActionKey(action) { + const actionType = String(action?.action_type || '').trim() + const payload = action?.payload && typeof action.payload === 'object' ? action.payload : {} + const payloadKey = String(payload.expense_type || payload.expense_type_label || action?.label || '').trim() + return `${actionType}:${payloadKey}` +} diff --git a/web/src/views/ApprovalCenterView.vue b/web/src/views/ApprovalCenterView.vue index 93021b3..93e72ce 100644 --- a/web/src/views/ApprovalCenterView.vue +++ b/web/src/views/ApprovalCenterView.vue @@ -121,3 +121,4 @@ + diff --git a/web/src/views/AuditView.vue b/web/src/views/AuditView.vue index 2c166d9..5ad73e8 100644 --- a/web/src/views/AuditView.vue +++ b/web/src/views/AuditView.vue @@ -1220,4 +1220,5 @@ - + + diff --git a/web/src/views/PersonalWorkbenchView.vue b/web/src/views/PersonalWorkbenchView.vue index 68e55ac..6898535 100644 --- a/web/src/views/PersonalWorkbenchView.vue +++ b/web/src/views/PersonalWorkbenchView.vue @@ -2,7 +2,7 @@ @@ -13,5 +13,5 @@ defineProps({ assistantModalOpen: { type: Boolean, default: false } }) -const emit = defineEmits(['openAssistant']) +const emit = defineEmits(['open-assistant']) diff --git a/web/src/views/TravelReimbursementCreateView.vue b/web/src/views/TravelReimbursementCreateView.vue index def64dd..26db9b5 100644 --- a/web/src/views/TravelReimbursementCreateView.vue +++ b/web/src/views/TravelReimbursementCreateView.vue @@ -87,12 +87,17 @@ {{ message.role === 'assistant' ? (message.assistantName || ASSISTANT_DISPLAY_NAME) : '我' }} -

- {{ message.text }} -

+
+ +
-
-
-
- - - -
- {{ buildReviewHeadline(message.reviewPayload, message.draftPayload) }} -

{{ buildReviewSubline(message.reviewPayload, message.draftPayload) }}

-
-
- - {{ buildReviewStateLabel(message.reviewPayload, message.draftPayload) }} - -
- -
+
- - - -
@@ -1328,22 +1274,6 @@ @confirm="confirmDeleteCurrentSession" /> - -
@@ -1404,57 +1334,12 @@
- -
-
-
-
- 修改识别信息 -

请按当前识别结果逐项修改

-

修改会先保存到右侧核对信息，提交下一步时再进行 AI 预审。

-
- -
- -
- -
- -
- - -
-
-
- + + + diff --git a/web/src/views/TravelRequestDetailView.vue b/web/src/views/TravelRequestDetailView.vue index 1b1409a..1f2a96e 100644 --- a/web/src/views/TravelRequestDetailView.vue +++ b/web/src/views/TravelRequestDetailView.vue @@ -102,6 +102,15 @@ placeholder="例如：去北京客户现场出差，拜访 XX 客户并处理项目验收事项" aria-label="附加说明" > +
+ + {{ tag }} + +
仅草稿待提交状态可编辑，提交后将作为明确说明展示。
@@ -125,7 +134,18 @@
-
{{ detailNote }}
+
+

{{ detailNote }}

+
+ + {{ tag }} + +
+
@@ -170,7 +190,13 @@