.insight-panel-shell { flex: none; display: flex; width: clamp(300px, 28vw, 420px); min-width: 0; min-height: 0; max-width: 100%; overflow: hidden; transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1); } .insight-panel-shell.collapsed { width: 0; } .insight-panel { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(189, 201, 214, 0.74); border-radius: 16px; background: #ffffff; box-shadow: 0 14px 32px rgba(148, 163, 184, 0.16); } .insight-head { display: grid; gap: 12px; padding: 16px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(180deg, #f8fbff, #ffffff); } .insight-head h3 { margin: 6px 0 0; color: #0f172a; font-size: var(--wb-fs-insight-title, 17px); font-weight: 850; } .insight-head p { margin: 6px 0 0; color: #64748b; font-size: var(--wb-fs-insight-body, 12px); line-height: 1.55; } .insight-body { min-height: 0; display: grid; gap: 12px; align-content: start; padding: 14px; overflow-y: auto; } .intent-pill, .flow-status-chip, .status-pill { min-height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 800; } .confidence-card, .insight-card, .review-side-card, .review-flow-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; } .confidence-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: #f8fbff; } .confidence-card span, .card-head p, .note-block p, .review-side-head p, .review-side-risk-summary, .flow-step-tool, .flow-step-detail, .flow-step-card time { margin: 0; color: #64748b; font-size: var(--wb-fs-insight-body, 12px); line-height: 1.55; } .confidence-card strong, .card-head h4, .note-block strong, .review-side-head strong, .flow-step-card strong, .review-side-metric-copy strong, .review-side-category-copy strong { color: #0f172a; font-weight: 850; } .card-head, .review-side-head, .flow-step-card header, .review-document-switch-head, .review-flow-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .card-head h4 { margin: 0; font-size: var(--wb-fs-insight-h4, 14px); } .note-block { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #f8fbff; } .capability-chip-row, .citation-stack, .knowledge-question-list, .review-flow-list, .review-side-risk-list, .review-document-warning-list { display: grid; gap: 8px; } .risk-chip, .review-document-meta-chip, .review-side-confidence { min-height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 800; } .citation-card, .knowledge-question-btn, .review-side-metric-card, .review-side-category-card, .review-side-risk-item, .flow-step-card, .review-document-preview-card { border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; } .knowledge-question-btn, .review-side-metric-card, .review-side-category-card, .review-side-risk-item { width: 100%; display: grid; gap: 8px; padding: 10px; color: #334155; font: inherit; text-align: left; } .knowledge-question-btn { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; } .knowledge-question-index { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 850; } .review-side-grid, .review-side-category-grid, .review-document-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .review-side-metric-card { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; } .review-side-metric-icon, .review-side-risk-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #eff6ff; color: var(--theme-primary, #3a7ca5); } .review-side-metric-copy, .review-side-category-copy, .review-side-risk-copy { display: grid; gap: 4px; min-width: 0; } .review-side-metric-copy small, .review-side-edit-hint, .review-side-category-copy p { margin: 0; color: #64748b; font-size: 11px; line-height: 1.45; } .review-side-category-card.active { border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.55); background: var(--theme-primary-soft, #eaf4fa); } .review-insight-tools, .review-document-nav, .review-document-meta-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .review-insight-switch-icon-btn, .flow-icon-btn, .review-document-nav-btn, .review-side-save-pill { border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; color: #334155; } .review-insight-switch-icon-btn, .flow-icon-btn, .review-document-nav-btn { width: 32px; height: 32px; display: grid; place-items: center; } .review-insight-switch-icon-btn.active, .review-side-save-pill { border-color: var(--theme-primary, #3a7ca5); background: var(--theme-primary, #3a7ca5); color: #ffffff; } .review-flow-list { position: relative; } .flow-step-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; } .flow-step-rail span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 850; } .flow-step-card { padding: 10px; } .flow-empty-state, .review-side-empty, .review-document-preview-placeholder { display: grid; place-items: center; gap: 8px; padding: 18px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fbff; color: #64748b; text-align: center; } .review-inline-input, .review-document-edit-field input, .review-document-edit-field textarea { width: 100%; min-height: 34px; border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; color: #0f172a; font: inherit; } .review-document-edit-field { display: grid; gap: 6px; } .review-document-edit-field span { color: #64748b; font-size: 11px; font-weight: 800; } .review-document-scroll { display: grid; gap: 10px; } .review-document-preview-card { min-height: 140px; display: grid; place-items: center; overflow: hidden; background: #f8fbff; } .review-document-preview-card img { max-width: 100%; max-height: 240px; object-fit: contain; } .review-side-save-pill { min-height: 34px; padding: 0 12px; font-size: 12px; font-weight: 800; } @media (max-width: 1440px) { .insight-panel-shell:not(.collapsed) { width: 100%; max-height: min(34dvh, 360px); } }