/*
 * The assistant (L-27): the launcher and panel (VirgilCopilot.razor), the quick bar (QuickBar.razor), the insights card
 * (CopilotInsightsNudge.razor), the selection chip and "Show me where" (app.js). Colours, type, shadows and layers come
 * from the design tokens (wwwroot/css/vt-tokens.css), so light and dark both work and no element is lighter than its
 * container in dark mode. One chip, button and card style is shared by all of them; amber is kept for the AI mark.
 */

:root {
  --va-fab-size: 56px;
  --va-fab-gap: 24px;
  --vt-fab-offset: 0px;          /* pages with a composer at the bottom lift the launcher above it (L-28) */
  --va-line: color-mix(in srgb, var(--vt-primary) 22%, transparent);
  --va-line-strong: color-mix(in srgb, var(--vt-primary) 45%, transparent);
  --va-hover: color-mix(in srgb, var(--vt-primary) 10%, transparent);
  --va-z-launcher: var(--vt-z-fab);
  --va-z-panel: calc(var(--vt-z-fab) + 5);
}

/* Composer pages: the private chat, a task's conversation and the report editor keep their Send button clear (L-28). */
body:has(.cc-compose, .mc textarea, .rs-ask) { --vt-fab-offset: 76px; }
/* On phones the demo bar runs along the bottom: the launcher sits above it (and above a composer too). */
@media (max-width: 767.98px) {
  body:has(.demo-bar) { --vt-fab-offset: 64px; }
  body:has(.demo-bar):has(.cc-compose, .mc textarea, .rs-ask) { --vt-fab-offset: 140px; }
}
/* Room under the last row of every page, so the launcher never sits on a table's last actions (L-28). */
#kt_app_content_container { padding-bottom: calc(var(--va-fab-size) + 48px); }

/* ── Shared pieces: chip, button, card ─────────────────────────────────── */

.va-chip, .qb-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--vt-radius-pill);
  border: 1px solid var(--va-line); background: var(--vt-primary-soft); color: var(--vt-link); font-size: var(--vt-text-sm);
  font-weight: 600; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--vt-motion-fast), border-color var(--vt-motion-fast), transform var(--vt-motion-fast); }
.va-chip:hover, .qb-chip:hover { border-color: var(--va-line-strong); background: var(--vt-surface-tint); color: var(--vt-link); transform: translateY(-1px); }
.va-chip-go::after { content: "→"; font-weight: 800; margin-left: 4px; }

.va-btn { min-height: 36px; padding: 6px 14px; border-radius: var(--vt-radius); font-size: var(--vt-text-sm); font-weight: 700;
  border: 1px solid transparent; cursor: pointer; transition: transform var(--vt-motion-fast), background var(--vt-motion-fast), box-shadow var(--vt-motion-fast); }
.va-btn:active { transform: scale(.97); }
.va-btn:focus-visible { outline: none; box-shadow: var(--vt-focus-ring); }
.va-btn-sm { min-height: 30px; padding: 4px 10px; font-size: var(--vt-text-xs); }
.va-btn-primary { background: var(--vt-primary); color: var(--vt-on-primary); }
.va-btn-primary:hover { background: var(--vt-primary-hover); color: var(--vt-on-primary); }
.va-btn-light { background: var(--vt-surface); color: var(--vt-text); border-color: var(--vt-border); }
.va-btn-light:hover { border-color: var(--vt-border-strong); }
.va-btn-ghost { background: transparent; color: var(--vt-text-muted); }
.va-btn-ghost:hover { background: var(--va-hover); color: var(--vt-link); }
.va-btn-danger { background: var(--vt-danger); color: var(--vt-white); }
.va-btn-danger:hover { background: var(--vt-danger-text); color: var(--vt-white); }
.va-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ── Launcher: the AI mark on a round button in the corner ─────────────── */

.va-launcher { position: fixed; right: var(--va-fab-gap); bottom: calc(var(--va-fab-gap) + var(--vt-fab-offset)); z-index: var(--va-z-launcher);
  width: var(--va-fab-size); height: var(--va-fab-size); padding: 0; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; border: 1px solid var(--vt-border); background: var(--vt-surface); box-shadow: var(--vt-shadow-lg), var(--vt-shadow);
  transition: transform var(--vt-motion) var(--vt-ease), box-shadow var(--vt-motion), bottom var(--vt-motion) var(--vt-ease);
  animation: va-launch-in .42s cubic-bezier(.05, .7, .1, 1); }
