/*
  تنسيق وحدة الصوت بشكل البنوك: نافذة التسجيل والميكروفون الذهبي الكبير بحلقتيه الناعمتين، وفقاعات المحادثة وأزرارها.
  وبطاقة التأكيد بالرصيد القديم مشطوبًا والجديد كبيرًا، والإيصال، وشاشة التمام ببطاقة الصندوق الزاهية، وعدّ الصندوق.
  يعمل في المظهر الداكن وهو الأصل، وفي الفاتح، ويأخذ لون كل صندوق من رموزه.
  يُقرأ بعد التنسيق المشترك.
  وإن غاب هذا الملف ظهرت شاشات الصوت بالتنسيق المشترك وحده، مرتّبة أقلّ.
*/

/* ---------- Sheet and layout ---------- */
.vc-sheet .sheet-body { gap: var(--sp-3); }
.vc, .vc-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
/* The test-numbers ribbon at the top of the recording sheet */
.vc-capture { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); min-width: 0; }
.vc-capture > .vc-ctx { justify-self: center; }
.vc-capture--typing { padding-top: var(--sp-2); }

/* The box this recording is on: a small pill with the box dot (and the destination of a transfer) */
.vc-ctx-host:empty { display: none; }
.vc-ctx {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: 4px 8px;
  max-width: 100%;
  min-height: 36px;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  background: var(--card-2);
  color: var(--ink);
}
.vc-ctx .box-tag { font-weight: var(--fw-bold); }
.vc-ctx .tip-wrap { margin-inline-end: 0; }
.vc-ctx-to { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); }
.vc-ctx-to .box-tag { color: var(--ink); }

/* ---------- The big gold microphone and its two soft pulse rings ---------- */
.vc-mic { display: grid; justify-items: center; gap: 12px; text-align: center; min-width: 0; }
.vc-mic-ring { position: relative; display: inline-grid; place-items: center; }
.vc-mic--lg { padding: 26px 0 4px; }
.vc-mic-btn {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.vc-mic-btn--lg {
  width: 84px;
  height: 84px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--gold) 32%, transparent), 0 0 0 calc(var(--vc-level, 0) * 12px) color-mix(in srgb, var(--gold) 26%, transparent);
}
.vc-mic-btn--lg:active { transform: scale(.97); }
.vc-mic--lg .vc-mic-ring::before,
.vc-mic--lg .vc-mic-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
}
/* At rest: one soft still ring */
.vc-mic--lg[data-state="idle"] .vc-mic-ring::before,
.vc-mic--lg[data-state="error"] .vc-mic-ring::before { opacity: .14; transform: scale(1.3); }
/* While it listens: two rings breathe out one after the other */
.vc-mic--lg[data-state="listening"] .vc-mic-ring::before,
.vc-mic--lg[data-state="listening"] .vc-mic-ring::after,
.vc-mic--lg[data-state="opening"] .vc-mic-ring::before,
.vc-mic--lg[data-state="opening"] .vc-mic-ring::after { animation: vc-pulse 1800ms ease-out infinite; }
.vc-mic--lg[data-state="listening"] .vc-mic-ring::after,
.vc-mic--lg[data-state="opening"] .vc-mic-ring::after { animation-delay: 900ms; }
.vc-mic[data-state="working"] .vc-mic-btn { opacity: .85; }
/* The status says only an error or "nothing heard"; the listening states are for screen readers */
.vc-status { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-text); color: var(--ink); }
.vc-status:empty,
.vc-status[data-tone="quiet"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vc-mic[data-state="error"] .vc-status { color: var(--st-wafeq_failed-fg); }
/* What it hears, as the first bubble of the chat */
.vc-heard {
  justify-self: end;
  max-width: 85%;
  margin: 0;
  padding: 9px 14px;
  border-radius: 18px;
  border-end-end-radius: 6px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  font-size: var(--fs-md);
  line-height: var(--lh-text);
  text-align: start;
  overflow-wrap: anywhere;
}

/* The small microphone of an answer row or the count: a round button, and a level wave while it listens */
.vc-mic-btn--sm {
  width: 48px;
  height: 48px;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-ink);
  box-shadow: inset 0 0 0 1px var(--btn-secondary-line);
}
.vc-mic-btn--sm[aria-pressed="true"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent);
}
.vc-mic--sm { gap: 6px; }
.vc-mic--sm .vc-mic-ring:empty { display: none; }
.vc-mic--sm .vc-heard { justify-self: stretch; max-width: none; font-size: var(--fs-sm); }
.vc-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 24px; width: min(200px, 64%); }
.vc-mic--sm:not([data-state="listening"]):not([data-state="opening"]) .vc-wave { display: none; }
.vc-bar {
  display: block;
  flex: 1 1 0;
  max-width: 6px;
  height: 100%;
  border-radius: 3px;
  background: var(--gold-ink);
  opacity: .7;
  transform: scaleY(.14);
  transform-origin: center;
  transition: transform 90ms linear;
}
.vc-reply-wave .vc-mic--sm[data-state="idle"],
.vc-reply-wave .vc-mic--sm[data-state="error"] { display: none; }
.vc-reply-wave .vc-mic--sm .vc-status { display: none; }

