/* Vavoza AI chat. Uses the site's --vz-* tokens (defined by the "MemberPress CSS (New)" snippet), with * the same values as fallbacks so the shortcode page looks right without them. */ #vzai-app { --vzai-surface: var(--vz-surface, #fff); --vzai-line: var(--vz-line, #dce6f2); --vzai-text: var(--vz-text, #333); --vzai-muted: var(--vz-muted, #666); --vzai-tint: var(--vz-tint, #eef5ff); --vzai-paper: var(--vz-paper, #f9f9f9); --vzai-blue: var(--vz-blue, #0970ff); --vzai-gold: var(--vz-gold, #c5a059); --vzai-gradient: var(--vz-gradient, linear-gradient(180deg, #4632da 0%, #0970ff 100%)); --vzai-radius: var(--vz-radius-lg, 16px); --vzai-pill: var(--vz-pill, 100px); --vzai-fill-off: var(--vz-fill-off, inset 0 0 0 999px rgba(70, 50, 218, 0)); --vzai-fill-on: var(--vz-fill-on, inset 0 0 0 999px rgba(70, 50, 218, 1)); --vzai-display: var(--vz-display, "Montserrat", "Inter", system-ui, sans-serif); font-family: var(--vz-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); color: var(--vzai-text); background: var(--vzai-surface); border: 1px solid var(--vzai-line); border-radius: var(--vzai-radius); box-shadow: 0 10px 30px rgba(var(--vz-shadow, 14, 42, 92), .06); max-width: 820px; margin: 0 auto; overflow: hidden; box-sizing: border-box; } #vzai-app *, #vzai-app *::before, #vzai-app *::after { box-sizing: border-box; } #vzai-app .vzai-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--vzai-line); } #vzai-app .vzai-head strong { font-family: var(--vzai-display); font-weight: 800; font-size: 16px; } #vzai-app .vzai-usage { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 180px; font-size: 12px; color: var(--vzai-muted); --vzai-usage-color: var(--vzai-blue); } #vzai-app .vzai-usage[hidden] { display: none; } #vzai-app .vzai-usage-bar { width: 100%; max-width: 220px; height: 6px; border-radius: 999px; background: var(--vzai-line); overflow: hidden; } #vzai-app .vzai-usage-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--vzai-usage-color); transition: width .3s ease; } #vzai-app .vzai-usage-warn { --vzai-usage-color: var(--vzai-gold); } /* 75% and up */ #vzai-app .vzai-usage-high { --vzai-usage-color: #d63638; color: #b32d2e; } /* 90% and up */ /* Answer rating */ #vzai-app .vzai-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--vzai-muted); } #vzai-app .vzai-rate button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--vzai-line); border-radius: 999px; background: transparent; color: var(--vzai-muted); cursor: pointer; } #vzai-app .vzai-rate .vzai-rate-down svg { transform: rotate(180deg); } #vzai-app .vzai-rate button:hover:not(:disabled), #vzai-app .vzai-rate button:focus-visible { color: var(--vzai-blue); border-color: var(--vzai-blue); } #vzai-app .vzai-rate button.vzai-rate-on { color: #fff; background: var(--vzai-blue); border-color: var(--vzai-blue); } #vzai-app .vzai-rate button:disabled:not(.vzai-rate-on) { opacity: .4; cursor: default; } #vzai-app .vzai-rate-why { display: flex; gap: 6px; flex: 1 1 100%; } #vzai-app .vzai-rate-why[hidden], #vzai-app .vzai-rate-done[hidden] { display: none; } #vzai-app .vzai-rate-why input { flex: 1; min-width: 0; padding: 4px 10px; border: 1px solid var(--vzai-line); border-radius: 999px; font: inherit; } #vzai-app .vzai-rate-why button[type="submit"] { width: auto; padding: 0 12px; } /* Secondary: outline pill. */ #vzai-app .vzai-new { background: transparent; color: var(--vzai-text); border: 2px solid var(--vzai-line); border-radius: var(--vzai-pill); padding: 6px 14px; font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: border-color .2s, color .2s; } #vzai-app .vzai-new:hover { border-color: var(--vzai-blue); color: var(--vzai-blue); } #vzai-app .vzai-log { height: 480px; overflow-y: auto; overflow-x: hidden; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--vzai-paper); } #vzai-app .vzai-msg { max-width: 85%; padding: 12px 16px; border-radius: var(--vzai-radius); line-height: 1.55; font-size: 15px; white-space: normal; overflow-wrap: anywhere; } #vzai-app .vzai-msg p { margin: 0 0 8px; } #vzai-app .vzai-msg p:last-child { margin-bottom: 0; } #vzai-app .vzai-msg ul, #vzai-app .vzai-msg ol { margin: 4px 0 8px 20px; padding: 0; } #vzai-app .vzai-msg code { background: var(--vzai-tint); border-radius: 4px; padding: 1px 5px; font-size: .92em; } #vzai-app .vzai-me { align-self: flex-end; background: var(--vzai-gradient); color: #fff; white-space: pre-wrap; border-bottom-right-radius: 4px; } #vzai-app .vzai-bot { align-self: flex-start; background: var(--vzai-surface); border: 1px solid var(--vzai-line); border-bottom-left-radius: 4px; } #vzai-app .vzai-refused { border-left: 3px solid var(--vzai-gold); } #vzai-app .vzai-err { align-self: center; background: #fff4f4; color: #9f1239; font-size: 14px; border: 1px solid #f5d0d6; } #vzai-app .vzai-form { border-top: 1px solid var(--vzai-line); padding: 14px 20px; background: var(--vzai-surface); } /* Input: 2px line border, pill-shaped at one row (26px radius = pill at the 52px minimum height), blue focus ring. */ #vzai-app .vzai-form textarea { display: block; width: 100%; min-height: 52px; max-height: 180px; border: 2px solid var(--vzai-line); border-radius: 26px; padding: 13px 22px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--vzai-text); background: var(--vzai-surface); resize: none; field-sizing: content; outline: none; transition: border-color .2s, box-shadow .2s; } #vzai-app .vzai-form textarea:focus { border-color: var(--vzai-blue); box-shadow: 0 0 0 4px rgba(9, 112, 255, .15); } #vzai-app .vzai-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; } #vzai-app .vzai-count { font-size: 12px; color: var(--vzai-muted); } #vzai-app .vzai-upload { display: inline-flex; align-items: center; width: auto !important; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--vzai-blue); cursor: pointer; } #vzai-app .vzai-upload:focus-within { outline: 2px solid var(--vzai-blue); outline-offset: 2px; border-radius: 4px; } /* Primary: gradient pill, inset violet fill on hover (never swap gradients: it flickers). */ #vzai-app .vzai-send { background: var(--vzai-gradient); color: #fff; border: 0; border-radius: var(--vzai-pill); padding: 12px 26px; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer; box-shadow: var(--vzai-fill-off); transition: box-shadow .25s ease; } #vzai-app .vzai-send:hover, #vzai-app .vzai-send:focus-visible { box-shadow: var(--vzai-fill-on); } #vzai-app .vzai-send:focus-visible { outline: 2px solid var(--vzai-blue); outline-offset: 3px; } #vzai-app .vzai-send:disabled { opacity: .6; cursor: wait; box-shadow: var(--vzai-fill-off); } #vzai-app .vzai-file-info { font-size: 13px; color: var(--vzai-muted); margin-top: 6px; } #vzai-app .vzai-disclaimer { font-size: 12px; color: var(--vzai-muted); padding: 0 20px 14px; margin: 0; background: var(--vzai-surface); } #mepr-account-content .vzai-notice, .vzai-notice { padding: 16px 20px; background: var(--vz-surface, #fff); border: 1px solid var(--vz-line, #dce6f2); border-radius: var(--vz-radius-lg, 16px); font-family: var(--vz-font, "Inter", system-ui, sans-serif); } /* Account page tab: left-aligned in #mepr-account-content like the other tabs. 2.2.0: no page title (the other * account pages dropped theirs too); the chat's own top bar carries the label. Nothing here depends on a header. */ .vzai-account-tab #vzai-app { margin: 0; max-width: 100%; } .vzai-account-tab #vzai-app .vzai-log { height: min(560px, calc(100dvh - var(--vz-top, 0px) - 72px - 330px)); min-height: 320px; } @media (max-width: 839px) { /* Below 840px the header is 64px and the nav is a dropdown. Keep the form pinned to the bottom of * the screen while the page scrolls, so the input stays visible above the keyboard. */ .vzai-account-tab #vzai-app { overflow: visible; } .vzai-account-tab #vzai-app .vzai-log { height: calc(100dvh - var(--vz-top, 0px) - 64px - 300px); min-height: 260px; } .vzai-account-tab #vzai-app .vzai-form { position: sticky; bottom: 0; z-index: 2; border-radius: 0 0 var(--vzai-radius) var(--vzai-radius); box-shadow: 0 -6px 16px rgba(var(--vz-shadow, 14, 42, 92), .06); } } @media (max-width: 600px) { #vzai-app .vzai-log { height: 60vh; padding: 14px; } #vzai-app .vzai-msg { max-width: 95%; } #vzai-app .vzai-head, #vzai-app .vzai-form { padding-left: 14px; padding-right: 14px; } #vzai-app .vzai-actions .vzai-send { margin-left: auto; } #vzai-app .vzai-upload { margin-left: 0; order: 3; width: 100% !important; } } @media (prefers-reduced-motion: reduce) { #vzai-app .vzai-send, #vzai-app .vzai-new, #vzai-app .vzai-form textarea, #vzai-app .vzai-usage-fill { transition: none; } } /* ReadyLaunch styles every button, label and field in the account area: reset them inside the chat. */ #vzai-app button { font-family: inherit; line-height: 1.2; text-transform: none; letter-spacing: normal; min-height: 0; } #vzai-app label { margin: 0; } #vzai-app .vzai-rate-why input { min-height: 0; height: 30px; background: var(--vzai-surface); color: var(--vzai-text); } #vzai-app .vzai-rate-why input:focus { outline: none; border-color: var(--vzai-blue); } /* No sideways scrolling on the Vavoza AI tab (same approach as the affiliate dashboard snippet). */ html:has(.vzai-account-tab), body:has(.vzai-account-tab) { overflow-x: clip; } .vzai-account-tab, #vzai-app, #vzai-app .vzai-msg, #vzai-app .vzai-form { min-width: 0; max-width: 100%; } #vzai-app .vzai-msg { max-width: 85%; } #vzai-app .vzai-msg pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; } @media (max-width: 600px) { #vzai-app .vzai-msg { max-width: 95%; } } /* v2: lesson and article citations under an answer (scoped under #vzai-app like every chat rule, so ReadyLaunch can't override them) */ #vzai-app .vzai-cites { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--vzai-line); font-size: 13px; line-height: 1.45; } #vzai-app .vzai-cites span { display: block; width: auto; font-weight: 600; } #vzai-app .vzai-cites ul { margin: 4px 0 0 18px !important; padding: 0 !important; list-style: disc; } #vzai-app .vzai-cites li { margin: 2px 0; padding: 0; } #vzai-app .vzai-cites a { color: var(--vzai-blue); text-decoration: underline; } /* v2.1.1: one continuous chat: New topic, Memory panel, Clear chat, dividers; v2.1: Elaborate, paperclip + file chip * (all scoped under #vzai-app like every chat rule) */ #vzai-app .vzai-topic, #vzai-app .vzai-mem { background: transparent; color: var(--vzai-text); border: 2px solid var(--vzai-line); border-radius: var(--vzai-pill); padding: 6px 12px; font-weight: 600; font-size: 13px; white-space: nowrap; flex-shrink: 0; cursor: pointer; width: auto; } #vzai-app .vzai-usage[hidden] + .vzai-topic { margin-left: auto; } #vzai-app .vzai-topic:hover, #vzai-app .vzai-mem:hover, #vzai-app .vzai-mem[aria-expanded="true"] { border-color: var(--vzai-blue); color: var(--vzai-blue); } #vzai-app .vzai-del { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--vzai-muted); cursor: pointer; } #vzai-app .vzai-del:hover, #vzai-app .vzai-del:focus-visible { color: #b32d2e; background: #fff4f4; } #vzai-app .vzai-divider { display: flex; align-items: center; gap: 10px; color: var(--vzai-muted); font-size: 12px; font-weight: 600; margin: 4px 0; } #vzai-app .vzai-divider::before, #vzai-app .vzai-divider::after { content: ""; flex: 1; border-top: 1px solid var(--vzai-line); } #vzai-app .vzai-memory { padding: 16px 20px; background: var(--vzai-paper); max-height: 520px; overflow-y: auto; overflow-x: hidden; } #vzai-app .vzai-memory[hidden], #vzai-app .vzai-log[hidden], #vzai-app .vzai-form[hidden] { display: none; } #vzai-app .vzai-memory-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } #vzai-app .vzai-memory-back { background: transparent; border: 0; padding: 4px 0; color: var(--vzai-blue); font-weight: 600; font-size: 13px; cursor: pointer; width: auto; } #vzai-app .vzai-memory-note { margin: 0 0 10px; font-size: 12px; color: var(--vzai-muted); } #vzai-app .vzai-memory-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; background: var(--vzai-surface); border: 1px solid var(--vzai-line); border-radius: 12px; padding: 12px 14px; min-width: 0; } #vzai-app .vzai-memory-clear { margin-top: 12px; width: auto; background: transparent; border: 2px solid var(--vzai-line); border-radius: var(--vzai-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; color: #b32d2e; cursor: pointer; } #vzai-app .vzai-msg a { color: var(--vzai-blue); text-decoration: underline; } #vzai-app .vzai-me a { color: #fff; } #vzai-app .vzai-elab { display: inline-block; width: auto; margin-top: 10px; padding: 5px 12px; background: var(--vzai-tint); color: var(--vzai-blue); border: 0; border-radius: var(--vzai-pill); font-size: 13px; font-weight: 600; cursor: pointer; } #vzai-app .vzai-elab:hover, #vzai-app .vzai-elab:focus-visible { box-shadow: inset 0 0 0 2px var(--vzai-blue); } #vzai-app .vzai-upload { display: inline-flex; margin-left: 0; width: auto !important; order: 0; } #vzai-app .vzai-attach { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--vzai-muted); cursor: pointer; } #vzai-app .vzai-attach:hover, #vzai-app .vzai-attach:focus-visible { color: var(--vzai-blue); background: var(--vzai-tint); } #vzai-app .vzai-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; min-width: 0; padding: 3px 4px 3px 10px; background: var(--vzai-tint); border-radius: var(--vzai-pill); font-size: 12px; color: var(--vzai-text); } #vzai-app .vzai-chip[hidden] { display: none; } #vzai-app .vzai-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #vzai-app .vzai-chip-x { width: 22px; height: 22px; flex-shrink: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--vzai-muted); font-size: 16px; line-height: 1; cursor: pointer; } #vzai-app .vzai-chip-x:hover, #vzai-app .vzai-chip-x:focus-visible { color: #b32d2e; } #vzai-app .vzai-actions .vzai-send { margin-left: auto; } @media (max-width: 600px) { #vzai-app .vzai-upload { width: auto !important; order: 0; } #vzai-app .vzai-topic, #vzai-app .vzai-mem { padding: 5px 10px; } } /* v2.1.4: the account tab is an in-flow card like the other account tabs (Subscriptions): the page scrolls normally, * nothing is fixed and the body is never locked. The log has its own scroll and hands over to the page at its ends. */ @media (max-width: 839px) { .vzai-account-tab #vzai-app { overflow: hidden; } .vzai-account-tab #vzai-app .vzai-log { height: 60svh; min-height: 320px; overscroll-behavior: auto; } .vzai-account-tab #vzai-app .vzai-form { position: static; box-shadow: none; border-radius: 0; } #vzai-app .vzai-head { flex-wrap: wrap; row-gap: 6px; } #vzai-app .vzai-usage { min-width: 0; flex: 1 1 140px; align-items: flex-start; } #vzai-app .vzai-usage-text { white-space: normal; } } /* Fit: the tab card fills the screen below its own top (chat.js sets the height; 100dvh is the CSS fallback). Only the * log scrolls; head and input stay put. min-height keeps head + 2 messages + input visible; a shorter screen scrolls. */ .vzai-account-tab #vzai-app.vzai-fit { display: flex; flex-direction: column; height: calc(100dvh - var(--vzai-card-top, 0px) - 16px); min-height: 380px; } .vzai-account-tab #vzai-app.vzai-fit .vzai-head, .vzai-account-tab #vzai-app.vzai-fit .vzai-form, .vzai-account-tab #vzai-app.vzai-fit .vzai-disclaimer { flex-shrink: 0; } .vzai-account-tab #vzai-app.vzai-fit .vzai-log { flex: 1 1 auto; height: auto; min-height: 0; overscroll-behavior: auto; } .vzai-account-tab #vzai-app.vzai-fit .vzai-memory { flex: 1 1 auto; min-height: 0; max-height: none; } /* 2.3.1: ReadyLaunch gives the account container min-height:100vh under a fixed header, so phones scrolled 64px on this tab. */ body:has(#vzai-app.vzai-fit) .mepr-account-container { min-height: 0 !important; } /* The disclaimer "i" (the full text wraps on desktop; on phones it opens on tap, never truncated). */ #vzai-app .vzai-disclaimer { display: flex; align-items: flex-start; gap: 8px; } #vzai-app .vzai-disclaimer-text { margin: 0; white-space: normal; overflow-wrap: anywhere; } #vzai-app .vzai-info { display: none; flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: 1px solid var(--vzai-line); border-radius: 999px; background: transparent; color: var(--vzai-muted); font: italic 700 12px/1 Georgia, serif; cursor: pointer; } @media (max-width: 600px) { #vzai-app .vzai-info { display: inline-flex; align-items: center; justify-content: center; } #vzai-app .vzai-disclaimer-text { display: none; } #vzai-app .vzai-disclaimer-open .vzai-disclaimer-text { display: block; } } /* v2.1.5: compact chrome. Head on one row (usage left, actions right, centred); one input row (paperclip, input, round * Send); 12px form padding; the count only from ~1,500 characters; the disclaimer is one short line behind "i". */ #vzai-app .vzai-head { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px 14px; position: relative; } #vzai-app .vzai-usage { margin-left: 0; margin-right: auto; flex: 1 1 auto; min-width: 0; align-items: flex-start; } #vzai-app .vzai-usage[hidden] { display: flex; visibility: hidden; } #vzai-app .vzai-usage-text { white-space: nowrap; } #vzai-app .vzai-form { padding: 12px; } #vzai-app .vzai-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; } #vzai-app .vzai-row .vzai-upload { flex-shrink: 0; margin: 0 0 6px; } #vzai-app .vzai-form .vzai-row textarea { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 11px 18px; border-radius: 23px; } #vzai-app .vzai-send { flex-shrink: 0; width: 46px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; } #vzai-app .vzai-send.vzai-busy svg { animation: vzai-pulse 1s ease-in-out infinite; } @keyframes vzai-pulse { 50% { opacity: .35; } } /* 2.6.0 thinking bubble: shown right after a question until the first words arrive. */ #vzai-app .vzai-msg.vzai-bot:empty { display: none; } #vzai-app .vzai-thinking { display: inline-flex; align-items: center; padding: 14px 18px; } #vzai-app .vzai-dots { display: inline-flex; gap: 5px; } #vzai-app .vzai-dots i { width: 8px; height: 8px; border-radius: 50%; background: #0970FF; animation: vzai-dot 1.2s ease-in-out infinite; } #vzai-app .vzai-dots i:nth-child(2) { animation-delay: .15s; } #vzai-app .vzai-dots i:nth-child(3) { animation-delay: .3s; } @keyframes vzai-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #vzai-app .vzai-dots i { animation: vzai-pulse 1.6s ease-in-out infinite; transform: none; } } #vzai-app .vzai-meta { display: flex; align-items: center; gap: 8px; min-width: 0; } #vzai-app .vzai-meta:empty, #vzai-app .vzai-meta:not(:has(> :not([hidden]))) { display: none; } #vzai-app .vzai-meta > :not([hidden]) { margin-top: 6px; } #vzai-app .vzai-count { margin-left: auto; } #vzai-app .vzai-count[hidden] { display: none; } #vzai-app .vzai-disclaimer { display: block; padding: 0 14px 10px; font-size: 12px; line-height: 1.4; } #vzai-app .vzai-disclaimer-short { color: var(--vzai-muted); } #vzai-app .vzai-info { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 4px; } #vzai-app .vzai-disclaimer-text { display: none; margin: 6px 0 0; } #vzai-app .vzai-disclaimer-open .vzai-disclaimer-text { display: block; } /* ===================== v2.2.0 redesign: chat-first, calm, account design tokens ===================== * One slim top bar; answers as plain text with the Vavoza mark; user messages in a light tint bubble; small actions * under answers; one rounded composer; brand gradient only on the send button and the avatar. Container queries * (not the viewport) decide the compact bar, so the narrow bubble gets it too. */ #vzai-app { container-type: inline-size; container-name: vzai; --vzai-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 336.1 311'%3E%3Cpath fill='%23fff' d='M155.6,193.8c-35.7-30-49.2-81-29.7-125.9c23.7-54.7,87.5-79.9,142.2-56.2S348,99.3,324.3,154c-18.3,42.3-60.6,67-104.2,65l21.9-33.4c22.9-5.2,43.2-20.9,53.3-44.2c16.8-38.7-1.1-83.9-39.8-100.6s-83.9,1.1-100.6,39.8c-13.4,30.9-4.7,66,19.1,87.4L155.6,193.8z'/%3E%3Cpolygon fill='%23fff' points='46.6,49.4 5.4,49.4 143,306 233.3,167.8 219,143 244.2,107.9 257,116 250,68 205,82 217.1,90.8 180,143 194.4,167.8 146,238.5'/%3E%3C/svg%3E"); --vzai-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Csvg x='22' y='25.5' width='56' height='51.8' viewBox='0 0 336.1 311'%3E%3Cpath fill='%23fff' d='M155.6,193.8c-35.7-30-49.2-81-29.7-125.9c23.7-54.7,87.5-79.9,142.2-56.2S348,99.3,324.3,154c-18.3,42.3-60.6,67-104.2,65l21.9-33.4c22.9-5.2,43.2-20.9,53.3-44.2c16.8-38.7-1.1-83.9-39.8-100.6s-83.9,1.1-100.6,39.8c-13.4,30.9-4.7,66,19.1,87.4L155.6,193.8z'/%3E%3Cpolygon fill='%23fff' points='46.6,49.4 5.4,49.4 143,306 233.3,167.8 219,143 244.2,107.9 257,116 250,68 205,82 217.1,90.8 180,143 194.4,167.8 146,238.5'/%3E%3C/svg%3E%3Cpath fill='%23fff' d='M65 74.5c.7 3.6 1.9 4.8 5.5 5.5c-3.6.7-4.8 1.9-5.5 5.5c-.7-3.6-1.9-4.8-5.5-5.5c3.6-.7 4.8-1.9 5.5-5.5z'/%3E%3C/svg%3E"); } .vzai-account-tab #vzai-app { border: 0; box-shadow: none; border-radius: 0; background: transparent; max-width: none; } /* Top bar */ #vzai-app .vzai-head { height: 48px; min-height: 48px; padding: 0 4px; gap: 8px; flex-wrap: nowrap; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--vzai-line); position: relative; } #vzai-app .vzai-brand { display: flex; align-items: center; gap: 8px; min-width: 0; } #vzai-app .vzai-brand strong, .vzai-account-tab #vzai-app .vzai-head .vzai-brand strong { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-family: var(--vzai-display); font-weight: 700; font-size: 15px; white-space: nowrap; } #vzai-app .vzai-avatar { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--vzai-icon) center / 100% no-repeat, var(--vzai-gradient); } /* 2.11.0 (Vlad): submark + star */ #vzai-app .vzai-usage { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; margin: 0; cursor: default; border-radius: 50%; } #vzai-app .vzai-usage[hidden] { display: none; visibility: visible; } #vzai-app .vzai-usage:focus-visible { outline: 2px solid var(--vzai-blue); outline-offset: 2px; } #vzai-app .vzai-usage-bar { width: 16px; height: 16px; max-width: none; border-radius: 50%; background: conic-gradient(var(--vzai-usage-color) calc(var(--vzai-pct, 0) * 1%), var(--vzai-line) 0); -webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 61%); mask: radial-gradient(farthest-side, transparent 58%, #000 61%); } #vzai-app .vzai-usage-fill { display: none; } #vzai-app .vzai-usage-text { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 6; white-space: nowrap; background: var(--vz-ink, #0e0e0e); color: #fff; font-size: 12px; line-height: 1.3; padding: 5px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; } #vzai-app .vzai-usage:hover .vzai-usage-text, #vzai-app .vzai-usage:focus .vzai-usage-text, #vzai-app .vzai-usage.vzai-tip .vzai-usage-text { opacity: 1; } #vzai-app .vzai-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } #vzai-app .vzai-tools > button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--vzai-muted); font-size: 18px; line-height: 1; cursor: pointer; } #vzai-app .vzai-tools > button:hover, #vzai-app .vzai-tools > button:focus-visible, #vzai-app .vzai-tools > .vzai-mem[aria-expanded="true"] { color: var(--vzai-blue); background: var(--vzai-tint); border-color: transparent; } #vzai-app .vzai-tools > [hidden] { display: none; } /* Messages: a centred column (~720px) */ #vzai-app .vzai-log { background: transparent; gap: 18px; padding: 20px max(16px, calc((100% - 720px) / 2)); } #vzai-app .vzai-msg { font-size: 15px; line-height: 1.6; } #vzai-app .vzai-bot { position: relative; align-self: stretch; max-width: 100%; padding: 0 0 0 36px; background: transparent; border: 0; border-radius: 0; color: var(--vzai-text); } #vzai-app .vzai-bot::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--vzai-icon) center / 100% no-repeat, var(--vzai-gradient); } #vzai-app .vzai-refused { border-left: 0; color: var(--vzai-muted); } #vzai-app .vzai-me { max-width: 80%; padding: 10px 14px; background: var(--vzai-tint); color: var(--vzai-text); border-radius: 18px; border-bottom-right-radius: 6px; } #vzai-app .vzai-me a { color: var(--vzai-blue); } #vzai-app .vzai-divider { font-size: 12px; color: var(--vzai-muted); font-weight: 500; } /* Small actions under an answer: on hover or focus with a mouse, always on touch screens */ #vzai-app .vzai-rate { gap: 2px; margin-top: 6px; } #vzai-app .vzai-rate .vzai-rate-q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #vzai-app .vzai-rate > button { width: 28px; height: 28px; border: 0; border-radius: 8px; } #vzai-app .vzai-rate > button:hover:not(:disabled), #vzai-app .vzai-rate > button:focus-visible { background: var(--vzai-tint); } #vzai-app .vzai-elab { display: inline-flex; align-items: center; gap: 4px; width: auto; margin: 0 0 0 4px; padding: 4px 8px; background: transparent; color: var(--vzai-muted); border: 0; border-radius: 8px; font-size: 12.5px; font-weight: 600; } #vzai-app .vzai-elab:hover, #vzai-app .vzai-elab:focus-visible { color: var(--vzai-blue); background: var(--vzai-tint); box-shadow: none; } @media (hover: hover) and (pointer: fine) { #vzai-app .vzai-bot .vzai-rate, #vzai-app .vzai-bot > .vzai-elab { opacity: 0; transition: opacity .15s; } #vzai-app .vzai-bot:hover .vzai-rate, #vzai-app .vzai-bot:focus-within .vzai-rate, #vzai-app .vzai-bot .vzai-rate:has(.vzai-rate-on), #vzai-app .vzai-bot:hover > .vzai-elab, #vzai-app .vzai-bot:focus-within > .vzai-elab { opacity: 1; } } /* Empty state: greeting plus starter chips */ #vzai-app .vzai-starters { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 36px; } #vzai-app .vzai-starter { width: auto; padding: 8px 14px; border: 1px solid var(--vzai-line); border-radius: 999px; background: var(--vzai-surface); color: var(--vzai-text); font-size: 14px; line-height: 1.3; cursor: pointer; } #vzai-app .vzai-starter:hover, #vzai-app .vzai-starter:focus-visible { border-color: var(--vzai-blue); color: var(--vzai-blue); } /* Composer: one rounded box with the paperclip, an auto-growing input and a round gradient send button */ #vzai-app .vzai-form { border-top: 0; background: transparent; padding: 8px max(12px, calc((100% - 720px) / 2)) 4px; } #vzai-app .vzai-row { align-items: flex-end; gap: 4px; padding: 5px 5px 5px 6px; border: 2px solid var(--vzai-line); border-radius: 24px; background: var(--vzai-surface); transition: border-color .2s, box-shadow .2s; } #vzai-app .vzai-row:focus-within { border-color: var(--vzai-blue); box-shadow: 0 0 0 4px rgba(9, 112, 255, .15); } #vzai-app .vzai-form .vzai-row textarea, #vzai-app .vzai-form .vzai-row textarea:focus { min-height: 36px; max-height: 180px; padding: 6px 6px; border: 0; border-radius: 0; box-shadow: none; background: transparent; font-size: 15px; line-height: 1.6; } #vzai-app .vzai-row .vzai-upload { margin: 0 0 1px; } #vzai-app .vzai-row .vzai-attach { width: 36px; height: 36px; } #vzai-app .vzai-send { width: 38px; height: 38px; background: var(--vzai-gradient); } #vzai-app .vzai-disclaimer { padding: 2px 12px 10px; text-align: center; font-size: 12px; background: transparent; } /* ===================== v2.3.0: Vlad's 2.2.0 review ===================== * Tab back in a white card; top bar, messages and composer share one inner width (--vzai-gutter); usage as small text; * text buttons (icons when narrow); one blue border on focus; keyboard-only focus rings; tooltips open inward. */ #vzai-app { --vzai-gutter: max(16px, calc((100% - 720px) / 2)); } #vzai-app .vzai-head, #vzai-app .vzai-log, #vzai-app .vzai-form, #vzai-app .vzai-disclaimer { padding-left: var(--vzai-gutter); padding-right: var(--vzai-gutter); } /* 5. Tab: a white card on the page background, still fitted to the viewport. The bar's bottom line spans the inner width only. */ .vzai-account-tab #vzai-app { background: var(--vz-surface, #fff); border: 1px solid var(--vz-line, #dce6f2); border-radius: 16px; box-shadow: none; overflow: hidden; max-width: none; } .vzai-account-tab #vzai-app .vzai-head { border-bottom: 0; } .vzai-account-tab #vzai-app .vzai-head::after { content: ""; position: absolute; left: var(--vzai-gutter); right: var(--vzai-gutter); bottom: 0; height: 1px; background: var(--vzai-line); } /* 2, 7. One top bar, always one row: label + usage left; New topic, Memory (text), Delete (trash), expand (+ close in the bubble) right. */ #vzai-app .vzai-head { z-index: 3; flex-wrap: nowrap; } #vzai-app .vzai-brand { flex: 1 1 auto; min-width: 0; } #vzai-app .vzai-brand strong { flex-shrink: 0; } #vzai-app .vzai-tools { flex: 0 0 auto; gap: 2px; flex-wrap: nowrap; } #vzai-app .vzai-tools > .vzai-textbtn { width: auto; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--vzai-muted); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; flex-shrink: 0; } #vzai-app .vzai-tools > .vzai-textbtn svg { display: none; } #vzai-app .vzai-tools > button:hover, #vzai-app .vzai-tools > .vzai-mem[aria-expanded="true"] { color: var(--vzai-text); background: var(--vzai-paper); } #vzai-app .vzai-tools > .vzai-del:hover { color: #b32d2e; background: #fff4f4; } #vzai-app .vzai-tools > .vzai-iconbtn { width: 32px; height: 32px; flex-shrink: 0; } @container vzai (max-width: 560px) { #vzai-app .vzai-tools > .vzai-textbtn { width: 32px; padding: 0; } #vzai-app .vzai-tools > .vzai-textbtn svg { display: block; } #vzai-app .vzai-tools > .vzai-textbtn .vzai-btn-label { display: none; } } @container vzai (min-width: 561px) { #vzai-app .vzai-tools > .vzai-textbtn[data-tip]::after { display: none; } } /* 6. Usage: small muted text, no ring. "resets Dec 1" on hover, keyboard focus or tap. */ #vzai-app .vzai-usage { position: relative; display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; padding: 2px 4px; border-radius: 6px; font-size: 12px; line-height: 1.2; color: var(--vzai-muted); white-space: nowrap; cursor: default; } #vzai-app .vzai-usage[hidden] { display: none; } #vzai-app .vzai-usage-pct { overflow: hidden; text-overflow: ellipsis; } #vzai-app .vzai-usage-warn { color: #8a6a1f; } #vzai-app .vzai-usage-high { color: #b32d2e; } #vzai-app .vzai-usage-bar, #vzai-app .vzai-usage-fill { display: none; } /* 4. Tooltips stay inside the card or panel: below the bar, the usage one opens to the right (it sits at the left), * the action ones open to the left (they sit at the right); never wider than the container. */ #vzai-app .vzai-usage-text, #vzai-app [data-tip]::after { position: absolute; top: calc(100% + 6px); z-index: 6; max-width: min(240px, calc(100cqw - 24px)); padding: 5px 8px; border-radius: 6px; background: var(--vz-ink, #0e0e0e); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity .15s; } #vzai-app .vzai-usage-text { left: 0; right: auto; transform: none; } #vzai-app .vzai-usage-text:empty { display: none; } #vzai-app [data-tip] { position: relative; } #vzai-app [data-tip]::after { content: attr(data-tip); right: 0; left: auto; } #vzai-app .vzai-usage:hover .vzai-usage-text, #vzai-app .vzai-usage:focus-visible .vzai-usage-text, #vzai-app .vzai-usage.vzai-tip .vzai-usage-text, #vzai-app [data-tip]:hover::after, #vzai-app [data-tip]:focus-visible::after, #vzai-app [data-tip].vzai-tip::after { opacity: 1; } @media (hover: none) { #vzai-app [data-tip]:hover:not(.vzai-tip)::after { opacity: 0; } } /* 3. Focus: a subtle 2px blue ring for keyboard users only; nothing after a mouse click or tap. */ #vzai-app :is(button, a, [tabindex], textarea, input):focus:not(:focus-visible) { outline: none; } #vzai-app button:focus:not(:focus-visible) { box-shadow: none; } #vzai-app .vzai-send:focus:not(:focus-visible) { box-shadow: none; } #vzai-app :is(button, a, [tabindex]):focus-visible { outline: 2px solid rgba(9, 112, 255, .55); outline-offset: 2px; box-shadow: none; } /* 1. Composer: "Ask anything…", one thin blue border on focus (no glow, no second ring); paperclip, text and send * centred with even spacing (bottom-aligned once the text wraps to more lines). */ #vzai-app .vzai-row { align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--vzai-line); border-radius: 24px; box-shadow: none; transition: border-color .15s; } #vzai-app .vzai-row.vzai-multi { align-items: flex-end; } #vzai-app .vzai-row:focus-within { border-color: var(--vzai-blue); box-shadow: none; outline: none; } #vzai-app .vzai-form .vzai-row textarea, #vzai-app .vzai-form .vzai-row textarea:focus, #vzai-app .vzai-form .vzai-row textarea:focus-visible { min-height: 36px; padding: 6px 4px; line-height: 24px; border: 0; outline: none; box-shadow: none; } #vzai-app .vzai-row .vzai-upload { margin: 0; align-self: auto; } #vzai-app .vzai-row .vzai-attach, #vzai-app .vzai-send { width: 36px; height: 36px; flex-shrink: 0; } #vzai-app .vzai-row.vzai-multi .vzai-upload, #vzai-app .vzai-row.vzai-multi .vzai-send { margin: 0; } /* 8. Elaborate and the rating buttons: theme or ReadyLaunch button rules must not squeeze them (one letter per line). */ #vzai-app .vzai-rate { flex-wrap: wrap; } #vzai-app .vzai-rate > button, #vzai-app .vzai-elab { flex: 0 0 auto; white-space: nowrap; word-break: normal; overflow-wrap: normal; writing-mode: horizontal-tb; max-width: none; letter-spacing: normal; text-transform: none; } #vzai-app .vzai-elab { width: auto; min-width: max-content; } #vzai-app .vzai-rate > button:not(.vzai-elab) { width: 28px; min-width: 28px; } /* 9. Disclaimer: never wider than the composer (same gutter); the "i" opens a small popover above it. */ #vzai-app .vzai-disclaimer { position: relative; text-align: center; font-size: 12px; } #vzai-app .vzai-disclaimer-inner { position: relative; } #vzai-app .vzai-disclaimer-text, #vzai-app .vzai-disclaimer-open .vzai-disclaimer-text { display: block; position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 6; max-width: 100%; margin: 0; padding: 8px 10px; background: var(--vzai-surface); border: 1px solid var(--vzai-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(14, 42, 92, .10); font-size: 12px; line-height: 1.45; color: var(--vzai-muted); text-align: left; white-space: normal; overflow-wrap: anywhere; } #vzai-app .vzai-disclaimer-text[hidden] { display: none; } /* ===================== 2.4.0: Vlad's 2.3.1 review ===================== * 6. Even padding: top bar, divider line, log and composer use the card's width with a fixed ~22px gutter (close to the * 16-20px top and bottom), not a centred 720px column. Answer text keeps a readable measure (~75 characters). */ #vzai-app { --vzai-gutter: 22px; } @media (max-width: 600px) { #vzai-app { --vzai-gutter: 16px; } } #vzai-app .vzai-bot { max-width: min(100%, calc(75ch + 36px)); } /* 5. Disclaimer in flow: the "i" opens the full text under the "AI can make mistakes" line, inside the card (no overlay). * The fitted tab and the bubble are flex columns, so the log shrinks to make room. Narrow and readable. */ #vzai-app .vzai-disclaimer-text, #vzai-app .vzai-disclaimer-open .vzai-disclaimer-text { position: static; display: block; max-width: 62ch; margin: 6px auto 0; padding: 8px 10px; background: var(--vzai-paper); border: 1px solid var(--vzai-line); border-radius: 10px; box-shadow: none; font-size: 12px; line-height: 1.45; color: var(--vzai-muted); text-align: left; white-space: normal; overflow-wrap: anywhere; } #vzai-app .vzai-disclaimer-text[hidden] { display: none; } /* 10. Phones: no avatar gutter. The small mark sits at the start of the first line and text wraps under it at full * width. 2.5.3 (Vlad): the float's footprint is shorter than one line (negative bottom margin), so only the first * line is indented and every later line starts at the left edge (no half-indented second line). Wider user bubbles. */ @media (max-width: 839px) { #vzai-app .vzai-bot { display: flow-root; padding-left: 0; max-width: 100%; } #vzai-app .vzai-bot::before { position: relative; left: auto; top: 0; float: left; width: 20px; height: 20px; margin: 1px 8px -8px 0; background-size: 100%, auto; } /* 2.11.0: the icon fills the circle (was the old 11px mark) */ #vzai-app .vzai-bot > p:first-child, #vzai-app .vzai-bot > ul:first-child, #vzai-app .vzai-bot > ol:first-child { margin-top: 0; } #vzai-app .vzai-starters { padding-left: 0; } #vzai-app .vzai-me { max-width: 85%; } } /* 2.4.0 screenshots: thumbnails with a remove x above the input (resized in the browser; never stored). */ #vzai-app .vzai-thumbs { display: inline-flex; gap: 6px; flex-wrap: wrap; } #vzai-app .vzai-thumbs[hidden] { display: none; } #vzai-app .vzai-thumb { position: relative; display: inline-block; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--vzai-tint); border: 1px solid rgba(0, 0, 0, .08); } #vzai-app .vzai-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } #vzai-app .vzai-thumb-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; line-height: 20px; text-align: center; cursor: pointer; } #vzai-app .vzai-thumb-x:hover, #vzai-app .vzai-thumb-x:focus-visible { background: #b32d2e; } /* 2.4.0 item 4, phones: the tab stays a card (border + 16px corners); chat.js pulls it ~10px from the header and the * screen edges and ends it 10px above the visible bottom. CSS fallback before chat.js runs: 100dvh minus 10px. */ @media (max-width: 839px) { .vzai-account-tab #vzai-app.vzai-fit { height: calc(100dvh - var(--vzai-card-top, 0px) - 10px); max-width: none; width: auto; } } /* 2.4.1: disclaimer opens with a short slide (height + fade) instead of a jump, lines up with the composer * (same gutter, full width), and keeps space under it so it never touches the card's bottom edge. */ #vzai-app .vzai-disclaimer { padding-top: 7px; padding-bottom: 9px; } /* 2.4.1b: line centred between the composer and the card's bottom edge (11px / 11px) */ #vzai-app .vzai-disclaimer-text, #vzai-app .vzai-disclaimer-open .vzai-disclaimer-text, #vzai-app .vzai-disclaimer-text[hidden] { display: block; position: static; box-sizing: border-box; width: 100%; max-width: none; max-height: 0; margin: 0; padding: 0 12px; border: 1px solid transparent; opacity: 0; overflow: hidden; visibility: hidden; background: var(--vzai-paper); border-radius: 10px; box-shadow: none; font-size: 12px; line-height: 1.5; color: var(--vzai-muted); text-align: left; white-space: normal; overflow-wrap: anywhere; transition: max-height .25s ease, margin .25s ease, padding .25s ease, opacity .2s ease, border-color .25s ease, visibility 0s linear .25s; } #vzai-app .vzai-disclaimer-open .vzai-disclaimer-text { max-height: 240px; margin-top: 8px; padding: 10px 12px; border-color: var(--vzai-line); opacity: 1; visibility: visible; overflow-y: auto; overscroll-behavior: contain; /* 2.11.11 (Vlad): a long notice scrolls instead of being cut off */ transition: max-height .25s ease, margin .25s ease, padding .25s ease, opacity .2s ease .05s, border-color .25s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { #vzai-app .vzai-disclaimer-text { transition: none !important; } } /* 2.4.1: citation chips (numbered, the article title in the tooltip). Opens the article at the highlighted passage. */ #vzai-app .vzai-cite { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin: 0 1px; border-radius: 999px; background: rgba(9, 112, 255, .10); color: var(--vzai-blue) !important; font-size: 11px; font-weight: 600; line-height: 1; text-decoration: none !important; vertical-align: 2px; box-sizing: border-box; } #vzai-app .vzai-cite:hover, #vzai-app .vzai-cite:focus-visible { background: var(--vzai-blue); color: #fff !important; } /* 2.4.1: 16px input on phones so iOS Safari never zooms in when the member taps it (under 16px it does). */ @media (max-width: 839px) { #vzai-app .vzai-form .vzai-row textarea, #vzai-app .vzai-form .vzai-row textarea:focus { font-size: 16px; } } /* 2.4.3 (Vlad): no square ring around the paperclip after a click. The old .vzai-upload:focus-within outline is gone; * keyboard focus gets a round ring that follows each control's own shape. */ #vzai-app .vzai-upload:focus-within { outline: none; } #vzai-app .vzai-attach:focus-visible, #vzai-app .vzai-send:focus-visible, #vzai-app .vzai-info:focus-visible { outline: 2px solid rgba(9, 112, 255, .55); outline-offset: 2px; border-radius: 999px; } /* 2.4.3: usage as a progress bar in the top bar, between the name and the actions, with room on each side. */ #vzai-app .vzai-usage { flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; margin: 0 24px; padding: 2px 0; } /* + the 8px head/brand gaps = 32px each side */ #vzai-app .vzai-usage-bar { display: block; flex: 1 1 auto; min-width: 0; width: auto; max-width: none; height: 6px; border-radius: 999px; background: var(--vzai-line); overflow: hidden; -webkit-mask: none; mask: none; } #vzai-app .vzai-usage-fill { display: block; height: 100%; width: calc(var(--vzai-pct, 0) * 1%); border-radius: inherit; background: var(--vzai-usage-color, var(--vzai-blue)); transition: width .3s ease; } #vzai-app .vzai-usage-pct { flex: 0 1 auto; min-width: 0; } #vzai-app .vzai-usage-warn { --vzai-usage-color: var(--vzai-gold); } #vzai-app .vzai-usage-high { --vzai-usage-color: #d63638; } @container vzai (max-width: 560px) { #vzai-app .vzai-usage { flex: 0 1 auto; margin: 0; } #vzai-app .vzai-usage-bar { display: none; } } /* narrow (bubble, phones): text only, as before */ @media (prefers-reduced-motion: reduce) { #vzai-app .vzai-usage-fill { transition: none; } } /* 2.4.5: account tab top bar: space above and below the logo equals the side gutter. */ .vzai-account-tab #vzai-app .vzai-head { height: calc(24px + 2 * var(--vzai-gutter)); min-height: calc(24px + 2 * var(--vzai-gutter)); padding-top: 0; padding-bottom: 0; } /* 2.4.7: a bit more air between paragraphs, lists and bullet points (Vlad). */ #vzai-app .vzai-msg p { margin: 0 0 14px; } #vzai-app .vzai-msg p:last-child { margin-bottom: 0; } #vzai-app .vzai-msg ul, #vzai-app .vzai-msg ol { margin: 6px 0 14px 20px; } #vzai-app .vzai-msg ul:last-child, #vzai-app .vzai-msg ol:last-child { margin-bottom: 0; } #vzai-app .vzai-msg li + li { margin-top: 8px; } #vzai-app .vzai-msg .vzai-cites li + li { margin-top: 2px; } /* Sources list stays compact */ #vzai-app .vzai-msg p:has(> strong:only-child) { margin-bottom: 6px; } /* a bold heading sits close to its list */ /* 2.9.0 Beta badge (settings toggle) */ #vzai-app .vzai-beta { flex: 0 0 auto; display: inline-block; padding: 2px 7px; border-radius: 999px; background: #EAF2FF; color: #0970FF; font-family: var(--vzai-display, inherit); font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; } /* 2.9.1: the Elaborate pill sits inside .vzai-rate, whose "button" rule (padding 0, 28px) outranked it. */ #vzai-app .vzai-rate > button.vzai-elab { width: auto; height: auto; min-height: 28px; padding: 4px 10px; } /* 2.9.1: drop target highlight while files are dragged over the chat. */ /* 2.10.2: the dashed outline is drawn by the overlay below (not the chat), so the blur doesn't soften it. */ /* 2.10.2 (Vlad): narrow chats (the bubble, phones) show a mini progress bar with the short % next to it ("16%"); * wide chats keep the long bar. (2.10.0 had a ring here.) The number is the pct element's data-short. */ @container vzai (max-width: 560px) { #vzai-app .vzai-usage { position: relative; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; width: auto; height: auto; margin: 0 0 0 4px; padding: 2px 0; border-radius: 6px; } #vzai-app .vzai-usage-bar { display: block; position: static; flex: 0 0 auto; width: 44px; height: 5px; max-width: none; border-radius: 999px; background: var(--vzai-line); overflow: hidden; -webkit-mask: none; mask: none; } #vzai-app .vzai-usage-fill { display: block; height: 100%; width: calc(var(--vzai-pct, 0) * 1%); border-radius: inherit; background: var(--vzai-usage-color, var(--vzai-blue)); } #vzai-app .vzai-usage-pct { position: relative; overflow: visible; font-size: 0; line-height: 1; } #vzai-app .vzai-usage-pct::before { content: attr(data-short) "%"; font-size: 11.5px; font-weight: 600; color: var(--vzai-muted); } #vzai-app .vzai-usage-warn .vzai-usage-pct::before { color: #8a6a1f; } #vzai-app .vzai-usage-high .vzai-usage-pct::before { color: #b32d2e; } } /* 2.10.0 (Vlad): thinking = two robots sword-fighting (transform/opacity only). Reduced motion: the old dots. */ #vzai-app .vzai-thinking .vzai-dots { display: none; } #vzai-app .vzai-duel { display: inline-block; line-height: 0; } #vzai-app .vzai-duel svg { display: block; overflow: visible; } #vzai-app .vzai-duel .vzai-move { transform-box: view-box; transform-origin: 7px 12px; animation: 3.6s ease-in-out infinite; } #vzai-app .vzai-duel .vzai-arm { transform-box: view-box; transform-origin: 11px 14px; animation: 3.6s ease-in-out infinite; } #vzai-app .vzai-duel .vzai-move-l { animation-name: vzai-l-move; } #vzai-app .vzai-duel .vzai-move-r { animation-name: vzai-r-move; } #vzai-app .vzai-duel .vzai-arm-l { animation-name: vzai-l-arm; } #vzai-app .vzai-duel .vzai-arm-r { animation-name: vzai-r-arm; } #vzai-app .vzai-duel .vzai-spark { transform-box: fill-box; transform-origin: center; opacity: 0; animation: 3.6s ease-out infinite; } #vzai-app .vzai-duel .vzai-spark-1 { animation-name: vzai-spark-1; } #vzai-app .vzai-duel .vzai-spark-2 { animation-name: vzai-spark-2; } /* Each robot moves in its own coordinates (+x = toward the other robot; the right one is mirrored). */ @keyframes vzai-l-move { 0%, 8% { transform: translate(0, 0) rotate(0); } 4% { transform: translate(0, -3px) rotate(0); } /* hop */ 14%, 20% { transform: translate(7px, 0) rotate(0); } /* lunge */ 26% { transform: translate(2px, 1.5px) rotate(0); } /* duck under the flip */ 32% { transform: translate(2px, 0) rotate(0); } 40% { transform: translate(5px, 0) rotate(0); } 46% { transform: translate(4px, -1px) rotate(0); } 52% { transform: translate(0, -10px) rotate(-180deg); } /* backflip */ 58%, 64% { transform: translate(-3px, 0) rotate(-360deg); } 72%, 80% { transform: translate(6px, -1px) rotate(-360deg); } /* charge and clash */ 90% { transform: translate(-1px, -3px) rotate(-360deg); } /* hop back */ 100% { transform: translate(0, 0) rotate(-360deg); } } @keyframes vzai-r-move { 0%, 10% { transform: translate(0, 0) rotate(0); } 6% { transform: translate(0, -3px) rotate(0); } /* hop */ 14% { transform: translate(-2px, 0) rotate(0); } /* pushed back */ 20% { transform: translate(-1px, -2px) rotate(0); } 26% { transform: translate(3px, -11px) rotate(180deg); } /* jump-flip */ 32%, 40% { transform: translate(5px, 0) rotate(360deg); } 46% { transform: translate(4px, 0) rotate(360deg); } 52% { transform: translate(7px, 0) rotate(360deg); } /* chases the backflip */ 58% { transform: translate(2px, 0) rotate(360deg); } 64% { transform: translate(0, -4px) rotate(360deg); } /* hop */ 72%, 80% { transform: translate(6px, -1px) rotate(360deg); } 92% { transform: translate(-1px, -3px) rotate(360deg); } /* hop back */ 100% { transform: translate(0, 0) rotate(360deg); } } @keyframes vzai-l-arm { 0%, 12% { transform: rotate(-40deg); } 14%, 20% { transform: rotate(10deg); } /* thrust */ 26%, 32% { transform: rotate(-62deg); } /* block overhead */ 38% { transform: rotate(15deg); } /* slash */ 42% { transform: rotate(-45deg); } 46% { transform: rotate(12deg); } /* slash */ 52% { transform: rotate(-95deg); } /* tucked in the flip */ 62% { transform: rotate(-40deg); } 72%, 80% { transform: rotate(14deg); } /* clash */ 88%, 100% { transform: rotate(-40deg); } } @keyframes vzai-r-arm { 0%, 12% { transform: rotate(-40deg); } 14% { transform: rotate(-55deg); } /* parry */ 20% { transform: rotate(-30deg); } 26% { transform: rotate(-95deg); } /* tucked in the flip */ 32% { transform: rotate(-40deg); } 38% { transform: rotate(-50deg); } /* block */ 42% { transform: rotate(10deg); } /* counter */ 46% { transform: rotate(-45deg); } /* block */ 52% { transform: rotate(10deg); } /* thrust */ 62% { transform: rotate(-40deg); } 72%, 80% { transform: rotate(14deg); } /* clash */ 88%, 100% { transform: rotate(-40deg); } } @keyframes vzai-spark-1 { 0%, 12% { opacity: 0; transform: scale(.4); } 14.5% { opacity: 1; transform: scale(1.2); } 18%, 36% { opacity: 0; transform: scale(.5); } 38.5% { opacity: 1; transform: scale(1); } 41%, 100% { opacity: 0; transform: scale(.5); } } @keyframes vzai-spark-2 { 0%, 70% { opacity: 0; transform: scale(.4); } 72.5% { opacity: 1; transform: scale(1.3); } 76% { opacity: .2; transform: scale(.8); } 78% { opacity: .9; transform: scale(1.1); } 82%, 100% { opacity: 0; transform: scale(.5); } } @media (prefers-reduced-motion: reduce) { #vzai-app .vzai-thinking .vzai-duel { display: none; } #vzai-app .vzai-thinking .vzai-dots { display: inline-flex; } } /* 2.10.2 (Vlad): "Show me the robots fighting": the duel, centered and bigger, for 5 seconds. */ #vzai-app .vzai-robot-show { display: flex; justify-content: center; padding: 18px 0; opacity: 1; transition: opacity .3s ease; } #vzai-app .vzai-robot-show.vzai-robot-out { opacity: 0; } @media (prefers-reduced-motion: reduce) { #vzai-app .vzai-robot-show * { animation: none !important; } } /* 2.10.0 (Vlad): a soft blur over the chat while files are dragged onto it. */ #vzai-app { position: relative; } #vzai-app.vzai-dropping::after { content: attr(data-drop); outline: 2px dashed var(--vzai-blue); outline-offset: -6px; position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--vzai-blue); font-size: 14px; font-weight: 600; pointer-events: none; border-radius: inherit; } /* 2.11.0 (Vlad): "Lite" in small text under the name, visitor chat only (members without full access get the same chat). */ #vzai-app .vzai-name { display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; flex-shrink: 0; line-height: 1.1; } /* 2.11.1 (Vlad): LITE right-aligned under "Vavoza AI" */ #vzai-app .vzai-name strong { line-height: 1.1; } #vzai-app .vzai-lite { font-family: var(--vzai-display, inherit); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6B7A99; line-height: 1.2; margin-top: 1px; margin-right: -.06em; } /* 2.11.0 (Vlad): answer text a little larger on phones (both chats). 15px -> 16px. Phones only, so the narrow desktop bubble is unchanged. */ @media (max-width: 600px) { #vzai-app .vzai-msg { font-size: 16px; } } /* 2.11.3: on phones (screen 600px or less, chat 420px wide or less) the mini usage bar left no room and the % sat under the New topic button. * Keep the "10%" text, drop the bar. */ @media (max-width: 600px) { @container vzai (max-width: 420px) { #vzai-app .vzai-usage-bar { display: none; } } } /* phones only: the 400px desktop bubble keeps it */ /* 2.11.11 (Vlad): two skinny stacked bars, today's messages on top and the month below, same look as before (same track, * blue / gold from 75% / red from 90%, same % style). Each bar colours itself. Details in the tooltip (two lines). */ #vzai-app .vzai-meters { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 1 1 auto; min-width: 0; } #vzai-app .vzai-meter { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 1; } #vzai-app .vzai-meter[hidden] { display: none; } #vzai-app .vzai-meter .vzai-usage-bar { height: 3px; } #vzai-app .vzai-meter .vzai-usage-pct { flex: 0 0 auto; min-width: 30px; font-size: 11px; line-height: 1; } #vzai-app .vzai-usage-warn .vzai-usage-pct { color: #8a6a1f; } #vzai-app .vzai-usage-high .vzai-usage-pct { color: #b32d2e; } #vzai-app .vzai-usage-text { white-space: pre-line; max-width: min(300px, calc(100cqw - 24px)); } @container vzai (max-width: 560px) { #vzai-app .vzai-meters { flex: 0 0 auto; gap: 3px; } #vzai-app .vzai-meter { gap: 6px; } #vzai-app .vzai-meter .vzai-usage-bar { display: block; width: 44px; height: 3px; } #vzai-app .vzai-meter .vzai-usage-pct { min-width: 26px; font-size: 0; } /* the ::before shows the number; hide the text copy */ #vzai-app .vzai-meter .vzai-usage-pct::before { font-size: 10.5px; } } @media (max-width: 600px) { @container vzai (max-width: 420px) { #vzai-app .vzai-meter .vzai-usage-bar { display: block; width: 28px; } } } /* phones: shorter bars, still both */ /* 2.11.13 (Vlad): tighter bars, labels in the full chat, a tooltip that fits the bubble, even spacing in narrow chats. */ #vzai-app .vzai-meters { gap: 2px; } #vzai-app .vzai-meter .vzai-usage-pct { min-width: 0; font-size: 10px; line-height: 1; } #vzai-app .vzai-meter-label { flex: 0 0 auto; width: 36px; font-size: 10px; font-weight: 500; line-height: 1; color: var(--vzai-muted); } /* the tooltip sizes to its two lines (it was squeezed to the width of the small bars, then cut with "...") */ #vzai-app .vzai-usage-text { width: max-content; overflow: visible; text-overflow: clip; } @container vzai (max-width: 560px) { #vzai-app .vzai-meter-label { display: none; } /* labels only in the full chat */ #vzai-app .vzai-meter .vzai-usage-pct { font-size: 0; } /* keep the text copy hidden (the ::before shows the number) */ #vzai-app .vzai-meter .vzai-usage-pct::before { font-size: 10px; } /* centre the bars between BETA and the first icon: the brand reaches the icon (head gap 8px + icon inset 8px), * the bars take equal auto space on each side, 6px minimum. */ #vzai-app .vzai-brand { margin-right: -16px; } #vzai-app .vzai-brand .vzai-beta { margin-right: -8px; } #vzai-app .vzai-brand > :not(.vzai-beta):has(+ .vzai-usage) { margin-right: -8px; } /* no Beta badge: the item before the bars cancels the gap */ #vzai-app .vzai-usage { margin: 0 auto; padding: 2px 6px; } #vzai-app .vzai-usage-text { left: 50%; transform: translateX(-50%); } } @media (max-width: 600px) { @container vzai (max-width: 420px) { #vzai-app .vzai-meter .vzai-usage-bar { width: 26px; } #vzai-app .vzai-meter { gap: 5px; } } } /* 2.11.13: thumbnails of images sent this visit (browser copy only) */ #vzai-app .vzai-sent-imgs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; } #vzai-app .vzai-sent-imgs:first-child { margin-top: 0; } #vzai-app .vzai-sent-imgs img { display: block; max-width: 160px; max-height: 120px; width: auto; height: auto; border-radius: 8px; object-fit: cover; border: 1px solid var(--vzai-line); } /* 2.11.15 (Vlad): in narrow chats (bubble, phones) the bars fill the space between BETA and the icons instead of a fixed * width, and the Today / Month labels show whenever the bars have room (120px or more). */ @container vzai (max-width: 560px) { #vzai-app .vzai-usage { flex: 1 1 auto; min-width: 0; margin: 0; padding: 2px 6px; container: vzai-usage / inline-size; } #vzai-app .vzai-meters { flex: 1 1 auto; min-width: 0; } #vzai-app .vzai-meter { gap: 6px; } #vzai-app .vzai-meter .vzai-usage-bar { flex: 1 1 auto; width: auto; min-width: 20px; } #vzai-app .vzai-meter .vzai-usage-pct { flex: 0 0 auto; min-width: 22px; text-align: right; } /* the usage box is now a container, so the tooltip measures the screen, not the bars */ #vzai-app .vzai-usage-text { max-width: min(300px, calc(100vw - 32px)); } } @media (max-width: 600px) { @container vzai (max-width: 420px) { #vzai-app .vzai-meter .vzai-usage-bar { width: auto; } } } @container vzai-usage (min-width: 120px) { #vzai-app .vzai-meter-label { display: block; width: 32px; } } /* 2.11.16 (Vlad): more room on both sides of the bars in narrow chats (bubble, phones). The 2.11.13 negative margins * pulled the bars into BETA and the % under the first icon. Now: no negative margins, and the same 24px of visual space * on each side (left: brand gap 8 + margin 12 + padding 4; right: padding 4 + margin 5 + head gap 8 + icon inset 7, measured). */ @container vzai (max-width: 560px) { #vzai-app .vzai-brand, #vzai-app .vzai-brand .vzai-beta { margin-right: 0; } #vzai-app .vzai-brand > :not(.vzai-beta):has(+ .vzai-usage) { margin-right: 0; } /* own rule: browsers without :has() drop only this one */ #vzai-app .vzai-usage { margin: 0 5px 0 12px; padding: 2px 4px; } } /* 2.11.16 (Vlad): phones get 20px side padding (was 16px) in the full chat too. */ @media (max-width: 600px) { #vzai-app { --vzai-gutter: 20px; } } /* 2.11.16: small phones (chat under 412px, e.g. a 375px or 400px phone with four header icons; measured: 408px still overflows) have no room for the * percentages: show just the bars there with tighter gaps. The tooltip still gives the numbers. */ @container vzai (max-width: 411px) { #vzai-app .vzai-usage { margin: 0 0 0 6px; padding: 2px; } #vzai-app .vzai-meter .vzai-usage-pct { display: none; } #vzai-app .vzai-meter .vzai-usage-bar { min-width: 16px; } } /* 2.11.17 (Vlad): phones and tablets (under 840px): centre the 20px message icon under the 24px header icon (2px in). */ @media (max-width: 839px) { #vzai-app .vzai-bot::before { margin-left: 2px; } } /* 2.11.20 (Vlad): the full chat on desktop (chat wider than 560px, screen 840px or more) gets a larger icon, name, and * BETA badge, so the badge is as tall as the Today / Month stack (2 x 10px + 2px gap = 22px), like in the bubble. * The bars keep 32px on each side (2.4.3's 24px margin + the 8px brand and head gaps). The 24px answer icon sits 2px in, so it * stays centred under the 28px header icon. In the account tab the bar grows 4px so the space above and below the icon * still equals the side gutter (2.4.5). The bubble (440px) and phones are unchanged. */ @media (min-width: 840px) { @container vzai (min-width: 561px) { #vzai-app .vzai-avatar { width: 28px; height: 28px; } #vzai-app .vzai-brand strong, .vzai-account-tab #vzai-app .vzai-head .vzai-brand strong { font-size: 18px; } #vzai-app .vzai-beta { padding: 3px 9px; font-size: 11.5px; line-height: 16px; } #vzai-app .vzai-bot::before { left: 2px; } /* the account tab bar keeps the 2.4.5 rule: space above and below the (now 28px) icon equals the side gutter */ .vzai-account-tab #vzai-app .vzai-head { height: calc(28px + 2 * var(--vzai-gutter)); min-height: calc(28px + 2 * var(--vzai-gutter)); } } }