.va-launcher:hover { transform: translateY(-3px) scale(1.04); }
.va-launcher:active { transform: scale(.96); }
.va-launcher:focus-visible { outline: none; box-shadow: var(--vt-focus-ring), var(--vt-shadow-lg); }
.va-launcher.va-hidden { display: none; }
/* Out of the way while a dialog or side panel is open (L-28). */
body:has(.rz-dialog-wrapper, .rz-dialog-side, .modal.show, .offcanvas.show, .drawer.drawer-on, .qb) .va-launcher { display: none; }
.va-badge { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--vt-danger); border: 2px solid var(--vt-surface); }
@keyframes va-launch-in { from { transform: rotate(90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.va-glint { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.va-glint::before { content: ""; position: absolute; top: -25%; bottom: -25%; left: -70%; width: 45%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vt-brand-300) 55%, transparent), transparent); }
.va-launcher[data-va-play] .vs-big { animation: va-idle-spin 1.6s cubic-bezier(.65, 0, .35, 1); }
.va-launcher[data-va-play] .vs-med { animation: vs-twinkle 1.4s ease-in-out .2s; }
.va-launcher[data-va-play] .vs-sml { animation: vs-twinkle 1.4s ease-in-out .5s; }
.va-launcher[data-va-play] .va-glint::before { animation: va-glint 1.1s .35s ease-in-out; }
@keyframes va-idle-spin { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(200deg) scale(.82); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes va-glint { to { left: 130%; } }

/* ── Panel: floats over the page, opaque, one scroll area (.va-body) ───── */

.va-panel { position: fixed; right: 12px; bottom: 12px; z-index: var(--va-z-panel); display: flex; flex-direction: column; overflow: hidden;
  width: min(calc(100vw - 24px), clamp(400px, 24vw, 540px)); height: min(calc(100vh - 24px), clamp(560px, 74vh, 1180px));
  color: var(--vt-text); font-size: var(--vt-text-md); border-radius: 20px; border: 1px solid var(--vt-border);
  background: linear-gradient(180deg, var(--vt-surface-tint), var(--vt-surface) 140px) var(--vt-surface);
  box-shadow: var(--vt-shadow-lg), var(--vt-shadow);
  transform-origin: 100% 100%; animation: va-grow .46s cubic-bezier(.05, .7, .1, 1);
  transition: width .25s var(--vt-ease), transform .32s var(--vt-ease), opacity .22s ease; }
.va-panel.va-wide { width: min(calc(100vw - 24px), clamp(640px, 46vw, 980px)); height: min(calc(100vh - 24px), clamp(600px, 82vh, 1300px)); }
.va-panel.va-out { animation: va-shrink .2s cubic-bezier(.3, 0, .8, .15) forwards; }
.va-panel:focus { outline: none; }
.va-head > .vs { animation: va-mark-in .62s .08s cubic-bezier(.05, .7, .1, 1) both; }
.va-panel > :not(.va-head) { animation: va-content-in .36s .18s ease-out both; }
@keyframes va-grow {
  0% { clip-path: inset(calc(100% - 68px) 12px 12px calc(100% - 68px) round 28px); opacity: .5; }
  30% { opacity: 1; }
  100% { clip-path: inset(0 0 0 0 round 20px); opacity: 1; }
}
@keyframes va-shrink { to { clip-path: inset(calc(100% - 68px) 12px 12px calc(100% - 68px) round 28px); opacity: 0; } }
@keyframes va-mark-in { from { transform: rotate(-150deg) scale(.45); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes va-content-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* "Show me where": the panel slides out of the way while the screen lights up the route, then glides back */
body.va-guiding .va-panel { transform: translateX(calc(100% + 32px)) !important; opacity: 0 !important; pointer-events: none !important; }

/* Phones (L-28): the whole screen, opaque, the header always in view, clear of the notch and the home bar. */
@media (max-width: 575.98px) {
  :root { --va-fab-gap: 16px; }
  .va-launcher { right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--vt-fab-offset)); }
  .va-panel, .va-panel.va-wide { inset: 0; width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: 0;
    background: var(--vt-surface); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .va-head { position: sticky; top: 0; background: var(--vt-surface); z-index: 1; }
  .va-panel { animation: none; z-index: calc(var(--vt-z-fab) + 6); }   /* above the demo bar along the bottom */
}

.va-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--vt-border); flex-shrink: 0; }
.va-head-text { min-width: 0; flex: 1 1 auto; }
.va-name { font-family: var(--vt-font-display); font-weight: 700; font-size: var(--vt-text-lg); color: var(--vt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-sub { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: var(--vt-text-xs); font-weight: 600; color: var(--vt-text-muted); min-width: 0; }
.va-sub-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-sub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vt-success); flex-shrink: 0; }
.va-sub-busy { color: var(--vt-link); } .va-sub-busy .va-sub-dot { background: var(--vt-primary); animation: va-dot 1.2s ease-in-out infinite; }
.va-sub-listen { color: var(--vt-danger-text); } .va-sub-listen .va-sub-dot { background: var(--vt-danger); animation: va-dot 1s ease-in-out infinite; }
.va-sub-error { color: var(--vt-danger-text); } .va-sub-error .va-sub-dot { background: var(--vt-danger); }
@keyframes va-dot { 50% { transform: scale(.55); opacity: .5; } }
.va-head-actions { display: flex; gap: 2px; flex-shrink: 0; }
.va-icon-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--vt-text-muted); display: inline-flex;
  align-items: center; justify-content: center; transition: background var(--vt-motion-fast), color var(--vt-motion-fast); }
