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 296fc7c..caeaf2b 100644 --- a/web/src/assets/styles/views/travel-reimbursement-create-view.css +++ b/web/src/assets/styles/views/travel-reimbursement-create-view.css @@ -115,24 +115,54 @@ gap: 10px; } -.source-pill { - min-height: 38px; - display: inline-flex; - align-items: center; - gap: 8px; - padding: 0 14px; +.assistant-toggle-btn, +.session-trash-btn { + width: 38px; + height: 38px; + display: grid; + place-items: center; + padding: 0; + border: 1px solid rgba(248, 113, 113, 0.28); border-radius: 14px; - background: rgba(245, 252, 249, 0.95); - color: #166534; - font-size: 12px; - font-weight: 800; - border: 1px solid rgba(16, 185, 129, 0.16); - box-shadow: 0 8px 16px rgba(148, 163, 184, 0.1); - white-space: nowrap; + flex: none; } -.source-pill i { - font-size: 14px; +.assistant-toggle-btn { + border-color: rgba(16, 185, 129, 0.18); + background: rgba(245, 252, 249, 0.96); + color: #166534; + font-size: 16px; + box-shadow: 0 8px 18px rgba(16, 185, 129, 0.1); +} + +.assistant-toggle-btn:hover:not(:disabled) { + background: rgba(236, 253, 245, 0.98); + border-color: rgba(16, 185, 129, 0.28); +} + +.assistant-toggle-btn:disabled, +.assistant-toggle-btn.disabled { + opacity: 0.48; + cursor: not-allowed; + box-shadow: none; +} + +.session-trash-btn { + background: rgba(254, 242, 242, 0.96); + color: #dc2626; + font-size: 16px; + box-shadow: 0 8px 18px rgba(239, 68, 68, 0.12); +} + +.session-trash-btn:hover:not(:disabled) { + background: rgba(254, 226, 226, 0.98); + border-color: rgba(239, 68, 68, 0.34); +} + +.session-trash-btn:disabled { + opacity: 0.42; + cursor: not-allowed; + box-shadow: none; } .close-btn { @@ -150,14 +180,9 @@ .assistant-layout { min-height: 0; - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 16px; + display: flex; padding: 16px; -} - -.assistant-layout.has-insight { - grid-template-columns: minmax(0, 1.24fr) clamp(360px, 31vw, 440px); + align-items: stretch; } .dialog-panel, @@ -175,12 +200,33 @@ } .dialog-panel { + flex: 1 1 auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 22%), linear-gradient(180deg, rgba(252, 253, 253, 0.88) 0%, rgba(243, 247, 248, 0.84) 100%); + transition: + transform 320ms cubic-bezier(0.22, 1, 0.36, 1), + box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1); + will-change: transform; +} + +.insight-panel-shell { + flex: none; + width: clamp(360px, 31vw, 440px); + min-width: 0; + margin-left: 16px; + overflow: hidden; + transition: + width 360ms cubic-bezier(0.22, 1, 0.36, 1), + margin-left 360ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.insight-panel-shell.collapsed { + width: 0; + margin-left: 0; } .dialog-toolbar { @@ -211,6 +257,12 @@ color: #059669; } +.shortcut-chip:disabled { + opacity: 0.48; + cursor: not-allowed; + box-shadow: none; +} + .message-list { min-height: 0; display: grid; @@ -438,8 +490,7 @@ font-family: inherit; } -.message-files, -.composer-files { +.message-files { display: flex; gap: 8px; flex-wrap: wrap; @@ -452,11 +503,13 @@ align-items: center; gap: 6px; padding: 0 10px; + border: 0; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; + max-width: 100%; } .file-chip.active { @@ -466,6 +519,8 @@ .composer { padding: 0 18px 18px; + display: grid; + gap: 12px; } .hidden-file-input { @@ -473,25 +528,165 @@ } .composer-shell { + min-width: 0; border: 1px solid rgba(214, 225, 234, 0.95); - border-radius: 22px; + border-radius: 20px; background: rgba(255, 255, 255, 0.98); box-shadow: - 0 14px 28px rgba(226, 232, 240, 0.28), + 0 10px 22px rgba(226, 232, 240, 0.24), 0 1px 4px rgba(15, 23, 42, 0.03); +} + +.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 { width: 100%; - min-height: 84px; + min-height: 20px; resize: none; border: 0; - padding: 16px 16px 8px; + padding: 11px 14px; background: transparent; color: #0f172a; font-size: 14px; - line-height: 1.6; + line-height: 1.5; } .composer-shell textarea::placeholder { @@ -506,28 +701,26 @@ color: #94a3b8; } -.composer-foot { +.composer-row { display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - padding: 0 14px 14px; -} - -.composer-tools { - display: flex; - align-items: center; + align-items: flex-end; gap: 10px; } +.composer-row .composer-shell { + flex: 1 1 auto; +} + +.composer-side-btn, .tool-btn, .send-btn { - width: 42px; - height: 42px; + width: 44px; + height: 44px; display: grid; place-items: center; border: 0; - border-radius: 14px; + border-radius: 999px; + flex: none; } .tool-btn { @@ -543,12 +736,6 @@ cursor: not-allowed; } -.composer-tip { - color: #94a3b8; - font-size: 12px; - font-weight: 700; -} - .send-btn { background: linear-gradient(135deg, #22c55e, #10b981); color: #fff; @@ -566,9 +753,25 @@ position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); + width: clamp(360px, 31vw, 440px); + 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 { @@ -912,6 +1115,19 @@ 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; @@ -1102,6 +1318,225 @@ box-shadow: none; } +.review-document-switch-card { + gap: 14px; +} + +.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.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; @@ -1128,6 +1563,83 @@ 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; @@ -2250,6 +2762,64 @@ 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-grid { display: grid; gap: 12px; @@ -2303,20 +2873,13 @@ transform: translateY(8px); } -.insight-panel-enter-active, -.insight-panel-leave-active { - transition: opacity 220ms ease, transform 240ms ease; -} - -.insight-panel-enter-from, -.insight-panel-leave-to { - opacity: 0; - transform: translateX(18px); -} - @media (max-width: 1366px), (max-height: 780px) { - .assistant-layout.has-insight { - grid-template-columns: minmax(0, 1.34fr) 348px; + .insight-panel-shell { + width: 348px; + } + + .insight-panel { + width: 348px; } .review-side-grid.compact { @@ -2326,12 +2889,32 @@ @media (max-width: 1280px) { .assistant-layout { - grid-template-columns: 1fr; + flex-direction: column; + } + + .insight-panel-shell { + width: 100%; + margin-left: 0; + max-height: 720px; + 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 { + width: 100%; + max-height: 0; } .insight-panel { + width: 100%; min-height: 320px; } + + .insight-panel-shell.collapsed .insight-panel { + transform: translateY(-12px); + } } @media (max-width: 760px) { @@ -2358,15 +2941,28 @@ justify-content: space-between; } - .source-pill { - min-height: 40px; - padding: 0 14px; + .assistant-toggle-btn, + .session-trash-btn, + .assistant-header-actions .close-btn { + width: 40px; + height: 40px; } .assistant-layout { padding: 14px; } + .composer-row { + gap: 8px; + } + + .composer-side-btn, + .tool-btn, + .send-btn { + width: 40px; + height: 40px; + } + .dialog-toolbar { padding: 16px 16px 12px; } @@ -2398,8 +2994,17 @@ padding: 0 16px 16px; } - .composer-foot { - align-items: flex-end; + .composer-files-head, + .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 { @@ -2411,7 +3016,8 @@ } .review-side-grid, - .review-side-category-grid { + .review-side-category-grid, + .review-document-edit-grid { grid-template-columns: 1fr; } @@ -2447,6 +3053,10 @@ width: calc(100vw - 24px); } + .review-preview-modal { + width: calc(100vw - 24px); + } + .review-edit-form { grid-template-columns: 1fr; padding: 18px; 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 895696d..03f76d5 100644 --- a/web/src/assets/styles/views/travel-request-detail-view.css +++ b/web/src/assets/styles/views/travel-request-detail-view.css @@ -38,7 +38,7 @@ .hero-topline { display: grid; - grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); + grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.12fr); gap: 18px; align-items: center; padding-bottom: 14px; @@ -105,7 +105,7 @@ .applicant-meta { display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin-top: 10px; } @@ -136,7 +136,7 @@ .hero-stat-strip { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid #e5eaf0; @@ -361,8 +361,17 @@ } .progress-step.done::after { opacity: 1; } +.progress-step.current::after { + right: 50%; + opacity: 1; +} + .progress-step:first-child::before, -.progress-step:first-child::after { left: 50%; } +.progress-step:first-child.done::after { left: 50%; } +.progress-step:first-child.current::after { + left: 50%; + right: 50%; +} .progress-step:last-child::before, .progress-step:last-child::after { right: 50%; }