.risk-sim-backdrop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(15, 23, 42, 0.44); backdrop-filter: blur(12px); } .risk-sim-modal { width: min(1180px, 100%); height: min(820px, calc(100vh - 36px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(203, 213, 225, 0.88); border-radius: 18px; background: #f8fafc; box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26); } .risk-sim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px 14px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .risk-sim-title span, .risk-sim-context-panel span, .risk-sim-result-head span, .risk-sim-evidence span, .risk-sim-recognition-debug > span, .risk-sim-recognized-fields > span, .risk-sim-file-strip > span { color: #64748b; font-size: 12px; font-weight: 850; } .risk-sim-title h3 { margin: 4px 0 5px; color: #0f172a; font-size: 19px; font-weight: 900; line-height: 1.25; } .risk-sim-title p { margin: 0; color: #475569; font-size: 13px; line-height: 1.55; } .risk-sim-icon-btn, .risk-sim-tool-btn, .risk-sim-send-btn { display: grid; place-items: center; border: 1px solid #dbe5ef; background: #fff; color: #475569; cursor: pointer; } .risk-sim-icon-btn { width: 38px; height: 38px; border-radius: 12px; } .risk-sim-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid #e5edf5; background: #fff; } .risk-sim-meta span { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; color: #475569; font-size: 12px; font-weight: 800; } .risk-sim-meta .tone-low { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; } .risk-sim-meta .tone-medium { border-color: #fed7aa; background: #fff7ed; color: #c2410c; } .risk-sim-meta .tone-high { border-color: #fecaca; background: #fef2f2; color: #b91c1c; } .risk-sim-meta .tone-critical { border-color: #fca5a5; background: #fff1f2; color: #991b1b; } .risk-sim-main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; padding: 14px; } .risk-sim-dialog-panel, .risk-sim-context-panel { min-height: 0; border: 1px solid #dfe8f1; border-radius: 14px; background: #fff; } .risk-sim-dialog-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; overflow: hidden; } .risk-sim-message-list { min-height: 0; display: grid; align-content: start; gap: 14px; overflow-y: auto; padding: 18px; background: #f8fafc; } .risk-sim-message-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; } .risk-sim-message-row.user { grid-template-columns: minmax(0, 1fr) 34px; } .risk-sim-message-row.user .risk-sim-avatar { grid-column: 2; grid-row: 1; } .risk-sim-message-row.user .risk-sim-bubble { grid-column: 1; justify-self: end; background: var(--theme-primary); color: #fff; } .risk-sim-message-row.user .risk-sim-bubble header, .risk-sim-message-row.user .risk-sim-bubble p { color: #fff; } .risk-sim-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #dbe5ef; border-radius: 12px; background: #fff; color: var(--theme-primary-active); } .risk-sim-message-row.user .risk-sim-avatar { color: #2563eb; } .risk-sim-bubble { max-width: min(100%, 760px); padding: 11px 13px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05); } .risk-sim-bubble header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: #64748b; font-size: 11px; } .risk-sim-bubble header strong { color: #0f172a; font-size: 12px; font-weight: 850; } .risk-sim-bubble p { margin: 0; color: #1e293b; font-size: 13px; line-height: 1.65; white-space: pre-wrap; } .risk-sim-thinking { display: inline-flex; align-items: center; gap: 8px; } .risk-sim-message-files, .risk-sim-file-strip div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .risk-sim-message-files { margin-top: 9px; } .risk-sim-message-files span, .risk-sim-file-chip { min-width: 0; max-width: 260px; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px; border: 1px solid rgba(191, 219, 254, 0.8); border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 750; } .risk-sim-message-files span { color: #dbeafe; border-color: rgba(219, 234, 254, 0.38); background: rgba(255, 255, 255, 0.12); } .risk-sim-recognition-debug { display: grid; gap: 8px; margin-top: 11px; } .risk-sim-recognition-debug article { display: grid; gap: 8px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; } .risk-sim-recognition-debug article header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; } .risk-sim-recognition-debug article header strong { min-width: 0; overflow: hidden; color: #0f172a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .risk-sim-recognition-debug article header em { flex: 0 0 auto; color: #64748b; font-size: 11px; font-style: normal; } .risk-sim-debug-field-list { display: flex; flex-wrap: wrap; gap: 6px; } .risk-sim-debug-field-list b { max-width: 100%; display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; overflow: hidden; border: 1px solid #dbeafe; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .risk-sim-debug-ocr-text { max-height: 112px; overflow: auto; padding: 8px 9px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #334155; } .risk-sim-result-card { margin-top: 12px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; } .risk-sim-result-card.high { border-color: #fecaca; } .risk-sim-result-card.medium { border-color: #fed7aa; } .risk-sim-result-card.low { border-color: #bfdbfe; } .risk-sim-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid #edf2f7; } .risk-sim-result-head strong { display: block; margin-top: 3px; color: #0f172a; font-size: 14px; font-weight: 900; } .risk-sim-result-head b { padding: 5px 9px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; } .risk-sim-result-card.high .risk-sim-result-head b { background: #fef2f2; color: #b91c1c; } .risk-sim-result-card.medium .risk-sim-result-head b { background: #fff7ed; color: #c2410c; } .risk-sim-result-card.low .risk-sim-result-head b { background: #eff6ff; color: #1d4ed8; } .risk-sim-result-message { padding: 10px 12px 0; } .risk-sim-blocking-message { padding: 10px 12px 0; color: #92400e; } .risk-sim-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; } .risk-sim-field-grid div { min-width: 0; padding: 9px 10px; border: 1px solid #edf2f7; border-radius: 10px; background: #f8fafc; } .risk-sim-field-grid span { display: block; color: #64748b; font-size: 11px; font-weight: 800; } .risk-sim-field-grid strong { display: block; margin-top: 4px; overflow: hidden; color: #0f172a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .risk-sim-recognized-fields { display: grid; gap: 7px; padding: 0 12px 12px; } .risk-sim-recognized-fields ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .risk-sim-recognized-fields li { min-width: 0; display: grid; grid-template-columns: minmax(140px, 0.75fr) auto minmax(130px, 1fr); gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid #edf2f7; border-radius: 10px; background: #f8fafc; } .risk-sim-recognized-fields strong, .risk-sim-recognized-fields b { min-width: 0; overflow: hidden; color: #0f172a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .risk-sim-recognized-fields em { padding: 3px 7px; border-radius: 999px; background: var(--success-soft); color: var(--success-hover); font-size: 11px; font-style: normal; font-weight: 850; white-space: nowrap; } .risk-sim-evidence { display: grid; gap: 6px; padding: 0 12px 12px; } .risk-sim-missing-fields { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 12px 12px; } .risk-sim-missing-fields span { flex: 0 0 100%; color: #92400e; font-size: 12px; font-weight: 850; } .risk-sim-missing-fields b { min-height: 26px; display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid #fed7aa; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 11px; font-weight: 850; } .risk-sim-evidence ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: #334155; font-size: 12px; line-height: 1.55; } .risk-sim-file-strip { display: grid; gap: 8px; padding: 10px 14px; border-top: 1px solid #e2e8f0; background: #fff; } .risk-sim-file-chip { cursor: pointer; } .risk-sim-file-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .risk-sim-file-chip em { color: inherit; font-size: 11px; font-style: normal; opacity: 0.78; white-space: nowrap; } .risk-sim-file-chip.pending { border-color: #dbe5ef; background: #f8fafc; color: #475569; } .risk-sim-file-chip.recognizing { border-color: #dbeafe; background: #eff6ff; color: #2563eb; } .risk-sim-file-chip.recognized { border-color: var(--success-line); background: var(--success-soft); color: var(--success-hover); } .risk-sim-file-chip.failed { border-color: #fed7aa; background: #fff7ed; color: #c2410c; } .risk-sim-composer { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 10px; align-items: center; padding: 12px 14px 14px; border-top: 1px solid #e2e8f0; background: #fff; } .risk-sim-composer.text-only { grid-template-columns: minmax(0, 1fr) 42px; } .risk-sim-file-input { display: none; } .risk-sim-tool-btn, .risk-sim-send-btn { width: 42px; height: 42px; border-radius: 999px; } .risk-sim-send-btn { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; } .risk-sim-tool-btn:disabled, .risk-sim-send-btn:disabled, .risk-sim-primary-btn:disabled, .risk-sim-secondary-btn:disabled { opacity: 0.48; cursor: not-allowed; } .risk-sim-composer-shell { min-height: 42px; display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; } .risk-sim-composer-shell:focus-within { border-color: rgba(var(--theme-primary-rgb), 0.58); box-shadow: 0 0 0 3px var(--theme-focus-ring); } .risk-sim-composer-shell textarea { width: 100%; min-height: 34px; max-height: 110px; resize: none; border: 0; padding: 8px 14px; background: transparent; color: #0f172a; font-size: 13px; line-height: 1.45; } .risk-sim-composer-shell textarea:focus { outline: none; } .risk-sim-context-panel { display: grid; align-content: start; gap: 12px; padding: 14px; } .risk-sim-context-panel section { display: grid; gap: 7px; padding: 12px; border: 1px solid #edf2f7; border-radius: 12px; background: #f8fafc; } .risk-sim-step-list, .risk-sim-recognition-list { display: grid; gap: 9px; } .risk-sim-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: flex-start; padding: 9px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; } .risk-sim-step i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: #f1f5f9; color: #64748b; } .risk-sim-step.done i { background: var(--success-soft); color: var(--success-hover); } .risk-sim-step.running i { background: #eff6ff; color: #2563eb; } .risk-sim-step.warning i { background: #fff7ed; color: #c2410c; } .risk-sim-step strong { color: #0f172a; font-size: 12px; font-weight: 900; } .risk-sim-step p, .risk-sim-recognition-list p, .risk-sim-recognition-list small { margin: 2px 0 0; color: #64748b; font-size: 11px; line-height: 1.45; } .risk-sim-recognition-list article { min-width: 0; padding: 9px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; } .risk-sim-recognition-list article strong { display: block; color: #0f172a; font-size: 12px; font-weight: 900; } .risk-sim-recognition-list small { display: block; } .risk-sim-error-text { color: #c2410c; } .risk-sim-context-panel strong { color: #0f172a; font-size: 14px; font-weight: 900; } .risk-sim-context-panel p, .risk-sim-field-list em { margin: 0; color: #475569; font-size: 12px; line-height: 1.55; } .risk-sim-field-list { display: flex; gap: 7px; flex-wrap: wrap; } .risk-sim-field-list b { max-width: 100%; min-height: 26px; display: inline-flex; align-items: center; padding: 0 8px; overflow: hidden; border: 1px solid #dbe5ef; border-radius: 999px; background: #fff; color: #334155; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .risk-sim-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid #dfe8f1; background: #fff; } .risk-sim-foot > span { color: #64748b; font-size: 12px; font-weight: 750; } .risk-sim-foot div { display: flex; align-items: center; gap: 10px; } .risk-sim-primary-btn, .risk-sim-secondary-btn { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 10px; font-size: 13px; font-weight: 850; } .risk-sim-primary-btn { border: 1px solid var(--theme-primary); background: var(--theme-primary); color: #fff; } .risk-sim-secondary-btn { border: 1px solid #dbe5ef; background: #f8fafc; color: #334155; } .risk-sim-dialog-enter-active, .risk-sim-dialog-leave-active { transition: opacity 0.18s ease; } .risk-sim-dialog-enter-from, .risk-sim-dialog-leave-to { opacity: 0; } @media (max-width: 920px) { .risk-sim-main { grid-template-columns: 1fr; } .risk-sim-context-panel { display: none; } .risk-sim-field-grid { grid-template-columns: 1fr; } .risk-sim-recognized-fields li { grid-template-columns: 1fr; } .risk-sim-foot { align-items: stretch; flex-direction: column; } .risk-sim-foot div { justify-content: flex-end; } }