.va-icon-btn:hover:not(:disabled), .va-icon-btn.va-on { background: var(--va-hover); color: var(--vt-link); }
.va-icon-btn:disabled { opacity: .4; }
.va-icon-btn:active:not(:disabled) { transform: scale(.92); }
.va-icon-btn i, .va-icon-btn .path1, .va-icon-btn .path2, .va-icon-btn .path3 { color: inherit !important; }
.va-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.va-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.va-row { display: flex; flex-direction: column; animation: va-rise .24s var(--vt-ease) both; }
@keyframes va-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.va-row-user { align-items: flex-end; }
.va-user { background: var(--vt-primary); color: var(--vt-on-primary); border-radius: 18px 18px 6px 18px; padding: 9px 13px; max-width: 86%;
  font-size: var(--vt-text-md); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--vt-shadow-sm); }
.va-bot { color: var(--vt-text); font-size: var(--vt-text-md); line-height: 1.6; max-width: 100%; overflow-wrap: anywhere; }
.va-bot.va-live { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.7em), rgb(0 0 0 / .3)); mask-image: linear-gradient(180deg, #000 calc(100% - 1.7em), rgb(0 0 0 / .3)); }
.va-bot p { margin: 0 0 8px; } .va-bot p:last-child { margin-bottom: 0; }
.va-bot ul, .va-bot ol { padding-left: 18px; margin: 0 0 8px; } .va-bot li { margin-bottom: 4px; }
.va-bot code { background: var(--vt-surface-muted); padding: 0 4px; border-radius: 5px; font-size: .9em; }
.va-md-h { font-family: var(--vt-font-display); font-weight: 700; margin: 8px 0 4px; color: var(--vt-text); }
/* A place in an answer: a button that opens it */
.va-bot a.va-go { display: inline-flex; align-items: center; gap: 5px; margin: 1px 0; padding: 4px 11px; border-radius: var(--vt-radius-pill);
  background: var(--vt-primary-soft); border: 1px solid var(--va-line); color: var(--vt-link); font-weight: 700; font-size: var(--vt-text-sm);
  text-decoration: none; line-height: 1.4; transition: background var(--vt-motion-fast), border-color var(--vt-motion-fast), transform var(--vt-motion-fast); }
.va-bot a.va-go::after { content: "→"; font-weight: 800; }
.va-bot a.va-go:hover { border-color: var(--va-line-strong); transform: translateY(-1px); }
/* …and beside it, "Show me where": lights up the way there on the screen */
.va-bot button.va-show { display: inline-flex; align-items: center; gap: 6px; margin: 1px 0 1px 6px; padding: 4px 11px; border-radius: var(--vt-radius-pill);
  background: transparent; border: 1px dashed var(--va-line-strong); color: var(--vt-link); font-weight: 700; font-size: var(--vt-text-sm);
  line-height: 1.4; cursor: pointer; transition: background var(--vt-motion-fast), border-color var(--vt-motion-fast); }
.va-bot button.va-show::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vt-accent-amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-accent-amber) 25%, transparent); }
.va-bot button.va-show:hover { background: var(--va-hover); border-style: solid; }
.va-worked { display: inline-flex; align-items: flex-start; gap: 6px; align-self: flex-start; max-width: 100%; margin-bottom: 8px; padding: 4px 9px; border-radius: 12px;
  background: var(--vt-success-soft); border: 1px solid color-mix(in srgb, var(--vt-success) 30%, transparent); font-size: var(--vt-text-xs); color: var(--vt-text-muted); line-height: 1.45; }
.va-worked i, .va-worked .path1, .va-worked .path2 { color: var(--vt-success) !important; }
.va-tools { display: flex; gap: 2px; margin-top: 6px; opacity: .6; transition: opacity var(--vt-motion-fast); }
.va-row-bot:hover .va-tools, .va-tools:focus-within { opacity: 1; }
.va-tools button { border: 0; background: none; border-radius: 8px; padding: 4px 6px; color: var(--vt-text-subtle); transition: background var(--vt-motion-fast), color var(--vt-motion-fast); }
.va-tools button:hover, .va-tools button.va-on { background: var(--va-hover); color: var(--vt-link); }
.va-tools button i, .va-tools button .path1, .va-tools button .path2 { color: inherit !important; }

