/* ================================================================ AtlasChat widget styles Extracted from the designed widget (chat-widget.html). Pure CSS - every color/space/font value reads from the site's CSS custom properties in styles.css, so the widget inherits light/dark/accent automatically from [data-theme] / [data-accent] on . ================================================================ */ .am-chat-root { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; font-family: var(--font-body, 'Lora', Georgia, serif); } .am-chat-root * { box-sizing: border-box; } /* ---- Floating launcher button ---- */ .am-chat-fab { position: fixed; right: var(--space-lg, 1.5rem); bottom: var(--space-lg, 1.5rem); width: 56px; height: 56px; border-radius: 50%; pointer-events: auto; background: var(--color-accent, #3E5F80); color: var(--color-accent-text, #fff); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 32px -10px rgba(30, 64, 96, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) inset; transition: background var(--duration-fast, 150ms) var(--ease-out), transform var(--duration-fast, 150ms) var(--ease-out); } .am-chat-fab:hover { background: var(--color-accent-hover, #2E4A66); transform: translateY(-2px); } .am-chat-fab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-accent-subtle, #E2EAF2), 0 12px 32px -10px rgba(30, 64, 96, 0.5); } .am-chat-fab svg { width: 24px; height: 24px; } .am-chat-fab .am-chat-fab-close { display: none; } .am-chat-root[data-open="true"] .am-chat-fab .am-chat-fab-open { display: none; } .am-chat-root[data-open="true"] .am-chat-fab .am-chat-fab-close { display: block; } .am-chat-fab.am-chat-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 var(--color-accent, #3E5F80); animation: am-chat-pulse 2.4s var(--ease-out) 3; } @keyframes am-chat-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent, #3E5F80) 55%, transparent); } 70% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--color-accent, #3E5F80) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent, #3E5F80) 0%, transparent); } } /* ---- Panel ---- */ .am-chat-panel { position: fixed; right: var(--space-lg, 1.5rem); bottom: calc(var(--space-lg, 1.5rem) + 56px + var(--space-sm, 0.75rem)); width: 380px; height: 520px; max-height: calc(100vh - 2 * var(--space-lg, 1.5rem) - 56px); pointer-events: auto; display: flex; flex-direction: column; background: var(--color-card, #fff); border: 1px solid var(--color-border, #D5CCB9); border-radius: var(--radius-lg, 12px); overflow: hidden; box-shadow: 0 24px 60px -20px rgba(15, 31, 53, 0.32), 0 2px 8px -4px rgba(15, 31, 53, 0.18); opacity: 0; transform: translateY(16px) scale(0.98); transform-origin: bottom right; transition: opacity var(--duration-normal, 250ms) var(--ease-out), transform var(--duration-normal, 250ms) var(--ease-out); visibility: hidden; } .am-chat-root[data-open="true"] .am-chat-panel { opacity: 1; transform: translateY(0) scale(1); visibility: visible; } /* ---- Header ---- */ .am-chat-header { display: flex; align-items: flex-start; gap: var(--space-sm, 0.75rem); padding: var(--space-md, 1rem) var(--space-md, 1rem) var(--space-sm, 0.75rem); background: var(--color-accent, #3E5F80); color: var(--color-accent-text, #fff); border-bottom: 1px solid transparent; } .am-chat-root[data-theme="dark"] .am-chat-header { background: var(--color-bg-subtle, #1F1D18); color: var(--color-text, #EDE7DA); border-bottom: 1px solid var(--color-border, #3A352C); } .am-chat-htext { flex: 1 1 auto; min-width: 0; } .am-chat-wordmark { font-family: var(--font-display, 'Instrument Serif', serif); font-size: var(--text-md, 1.25rem); line-height: 1.1; } .am-chat-tagline { font-family: var(--font-reader, 'Lora', serif); font-size: var(--text-sm, 0.875rem); line-height: 1.35; opacity: 0.85; margin-top: 2px; } .am-chat-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-sm, 4px); display: grid; place-items: center; color: inherit; opacity: 0.85; cursor: pointer; transition: background var(--duration-fast, 150ms), opacity var(--duration-fast, 150ms); margin-top: -2px; } .am-chat-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); } .am-chat-root[data-theme="dark"] .am-chat-close:hover { background: var(--color-bg-muted, #2A2722); } .am-chat-close:focus-visible { outline: none; box-shadow: 0 0 0 2px currentColor; } .am-chat-close svg { width: 18px; height: 18px; } /* ---- Messages ---- */ .am-chat-log { flex: 1 1 auto; overflow-y: auto; padding: var(--space-md, 1rem); display: flex; flex-direction: column; gap: var(--space-md, 1rem); background: var(--color-bg, #F9F6F1); scroll-behavior: smooth; } .am-chat-log::-webkit-scrollbar { width: 8px; } .am-chat-log::-webkit-scrollbar-thumb { background: var(--color-border, #D5CCB9); border-radius: var(--radius-pill, 999px); border: 2px solid var(--color-bg, #F9F6F1); } .am-chat-msg { display: flex; gap: var(--space-xs, 0.5rem); max-width: 88%; } .am-chat-msg.am-chat-bot { align-self: flex-start; } .am-chat-msg.am-chat-user { align-self: flex-end; flex-direction: row-reverse; } .am-chat-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; background: var(--color-accent-subtle, #E2EAF2); color: var(--color-accent, #3E5F80); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent, #3E5F80) 28%, transparent); margin-top: 2px; } .am-chat-bubblewrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .am-chat-bubble { padding: var(--space-sm, 0.75rem) var(--space-md, 1rem); border-radius: var(--radius-lg, 12px); font-size: var(--text-sm, 0.875rem); line-height: 1.5; color: var(--color-text, #1A1814); white-space: pre-wrap; word-wrap: break-word; } .am-chat-bot .am-chat-bubble { background: var(--color-bg-subtle, #F2EEEA); border-bottom-left-radius: var(--radius-sm, 4px); } .am-chat-user .am-chat-bubble { background: var(--color-accent-subtle, #E2EAF2); border-bottom-right-radius: var(--radius-sm, 4px); } .am-chat-bubble a.am-chat-link { color: var(--color-accent, #3E5F80); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .am-chat-bubble a.am-chat-link:hover { color: var(--color-accent-hover, #2E4A66); } .am-chat-time { font-size: var(--text-xs, 0.75rem); color: var(--color-text-tertiary, #8A847A); font-family: var(--font-reader, 'Lora', serif); padding: 0 var(--space-2xs, 0.25rem); } .am-chat-user .am-chat-time { text-align: right; } /* ---- Typing indicator ---- */ .am-chat-typing .am-chat-bubble { display: flex; gap: 5px; align-items: center; padding: 0.9rem 1rem; } .am-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-tertiary, #8A847A); opacity: 0.5; animation: am-chat-bounce 1.3s var(--ease-out) infinite; } .am-chat-dot:nth-child(2) { animation-delay: 0.18s; } .am-chat-dot:nth-child(3) { animation-delay: 0.36s; } @keyframes am-chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 0.9; } } /* ---- Handoff prompt ---- */ .am-chat-handoff { align-self: stretch; background: var(--color-accent-subtle, #E2EAF2); border-radius: var(--radius-md, 8px); padding: var(--space-md, 1rem); display: flex; flex-direction: column; gap: var(--space-sm, 0.75rem); } .am-chat-handoff p { font-size: var(--text-sm, 0.875rem); color: var(--color-text, #1A1814); line-height: 1.45; } .am-chat-handoff p strong { color: var(--color-accent, #3E5F80); font-weight: 600; } .am-chat-handoff-btn { align-self: flex-start; background: var(--color-accent, #3E5F80); color: var(--color-accent-text, #fff); font-family: var(--font-reader, 'Lora', serif); font-size: var(--text-sm, 0.875rem); font-weight: 600; padding: 0.55rem 1rem; border-radius: var(--radius-md, 8px); text-decoration: none; transition: background var(--duration-fast, 150ms); display: inline-flex; align-items: center; gap: 6px; } .am-chat-handoff-btn:hover { background: var(--color-accent-hover, #2E4A66); } .am-chat-handoff-btn svg { width: 15px; height: 15px; } /* ---- Error banner ---- */ .am-chat-error { display: none; align-items: center; gap: var(--space-xs, 0.5rem); margin: 0 var(--space-md, 1rem); padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem); background: color-mix(in srgb, var(--color-error, #A23D2C) 12%, var(--color-card, #fff)); border: 1px solid color-mix(in srgb, var(--color-error, #A23D2C) 40%, transparent); border-radius: var(--radius-md, 8px); color: var(--color-error, #A23D2C); font-size: var(--text-sm, 0.875rem); } .am-chat-error[data-show="true"] { display: flex; } .am-chat-error svg { width: 16px; height: 16px; flex: 0 0 auto; } .am-chat-retry { margin-left: auto; font-family: var(--font-mono, monospace); font-size: var(--text-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-error, #A23D2C); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* ---- Input ---- */ .am-chat-inputbar { flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--space-xs, 0.5rem); padding: var(--space-sm, 0.75rem) var(--space-md, 1rem); background: var(--color-card, #fff); border-top: 1px solid var(--color-border-subtle, #E6DFCE); } .am-chat-field { flex: 1 1 auto; resize: none; max-height: 108px; min-height: 40px; padding: 0.6rem 0.85rem; font-family: var(--font-reader, 'Lora', serif); font-size: var(--text-sm, 0.875rem); line-height: 1.4; color: var(--color-text, #1A1814); background: var(--color-bg, #F9F6F1); border: 1px solid var(--color-border, #D5CCB9); border-radius: var(--radius-md, 8px); transition: border-color var(--duration-fast, 150ms), box-shadow var(--duration-fast, 150ms); } .am-chat-field::placeholder { color: var(--color-text-tertiary, #8A847A); } .am-chat-field:focus { outline: none; border-color: var(--color-accent, #3E5F80); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #3E5F80) 35%, transparent); } .am-chat-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md, 8px); background: var(--color-accent, #3E5F80); color: var(--color-accent-text, #fff); display: grid; place-items: center; cursor: pointer; transition: background var(--duration-fast, 150ms), opacity var(--duration-fast, 150ms); } .am-chat-send:hover:not(:disabled) { background: var(--color-accent-hover, #2E4A66); } .am-chat-send:disabled { opacity: 0.4; cursor: not-allowed; } .am-chat-send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-accent-subtle, #E2EAF2); } .am-chat-send svg { width: 18px; height: 18px; } /* ---- Mobile: full-screen sheet ---- */ @media (max-width: 480px) { .am-chat-panel { right: 0; left: 0; bottom: 0; top: 0; width: 100%; height: 100%; max-height: none; border: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transform-origin: bottom center; } .am-chat-root[data-open="true"] .am-chat-panel { transform: translateY(0); } .am-chat-grip { display: flex; } .am-chat-header { padding-top: var(--space-sm, 0.75rem); } .am-chat-fab { right: var(--space-md, 1rem); bottom: var(--space-md, 1rem); } /* Hide FAB when chat is open on mobile - header X button handles close */ .am-chat-root[data-open="true"] .am-chat-fab { display: none !important; } } .am-chat-grip { display: none; justify-content: center; padding: var(--space-xs, 0.5rem) 0 0; background: var(--color-accent, #3E5F80); } .am-chat-root[data-theme="dark"] .am-chat-grip { background: var(--color-bg-subtle, #1F1D18); } .am-chat-grip span { width: 36px; height: 4px; border-radius: var(--radius-pill, 999px); background: currentColor; opacity: 0.4; } .am-chat-header, .am-chat-grip { color: var(--color-accent-text, #fff); } .am-chat-root[data-theme="dark"] .am-chat-header, .am-chat-root[data-theme="dark"] .am-chat-grip { color: var(--color-text, #EDE7DA); } .am-chat-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .am-chat-panel, .am-chat-fab, .am-chat-dot { transition: none !important; animation: none !important; } .am-chat-fab.am-chat-pulse::after { animation: none !important; } }