/* Vego · Vegobot · the standard chat (owner, 3 Nov 2026: "a simpler chat with Vegobot, the same design as the Profile").
   One look for every Vegobot chat (the Vegobot chat / hub, Chat & knowledge, company memory) and the quotation's voice box:
   the Profile's grey page, white cards (16 px corners, the same soft line of shadow), Roboto, the Profile's text colours,
   the app's blue (#3461DC, the Sign in button). Your messages: right, blue. Vegobot: left, a card with its small picture.
   The ids in the selectors only lift these rules above the older chat rules (base.css), which carry !important. */
:root {
  --vgc-bg: #F2F2F7; --vgc-card: #FFFFFF; --vgc-ink: #0B1730; --vgc-ink2: #3A4357; --vgc-muted: #8A909C; --vgc-head: #7A8291;
  --vgc-line: #E3E6EC; --vgc-edge: transparent; --vgc-blue: #3461DC; --vgc-blue-dn: #2A50BE; --vgc-blue-soft: #EAF0FF;
  --vgc-red: #E5383B; --vgc-shadow: 0 1px 2px rgba(10, 26, 51, .05); --vgc-chip: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vgc-bg: #1C1C22; --vgc-card: #24262E; --vgc-ink: #F2F3F6; --vgc-ink2: #C5CAD4; --vgc-muted: #8A909C; --vgc-head: #8A909C;
    --vgc-line: #30333C; --vgc-edge: rgba(255, 255, 255, .05); --vgc-blue: #3F6CF0; --vgc-blue-dn: #3461DC; --vgc-blue-soft: #1E2744;
    --vgc-red: #FF5C5F; --vgc-shadow: none; --vgc-chip: #24262E;
  }
}
:root[data-theme="dark"] {
  --vgc-bg: #1C1C22; --vgc-card: #24262E; --vgc-ink: #F2F3F6; --vgc-ink2: #C5CAD4; --vgc-muted: #8A909C; --vgc-head: #8A909C;
  --vgc-line: #30333C; --vgc-edge: rgba(255, 255, 255, .05); --vgc-blue: #3F6CF0; --vgc-blue-dn: #3461DC; --vgc-blue-soft: #1E2744;
  --vgc-red: #FF5C5F; --vgc-shadow: none; --vgc-chip: #24262E;
}

/* ---------- the screen ---------- */
#sheet[data-mode="vegobotchat"] { height: 94vh; max-height: 94vh }
#sheet:is([data-mode="aidraw"], [data-mode="vegobotchat"]):not(#_) { background: var(--vgc-bg) !important; font-family: "Roboto", VegoIndic, system-ui, sans-serif }
#sheet:is([data-mode="aidraw"], [data-mode="vegobotchat"]) :is(.shead, .sbody, .adbar):not(#_):not(#__) { background: var(--vgc-bg) !important }
#sheet[data-mode="aidraw"] .shead:not(#_) { border-bottom: 1px solid var(--vgc-line) }
#sheet .vgc-chat:not(#_) { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 16px !important; color: var(--vgc-ink) }