/* Welcome */
.va-welcome { display: flex; flex-direction: column; gap: 3px; animation: va-rise .3s var(--vt-ease) both; }
.va-hello { font-family: var(--vt-font-display); font-size: var(--vt-text-xl); font-weight: 700; color: var(--vt-text); }
.va-hello-sub { font-size: var(--vt-text-sm); color: var(--vt-text-muted); margin-bottom: 12px; line-height: 1.5; }
.va-brief { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.va-brief-card { display: flex; gap: 10px; text-align: left; padding: 11px 12px; border-radius: var(--vt-radius-lg); border: 1px solid var(--vt-border);
  background: var(--vt-surface); color: inherit; box-shadow: var(--vt-shadow-sm);
  transition: transform .16s var(--vt-ease), box-shadow .16s, border-color .16s; }
.va-brief-card:hover { transform: translateY(-2px); border-color: var(--va-line-strong); box-shadow: var(--vt-shadow); }
.va-brief-card:nth-child(2) { animation: va-rise .3s .06s var(--vt-ease) both; } .va-brief-card:nth-child(3) { animation: va-rise .3s .12s var(--vt-ease) both; }
.va-brief-icon { flex: 0 0 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.va-brief-icon i, .va-brief-icon [class^="path"] { color: inherit !important; }
.va-tone-bad { background: var(--vt-danger-soft); color: var(--vt-danger-text); }
.va-tone-warn { background: var(--vt-warning-soft); color: var(--vt-warning-text); }
.va-tone-info { background: var(--vt-info-soft); color: var(--vt-info-text); }
.va-brief-text { display: flex; flex-direction: column; min-width: 0; }
.va-brief-title { font-size: var(--vt-text-sm); font-weight: 700; color: var(--vt-text); }
.va-brief-detail { font-size: var(--vt-text-xs); color: var(--vt-text-muted); margin-top: 1px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.va-brief-go { font-size: var(--vt-text-xs); font-weight: 700; color: var(--vt-link); margin-top: 4px; }
.va-label { font-size: var(--vt-text-xs); font-weight: 700; color: var(--vt-text-subtle); text-transform: uppercase; letter-spacing: .06em; margin: 6px 0; }
.va-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.va-skeleton { height: 64px; border-radius: var(--vt-radius-lg); background: linear-gradient(90deg, var(--vt-surface-muted), var(--vt-surface-tint), var(--vt-surface-muted));
  background-size: 200% 100%; animation: va-skeleton 1.4s ease-in-out infinite; }
@keyframes va-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* One click instead of typing: the options the assistant offers (offer_choices) */
.va-choices { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.va-choices-q { font-size: var(--vt-text-xs); font-weight: 700; color: var(--vt-text-muted); }
.va-choice { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 14px;
  border: 1px solid var(--va-line); background: var(--vt-surface); color: var(--vt-text); font-size: var(--vt-text-sm); line-height: 1.35;
  box-shadow: var(--vt-shadow-sm); transition: border-color var(--vt-motion-fast), background var(--vt-motion-fast), transform var(--vt-motion-fast); }
.va-choice::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--vt-brand-300); align-self: center; }
.va-choice:hover { border-color: var(--va-line-strong); background: var(--vt-surface-tint); transform: translateY(-1px); }
.va-choice:hover::before { border-color: var(--vt-primary); background: var(--vt-primary); box-shadow: inset 0 0 0 2px var(--vt-surface); }
.va-choice strong { font-weight: 700; color: var(--vt-text); }
.va-choice-detail { color: var(--vt-text-muted); font-size: var(--vt-text-xs); }
.va-choices-hint { font-size: var(--vt-text-xs); color: var(--vt-text-subtle); padding-left: 3px; }
/* "Now on …": what the assistant can do on the page you just moved to */
.va-now { margin: 0 14px 8px; padding: 8px 9px 9px; border-radius: var(--vt-radius-lg); border: 1px solid var(--va-line); background: var(--vt-surface); box-shadow: var(--vt-shadow-sm); }
.va-now-head { display: flex; align-items: center; gap: 6px; font-size: var(--vt-text-xs); color: var(--vt-text-muted); margin-bottom: 6px; }
.va-now-head strong { color: var(--vt-text); font-weight: 700; }
.va-now-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vt-accent-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-accent-amber) 20%, transparent); flex: none; }
.va-now-x { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--vt-text-subtle); display: inline-flex; align-items: center; justify-content: center; }
.va-now-x:hover { background: var(--va-hover); color: var(--vt-link); }
.va-now-x .va-ico { width: 14px; height: 14px; }

