Files
X-Financial/web/src/assets/styles/views/travel-reimbursement-create-view-part2.css
caoxiaozhu 5b388d08c0 feat: 增强知识库索引与设置页面模块化拆分
扩展知识库索引任务和 RAG 检索支持增量入库和文档去重,优
化本体检测和规则匹配精度,前端设置页面拆分为 LLM、邮件
和 Hermes 员工同步子面板并重构样式,新增日志详情组件和
知识入库日志模型,补充单元测试覆盖。
2026-05-22 23:47:28 +08:00

1507 lines
28 KiB
CSS

.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: #ffffff;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
transform: translateY(-1px);
}
.review-side-metric-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 8px;
background: #f1f5f9;
border: 1px solid transparent;
color: #64748b;
font-size: 15px;
transition: all 0.2s ease;
}
.review-side-metric-card.editable:hover .review-side-metric-icon,
.review-side-metric-card.editing .review-side-metric-icon {
color: #059669;
border-color: rgba(16, 185, 129, 0.22);
background: #ecfdf5;
}
.review-side-metric-card.invalid .review-side-metric-icon {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.22);
background: #fef2f2;
}
.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);
}