/* ---------- messages ---------- */
#sheet .vgc-chat :is(.adm, .vc-bubble):not(#_):not(#__) {
  font-size: 15px !important; line-height: 1.45; letter-spacing: 0; overflow-wrap: anywhere; min-width: 0;
  position: relative; margin: 0; box-sizing: border-box; animation: none
}
#sheet .vgc-chat :is(.adm.me, .vc-user):not(#_):not(#__) {
  align-self: flex-end; max-width: 80%; padding: 9px 14px !important; color: #fff !important; background: var(--vgc-blue) !important;
  border: 0 !important; border-radius: 18px !important; border-end-end-radius: 6px !important; box-shadow: none !important; font-weight: 400
}
#sheet .vgc-chat .adm.me img:not(#_) { max-width: min(220px, 100%); border-radius: 12px }
#sheet .vgc-chat :is(.adm.ai, .vc-bot):not(#_):not(#__) {
  align-self: flex-start; max-width: calc(100% - 40px); margin-inline-start: 36px !important; padding: 11px 14px 12px !important;
  background: var(--vgc-card) !important; color: var(--vgc-ink) !important; border: 1px solid var(--vgc-edge) !important;
  border-radius: 16px !important; border-end-start-radius: 6px !important; box-shadow: var(--vgc-shadow) !important
}
#sheet .vgc-chat :is(.adm.ai, .vc-bot) > p:not(#_):not(#__) { font-size: 15px !important; font-weight: 400 !important; color: var(--vgc-ink) !important; margin: 0 }
/* Vegobot's small picture, at the start of each of its messages */
#sheet .vgc-chat :is(.adm.ai, .vc-bot):not(#_):not(#__)::before {
  content: ""; display: block; position: absolute; top: auto; bottom: 0; inset-inline-start: -36px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--vgc-blue-soft) url("/img/vego-ai.webp?v=f6270833ec") center / 22px 22px no-repeat
}
#sheet .vgc-chat .adm.ai :is(.adsec, .adq, .adok, .adsec span):not(#_):not(#__) { color: var(--vgc-ink2) }
#sheet .vgc-chat .adm.ai .adsec > b:not(#_):not(#__) { color: var(--vgc-head); font-size: 12px; letter-spacing: .04em }
#sheet .vgc-chat .adm.ai :is(.adq, .adsec .adok, .adsec.warn span, .adsec.bad span):not(#_):not(#__) { background: var(--vgc-bg) !important; border-color: transparent !important; box-shadow: none !important }
#sheet .vgc-chat .vbnote .vbacts:not(#_) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
#sheet .vgc-chat :is(.vbbtn, .adopts .chip, .adacts .btn:not(.pri)):not(#_):not(#__):not(#___) {
  background: var(--vgc-chip) !important; color: var(--vgc-blue) !important; border: 1px solid var(--vgc-line) !important;
  border-radius: 999px !important; box-shadow: none !important; font-weight: 500; min-height: 34px; padding: 6px 14px !important
}
#sheet .vgc-chat .adm.ai .vbbtn:first-child:not(#_):not(#__):not(#___) { background: var(--vgc-blue) !important; color: #fff !important; border-color: var(--vgc-blue) !important }
#sheet .vgc-chat .adopts .chip[aria-pressed="true"]:not(#_):not(#__):not(#___) { background: var(--vgc-blue) !important; color: #fff !important; border-color: var(--vgc-blue) !important }
/* the empty chat: the greeting and the quick chips stay as they are, on the Profile's colours */
#sheet .vgc-chat .adhello :is(.adhi, .adname):not(#_):not(#__) { color: var(--vgc-ink) }
#sheet .vgc-chat .adhello .adhi-s:not(#_):not(#__) { color: var(--vgc-muted) }
#sheet .vgc-chat :is(.vbchip, .vgc-chip):not(#_):not(#__) {
  background: var(--vgc-chip) !important; color: var(--vgc-ink) !important; border: 1px solid var(--vgc-line) !important; border-radius: 999px !important;
  box-shadow: var(--vgc-shadow) !important; font: 500 14px/1.2 "Roboto", VegoIndic, system-ui, sans-serif; padding: 8px 14px !important; min-height: 36px; cursor: pointer
}
#sheet .vgc-chat .vgc-chip[aria-pressed="true"]:not(#_):not(#__) { background: var(--vgc-blue) !important; color: #fff !important; border-color: var(--vgc-blue) !important }
#sheet .vgc-chat .vbcard:not(#_):not(#__) { background: var(--vgc-card) !important; border: 1px solid var(--vgc-edge) !important; border-radius: 16px !important; box-shadow: var(--vgc-shadow) !important; color: var(--vgc-ink) !important }
#sheet .vgc-chat .vbcard small:not(#_):not(#__) { color: var(--vgc-muted) !important }

/* the chat is about a client / quotation / project (chat/start-chat.js): a small chip at the top, ✕ removes it */
#sheet .vgc-chat .vbctx:not(#_) {
  align-self: center; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; box-sizing: border-box; flex: none;
  padding-block: 4px; padding-inline: 12px 4px; border-radius: 999px; background: var(--vgc-blue-soft); color: var(--vgc-ink); font-size: 13px; line-height: 1.3
}
#sheet .vgc-chat .vbctx-t:not(#_) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#sheet .vgc-chat .vbctx-t b:not(#_) { font-weight: 600; color: var(--vgc-blue) }
#sheet .vgc-chat .vbctx-x:not(#_):not(#__) {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--vgc-ink2);
  font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center
}
#sheet .vgc-chat .vbctx-x:active:not(#_):not(#__) { background: var(--vgc-card) }