/* ---------- Typing instead of speaking, and the answer row ---------- */
.vc-type { display: grid; gap: 6px; }
.vc-type .field-msg:empty { display: none; }
.vc-type-row, .vc-reply-form { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vc-type-input, .vc-reply-input { flex: 1 1 auto; min-width: 0; min-height: 48px; border-radius: var(--r-pill); padding-inline: 18px; }
.vc-send {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.vc-send:active { background: var(--btn-primary-bg-press); }

/* ---------- Chat bubbles: the bot at the start, my words at the end in gold ---------- */
.vc-chat { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
.vc-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vc-msg {
  display: flex;
  min-width: 0;
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.vc-msg.is-in { opacity: 1; transform: none; }
.vc-msg--bot { justify-content: flex-start; }
.vc-msg--me { justify-content: flex-end; }
.vc-bubble {
  max-width: 82%;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: var(--fs-md);
  line-height: var(--lh-text);
  overflow-wrap: anywhere;
}
.vc-msg--bot .vc-bubble { background: var(--card-2); color: var(--ink); border-end-start-radius: 6px; }
.vc-msg--me .vc-bubble {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  border-end-end-radius: 6px;
}
.vc-bubble .tip-wrap { margin-inline-end: 6px; }
.vc-me-tag { display: inline-flex; align-items: center; opacity: .85; }
.vc-thread-wrap.is-done .vc-bubble { font-size: var(--fs-sm); }

/* ---------- Choice chips (equal sizes from the grid) ---------- */
.vc-reply { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.vc-reply:empty { display: none; }
.vc-reply-err { margin: 0; color: var(--st-wafeq_failed-fg); font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: var(--lh-text); }
.vc-chips { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.vc-chips[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.vc-chips[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Two or three long answers (box names, where the money came from) read better one under the other */
.vc-chips[data-long] { grid-template-columns: minmax(0, 1fr); }
.vc-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--line-ctl);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.vc-chip:hover { border-color: var(--gold); }
.vc-chip:active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--card)); }
.vc-chip--skip { border-style: dashed; color: var(--muted); }
.vc-chip--wide { grid-column: 1 / -1; }
.vc-chip .box-dot { flex: none; }

/* ---------- All Wafeq categories (a sheet over the sheet) ---------- */
.vc-cats { display: grid; gap: var(--sp-4); }
.vc-cat-group { display: grid; gap: 6px; }
.vc-cat-title { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }
.vc-cat-list { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.vc-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}
.vc-cat-btn:hover { border-color: var(--gold); }
.vc-cat-code { flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }

/* ---------- The confirmation card ---------- */
.vc-sum-host:empty { display: none; }
.vc-sum {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--card);
}
.vc-sentence { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.55; }
.vc-sentence .tip-wrap { margin-inline-end: 8px; vertical-align: -3px; }
.vc-bal-host:empty, .vc-notes:empty, .vc-facts:empty { display: none; }
/* Old balance struck through above, new balance large below */
.vc-stack { display: grid; gap: 2px; min-width: 0; line-height: 1.25; }
.vc-stack p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.vc-stack .vc-stack-box { margin-bottom: 4px; }
.vc-stack-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); }
.vc-stack-old .vc-stack-num { font-size: var(--fs-md); color: var(--muted); }
.vc-stack-new .vc-stack-num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--ink); }
.vc-stack.is-waiting .vc-stack-new .vc-stack-num { color: var(--muted); }
.vc-stack.is-neg .vc-stack-new .vc-stack-num { color: var(--st-wafeq_failed-fg); }
.vc-stack-two { gap: 12px; }
.vc-stack-two .vc-stack-new .vc-stack-num { font-size: var(--fs-xl); }
/* Consequences and warnings */
.vc-notes { display: grid; gap: 6px; }
.vc-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-text);
}
.vc-note > .ico { flex: none; margin-top: 3px; }
.vc-note > .tip-wrap { margin-top: 2px; }
.vc-note--warn { background: var(--st-wafeq_draft-bg); color: var(--st-wafeq_draft-fg); }
.vc-note--attn { background: var(--attn-tint); color: var(--st-waiting-fg); }
.vc-note--wait { background: var(--st-waiting-bg); color: var(--st-waiting-fg); font-weight: var(--fw-bold); }
.vc-note .linkish { min-height: 0; color: inherit; font-weight: var(--fw-bold); position: relative; }
/* The inline link stays text-sized, but its tap area reaches 44 px */
.vc-note .linkish::before, .vc-err .linkish::before { content: ""; position: absolute; inset: -12px -4px; }
/* What the Wafeq tip circle explains */
.vc-tip-body { display: grid; gap: 6px; }
.vc-tip-line { display: block; }
.vc-tip-label { display: block; margin-top: 4px; font-weight: var(--fw-bold); }
.vc-tip-desc { font-size: var(--fs-xs); line-height: 1.7; overflow-wrap: anywhere; }
/* Facts the sentence does not already say */
.vc-facts { display: grid; margin: 0; }
.vc-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.vc-fact:first-child { border-top: 1px solid var(--line); }
.vc-fact dt { flex: none; color: var(--muted); }
.vc-fact dd { min-width: 0; margin: 0; text-align: end; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.vc-pv { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
.vc-pv .tip-wrap { margin-inline-end: 0; }
.vc-vtag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--halo-tint);
  color: var(--gold-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.vc-err {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--st-wafeq_failed-bg);
  color: var(--st-wafeq_failed-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
}
.vc-err > .ico { flex: none; margin-top: 3px; }
.vc-err .linkish { min-height: 0; color: inherit; position: relative; }
/* The fields behind the edit button */
.vc-fields { display: grid; gap: 8px; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.vc-fields-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-3); }
.vc-choice { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.vc-choice--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vc-choice-btn {
  min-width: 0;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid var(--line-ctl);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.vc-choice-btn[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--card)); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1px var(--gold); }
.field--voice .vc-choice-btn[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--halo); }
/* Listening for a spoken yes */
.vc-yes {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-inline: 12px 4px;
  border-radius: var(--r-pill);
  background: var(--halo-tint);
  color: var(--gold-ink);
}
.vc-yes .tip-wrap { margin-inline-end: 0; }
.vc-yes-mic { display: inline-flex; flex: none; }
.vc-wave--mini { flex: 1 1 auto; justify-content: flex-start; width: auto; max-width: 120px; height: 22px; }
.vc-yes-stop {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.vc-yes-btn.is-careful { box-shadow: 0 0 0 3px color-mix(in srgb, var(--attn) 40%, transparent); }
/* A second receipt for the same order: a tick that must be set before saving */
.vc-dup { align-items: flex-start; }
.vc-dup-body { display: grid; gap: 4px; min-width: 0; }
.vc-dup-body p { margin: 0; }
.vc-dup-ok { display: flex; align-items: center; gap: 10px; min-height: var(--touch); font-weight: var(--fw-bold); cursor: pointer; }
.vc-dup-box { width: 22px; height: 22px; flex: none; accent-color: var(--gold); }
@media (min-width: 1024px) {
  .vc-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-fields-grid > .field--full { grid-column: 1 / -1; }
}

/* ---------- Receipt: a dashed row to add it, or a small card ---------- */
.vc-rc { display: grid; gap: 6px; min-width: 0; }
.vc-rc-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease);
}
.vc-rc-add .ico { color: var(--gold-ink); }
.vc-rc-add:hover { border-color: var(--gold); }
.vc-rc.is-error .vc-rc-add { border-color: var(--st-wafeq_failed-fg); }
.vc-rc-msg { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.5; color: var(--st-wafeq_failed-fg); }
.vc-rc-msg:empty { display: none; }
.vc-rc-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border: 1.5px dashed var(--line-strong); border-radius: 14px; }
.vc-rc-img { display: block; flex: none; border-radius: 10px; object-fit: cover; background: var(--card-3); }
.vc-rc-doc { display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--card-3); color: var(--ink); }
.vc-rc-open { flex: none; display: block; border-radius: 10px; }
.vc-rc-text { display: grid; gap: 2px; min-width: 0; }
.vc-rc-title { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.vc-rc-meta { display: flex; align-items: center; margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-text); }
.vc-msg--me .vc-rc-img, .vc-msg--me .vc-rc-doc { border-radius: 8px; }