/* Live work */
.va-work { border-radius: 18px; border: 1px solid var(--va-line); background: var(--vt-surface-tint); padding: 11px 12px 8px; }
.va-work-head { display: flex; align-items: center; gap: 8px; }
.va-work-title { font-size: var(--vt-text-sm); font-weight: 700; color: var(--vt-text); }
.va-work-time { margin-left: auto; font-size: var(--vt-text-xs); font-weight: 600; color: var(--vt-text-subtle); font-variant-numeric: tabular-nums; }
.va-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.va-step { display: flex; align-items: flex-start; gap: 8px; padding: 5px 1px; animation: va-rise .22s var(--vt-ease) both; }
.va-step-icon { flex: 0 0 18px; height: 18px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; }
.va-step-done i, .va-step-done [class^="path"] { color: var(--vt-success) !important; }
.va-step-failed .va-step-icon i, .va-step-failed .va-step-icon [class^="path"] { color: var(--vt-danger) !important; }
.va-step-text { flex: 1 1 auto; min-width: 0; font-size: var(--vt-text-sm); color: var(--vt-text); line-height: 1.4; }
.va-step-detail { display: block; font-size: var(--vt-text-xs); color: var(--vt-text-muted); margin-top: 1px; }
.va-step-failed .va-step-detail { color: var(--vt-danger-text); }
.va-step-time { flex-shrink: 0; font-size: var(--vt-text-xs); color: var(--vt-text-subtle); font-variant-numeric: tabular-nums; }
.va-shimmer { background: linear-gradient(90deg, var(--vt-text-muted) 0%, var(--vt-text-muted) 35%, var(--vt-brand-300) 50%, var(--vt-text-muted) 65%, var(--vt-text-muted) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; animation: va-shimmer 1.6s linear infinite; }
@keyframes va-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.va-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--vt-border); border-top-color: var(--vt-primary); animation: va-turn .8s linear infinite; flex-shrink: 0; }
@keyframes va-turn { to { transform: rotate(360deg); } }

/* Errors and cards */
.va-error { display: flex; gap: 9px; background: var(--vt-danger-soft); border: 1px solid color-mix(in srgb, var(--vt-danger) 30%, transparent); color: var(--vt-danger-text);
  border-radius: var(--vt-radius-lg); padding: 10px 12px; font-size: var(--vt-text-sm); line-height: 1.5; }
.va-error-icon { color: var(--vt-danger); flex-shrink: 0; } .va-error-icon i, .va-error-icon [class^="path"] { color: inherit !important; }
.va-card { border-radius: 18px; padding: 12px 13px; width: 100%; border: 1px solid var(--vt-border); background: var(--vt-surface); transition: background .25s, border-color .25s; }
.va-card-pending { border-color: color-mix(in srgb, var(--vt-warning) 45%, transparent); background: var(--vt-warning-soft); box-shadow: var(--vt-shadow-sm); }
.va-card-danger.va-card-pending { border-color: color-mix(in srgb, var(--vt-danger) 45%, transparent); background: var(--vt-danger-soft); }
.va-card-done { border-color: color-mix(in srgb, var(--vt-success) 35%, transparent); background: var(--vt-success-soft); }
.va-card-failed { border-color: color-mix(in srgb, var(--vt-danger) 35%, transparent); background: var(--vt-danger-soft); }
.va-card-cancelled, .va-card-expired, .va-card-undone { opacity: .75; }
.va-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.va-card-label { font-size: var(--vt-text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-text-muted); }
.va-card-pending .va-card-label { color: var(--vt-warning-text); }
.va-card-danger.va-card-pending .va-card-label, .va-card-failed .va-card-label { color: var(--vt-danger-text); }
.va-card-done .va-card-label { color: var(--vt-success-text); }
.va-card-kind { font-size: var(--vt-text-xs); font-weight: 600; color: var(--vt-text-muted); }
.va-card-expiry { margin-left: auto; font-size: var(--vt-text-xs); font-weight: 600; color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }
.va-card-title { font-size: var(--vt-text-md); font-weight: 700; color: var(--vt-text); margin-bottom: 6px; }
.va-edited { font-size: var(--vt-text-xs); font-weight: 700; color: var(--vt-info-text); background: var(--vt-info-soft); border-radius: var(--vt-radius-pill); padding: 0 7px; }
.va-preview { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--vt-text-sm); line-height: 1.5; color: var(--vt-text); background: var(--vt-surface);
  border: 1px solid var(--vt-border); border-radius: 12px; padding: 8px 10px; }
.va-reason { width: 100%; margin-top: 8px; padding: 7px 10px; border-radius: var(--vt-radius); border: 1px solid var(--vt-border-strong); background: var(--vt-surface);
  color: var(--vt-text); font: inherit; font-size: var(--vt-text-sm); }
.va-reason:focus { outline: none; box-shadow: var(--vt-focus-ring); }
.va-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.va-card-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: var(--vt-text-sm); font-weight: 600; color: var(--vt-text-muted); }
.va-card-status.va-ok { color: var(--vt-success-text); } .va-card-status.va-bad { color: var(--vt-danger-text); }
.va-card-status i, .va-card-status [class^="path"] { color: inherit !important; }
.va-undo { margin-left: auto; }
.va-batch { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 14px; background: var(--vt-warning-soft); border-top: 1px solid color-mix(in srgb, var(--vt-warning) 40%, transparent);
  flex-shrink: 0; font-size: var(--vt-text-sm); font-weight: 700; color: var(--vt-warning-text); animation: va-rise .22s var(--vt-ease) both; }

/* Composer: one line sits centred between the buttons; it grows upward as you type */
.va-compose { border-top: 1px solid var(--vt-border); padding: 10px 12px 11px; flex-shrink: 0; background: var(--vt-surface); }
.va-input { display: flex; align-items: flex-end; gap: 5px; min-height: 52px; padding: 7px; box-sizing: border-box; border: 1px solid var(--vt-border-strong); border-radius: 18px;
  background: var(--vt-surface); transition: border-color var(--vt-motion-fast), box-shadow var(--vt-motion-fast); }