/* ---------- typing: three dots on Vegobot's side; a long job: its steps on the same card ---------- */
#sheet .vgc-chat :is(.vgc-typing, .vgc-steps):not(#_):not(#__) { display: inline-flex; flex-direction: column; gap: 6px; width: auto; min-width: 64px }
#sheet .vgc-chat .vgc-typing:not(#_):not(#__) { flex-direction: row; align-items: center; padding: 13px 16px !important }
.vgc-dots { display: inline-flex; align-items: center; gap: 5px; height: 10px }
.vgc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--vgc-muted); opacity: .35; animation: vbxDot 1.2s infinite ease-in-out }
.vgc-dots i:nth-child(2) { animation-delay: .15s }
.vgc-dots i:nth-child(3) { animation-delay: .3s }
@keyframes vbxDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) { .vgc-dots i { animation: none; opacity: .7 } }
.vgc-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.vgc-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--vgc-muted); line-height: 1.3 }
.vgc-steps li.done { color: var(--vgc-ink2) }
.vgc-steps li.now { color: var(--vgc-ink); font-weight: 500 }
.vgc-st { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; border: 1.5px solid var(--vgc-line) }
.vgc-st svg { width: 12px; height: 12px; stroke-width: 2.6 }
.vgc-steps li.done .vgc-st { background: var(--vgc-blue); border-color: var(--vgc-blue); color: #fff }
.vgc-steps li.now .vgc-st { border-color: var(--vgc-blue); border-top-color: transparent; animation: vbxSpin .9s linear infinite }
.vgc-steps .vgc-note { margin: 0; font-size: 12.5px; color: var(--vgc-muted) }
.vgc-steps .vgc-dots { margin-top: 2px }
@keyframes vbxSpin { to { transform: rotate(360deg) } }
.vgc-tl { font-size: 13px; color: var(--vgc-muted); margin-inline-start: 10px }

/* ---------- the message box ---------- */
#sheet .vgc-bar:not(#_):not(#__) { flex: none !important; border-top: 0 !important; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; background: var(--vgc-bg) !important; position: relative }
#sheet .vgc-bar .adatt:not(#_) { margin: 0 4px 8px }
.vgc-comp {
  position: relative; display: flex; align-items: flex-end; gap: 4px; min-height: 50px; box-sizing: border-box; padding: 5px;
  background: var(--vgc-card); border: 1px solid var(--vgc-line); border-radius: 25px; box-shadow: var(--vgc-shadow)
}
.vgc-comp:focus-within { border-color: color-mix(in srgb, var(--vgc-blue) 45%, var(--vgc-line)) }
html body #sheet .vgc-comp textarea:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) {
  flex: 1; min-width: 0; align-self: center; box-sizing: border-box; min-height: 38px; max-height: 124px; margin: 0; padding: 9px 6px !important;
  border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; resize: none; overflow-y: auto;
  font: 400 15.5px/1.35 "Roboto", VegoIndic, system-ui, sans-serif; color: var(--vgc-ink)
}
.vgc-comp textarea::placeholder { color: var(--vgc-muted) }
/* the round buttons: equal width and height, a true circle, a flat colour (no blurred shadow) */
:is(.vgc-mic, .vgc-send, .vgc-ok, .vgc-rx, .vgc-ic) {
  flex: none; box-sizing: border-box; width: 40px; height: 40px; min-width: 40px; min-height: 40px; aspect-ratio: 1; padding: 0; margin: 0;
  border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: none; -webkit-tap-highlight-color: transparent
}
:is(.vgc-mic, .vgc-send, .vgc-ok, .vgc-rx, .vgc-ic) svg { width: 21px; height: 21px; display: block; pointer-events: none }
:is(.vgc-mic, .vgc-send, .vgc-ok) { background: var(--vgc-blue); color: #fff }
:is(.vgc-mic, .vgc-send, .vgc-ok):active { background: var(--vgc-blue-dn) }
:is(.vgc-mic, .vgc-send, .vgc-ok):focus-visible { outline: 2px solid var(--vgc-blue); outline-offset: 2px }
.vgc-send:disabled { opacity: .45; cursor: default }
#sheet .vgc-comp .vgc-ic:not(#_):not(#__) { background: transparent !important; color: var(--vgc-ink2) !important; border: 0 !important; box-shadow: none !important; width: 40px !important; height: 40px !important; border-radius: 50% !important }
#sheet .vgc-comp .vgc-ic:active:not(#_):not(#__) { background: var(--vgc-bg) !important }
.vgc-comp .vgc-ic svg { width: 24px; height: 24px; stroke-width: 1.8 }
.vgc-comp .adattw { flex: none; position: relative; display: flex }
/* mic ↔ send */
.vgc-comp .vgc-send { display: none }
.vgc-comp.has-text .vgc-send { display: grid }
.vgc-comp.has-text .vgc-mic { display: none }
[dir="rtl"] .vgc-send svg, html[dir="rtl"] .vgc-send svg { transform: scaleX(-1) }
/* ＋ menu (Image · File · voice language) */
#sheet .vgc-comp .adattm:not(#_):not(#__) {
  position: absolute; bottom: calc(100% + 10px); inset-inline-start: -2px; z-index: 70; display: flex; flex-direction: column; min-width: 210px;
  background: var(--vgc-card); border: 1px solid var(--vgc-line); border-radius: 16px; padding: 6px; box-shadow: 0 12px 28px -12px rgba(10, 26, 51, .28)
}
#sheet .vgc-comp .adattm[hidden]:not(#_):not(#__) { display: none }
#sheet .vgc-comp .adattm :is(label, .vgc-langrow):not(#_):not(#__) {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 12px; border: 0; border-radius: 11px; background: none;
  font: 500 15px/1.2 "Roboto", VegoIndic, system-ui, sans-serif; color: var(--vgc-ink); cursor: pointer; text-align: start; box-sizing: border-box
}
#sheet .vgc-comp .adattm :is(label, .vgc-langrow):active:not(#_):not(#__) { background: var(--vgc-bg) }
#sheet .vgc-comp .adattm svg:not(#_) { width: 22px; height: 22px; flex: none; color: var(--vgc-blue) }
.vgc-langrow { border-top: 1px solid var(--vgc-line) !important; border-radius: 0 0 11px 11px !important }
.vgc-langrow span { flex: 1 }
.vgc-langrow b { font-weight: 500; color: var(--vgc-muted); font-size: 14px }