/* ---------- Done screen: the box as its bright card, old balance struck through, new one rolling ---------- */
.vc-done { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); text-align: center; outline: none; }
.vc-done-chip {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--card-2);
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  outline: none;
}
.vc-done-chip > .ico { color: var(--st-wafeq_posted-fg); }
.vc-done-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vc-card {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--r-box);
  background: var(--bx-fill);
  color: var(--bx-on);
  text-align: start;
}
/* Guide v2: the botanical pattern of the chocolate box, tone on tone (it replaces the white circle). */
.vc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bx-fill) 72%, #2b2418);
  opacity: .2;
  -webkit-mask: url("../assets/patterns/botanical.png") 0 0 / 345px auto repeat;
  mask: url("../assets/patterns/botanical.png") 0 0 / 345px auto repeat;
  pointer-events: none;
}
/* The done screen of one box: the lace medallion of the macaron box around the old and new balance. */
.vc-card.has-medal { display: grid; justify-items: center; text-align: center; }
.vc-medal { position: relative; width: min(250px, 82%); aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 2px; container-type: inline-size; margin-top: 4px; }
.vc-medal-ring { position: absolute; inset: 0; background: var(--bx-on); opacity: .5; -webkit-mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; pointer-events: none; }
.vc-medal > p { position: relative; margin: 0; max-width: 54cqi; justify-content: center; }
.vc-medal .vc-card-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vc-medal .vc-card-oldnum { font-size: clamp(13px, 6.4cqi, 17px); }
.vc-medal .vc-card-num { font-size: clamp(18px, 11.5cqi, 32px); letter-spacing: 0; }
.vc-card > * { position: relative; margin: 0; min-width: 0; }
.vc-card > .vc-card-name { margin-bottom: 10px; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.vc-card-old, .vc-card-new { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vc-card-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--bx-sub); }
.vc-card-oldnum { font-size: var(--fs-lg); }
.vc-card .balance-old { color: var(--bx-sub); text-decoration-color: color-mix(in srgb, var(--bx-sub) 70%, transparent); }
.vc-card-num { font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--bx-on); line-height: 1.15; letter-spacing: -.5px; }
.vc-done-pair { gap: 12px; }
.vc-done-pair .vc-card { padding: 16px; }
.vc-done-pair .vc-card-num { font-size: var(--fs-2xl); }
.vc-done.is-in .vc-card-old { animation: vc-rise var(--dur-3) var(--ease) both; }
.vc-done.is-in .vc-card-new { animation: vc-rise var(--dur-3) var(--ease) 150ms both; }
.vc-done-line { margin: 0; font-size: var(--fs-md); line-height: 1.7; }
.vc-done-count { min-height: var(--touch); font-weight: var(--fw-bold); }
.vc-done-wait, .vc-done-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 0; }
.vc-done-ikas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.vc-done-ikas > .ico { color: var(--gold-ink); }
.vc-done-match { display: grid; justify-items: center; gap: 8px; }
.vc-done-match .medallion { color: var(--gold-foil); }

