/* ============================================================ /assets/css/chat-widget.css QWQ Digital Studio - "Zoe" front-of-house chat widget. Reuses the house dark token layer (qwq-tokens.css must load first): brass --accent on espresso --bg, Playfair display + DM Sans body. All surfaces, type and radii come from the shared :root tokens so the widget reads as part of the brand, not a bolted-on plugin. No markup lives in the HTML: chat-widget.js builds the DOM and appends it to , so this file only styles those generated nodes. ============================================================ */ .qwq-chat { position: fixed; right: clamp(16px, 4vw, 28px); bottom: clamp(16px, 4vw, 28px); z-index: 1200; /* above sticky nav (100); below the focus skip-link */ font-family: var(--font-body); } /* ── Floating launcher button ─────────────────────────────── */ .qwq-chat__launcher { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent); color: var(--accent-ink); cursor: pointer; box-shadow: var(--shadow-glow), var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .qwq-chat__launcher:hover { background: color-mix(in srgb, var(--accent) 88%, #ffffff); transform: translateY(-2px); box-shadow: var(--shadow-glow), var(--shadow-float); } .qwq-chat__launcher:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } .qwq-chat__launcher svg { width: 26px; height: 26px; } .qwq-chat__launcher .qwq-chat__icon-close { display: none; } .qwq-chat.is-open .qwq-chat__launcher .qwq-chat__icon-open { display: none; } .qwq-chat.is-open .qwq-chat__launcher .qwq-chat__icon-close { display: block; } /* Small attention dot on the launcher before first open. */ .qwq-chat__launcher::after { content: ""; position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-alt); border: 2px solid var(--bg); transition: opacity .2s ease, transform .2s ease; } .qwq-chat.is-open .qwq-chat__launcher::after, .qwq-chat.is-engaged .qwq-chat__launcher::after { opacity: 0; transform: scale(0); } /* ── Conversation panel ───────────────────────────────────── */ .qwq-chat__panel { position: absolute; right: 0; bottom: 74px; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-hi); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); overflow: hidden; transform-origin: bottom right; opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .qwq-chat.is-open .qwq-chat__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* ── Header ───────────────────────────────────────────────── */ .qwq-chat__header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 15px; background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-card) 100%); border-bottom: 1px solid var(--border); } .qwq-chat__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-pale); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-text); font-family: var(--font-display); font-size: 19px; font-weight: 600; } .qwq-chat__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .qwq-chat__name { font-family: var(--font-display); font-size: 17px; color: var(--ink); } .qwq-chat__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .04em; color: var(--dim); } .qwq-chat__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6FBF8B; /* calm online green, palette-independent */ box-shadow: 0 0 0 3px rgba(111, 191, 139, 0.18); } .qwq-chat__close { margin-left: auto; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--dim); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .qwq-chat__close:hover { color: var(--text); background: var(--bg-elev); border-color: var(--border); } .qwq-chat__close:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } .qwq-chat__close svg { width: 18px; height: 18px; } /* ── Message log ──────────────────────────────────────────── */ .qwq-chat__log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 6px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; } .qwq-chat__log::-webkit-scrollbar { width: 8px; } .qwq-chat__log::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 8px; } .qwq-msg { max-width: 84%; padding: 10px 14px; font-size: 14.5px; line-height: 1.55; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; } .qwq-msg a { color: var(--accent-text); text-underline-offset: 2px; } .qwq-msg--bot { align-self: flex-start; background: var(--bg-elev); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--text); } .qwq-msg--user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; font-weight: 500; } /* Typing indicator (three brass dots). */ .qwq-chat__typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 13px 15px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; border-bottom-left-radius: 5px; } .qwq-chat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); opacity: .55; animation: qwq-typing 1.1s ease-in-out infinite; } .qwq-chat__typing span:nth-child(2) { animation-delay: .18s; } .qwq-chat__typing span:nth-child(3) { animation-delay: .36s; } @keyframes qwq-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } } /* ── Starter suggestion chips ─────────────────────────────── */ .qwq-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 2px; } .qwq-chat__chip { font-family: var(--font-body); font-size: 12.5px; color: var(--text-2); background: var(--accent-pale); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .qwq-chat__chip:hover { color: var(--ink); border-color: var(--accent); } .qwq-chat__chip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } /* ── Composer ─────────────────────────────────────────────── */ .qwq-chat__composer { display: flex; align-items: flex-end; gap: 9px; padding: 12px 14px 13px; border-top: 1px solid var(--border); background: var(--bg-card); } .qwq-chat__input { flex: 1 1 auto; resize: none; max-height: 110px; min-height: 22px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--text); background: transparent; border: 0; outline: none; } .qwq-chat__input::placeholder { color: var(--faint); } .qwq-chat__send { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); cursor: pointer; transition: background .15s ease, transform .15s ease, opacity .15s ease; } .qwq-chat__send:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, #ffffff); transform: translateY(-1px); } .qwq-chat__send:disabled { opacity: .4; cursor: default; } .qwq-chat__send:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } .qwq-chat__send svg { width: 19px; height: 19px; } .qwq-chat__legal { text-align: center; font-size: 10.5px; color: var(--faint); padding: 0 14px 10px; background: var(--bg-card); } /* ── Mobile: panel fills the screen ───────────────────────── */ @media (max-width: 460px) { .qwq-chat { right: 14px; bottom: 14px; } .qwq-chat__panel { position: fixed; right: 0; left: 0; bottom: 0; top: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; } } /* ── Reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .qwq-chat__launcher, .qwq-chat__panel, .qwq-chat__send { transition: none; } .qwq-chat__launcher:hover, .qwq-chat__send:hover:not(:disabled) { transform: none; } .qwq-chat__typing span { animation: none; opacity: .6; } }