/* ═══════════════════════════════════════════════════════════════
Pressona AI — Chat Widget
Full-screen web-app style chat + inline prompt shortcode
═══════════════════════════════════════════════════════════════ */
:root {
/* ── Widget Status base colours ─────────────────────── */
/* ── Widget Surfaces ────────────────────────────────── */
--pai-w-bg: #1a1a1a;
--pai-w-surface-input: #272727;
--pai-w-surface-chip: #252525;
--pai-w-surface-chip-hover: #2e2e2e;
/* ── Widget Borders ─────────────────────────────────── */
--pai-w-border-chip: #363636;
--pai-w-border-chip-hover: #484848;
--pai-w-border-input: #3a3a3a;
--pai-w-border-input-focus:#505050;
/* ── Widget Text ────────────────────────────────────── */
--pai-w-text: #e2e2e2;
--pai-w-text-input: #e0e0e0;
--pai-w-text-muted: #bbb;
--pai-w-text-subtle: #888;
--pai-w-text-faint: #666;
--pai-w-text-placeholder: #999;
/* ── Widget Accent ──────────────────────────────────── */
--pai-w-accent: #6366f1;
--pai-w-accent-light: #a5b4fc;
--pai-w-accent-lighter:#c7d2fe;
--pai-w-accent-tint: color-mix(in srgb, var(--pai-w-accent) 25%, transparent);
/* ── Widget Semantic ────────────────────────────────── */
--pai-w-success: #22c55e;
--pai-w-success-text: #4ade80;
--pai-w-danger: #ef4444;
--pai-w-danger-text: #ef4444;
--pai-w-warning: #f59e0b;
/* ── Widget Status — uniform shape (base + tint) ─────
* Mirrors the admin --pai-{success,danger}-tint pattern. */
--pai-w-success-tint: color-mix(in srgb, var(--pai-w-success) 12%, transparent);
--pai-w-danger-tint: color-mix(in srgb, var(--pai-w-danger) 12%, transparent);
--pai-w-warning-tint: color-mix(in srgb, var(--pai-w-warning) 14%, transparent);
/* `-text` variants used on dark widget backgrounds — slightly
* lighter than the base for adequate contrast against tinted
* backgrounds at small sizes. Mixed against `#fff` (not the
* named `white`) so stylelint's color-named rule passes. */
--pai-w-warning-text: color-mix(in srgb, var(--pai-w-warning) 78%, #fff);
--pai-w-danger-text-soft: color-mix(in srgb, var(--pai-w-danger) 75%, #fff);
/* ── Widget Overlays (semantic — three intensities, no per-alpha primitives)
* One alpha per role. CONSISTENCY > local optimization. */
--pai-w-overlay-soft: rgba(255, 255, 255, 0.10); /* subtle layers, hairline borders */
--pai-w-overlay-medium: rgba(255, 255, 255, 0.25); /* hover bgs, accent-bordered states */
--pai-w-overlay-strong: rgba(255, 255, 255, 0.60); /* deemphasized text on dark widget */
--pai-w-scrim: rgba(0, 0, 0, 0.70); /* dark overlays — paste tile, modal scrim */
/* ── Widget Shadows (encapsulated rgba — consumers see only the token) */
--pai-w-shadow: 0 3px 8px rgba(0, 0, 0, 0.30);
--pai-w-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.50);
--pai-w-shadow-window: 0 8px 60px rgba(0, 0, 0, 0.70);
--pai-w-shadow-window-side: -12px 0 60px rgba(0, 0, 0, 0.70);
--pai-w-shadow-tooltip: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 6px rgba(0, 0, 0, 0.10);
--pai-w-shadow-drop-faint: 0 2px 2px rgba(0, 0, 0, 0.08); /* used inside filter: drop-shadow() */
/* Misc grey shades not in the named scale */
--pai-w-text-faint-light: #aaa; /* between text-muted (#bbb) and text-subtle (#888) */
--pai-w-surface-chip-soft: #2a2a2a; /* between surface-chip (#252525) and chip-hover (#2e2e2e) */
/* Autofill override colours — used by webkit autofill box-shadow trick */
--pai-w-autofill-bg: rgba(40, 40, 50, 0.95);
--pai-w-autofill-bg-focus: rgba(50, 50, 65, 0.98);
/* Semantic tokens (widget-scoped) */
--pai-w-text-on-accent: #fff; /* pure-white text on accent surfaces */
--pai-tooltip-text: #111; /* dark text on the light tooltip bubble */
/* ── Widget Misc ────────────────────────────────────── */
--pai-w-scrollbar: #383838;
--pai-w-typing-dot: #4a4a4a;
--pai-w-typing-dot-up: #888;
--pai-tooltip-bg: #fff;
--pai-pulse-border-color: currentColor;
/* ── Runtime-set widget tokens (defaults — overridden via JS) ──
* --pai-widget-link-color set from cfg.accent in widget.js init,
* drives bubble link, inline-answer link,
* focus ring, attachment button colours
*/
--pai-widget-link-color: var(--pai-w-accent);
/* ── Widget Radius ──────────────────────────────────── */
--pai-w-radius-xs: 2px;
--pai-w-radius-sm: 4px;
--pai-w-radius-md: 6px;
--pai-w-radius: 7px;
--pai-w-radius-lg: 8px;
--pai-w-radius-xl: 9px;
--pai-w-radius-2xl: 10px;
--pai-w-radius-3xl: 14px;
--pai-w-radius-4xl: 16px;
--pai-w-radius-5xl: 18px;
--pai-w-radius-pill: 100px;
--pai-w-radius-action: 20px;
--pai-w-radius-circle: 50%;
/* ── Widget Typography ──────────────────────────────── */
--pai-w-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--pai-w-font-mono: 'SF Mono', Monaco, Consolas, monospace;
/* ── Widget Transition (single token, matches admin --pai-transition) */
--pai-w-transition: 0.2s ease-in-out;
/* ── Widget Z-index ─────────────────────────────────── */
--pai-w-z-tooltip: 99994;
--pai-w-z-trigger-open:99995;
--pai-w-z-overlay: 99996;
--pai-w-z-trigger: 99997;
--pai-w-z-window: 99998;
}
/* Reduced-motion override — collapses widget animations to instant
* for users with the OS preference set. Lives in widget.css (not
* admin-core) so cascade order is correct when both stylesheets load. */
@media (prefers-reduced-motion: reduce) {
:root {
--pai-w-transition: 0s;
}
}
/* Box-sizing only — no margin/padding reset to preserve widget spacing */
#pressona-ai-root *,
#pressona-ai-root *::before,
#pressona-ai-root *::after,
.pai-inline-prompt *,
.pai-inline-prompt *::before,
.pai-inline-prompt *::after {
box-sizing: border-box;
}
/* ── OVERLAY (behind chat, dims page) ───────────────────────── */
#pai-overlay {
position: fixed;
inset: 0;
background: var(--pai-w-scrim);
z-index: var(--pai-w-z-overlay);
opacity: 0;
pointer-events: none;
transition: opacity var(--pai-w-transition);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
#pai-overlay.open {
opacity: 1;
pointer-events: all;
}
/* ── TRIGGER BUTTON ─────────────────────────────────────────── */
@keyframes pai-trigger-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#pai-trigger {
position: fixed;
bottom: 24px;
z-index: var(--pai-w-z-trigger);
border: none;
cursor: pointer;
border-radius: var(--pai-w-radius-circle);
width: 46px;
height: 46px;
padding: 0;
box-shadow: var(--pai-w-shadow);
transition: transform var(--pai-w-transition), box-shadow var(--pai-w-transition);
overflow: visible;
background: transparent;
animation: pai-trigger-in 0.4s ease-out both;
}
#pai-trigger.position-bottom-right { right: 24px; bottom: 24px; }
#pai-trigger.position-bottom-left { left: 24px; bottom: 24px; }
#pai-trigger.position-top-right { right: 24px; bottom: auto; top: 24px; }
#pai-trigger.position-top-left { left: 24px; bottom: auto; top: 24px; }
#pai-trigger:hover {
transform: scale(1.08);
box-shadow: var(--pai-w-shadow);
}
.pai-trigger-inner {
width: 46px;
height: 46px;
border-radius: var(--pai-w-radius-circle);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.pai-trigger-label {
font-size: 13px;
font-weight: 700;
color: var(--pai-w-text-on-accent);
font-family: var(--pai-w-font);
position: absolute;
transition: opacity var(--pai-w-transition), transform var(--pai-w-transition);
letter-spacing: 0.02em;
}
.pai-trigger-close-icon {
position: absolute;
opacity: 0;
transform: rotate(-45deg) scale(0.6);
transition: opacity var(--pai-w-transition), transform var(--pai-w-transition);
display: flex;
}
/* Keep avatar visible when open, no X icon */
#pai-trigger.open .pai-trigger-label { opacity: 0; transform: scale(0.5); }
#pai-trigger.open .pai-trigger-close-icon { opacity: 0 !important; }
/* Pulse ring — only when closed */
#pai-trigger::after {
content: '';
position: absolute;
inset: -4px;
border-radius: var(--pai-w-radius-circle);
border: 2px solid var(--pai-pulse-border-color, currentColor);
opacity: 0;
animation: pai-pulse 3s ease-in-out infinite;
pointer-events: none;
}
#pai-trigger.open::after { animation: none; opacity: 0; }
/* Disable pulse when no-pulse option is set */
#pressona-ai-root.pai-no-pulse #pai-trigger::after {
animation: none !important;
opacity: 0 !important;
display: none !important;
}
/* When chat is open, sink trigger behind the chat window so close icon doesn't float over content */
#pai-trigger.open { z-index: var(--pai-w-z-trigger-open); }
@keyframes pai-pulse {
0%,100% { opacity: 0; transform: scale(1); }
50% { opacity: 0.28; transform: scale(1.22); }
}
/* ── CHAT WINDOW ─────────────────────────────────────────────── */
#pai-window {
position: fixed;
bottom: 0;
z-index: var(--pai-w-z-window);
display: flex;
flex-direction: column;
background: var(--pai-w-bg);
container-type: inline-size;
container-name: pai-window;
/* True full-screen panel — no max-height cap */
width: min(720px, 100vw);
height: 100vh;
height: 100dvh;
border-radius: 0;
box-shadow: var(--pai-w-shadow-window-side);
opacity: 0;
pointer-events: none;
transform: translateX(40px);
transition: opacity var(--pai-w-transition), transform var(--pai-w-transition);
}
#pai-window.position-bottom-right {
right: 0;
transform: translateX(40px);
border-left: 1px solid var(--pai-w-overlay-soft);
}
#pai-window.position-bottom-left {
left: 0;
transform: translateX(-40px);
border-right: 1px solid var(--pai-w-overlay-soft);
}
#pai-window.position-center {
left: 50%;
transform: translateX(-50%) translateY(30px) scale(0.97);
border: 1px solid var(--pai-w-overlay-soft);
border-radius: var(--pai-w-radius-4xl) var(--pai-w-radius-4xl) 0 0;
box-shadow: var(--pai-w-shadow-window);
}
#pai-window.open {
opacity: 1;
pointer-events: all;
transform: translateX(0);
}
#pai-window.position-center.open {
transform: translateX(-50%) translateY(0) scale(1);
}
/* ── HEADER ─────────────────────────────────────────────────── */
.pai-win-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 18px 18px 16px;
flex-shrink: 0;
border-bottom: 1px solid var(--pai-w-overlay-soft);
gap: 12px;
}
.pai-win-header-left {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
}
/* Avatar in header — large, circular, supports photo or initials */
.pai-win-avatar {
width: 52px;
height: 52px;
border-radius: var(--pai-w-radius-circle);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: var(--pai-w-text-on-accent);
flex-shrink: 0;
font-family: var(--pai-w-font);
overflow: hidden;
border: 2px solid var(--pai-w-overlay-soft);
}
.pai-win-avatar-initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: var(--pai-w-text-on-accent);
}
.pai-avatar-img { object-fit: cover; display: block; }
.pai-avatar-img-header { width: 52px; height: 52px; border-radius: var(--pai-w-radius-circle); }
.pai-avatar-img-trigger { width: 46px; height: 46px; border-radius: var(--pai-w-radius-circle); object-fit: cover; }
.pai-avatar-img-msg { width: 30px; height: 30px; border-radius: var(--pai-w-radius-circle); }
/* Header info col */
.pai-win-header-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pai-win-header-top {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
}
.pai-win-status-icon { font-size: 15px; flex-shrink: 0; }
.pai-win-tagline {
font-size: 14px;
font-weight: 600;
color: var(--pai-w-text-on-accent);
font-family: var(--pai-w-font);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pai-win-online {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--pai-w-overlay-strong);
font-family: var(--pai-w-font);
flex-shrink: 0;
}
.pai-status-dot {
width: 7px;
height: 7px;
border-radius: var(--pai-w-radius-circle);
background: var(--pai-w-success);
flex-shrink: 0;
box-shadow: 0 0 6px var(--pai-w-success);
}
/* Contact action button in header */
.pai-win-action-btn {
flex-shrink: 0;
border: none;
border-radius: var(--pai-w-radius-action);
padding: 7px 16px;
font-size: 13px;
font-weight: 600;
color: var(--pai-w-text-on-accent);
cursor: pointer;
transition: filter var(--pai-w-transition), transform var(--pai-w-transition);
font-family: var(--pai-w-font);
white-space: nowrap;
}
.pai-win-action-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* Close button */
.pai-win-close {
background: var(--pai-w-overlay-soft);
border: none;
color: var(--pai-w-overlay-strong);
width: 30px;
height: 30px;
border-radius: var(--pai-w-radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--pai-w-transition), color var(--pai-w-transition);
flex-shrink: 0;
}
.pai-win-close:hover { background: var(--pai-w-overlay-soft); color: var(--pai-w-text-on-accent); }
/* ── MESSAGES ───────────────────────────────────────────────── */
.pai-messages {
flex: 1;
overflow-y: scroll; /* scroll not auto — always creates scroll context */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain; /* stops page scroll bleeding through */
padding: 32px 28px 16px;
display: flex;
flex-direction: column;
gap: 0;
scrollbar-width: thin;
scrollbar-color: var(--pai-w-scrollbar) transparent;
min-height: 0;
/* Ensure touch events are captured */
touch-action: pan-y;
}
.pai-messages::-webkit-scrollbar { width: 4px; }
.pai-messages::-webkit-scrollbar-track { background: transparent; }
.pai-messages::-webkit-scrollbar-thumb { background: var(--pai-w-scrollbar); border-radius: var(--pai-w-radius-xs); }
/* ── MESSAGE ROWS ───────────────────────────────────────────── */
.pai-msg {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 8px 0;
width: 100%;
animation: pai-msg-in var(--pai-w-transition);
}
@keyframes pai-msg-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* AI messages */
.pai-msg-ai { flex-direction: row; }
.pai-msg-ai .pai-bubble {
flex: 1;
background: transparent;
color: var(--pai-w-text);
font-size: 15px;
line-height: 1.8;
padding: 0 0 8px;
font-family: var(--pai-w-font);
}
/* User messages */
.pai-msg-user {
flex-direction: row-reverse;
padding: 12px 0;
}
.pai-msg-user .pai-bubble {
max-width: 70%;
padding: 11px 16px;
border-radius: var(--pai-w-radius-5xl) var(--pai-w-radius-5xl) var(--pai-w-radius-sm) var(--pai-w-radius-5xl);
font-size: 15px;
line-height: 1.6;
color: var(--pai-w-text-on-accent);
word-break: break-word;
font-family: var(--pai-w-font);
}
.pai-msg-user .pai-msg-avatar { display: none; }
/* Turn separator */
.pai-msg-user + .pai-msg-ai {
margin-top: 16px;
padding-top: 20px;
border-top: 1px solid var(--pai-w-overlay-soft);
}
/* Avatar */
.pai-msg-avatar {
width: 30px;
height: 30px;
border-radius: var(--pai-w-radius-circle);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: var(--pai-w-text-on-accent);
flex-shrink: 0;
margin-top: 3px;
font-family: var(--pai-w-font);
}
/* Rich text inside bubbles — #pressona-ai-root prefix beats theme resets */
#pressona-ai-root .pai-bubble p { margin-bottom: 12px; }
#pressona-ai-root .pai-bubble p:last-child { margin-bottom: 0; }
#pressona-ai-root .pai-bubble strong { color: var(--pai-w-text-on-accent); font-weight: 600; }
#pressona-ai-root .pai-bubble em { font-style: italic; opacity: 0.85; }
#pressona-ai-root .pai-bubble h3,
#pressona-ai-root .pai-bubble h4,
#pressona-ai-root .pai-bubble h5 { font-weight: 600; color: var(--pai-w-text-on-accent); margin: 14px 0 4px; line-height: 1.3; font-family: var(--pai-w-font); }
#pressona-ai-root .pai-bubble h3 { font-size: 15px; }
#pressona-ai-root .pai-bubble h4 { font-size: 14px; }
#pressona-ai-root .pai-bubble h5 { font-size: 13px; }
#pressona-ai-root .pai-bubble h3:first-child,
#pressona-ai-root .pai-bubble h4:first-child,
#pressona-ai-root .pai-bubble h5:first-child { margin-top: 0; }
.pai-bubble a {
color: var(--pai-widget-link-color);
text-decoration: underline;
text-underline-offset: 2px;
}
.pai-bubble a:hover { opacity: 0.8; }
#pressona-ai-root .pai-bubble ul,
#pressona-ai-root .pai-bubble ol { padding-left: 22px; margin: 10px 0; list-style-position: outside; }
#pressona-ai-root .pai-bubble ul { list-style-type: disc; }
#pressona-ai-root .pai-bubble ol { list-style-type: decimal; }
#pressona-ai-root .pai-bubble li { line-height: 1.7; margin-bottom: 6px; }
#pressona-ai-root .pai-bubble li:last-child { margin-bottom: 0; }
.pai-bubble code {
background: var(--pai-w-overlay-soft);
padding: 2px 6px;
border-radius: var(--pai-w-radius-sm);
font-size: 13px;
font-family: var(--pai-w-font-mono);
}
/* ── CITATIONS + SOURCES (v4.15.0) ──────────────────────────── */
/*
* `[N]` superscript chips inline in the bubble, plus a quiet
* "What I checked" disclosure below the message. Server validates
* which [N] markers are real before shipping the sources array,
* so anything we render here is guaranteed grounded — design can
* lean confident and small.
*/
.pai-cite {
display: inline;
font-size: 0.75em;
line-height: 1;
margin: 0 1px;
vertical-align: super;
}
.pai-cite a {
color: var(--pai-widget-link-color);
text-decoration: none;
padding: 0 2px;
border-radius: 3px;
transition: background var(--pai-w-transition);
}
.pai-cite a:hover {
background: var(--pai-w-overlay-soft);
}
.pai-sources-disclosure {
/* Sibling-row placement — full conversation width below the
* .pai-msg row, indented past the avatar column to align with
* the bubble (matches the follow-up-chip + tool-trail pattern). */
margin: 4px 0 8px 36px;
font-size: 12px;
color: var(--pai-w-text-muted);
line-height: 1.5;
}
.pai-sources-summary {
display: inline-flex;
align-items: center;
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
font: inherit;
opacity: 0.75;
transition: opacity var(--pai-w-transition);
}
.pai-sources-summary:hover,
.pai-sources-summary:focus-visible,
.pai-sources-summary[aria-expanded="true"] {
opacity: 1;
outline: none;
}
.pai-sources-summary-label {
border-bottom: 1px dotted currentColor;
}
/* Chevron — CSS-only square with two borders, rotated to point
* right (collapsed) or down (expanded). Lives outside the dotted-
* underline so the rotation doesn't drag the underline with it. */
.pai-disclosure-chevron {
display: inline-block;
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transform-origin: 65% 65%;
margin-right: 8px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
[data-expanded="true"] > .pai-sources-summary > .pai-disclosure-chevron,
[data-expanded="true"] > .pai-msg-paste-toggle > .pai-disclosure-chevron {
transform: rotate(45deg);
}
/* Smooth expand: grid-template-rows 0fr ↔ 1fr lets the browser
* interpolate the actual content height. Inner panel needs
* overflow:hidden so its content clips during the transition. */
.pai-sources-panel-wrap {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}
.pai-sources-disclosure[data-expanded="true"] .pai-sources-panel-wrap {
grid-template-rows: 1fr;
opacity: 1;
}
.pai-sources-panel {
overflow: hidden;
margin-top: 8px;
padding: 10px 12px;
background: var(--pai-w-overlay-soft);
border-radius: var(--pai-w-radius-sm);
}
.pai-sources-panel-heading {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--pai-w-text-muted);
margin-bottom: 6px;
}
.pai-sources-list {
list-style: none;
margin: 0;
padding: 0;
}
.pai-sources-item {
margin: 0 0 4px;
padding: 0;
line-height: 1.5;
}
.pai-sources-item:last-child {
margin-bottom: 0;
}
.pai-sources-link {
color: var(--pai-widget-link-color);
text-decoration: none;
font-weight: 500;
}
.pai-sources-link:hover {
text-decoration: underline;
}
.pai-sources-meta {
color: var(--pai-w-text-muted);
font-size: 11px;
}
.pai-sources-item[data-health]:not([data-health="readable"]) .pai-sources-link {
color: var(--pai-w-text-muted);
text-decoration: line-through;
}
.pai-sources-health {
display: inline-block;
font-size: 10px;
line-height: 1.4;
padding: 1px 6px;
border-radius: 999px;
background: var(--pai-w-overlay-medium);
color: var(--pai-w-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: 2px;
vertical-align: middle;
}
.pai-sources-health-blocked,
.pai-sources-health-login-required {
background: var(--pai-w-danger-tint);
color: var(--pai-w-danger-text-soft);
}
.pai-sources-health-js-shell,
.pai-sources-health-unsupported {
background: var(--pai-w-warning-tint);
color: var(--pai-w-warning-text);
}
.pai-sources-health-failed {
background: var(--pai-w-overlay-medium);
color: var(--pai-w-text-muted);
}
.pai-sources-hint {
margin-top: 2px;
font-size: 11px;
line-height: 1.45;
color: var(--pai-w-text-muted);
}
/* ── ASSISTANT MARKDOWN IMAGES (v4.15.0) ───────────────────── */
/*
* Inline images the assistant emits via `` markdown —
* primarily portfolio project thumbnails surfaced from the Identity
* prompt. Constrained to bubble width with a soft radius so they
* sit cleanly inside a chat bubble. Click → opens lightbox.
*/
.pai-md-image {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--pai-w-radius-sm);
margin: 8px 0;
cursor: zoom-in;
transition: transform var(--pai-w-transition);
}
.pai-md-image:hover {
transform: scale(1.01);
}
/* When the assistant wraps an image in a markdown link
* (`[](project_url)`), the resulting wraps the
* ![]()
. We don't want the anchor's underline / inherited blue. */
.pai-bubble a:has(.pai-md-image) {
display: block;
text-decoration: none;
color: inherit;
}
/* ── IMAGE LIGHTBOX (v4.15.0) ──────────────────────────────── */
/*
* Full-screen overlay shown when the visitor clicks any
* `.pai-md-image`. Foot bar carries an optional "View project →"
* CTA when the image was wrapped in a project URL. */
.pai-image-lightbox {
position: fixed;
inset: 0;
z-index: 2147483647; /* sit above everything, including the chat window */
background: rgba(0, 0, 0, 0.92);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
}
.pai-image-lightbox-stage {
flex: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
#pai-image-lightbox-img {
max-width: 100%;
max-height: 100%;
border-radius: var(--pai-w-radius-sm);
box-shadow: var(--pai-w-shadow-elevated);
}
.pai-image-lightbox-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
max-width: 800px;
margin-top: 16px;
padding: 0 8px;
}
.pai-image-lightbox-caption {
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pai-image-lightbox-cta {
appearance: none;
color: var(--pai-w-text-on-accent);
border-radius: 999px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
flex-shrink: 0;
transition: filter var(--pai-w-transition), transform var(--pai-w-transition);
}
.pai-image-lightbox-cta:hover,
.pai-image-lightbox-cta:focus-visible {
filter: brightness(1.1);
transform: scale(1.03);
outline: none;
}
.pai-image-lightbox-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--pai-w-transition), border-color var(--pai-w-transition);
}
.pai-image-lightbox-close:hover,
.pai-image-lightbox-close:focus-visible {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.45);
outline: none;
}
/* ── USER BUBBLE LINKS (v4.15.0) ───────────────────────────── */
/*
* URLs pasted by the visitor render as `` in
* their own bubble (which has the accent colour as background). We
* inherit text colour so the link stays readable on the accent
* surface, and underline so the URL is recognisable as a link.
*/
.pai-user-link {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
word-break: break-word;
}
.pai-user-link:hover,
.pai-user-link:focus-visible {
text-decoration-thickness: 2px;
outline: none;
}
/* ── PASTE COLLAPSE (v4.15.0) ──────────────────────────────── */
/*
* Large pasted text (logs, transcripts, doc bodies) collapses to a
* preview + "Show full text" toggle so a single paste doesn't
* dominate the conversation. The full content is still in the
* messages array sent to the model — the collapse is visual only.
*
* Animation: the "rest" wrapper uses the grid-template-rows 0fr ↔
* 1fr trick so the rest of the paste smoothly slides in/out below
* the preview. The chevron in the toggle button rotates 90° between
* collapsed (right) and expanded (down).
*/
.pai-bubble.pai-bubble-has-paste {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.pai-msg-paste-preview,
.pai-msg-paste-rest {
white-space: pre-wrap;
word-break: break-word;
width: 100%;
}
/* Soft fade at the bottom of the preview when collapsed, hinting
* more content below. Removed once expanded so the seam between
* preview + rest doesn't visibly fade. */
.pai-bubble-has-paste:not([data-expanded="true"]) .pai-msg-paste-preview {
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.pai-msg-paste-rest-wrap {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
width: 100%;
}
.pai-msg-paste-rest {
overflow: hidden;
}
.pai-bubble-has-paste[data-expanded="true"] .pai-msg-paste-rest-wrap {
grid-template-rows: 1fr;
opacity: 1;
}
.pai-msg-paste-toggle {
display: inline-flex;
align-items: center;
appearance: none;
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
font: inherit;
font-size: 11px;
opacity: 0.85;
padding: 4px 0;
transition: opacity var(--pai-w-transition);
}
.pai-msg-paste-toggle:hover,
.pai-msg-paste-toggle:focus-visible {
opacity: 1;
outline: none;
}
.pai-msg-paste-toggle-label {
border-bottom: 1px dotted currentColor;
}
/* ── FETCH CONFIRMATION (v4.15.0) ──────────────────────────── */
/*
* Two-button approval surface that appears below the assistant's
* bubble when the model emits a `[[PAI_FETCH_CONFIRM_*]]` envelope.
* Server validates URL shape and records approval into a per-
* conversation transient before the tool gate trusts it.
*/
.pai-fetch-confirm {
margin: 6px 0 6px 36px;
padding: 10px 12px;
background: var(--pai-w-overlay-soft);
border: 1px solid var(--pai-w-border-chip);
border-radius: var(--pai-w-radius-sm);
font-size: 13px;
color: var(--pai-w-text);
}
.pai-fetch-confirm-meta {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 8px;
line-height: 1.4;
}
.pai-fetch-confirm-icon {
flex-shrink: 0;
}
.pai-fetch-confirm-host {
font-weight: 600;
}
.pai-fetch-confirm-reason {
color: var(--pai-w-text-muted);
}
.pai-fetch-confirm-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pai-fetch-confirm-btn {
appearance: none;
background: transparent;
border: 1px solid var(--pai-w-border-chip);
border-radius: 999px;
color: var(--pai-w-text);
cursor: pointer;
font: inherit;
font-size: 12px;
padding: 5px 12px;
transition: background var(--pai-w-transition), border-color var(--pai-w-transition), color var(--pai-w-transition);
}
.pai-fetch-confirm-btn:hover:not(:disabled),
.pai-fetch-confirm-btn:focus-visible:not(:disabled) {
border-color: var(--pai-widget-link-color);
outline: none;
}
.pai-fetch-confirm-btn:disabled {
opacity: 0.5;
cursor: default;
}
.pai-fetch-confirm-allow {
background: var(--pai-widget-link-color);
border-color: var(--pai-widget-link-color);
color: var(--pai-w-text-on-accent);
}
.pai-fetch-confirm-allow:hover:not(:disabled) {
filter: brightness(0.95);
}
.pai-fetch-confirm-decline {
color: var(--pai-w-text-muted);
}
/* ── FOLLOW-UP CHIPS (v4.15.0) ──────────────────────────────── */
/*
* Suggested follow-up questions rendered as click-to-send chips
* directly below the assistant's bubble. Server caps + sanitises
* before they ever reach the widget. Click sends the chip text as a
* new visitor message and tears down the whole row.
*/
.pai-followups {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 6px 36px; /* aligns past the avatar column */
}
.pai-followup-chip {
appearance: none;
background: var(--pai-w-overlay-soft);
border: 1px solid var(--pai-w-border-chip);
border-radius: 999px;
color: var(--pai-w-text);
cursor: pointer;
font: inherit;
font-size: 12px;
line-height: 1.3;
max-width: 100%;
padding: 6px 12px;
text-align: left;
transition: background var(--pai-w-transition), border-color var(--pai-w-transition), transform var(--pai-w-transition);
white-space: normal;
}
.pai-followup-chip:hover,
.pai-followup-chip:focus-visible {
background: var(--pai-w-overlay-medium);
border-color: var(--pai-widget-link-color);
outline: none;
}
.pai-followup-chip:active {
transform: translateY(1px);
}
/* ── TRANSPARENCY TRAIL (v4.15.0) ───────────────────────────── */
/*
* Per-tool dimmed line above the assistant bubble — shown only when
* the admin opts into the transparency setting. One line per tool
* call; a small dot toggles between "running" (pulsing) and "done"
* (filled) so the visitor sees activity without it competing with
* the answer text.
*/
.pai-tool-trail {
margin: 4px 0 2px 36px; /* aligns past the avatar column */
font-size: 11px;
color: var(--pai-w-text-muted);
line-height: 1.5;
opacity: 0.85;
}
.pai-tool-trail-line {
display: flex;
align-items: center;
gap: 6px;
padding: 1px 0;
}
.pai-tool-trail-mark {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pai-w-text-muted);
flex-shrink: 0;
opacity: 0.6;
}
.pai-tool-trail-line[data-status="running"] .pai-tool-trail-mark {
animation: pai-tool-trail-pulse 1.1s ease-in-out infinite;
}
.pai-tool-trail-line[data-status="error"] .pai-tool-trail-mark {
background: var(--pai-w-danger);
opacity: 0.7;
}
.pai-tool-trail-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes pai-tool-trail-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* ── STREAMING CURSOR ───────────────────────────────────────── */
.pai-cursor {
display: inline;
width: auto;
height: auto;
background: none;
color: var(--pai-w-text-muted);
margin-left: 1px;
vertical-align: baseline;
font-weight: 300;
animation: pai-blink 0.9s step-end infinite;
}
/* Inline embed streaming cursor — CSS ::after so it flows with the last element's text */
.pai-typing-cursor::after {
content: '|';
display: inline;
color: var(--pai-w-text-muted);
margin-left: 1px;
vertical-align: baseline;
font-weight: 300;
animation: pai-blink 0.9s step-end infinite;
}
@keyframes pai-blink {
0%,100% { opacity: 1; }
50% { opacity: 0; }
}
/* ── TYPING DOTS ────────────────────────────────────────────── */
.pai-typing-dots {
display: flex;
gap: 5px;
align-items: center;
padding: 6px 0 12px;
height: 40px;
}
.pai-typing-dots span {
width: 7px;
height: 7px;
border-radius: var(--pai-w-radius-circle);
background: var(--pai-w-typing-dot);
animation: pai-bounce 1.4s ease-in-out infinite;
}
.pai-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.pai-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes pai-bounce {
0%,60%,100% { transform: translateY(0); background: var(--pai-w-typing-dot); }
30% { transform: translateY(-7px); background: var(--pai-w-typing-dot-up); }
}
/* ── PROMPT CHIPS ───────────────────────────────────────────── */
.pai-chips {
padding: 0 24px 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
flex-shrink: 0;
}
.pai-chip {
background: var(--pai-w-surface-chip);
border: 1px solid var(--pai-w-border-chip);
border-radius: var(--pai-w-radius-pill);
padding: 8px 16px;
font-size: 13px;
color: var(--pai-w-text-muted);
cursor: pointer;
transition: all var(--pai-w-transition);
white-space: nowrap;
font-family: var(--pai-w-font);
}
.pai-chip:hover { background: var(--pai-w-surface-chip-hover); border-color: var(--pai-w-border-chip-hover); color: var(--pai-w-text-on-accent); }
.pai-chips.is-disabled .pai-chip { opacity: 0.45; pointer-events: none; cursor: default; }
.pai-chips.is-disabled .pai-chip:hover { background: var(--pai-w-surface-chip); border-color: var(--pai-w-border-chip); color: var(--pai-w-text-muted); }
/* ── INPUT AREA ─────────────────────────────────────────────── */
.pai-input-wrap {
padding: 12px 20px 20px;
background: var(--pai-w-bg);
border-top: 1px solid var(--pai-w-overlay-soft);
flex-shrink: 0;
}
.pai-input-box {
display: flex;
align-items: center;
gap: 10px;
background: var(--pai-w-surface-input);
border: 1px solid var(--pai-w-border-input);
border-radius: var(--pai-w-radius-4xl);
padding: 10px 10px 10px 18px;
transition: border-color var(--pai-w-transition);
}
.pai-input-box:focus-within { border-color: var(--pai-w-border-input-focus); }
#pai-input {
flex: 1;
background: transparent;
border: none;
color: var(--pai-w-text-input);
font-size: 15px;
font-family: var(--pai-w-font);
resize: none;
outline: none;
min-height: 22px;
line-height: 1.55;
padding: 0;
overflow-y: hidden;
/* Slim scrollbar for when auto-resize hits the 160px cap */
scrollbar-width: thin;
scrollbar-color: var(--pai-w-overlay-medium) transparent;
}
#pai-input::-webkit-scrollbar { width: 4px; }
#pai-input::-webkit-scrollbar-track { background: transparent; }
#pai-input::-webkit-scrollbar-thumb { background: var(--pai-w-overlay-medium); border-radius: 2px; }
#pai-input::placeholder { color: var(--pai-w-text-placeholder); }
/* Send / Stop dual-state button */
#pai-send {
width: 36px;
height: 36px;
border-radius: var(--pai-w-radius-circle);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--pai-w-transition), filter var(--pai-w-transition), transform var(--pai-w-transition);
flex-shrink: 0;
opacity: 0.3;
padding: 0;
}
#pai-send:not(:disabled) { opacity: 1; }
#pai-send:not(:disabled):hover { filter: brightness(1.1); transform: scale(1.05); }
#pai-send:disabled { cursor: not-allowed; }
/* Stop mode — visually distinct from send so the visitor knows the
* button has switched roles mid-stream. Inverts the colour scheme
* (dark fill, accent ring), grows the square icon, and pulses an
* accent-coloured halo so it reads as an active "click to stop"
* affordance rather than a regular "send" button. The inline
* `style="background:${accent}"` we set at render time has higher
* specificity than a class selector — `!important` is the cleanest
* way to override that one inline rule for the duration of streaming. */
#pai-send.pai-btn-stop {
opacity: 1;
background: var(--pai-w-bg) !important;
box-shadow: inset 0 0 0 2px var(--pai-widget-link-color);
animation: pai-stop-pulse 1.4s ease-in-out infinite;
}
#pai-send.pai-btn-stop:hover {
filter: none;
transform: scale(1.05);
background: var(--pai-w-overlay-soft) !important;
}
@keyframes pai-stop-pulse {
0%,100% { box-shadow: inset 0 0 0 2px var(--pai-widget-link-color),
0 0 0 0 color-mix(in srgb, var(--pai-widget-link-color) 35%, transparent); }
50% { box-shadow: inset 0 0 0 2px var(--pai-widget-link-color),
0 0 0 8px color-mix(in srgb, var(--pai-widget-link-color) 0%, transparent); }
}
/* Stop icon needs to take the accent colour (button BG is now dark). */
#pai-send.pai-btn-stop .pai-stop-icon svg { fill: var(--pai-widget-link-color); }
.pai-send-icon, .pai-stop-icon {
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* ── PASTE TILES (image + text) — appear above the composer row ─── */
.pai-paste-tiles {
display: flex;
gap: 8px;
padding: 0 16px 8px;
flex-wrap: wrap;
}
.pai-paste-tile {
position: relative;
width: 100px;
height: 78px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--pai-w-overlay-soft);
flex-shrink: 0;
background: var(--pai-w-surface-chip-soft);
transition: border-color var(--pai-w-transition);
}
.pai-paste-tile:hover {
border-color: var(--pai-w-overlay-medium);
}
.pai-paste-tile:hover .pai-paste-tile-remove {
opacity: 1;
}
/* Unified preview tile — images and PDFs */
.pai-preview-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* No-image variant (PDF loading state, URL, generic file) */
.pai-preview-tile.pai-no-img {
display: flex;
align-items: center;
justify-content: center;
}
/* Extension badge — bottom-left corner, like Claude */
.pai-preview-tile-badge {
position: absolute;
bottom: 5px;
left: 5px;
background: var(--pai-w-scrim);
color: var(--pai-w-text-on-accent);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 2px 5px;
border-radius: 3px;
backdrop-filter: blur(3px);
pointer-events: none;
line-height: 1.4;
}
/* When there's no image, show the badge centred and larger */
.pai-preview-tile.pai-no-img .pai-preview-tile-badge {
position: static;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.05em;
background: none;
backdrop-filter: none;
color: var(--pai-w-text-muted);
padding: 0;
}
/* Text tile */
.pai-text-paste-tile {
display: flex;
flex-direction: column;
padding: 8px 10px 7px;
gap: 5px;
}
.pai-text-paste-preview {
flex: 1;
font-size: 9.5px;
line-height: 1.45;
color: var(--pai-w-text-muted);
overflow: hidden;
word-break: break-word;
}
.pai-text-paste-badge {
flex: 0 0 auto;
align-self: flex-start;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--pai-w-text-subtle);
text-transform: uppercase;
background: var(--pai-w-overlay-soft);
border-radius: 4px;
padding: 2px 5px;
line-height: 1.4;
}
/* Shared remove button — hidden until tile hover */
.pai-paste-tile-remove {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: var(--pai-w-scrim);
color: var(--pai-w-text-on-accent);
font-size: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
opacity: 0;
backdrop-filter: blur(2px);
transition: opacity var(--pai-w-transition), background var(--pai-w-transition);
}
.pai-paste-tile-remove:hover { background: var(--pai-w-scrim); opacity: 1; }
/* ── PASTE PREVIEW OVERLAY ───────────────────────────────────────── */
.pai-paste-overlay {
position: absolute;
inset: 0;
background: var(--pai-w-scrim);
z-index: var(--pai-w-z-overlay, 10);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(4px);
}
.pai-paste-modal {
position: relative;
background: var(--pai-w-bg);
border-radius: var(--pai-w-radius-2xl);
width: 100%;
max-height: calc(100% - 40px);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--pai-w-shadow-elevated);
border: 1px solid var(--pai-w-overlay-soft);
}
.pai-paste-modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border-radius: var(--pai-w-radius-circle);
border: none;
background: var(--pai-w-overlay-soft);
color: var(--pai-w-text-muted);
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 1;
transition: background var(--pai-w-transition), color var(--pai-w-transition);
}
.pai-paste-modal-close:hover {
background: var(--pai-w-overlay-medium);
color: var(--pai-w-text);
}
/* Modal header: filename + page count */
.pai-paste-modal-header {
display: flex;
align-items: baseline;
gap: 8px;
padding: 14px 48px 0 16px;
flex-shrink: 0;
}
.pai-paste-modal-filename {
font-size: 14px;
font-weight: 600;
color: var(--pai-w-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.pai-paste-modal-meta {
font-size: 12px;
color: var(--pai-w-text-faint-light);
flex-shrink: 0;
}
.pai-paste-modal-body {
padding: 14px 16px 16px;
overflow-y: auto;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.pai-paste-modal-body img {
max-width: 100%;
max-height: 60vh;
object-fit: contain;
border-radius: var(--pai-w-radius-lg);
display: block;
}
.pai-paste-modal-body pre {
margin: 0;
font-family: var(--pai-w-font-mono, monospace);
font-size: 13px;
line-height: 1.6;
color: var(--pai-w-text);
white-space: pre-wrap;
word-break: break-word;
width: 100%;
text-align: left;
}
.pai-powered {
text-align: center;
padding: 8px 0 0;
font-size: 11px;
color: var(--pai-w-text-faint);
font-family: var(--pai-w-font);
}
/* ── INLINE PROMPT SHORTCODE ─────────────────────────────────── */
.pai-inline-prompt {
display: inline-flex;
flex-direction: column;
gap: 6px;
width: 100%;
max-width: 680px;
transition: opacity var(--pai-w-transition), transform var(--pai-w-transition);
}
.pai-inline-prompt.pai-inline-launching {
opacity: 0;
transform: translateY(-6px) scale(0.99);
pointer-events: none;
}
/* Persistent hidden state while chat window is open */
.pai-inline-prompt.pai-inline-hidden {
opacity: 0;
transform: translateY(4px);
pointer-events: none;
}
.pai-inline-label {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.65;
margin-bottom: 6px;
}
.pai-inline-form {
display: flex;
align-items: center;
}
.pai-inline-input {
flex: 1;
background: transparent;
border: none;
outline: none;
/* font-size and color intentionally NOT set here — controlled by theme or admin dynamic CSS */
font-family: inherit;
font-weight: inherit;
padding: 0;
line-height: 1.4;
min-width: 0;
}
.pai-inline-submit {
flex-shrink: 0;
border: none;
cursor: pointer;
min-width: 44px;
height: 44px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
margin-left: 14px;
/* Color, background, border-radius, and hover effects applied inline via Settings > Embed */
}
/* ── RESPONSIVE — VIEWPORT: full-width on mobile screens ────── */
/* Only the window geometry changes here — content rules use @container below */
@media (max-width: 768px) {
#pai-window {
width: 100vw !important;
border-radius: 0 !important;
border: none !important;
}
}
/* ── RESPONSIVE — CONTAINER: MEDIUM (≤ 768px panel width) ───── */
/* Fires when the chat panel is ≤ 768px wide, regardless of viewport */
@container pai-window (max-width: 768px) {
.pai-messages { padding: 24px 20px 12px; }
.pai-chips { padding: 0 20px 14px; gap: 7px; }
.pai-input-wrap { padding: 10px 16px 18px; }
}
/* ── RESPONSIVE — CONTAINER: SMALL (≤ 480px panel width) ────── */
@container pai-window (max-width: 480px) {
/* Header */
.pai-win-header {
padding: 10px 12px;
gap: 8px;
}
.pai-win-header-left {
gap: 10px;
}
.pai-win-avatar {
width: 44px;
height: 44px;
font-size: 12px;
}
.pai-avatar-img-header {
width: 44px;
height: 44px;
}
.pai-win-tagline { font-size: 13px; }
.pai-win-action-btn {
padding: 6px 12px;
font-size: 12px;
}
.pai-win-close {
width: 28px;
height: 28px;
}
/* Messages */
.pai-messages {
padding: 18px 16px 10px;
}
.pai-msg { gap: 10px; }
.pai-msg-ai .pai-bubble {
font-size: 14px;
line-height: 1.7;
}
.pai-msg-user .pai-bubble {
font-size: 14px;
max-width: 85%;
padding: 10px 14px;
}
.pai-msg-avatar {
width: 28px;
height: 28px;
font-size: 9px;
}
.pai-avatar-img-msg {
width: 28px;
height: 28px;
}
/* Chips */
.pai-chips { padding: 0 16px 12px; gap: 6px; }
.pai-chip { font-size: 12px; padding: 7px 12px; }
/* Input */
.pai-input-wrap { padding: 8px 12px 14px; }
.pai-input-box { padding: 8px 8px 8px 14px; }
#pai-input { font-size: 14px; }
#pai-send { width: 32px; height: 32px; }
.pai-powered { font-size: 10px; padding: 5px 0 0; }
}
/* ── RESPONSIVE — CONTAINER: VERY SMALL (≤ 360px panel width) ─ */
@container pai-window (max-width: 360px) {
/* Header — scale all elements down proportionally, keep CTA */
.pai-win-header {
padding: 10px;
gap: 6px;
}
.pai-win-header-left {
gap: 8px;
}
.pai-win-avatar {
width: 36px;
height: 36px;
font-size: 11px;
}
.pai-avatar-img-header {
width: 36px;
height: 36px;
}
.pai-win-tagline { font-size: 12px; }
.pai-win-online { display: none; }
/* CTA: keep visible, strip padding down to minimum */
.pai-win-action-btn {
padding: 5px 9px;
font-size: 11px;
border-radius: 14px;
}
.pai-win-close {
width: 26px;
height: 26px;
}
/* Messages */
.pai-messages { padding: 14px 12px 8px; }
.pai-msg { gap: 8px; }
.pai-msg-ai .pai-bubble { font-size: 13px; }
.pai-msg-user .pai-bubble {
font-size: 13px;
padding: 9px 12px;
}
.pai-msg-avatar {
width: 24px;
height: 24px;
font-size: 8px;
}
.pai-avatar-img-msg {
width: 24px;
height: 24px;
}
/* Chips */
.pai-chips { padding: 0 12px 10px; gap: 5px; }
.pai-chip { font-size: 11px; padding: 6px 10px; }
/* Input */
.pai-input-wrap { padding: 7px 10px 12px; }
.pai-input-box { padding: 7px 7px 7px 12px; }
#pai-input { font-size: 13px; }
#pai-send { width: 30px; height: 30px; }
}
/* ── STOP BUTTON (in header, shown while streaming) ─────────── */
.pai-win-header-right {
display: flex;
align-items: center;
gap: 8px;
}
/* ── INTERRUPTED NOTICE ─────────────────────────────────────── */
/*
* Quiet retry affordance after the visitor stops a stream. No
* background, no border, no icon, no "X was interrupted" label —
* the visitor stopped it deliberately, the panel-of-warnings shape
* read as alarmist for what's a normal action. Just a small
* dotted-underline link that matches the rest of the widget's
* disclosure / toggle aesthetic.
*/
.pai-interrupted {
margin: 4px 0 8px 36px;
line-height: 1.5;
animation: pai-msg-in var(--pai-w-transition);
}
.pai-interrupted-retry {
appearance: none;
background: transparent;
border: 0;
color: var(--pai-w-text-muted);
cursor: pointer;
font: inherit;
font-size: 12px;
opacity: 0.75;
padding: 0;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
transition: opacity var(--pai-w-transition);
}
.pai-interrupted-retry:hover,
.pai-interrupted-retry:focus-visible {
opacity: 1;
outline: none;
}
/* ── TRIGGER TOOLTIP BUBBLE ─────────────────────────────────── */
.pai-tooltip-bubble {
position: fixed;
z-index: var(--pai-w-z-tooltip); /* below trigger but above page */
max-width: 220px;
min-width: 120px;
background: var(--pai-tooltip-bg);
color: var(--pai-tooltip-text);
border-radius: var(--pai-w-radius-3xl);
padding: 10px 14px;
font-family: var(--pai-w-font);
font-size: 13.5px;
font-weight: 500;
line-height: 1.4;
box-shadow: var(--pai-w-shadow-tooltip);
pointer-events: none;
/* Animate in */
opacity: 0;
transform: scale(0.88) translateY(6px);
transition: opacity var(--pai-w-transition), transform var(--pai-w-transition);
transform-origin: bottom right;
}
.pai-tooltip-bubble.position-bottom-left {
transform-origin: bottom left;
}
.pai-tooltip-bubble.visible {
opacity: 1;
transform: scale(1) translateY(0);
}
.pai-tooltip-bubble.hiding {
opacity: 0;
transform: scale(0.9) translateY(4px);
transition: opacity var(--pai-w-transition) ease, transform var(--pai-w-transition) ease;
}
/* Tail pointing to trigger button */
.pai-tooltip-bubble::after {
content: '';
position: absolute;
bottom: -7px;
right: 18px;
width: 14px;
height: 8px;
background: var(--pai-tooltip-bg);
clip-path: polygon(0 0, 100% 0, 50% 100%);
filter: drop-shadow(var(--pai-w-shadow-drop-faint));
}
.pai-tooltip-bubble.position-bottom-left::after {
right: auto;
left: 18px;
}
/* ── PASSIVE FOOTER ──────────────────────────────────────────────────────── */
.pai-passive-footer {
padding: 4px 16px 0;
text-align: center;
}
.pai-passive-save-btn {
background: none;
border: none;
font-size: 11.5px;
color: var(--pai-w-text-subtle);
cursor: pointer;
padding: 4px 8px;
border-radius: var(--pai-w-radius-sm);
opacity: 0.7;
transition: opacity var(--pai-w-transition);
font-family: inherit;
}
.pai-passive-save-btn:hover { opacity: 1; text-decoration: underline; }
/* ── INLINE LEAD WIDGET ──────────────────────────────────────────────────── */
.pai-lead-form { display: none !important; } /* legacy overlay — permanently hidden */
.pai-widget-card {
background: var(--pai-surface, var(--pai-w-bg));
border: 1px solid var(--pai-w-overlay-soft);
border-radius: var(--pai-w-radius-3xl);
padding: 16px 18px;
margin: 8px 0 4px 44px; /* 44px left indent aligns with AI bubble content */
transition: opacity var(--pai-w-transition);
}
.pai-widget-question {
font-size: 13.5px;
line-height: 1.55;
color: var(--pai-w-text);
margin: 0 0 14px;
font-weight: 500;
}
/* Options list */
.pai-widget-options {
display: flex;
flex-direction: column;
gap: 7px;
transition: opacity var(--pai-w-transition), transform var(--pai-w-transition);
}
.pai-widget-opts-exiting {
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
}
.pai-widget-opt {
display: flex;
align-items: center;
gap: 10px;
background: var(--pai-w-overlay-soft);
border: 1px solid var(--pai-w-overlay-soft);
border-radius: var(--pai-w-radius-xl);
padding: 10px 13px;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: var(--pai-w-text);
text-align: left;
width: 100%;
transition: background var(--pai-w-transition), border-color var(--pai-w-transition), transform var(--pai-w-transition);
}
.pai-widget-opt:hover {
background: var(--pai-w-overlay-soft);
border-color: var(--pai-accent, var(--pai-w-accent));
transform: translateX(2px);
}
.pai-widget-opt:active { transform: scale(0.98); }
.pai-widget-opt-num {
flex-shrink: 0;
width: 22px; height: 22px;
background: var(--pai-w-overlay-soft);
border-radius: var(--pai-w-radius-md);
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
color: var(--pai-w-text-subtle);
}
.pai-widget-opt-label { flex: 1; }
.pai-widget-opt-arrow {
color: var(--pai-w-text-subtle);
font-size: 12px;
opacity: 0;
transition: opacity var(--pai-w-transition);
}
.pai-widget-opt:hover .pai-widget-opt-arrow { opacity: 1; }
/* Inline form — fades in after Yes */
.pai-widget-form {
opacity: 0;
transform: translateY(6px);
transition: opacity var(--pai-w-transition), transform var(--pai-w-transition);
}
.pai-widget-form.pai-widget-form-enter { display: block !important; }
.pai-widget-form.pai-widget-form-visible {
opacity: 1;
transform: translateY(0);
}
.pai-widget-input {
display: block;
width: 100%;
box-sizing: border-box;
border: 1px solid var(--pai-w-overlay-soft);
border-bottom: 1px solid var(--pai-w-overlay-medium);
border-radius: var(--pai-w-radius-lg);
padding: 9px 12px;
font-size: 13px;
font-family: inherit;
color: var(--pai-w-text);
background: var(--pai-w-overlay-soft);
margin-bottom: 8px;
outline: none;
transition: border-color var(--pai-w-transition), background var(--pai-w-transition);
/* Override browser autofill white background (Chrome/Safari) */
-webkit-box-shadow: 0 0 0 1000px var(--pai-w-autofill-bg) inset !important;
-webkit-text-fill-color: var(--pai-w-text) !important;
}
.pai-widget-input::placeholder { color: var(--pai-w-text-placeholder); }
.pai-widget-input:focus {
border-color: var(--pai-accent, var(--pai-w-accent));
background: var(--pai-w-overlay-soft);
-webkit-box-shadow: 0 0 0 1000px var(--pai-w-autofill-bg-focus) inset !important;
}
.pai-widget-consent-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12.5px;
color: var(--pai-w-overlay-strong);
line-height: 1.5;
margin-bottom: 14px;
cursor: pointer;
}
.pai-widget-consent-label input[type="checkbox"] {
flex-shrink: 0;
margin-top: 1px;
width: 18px;
height: 18px;
accent-color: var(--pai-accent, var(--pai-w-accent));
cursor: pointer;
}
.pai-widget-consent-label a {
color: var(--pai-accent, var(--pai-w-accent));
text-decoration: none;
}
.pai-widget-consent-label a:hover { text-decoration: underline; }
.pai-widget-error {
font-size: 12px;
color: var(--pai-w-danger-text);
background: var(--pai-w-danger-tint);
border: 1px solid var(--pai-w-danger);
border-radius: var(--pai-w-radius-md);
padding: 7px 10px;
margin-bottom: 10px;
}
.pai-widget-submit {
display: block;
width: 100%;
padding: 10px 16px;
border: none;
border-radius: var(--pai-w-radius-lg);
color: var(--pai-w-text-on-accent);
font-size: 13.5px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: opacity var(--pai-w-transition), transform 0.1s;
margin-top: 4px;
}
.pai-widget-submit:hover { opacity: 0.9; }
.pai-widget-submit:active { transform: scale(0.98); }
.pai-widget-submit:disabled { opacity: 0.55; cursor: default; }
/* Dismissed / success states */
.pai-widget-dismissed,
.pai-widget-success {
font-size: 13px;
line-height: 1.5;
margin: 0;
padding: 0;
color: var(--pai-w-success-text);
}
.pai-widget-dismissing { opacity: 0.4; transition: opacity var(--pai-w-transition); }
/* ── TEST MODE BADGE ─────────────────────────────────────────────────────── */
.pai-test-badge {
display: inline-flex;
align-items: center;
align-self: center;
flex-shrink: 0;
background: var(--pai-w-warning);
color: var(--pai-w-bg);
font-size: 10px;
font-weight: 800;
font-family: inherit;
letter-spacing: 0.08em;
padding: 2px 8px;
border: none;
border-radius: var(--pai-w-radius-sm);
cursor: pointer;
white-space: nowrap;
opacity: 0.92;
transition: opacity var(--pai-w-transition);
margin-left: 8px;
}
.pai-test-badge:hover { opacity: 1; }
.pai-test-badge:disabled { cursor: wait; opacity: 0.6; }
/* ── CLEAR SESSION BUTTON (test mode, admins only) ────────────────────────── */
.pai-widget .pai-clear-session-btn {
display: inline-flex;
align-items: center;
align-self: center;
flex-shrink: 0;
background: transparent;
border: 1px solid currentColor;
border-radius: var(--pai-w-radius-sm);
color: inherit;
cursor: pointer;
font-size: 0.7em;
font-family: inherit;
font-weight: 600;
line-height: 1;
opacity: 0.65;
padding: 3px 7px;
margin-left: 6px;
white-space: nowrap;
transition: opacity var(--pai-w-transition);
}
.pai-widget .pai-clear-session-btn:hover { opacity: 1; }
.pai-widget .pai-clear-session-btn:disabled { opacity: 0.4; cursor: default; }
/* ── CONTACT PREFERENCE & NOTES ──────────────────────────────────────────── */
.pai-contact-pref {
margin-bottom: 10px;
}
.pai-contact-pref-label {
display: block;
font-size: 11px;
color: var(--pai-w-overlay-strong);
margin-bottom: 6px;
}
.pai-contact-pref-opts {
display: flex;
gap: 8px;
}
.pai-contact-opt {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--pai-w-overlay-strong);
cursor: pointer;
background: var(--pai-w-overlay-soft);
border: 1px solid var(--pai-w-overlay-soft);
border-radius: var(--pai-w-radius-md);
padding: 4px 10px;
transition: background var(--pai-w-transition), border-color var(--pai-w-transition);
}
.pai-contact-opt:has(input:checked) {
background: var(--pai-w-accent-tint);
border-color: var(--pai-w-accent-tint);
color: var(--pai-w-text-on-accent);
}
.pai-contact-opt input[type="radio"] {
display: none;
}
.pai-widget-notes {
resize: vertical;
min-height: 60px;
font-family: inherit;
line-height: 1.5;
}
/* ── RATE LIMIT SUPPLEMENT ──────────────────────────────────────────────── */
.pai-rate-supplement { margin-top: 12px; }
.pai-rate-contact,
.pai-rate-action { margin: 6px 0; font-size: 13px; }
.pai-rate-contact a,
.pai-rate-action a { color: var(--pai-widget-link-color); text-decoration: underline; }
/* ── SCREEN READER ONLY ───────────────────────────────────────────────── */
.pai-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── REDUCED MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
#pressona-ai-root *,
#pressona-ai-root *::before,
#pressona-ai-root *::after,
#pai-overlay {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ── INLINE AI RESPONSE SURFACE ──────────────────────────────────────────── */
.pai-inline-answer {
margin: 12px 0;
padding: 16px;
background: var(--pai-w-bg);
border-radius: var(--pai-w-radius-lg, 16px);
border: 1px solid var(--pai-w-overlay-soft);
font-family: inherit;
}
.pai-inline-response {
font-size: 15px;
line-height: 1.7;
color: var(--pai-w-text);
}
/* Rich text inside inline responses — mirrors .pai-bubble rules */
.pai-inline-response p { margin-bottom: 12px; }
.pai-inline-response p:last-child { margin-bottom: 0; }
.pai-inline-response strong { font-weight: 600; }
.pai-inline-response em { font-style: italic; opacity: 0.85; }
.pai-inline-response h3, .pai-inline-response h4, .pai-inline-response h5 { font-weight: 600; margin: 14px 0 4px; line-height: 1.3; }
.pai-inline-response h3 { font-size: 15px; }
.pai-inline-response h4 { font-size: 14px; }
.pai-inline-response h5 { font-size: 13px; }
.pai-inline-response h3:first-child, .pai-inline-response h4:first-child, .pai-inline-response h5:first-child { margin-top: 0; }
.pai-inline-response ul,
.pai-inline-response ol { padding-left: 22px; margin: 10px 0; list-style-position: outside; }
.pai-inline-response ul { list-style-type: disc; }
.pai-inline-response ol { list-style-type: decimal; }
.pai-inline-response li { line-height: 1.7; margin-bottom: 6px; }
.pai-inline-response li:last-child { margin-bottom: 0; }
.pai-inline-response code { background: var(--pai-w-overlay-soft); padding: 2px 6px; border-radius: var(--pai-w-radius-sm, 6px); font-size: 13px; font-family: var(--pai-w-font-mono); }
.pai-inline-error {
font-size: 14px;
color: var(--pai-w-overlay-strong);
}
/* Loading dots */
.pai-inline-loading {
display: flex;
gap: 5px;
padding: 4px 0;
}
.pai-inline-loading span {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--pai-w-overlay-medium);
animation: pai-dot-pulse 1.2s infinite ease-in-out;
}
.pai-inline-loading span:nth-child(2) { animation-delay: 0.2s; }
.pai-inline-loading span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pai-dot-pulse {
0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
/* ── FOCUS CUE — UI rule, not part of transcript ─────────────────────────── */
.pai-focus-cue {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
font-size: 11px;
color: var(--pai-w-overlay-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
pointer-events: none;
user-select: none;
}
.pai-focus-cue::before,
.pai-focus-cue::after {
content: '';
flex: 1;
height: 1px;
background: var(--pai-w-overlay-soft);
}
/* ── INLINE ANSWER LINKS — match the widget bubble link pattern ──────────── */
/* `.pai-bubble a` uses --pai-widget-link-color (populated from cfg.accent in widget.js).
Inline answer links should follow the same configured accent so site-themed colors carry through. */
.pai-inline-response a {
color: var(--pai-widget-link-color);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── INLINE CONTINUE-IN-CHAT BUTTON ──────────────────────────────────────── */
/* Background is set inline via widget.js (btn.style.background = accent) so it matches the
user-configured accent color, same pattern as the send / action / lead-submit buttons.
Hover uses brightness() so the effect works with any accent the user chooses. */
.pai-inline-continue {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
padding: 8px 16px;
color: var(--pai-w-text-on-accent);
border: 0;
border-radius: var(--pai-w-radius, 8px);
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: filter var(--pai-w-transition), transform var(--pai-w-transition);
}
.pai-inline-continue:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
.pai-inline-continue:active {
transform: translateY(0);
opacity: 0.92;
}
.pai-inline-continue:focus-visible {
/* --pai-widget-link-color is set from cfg.accent in widget.js init; falls back to static default */
outline: 2px solid var(--pai-widget-link-color);
outline-offset: 2px;
}
/* ── ATTACHMENTS (v4.7.x) ────────────────────────────────────────────────── */
/* Paperclip button in the composer toolbar */
.pai-attach-btn {
flex: 0 0 auto;
width: 32px;
height: 32px;
margin: 0 4px 0 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--pai-w-text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color var(--pai-w-transition), color var(--pai-w-transition);
}
.pai-attach-btn:hover {
background: var(--pai-w-overlay-soft);
color: var(--pai-w-text);
}
.pai-attach-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Staged attachment chip — sits above the composer while pending */
/* Attachment chip on a sent user bubble (history rendering) */
.pai-attachment-chip {
display: inline-block;
padding: 4px 10px;
margin: 0 0 4px auto;
background: var(--pai-w-surface-input);
border: 1px solid var(--pai-w-overlay-soft);
border-radius: 999px;
font-size: 11.5px;
color: var(--pai-w-text);
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Inline attachment-prompt card — rendered when AI emits show_attachment_prompt */
.pai-attachment-card {
margin: 12px 16px;
padding: 14px;
background: var(--pai-w-surface-input);
border: 1px solid var(--pai-w-overlay-soft);
border-radius: var(--pai-w-radius, 12px);
}
.pai-attachment-card-label {
margin-bottom: 10px;
font-size: 13px;
color: var(--pai-w-text);
font-weight: 500;
}
.pai-attachment-card-file {
display: inline-flex;
align-items: center;
padding: 8px 14px;
margin: 0 8px 8px 0;
background: var(--pai-widget-link-color);
color: var(--pai-w-text-on-accent);
border: 0;
border-radius: var(--pai-w-radius, 8px);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: filter var(--pai-w-transition);
}
.pai-attachment-card-file:hover {
filter: brightness(1.1);
}
.pai-attachment-card-url {
display: flex;
gap: 6px;
margin-top: 4px;
}
.pai-attachment-card-url input[type="url"] {
flex: 1;
padding: 7px 10px;
background: var(--pai-w-bg);
color: var(--pai-w-text);
border: 1px solid var(--pai-w-overlay-soft);
border-radius: 6px;
font-size: 13px;
}
.pai-attachment-card-url button[type="submit"] {
flex: 0 0 32px;
background: var(--pai-widget-link-color);
color: var(--pai-w-text-on-accent);
border: 0;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}