Spaces:
Running
Running
| /* ════════════════════════════════════════════════════════════════ | |
| Collaborative Conversational AI (CCAI) Demo - additive styles on | |
| top of LLMChats3 baseline. | |
| Anything new (multi-participant sidebar, dropdown, expert modal, | |
| table view, orchestrator banners, failsafe banner) lives here. | |
| ════════════════════════════════════════════════════════════════ */ | |
| /* ── Header dropdown (Participants) ────────────────────────────── */ | |
| .ccai-dropdown-wrap { position: relative; } | |
| .ccai-dropdown-backdrop { | |
| display: none; | |
| } | |
| .ccai-dropdown-trigger { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .ccai-dropdown-panel { | |
| position: absolute; | |
| right: 0; | |
| top: calc(100% + 4px); | |
| width: 320px; | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 10px; | |
| box-shadow: var(--shadow-md); | |
| padding: 10px; | |
| z-index: 60; | |
| } | |
| .ccai-dropdown-section { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| padding: 4px 0; | |
| } | |
| .ccai-dropdown-section-title { | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| padding: 4px 6px; | |
| } | |
| .ccai-dropdown-divider { | |
| height: 1px; | |
| background: var(--border-muted); | |
| margin: 4px -10px; | |
| } | |
| .ccai-dropdown-empty { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| font-style: italic; | |
| padding: 4px 8px; | |
| } | |
| .ccai-dropdown-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 10px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background 0.1s; | |
| } | |
| .ccai-dropdown-item:hover { | |
| background: var(--bg-tertiary); | |
| } | |
| .ccai-dropdown-item input[type="checkbox"] { | |
| margin: 0; | |
| flex-shrink: 0; | |
| cursor: pointer; | |
| } | |
| .ccai-dropdown-item-checked { | |
| background: var(--accent-light); | |
| } | |
| .ccai-dropdown-item-disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .ccai-dropdown-item-disabled input[type="checkbox"] { | |
| cursor: not-allowed; | |
| } | |
| .ccai-dropdown-item-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .ccai-dropdown-item-name { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| text-transform: capitalize; | |
| } | |
| .ccai-dropdown-item-sub { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .ccai-dropdown-create-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 10px; | |
| margin-top: 4px; | |
| border: 1px dashed var(--accent-primary); | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--accent-primary); | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .ccai-dropdown-create-btn:hover { | |
| background: var(--accent-light); | |
| } | |
| /* ── Sidebar: participants ─────────────────────────────────────── */ | |
| .ccai-sidebar { | |
| gap: 12px; | |
| } | |
| .ccai-sidebar-header { gap: 4px; display: flex; flex-direction: column; } | |
| .ccai-sidebar-help { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .ccai-participant-card { | |
| border: 1px solid var(--border-primary); | |
| border-radius: 10px; | |
| background: var(--card-bg); | |
| padding: 8px 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| transition: opacity 0.15s, background 0.15s; | |
| } | |
| .ccai-participant-card-off { | |
| opacity: 0.55; | |
| background: var(--bg-secondary); | |
| } | |
| .ccai-participant-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .ccai-participant-row--expanded { | |
| align-items: flex-start; | |
| } | |
| .ccai-participant-row--expanded .ccai-accordion-chevron { | |
| margin-top: 1px; | |
| } | |
| .ccai-participant-row-secondary { | |
| justify-content: flex-end; | |
| } | |
| .ccai-accordion-chevron { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 22px; | |
| height: 22px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| border-radius: 4px; | |
| flex-shrink: 0; | |
| } | |
| .ccai-accordion-chevron:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-tertiary); | |
| } | |
| .ccai-participant-name { | |
| flex: 1; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| text-transform: capitalize; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| min-width: 0; | |
| } | |
| .ccai-participant-name--expanded { | |
| white-space: normal; | |
| overflow: visible; | |
| text-overflow: unset; | |
| line-height: 1.35; | |
| word-break: break-word; | |
| } | |
| .ccai-participant-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .ccai-participant-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 6px 0 2px; | |
| border-top: 1px solid var(--border-muted); | |
| } | |
| .ccai-participant-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .ccai-participant-field-label { | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--text-tertiary); | |
| } | |
| .ccai-participant-field-value { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| word-break: break-word; | |
| } | |
| .ccai-participant-prompt { | |
| margin: 0; | |
| font-size: 11px; | |
| line-height: 1.5; | |
| color: var(--text-secondary); | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-muted); | |
| border-radius: 6px; | |
| padding: 8px 10px; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .ccai-participant-prompt--preview { | |
| display: -webkit-box; | |
| -webkit-box-orient: vertical; | |
| -webkit-line-clamp: 5; | |
| overflow: hidden; | |
| } | |
| .ccai-participant-prompt-toggle { | |
| align-self: flex-start; | |
| margin: 0; | |
| padding: 0; | |
| border: none; | |
| background: none; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--accent-primary, #6366f1); | |
| cursor: pointer; | |
| text-decoration: underline; | |
| text-underline-offset: 2px; | |
| } | |
| .ccai-participant-prompt-toggle:hover { | |
| color: var(--text-primary); | |
| } | |
| /* On/off slider switch */ | |
| .ccai-toggle { | |
| position: relative; | |
| display: inline-block; | |
| width: 36px; | |
| height: 20px; | |
| } | |
| .ccai-toggle input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .ccai-toggle-slider { | |
| position: absolute; | |
| cursor: pointer; | |
| inset: 0; | |
| background: var(--accent-primary); | |
| border-radius: 10px; | |
| transition: background 0.2s; | |
| } | |
| .ccai-toggle-slider::before { | |
| content: ''; | |
| position: absolute; | |
| height: 14px; | |
| width: 14px; | |
| left: 19px; | |
| top: 3px; | |
| background: #fff; | |
| border-radius: 50%; | |
| transition: left 0.2s; | |
| } | |
| .ccai-toggle input:not(:checked) + .ccai-toggle-slider { | |
| background: var(--text-muted); | |
| } | |
| .ccai-toggle input:not(:checked) + .ccai-toggle-slider::before { | |
| left: 3px; | |
| } | |
| .ccai-remove-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 4px 8px; | |
| border: 1px solid #DC2626; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: #DC2626; | |
| font-size: 11px; | |
| } | |
| .ccai-remove-btn:hover { background: #FEE2E2; } | |
| :root[data-theme="dark"] .ccai-remove-btn:hover { background: rgba(220, 38, 38, 0.15); } | |
| .ccai-reenable-btn { font-size: 11px; padding: 4px 8px; } | |
| /* ── Expert Persona modal ──────────────────────────────────────── */ | |
| .ccai-expert-modal { | |
| width: min(760px, 92vw); | |
| max-height: 88vh; | |
| } | |
| .ccai-expert-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .ccai-expert-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .ccai-expert-field label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .ccai-expert-field input, | |
| .ccai-expert-field select, | |
| .ccai-expert-field textarea { | |
| width: 100%; | |
| padding: 8px 10px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 8px; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| } | |
| .ccai-expert-model-field { | |
| min-width: 0; | |
| } | |
| .ccai-expert-model-row { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .ccai-expert-model-row select { | |
| width: 100%; | |
| } | |
| .ccai-suggest-model-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| align-self: flex-start; | |
| white-space: nowrap; | |
| } | |
| .ccai-model-suggestion { | |
| margin-top: 4px; | |
| padding: 10px 12px; | |
| border: 1px solid var(--accent-primary); | |
| border-radius: 8px; | |
| background: var(--accent-light); | |
| } | |
| .ccai-model-suggestion-title { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .ccai-model-suggestion-rationale { | |
| margin: 6px 0 0; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| color: var(--text-secondary); | |
| } | |
| .ccai-model-suggestion-actions { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .ccai-tab-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| border-bottom: 1px solid var(--border-primary); | |
| padding-bottom: 6px; | |
| } | |
| .ccai-tab-row-compact { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| .ccai-expert-input-mode, | |
| .ccai-expert-role-style { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .ccai-expert-field-hint { | |
| margin: 0; | |
| font-size: 11px; | |
| line-height: 1.45; | |
| color: var(--text-tertiary); | |
| } | |
| .ccai-tab-btn { | |
| padding: 6px 12px; | |
| border: 1px solid transparent; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| font-weight: 600; | |
| } | |
| .ccai-tab-btn:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .ccai-tab-btn-active { | |
| background: var(--accent-light); | |
| color: var(--accent-primary); | |
| border-color: var(--accent-primary); | |
| } | |
| .ccai-tab-spacer { flex: 1; } | |
| .ccai-role-style { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| } | |
| .ccai-expert-freeform, | |
| .ccai-expert-structured { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .ccai-expert-freeform .freeform-textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 8px; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| } | |
| .ccai-expert-structured textarea { | |
| resize: vertical; | |
| } | |
| .ccai-expert-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .ccai-expert-prompt { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .ccai-expert-prompt-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .ccai-expert-prompt-header label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .ccai-expert-suggest-message { | |
| margin-top: 4px; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 8px; | |
| background: var(--bg-secondary); | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| line-height: 1.45; | |
| } | |
| .ccai-expert-prompt label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .ccai-expert-prompt textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 8px; | |
| background: var(--bg-secondary); | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| line-height: 1.5; | |
| } | |
| .ccai-expert-error { | |
| background: var(--error-bg); | |
| border: 1px solid var(--error-border); | |
| color: var(--error-text); | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| font-size: 12px; | |
| } | |
| .ccai-expert-footer { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| border-top: 1px solid var(--border-primary); | |
| padding-top: 12px; | |
| } | |
| /* ── Table view ────────────────────────────────────────────────── */ | |
| .ccai-table-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| } | |
| .ccai-table-card { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 12px; | |
| width: min(1100px, 95vw); | |
| max-height: 90vh; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| } | |
| .ccai-table-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .ccai-table-header h2 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .ccai-table-body { | |
| padding: 16px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| overflow: hidden; | |
| } | |
| .ccai-table-question, | |
| .ccai-table-final { | |
| background: var(--bg-secondary); | |
| border-radius: 8px; | |
| padding: 10px 12px; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .ccai-table-question strong, | |
| .ccai-table-final strong { | |
| display: block; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| color: var(--text-tertiary); | |
| letter-spacing: 0.04em; | |
| margin-bottom: 4px; | |
| } | |
| .ccai-table-scroll { | |
| overflow: auto; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 8px; | |
| } | |
| .ccai-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12px; | |
| color: var(--text-primary); | |
| table-layout: fixed; | |
| } | |
| .ccai-table th, | |
| .ccai-table td { | |
| border: 1px solid var(--border-primary); | |
| padding: 8px 10px; | |
| vertical-align: top; | |
| text-align: left; | |
| } | |
| .ccai-table th { | |
| background: var(--bg-secondary); | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| font-size: 10px; | |
| letter-spacing: 0.04em; | |
| color: var(--text-tertiary); | |
| position: sticky; | |
| top: 0; | |
| } | |
| .ccai-table th:first-child, | |
| .ccai-table td:first-child { | |
| width: 15%; | |
| } | |
| .ccai-table th:nth-child(n + 2), | |
| .ccai-table td:nth-child(n + 2) { | |
| width: 21.25%; | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| } | |
| .ccai-table-name { | |
| white-space: nowrap; | |
| font-weight: 600; | |
| } | |
| .ccai-table-name small { | |
| display: block; | |
| font-weight: 400; | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| /* ── Credential Summary modal ────────────────────────────────────── | |
| Surfaces the orchestrator's per-participant assessment built after | |
| Phase 1 (concurrent per participant). Reuses the table | |
| modal's overlay/card chrome for visual consistency. | |
| ──────────────────────────────────────────────────────────────── */ | |
| .ccai-credentials-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| } | |
| .ccai-credentials-card { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 12px; | |
| width: min(880px, 95vw); | |
| max-height: 90vh; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| } | |
| .ccai-credentials-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border-primary); | |
| } | |
| .ccai-credentials-header h2 { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .ccai-credentials-subtitle { | |
| margin-top: 4px; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| line-height: 1.4; | |
| max-width: 560px; | |
| } | |
| .ccai-rate-limit-card { | |
| width: min(480px, 92vw); | |
| } | |
| .ccai-rate-limit-body { | |
| padding: 16px 20px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--text-secondary); | |
| } | |
| .ccai-rate-limit-body a { | |
| color: var(--accent-primary); | |
| text-decoration: none; | |
| } | |
| .ccai-rate-limit-body a:hover { | |
| text-decoration: underline; | |
| } | |
| .ccai-rate-limit-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| padding: 12px 20px 16px; | |
| border-top: 1px solid var(--border-primary); | |
| } | |
| .ccai-credentials-question { | |
| margin: 0 20px; | |
| padding: 10px 12px; | |
| background: var(--bg-secondary); | |
| border-radius: 8px; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .ccai-credentials-question strong { | |
| display: block; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| color: var(--text-tertiary); | |
| letter-spacing: 0.04em; | |
| margin-bottom: 4px; | |
| } | |
| .ccai-credentials-body { | |
| padding: 16px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| overflow-y: auto; | |
| } | |
| .ccai-credentials-empty { | |
| padding: 24px; | |
| text-align: center; | |
| font-size: 13px; | |
| color: var(--text-tertiary); | |
| border: 1px dashed var(--border-primary); | |
| border-radius: 8px; | |
| } | |
| .ccai-credential-card { | |
| padding: 12px 14px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 10px; | |
| background: var(--bg-secondary); | |
| } | |
| .ccai-credential-card-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-bottom: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .ccai-credential-name { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .ccai-credibility-wrap { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-left: auto; | |
| } | |
| .ccai-credibility-label { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--text-tertiary); | |
| } | |
| .ccai-credibility-bar { | |
| width: 120px; | |
| height: 6px; | |
| background: var(--border-primary); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .ccai-credibility-fill { | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| var(--accent-primary, #6366F1), | |
| var(--accent-primary, #6366F1) | |
| ); | |
| transition: width 0.3s ease; | |
| } | |
| .ccai-credibility-num { | |
| font-size: 12px; | |
| font-weight: 600; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--text-secondary); | |
| min-width: 32px; | |
| text-align: right; | |
| } | |
| .ccai-credential-row { | |
| display: grid; | |
| grid-template-columns: 110px 1fr; | |
| gap: 8px; | |
| padding: 4px 0; | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| .ccai-credential-row-label { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--text-tertiary); | |
| font-weight: 600; | |
| padding-top: 2px; | |
| } | |
| .ccai-credential-row-value { | |
| color: var(--text-primary); | |
| } | |
| @media (max-width: 600px) { | |
| .ccai-credentials-card { | |
| max-height: 100vh; | |
| border-radius: 0; | |
| width: 100vw; | |
| } | |
| .ccai-credential-row { | |
| grid-template-columns: 1fr; | |
| gap: 2px; | |
| } | |
| .ccai-credibility-bar { | |
| width: 80px; | |
| } | |
| } | |
| /* ── Orchestrator messages ─────────────────────────────────────── */ | |
| .ccai-orchestrator-msg { | |
| text-align: center; | |
| font-style: italic; | |
| color: var(--text-secondary); | |
| background: var(--bg-secondary); | |
| border: 1px dashed var(--border-primary); | |
| border-radius: 12px; | |
| padding: 10px 16px; | |
| margin: 6px auto; | |
| max-width: 720px; | |
| font-size: 13px; | |
| } | |
| .ccai-orchestrator-msg-label { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| font-weight: 700; | |
| color: var(--text-tertiary); | |
| margin-bottom: 4px; | |
| font-style: normal; | |
| } | |
| .ccai-orchestrator-msg-body p:last-child { margin-bottom: 0; } | |
| .ccai-orchestrator-msg-body :where(p, li, ol, ul, blockquote, td, th) { | |
| color: inherit; | |
| } | |
| .ccai-orchestrator-msg-report { | |
| background: var(--accent-light); | |
| border-style: solid; | |
| border-color: var(--accent-primary); | |
| font-style: normal; | |
| text-align: left; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .ccai-orchestrator-msg-report .ccai-orchestrator-msg-label { | |
| color: var(--accent-primary); | |
| } | |
| /* ── Failsafe pause banner ─────────────────────────────────────── */ | |
| .ccai-failsafe-banner { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: #FEF3C7; | |
| border: 1px solid #FCD34D; | |
| border-radius: 12px; | |
| padding: 12px 14px; | |
| color: #92400E; | |
| margin: 8px 0; | |
| } | |
| :root[data-theme="dark"] .ccai-failsafe-banner { | |
| background: rgba(217, 119, 6, 0.15); | |
| border-color: rgba(252, 211, 77, 0.5); | |
| color: #FBBF24; | |
| } | |
| .ccai-failsafe-banner > div:first-child { | |
| flex: 1; | |
| } | |
| .ccai-failsafe-title { | |
| font-weight: 700; | |
| font-size: 13px; | |
| margin-bottom: 2px; | |
| } | |
| .ccai-failsafe-text { | |
| font-size: 12px; | |
| opacity: 0.85; | |
| } | |
| /* ── Active-question chip (next to Stop Chat) ─────────────────── */ | |
| /* The chip caps at roughly two lines tall and scrolls vertically for | |
| longer prompts. The full prompt is also exposed via the title | |
| attribute for hover tooltips. */ | |
| .ccai-active-question { | |
| flex: 1; | |
| min-width: 0; | |
| max-height: 60px; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 8px; | |
| background: var(--bg-secondary); | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| line-height: 1.4; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| overscroll-behavior: contain; | |
| } | |
| .ccai-active-question-label { | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-tertiary); | |
| margin-right: 6px; | |
| } | |
| .ccai-active-question-text { | |
| color: var(--text-secondary); | |
| font-style: italic; | |
| } | |
| /* ── Conversation threading & addressing cues ───────────────────── | |
| Lightweight visual aids that help a human reader follow who is | |
| speaking to whom. Backed by the message's `addressed_to` field | |
| (one participant id) and `replying_to` field (list of asker ids | |
| the speaker had open threads with at turn start). | |
| ────────────────────────────────────────────────────────────────── */ | |
| /* Indent + thread line when a participant message is a direct reply | |
| to the immediately previous participant message. We don't fully | |
| nest replies because N-participant chats turn into trees fast; | |
| this is a single-level visual hint, not full threading. */ | |
| .ccai-message-row.ccai-message-row-reply { | |
| margin-left: 28px; | |
| padding-left: 12px; | |
| position: relative; | |
| } | |
| .ccai-message-row.ccai-message-row-reply::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 6px; | |
| bottom: 6px; | |
| width: 2px; | |
| border-radius: 1px; | |
| background: var(--border-primary); | |
| opacity: 0.6; | |
| } | |
| /* "Replying to: X, Y" pill above the bubble, colored with the | |
| speaker's tone. Mirrors the pending-thread list the orchestrator | |
| showed the speaker at turn-start. Stays small and unobtrusive. */ | |
| .ccai-replying-to-pill { | |
| display: inline-block; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| border: 1px solid; | |
| background: var(--card-bg); | |
| margin-bottom: 6px; | |
| white-space: nowrap; | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* "→ Addressee" chip in the speaker line. The addressee name is a | |
| clickable button that scrolls the chat to that participant's most | |
| recent message before this one. */ | |
| .ccai-addressee-wrap { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| margin-left: 8px; | |
| font-weight: 500; | |
| opacity: 0.9; | |
| } | |
| .ccai-addressee-arrow { | |
| display: inline-block; | |
| vertical-align: middle; | |
| opacity: 0.7; | |
| } | |
| .ccai-addressee-link { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| padding: 0; | |
| font: inherit; | |
| font-weight: 600; | |
| text-decoration: underline; | |
| text-decoration-style: dotted; | |
| text-decoration-color: currentColor; | |
| text-underline-offset: 2px; | |
| transition: text-decoration-style 0.1s ease, opacity 0.1s ease; | |
| } | |
| .ccai-addressee-link:hover { | |
| text-decoration-style: solid; | |
| opacity: 1; | |
| } | |
| .ccai-addressee-link:focus-visible { | |
| outline: 2px solid currentColor; | |
| outline-offset: 2px; | |
| border-radius: 2px; | |
| } | |
| /* Flash highlight applied to the scroll-target when the user clicks an | |
| addressee chip. Makes the destination obvious for a beat. */ | |
| .ccai-flash-highlight .message-bubble { | |
| animation: ccai-flash 1.4s ease-out; | |
| } | |
| @keyframes ccai-flash { | |
| 0% { | |
| box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.55); | |
| } | |
| 60% { | |
| box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); | |
| } | |
| } | |
| /* ── Stepper ───────────────────────────────────────────────────── */ | |
| .ccai-stepper-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| /* 22px left padding matches .dev-panel-row indentation so the | |
| stepper hangs under the "Max participants" category label | |
| consistently with every other category's items. */ | |
| padding: 4px 10px 8px 22px; | |
| } | |
| .ccai-stepper-btn { | |
| width: 24px; | |
| height: 24px; | |
| padding: 0; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .ccai-stepper-val { | |
| font-weight: 600; | |
| min-width: 20px; | |
| text-align: center; | |
| } | |
| /* ── Responsive tweaks ─────────────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| .ccai-expert-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .ccai-dropdown-panel { | |
| width: min(320px, calc(100vw - 24px)); | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .ccai-dropdown-backdrop { | |
| display: block; | |
| position: fixed; | |
| inset: 0; | |
| border: none; | |
| padding: 0; | |
| margin: 0; | |
| background: rgba(0, 0, 0, 0.45); | |
| z-index: 59; | |
| cursor: default; | |
| } | |
| .ccai-dropdown-panel { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| top: auto; | |
| width: 100%; | |
| max-width: none; | |
| max-height: min(85vh, calc(100dvh - 64px)); | |
| border-radius: 16px 16px 0 0; | |
| border-bottom: none; | |
| padding-bottom: max(10px, env(safe-area-inset-bottom)); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .ccai-table-card { | |
| max-height: 100vh; | |
| border-radius: 0; | |
| width: 100vw; | |
| } | |
| } | |
| /* ── Conversation limits modal ──────────────────────────────────── | |
| Re-uses .ccai-credentials-overlay/.ccai-credentials-card/.ccai- | |
| credentials-header/.ccai-credentials-body for the shell so the | |
| look matches the credential summary modal. The classes below | |
| style the per-section list and per-field stepper row. */ | |
| .ccai-limits-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| padding: 12px 14px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 10px; | |
| } | |
| .ccai-limits-group + .ccai-limits-group { | |
| margin-top: 4px; | |
| } | |
| .ccai-limits-group-title { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| border-bottom: 1px solid var(--border-primary); | |
| padding-bottom: 6px; | |
| margin-bottom: 2px; | |
| } | |
| .ccai-limit-row { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| padding: 6px 0; | |
| } | |
| .ccai-limit-row + .ccai-limit-row { | |
| border-top: 1px dashed var(--border-primary); | |
| padding-top: 10px; | |
| } | |
| .ccai-limit-row-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .ccai-limit-label { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .ccai-limit-stepper { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ccai-limit-input { | |
| width: 64px; | |
| padding: 4px 6px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 6px; | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| text-align: right; | |
| } | |
| .ccai-limit-range { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .ccai-limit-reset { | |
| font-size: 12px; | |
| background: transparent; | |
| border: 1px solid var(--border-primary); | |
| color: var(--text-secondary); | |
| padding: 2px 8px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| } | |
| .ccai-limit-reset:hover { | |
| background: var(--card-bg); | |
| color: var(--text-primary); | |
| } | |
| .ccai-limit-help { | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| line-height: 1.45; | |
| } | |
| /* ── Auto-select participants (dropdown + sidebar placeholder) ──── */ | |
| .ccai-dropdown-autoselect { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| padding: 8px 10px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 8px; | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .ccai-dropdown-autoselect:hover { | |
| border-color: var(--accent-primary, var(--text-primary)); | |
| } | |
| .ccai-dropdown-autoselect-on { | |
| background: var(--accent-primary, var(--bg-primary)); | |
| color: var(--bg-primary, var(--text-primary)); | |
| border-color: transparent; | |
| } | |
| .ccai-dropdown-autoselect-help { | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| padding: 6px 4px 0; | |
| line-height: 1.4; | |
| } | |
| .ccai-dropdown-section-muted { | |
| opacity: 0.55; | |
| pointer-events: none; | |
| } | |
| .ccai-sidebar-autoselect-empty { | |
| margin: 12px; | |
| padding: 12px; | |
| border: 1px dashed var(--border-primary); | |
| border-radius: 8px; | |
| color: var(--text-secondary); | |
| font-size: 12.5px; | |
| line-height: 1.45; | |
| } | |
| .ccai-sidebar-autoselect-empty strong { | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| } | |
| /* ── Prompt catalog modal ───────────────────────────────────────── | |
| Re-uses .ccai-credentials-overlay/.ccai-credentials-card shell. | |
| The classes below style the per-group sections and per-item | |
| purpose / variables / template blocks. */ | |
| .ccai-prompt-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| padding: 12px 14px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 10px; | |
| } | |
| .ccai-prompt-group + .ccai-prompt-group { | |
| margin-top: 4px; | |
| } | |
| .ccai-prompt-group-title { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| border-bottom: 1px solid var(--border-primary); | |
| padding-bottom: 6px; | |
| } | |
| .ccai-prompt-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 8px 0; | |
| } | |
| .ccai-prompt-item + .ccai-prompt-item { | |
| border-top: 1px dashed var(--border-primary); | |
| padding-top: 12px; | |
| } | |
| .ccai-prompt-item-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .ccai-prompt-item-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .ccai-prompt-copy-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 12px; | |
| padding: 3px 8px; | |
| background: transparent; | |
| border: 1px solid var(--border-primary); | |
| color: var(--text-secondary); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| } | |
| .ccai-prompt-copy-btn:hover { | |
| background: var(--card-bg); | |
| color: var(--text-primary); | |
| } | |
| .ccai-prompt-purpose { | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| line-height: 1.45; | |
| } | |
| .ccai-prompt-vars { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .ccai-prompt-vars code { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 4px; | |
| padding: 1px 4px; | |
| font-size: 11.5px; | |
| } | |
| .ccai-prompt-template { | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-primary); | |
| border-radius: 6px; | |
| padding: 10px 12px; | |
| margin: 0; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| color: var(--text-primary); | |
| white-space: pre-wrap; | |
| overflow-x: auto; | |
| max-height: 280px; | |
| overflow-y: auto; | |
| } | |
| /* ════════════════════════════════════════════════════════════════ | |
| Human Participant | |
| Styles for the in-the-loop human: add/edit modal, sidebar entry, | |
| in-chat input slot, lower-screen attention cue, green-accent bubble, | |
| and the inline edit affordance on the human's credential row. | |
| ════════════════════════════════════════════════════════════════ */ | |
| /* ── Add a Human Participant button (header) ───────────────────── */ | |
| .ccai-human-add-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| white-space: nowrap; | |
| } | |
| /* Header "Table View" button — links to the same Summary Table modal | |
| the Settings menu opens, so users don't have to dig through a menu | |
| to view it during/after a chat. */ | |
| .ccai-table-view-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| white-space: nowrap; | |
| } | |
| .ccai-human-add-btn-active { | |
| border-color: #16A34A; | |
| color: #16A34A; | |
| } | |
| [data-theme="dark"] .ccai-human-add-btn-active { | |
| border-color: #4ADE80; | |
| color: #4ADE80; | |
| } | |
| /* ── Human Participant modal (Add / Edit) ──────────────────────── */ | |
| .ccai-human-modal-card { | |
| width: min(640px, 92vw); | |
| } | |
| .ccai-human-modal-body { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| padding: 16px 20px; | |
| } | |
| .ccai-human-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .ccai-human-field-label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .ccai-human-input { | |
| padding: 8px 10px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 6px; | |
| background: var(--card-bg); | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| } | |
| .ccai-human-input:focus { | |
| outline: none; | |
| border-color: #16A34A; | |
| box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); | |
| } | |
| .ccai-human-summary-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .ccai-human-summary { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 6px; | |
| background: var(--card-bg); | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| font-family: inherit; | |
| line-height: 1.5; | |
| resize: vertical; | |
| min-height: 160px; | |
| box-sizing: border-box; | |
| } | |
| .ccai-human-summary:focus { | |
| outline: none; | |
| border-color: #16A34A; | |
| box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); | |
| } | |
| .ccai-human-summary-help { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| font-style: italic; | |
| } | |
| .ccai-human-ai-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| white-space: nowrap; | |
| } | |
| .ccai-human-ai-panel { | |
| border: 1px solid #16A34A; | |
| background: rgba(22, 163, 74, 0.04); | |
| border-radius: 8px; | |
| padding: 12px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| [data-theme="dark"] .ccai-human-ai-panel { | |
| background: rgba(74, 222, 128, 0.06); | |
| border-color: #4ADE80; | |
| } | |
| .ccai-human-ai-counter { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: #16A34A; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| [data-theme="dark"] .ccai-human-ai-counter { | |
| color: #4ADE80; | |
| } | |
| .ccai-human-ai-stop { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| background: transparent; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 4px; | |
| padding: 2px 6px; | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| } | |
| .ccai-human-ai-stop:hover { | |
| border-color: var(--text-secondary); | |
| color: var(--text-primary); | |
| } | |
| .ccai-human-ai-turn { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| font-size: 12.5px; | |
| padding-bottom: 6px; | |
| border-bottom: 1px dashed var(--border-primary); | |
| } | |
| .ccai-human-ai-q { | |
| color: var(--text-secondary); | |
| font-style: italic; | |
| } | |
| .ccai-human-ai-a { | |
| color: var(--text-primary); | |
| } | |
| .ccai-human-ai-current-q { | |
| font-size: 13px; | |
| color: var(--text-primary); | |
| background: var(--card-bg); | |
| border-left: 3px solid #16A34A; | |
| padding: 6px 10px; | |
| border-radius: 4px; | |
| } | |
| .ccai-human-ai-answer { | |
| width: 100%; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 6px; | |
| background: var(--card-bg); | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 13px; | |
| padding: 8px 10px; | |
| box-sizing: border-box; | |
| resize: vertical; | |
| } | |
| .ccai-human-ai-answer:focus { | |
| outline: none; | |
| border-color: #16A34A; | |
| box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); | |
| } | |
| .ccai-human-ai-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .ccai-human-error { | |
| font-size: 12.5px; | |
| color: #DC2626; | |
| background: rgba(220, 38, 38, 0.08); | |
| border: 1px solid rgba(220, 38, 38, 0.3); | |
| border-radius: 6px; | |
| padding: 6px 10px; | |
| } | |
| .ccai-human-modal-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| padding: 12px 20px 16px 20px; | |
| border-top: 1px solid var(--border-primary); | |
| } | |
| .ccai-human-modal-footer-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ccai-human-remove { | |
| color: #DC2626; | |
| border-color: rgba(220, 38, 38, 0.4); | |
| } | |
| .ccai-human-remove:hover { | |
| background: rgba(220, 38, 38, 0.06); | |
| border-color: #DC2626; | |
| } | |
| /* ── Sidebar: Human participant card ──────────────────────────── */ | |
| .ccai-participant-card-human { | |
| border-left: 4px solid #16A34A; | |
| } | |
| [data-theme="dark"] .ccai-participant-card-human { | |
| border-left-color: #4ADE80; | |
| } | |
| .ccai-participant-human-tag { | |
| display: inline-block; | |
| margin-left: 8px; | |
| padding: 1px 6px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: #16A34A; | |
| background: rgba(22, 163, 74, 0.1); | |
| border-radius: 4px; | |
| } | |
| [data-theme="dark"] .ccai-participant-human-tag { | |
| color: #4ADE80; | |
| background: rgba(74, 222, 128, 0.12); | |
| } | |
| /* ── In-chat human input slot ─────────────────────────────────── */ | |
| .ccai-human-slot { | |
| display: flex; | |
| align-items: stretch; | |
| margin: 16px 0; | |
| border-radius: 10px; | |
| background: var(--card-bg); | |
| border: 2px solid #16A34A; | |
| box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12); | |
| overflow: hidden; | |
| animation: ccai-human-slot-pop 0.25s ease-out; | |
| } | |
| @keyframes ccai-human-slot-pop { | |
| from { transform: scale(0.985); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| .ccai-human-slot-accent { | |
| width: 6px; | |
| background: #16A34A; | |
| flex-shrink: 0; | |
| animation: ccai-human-pulse-accent 1.6s ease-in-out infinite; | |
| } | |
| @keyframes ccai-human-pulse-accent { | |
| 0% { background: #16A34A; } | |
| 50% { background: #4ADE80; } | |
| 100% { background: #16A34A; } | |
| } | |
| .ccai-human-slot-body { | |
| flex: 1; | |
| padding: 12px 14px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .ccai-human-slot-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13px; | |
| } | |
| .ccai-human-slot-name { | |
| font-weight: 700; | |
| color: #16A34A; | |
| } | |
| [data-theme="dark"] .ccai-human-slot-name { | |
| color: #4ADE80; | |
| } | |
| .ccai-human-slot-pulse { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #16A34A; | |
| box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); | |
| animation: ccai-human-pulse-dot 1.4s ease-in-out infinite; | |
| } | |
| @keyframes ccai-human-pulse-dot { | |
| 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); } | |
| 70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } | |
| } | |
| .ccai-human-slot-prompt { | |
| color: var(--text-secondary); | |
| font-style: italic; | |
| } | |
| .ccai-human-slot-context { | |
| font-size: 12.5px; | |
| color: var(--text-secondary); | |
| background: rgba(22, 163, 74, 0.06); | |
| border-left: 3px solid rgba(22, 163, 74, 0.6); | |
| padding: 6px 10px; | |
| border-radius: 4px; | |
| } | |
| .ccai-human-slot-textarea { | |
| width: 100%; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 6px; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 14px; | |
| line-height: 1.45; | |
| padding: 10px 12px; | |
| resize: vertical; | |
| min-height: 80px; | |
| box-sizing: border-box; | |
| } | |
| .ccai-human-slot-textarea:focus { | |
| outline: none; | |
| border-color: #16A34A; | |
| box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); | |
| } | |
| .ccai-human-slot-actions { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| } | |
| .ccai-human-slot-hint { | |
| font-size: 11.5px; | |
| color: var(--text-tertiary); | |
| } | |
| .ccai-human-slot-actions-right { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| /* ── Bubble accent for the human's posted messages ────────────── */ | |
| .ccai-message-row-human .ccai-bubble { | |
| border-left: 4px solid #16A34A ; | |
| padding-left: 12px; | |
| } | |
| [data-theme="dark"] .ccai-message-row-human .ccai-bubble { | |
| border-left-color: #4ADE80 ; | |
| } | |
| /* ── Fixed-position lower-screen "waiting for your input" cue ──── */ | |
| .ccai-human-indicator { | |
| position: fixed; | |
| bottom: 18px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 18px; | |
| background: #16A34A; | |
| color: #ffffff; | |
| border: none; | |
| border-radius: 999px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| box-shadow: | |
| 0 8px 22px rgba(22, 163, 74, 0.35), | |
| 0 0 0 0 rgba(22, 163, 74, 0.5); | |
| cursor: pointer; | |
| z-index: 80; | |
| animation: ccai-human-indicator-pulse 1.8s ease-in-out infinite; | |
| } | |
| [data-theme="dark"] .ccai-human-indicator { | |
| background: #22C55E; | |
| } | |
| @keyframes ccai-human-indicator-pulse { | |
| 0% { box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35), 0 0 0 0 rgba(22, 163, 74, 0.5); } | |
| 60% { box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35), 0 0 0 14px rgba(22, 163, 74, 0); } | |
| 100% { box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35), 0 0 0 0 rgba(22, 163, 74, 0); } | |
| } | |
| .ccai-human-indicator:hover { | |
| background: #15803D; | |
| } | |
| [data-theme="dark"] .ccai-human-indicator:hover { | |
| background: #16A34A; | |
| } | |
| .ccai-human-indicator-arrow { | |
| animation: ccai-human-indicator-arrow-bob 1.4s ease-in-out infinite; | |
| } | |
| @keyframes ccai-human-indicator-arrow-bob { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(3px); } | |
| } | |
| /* ── CredentialSummaryModal: human row + inline edit ──────────── */ | |
| .ccai-credential-card-human { | |
| border-left: 4px solid #16A34A; | |
| } | |
| [data-theme="dark"] .ccai-credential-card-human { | |
| border-left-color: #4ADE80; | |
| } | |
| .ccai-credential-human-tag { | |
| display: inline-block; | |
| margin-left: 8px; | |
| padding: 1px 6px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: #16A34A; | |
| background: rgba(22, 163, 74, 0.1); | |
| border-radius: 4px; | |
| vertical-align: middle; | |
| } | |
| [data-theme="dark"] .ccai-credential-human-tag { | |
| color: #4ADE80; | |
| background: rgba(74, 222, 128, 0.12); | |
| } | |
| .ccai-credential-edit-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| margin-left: 8px; | |
| } | |
| .ccai-credential-card-editing { | |
| background: rgba(22, 163, 74, 0.04); | |
| } | |
| [data-theme="dark"] .ccai-credential-card-editing { | |
| background: rgba(74, 222, 128, 0.06); | |
| } | |
| .ccai-credential-edit-name { | |
| padding: 4px 8px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 4px; | |
| background: var(--card-bg); | |
| color: var(--text-primary); | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-left: 0; | |
| } | |
| .ccai-credential-row-edit { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .ccai-credential-row-input { | |
| width: 100%; | |
| padding: 6px 8px; | |
| border: 1px solid var(--border-primary); | |
| border-radius: 4px; | |
| background: var(--card-bg); | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 13px; | |
| resize: vertical; | |
| box-sizing: border-box; | |
| } | |
| .ccai-credential-row-input-num { | |
| width: 90px; | |
| } | |
| .ccai-credential-edit-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| margin-top: 8px; | |
| } | |