weight) */
.vr-v2-widget .vr-hero-elig { font-size:12.5px; color:var(--muted); margin:0 0 10px; max-width:300px; line-height:1.45; }
.vr-v2-widget .vr-hero-contact { font-size:12px; color:var(--muted); margin:10px 0 0; opacity:.85; }
.vr-v2-widget .vr-hero-note {
font-size:12.5px; color:var(--amber); background:var(--amber-bg);
border-radius:9px; padding:8px 12px; margin:0 0 6px; max-width:320px;
}
.vr-v2-widget .vr-login-btn {
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:var(--brand); color:#fff; border:0; border-radius:11px;
padding:13px 22px; font-size:15px; font-weight:600; cursor:pointer;
min-height:48px; margin-top:4px;
}
.vr-v2-widget .vr-login-btn:hover { background:var(--brand-2); }
.vr-v2-widget .vr-login-btn:active { transform:scale(.98); }
.vr-v2-widget .vr-hero-fine { font-size:11px; color:var(--muted); margin-top:12px; }
/* ---- links baseline ---- */
.vr-v2-widget a { color:var(--blue); }
/* ==========================================================================
PROJECT SWITCHER BAR (chat) — current scope + Switch, below the header.
Full-width strip so it always fits the mobile header width; the label
ellipsis-truncates (like .vr-email) so a long project name never pushes
"Switch" off-screen.
========================================================================== */
.vr-v2-widget .vr-projbar {
display:flex; align-items:center; gap:8px;
padding:8px 14px; background:var(--bot); border-bottom:1px solid var(--line);
}
.vr-v2-widget .vr-proj-label {
min-width:0; display:inline-flex; align-items:center; gap:6px;
font-size:12px; font-weight:600; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vr-v2-widget .vr-proj-ic { flex:none; opacity:.85; }
.vr-v2-widget .vr-proj-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vr-v2-widget .vr-proj-switch {
margin-left:auto; flex:none;
background:var(--panel); color:var(--brand); border:1px solid var(--line);
border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer;
}
.vr-v2-widget .vr-proj-switch:hover { background:var(--blue-bg); border-color:var(--blue-bg); }
/* ---- "What's new" bell (projbar, chat only) ----
Sits in the projbar's normal flex flow right after the project label — NO auto margin
(the single margin-left:auto in this bar stays on .vr-proj-switch). The count badge is
an absolute dot on the button; it is aria-hidden (the button's aria-label carries the
exact count) and shows only when unread > 0. */
.vr-v2-widget .vr-notif-bell {
position:relative; flex:none;
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:30px; padding:0;
background:var(--panel); color:var(--ink);
border:1px solid var(--line); border-radius:8px;
font-size:14px; line-height:1; cursor:pointer;
}
.vr-v2-widget .vr-notif-bell:hover { background:var(--blue-bg); border-color:var(--blue-bg); }
.vr-v2-widget .vr-notif-bell-ic { pointer-events:none; }
.vr-v2-widget .vr-notif-badge {
position:absolute; top:-6px; right:-6px;
min-width:16px; height:16px; padding:0 4px;
border-radius:9px; background:var(--brand); color:#fff;
font-size:10px; font-weight:700; line-height:16px; text-align:center;
pointer-events:none;
}
/* keep the [hidden] attribute authoritative even though the class styles the element */
.vr-v2-widget .vr-notif-badge[hidden] { display:none; }
/* ==========================================================================
PROJECT PICKER — the state between login and chat. Rows are >=48px tap targets.
========================================================================== */
.vr-v2-widget .vr-pick { flex:1; overflow-y:auto; padding:16px; background:var(--bg); }
.vr-v2-widget .vr-pick-head h2 { font-size:16px; margin:0 0 3px; color:var(--ink); font-weight:600; }
.vr-v2-widget .vr-pick-head .sub2 { font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.45; }
.vr-v2-widget .vr-pick-list { display:flex; flex-direction:column; gap:9px; }
.vr-v2-widget .vr-pick-loading { font-size:13px; color:var(--muted); padding:12px 2px; display:inline-flex; align-items:center; gap:8px; }
.vr-v2-widget .vr-pick-row {
display:flex; align-items:center; gap:10px; width:100%;
min-height:60px; padding:12px 14px; text-align:left;
background:var(--panel); border:1px solid var(--line); border-radius:12px; cursor:pointer;
}
.vr-v2-widget .vr-pick-row:hover { border-color:var(--brand); box-shadow:0 2px 10px rgba(18,33,46,.08); }
.vr-v2-widget .vr-pick-main { display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.vr-v2-widget .vr-pick-name {
font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.25;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vr-v2-widget .vr-pick-badges { display:flex; flex-wrap:wrap; gap:6px; }
.vr-v2-widget .vr-pill { font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.vr-v2-widget .vr-pill-dec { background:#e6f4ec; color:var(--green); }
.vr-v2-widget .vr-pill-draw { background:var(--grey-bg); color:var(--grey); }
.vr-v2-widget .vr-pick-go { flex:none; color:var(--muted); font-size:22px; line-height:1; }
.vr-v2-widget .vr-pick-empty, .vr-v2-widget .vr-pick-error { text-align:center; padding:26px 18px; color:var(--muted); }
.vr-v2-widget .vr-pick-empty .vr-hero-icon { font-size:34px; margin-bottom:8px; }
.vr-v2-widget .vr-pick-empty h3 { font-size:15px; color:var(--ink); margin:0 0 6px; font-weight:600; }
.vr-v2-widget .vr-pick-empty p, .vr-v2-widget .vr-pick-error p { font-size:13px; line-height:1.5; margin:0 auto; max-width:300px; }
.vr-v2-widget .vr-pick-retry {
margin-top:12px; background:var(--brand); color:#fff; border:0; border-radius:10px;
padding:11px 18px; font-size:13.5px; font-weight:600; cursor:pointer; min-height:44px;
}
.vr-v2-widget .vr-pick-retry:hover { background:var(--brand-2); }
/* ==========================================================================
RESULTS LIST — d.results envelope: up to 10 drawings, each with a prominent
primary download + a collapsed "All files" list. NO href comes from the
envelope; every button mints its URL on click.
========================================================================== */
.vr-v2-widget .rl-head { font-weight:600; font-size:14px; color:var(--ink); margin-bottom:2px; }
.vr-v2-widget .rl-banner {
font-size:12px; color:var(--amber); background:var(--amber-bg);
border-radius:8px; padding:7px 10px; margin:8px 0 2px; line-height:1.4;
}
.vr-v2-widget .rl-item { padding:12px 0; border-top:1px solid var(--line); }
.vr-v2-widget .rl-badges { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:6px; }
.vr-v2-widget .rl-badges:empty { display:none; }
.vr-v2-widget .rl-name { font-weight:600; font-size:14px; line-height:1.35; color:var(--ink); }
.vr-v2-widget .rl-files { margin-top:9px; font-size:12px; color:var(--muted); }
.vr-v2-widget .rl-files summary { cursor:pointer; font-weight:600; color:var(--blue); }
.vr-v2-widget .rl-frow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 0 0; }
.vr-v2-widget .rl-fmeta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; flex:1; }
.vr-v2-widget .rl-fname { font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--muted); word-break:break-all; }
.vr-v2-widget .ext-chip {
font-size:10px; font-weight:700; letter-spacing:.3px; padding:2px 6px; border-radius:5px;
background:var(--grey-bg); color:var(--grey); text-transform:uppercase; white-space:nowrap;
}
.vr-v2-widget .rl-frev { font-size:10.5px; font-weight:700; padding:2px 6px; border-radius:5px; background:#e6f4ec; color:var(--green); white-space:nowrap; }
.vr-v2-widget .rl-verify { margin-top:6px; }
/* ---- mint-on-click download button (styled like .dl; 48px tap target) ---- */
.vr-v2-widget .vr-dl-mint {
display:inline-flex; align-items:center; justify-content:center; gap:7px; margin-top:11px;
background:var(--green); color:#fff; border:0; cursor:pointer;
padding:12px 15px; border-radius:10px; font-weight:600; font-size:14px; min-height:48px;
}
.vr-v2-widget .vr-dl-mint:active { transform:scale(.98); }
.vr-v2-widget .vr-dl-mint:disabled, .vr-v2-widget .vr-dl-mint.vr-dl-busy { opacity:.72; cursor:default; }
/* extras (inside "All files"): compact, no top margin, still a 48px tap target */
.vr-v2-widget .rl-frow .vr-dl-mint { margin-top:0; flex:none; padding:10px 12px; font-size:12.5px; }
/* ---- inline mini spinner (mint fetch + picker load; adapts to currentColor) ---- */
.vr-v2-widget .vr-mini-spin {
display:inline-block; width:13px; height:13px; border-radius:50%;
border:2px solid currentColor; border-top-color:transparent; opacity:.75;
animation:vr-spin .7s linear infinite; vertical-align:-2px;
}
@keyframes vr-spin { to { transform:rotate(360deg); } }
/* ---- toast (mint fallbacks) — small, centered near the composer, auto-dismiss ---- */
.vr-v2-widget .vr-toast {
position:absolute; left:50%; bottom:74px; transform:translateX(-50%);
max-width:86%; z-index:6;
background:#12212e; color:#fff; font-size:12.5px; line-height:1.4; text-align:center;
padding:9px 13px; border-radius:9px; box-shadow:0 6px 20px rgba(18,33,46,.28);
transition:opacity .26s ease, transform .26s ease;
}
.vr-v2-widget .vr-toast-out { opacity:0; transform:translateX(-50%) translateY(6px); }
/* ==========================================================================
"WHAT'S NEW" DRAWER — a show/hide overlay appended into .vr-card (same
appendChild anchor as .vr-toast; the card is position:relative + overflow:
hidden, so the drawer fills the card face — covering the scroll region —
with its OWN scroll and inherits the rounded corners). The chat thread
underneath is never rewritten. z-index 5 keeps it UNDER the toast (z 6) so
mint fallback toasts stay visible above an open drawer.
========================================================================== */
.vr-v2-widget .vr-notif-drawer {
position:absolute; inset:0; z-index:5;
background:var(--bg);
display:none; flex-direction:column;
}
.vr-v2-widget .vr-notif-drawer.vr-notif-open { display:flex; }
.vr-v2-widget .vr-notif-head {
flex:none; display:flex; align-items:center; gap:10px;
padding:12px 14px; background:var(--panel); border-bottom:1px solid var(--line);
}
/* flex:1 on the title pushes the close control right WITHOUT any auto margin */
.vr-v2-widget .vr-notif-title {
flex:1; min-width:0; margin:0;
font-size:15px; font-weight:600; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vr-v2-widget .vr-notif-close {
flex:none; width:30px; height:30px; padding:0;
display:inline-flex; align-items:center; justify-content:center;
background:var(--panel); color:var(--muted);
border:1px solid var(--line); border-radius:8px;
font-size:14px; line-height:1; cursor:pointer;
}
.vr-v2-widget .vr-notif-close:hover { background:var(--blue-bg); border-color:var(--blue-bg); color:var(--ink); }
.vr-v2-widget .vr-notif-fresh {
flex:none; font-size:11.5px; color:var(--muted); line-height:1.45;
padding:8px 14px; background:var(--panel); border-bottom:1px solid var(--line);
}
.vr-v2-widget .vr-notif-body { flex:1; overflow-y:auto; padding:12px 14px; overscroll-behavior:contain; }
.vr-v2-widget .vr-notif-sec-h {
font-size:11px; text-transform:uppercase; letter-spacing:.4px;
color:var(--muted); font-weight:700; margin:16px 0 2px;
}
.vr-v2-widget .vr-notif-sec-h:first-child { margin-top:2px; }
/* in-drawer dedupe: the dictated section headings + 30-day note replace resultsListCard's
chat-facing "Found N drawings" head and "refine your search" banner (the card itself is
still rendered VERBATIM — this only hides its chat chrome inside the drawer) */
.vr-v2-widget .vr-notif-drawer .rl-head,
.vr-v2-widget .vr-notif-drawer .rl-banner { display:none; }
/* muted per-entry context line (server-computed date_line · change_line) */
.vr-v2-widget .vr-notif-line { font-size:11.5px; color:var(--muted); margin-top:3px; }
/* 30-day window note — informational (muted grey), not an alarm banner */
.vr-v2-widget .vr-notif-trunc {
font-size:12px; color:var(--muted); background:var(--grey-bg);
border-radius:8px; padding:8px 10px; margin-top:14px; line-height:1.45;
}
/* ---- picker "what's new" pill — CALM muted blue (vr-pill family; never brand crimson) ---- */
.vr-v2-widget .vr-pill-new { background:var(--blue-bg); color:var(--blue); }
/* ==========================================================================
THEME-BLEED GUARDS (lessons from the legacy plugin's Elementor pain)
Neutralise host-theme decorations on our controls, without !important-spam.
========================================================================== */
.vr-v2-widget button {
font-family:inherit; letter-spacing:normal; text-transform:none;
box-shadow:none; text-decoration:none; line-height:normal; -webkit-appearance:none; appearance:none;
}
.vr-v2-widget button::before,
.vr-v2-widget button::after { content:none; } /* kill theme button pseudo-decorations */
.vr-v2-widget input { font-family:inherit; -webkit-appearance:none; appearance:none; box-shadow:none; }
.vr-v2-widget a { box-shadow:none; }
.vr-v2-widget h1, .vr-v2-widget h2 { text-transform:none; letter-spacing:normal; }
/* ==========================================================================
MOBILE-FIRST (<=768px): the widget fills the viewport, download buttons go
full-width, and tap targets stay >=48px.
========================================================================== */
@media (max-width:768px) {
.vr-v2-widget .vr-card {
max-width:100%;
height:100dvh; /* fills the viewport */
border-radius:0;
border-left:0; border-right:0;
box-shadow:none;
}
.vr-v2-widget .dl { width:100%; } /* full-width download */
.vr-v2-widget .vr-dl-mint.primary { width:100%; } /* full-width primary results download */
.vr-v2-widget .vr-login-btn { width:100%; max-width:360px; }
.vr-v2-widget .vr-email { max-width:96px; }
/* chips (suggestions + disambiguation) get a >=48px tap target on touch */
.vr-v2-widget .chip { min-height:48px; display:inline-flex; align-items:center; padding:9px 15px; }
/* project-bar Switch control: same >=48px touch treatment (review punch #1) */
.vr-v2-widget .vr-proj-switch {
min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:9px 16px;
}
/* "what's new": bell + drawer close keep house-rule touch targets; the drawer itself is
inset:0, so inside the full-screen mobile card it is automatically full-width */
.vr-v2-widget .vr-notif-bell { min-width:48px; min-height:48px; }
.vr-v2-widget .vr-notif-close { min-width:44px; min-height:44px; }
}
/* dvh fallback for older engines */
@supports not (height:100dvh) {
@media (max-width:768px) {
.vr-v2-widget .vr-card { height:100vh; }
}
}
/* ==========================================================================
BUBBLE MODE — opt-in via [virtureal_chatbot_v2 mode="bubble"]
A floating launcher + slide-up panel, portaled to
by widget.js so it
escapes any Elementor `transform` ancestor. EVERY rule below is gated on
[data-vr-v2-mode="bubble"], so the default (inline) widget is byte-for-byte
unaffected. Geometry + timing mirror the launcher/panel that shipped on the
live site (react_chatbot_code/src/App.css:40-128, 415-462).
========================================================================== */
.vr-v2-widget[data-vr-v2-mode="bubble"] {
--vr-v2-z:99999; /* above sticky headers / Elementor overlays */
}
/* ---- floating launcher ----
A TEXT monogram, never an /