/* ---------- Counting the box ---------- */
.vc-count { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
.vc-count-q { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.4; }
.vc-card--count .vc-card-num { font-size: var(--fs-3xl); }
.vc-count-field .field-label { font-size: var(--fs-md); }
.vc-count-field .field-control { gap: 8px; }
.vc-count-field .field-input { flex: 1 1 auto; min-width: 0; }
/* Dictation in the count, the same as in the agent's chat: the wave and the words take the field's place while it listens */
.vc-count-field .field-control { align-items: flex-end; }
.vc-count-dict[hidden], .vc-count-field .field-input[hidden] { display: none; }
.vc-count-heard { margin: -4px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.vc-count-heard[hidden] { display: none; }
.vc-count-heard > span { font-weight: var(--fw-medium); }
.vc-count-mic:has(.vc-mic--sm[data-state="idle"] .vc-heard[hidden]),
.vc-count-mic:has(.vc-mic--sm[data-state="error"] .vc-heard[hidden]) { display: none; }
.vc-boxpicks { gap: 10px; }
.vc-boxpick {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: 12px;
  min-width: 0;
  min-height: 112px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--bx-fill);
  color: var(--bx-on);
  text-align: start;
  cursor: pointer;
}
.vc-boxpick-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.vc-boxpick-num { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.vc-diff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 50px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--card-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}
.vc-diff[data-diff="less"] { background: var(--attn-tint); color: var(--st-waiting-fg); }
.vc-diff[data-diff="more"] { background: var(--st-wafeq_draft-bg); color: var(--st-wafeq_draft-fg); }
.vc-diff[data-diff="match"] { background: var(--st-wafeq_posted-bg); color: var(--st-wafeq_posted-fg); }

/* ---------- Motion ---------- */
@keyframes vc-pulse { from { transform: scale(1); opacity: .3; } to { transform: scale(1.6); opacity: 0; } }
@keyframes vc-rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vc-mic--lg .vc-mic-ring::before, .vc-mic--lg .vc-mic-ring::after { animation: none !important; }
  .vc-mic--lg[data-state="listening"] .vc-mic-ring::before, .vc-mic--lg[data-state="opening"] .vc-mic-ring::before { opacity: .16; transform: scale(1.25); }
  .vc-mic--lg[data-state="listening"] .vc-mic-ring::after, .vc-mic--lg[data-state="opening"] .vc-mic-ring::after { opacity: .08; transform: scale(1.5); }
  .vc-msg { transform: none; }
  .vc-bar { transition: none; }
}
html[data-motion="off"] .vc-mic--lg .vc-mic-ring::before, html[data-motion="off"] .vc-mic--lg .vc-mic-ring::after { animation: none !important; }
html[data-motion="off"] .vc-mic--lg[data-state="listening"] .vc-mic-ring::before { opacity: .16; transform: scale(1.25); }
html[data-motion="off"] .vc-mic--lg[data-state="listening"] .vc-mic-ring::after { opacity: .08; transform: scale(1.5); }
html[data-motion="off"] .vc-msg { transform: none; opacity: 1; }