:root { --elly-teal-bg: #E6F3F1; --elly-teal-text: #16756E; --elly-coral-text: #F05A28; --elly-coral-bg: #FFEAE1; --elly-blue-text: #1C74A6; --elly-blue-bg: #E8F3FA; --elly-purple-text: #7A5BA8; --elly-purple-bg: #F0EAF7; --elly-coral-bg: #FFEAE1; --elly-coral-text: #F05A28; --elly-dark-teal-bg: #0A625C; } .elly-icon-circle { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #ddd; background: #ddd; } .elly-btn-available, .elly-btn-action, .elly-btn-document, .elly-btn-trend { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .elly-btn-dark, .elly-btn-dark:hover, .elly-btn-dark:focus, .elly-btn-dark:active { background-color: var(--elly-dark-teal-bg) !important; color: #fff !important; white-space: nowrap; } .elly-btn-available img, .elly-btn-action img, .elly-btn-document img, .elly-btn-trend img { width: 1.5em; height: 1.5em; } .elly-btn-available, .elly-btn-available:hover, .elly-btn-available:focus, .elly-btn-available:active { background: var(--elly-teal-bg) !important; color: var(--elly-teal-text) !important; } .elly-btn-action, .elly-btn-action:hover, .elly-btn-action:focus, .elly-btn-action:active { background: var(--elly-coral-bg) !important; color: var(--elly-coral-text) !important; } .elly-btn-document, .elly-btn-document:hover, .elly-btn-document:focus, .elly-btn-document:active { background: var(--elly-blue-bg) !important; color: var(--elly-blue-text) !important; } .elly-btn-trend, .elly-btn-trend:hover, .elly-btn-trend:focus, .elly-btn-trend:active { background: var(--elly-purple-bg) !important; color: var(--elly-purple-text) !important; } .elly-alert-review-required { font-size: .8em; background-color: var(--elly-coral-bg); color: var(--elly-coral-text); font-weight: 600; border-radius: 100vw; padding: 4px 8px; } .elly-alert-review-approved { font-size: .8em; background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-weight: 600; border-radius: 100vw; padding: 4px 8px; } .elly-badge-available { display: inline-block; width: 2em; height: 2em; overflow: hidden; background-color: var(--elly-teal-bg); background-image: url(/images/svg/ai/available.svg); background-repeat: no-repeat; background-position: center; background-size: 1.25em 1.2em; border-radius: 100vw; } .elly-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 800; color: #0A625C; background: #F1FAF8; border: 1px solid #DDE9E6; } .elly-suggestion { border: 1px solid #DDE9E6; border-left: 4px solid #20887F; background: linear-gradient(90deg, #F1FAF8, #FFFFFF); border-radius: 14px; padding: 16px; } /* ------------------------------------------------------------------------- AI feature gating. When the current user lacks the "AI / Access AI Features" claim, _Layout adds `ai-disabled` to ; hide every AI (Elly) affordance. The server-side [Authorize(Policy="AIAccess")] guards are the real security boundary — this just keeps the UI clean. Dynamic assessment-form AI buttons are additionally skipped in assessmentIntegration.js. ------------------------------------------------------------------------- */ body.ai-disabled .elly-btn-available, body.ai-disabled .elly-btn-dark, body.ai-disabled .tp-ask-elly, body.ai-disabled .pn-ask-elly-btn, body.ai-disabled .pn-ask-elly-panel, body.ai-disabled #pnGenerateNoteBtn, body.ai-disabled #pnGeneratePreviewPanel, body.ai-disabled #pnNarrativePreviewPanel, body.ai-disabled #pnTpEllyBox, body.ai-disabled #ellyAskPanel { display: none !important; }