.va-input:focus-within { border-color: var(--vt-primary); box-shadow: var(--vt-focus-ring); }
.va-input.va-listening { border-color: var(--vt-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vt-danger) 15%, transparent); }
.va-input textarea { flex: 1 1 auto; min-width: 0; height: 36px; min-height: 36px; max-height: 168px; box-sizing: border-box; padding: 6px 0 6px 6px; margin: 0;
  border: 0; outline: 0; resize: none; background: transparent; color: var(--vt-text); font: inherit; font-size: var(--vt-text-md); line-height: 24px; }
.va-input textarea::placeholder { color: var(--vt-text-subtle); }
.va-round { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--vt-motion-fast), transform var(--vt-motion-fast), box-shadow var(--vt-motion-fast); }
.va-round:active { transform: scale(.93); }
.va-round:focus, .va-icon-btn:focus { outline: none; }
.va-round:focus-visible, .va-icon-btn:focus-visible { box-shadow: var(--vt-focus-ring); }
.va-round i, .va-round [class^="path"] { color: inherit !important; }
.va-mic { background: transparent; color: var(--vt-text-muted); } .va-mic:hover { background: var(--va-hover); color: var(--vt-link); }
.va-mic.va-on { background: var(--vt-danger); color: var(--vt-white); }
.va-send { background: var(--vt-border-strong); color: var(--vt-surface); }
.va-input.va-has-text .va-send { background: var(--vt-primary); color: var(--vt-on-primary); }
.va-stop { background: var(--vt-text); } .va-stop span { width: 11px; height: 11px; border-radius: 3px; background: var(--vt-surface); }
.va-wave { display: flex; align-items: center; justify-content: space-between; height: 30px; margin: 8px 4px 0; }
.va-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--vt-danger); opacity: .75; transform: scaleY(.25); animation: va-wave 1s ease-in-out infinite alternate; }
@keyframes va-wave { to { transform: scaleY(1); } }
.va-queued { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 9px; border-radius: 12px; background: var(--vt-primary-soft); font-size: var(--vt-text-xs); color: var(--vt-link); animation: va-rise .2s ease-out both; }
.va-queued-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-queued button { border: 0; background: none; color: var(--vt-link); font-weight: 700; font-size: var(--vt-text-xs); }
.va-hint { display: flex; justify-content: space-between; gap: 10px; color: var(--vt-text-subtle); font-size: var(--vt-text-xs); margin-top: 6px; padding: 0 3px; }

/* Conversations */
.va-search { width: 100%; padding: 8px 11px; border-radius: 12px; border: 1px solid var(--vt-border-strong); background: var(--vt-surface); color: var(--vt-text);
  font-size: var(--vt-text-sm); margin-bottom: 8px; outline: 0; }
.va-search:focus { border-color: var(--vt-primary); box-shadow: var(--vt-focus-ring); }
.va-empty { color: var(--vt-text-subtle); font-size: var(--vt-text-sm); text-align: center; padding: 28px 0; display: flex; justify-content: center; }
.va-conv { display: flex; align-items: center; gap: 4px; border-radius: 12px; padding: 1px 4px; transition: background var(--vt-motion-fast); }
.va-conv:hover, .va-conv-on { background: var(--va-hover); }
.va-conv-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; border: 0; background: none; text-align: left; padding: 7px 6px;
  font-size: var(--vt-text-sm); color: var(--vt-text); font-weight: 600; }
.va-pin { color: var(--vt-link); } .va-pin i, .va-pin [class^="path"] { color: inherit !important; }
.va-conv-actions { display: flex; opacity: 0; transition: opacity var(--vt-motion-fast); }
.va-conv:hover .va-conv-actions, .va-conv-actions:focus-within { opacity: 1; }
.va-conv-actions button, .va-conv-more { border: 0; background: none; padding: 5px; border-radius: 8px; color: var(--vt-text-subtle); }
.va-conv-actions button:hover, .va-conv-more:hover { background: var(--vt-surface-muted); color: var(--vt-text); }
.va-conv-actions i, .va-conv-actions [class^="path"], .va-conv-more i, .va-conv-more [class^="path"] { color: inherit !important; }
.va-conv-more { display: none; }
/* Touch screens have no hover (L-28): a ⋯ button shows a row's actions. */
@media (hover: none) {
  .va-conv-more { display: inline-flex; }
  .va-conv-actions { display: none; opacity: 1; }
  .va-conv.va-conv-menu .va-conv-actions { display: flex; }
  .va-tools { opacity: 1; }
}

/* ── Quick bar (Ctrl+J) ───────────────────────────────────────────────── */