/* ---------- the recording bar (in place of the box while recording) ---------- */
.vgc-recording > :not(.vgc-recbar) { visibility: hidden }
.vgc-recbar {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0 5px; box-sizing: border-box;
  background: var(--vgc-card); border-radius: inherit; min-width: 0
}
.vgc-rx { background: var(--vgc-bg); color: var(--vgc-ink2) }
.vgc-rx svg { width: 18px; height: 18px }
.vgc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vgc-muted) }
.vgc-recbar[data-st="rec"] .vgc-dot { background: var(--vgc-red); animation: vbxBlink 1.1s ease-in-out infinite }
@keyframes vbxBlink { 50% { opacity: .35 } }
.vgc-time { flex: none; min-width: 36px; font: 500 15px/1 "Roboto", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--vgc-ink) }
.vgc-wave { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 2px; overflow: hidden; direction: ltr }
.vgc-wave i { flex: 1; max-width: 3px; min-width: 2px; height: 100%; border-radius: 2px; background: var(--vgc-blue); transform: scaleY(.12); transform-origin: center; transition: transform 70ms linear }
.vgc-recbar[data-st="start"] .vgc-wave i { background: var(--vgc-line) }
.vgc-lang { flex: none; height: 30px; min-width: 40px; padding: 0 10px; border: 1px solid var(--vgc-line); border-radius: 999px; background: var(--vgc-bg); color: var(--vgc-ink2); font: 600 12.5px/1 "Roboto", VegoIndic, system-ui, sans-serif; cursor: pointer }
.vgc-ok { position: relative }
.vgc-ok svg { stroke-width: 2.6 }
/* a thin ring goes out from ✓ while recording */
.vgc-recbar[data-st="rec"] .vgc-ok::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--vgc-blue); opacity: 0; pointer-events: none;
  animation: vbxRing 1.6s ease-out infinite
}
@keyframes vbxRing { 0% { transform: scale(1); opacity: .55 } 100% { transform: scale(1.45); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .vgc-recbar[data-st="rec"] .vgc-ok::after, .vgc-recbar[data-st="rec"] .vgc-dot { animation: none } }
.vgc-recbar[data-st="start"] .vgc-ok { opacity: .55 }
.vgc-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--vgc-line); border-top-color: var(--vgc-blue); box-sizing: border-box; animation: vbxSpin .8s linear infinite; margin-inline-start: 4px }
.vgc-rtext { flex: 1; min-width: 0; font-size: 14px; color: var(--vgc-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ---------- Chat & knowledge (vegobotchat) on the same pattern ---------- */
#sheet .vgc-chat.vgg:not(#_) { max-width: none }
#sheet .vgc-chat .vc-messages:not(#_) { max-height: none; overflow: visible; gap: 10px; padding-block: 4px }
#sheet .vgc-chat .vc-bot .vc-card:not(#_) { background: var(--vgc-bg); border: 0; border-radius: 12px }
#sheet .vgc-chat .vc-bot :is(.fhint, .vc-mode, .vc-card small):not(#_) { color: var(--vgc-muted) }
#sheet .vgc-chat .vgc-meta:not(#_):not(#__) { margin: 0; padding: 0; background: none !important; font-size: 12.5px; color: var(--vgc-muted); text-align: center }
#sheet .vgc-chat .vgc-chips:not(#_) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 }
#sheet .vgc-chat .vgc-chips:empty { display: none }
#sheet .vgc-chat .vc-new:not(#_) { margin: 0 }
#sheet .vgc-chat .vgc-more:not(#_) { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--vgc-muted) }
#sheet .vgc-chat .vgc-more summary { cursor: pointer; font-weight: 500; color: var(--vgc-head); width: max-content; padding: 6px 2px }
#sheet .vgc-chat .vgc-more[open]:not(#_) { background: var(--vgc-card); border-radius: 16px; padding: 4px 14px 10px; box-shadow: var(--vgc-shadow) }

/* ---------- company memory: the same bubbles and typing ---------- */
#sheet .vmm .vmm-user:not(#_):not(#__) { align-self: flex-end; margin-inline-start: auto; max-width: 80%; width: max-content; background: var(--vgc-blue) !important; color: #fff !important; border-radius: 18px !important; border-end-end-radius: 6px !important; padding: 9px 14px !important; border: 0 !important }
#sheet .vmm .vmm-bubble:not(.vmm-user):not(#_):not(#__) { background: var(--vgc-card) !important; color: var(--vgc-ink) !important; border-radius: 16px !important; border-end-start-radius: 6px !important; box-shadow: var(--vgc-shadow) !important; border: 1px solid var(--vgc-edge) !important }
#sheet .vmm .vmm-wait.vgc-typing:not(#_):not(#__) { display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 12px 16px !important }
#sheet .vmm .dictmic:not(#_):not(#__) { width: 40px; height: 40px; border-radius: 50%; background: var(--vgc-blue); color: #fff; box-shadow: none; border: 0 }

/* ---------- the quotation's "Write items with Vegobot" box: round blue mic, the same recording bar ---------- */
#sheet .dsai-in .dsai-mic:not(#_):not(#__) {
  width: 40px; height: 40px; min-width: 40px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; box-sizing: border-box;
  inset-inline-end: 8px; bottom: 8px; background: var(--vgc-blue); color: #fff; box-shadow: none; animation: none; opacity: 1
}
#sheet .dsai-in .dsai-mic svg:not(#_) { width: 20px; height: 20px }
html body #sheet .dsai-in textarea:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { padding-inline-end: 56px !important; min-height: 72px }
#sheet .dsai-in.vgc-recording > :not(.vgc-recbar) { visibility: hidden }
#sheet .dsai-in .vgc-recbar:not(#_) { border-radius: 12px; border: 1px solid var(--vgc-line); padding: 0 8px }
#sheet .dsai-rec:not(#_) { display: none }

/* ---------- the chat header on the same colours (dark mode too) ---------- */
#sheet[data-mode="aidraw"] .shead .vbname:not(#_):not(#__) { color: var(--vgc-ink) }
#sheet[data-mode="aidraw"] .shead .vbtitle small:not(#_):not(#__) { color: var(--vgc-muted) }
#sheet[data-mode="aidraw"] .shead :is(.vbmenub, .vbmore):not(#_):not(#__) { background: transparent !important; color: var(--vgc-ink2) !important; box-shadow: none !important }
#sheet[data-mode="aidraw"] .shead .close:not(.back):not(#_):not(#__):not(#___) { color: var(--vgc-ink2) !important }
/* mixed English / Arabic text in a bubble reads in its own direction */
#sheet .vgc-chat :is(.adm, .vc-bubble) > p, #sheet .vgc-chat .vc-user, #sheet .vgc-chat .vgc-steps li { unicode-bidi: plaintext; text-align: start }
.vgc-comp textarea:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* the morning brief card and "More" on the same card colours */
#sheet .vgc-chat .vbbrief:not(#_):not(#__) { background: var(--vgc-card); color: var(--vgc-ink); border: 1px solid var(--vgc-edge); box-shadow: var(--vgc-shadow) }
#sheet .vgc-chat .vbbrief :is(.vbclear, .vbbh small):not(#_) { color: var(--vgc-muted) }
#sheet .vgc-chat .vgc-more:not(#_):not(#__) { border: 1px solid var(--vgc-line) !important; border-radius: 16px; padding: 2px 12px; background: transparent }

/* ---------- the chat wallpaper (owner, 3 Nov 2026: his own Vegobot pattern — Vegobot faces, door, window, tape, ruler).
   Three pictures: phone (tall), tablet, and wide (landscape / computer); a darker copy of each for the dark theme.
   It stays still while the messages scroll, like WhatsApp. --vgc-wall picks the picture; one rule shows it. */
:root { --vgc-wall: url("/img/vegobot/chat-bg-phone.webp?v=de8b8ea824") }
@media (min-aspect-ratio: 2/3) { :root { --vgc-wall: url("/img/vegobot/chat-bg-tablet.webp?v=cb75368fd3") } }
@media (min-aspect-ratio: 1/1) { :root { --vgc-wall: url("/img/vegobot/chat-bg-wide.webp?v=254df67b1f") } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vgc-wall: url("/img/vegobot/chat-bg-phone-dark.webp?v=00d145dffe") } }
@media (prefers-color-scheme: dark) and (min-aspect-ratio: 2/3) { :root:not([data-theme="light"]) { --vgc-wall: url("/img/vegobot/chat-bg-tablet-dark.webp?v=7a2c197675") } }
@media (prefers-color-scheme: dark) and (min-aspect-ratio: 1/1) { :root:not([data-theme="light"]) { --vgc-wall: url("/img/vegobot/chat-bg-wide-dark.webp?v=372bafcf62") } }
:root[data-theme="dark"] { --vgc-wall: url("/img/vegobot/chat-bg-phone-dark.webp?v=00d145dffe") }
@media (min-aspect-ratio: 2/3) { :root[data-theme="dark"] { --vgc-wall: url("/img/vegobot/chat-bg-tablet-dark.webp?v=7a2c197675") } }
@media (min-aspect-ratio: 1/1) { :root[data-theme="dark"] { --vgc-wall: url("/img/vegobot/chat-bg-wide-dark.webp?v=372bafcf62") } }
#sheet:is([data-mode="aidraw"], [data-mode="vegobotchat"]) .vgc-chat:not(#_):not(#__):not(#___) {
  background-image: var(--vgc-wall) !important; background-position: center !important; background-size: cover !important;
  background-repeat: no-repeat !important; background-attachment: scroll !important
}