/* Algolia Agent Studio chat widget — Less Likely. Paired with js/agent-chat.js. Teal accent matches $primary (#3f8f9b). */ :root { --ll-agent-accent: #3f8f9b; --ll-agent-accent-dark: #357882; --ll-agent-bg: #ffffff; --ll-agent-fg: #1a1a1a; --ll-agent-muted: #f0f2f4; --ll-agent-border: #e2e6ea; } /* Quarto adds .quarto-dark to in dark mode */ body.quarto-dark { --ll-agent-bg: #1e1f22; --ll-agent-fg: #e8e8e8; --ll-agent-muted: #2a2c30; --ll-agent-border: #3a3d42; } /* ── Launcher ─────────────────────────────────────────────────────────── */ .ll-agent-launcher { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--ll-agent-accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); z-index: 1050; transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease; } .ll-agent-launcher:hover { background: var(--ll-agent-accent-dark); transform: scale(1.05); } .ll-agent-launcher.ll-hidden { opacity: 0; pointer-events: none; transform: scale(0.8); } /* ── Panel ────────────────────────────────────────────────────────────── */ .ll-agent-panel { position: fixed; right: 20px; bottom: 20px; width: 380px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 40px); background: var(--ll-agent-bg); color: var(--ll-agent-fg); border: 1px solid var(--ll-agent-border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; overflow: hidden; z-index: 1051; opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .ll-agent-panel.ll-open { opacity: 1; transform: none; pointer-events: auto; } .ll-agent-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--ll-agent-accent); color: #fff; flex: 0 0 auto; } .ll-agent-title { font-weight: 600; font-size: 1rem; } .ll-agent-close { background: none; border: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; opacity: 0.85; } .ll-agent-close:hover { opacity: 1; } /* ── Message log ──────────────────────────────────────────────────────── */ .ll-agent-log { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .ll-agent-msg { display: flex; } .ll-agent-msg.ll-user { justify-content: flex-end; } .ll-agent-msg.ll-assistant { justify-content: flex-start; } .ll-agent-bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; word-wrap: break-word; white-space: normal; } .ll-user .ll-agent-bubble { background: var(--ll-agent-accent); color: #fff; border-bottom-right-radius: 4px; } .ll-assistant .ll-agent-bubble { background: var(--ll-agent-muted); color: var(--ll-agent-fg); border-bottom-left-radius: 4px; } .ll-agent-bubble a { color: inherit; text-decoration: underline; } .ll-user .ll-agent-bubble a { color: #fff; } .ll-assistant .ll-agent-bubble a { color: var(--ll-agent-accent); } /* Typing indicator */ .ll-thinking .ll-agent-bubble { display: flex; gap: 4px; align-items: center; } .ll-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: ll-bounce 1.2s infinite ease-in-out; } .ll-dot:nth-child(2) { animation-delay: 0.15s; } .ll-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes ll-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 0.9; } } /* ── Input ────────────────────────────────────────────────────────────── */ .ll-agent-form { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ll-agent-border); } .ll-agent-input { flex: 1 1 auto; resize: none; border: 1px solid var(--ll-agent-border); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 0.9rem; line-height: 1.4; background: var(--ll-agent-bg); color: var(--ll-agent-fg); max-height: 120px; overflow-y: auto; } .ll-agent-input:focus { outline: none; border-color: var(--ll-agent-accent); } .ll-agent-send { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--ll-agent-accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; } .ll-agent-send:hover { background: var(--ll-agent-accent-dark); } .ll-agent-send:disabled { opacity: 0.5; cursor: default; } @media (max-width: 480px) { .ll-agent-panel { right: 8px; bottom: 8px; height: calc(100vh - 16px); } }