.qb-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--vt-ink) 32%, transparent); z-index: calc(var(--vt-z-fab) + 6); animation: qb-fade .18s ease-out; }
.qb { position: fixed; top: 9vh; left: 50%; transform: translateX(-50%); width: min(720px, 94vw); max-height: 80vh; z-index: calc(var(--vt-z-fab) + 7);
  display: flex; flex-direction: column; overflow: hidden; color: var(--vt-text); border-radius: 20px; border: 1px solid var(--vt-border);
  background: linear-gradient(180deg, var(--vt-surface-tint), var(--vt-surface) 120px) var(--vt-surface); box-shadow: var(--vt-shadow-lg), var(--vt-shadow);
  animation: qb-in .24s var(--vt-ease); }
@keyframes qb-in { from { transform: translate(-50%, 10px) scale(.98); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes qb-fade { from { opacity: 0; } }
@keyframes qb-rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.qb-input { display: flex; align-items: center; gap: 10px; padding: 14px 17px; border-bottom: 1px solid var(--vt-border); }
.qb-input textarea { flex: 1; border: 0; outline: 0; resize: none; font-size: var(--vt-text-lg); line-height: 1.5; color: var(--vt-text); max-height: 180px; background: transparent; }
.qb-input textarea::placeholder { color: var(--vt-text-subtle); }
.qb-body { overflow-y: auto; padding: 13px 17px; min-height: 0; }
.qb-card { border: 1px solid var(--vt-border); background: var(--vt-surface); border-radius: var(--vt-radius-lg); padding: 12px 13px; margin-bottom: 8px;
  transition: opacity var(--vt-motion-fast), box-shadow var(--vt-motion-fast); animation: qb-rise .22s var(--vt-ease) both; }
.qb-card:hover { box-shadow: var(--vt-shadow); }
.qb-off { opacity: .45; }
.qb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qb-row label { font-weight: 700; font-size: var(--vt-text-xs); color: var(--vt-text-muted); }
.qb-who { flex: 1; min-width: 180px; } .qb-due { width: 150px; } .qb-prio { width: 115px; }
.qb-title { font-weight: 600; }
.qb-hint { font-size: var(--vt-text-xs); color: var(--vt-text); background: var(--vt-surface-tint); border-radius: var(--vt-radius); padding: 6px 9px; margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qb-hint > i, .qb-hint > i [class^="path"] { color: var(--vt-link) !important; }
.qb-chip { padding: 2px 9px; font-size: var(--vt-text-xs); font-weight: 700; background: var(--vt-surface); }
.qb-found { font-size: var(--vt-text-xs); font-weight: 700; color: var(--vt-link); margin-bottom: 8px; }
.qb-channels { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; margin-top: 10px; font-size: var(--vt-text-sm); font-weight: 600; }
.qb-channels label { display: inline-flex; gap: 5px; align-items: center; }
.qb-examples { display: flex; flex-direction: column; gap: 6px; font-size: var(--vt-text-sm); color: var(--vt-text-muted); }
.qb-examples button { border: 1px solid var(--vt-border); background: var(--vt-surface); border-radius: 12px; padding: 7px 11px; text-align: left; color: var(--vt-text);
  transition: background var(--vt-motion-fast), border-color var(--vt-motion-fast), transform var(--vt-motion-fast); }
.qb-examples button:hover { background: var(--vt-surface-tint); border-color: var(--va-line-strong); transform: translateY(-1px); }
.qb-empty { color: var(--vt-text-muted); font-size: var(--vt-text-sm); padding: 8px 0; }
.qb-done { background: var(--vt-success-soft); border: 1px solid color-mix(in srgb, var(--vt-success) 35%, transparent); color: var(--vt-success-text); border-radius: 12px;
  padding: 8px 11px; font-size: var(--vt-text-sm); margin-top: 6px; animation: qb-rise .22s ease-out both; }
.qb-done i, .qb-done [class^="path"] { color: inherit !important; }
.qb-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 17px; border-top: 1px solid var(--vt-border);
  background: var(--vt-surface-muted); }
.qb-foot-hint { font-size: var(--vt-text-xs); color: var(--vt-text-muted); }

/* ── Insights card on the team report pages ───────────────────────────── */

.cin { position: fixed; right: var(--va-fab-gap); bottom: calc(var(--va-fab-gap) + var(--va-fab-size) + 10px + var(--vt-fab-offset)); z-index: calc(var(--vt-z-fab) - 1);
  width: min(360px, calc(100vw - 48px)); display: flex; gap: 10px; color: var(--vt-text); background: var(--vt-surface); border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg); padding: 12px 14px; box-shadow: var(--vt-shadow-lg); animation: cin-in .25s ease-out; }
@keyframes cin-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.cin-body { flex: 1 1 auto; min-width: 0; }
.cin-title { font-weight: 700; font-size: var(--vt-text-sm); color: var(--vt-text); }
.cin-av { flex-shrink: 0; display: inline-flex; }
.cin-line { font-size: var(--vt-text-xs); color: var(--vt-text-muted); margin-top: 4px; display: flex; gap: 6px; align-items: baseline; }
.cin-more { font-size: var(--vt-text-xs); color: var(--vt-text-subtle); margin-top: 4px; }
.cin-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--vt-info); transform: translateY(-1px); }
.cin-s2 { background: var(--vt-warning); } .cin-s3 { background: var(--vt-danger); }
body:has(.rz-dialog-wrapper, .rz-dialog-side, .modal.show, .offcanvas.show, .drawer.drawer-on, .va-panel) .cin { display: none; }

