/* Styles for the AI assistant drawer. The drawer DOM is created by ChatBot.razor.js (appended to ), so it lives OUTSIDE Blazor's scoped-CSS system — these rules must stay in a global, non-scoped stylesheet. Layout: a full-height panel pinned to the right viewport edge, sliding in over a dimmed scrim. Open/close is driven by the `chatbot-open` class the JS toggles on both elements. */ .chatbot-scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(11, 5, 26, 0.4); opacity: 0; transition: opacity 0.28s ease; } .chatbot-scrim.chatbot-open { opacity: 1; } .chatbot-window { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100; display: flex; flex-direction: column; width: 424px; max-width: 100vw; height: 100dvh; background: var(--Grey-50, #F8F8F9); border-left: 1px solid rgba(110, 51, 255, 0.14); box-shadow: -28px 0 64px -24px rgba(11, 5, 26, 0.45); overflow: hidden; font-size: 14px; font-family: 'Arbeit', sans-serif; color: var(--Grey-950, #121213); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1); } .chatbot-window.chatbot-open { transform: translateX(0); } .chatbot-window button, .chatbot-window textarea { font-family: inherit; } /* ── Header ─────────────────────────────────────────────────────────────────────────────── */ .chatbot-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: radial-gradient(140% 200% at 90% -40%, var(--Purple-750, #371A80) 0%, var(--Purple-900, #160A33) 52%, var(--Purple-950, #0B051A) 100%); color: var(--White-0, #FFFFFF); } .chatbot-identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .chatbot-avatar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--Purple-500, #6E33FF); color: var(--White-0, #FFFFFF); font-size: 16px; box-shadow: 0 0 18px rgba(110, 51, 255, 0.55); } .chatbot-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .chatbot-title { font-family: 'Worka-display', 'Arbeit', sans-serif; font-size: 16px; line-height: 1.2; letter-spacing: 0.01em; } .chatbot-close { flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; color: rgba(255, 255, 255, 0.65); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .chatbot-close:hover { background: rgba(255, 255, 255, 0.12); color: var(--White-0, #FFFFFF); } /* ── Conversation body ──────────────────────────────────────────────────────────────────── */ .chatbot-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, var(--Purple-50, #F0EBFF) 0%, var(--Grey-50, #F8F8F9) 140px); } .chatbot-body::-webkit-scrollbar { width: 8px; } .chatbot-body::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--Grey-300, #D3D4D9); } .chatbot-msg { max-width: 84%; padding: 10px 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; animation: chatbot-msg-in 0.24s ease both; } @keyframes chatbot-msg-in { from { opacity: 0; transform: translateY(6px); } } .chatbot-msg-greeting, .chatbot-msg-agent { align-self: flex-start; border-radius: 14px 14px 14px 4px; background: var(--White-0, #FFFFFF); border: 1px solid var(--Grey-150, #E9EAEC); box-shadow: 0 2px 6px -2px rgba(11, 5, 26, 0.08); color: var(--Grey-950, #121213); } .chatbot-msg-user { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--Purple-500, #6E33FF); box-shadow: 0 4px 12px -4px rgba(110, 51, 255, 0.5); color: var(--White-0, #FFFFFF); } .chatbot-msg-error { align-self: center; max-width: 90%; background: transparent; color: #cc4041; font-size: 13px; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .chatbot-msg-error::before, .chatbot-relaunch-error::before { content: ''; flex: 0 0 auto; width: 14px; height: 14px; background-image: url('../img/V2/ActionItems/attention-required.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; } /* ── Suggested prompts ──────────────────────────────────────────────────────────────────── */ .chatbot-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; animation: chatbot-msg-in 0.24s ease 0.08s both; } .chatbot-chip { padding: 8px 14px; border: 1px solid var(--Purple-200, #C5ADFF); border-radius: 999px; background: var(--White-0, #FFFFFF); color: var(--Purple-650, #4D24B3); font-size: 13px; line-height: 1.2; text-align: left; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .chatbot-chip:hover { background: var(--Purple-500, #6E33FF); border-color: var(--Purple-500, #6E33FF); color: var(--White-0, #FFFFFF); transform: translateY(-1px); } /* ── Launch / relaunch states ───────────────────────────────────────────────────────────── */ .chatbot-launch { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--Grey-700, #6D6E73); text-align: center; } .chatbot-spinner { width: 28px; height: 28px; border: 3px solid var(--Purple-100, #E2D6FF); border-top-color: var(--Purple-500, #6E33FF); border-radius: 50%; animation: chatbot-spin 0.8s linear infinite; } .chatbot-launch-text { font-size: 13px; } @keyframes chatbot-spin { to { transform: rotate(360deg); } } .chatbot-relaunch { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--Grey-700, #6D6E73); text-align: center; } .chatbot-relaunch-btn { width: 48px; height: 48px; border: 1px solid var(--Purple-200, #C5ADFF); border-radius: 50%; background: var(--White-0, #FFFFFF); color: var(--Purple-500, #6E33FF); font-size: 24px; line-height: 1; cursor: pointer; transition: transform 0.4s ease, background-color 0.2s ease; } .chatbot-relaunch-btn:hover { transform: rotate(360deg); background: var(--Purple-50, #F0EBFF); } .chatbot-relaunch-error { font-size: 13px; color: #cc4041; display: inline-flex; align-items: center; gap: 4px; } .chatbot-relaunch-text { font-size: 13px; } /* ── Typing indicator ───────────────────────────────────────────────────────────────────── */ .chatbot-typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; } .chatbot-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--Purple-450, #7D47FF); opacity: 0.4; animation: chatbot-typing-bounce 1.2s infinite ease-in-out; } .chatbot-typing-dot:nth-child(2) { animation-delay: 0.2s; } .chatbot-typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes chatbot-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } /* ── Input row ──────────────────────────────────────────────────────────────────────────── */ .chatbot-input-row { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 6px; padding: 14px 20px 12px; background: var(--White-0, #FFFFFF); border-top: 1px solid var(--Grey-150, #E9EAEC); } .chatbot-input { grid-column: 1; grid-row: 1; min-width: 0; width: 100%; box-sizing: border-box; resize: none; line-height: 20px; padding: 10px 14px; border: 1px solid var(--Grey-300, #D3D4D9); border-radius: 12px; background-color: var(--Grey-50, #F8F8F9); font: inherit; color: var(--Grey-950, #121213); outline: none; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out; } .chatbot-input:focus { border-color: var(--Purple-450, #7D47FF); background-color: var(--White-0, #FFFFFF); box-shadow: 0 0 0 3px var(--Purple-100, #E2D6FF); } .chatbot-char-count { grid-column: 1; grid-row: 2; font-size: 11px; color: var(--Grey-550, #A3A6AC); text-align: right; line-height: 1; padding-right: 2px; } .chatbot-send { grid-column: 2; grid-row: 1; align-self: end; width: 40px; height: 40px; border: 0; border-radius: 50%; background-color: var(--Purple-500, #6E33FF); color: var(--White-0, #FFFFFF); font-size: 16px; font-weight: 300; line-height: 1; cursor: pointer; transition: background-color 0.2s, transform 0.15s ease; } .chatbot-send:hover:enabled { background-color: var(--Purple-550, #632EE6); transform: scale(1.05); } .chatbot-send:disabled { background-color: var(--Grey-300, #D3D4D9); cursor: default; } /* ── Responsive & motion preferences ────────────────────────────────────────────────────── */ @media (max-width: 480px) { .chatbot-window { width: 100vw; border-left: 0; } } @media (prefers-reduced-motion: reduce) { .chatbot-scrim, .chatbot-window, .chatbot-msg, .chatbot-suggestions { transition: none; animation: none; } }