/* Zoviz Agent: the full page (agent.html) around the chat of frame.js (page
mode). frame.css comes first: its tokens, fonts and chat styles; this file
lays out the page: the top bar and its menus, the chats sidebar (a drawer
below 992 px), the start screen, the conversation column and the
settings, privacy and confirm dialogs. No inline styles anywhere (the
page's CSP is style-src 'self'); agent.js toggles classes and the hidden
attribute only (and, below 992 px, moves the brand and workspace pills
into the drawer). Logical properties only (inline/block), so the page
mirrors in Arabic. (UI/UX, 2026-10-17) The bar follows the Zoviz app bar
on /app/dashboard; the body's state class (ag-s-out, ag-s-beta, ag-s-in,
ag-s-err, plus ag-loading) decides which of its parts show. */
:root {
--ag-bg: #f5f8f7;
--ag-col: 760px; /* the conversation's reading column */
--ag-side: 272px;
--ag-bar-h: 64px;
--ag-bar-line: #dce0e0;
--ag-bar-line-2: #c5cdcd;
--ag-bar-hover: #f2f5f5;
--ag-bar-ink-2: #464c4c; /* 9.4:1 on white */
--ag-faint: #8f9696; /* icons and chevrons only (3.1:1), never text */
--ag-cur: #eef7f5; /* the current row of a menu */
--ag-danger: #a12a1f; /* 7.3:1 on white */
}
html, body { height: 100%; height: 100dvh; }
body.ag { display: flex; flex-direction: column; overflow: hidden; background: var(--ag-bg); }
/* ---- the body's state: which parts of the bar show (agent.js setState) ---------------------- */
body:not(.ag-s-in) .ag-in-only { display: none !important; }
body:not(.ag-s-out) .ag-out-only { display: none !important; }
body:not(.ag-s-in):not(.ag-s-beta) .ag-user-only { display: none !important; }
/* until the first answer: the page's own English stays unseen (applyTexts
puts the page's language in at once), and the composer never shows */
.ag-loading [data-t], .ag-loading .ag-dd-lang { visibility: hidden; }
.ag-loading .zv-panel { visibility: hidden; }
/* ---- the skip link: the first stop, visible once it has the focus ---------------------- */
.ag-skip:not(:focus) {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ag-skip:focus {
position: fixed; z-index: 50; inset-block-start: 8px; inset-inline-start: 8px; padding: 10px 14px;
border-radius: 8px; background: var(--zv-paper); color: var(--zv-ink); border: 1px solid var(--zv-edge);
font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--zv-shadow);
}
body:not(.ag-s-in) .ag-skip { display: none; }
/* ---- the top bar ------------------------------------------------------------------------ */
.ag-top {
flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 16px;
min-height: var(--ag-bar-h); padding-inline: 24px; background: var(--zv-paper);
border-block-end: 1px solid var(--ag-bar-line); position: relative; z-index: 10;
}
.ag-logo { flex: none; display: inline-flex; align-items: center; min-height: 34px; color: var(--zv-ink); text-decoration: none; }
.ag-word { display: block; width: 94px; height: auto; max-height: 28px; }
.ag-icon { display: none; width: 31px; height: 26px; }
.ag-name { flex: none; display: inline-flex; align-items: center; gap: 7px; margin-inline-start: -4px; }
.ag-agent { font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; color: var(--zv-ink); }
/* (phase C) Zoviz Agent · Beta: the tag stays next to the name on every screen */
.ag-beta {
flex: none; padding: 0 7px; line-height: 20px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
white-space: nowrap; color: var(--zv-action-ink); background: var(--zv-action-bg); border: 1px solid var(--zv-action-border);
}
.ag-rule { flex: none; width: 1px; height: 24px; margin-inline: -4px; background: var(--ag-bar-line); }
.ag-grow { flex: 1 1 auto; min-width: 0; }
.ag-tb-end { flex: none; display: flex; align-items: center; gap: 8px; }
.ag-tb-btn {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
padding: 0; border: 1px solid var(--ag-bar-line); border-radius: 8px; background: var(--zv-paper);
color: var(--ag-bar-ink-2); cursor: pointer;
}
.ag-tb-btn .zv-icon { width: 18px; height: 18px; }
.ag-menu { border-color: transparent; background: transparent; }
.ag-menu .zv-icon { width: 22px; height: 22px; }
/* a menu's trigger and its panel */
.ag-dd { position: relative; min-width: 0; flex: 0 1 auto; }
.ag-pill {
display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 0; max-width: 232px;
padding-inline: 9px 11px; border: 1px solid var(--ag-bar-line); border-radius: 8px; background: var(--zv-paper);
font: inherit; font-size: 14px; font-weight: 500; color: var(--zv-ink); cursor: pointer;
}
.ag-pill-plain { cursor: default; padding-inline-end: 11px; }
.ag-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-chev { flex: none; width: 14px; height: 14px; color: var(--ag-faint); }
.ag-pill[aria-expanded="true"] .ag-chev, .ag-credits[aria-expanded="true"] .ag-chev,
.ag-lang[aria-expanded="true"] .ag-chev { transform: rotate(180deg); }
.ag-pill[aria-expanded="true"] { background: var(--ag-bar-hover); }
/* a workspace's initials */
.ag-ini {
flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 20px;
padding-inline: 3px; border-radius: 6px; background: #f5f5f5; border: 1px solid var(--ag-bar-line);
color: var(--ag-bar-ink-2); font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .02em;
}
.ag-ini-one { font-size: 12px; letter-spacing: 0; }
/* a brand's logo in a light frame, the brand's colour as its stroke (an SVG
rect: no inline style), or its first letter */
.ag-thumb {
position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 2px; border-radius: 6px; border: 1px solid var(--ag-bar-line-2); background: #fff;
}
.ag-thumb-big { width: 32px; height: 32px; padding: 3px; border-radius: 8px; }
.ag-framed { border-color: transparent; }
.ag-thumb-frame { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; }
.ag-thumb-img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.ag-thumb-letter { font-size: 10px; font-weight: 700; line-height: 1; color: var(--zv-muted); }
.ag-thumb-big .ag-thumb-letter { font-size: 13px; }
/* the plan, the New chat icon, the credits, the language, Sign in, the avatar */
.ag-badge {
flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 13px;
border: 1px solid var(--ag-bar-line); border-radius: 999px; background: var(--zv-paper);
color: var(--zv-teal); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ag-badge .zv-icon { width: 15px; height: 15px; }
.ag-badge.ag-free { color: var(--zv-muted); }
.ag-credits {
display: inline-flex; align-items: center; gap: 8px; height: 34px; padding-inline: 13px;
border: 1px solid var(--ag-bar-line); border-radius: 999px; background: var(--zv-paper);
color: var(--ag-bar-ink-2); font: inherit; cursor: pointer; white-space: nowrap;
}
.ag-coin { width: 15px; height: 15px; color: var(--zv-teal); }
.ag-credits .ag-chev, .ag-lang .ag-chev { width: 13px; height: 13px; }
.ag-num { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.ag-lang {
display: inline-flex; align-items: center; gap: 4px; height: 34px; padding-inline: 11px;
border: 1px solid transparent; border-radius: 8px; background: none; color: var(--zv-muted);
font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
}
.ag-signin {
display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; border-radius: 8px;
border: 1px solid var(--zv-action-border); background: var(--zv-action-bg); color: var(--zv-action-ink);
font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ag-signin .zv-icon { width: 16px; height: 16px; }
.ag-avatar {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
padding: 0; border-radius: 50%; background: #e7f2ee; border: 1px solid #d5e5df; box-shadow: inset 0 0 0 2px #fff;
color: var(--zv-teal-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
}
.ag-avatar-icon { width: 20px; height: 20px; }
/* the loading bar's fixed places, so nothing jumps when the real ones arrive */
.ag-skel { display: none; }
.ag-loading .ag-skel { display: inline-flex; align-items: center; gap: 12px; }
.ag-skel i, .ag-skel b { display: block; height: 34px; border-radius: 8px; border: 1px solid #edf0f0; background: #eef1f1; }
.ag-skel-start i:first-child { width: 190px; } .ag-skel-start i + i { width: 150px; }
.ag-skel-end i { width: 96px; border-radius: 999px; } .ag-skel-end i:nth-child(3) { width: 46px; border-radius: 8px; }
.ag-skel-end b { width: 40px; height: 40px; border-radius: 50%; }
/* (UI/UX P0-6) and the sidebar's: New chat and three chats (992 px and wider) */
.ag-side-skel { display: none; }
@media (min-width: 992px) {
.ag-loading .ag-rule.ag-in-only { display: block !important; }
.ag-loading .ag-side-skel {
flex: none; display: grid; align-content: start; gap: 10px; width: var(--ag-side); padding: 14px 12px;
border-inline-end: 1px solid var(--zv-line); background: var(--zv-paper);
}
.ag-side-skel i { display: block; height: 34px; border-radius: 8px; background: #eef1f1; }
.ag-side-skel i:first-child { height: 40px; margin-block-end: 14px; }
}
/* ---- the menus ------------------------------------------------------------------------------ */
.ag-pop {
position: absolute; inset-block-start: calc(100% + 8px); z-index: 30; width: 288px;
max-height: min(70dvh, 480px); overflow: auto; padding: 6px; background: var(--zv-paper);
border: 1px solid var(--ag-bar-line-2); border-radius: 12px; box-shadow: 0 8px 24px rgba(23, 59, 51, .14);
color: var(--zv-ink); font-size: 14px; text-align: start;
}
.ag-pop-start { inset-inline-start: 0; }
.ag-pop-end { inset-inline-end: 0; }
.ag-pop-lang { width: 232px; }
.ag-pop-acct { width: 310px; }
.ag-pop-h {
display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0;
padding-block: 8px 6px; padding-inline: 10px; font-size: 13px; font-weight: 600; color: var(--zv-ink);
}
.ag-pop-link { color: var(--zv-teal); font-weight: 500; font-size: 13px; text-decoration: none; }
.ag-pop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ag-pop-list:focus-visible { outline-offset: -2px; }
.ag-mi {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding-block: 7px;
padding-inline: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--zv-ink);
font: inherit; font-size: 14px; text-align: start; text-decoration: none; cursor: pointer;
}
.ag-mi-cur { cursor: default; }
/* (QA-002) the workspace rows are to read: the switch is Zoviz's own */
.ag-mi-read { cursor: default; }
.ag-mi-cur, .ag-mi[aria-selected="true"], .ag-mi[aria-checked="true"] { background: var(--ag-cur); }
.ag-mi[aria-disabled="true"] { cursor: default; color: var(--zv-muted); }
/* the active option of the brand list (aria-activedescendant): its own ring */
.ag-mi.ag-active { outline: 2px solid var(--zv-teal); outline-offset: -2px; }
.ag-mi-t { flex: 1 1 auto; min-width: 0; display: grid; }
.ag-mi-t > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ag-mi-sub { font-size: 12.5px; color: var(--zv-muted); }
.ag-ok { flex: none; width: 18px; height: 18px; color: var(--zv-teal); }
.ag-ext { flex: none; width: 15px; height: 15px; color: var(--ag-faint); }
.ag-lead { flex: none; width: 18px; height: 18px; color: var(--zv-teal); display: inline-flex; }
.ag-lead .zv-icon { width: 18px; height: 18px; }
.ag-next { flex: none; width: 16px; height: 16px; color: var(--ag-faint); }
.ag-code { flex: none; width: 22px; font-size: 12px; font-weight: 500; color: var(--zv-muted); }
.ag-sep { height: 1px; margin-block: 6px; margin-inline: 4px; background: var(--zv-line); }
.ag-pop-note {
margin-block: 4px 6px; margin-inline: 10px; padding-block: 8px; padding-inline: 10px; border-radius: 8px;
background: var(--zv-warm); border: 1px solid var(--zv-warm-edge); font-size: 12.5px; line-height: 1.5; color: var(--zv-ink);
}
.ag-pop-none { margin: 4px 10px 8px; font-size: 13px; color: var(--zv-muted); }
.ag-search {
display: flex; align-items: center; gap: 8px; height: 36px; margin-block: 2px 6px; margin-inline: 4px;
padding-inline: 10px; border: 1px solid var(--zv-field); border-radius: 8px; color: var(--ag-faint);
}
.ag-search .zv-icon { width: 16px; height: 16px; }
.ag-search:focus-within { border-color: var(--zv-teal); box-shadow: 0 0 0 3px rgba(0, 132, 125, .22); }
.ag-search-input {
flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent;
outline: 2px solid transparent; font: inherit; font-size: 14px; color: var(--zv-ink);
}
.ag-search-input::placeholder { color: var(--zv-muted); opacity: 1; }
.ag-count { display: grid; margin: 0; padding-block: 8px 2px; padding-inline: 10px; font-size: 18px; font-weight: 600; }
.ag-count .ag-num { font-size: 18px; font-weight: 600; }
.ag-count-sub { font-size: 12.5px; font-weight: 400; color: var(--zv-muted); }
.ag-acct-head { display: flex; align-items: center; gap: 12px; padding-block: 10px 8px; padding-inline: 10px; }
.ag-acct-head .ag-avatar { cursor: default; }
.ag-acct-who { display: grid; min-width: 0; }
.ag-acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ag-acct-sub { font-size: 12px; color: var(--zv-muted); }
.ag-mi-back { color: var(--zv-teal-ink); }
/* below 576 px only: the plan and the language inside the account menu */
@media (min-width: 576px) { .ag-ph-only { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
.ag-pop:not([hidden]) { animation: ag-pop 120ms var(--zv-ease); }
}
@keyframes ag-pop { from { opacity: 0; transform: translateY(-4px); } }
/* the scrim under the drawer or a bottom sheet; the layers: the page, the
scrim (20), the drawer (21), the sheets (30) */
.ag-scrim { position: fixed; z-index: 20; inset-block: var(--ag-bar-h) 0; inset-inline: 0; background: rgba(28, 41, 41, .35); }
body.ag-sheet .ag-scrim { inset-block: 0; }
/* ---- the body: the chats sidebar and the conversation ------------------------------------ */
.ag-body { flex: 1 1 auto; min-height: 0; display: flex; }
.ag-side {
flex: none; width: var(--ag-side); display: flex; flex-direction: column; gap: 6px; min-height: 0;
padding: 14px 12px; border-inline-end: 1px solid var(--zv-line); background: var(--zv-paper);
}
.ag-side-tools { display: none; gap: 8px; }
.ag-slot { display: grid; gap: 4px; }
.ag-slot .ag-dd { width: 100%; }
.ag-slot .ag-pill { width: 100%; max-width: none; height: 40px; }
.ag-slot .ag-lbl { flex: 1 1 auto; text-align: start; }
.ag-side-label {
margin-block: 6px 0; margin-inline: 4px; font-size: 11.5px; font-weight: 600; color: var(--zv-muted);
text-transform: uppercase; letter-spacing: .03em;
}
.ag-side-chats { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
/* (UI/UX) New chat: an outline button, no longer the loudest thing on screen */
.ag-new {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-block: 8px; padding-inline: 12px;
border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
border: 1px solid var(--zv-edge); background: var(--zv-paper); color: var(--zv-ink);
}
.ag-new .zv-icon { width: 18px; height: 18px; }
.ag-side-title {
margin-block: 14px 2px; margin-inline: 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em;
text-transform: uppercase; color: var(--zv-muted);
}
.ag-side-note { margin: 4px 6px; font-size: 13px; line-height: 1.5; color: var(--zv-muted); }
/* (UI/UX P0-4) one long title never widens the list: every row is the list's width */
.ag-chats {
list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px;
}
.ag-chat { display: flex; align-items: center; min-width: 0; border-radius: 8px; }
.ag-chat.ag-active { background: var(--zv-quiet); }
.ag-chat-open {
flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
padding-block: 8px; padding-inline: 10px 6px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
font: inherit; text-align: start; color: var(--zv-ink);
}
.ag-chat-title { display: block; width: 100%; font-size: 13.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chat-when { font-size: 11.5px; color: var(--zv-muted); unicode-bidi: isolate; }
.ag-chat-x, .ag-note-x {
flex: none; width: 28px; height: 28px; padding: 0; border-radius: 6px; cursor: pointer;
border: 1px solid transparent; background: transparent; color: var(--zv-muted);
display: inline-flex; align-items: center; justify-content: center;
}
.ag-chat-x .zv-icon, .ag-note-x .zv-icon { width: 16px; height: 16px; }
.ag-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; }
/* the start screen: shown while the conversation is empty (agent.js: ag-empty).
(UI/UX P0-7) its column centres itself while it fits and scrolls from its
top when it does not (a short window never clips the greeting) */
.ag-hero {
flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start;
width: 100%; padding-block: 32px 12px; padding-inline: 24px;
}
.ag-hero-in { width: 100%; max-width: var(--ag-col); margin: auto; }
.ag:not(.ag-empty) .ag-hero, .ag-loading .ag-hero { display: none; }
.ag-hero-title { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.ag-hero-text { margin-block: 10px 12px; margin-inline: 0; font-size: 15px; color: var(--zv-muted); max-width: 560px; }
/* (phase C) the AI label and (UI/UX P1-15) the AI note in one line under it */
.ag-ai-line { margin-block: 0 14px; margin-inline: 0; font-size: 12.5px; line-height: 1.5; color: var(--zv-muted); max-width: 600px; }
.ag-ai-line .zv-ai-label { margin-block: 0; margin-inline: 0 8px; vertical-align: 1px; }
/* (privacy fix) under it, what is kept and the Privacy button, as a link in
the line (the darker teal on the page's grey, as on the gates) */
/* (smart agent, 2026-10-20, S5) one paragraph of fine print: the privacy line follows the AI note in it */
.ag-privacy-line { margin-inline-start: 4px; }
.ag-privacy-line .ag-linkbtn { font-size: inherit; color: var(--zv-teal-ink); }
.ag-gate .ag-ai-note, .ag-memory-first, .ag-brand-auto { margin-block: 0 14px; font-size: 13px; line-height: 1.5; color: var(--zv-muted); max-width: 560px; }
.ag-memory-first, .ag-brand-auto { padding-block: 8px; padding-inline: 12px; border-radius: 10px; background: var(--zv-quiet); border: 1px solid var(--zv-line); }
.ag-hero .ag-tasks { margin-block-start: 10px; }
.ag-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ag-task {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start;
min-height: 84px; padding: 14px; border-radius: 12px; cursor: pointer;
border: 1px solid var(--zv-edge); background: var(--zv-paper); color: var(--zv-ink); font: inherit;
}
.ag-task-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ag-task-text { font-size: 13px; line-height: 1.45; color: var(--zv-muted); }
/* the sign-in, Beta and error gates. (UI/UX P1-7) the AI label on its own
line, titles balanced, the error gate's Reload */
.ag-gate { margin: auto; max-width: 480px; padding: 32px 24px; text-align: center; }
.ag-gate-title { margin-block: 0 10px; margin-inline: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.ag-gate-text { margin-block: 0 14px; margin-inline: 0; color: var(--zv-muted); text-wrap: balance; }
/* (signed-out package) back from the sign-in still signed out: open the dashboard once */
.ag-gate-bounce { margin-block: 0 14px; margin-inline: 0; text-wrap: balance; }
.ag-gate .zv-ai-label { display: block; width: fit-content; margin-block: 0 10px; margin-inline: auto; }
.ag-gate .ag-ai-note { margin-inline: auto; }
.ag-gate .zv-btn { justify-content: center; }
.ag-gate-more { margin: 14px 0 0; }
.ag-gate-more:not(:has(:not([hidden]))) { display: none; }
.ag-linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; text-decoration: underline; }
/* (WS-C, the shots) on the page's grey the teal link was 4.3:1: the darker teal */
.ag-gate .zv-link { color: var(--zv-teal-ink); }
/* the chat, full width (frame.css draws it as a floating panel). (UI/UX P1-3)
the log scrolls at the page's edge; its column stays centred */
.ag .zv-panel {
position: relative; inset: auto; flex: 0 0 auto; min-height: 0;
width: 100%; max-width: none; margin: 0;
border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible;
}
.ag:not(.ag-empty) .zv-panel { flex: 1 1 auto; overflow: hidden; }
.ag.ag-empty .zv-head, .ag.ag-empty .zv-log, .ag.ag-empty .ag-h1 { display: none; }
.ag .zv-head, .ag .zv-log, .ag .zv-form, .ag .zv-hint, .ag .zv-status, .ag .ag-mic-note, .ag .zv-limit, .ag .ag-ctx {
padding-inline: max(24px, calc((100% - var(--ag-col)) / 2));
}
/* (UI/UX P1-2) a slim header: the chat's title and the AI label, never a
second New chat (the bar or the sidebar has it: corrections 15) */
.ag .zv-head { flex-wrap: nowrap; min-height: 44px; padding-block: 6px; background: transparent; border-block-end-color: var(--zv-line); }
.ag .zv-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ag .zv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--zv-ink); }
.ag .zv-head .zv-ai-label { flex: none; margin: 0; }
.ag .zv-actions { display: none; }
.ag .zv-log { padding-block: 20px; gap: 16px; }
.ag .zv-msg { max-width: 92%; }
.ag .zv-bot { background: var(--zv-paper); border: 1px solid var(--zv-line); }
.ag .zv-form { padding-block: 12px 6px; border-block-start: 0; }
.ag .zv-hint { padding-block: 2px 16px; }
.ag .zv-input { background: var(--zv-paper); }
/* (WS-C, the shots) an empty box keeps one line: a placeholder longer than the
box (the Arabic one at 375 px) is cut with an ellipsis instead of wrapping,
which made grow() open the empty box at two rows */
.ag .zv-input:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag .zv-input:disabled { background: var(--zv-quiet); cursor: not-allowed; }
.ag-gate:not([hidden]) ~ .zv-panel, .ag-gate:not([hidden]) ~ .ag-hero { display: none; }
.ag .zv-copy-row { margin-block-start: 8px; }
/* (image tools) a picture in the wide column stays a comfortable size */
.ag .zv-image { max-width: min(100%, 480px); }
/* (logo options; UI/UX P1-11) as many designs side by side as fit (each at
least 200 px: three in the column), else one per line as in the widget;
Customize says it opens in a new tab */
.ag .zv-logo-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.ag .zv-logo .zv-logo-link::after {
content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ag .zv-copy-btn, .ag .zv-retry {
display: inline-flex; align-items: center; min-height: 32px; padding-block: 4px; padding-inline: 12px; border-radius: 8px;
cursor: pointer; border: 1px solid var(--zv-edge); background: var(--zv-paper); color: var(--zv-ink);
font: inherit; font-size: 13px; font-weight: 500;
}
/* (UI/UX P1-6) the reply on its way: three dots after their message */
.ag .zv-typing {
align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding-block: 14px; padding-inline: 16px;
background: var(--zv-paper); border: 1px solid var(--zv-line); border-end-start-radius: 6px;
}
.ag .zv-typing i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--ag-faint); }
@media (prefers-reduced-motion: no-preference) {
.ag .zv-typing i { animation: ag-dot 1.2s ease-in-out infinite; }
.ag .zv-typing i:nth-child(2) { animation-delay: .15s; }
.ag .zv-typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes ag-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* (UI/UX P1-4) a message that did not go through: said on it, with Try again */
.ag .zv-unsent { opacity: .8; }
.ag .zv-unsent-row {
align-self: flex-end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
margin-block-start: -8px; font-size: 13px; font-weight: 500; color: var(--ag-danger);
}
/* (UI/UX P1-5) a limit: the time they can write again, above the composer */
.ag .zv-limit { flex: none; margin-block-start: 8px; }
.ag .zv-limit-in {
margin: 0; padding-block: 10px; padding-inline: 14px; border-radius: 12px; font-size: 14px; line-height: 1.5;
background: var(--zv-warm); border: 1px solid var(--zv-warm-edge); color: var(--zv-ink);
}
/* (smart agent, 2026-10-20) the tools under an answer (frame.js pageActs):
one row, Copy first (the one filled button on a draft), then Another
version and More, the thumbs quiet at its end; More's panel opens below the
row inside the answer; a page or tool to open is a quiet outline link (S2) */
.ag .zv-acts { align-items: center; gap: 6px; margin-block-start: 10px; }
.ag .zv-act, .ag .zv-out {
display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-block: 4px; padding-inline: 12px;
border-radius: 8px; cursor: pointer; border: 1px solid var(--zv-edge); background: var(--zv-paper); color: var(--zv-ink);
font: inherit; font-size: 13px; font-weight: 500; line-height: 1.35; text-decoration: none;
}
.ag .zv-act:disabled { opacity: .5; cursor: default; }
.ag .zv-copy-btn.zv-primary {
border-color: var(--zv-action-border); background: var(--zv-action-bg); color: var(--zv-action-ink); font-weight: 600;
}
.ag .zv-act .zv-icon, .ag .zv-out .zv-icon { width: 14px; height: 14px; }
.ag .zv-more[aria-expanded="true"] .zv-chev { transform: rotate(180deg); }
.ag .zv-tone[aria-expanded="true"] .zv-chev { transform: rotate(90deg); }
.ag .zv-menu {
display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; padding: 8px; border-radius: 10px;
border: 1px solid var(--zv-line); background: var(--zv-quiet);
}
.ag .zv-tones { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-inline-start: 12px; }
.ag .zv-links { margin-block-start: 8px; }
.ag .zv-votes { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.ag .zv-vote {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
border-radius: 8px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--zv-muted);
}
.ag .zv-vote .zv-icon { width: 17px; height: 17px; }
.ag .zv-vote-down .zv-icon { transform: rotate(180deg); }
.ag .zv-vote[aria-pressed="true"] { color: var(--zv-teal-ink); }
.ag .zv-vote[aria-pressed="true"] .zv-icon { fill: var(--zv-badge); }
.ag .zv-fix { margin-block-start: 8px; }
/* (S3) a gap a draft leaves to fill ([your offer]): seen before it is copied */
.ag .zv-gap { padding-inline: 2px; border-radius: 4px; background: #fdf0c4; color: var(--zv-ink); }
/* (S6) a chat handed over from the help chat: its earlier turns folded and
quiet, the line where this page's own turns begin, the one-tap chip */
.ag .zv-earlier { padding-block: 8px; padding-inline: 12px; border-radius: 12px; border: 1px dashed var(--zv-edge); }
.ag .zv-earlier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--zv-muted); }
.ag .zv-earlier-show {
padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
color: var(--zv-teal-ink); text-decoration: underline;
}
.ag .zv-earlier-body { display: flex; flex-direction: column; gap: 12px; margin-block-start: 10px; }
.ag .zv-earlier-body:focus-visible { outline-offset: 4px; }
.ag .zv-quiet { background: var(--zv-quiet); }
.ag .zv-signed {
display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--zv-muted);
}
.ag .zv-signed::before, .ag .zv-signed::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--zv-line); }
.ag .zv-handoff-work { margin-block-start: 0; }
/* (S4) above the box: the brand it writes for, and Edit profile */
.ag-ctx { flex: none; margin: 0; padding-block: 8px 0; font-size: 12.5px; line-height: 1.5; color: var(--zv-muted); }
.ag-ctx .ag-linkbtn { font-size: inherit; color: var(--zv-teal-ink); }
.ag-ctx:has(.ag-ctx-edit:not([hidden])) .ag-ctx-text::after { content: "·"; margin-inline: 6px; }
/* (S5) the start screen's Continue row: the last three chats */
.ag-continue { margin-block-start: 18px; }
.ag-continue-title {
margin-block: 0 8px; margin-inline: 0; font-size: 12px; font-weight: 600; letter-spacing: .03em;
text-transform: uppercase; color: var(--zv-muted);
}
.ag-continue-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ag-cont-open {
display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px;
padding-block: 8px; padding-inline: 12px; border-radius: 10px; cursor: pointer; text-align: start;
border: 1px solid var(--zv-line); background: var(--zv-paper); color: var(--zv-ink); font: inherit; font-size: 13.5px;
}
.ag-cont-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-cont-when { flex: none; font-size: 12px; color: var(--zv-muted); unicode-bidi: isolate; }
/* the microphone, beside Send */
.ag-mic {
flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; min-height: 48px;
border-radius: 10px; cursor: pointer; border: 1px solid var(--zv-field); background: var(--zv-paper); color: var(--zv-ink);
}
.ag-mic .zv-icon { width: 20px; height: 20px; }
.ag-mic[aria-pressed="true"] { background: #fdecea; border-color: #c0392b; color: var(--ag-danger); }
/* (phase C) the browser microphone's first press: where the words go, before it listens */
.ag-mic-note { margin: 0; padding-block: 0 12px; font-size: 13px; line-height: 1.5; color: var(--zv-muted); }
/* ---- the dialogs: settings, privacy, a question ---------------------------------------------- */
.ag-dialog {
width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow-y: auto;
border: 1px solid var(--zv-edge); border-radius: 16px; background: var(--zv-paper); color: var(--zv-ink);
box-shadow: 0 12px 40px rgba(23, 59, 51, .22);
}
.ag-dialog::backdrop { background: rgba(28, 41, 41, .35); }
/* a browser without