/* ── Selection chip (Delegate · Remind me · Ask VirgilTrack) ──────────── */

.vq-chip { position: absolute; z-index: calc(var(--vt-z-fab) + 8); display: none; gap: 2px; padding: 3px; background: var(--vt-gray-900); border-radius: var(--vt-radius);
  box-shadow: var(--vt-shadow-lg); }
[data-bs-theme=dark] .vq-chip { background: var(--vt-surface-muted); border: 1px solid var(--vt-border-strong); }
.vq-chip button { border: 0; background: transparent; color: var(--vt-white); font: 600 var(--vt-text-xs)/1 var(--vt-font-body); padding: 9px 11px; border-radius: 7px; cursor: pointer; }
[data-bs-theme=dark] .vq-chip button { color: var(--vt-text); }
.vq-chip button:hover, .vq-chip button:focus-visible { background: color-mix(in srgb, var(--vt-white) 14%, transparent); outline: none; }

/* ── "Show me where" (VirgilGuide in app.js) ──────────────────────────── */

#vg-guide .vg-ring { position: fixed; z-index: 2060; border-radius: 12px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px var(--vt-primary), 0 0 0 9px color-mix(in srgb, var(--vt-primary) 28%, transparent), 0 0 0 200vmax color-mix(in srgb, var(--vt-ink) 50%, transparent);
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease, opacity .2s ease; }
#vg-guide .vg-ring.vg-on { opacity: 1; }
#vg-guide .vg-ring.vg-soft { box-shadow: 0 0 0 3px var(--vt-primary), 0 0 0 9px color-mix(in srgb, var(--vt-primary) 28%, transparent); }
#vg-guide .vg-ring::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--vt-accent-amber); opacity: 0; animation: vg-pulse 1.6s ease-out infinite; }
@keyframes vg-pulse { from { inset: -3px; opacity: .9; } to { inset: -16px; opacity: 0; } }
#vg-guide .vg-bubble { position: fixed; z-index: 2061; width: min(320px, calc(100vw - 32px)); padding: 14px 16px 12px; border-radius: var(--vt-radius-lg);
  background: var(--vt-surface); color: var(--vt-text); font-family: inherit; border: 1px solid var(--va-line); box-shadow: var(--vt-shadow-lg); opacity: 0;
  transition: left .28s ease, top .28s ease, opacity .2s ease; }
#vg-guide .vg-bubble.vg-on { opacity: 1; }
#vg-guide .vg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#vg-guide .vg-head svg { width: 18px; height: 18px; flex: none; }
#vg-guide .vg-big { fill: var(--vt-primary); } #vg-guide .vg-amber { fill: var(--vt-accent-amber); }
#vg-guide .vg-who { font-size: var(--vt-text-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vt-link); }
#vg-guide .vg-count { margin-left: auto; font-size: var(--vt-text-xs); font-weight: 700; color: var(--vt-text-subtle); }
#vg-guide .vg-text { font-size: var(--vt-text-lg); font-weight: 700; line-height: 1.45; }
#vg-guide .vg-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
#vg-guide .vg-stop { background: none; border: 0; padding: 0; color: var(--vt-text-subtle); font-size: var(--vt-text-sm); font-weight: 600; cursor: pointer; }
#vg-guide .vg-stop:hover { color: var(--vt-text); }
#vg-guide .vg-ok { display: none; background: var(--vt-primary); color: var(--vt-on-primary); border: 0; border-radius: 8px; padding: 6px 14px; font-weight: 700; font-size: var(--vt-text-sm); cursor: pointer; }
#vg-guide.vg-final .vg-ok { display: inline-block; }
#vg-guide.vg-final .vg-stop { visibility: hidden; }

/* ── Less motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .va-panel, .va-panel.va-out, .va-launcher, .va-row, .va-step, .va-welcome, .va-brief-card, .va-batch, .va-queued,
  .va-head > .vs, .va-panel > :not(.va-head), .va-launcher[data-va-play] *, .va-glint::before,
  .va-shimmer, .va-spin, .va-wave i, .va-sub-dot, .va-skeleton, .qb, .qb-backdrop, .qb-card, .qb-done, .cin { animation: none !important; }
  .va-shimmer { color: var(--vt-text-muted); background: none; }
  .va-bot.va-live { -webkit-mask-image: none; mask-image: none; }
  #vg-guide .vg-ring, #vg-guide .vg-bubble { transition: none; }
  #vg-guide .vg-ring::after { animation: none; }
}