.assistant-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(15, 23, 42, 0.46); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .assistant-modal { width: min(1480px, calc(100vw - 48px)); height: min(920px, calc(100vh - 40px)); display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 28px; background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 24%), 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); overflow: hidden; } .assistant-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px 20px; border-bottom: 1px solid #e5edf5; background: rgba(255, 255, 255, 0.82); } .assistant-header-main { display: flex; align-items: flex-start; gap: 16px; min-width: 0; } .assistant-badge { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 999px; background: rgba(16, 185, 129, 0.12); color: #059669; font-size: 12px; font-weight: 800; white-space: nowrap; } .assistant-header h2 { color: #0f172a; font-size: 24px; font-weight: 900; } .assistant-header p { margin-top: 4px; color: #64748b; font-size: 14px; line-height: 1.6; } .assistant-header-actions { display: flex; align-items: center; gap: 12px; } .source-pill { min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: #eff6ff; color: #2563eb; font-size: 13px; font-weight: 800; white-space: nowrap; } .close-btn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #d7e0ea; border-radius: 999px; background: #fff; color: #64748b; font-size: 18px; } .assistant-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; } .assistant-layout.has-insight { grid-template-columns: minmax(0, 1.18fr) 420px; } .dialog-panel, .insight-panel { min-width: 0; min-height: 0; border: 1px solid #e7eef6; border-radius: 24px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); } .dialog-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; } .dialog-toolbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 18px 20px 14px; border-bottom: 1px solid #eef2f7; } .shortcut-chip { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #dbe6f0; border-radius: 999px; background: #fff; color: #334155; font-size: 13px; font-weight: 800; white-space: nowrap; } .shortcut-chip i { color: #059669; } .message-list { min-height: 0; display: grid; align-content: start; gap: 16px; padding: 20px; overflow-y: auto; } .message-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 12px; } .message-row.user { grid-template-columns: minmax(0, 1fr) 38px; } .message-row.user .message-avatar { order: 2; background: #dbeafe; color: #2563eb; } .message-row.user .message-bubble { order: 1; justify-self: end; background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.04)); border-color: rgba(37, 99, 235, 0.16); } .message-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; background: #dff7ee; color: #059669; font-size: 20px; } .message-bubble { max-width: min(100%, 720px); padding: 14px 16px; border: 1px solid #e1e8f0; border-radius: 20px; background: #fff; color: #24324a; line-height: 1.65; } .message-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .message-meta strong { color: #0f172a; font-size: 13px; font-weight: 850; } .message-meta time { color: #94a3b8; font-size: 12px; } .message-bubble p { color: #334155; font-size: 14px; } .message-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .message-meta-chip, .capability-chip, .risk-chip, .message-risk-chip, .message-action-chip { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; } .message-meta-chip, .capability-chip { background: #eef6ff; color: #1d4ed8; } .risk-chip, .message-risk-chip { background: #fff1f2; color: #be123c; } .message-action-chip { background: #ecfdf5; color: #059669; } .message-detail-block { margin-top: 12px; display: grid; gap: 8px; } .message-detail-block > strong { color: #0f172a; font-size: 12px; font-weight: 850; } .message-detail-chip-row, .capability-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .message-citation-list, .citation-stack, .action-list { display: grid; gap: 10px; } .message-citation-card, .citation-card, .action-card { padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fbff; } .message-citation-card header, .citation-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .message-citation-card header span, .citation-card header strong, .action-card strong { color: #0f172a; font-size: 13px; font-weight: 850; } .message-citation-card header small, .citation-card header span { color: #64748b; font-size: 11px; font-weight: 700; } .message-citation-card p, .citation-card p, .action-card p, .draft-preview pre { margin: 0; color: #475569; font-size: 12px; line-height: 1.65; } .draft-preview { margin-top: 12px; padding: 12px 14px; border: 1px solid #dbe3ec; border-radius: 16px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); } .draft-preview header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .draft-preview header strong { color: #0f172a; font-size: 13px; font-weight: 850; } .draft-preview header span { color: #b45309; font-size: 12px; font-weight: 800; } .draft-preview pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; } .message-files, .composer-files { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .file-chip { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; } .file-chip.active { background: #eef6ff; color: #2563eb; } .composer { padding: 0 20px 20px; } .hidden-file-input { display: none; } .composer-shell { border: 1px solid #d6e1ea; border-radius: 22px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); overflow: hidden; } .composer-shell textarea { width: 100%; min-height: 84px; resize: none; border: 0; padding: 18px 18px 8px; background: transparent; color: #0f172a; font-size: 15px; line-height: 1.65; } .composer-shell textarea::placeholder { color: #94a3b8; } .composer-shell textarea:focus { outline: none; } .composer-shell textarea:disabled { color: #94a3b8; } .composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 14px; } .composer-tools { display: flex; align-items: center; gap: 10px; } .tool-btn, .send-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 14px; } .tool-btn { background: #f1f5f9; color: #475569; font-size: 20px; } .tool-btn:disabled { opacity: 0.48; cursor: not-allowed; } .composer-tip { color: #94a3b8; font-size: 12px; font-weight: 700; } .send-btn { background: #10b981; color: #fff; font-size: 18px; box-shadow: 0 10px 22px rgba(16, 185, 129, 0.22); } .send-btn:disabled { opacity: 0.48; cursor: not-allowed; box-shadow: none; } .insight-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } .insight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid #eef2f7; } .intent-pill { min-height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 12px; 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: 20px; font-weight: 900; line-height: 1.3; } .insight-head p { margin-top: 6px; color: #64748b; font-size: 13px; line-height: 1.6; } .confidence-card { min-width: 92px; padding: 10px 12px; border-radius: 16px; background: #f8fafc; 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: 22px; font-weight: 900; } .insight-body { min-height: 0; display: grid; align-content: start; gap: 14px; padding: 18px 20px 20px; overflow-y: auto; } .insight-card { padding: 16px; border: 1px solid #e7eef6; border-radius: 20px; background: #fff; } .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; } .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: 13px; 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: 14px; 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-summary { margin: 0; color: #334155; font-size: 13px; line-height: 1.7; } .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-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; } .welcome-grid { display: grid; gap: 12px; } .welcome-card { padding: 14px; border-radius: 18px; background: #f8fafc; } .welcome-card i { color: #10b981; font-size: 20px; } .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); } .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: 1280px) { .assistant-layout { grid-template-columns: 1fr; } .insight-panel { min-height: 320px; } } @media (max-width: 760px) { .assistant-modal { width: 100vw; height: 100vh; border-radius: 0; } .assistant-header { padding: 18px 18px 16px; align-items: flex-start; flex-direction: column; } .assistant-header-actions { width: 100%; justify-content: space-between; } .assistant-layout { padding: 14px; } .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; } .composer { padding: 0 16px 16px; } .composer-foot { align-items: flex-end; } .metric-grid { grid-template-columns: 1fr; } .review-slot-grid, .review-doc-field-grid, .review-mini-grid { grid-template-columns: 1fr; } }