/* ========================================================================== AUTHIFY — Site-wide chat widget ("Ava") Static/canned assistant: quick-action links + pre-written Q&A, no live AI backend. Fixed bottom-right on every page via partials/chat-widget.html. ========================================================================== */ .chat-widget{ position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: 500; /* Widget always renders in the light palette, independent of the site's dark/light toggle — these overrides win over inherited [data-theme="dark"] values for every element inside .chat-widget. */ --color-bg: #ffffff; --color-bg-elevated: #faf9f7; --color-text: #16140f; --color-text-muted: rgba(22, 20, 15, 0.64); --color-text-subtle: rgba(22, 20, 15, 0.42); --color-border: rgba(22, 20, 15, 0.1); --color-border-strong: rgba(22, 20, 15, 0.18); --gold-50: #fbf3e4; --gold-200: #f0d9af; --gold-400: #c9a876; --gold-500: #ad8858; --gold-600: #8d6c43; --gold-contrast: #16140f; --glass-surface: rgba(255, 255, 255, 0.55); --glass-surface-strong: rgba(255, 255, 255, 0.78); --glass-border: rgba(22, 20, 15, 0.1); --glass-highlight: rgba(255, 255, 255, 0.9); --shadow-glass: 0 1px 1px rgba(22,20,15,0.03), 0 8px 24px rgba(22,20,15,0.06), 0 24px 48px -12px rgba(22,20,15,0.08); --shadow-float: 0 20px 60px -16px rgba(22,20,15,0.16), 0 4px 16px rgba(22,20,15,0.06); --shadow-gold: 0 8px 30px -8px rgba(173,136,88,0.35); color-scheme: light; /* Custom-property overrides above only affect rules that re-read them via var(--color-text) inside this subtree — anything relying on plain CSS inheritance (e.g. headings with no color of their own) would otherwise keep the dark-mode color inherited from . Setting color here directly covers those. */ color: var(--color-text); } /* ---- Toggle button ------------------------------------------------------ */ .chat-widget__toggle{ display: flex; align-items: center; gap: var(--space-2xs); padding: 0.6em 1.2em 0.6em 0.6em; border-radius: var(--radius-full); background: linear-gradient(160deg, var(--gold-200), var(--gold-400)); color: var(--gold-contrast); border: none; box-shadow: var(--shadow-float); cursor: pointer; font-weight: 600; font-size: var(--text-xs); transition: transform var(--dur-fast) var(--ease-glass), box-shadow var(--dur-mid) var(--ease-smooth); } .chat-widget__toggle:hover{ transform: translateY(-2px); } .chat-widget__toggle-icon{ width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--gold-contrast) 16%, transparent); flex-shrink: 0; overflow: hidden; } .chat-widget__toggle-icon .icon{ width: 0.85rem; height: 0.85rem; } .chat-widget__toggle-mark{ width: 100%; height: 100%; object-fit: cover; } .chat-widget__toggle-icon--close{ display: none; } .chat-widget.is-open .chat-widget__toggle-icon--open{ display: none; } .chat-widget.is-open .chat-widget__toggle-icon--close{ display: flex; } .chat-widget.is-open .chat-widget__toggle-label{ display: none; } /* Label + right-heavy padding are for the pill state only — once collapsed to just the icon, force equal padding so the button is a true circle. */ .chat-widget.is-open .chat-widget__toggle{ padding: 0.6em; } /* ---- Panel ---------------------------------------------------------------*/ .chat-widget__panel{ position: absolute; right: 0; bottom: calc(100% + var(--space-sm)); width: min(380px, calc(100vw - 2 * var(--space-lg))); height: min(600px, calc(100vh - 140px)); display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--glass-surface-strong); backdrop-filter: var(--blur-lg, blur(20px)); -webkit-backdrop-filter: var(--blur-lg, blur(20px)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-float); overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity var(--dur-mid) var(--ease-glass), transform var(--dur-mid) var(--ease-glass); } .chat-widget.is-open .chat-widget__panel{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .chat-widget__head{ display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); border-bottom: 1px solid var(--glass-border); flex-shrink: 0; } .chat-widget__avatar{ width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(160deg, var(--gold-200), var(--gold-400)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-gold); overflow: hidden; } .chat-widget__avatar img{ width: 100%; height: 100%; object-fit: cover; } .chat-widget__head-text{ display: flex; flex-direction: column; line-height: 1.25; flex: 1; } .chat-widget__head-text strong{ font-size: var(--text-base); } .chat-widget__head-text span{ font-size: calc(var(--text-xs) * 0.95); color: var(--color-text-muted); } .chat-widget__close{ width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--color-text-muted); transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); } .chat-widget__close:hover{ background: var(--glass-surface); color: var(--color-text); } .chat-widget__close .icon{ width: 1.1rem; height: 1.1rem; } .chat-widget__body{ flex: 1; overflow-y: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); } .chat-widget__msg p{ max-width: 88%; padding: 0.65em 0.9em; border-radius: var(--radius-lg); font-size: calc(var(--text-sm) * 0.95); color: var(--color-text); line-height: var(--lh-snug); } .chat-widget__msg--bot p{ background: var(--glass-surface); border: 1px solid var(--glass-border); border-bottom-left-radius: var(--radius-xs, 4px); } .chat-widget__msg--user{ display: flex; justify-content: flex-end; } .chat-widget__msg--user p{ background: linear-gradient(160deg, var(--gold-200), var(--gold-400)); color: var(--gold-contrast); border-bottom-right-radius: var(--radius-xs, 4px); } .chat-widget__cta{ align-self: flex-start; margin-top: -0.3em; padding: 0.5em 1em; border-radius: var(--radius-full); background: var(--glass-surface); border: 1px solid var(--glass-border); color: var(--color-text); font-size: calc(var(--text-xs) * 0.95); font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-glass); } .chat-widget__cta:hover{ border-color: var(--gold-400); transform: translateY(-1px); } .chat-widget__quick{ display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .chat-widget__quick-btn{ padding: 0.55em 1em; border-radius: var(--radius-full); background: var(--glass-surface); border: 1px solid var(--glass-border); color: var(--color-text); font-size: calc(var(--text-xs) * 0.95); font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-glass); } .chat-widget__quick-btn:hover{ border-color: var(--gold-400); transform: translateY(-1px); } .chat-widget__suggestions{ display: flex; flex-direction: column; gap: var(--space-3xs); align-items: flex-start; } .chat-widget__suggestion{ padding: 0.5em 0.9em; border-radius: var(--radius-md); background: none; border: 1px dashed var(--glass-border); color: var(--color-text-muted); font-size: calc(var(--text-xs) * 0.95); text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); } .chat-widget__suggestion:hover{ border-color: var(--gold-400); color: var(--color-text); border-style: solid; } .chat-widget__typing{ display: flex; gap: 4px; padding: 0.7em 0.9em; } .chat-widget__typing span{ width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-subtle); animation: chat-typing 1.1s ease-in-out infinite; } .chat-widget__typing span:nth-child(2){ animation-delay: 0.15s; } .chat-widget__typing span:nth-child(3){ animation-delay: 0.3s; } @keyframes chat-typing{ 0%, 60%, 100%{ opacity: 0.3; transform: translateY(0); } 30%{ opacity: 1; transform: translateY(-3px); } } .chat-widget__form{ display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-sm); border-top: 1px solid var(--glass-border); flex-shrink: 0; } .chat-widget__input{ flex: 1; min-width: 0; padding: 0.65em 0.9em; border-radius: var(--radius-full); border: 1px solid var(--glass-border); background: var(--glass-surface); color: var(--color-text); font-size: calc(var(--text-sm) * 0.95); } .chat-widget__input:focus{ outline: none; border-color: var(--gold-400); } .chat-widget__send{ width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 50%; background: linear-gradient(160deg, var(--gold-200), var(--gold-400)); color: var(--gold-contrast); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--dur-fast) var(--ease-glass); } .chat-widget__send:hover{ transform: scale(1.05); } .chat-widget__send .icon{ width: 1.1rem; height: 1.1rem; } .chat-widget__note{ padding: 0 var(--space-md) var(--space-sm); font-size: calc(var(--text-xs) * 0.8); color: var(--color-text-subtle); text-align: center; flex-shrink: 0; } @media (max-width: 480px){ .chat-widget{ right: var(--space-md); bottom: var(--space-md); } .chat-widget__panel{ width: calc(100vw - 2 * var(--space-md)); height: min(70vh, 560px); } .chat-widget__toggle-label{ display: none; } .chat-widget__toggle{ padding: 0.85em; } }