@font-face {
  font-family: "ABC Areal";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ABCAreal.woff2") format("woff2");
}
body {
  margin: 0;
  font-family: "ABC Areal", system-ui, sans-serif;
}
@font-face {
  font-family: "ABC Areal Semi Mono";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ABCArealSemiMono.woff2") format("woff2");
}
.velma-fraud-widget {
  --emotion-afraid-RGB: 209, 91, 162;
  --emotion-angry-RGB: 238, 64, 86;
  --emotion-disgusted-RGB: 219, 68, 124;
  --emotion-happy-RGB: 248, 106, 86;
  --emotion-neutral-RGB: 97, 97, 118;
  --emotion-other-RGB: 97, 97, 118;
  --emotion-sad-RGB: 0, 120, 200;
  --emotion-surprised-RGB: 228, 99, 130;
  --emotion-unknown-RGB: 97, 97, 118;
  --m__border-width-l: 3px;
  --m__border-width-m: 2px;
  --m__border-width-s: 1px;
  --m__color-blue-500: rgb(40, 95, 235);
  --m__color-blue-600: rgb(37, 80, 209);
  --m__color-gray-100: rgb(220, 220, 230);
  --m__color-gray-200: rgb(198, 198, 210);
  --m__color-gray-300: rgb(176, 176, 190);
  --m__color-gray-400: rgb(153, 153, 170);
  --m__color-gray-500: rgb(126, 126, 144);
  --m__color-gray-600: rgb(97, 97, 118);
  --m__color-gray-700: rgb(68, 68, 86);
  --m__color-gray-800: rgb(45, 45, 60);
  --m__color-gray-900: rgb(30, 30, 40);
  --m__color-gray-950: rgb(20, 20, 25);
  --m__color-green-400: rgb(100, 225, 140);
  --m__color-green-500: rgb(74, 185, 108);
  --m__color-orange-300: rgb(255, 150, 110);
  --m__color-purple-200: rgb(220, 208, 255);
  --m__color-purple-300: rgb(185, 163, 252);
  --m__color-purple-400: rgb(152, 116, 246);
  --m__color-red-400: rgb(255, 90, 113);
  --m__color-red-500: rgb(238, 64, 86);
  --m__color-red-600: rgb(220, 30, 58);
  --m__color-slate-300: rgb(180, 180, 220);
  --m__color-slate-700: rgb(62, 63, 97);
  --m__color-white: rgb(255, 255, 255);
  --m__color-yellow-500: rgb(255, 200, 0);
  --m__duration-base: 0.3s;
  --m__duration-instant: 0s;
  --m__duration-medium: 0.2s;
  --m__duration-slow: 0.35s;
  --m__duration-xslow: 0.5s;
  --m__easing-base: ease;
  --m__font-family-sans: "ABC Areal", sans-serif;
  --m__font-family-semi-mono: "ABC Areal Semi Mono", monospace;
  --m__font-size-m: 1rem;
  --m__font-size-s: 0.8rem;
  --m__font-size-xs: 0.65rem;
  --m__font-weight-bold: 700;
  --m__font-weight-medium: 500;
  --m__font-weight-regular: 400;
  --m__gap-m: 0.55rem;
  --m__line-height-base: 1.3;
  --m__padding-button-s: 0.3rem 0.7rem;
  --m__padding-control-xs: 0.15rem 0.45rem;
  --m__padding-input-s: 0.3rem 0.5rem;
  --m__radius-m: 0.4rem;
  --m__radius-s: 0.3rem;
  --m__radius-xs: 0.15rem;
  --m__spacer-l: 1.6rem;
  --m__spacer-s: 0.6rem;
  --m__spacer-xs: 0.5rem;
  --m__spacer-xxs: 0.2rem;
  --player-captions-top: calc(75% + 1.4em);
}

.dark, .dark-mode, .dark-vibrant { --m__text: var(--m__color-gray-300); --m__text-caption: var(--m__color-gray-500); --m__text-accent: var(--m__color-gray-300); --m__text-inverted: var(--m__color-gray-950); --m__text-link: var(--m__text); --m__text-link-hover: var(--m__color-white); --m__text-link-pressed: var(--m__color-gray-200); --m__text-code: var(--m__text-caption); --m__text-code-accent: var(--m__color-purple-400); --m__bg: var(--m__color-gray-950); --m__bg-surface: var(--m__color-gray-900); --m__bg-input: var(--m__color-gray-700); --m__bg-accent: var(--m__color-gray-200); --m__bg-accent-hover: var(--m__color-gray-400); --m__bg-accent-pressed: var(--m__color-gray-600); --m__bg-highlight: var(--m__color-yellow-500); --m__border: var(--m__color-gray-700); --m__error: var(--m__color-red-500); --m__error-hover: var(--m__color-red-400); --m__success: var(--m__color-green-500); --m__success-hover: var(--m__color-green-400); --m__chart-default: var(--m__color-slate-300); --m__chart-model-1: var(--m__color-purple-400); --m__chart-model-2: var(--m__color-purple-300); --m__chart-model-3: var(--m__color-purple-200); --m__chart-status-success: var(--m__color-green-400); --m__chart-status-server-error: var(--m__color-red-400); --m__chart-status-client-error: var(--m__color-orange-300); --m__chart-status-processing: var(--m__text-caption); }

.m__tag, .m__tag-flat { display: inline-flex; align-items: center; color: currentcolor; font-weight: var(--m__font-weight-medium); line-height: 1; white-space: nowrap; }

.m__tag { padding: var(--m__padding-control-xs); border-radius: var(--m__radius-xs); font-size: var(--m__font-size-s); background-color: transparent; border: var(--m__border-width-s) solid color-mix(in srgb, currentColor 25%, transparent); }

.m__behavior-link, a.m__behavior-link:link, a.m__behavior-link:visited {
  color: var(--m__bg-accent); font-weight: var(--m__font-weight-bold); text-decoration: none; background-image: linear-gradient(currentcolor, currentcolor); background-repeat: no-repeat; background-position: 0px 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color var(--m__duration-base) var(--m__easing-base); font-size: var(--m__font-size-m); background-size: 100% var(--m__border-width-l); padding-bottom: 0.18em;
  &.S { font-size: var(--m__font-size-s); background-size: 100% var(--m__border-width-m); padding-bottom: 0.15em; }
  &.M { font-size: var(--m__font-size-m); background-size: 100% var(--m__border-width-l); padding-bottom: 0.18em; }
  & svg { width: 1em; height: 1em; vertical-align: -0.15em; margin-inline-end: 0.15em; }
}

a.m__behavior-link:hover, a.m__behavior-link:focus, a.m__behavior-link:active { color: var(--m__text-link-hover); transition-duration: var(--m__duration-instant); }

.velma-fraud-embed { width: 100%; }

.velma-fraud-frame { width: 100%; margin: 0; box-sizing: border-box; container-type: inline-size; }

@container (width <= 992px) {
.velma-fraud-widget { font-size: 14px; }
}

.velma-fraud-widget { --vf-behavior-RGB: 255, 120, 80; --emotion-color-delay: 0s; --emotion-color-duration: var(--m__duration-slow); --vf-white: var(--m__color-white); --vf-text: var(--m__text); --vf-text-caption: var(--m__text-caption); --vf-border: var(--m__border); --vf-surface: var(--m__bg-surface); --vf-separator: color-mix(in srgb, var(--m__border) 40%, transparent); font-family: var(--m__font-family-sans); font-size: 16px; line-height: 1.45; color: var(--vf-text); --vf-plate-bg: var(--m__bg); background-color: var(--vf-plate-bg); position: relative; border-radius: 0.75em; overflow: hidden; cursor: pointer; transition: background-color var(--m__duration-base) var(--m__easing-base); }

/* No plate hover: the widget is the whole page, so the ground stays put. */

.velma-fraud-widget .vf-panel-head { font-family: var(--m__font-family-semi-mono); font-weight: var(--m__font-weight-regular); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vf-text-caption); }

/* `--vf-top-reserve`: room on the right for the host page's studio
   buttons laid over the top bar (set by app.js). */
.velma-fraud-widget .vf-top { padding: 0.8em var(--vf-top-reserve, 1.1em) 0.8em 1.1em; }

.velma-fraud-widget .vf-top__title { margin: 0px; font-size: 1.4em; font-weight: var(--m__font-weight-bold); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.velma-fraud-widget .vf-top__subtitle { font-size: 1em; font-weight: var(--m__font-weight-regular); color: var(--vf-text-caption); }

.velma-fraud-widget .vf-player {
  --player-strip-height: 3em; --vf-strip-bg: color-mix(
    in srgb,
    rgb(var(--ids__bg-surface-RGB)) 30%,
    var(--m__bg-surface)
  ); margin: 0px 1.1em;
  & .speaker-labels { height: auto; font-size: 0.8em; }
  & .speaker-label {
  align-items: flex-start; padding-top: 0.35em; color: color-mix(in srgb, var(--vf-white) 70%, transparent); transition: opacity var(--m__duration-slow) var(--m__easing-base);
  &.vf-pending { opacity: 0; }
}
  & .speaker-labels .speaker-label span { background-color: transparent; color: color-mix(in srgb, var(--vf-white) 70%, transparent); }
  --padding: 0.2em;
  & .media-box {
  background-color: var(--vf-strip-bg); color: var(--m__text); overflow: hidden;
  & .player-controls { height: 100%; padding-top: 0px; }
  & .player-control-center { padding-top: 0px; }
  & .player-control-center:hover { background-color: transparent; }
}
  & .player-start-time, & .player-total-time { position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); pointer-events: none; color: var(--m__text-caption); z-index: 3; }
  & .player-start-time { left: calc(var(--padding) + 0.6em); }
  & .player-total-time { right: calc(var(--padding) + 0.6em); }
  & .player-icon { color: var(--m__text); transition: color var(--m__duration-base) var(--m__easing-base),
      transform var(--m__duration-base) var(--m__easing-base); }
  & .player-icon svg, & .player-icon svg * { fill: currentcolor; }
  & .player-control-center:hover .player-icon { color: var(--vf-white); transform: scale(1.15); transition-duration: var(--m__duration-instant); }
  /* Both times one size: the canon pins the total to 0.8em/0.5 inside
     .player-total-time, so it needs the heavier selector (DS 6866aea). */
  & .start-time, & .total-time, & .player-total-time .total-time { font-size: 1em; opacity: 1; color: inherit; }
  & .clip-text-caption span { font-size: 1em; }
  & .transcript-clip {
  transition: opacity var(--m__duration-slow) var(--m__easing-base);
  &.vf-pending { opacity: 0; pointer-events: none; }
}
  & .player-visualization .transcript-clip:is(:hover, .hover) .clip-visualization, & .player-visualization .transcript-clip:is(:hover, .hover) .clip-visualization::after { filter: none; }
  /* Kiki at 1.2em, tight in the clip's bottom-left corner (0.1em both
     ways; left comes from JS). The extra .behaviour-indicators class
     outweighs the canon's 0.8em rule, which a plain descendant selector
     only ties and loses on order (DS 877fe83). */
  & .behaviour-indicators .behaviour-indicator {
  font-size: 1.2em; transition: opacity var(--m__duration-slow) var(--m__easing-base);
  &.vf-pending { opacity: 0; }
  &[data-speaker-index="1"] { bottom: calc(50% + 0.1em); }
  &[data-speaker-index="2"] { bottom: 0.1em; }
}
  & .player-position-indicator { right: 0px; z-index: 3; }
  &[data-playback-started="true"] .player-position-line { opacity: 1; visibility: visible; }
  & .clip-text-caption {
  top: 50%; bottom: auto; transform: translateY(-50%); left: 3.2em; width: 34%; color: var(--m__text-caption);
  &::after { width: 3em; background: linear-gradient(to right, transparent, var(--vf-strip-bg)); }
}
  & .player-total-time { display: flex; align-items: baseline; gap: 0.6em; }
  & .vf-emotion-caption {
  font-size: 1em; opacity: 0; transition: opacity var(--m__duration-xslow) var(--m__easing-base);
  &.visible { opacity: 1; transition: opacity var(--m__duration-instant) var(--m__easing-base); }
}
}

.velma-fraud-widget .vf-quality {
  --vf-good: var(--m__color-green-400);
  box-sizing: border-box; height: 21em; padding: 1.1em; border-left: 1px solid var(--vf-border); color: var(--vf-text-caption); transition: color var(--m__duration-medium) var(--m__easing-base);
  &.vf-good { color: var(--vf-good); }
  &.vf-watch { color: rgba(var(--vf-behavior-RGB), 1); }
  &.vf-poor { color: var(--vf-white); }
  &.vf-poor .vf-quality__plate { background-color: var(--m__color-red-600); }
}

.velma-fraud-widget .vf-quality__plate { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; overflow: hidden; border-radius: 0.3em; transition: background-color var(--m__duration-medium) var(--m__easing-base); }

.velma-fraud-widget .vf-quality__head { position: relative; z-index: 1; padding: 0.5em 0.4em 0px; font-size: 1.4em; font-weight: var(--m__font-weight-bold); line-height: 1.3; text-align: center; color: var(--vf-text); }

/* On a colored ground the head reads white — Needs attention keeps the plain head (its fill sits low, the head stays on the dark plate). */
.velma-fraud-widget .vf-quality:is(.vf-good, .vf-poor) .vf-quality__head { color: var(--vf-white); }

.velma-fraud-widget .vf-quality__fill { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 0px; background-color: color-mix(in srgb, currentcolor 22%, transparent); transition: height var(--m__duration-base) linear,
    background-color var(--m__duration-medium) var(--m__easing-base); }

.velma-fraud-widget .vf-quality__threshold { position: absolute; left: 0px; right: 0px; border-top: 1px dashed color-mix(in srgb, var(--vf-white) 55%, transparent); }

.velma-fraud-widget .vf-quality__value { position: relative; z-index: 1; margin: auto 0px; font-size: 1.4em; font-weight: var(--m__font-weight-bold); font-variant-numeric: tabular-nums; line-height: 1; color: var(--vf-white); transition: font-size var(--m__duration-base) var(--m__easing-base); }

.velma-fraud-widget .vf-quality:is(.vf-good, .vf-watch, .vf-poor) .vf-quality__value { font-size: 2.2em; }

.velma-fraud-widget .vf-quality__tags { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4em; padding: 0px 0.8em 1em; text-align: center; }

.velma-fraud-widget .vf-quality__verdict {
  display: none; font-size: 0.8em; line-height: 1.3; opacity: 0; transform: translateY(0.3em); transition: opacity var(--m__duration-slow) var(--m__easing-base),
    transform var(--m__duration-slow) var(--m__easing-base);
  &.vf-visible {
  display: block; opacity: 1; transform: none;
  @starting-style {
  opacity: 0; transform: translateY(0.3em);
}
}
}

.velma-fraud-widget .vf-issue {
  display: none; font-size: 0.8em; border-radius: 0.19em; padding: 0.19em 0.56em; opacity: 0; transform: translateY(0.4em); transition: opacity var(--m__duration-slow) var(--m__easing-base),
    transform var(--m__duration-slow) var(--m__easing-base);
  &.vf-visible {
  display: inline-flex; opacity: 1; transform: none;
  @starting-style {
  opacity: 0; transform: translateY(0.4em);
}
}
}

.velma-fraud-widget .vf-main {
  display: grid;
  /* Three columns: transcript, signal stream, and Quality — the score
     over the metric tiles. */
  grid-template-columns: minmax(0px, 3fr) minmax(0px, 2fr) minmax(0px, 1.3fr);
  grid-template-rows: 21em;
  grid-template-areas: "transcript signals quality";
}
.velma-fraud-widget .vf-transcript { grid-area: transcript; }
.velma-fraud-widget .vf-quality { grid-area: quality; }
.velma-fraud-widget .vf-signals { grid-area: signals; }

@container (width <= 768px) {
.velma-fraud-widget .vf-main { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "transcript" "signals" "quality"; }
}

/* Equal top and bottom: pinned, the head is a band of its own. */
.velma-fraud-widget .vf-panel-head { font-size: 0.8em; padding: 1em 1.375em; }

/* The feed heads stay pinned while their column scrolls, on the plate's
   own ground (no plate hover any more, so it never mismatches). */
.velma-fraud-widget :is(.vf-transcript, .vf-signals) > .vf-panel-head { position: sticky; top: 0; z-index: 2; background-color: var(--vf-plate-bg); }

/* Stacked columns are short: their heads scroll away with them. */
@container (width <= 768px) {
  .velma-fraud-widget :is(.vf-transcript, .vf-signals) > .vf-panel-head { position: static; }
}

/* The feeds scroll natively (wheel, trackpad); the scrollbars show only
   under the cursor — switched, not transitioned: the browser animates
   scrollbar-color through a dark flash. */
.velma-fraud-widget .vf-transcript, .velma-fraud-widget .vf-signals { height: 21em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }

.velma-fraud-widget :is(.vf-transcript, .vf-signals):hover { scrollbar-color: color-mix(in srgb, var(--m__text-caption) 55%, transparent) transparent; }


.velma-fraud-widget .vf-signals { border-left: 1px solid var(--vf-border); }

@container (width <= 768px) {
.velma-fraud-widget .vf-transcript { height: 17em; border-bottom: 1px solid var(--vf-border); }
.velma-fraud-widget .vf-signals { height: 15em; border-left: 0px; }
.velma-fraud-widget .vf-quality { height: auto; border-left: 0px; border-top: 1px solid var(--vf-border); }
}

.velma-fraud-widget .vf-utterances { display: flex; flex-direction: column; gap: 0.9em; padding: 0px 1.1em 1em; }

.velma-fraud-widget .vf-utt {
  display: none; background: var(--vf-surface); padding: 0.7em 0.9em; border-radius: 2em; corner-shape: squircle; max-width: min(92%, 40em); opacity: 0; transform: translateY(0.4em); transition: opacity var(--m__duration-slow) var(--m__easing-base),
    transform var(--m__duration-slow) var(--m__easing-base),
    background var(--m__duration-base) var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base);
  &.vf-visible {
  display: block; opacity: 1; transform: none;
  @starting-style {
  opacity: 0; transform: translateY(0.4em);
}
}
}

/* A bubble is clickable (plays from its start): under the cursor it
   lifts a step and its text goes white, instant in / eased out. */
.velma-fraud-widget .pg-transcript-utterance.vf-utt:hover { background: color-mix(in srgb, var(--vf-border) 55%, var(--vf-surface)); color: var(--vf-white); transition-duration: var(--m__duration-instant); }

.velma-fraud-widget .pg-transcript-utterance-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.8em; margin-bottom: 0.45em; font-family: var(--m__font-family-semi-mono); font-size: 0.8em; }

.velma-fraud-widget .pg-transcript-utterance-header a.m__behavior-link { font-size: 1em; font-weight: var(--m__font-weight-bold); }

.velma-fraud-widget .vf-utt.active { background: var(--vf-border) !important; }

/* …and keeps it under the cursor (the canon .active:hover tint is
   !important too, so this needs the heavier selector). */
.velma-fraud-widget .pg-transcript-utterance.vf-utt.active:hover { background: var(--vf-border) !important; color: var(--vf-white); }

.velma-fraud-widget .pg-transcript-behavior-confidence { font-size: 0.9375em; }

.velma-fraud-widget .pg-transcript-utterance .m__behavior-link svg .behaviour-icon__outline { fill: none; }

.velma-fraud-widget .pg-transcript-utterance .m__behavior-link svg polygon { fill: currentcolor; }

.velma-fraud-widget .pg-transcript-text {
  font-size: 0.8em;
  & p { margin: 0px; }
}

.velma-fraud-widget .pg-transcript-emotion {
  opacity: 0; transition: opacity var(--m__duration-slow) var(--m__easing-base);
  &.vf-visible { opacity: 1; }
}

/* A pending behavior tag takes no space (DS 7cd5024): the emotion sits
   right after the speaker until the behavior resolves and pushes it. */
.velma-fraud-widget .pg-transcript-behavior {
  display: none;
  &.vf-visible { display: inline-flex; opacity: 1; transition: opacity var(--m__duration-slow) var(--m__easing-base); @starting-style { opacity: 0; } }
}

.velma-fraud-widget .pg-transcript-utterance.is-evidence-highlighted { color: var(--vf-white); background: color-mix(in srgb, var(--m__color-blue-500) 25%, transparent) !important; }

.velma-fraud-widget .vf-signal-list { padding: 0px 1.1em 1em; }

.velma-fraud-widget .vf-sig {
  display: none; grid-template-columns: 1.43em 4.6em minmax(0px, 1fr) auto; gap: 0px 0.6em; align-items: baseline; padding: 0.5em 0px; border-bottom: 1px solid var(--vf-separator); cursor: pointer; opacity: 0; transform: translateY(0.4em); transition: opacity var(--m__duration-slow) var(--m__easing-base),
    transform var(--m__duration-slow) var(--m__easing-base);
  &.vf-visible {
  display: grid; opacity: 1; transform: none;
  @starting-style {
  opacity: 0; transform: translateY(0.4em);
}
}
  &:last-child { border-bottom: 0px; }
  &:hover .vf-sig__label { color: var(--vf-white); transition-duration: var(--m__duration-instant); }
}

.velma-fraud-widget .vf-sig__time { font-size: 0.65em; font-variant-numeric: tabular-nums; color: var(--vf-text-caption); }

.velma-fraud-widget .vf-sig__type { display: inline-flex; align-items: center; justify-self: start; line-height: 1; font-family: var(--m__font-family-semi-mono); font-size: 0.65em; font-weight: var(--m__font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--vf-text-caption); border: 1px solid var(--vf-border); padding: 0.2em 0.45em; border-radius: 0.46em; }

.velma-fraud-widget .vf-sig[data-alarm] .vf-sig__type { border-color: color-mix(in srgb, var(--m__color-red-500) 60%, transparent); font-weight: var(--m__font-weight-bold); }

.velma-fraud-widget .vf-sig[data-alarm] .vf-sig__time, .velma-fraud-widget .vf-sig[data-alarm] .vf-sig__type, .velma-fraud-widget .vf-sig[data-alarm] .vf-sig__label, .velma-fraud-widget .vf-sig[data-alarm] .vf-sig__val { color: var(--m__color-red-500); }

.velma-fraud-widget .vf-sig__label { font-size: 0.8em; color: var(--vf-text); transition: color var(--m__duration-base) var(--m__easing-base); }

.velma-fraud-widget .vf-sig__val { justify-self: end; font-size: 0.65em; font-variant-numeric: tabular-nums; color: var(--vf-text-caption); }

/* A completed call keeps the whole feed; what lies past the playhead dims.
   A clicked signal row stays lit while its evidence is highlighted. */
.velma-fraud-widget :is(.vf-utt, .vf-sig).vf-visible.vf-ahead { opacity: 0.4; }

.velma-fraud-widget .vf-sig.is-selected .vf-sig__label { color: var(--vf-white); }

.velma-fraud-widget .vf-sig--static { cursor: default; }

.media-container {
  & .media-box {
  position: relative; display: flex; flex-direction: column; --padding: 0.2em; --speaker-count: 2; height: var(--initial-height); background-color: rgba(var(--ids__bg-accent-RGB), 1);
  &[data-speaker-count="1"] { --speaker-count: 1; }
  &[data-speaker-count="2"] { --speaker-count: 2; }
  &[data-speaker-count="3"] { --speaker-count: 3; }
  &[data-speaker-count="4"] { --speaker-count: 4; }
  &[data-speaker-count="5"] { --speaker-count: 5; }
}
  & .player-visualization {
  position: relative; background-color: rgba(var(--ids__bg-surface-RGB), 1); height: var(--player-visualization-height); transition: height var(--m__duration-medium) var(--m__easing-base);
  & .transcript-clip {
  position: absolute; height: 100%; top: 0px; cursor: pointer;
  &:hover, &.hover {
  & .clip-visualization {
  filter: brightness(112%) saturate(105%); transition: filter var(--m__duration-instant) var(--m__easing-base);
  &::after { filter: brightness(112%) saturate(105%); }
}
}
  & .clip-visualization {
  position: absolute; left: 0px; right: 0px; height: calc(100% / var(--speaker-count)); transition: filter 0.1s var(--m__easing-base); background-color: rgba(var(--emotion-neutral-RGB), 1); border-color: rgba(var(--emotion-neutral-RGB), 1);
  &::after { content: ""; position: absolute; inset: 0px; opacity: 0; pointer-events: none; animation: emotion-color-fade-in var(--emotion-color-duration) ease-in
            var(--emotion-color-delay) forwards; }
}
  &[data-speaker-index="1"] .clip-visualization { top: calc((1 - 1) * (100% / var(--speaker-count))); }
  &[data-speaker-index="2"] .clip-visualization { top: calc((2 - 1) * (100% / var(--speaker-count))); }
  &[data-speaker-index="3"] .clip-visualization { top: calc((3 - 1) * (100% / var(--speaker-count))); }
  &[data-speaker-index="4"] .clip-visualization { top: calc((4 - 1) * (100% / var(--speaker-count))); }
  &[data-speaker-index="5"] .clip-visualization { top: calc((5 - 1) * (100% / var(--speaker-count))); }
  & .clip-caption, & .clip-text { display: none; }
  & .clip-caption .behaviour {
  &::after { content: attr(data-behaviour-type); display: none; }
}
  &.emotion-neutral .clip-visualization::after { animation: auto ease 0s 1 normal none running none; }
  &.emotion-angry .clip-visualization::after { background-color: rgba(var(--emotion-angry-RGB), 1); opacity: 1; }
  &.emotion-disgusted .clip-visualization::after { background-color: rgba(var(--emotion-disgusted-RGB), 1); opacity: 1; }
  &.emotion-afraid .clip-visualization::after { background-color: rgba(var(--emotion-afraid-RGB), 1); opacity: 1; }
  &.emotion-surprised .clip-visualization::after { background-color: rgba(var(--emotion-surprised-RGB), 1); opacity: 1; }
  &.emotion-happy .clip-visualization::after { background-color: rgba(var(--emotion-happy-RGB), 1); opacity: 1; }
  &.emotion-sad .clip-visualization::after { background-color: rgba(var(--emotion-sad-RGB), 1); opacity: 1; }
  &.emotion-other .clip-visualization::after { background-color: rgba(var(--emotion-other-RGB), 1); opacity: 1; }
  &.emotion-unknown .clip-visualization::after { background-color: rgba(var(--emotion-unknown-RGB), 1); opacity: 1; }
}
}
  & .speaker-labels {
  position: absolute; width: 100%; height: var(--player-visualization-height); transition: height var(--m__duration-medium) var(--m__easing-base); pointer-events: none; font-size: 0.8em;
  & .speaker-label {
  position: absolute; display: flex; align-items: flex-end; padding-left: 0.1em; height: calc(100% / var(--speaker-count));
  &[data-speaker-index="1"] { top: calc((1 - 1) * (100% / var(--speaker-count))); }
  &[data-speaker-index="2"] { top: calc((2 - 1) * (100% / var(--speaker-count))); }
  &[data-speaker-index="3"] { top: calc((3 - 1) * (100% / var(--speaker-count))); }
  &[data-speaker-index="4"] { top: calc((4 - 1) * (100% / var(--speaker-count))); }
  &[data-speaker-index="5"] { top: calc((5 - 1) * (100% / var(--speaker-count))); }
  & span { background-color: rgba(var(--ids__bg-surface-RGB), 1); padding: 0.1em 0.2em 0px 0px; color: rgba(var(--ids__text-RGB), 0.3); }
}
}
  & .behaviour-indicators {
  position: absolute; top: 0px; left: 0px; width: 100%; height: var(--player-visualization-height); transition: height var(--m__duration-medium) var(--m__easing-base); pointer-events: none; z-index: 2; overflow: visible;
  & .behaviour-indicator {
  position: absolute; bottom: 0px; display: flex; align-items: flex-end; gap: 0.1em; font-size: 0.8em; line-height: 1.2; padding-bottom: 0px; z-index: 1;
  &[data-speaker-index="1"] { bottom: calc((var(--speaker-count) - 1) * (100% / var(--speaker-count))); top: auto; }
  &[data-speaker-index="2"] { bottom: calc((var(--speaker-count) - 2) * (100% / var(--speaker-count))); top: auto; }
  &[data-speaker-index="3"] { bottom: calc((var(--speaker-count) - 3) * (100% / var(--speaker-count))); top: auto; }
  &[data-speaker-index="4"] { bottom: calc((var(--speaker-count) - 4) * (100% / var(--speaker-count))); top: auto; }
  &[data-speaker-index="5"] { bottom: calc((var(--speaker-count) - 5) * (100% / var(--speaker-count))); top: auto; }
  &[data-behaviour-index="1"] { transform: translateY(0px); }
  &[data-behaviour-index="2"] { transform: translateY(calc(-1.2em)); }
  &[data-behaviour-index="3"] { transform: translateY(calc(-2.4em)); }
  & .behaviour-icon {
  display: inline-block; width: 1em; height: 1em; flex-shrink: 0; order: 2; position: relative; z-index: 1; margin-top: -1px; transition: filter 0.1s var(--m__easing-base);
  & svg { width: 100%; height: 100%; fill: var(--m__color-white); }
  & .behaviour-icon__outline { fill: transparent; }
}
  &[data-emotion="angry"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-angry-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
  &[data-emotion="disgusted"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-disgusted-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
  &[data-emotion="afraid"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-afraid-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
  &[data-emotion="surprised"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-surprised-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
  &[data-emotion="happy"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-happy-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
  &[data-emotion="sad"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-sad-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
  &[data-emotion="other"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-other-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
  &[data-emotion="unknown"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-unknown-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
  &[data-emotion="neutral"] .behaviour-icon .behaviour-icon__outline { fill: rgba(var(--emotion-neutral-RGB), 1); transition: fill var(--m__duration-medium) var(--m__easing-base); }
}
}
  & .player-controls {
  position: relative; display: flex; align-items: center; height: calc(100% - var(--player-visualization-height)); transition: height var(--m__duration-medium) var(--m__easing-base); padding-top: 1em;
  & .player-control-center { position: absolute; inset: 0em 0px 0px; padding-top: 0.8em; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--m__duration-medium) var(--m__easing-base); }
  & .player-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; cursor: pointer; transition: transform var(--m__duration-medium) var(--m__easing-base);
  & svg { width: 100%; height: 100%; }
  & svg, & svg * { fill: rgba(var(--ids__text-hover-RGB), 1); transition: fill var(--m__duration-xslow) var(--m__easing-base); }
}
  & .player-control-center:hover {
  background-color: rgba(var(--ids__bg-surface-RGB), 0.3); transition: background-color var(--m__duration-instant) var(--m__easing-base);
  & .player-icon { transform: scale(1.1); transition: transform var(--m__duration-instant) var(--m__easing-base); }
}
  & .player-control-center:hover .player-icon:hover {
  & svg, & svg * { fill: var(--m__color-white); transition: fill var(--m__duration-instant) var(--m__easing-base); }
}
}
  & .clip-text-caption {
  position: absolute; top: var(--player-visualization-height); bottom: var(--padding); left: 0.2em; width: 80%; color: rgba(var(--ids__text-caption-RGB), 1); opacity: 0; transition: opacity var(--m__duration-xslow) var(--m__easing-base); overflow: hidden; white-space: nowrap; pointer-events: none;
  & span { font-size: 0.8em; }
  &.visible { opacity: 1; transition: opacity var(--m__duration-instant) var(--m__easing-base); }
  &::after { content: ""; position: absolute; top: 0px; right: 0px; width: 1em; height: 100%; background: linear-gradient(
        to right,
        transparent,
        rgba(var(--ids__bg-accent-RGB), 1)
      ); pointer-events: none; }
}
  & .player-total-time {
  position: absolute; top: var(--player-captions-top); transition: top var(--m__duration-medium) var(--m__easing-base); right: var(--padding); pointer-events: none;
  & .total-time { opacity: 0.5; font-size: 0.8em; }
}
  & .player-position-indicator {
  position: absolute; top: 0px; bottom: 0px; left: 0px; z-index: 2; pointer-events: none;
  & .player-position-line { position: absolute; top: 0px; left: 0px; bottom: 0px; border-left: var(--m__border-width-s) solid rgba(255, 255, 255, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--m__duration-medium) var(--m__easing-base), visibility var(--m__duration-medium) var(--m__easing-base); }
  & .player-position-caption {
  position: absolute; left: var(--padding); top: var(--player-captions-top); transition: top var(--m__duration-medium) var(--m__easing-base);
  & span { font-size: 0.8em; opacity: 0.5; transition: opacity var(--m__duration-medium) var(--m__easing-base); }
}
}
  & .media-box[data-playback-started="true"] .player-position-indicator {
  & .player-position-line { opacity: 1; visibility: visible; }
  & .player-position-caption span { opacity: 1; }
}
}

.pg-transcript-utterance { background: var(--m__bg-surface); padding: var(--m__spacer-xs) var(--m__spacer-s); border-radius: 1.35rem; max-width: min(92%, 60rem); cursor: pointer; transition: background var(--m__duration-base) var(--m__easing-base),
    color var(--m__duration-base) var(--m__easing-base); }

.pg-transcript-utterance.speaker-left { align-self: flex-start; }

.pg-transcript-utterance.speaker-right { align-self: flex-end; }

.pg-transcript-utterance:hover { color: var(--m__text-link-hover); background: color-mix(in srgb, var(--m__bg-accent-hover) 15%, transparent); transition: background var(--m__duration-instant) var(--m__easing-base),
    color var(--m__duration-instant) var(--m__easing-base); }

.dark-mode .pg-transcript-utterance:hover { background: var(--m__color-slate-700); }

.pg-transcript-utterance.active { background: color-mix(
    in srgb,
    var(--ec, var(--m__chart-model-1)) 20%,
    var(--m__bg-surface)
  ) !important; }

.pg-transcript-utterance.active:hover { background: color-mix(
    in srgb,
    var(--ec, var(--m__chart-model-1)) 20%,
    transparent
  ) !important; }

.pg-transcript-utterance-header { display: flex; align-items: baseline; gap: var(--m__gap-m); margin-bottom: 0.45rem; font-size: var(--m__font-size-xs); }

.pg-transcript-time { font-variant-numeric: tabular-nums; }

.pg-transcript-emotion { color: var(--ec, #0078c8); }

.pg-transcript-text, .pg-transcript-text p { font-family: "ABC Areal"; }

.pg-transcript-text.partial { font-style: italic; color: var(--m__text-caption); }

.dark-mode { --ids__background-RGB: 20, 20, 50; --ids__bg-surface-RGB: 50, 50, 85; --ids__bg-accent-RGB: 20, 20, 50; --ids__text-RGB: 255, 255, 255; --ids__text-caption-RGB: 128, 128, 128; --ids__text-hover-RGB: 120, 180, 255; --ids__bg-hover-RGB: 100, 110, 140; }

.media-container { --player-strip-height: 3rem; --player-controls-height: var(--player-strip-height); --initial-height: var(--player-controls-height); --speaker-count: 2; --player-visualization-height: calc(
    var(--speaker-count) * var(--player-strip-height)
  ); }

.pg-player-dataviz { position: relative; margin-top: 0px; --speaker-count: 2; --padding: 0.2em; height: var(--player-visualization-height); background-color: var(--m__border); }

.pg-player-dataviz .player-visualization { background-color: transparent; }

.media-container { position: relative; }

.pg-media-hover-line { position: absolute; top: 0px; bottom: 0px; width: 1px; background-color: var(--m__error); left: var(--pg-hover-x, 0); pointer-events: none; opacity: 0; z-index: 4; transition: opacity var(--m__duration-base) var(--m__easing-base); }

.media-container[data-hover="true"] .pg-media-hover-line { opacity: 1; transition-duration: var(--m__duration-instant); }

.pg-player-dataviz .speaker-labels { position: absolute; inset: 0px; pointer-events: none; font-size: var(--m__font-size-xs); z-index: 2; }

.pg-player-dataviz .speaker-labels .speaker-label { position: absolute; left: 0px; height: auto; line-height: 1; top: auto; padding-left: 0px; }

.pg-player-dataviz .speaker-labels .speaker-label[data-speaker-index="1"] { bottom: calc(100% / var(--speaker-count)); top: auto; }

.pg-player-dataviz .speaker-labels .speaker-label[data-speaker-index="2"] { bottom: 0px; top: auto; }

.pg-player-dataviz .speaker-labels .speaker-label span { background-color: var(--m__border); color: var(--m__text-caption); padding: 0.1rem 0.35em; font-weight: var(--m__font-weight-medium); }

.pg-transcript-utterance-header a.m__behavior-link, .pg-transcript-utterance-header a.m__behavior-link:link, .pg-transcript-utterance-header a.m__behavior-link:visited, .pg-transcript-utterance-header a.m__behavior-link:hover, .pg-transcript-utterance-header a.m__behavior-link:focus, .pg-transcript-utterance-header a.m__behavior-link:active { color: inherit; font-family: var(--m__font-family-sans); font-weight: var(--m__font-weight-medium); transition: none; }

.pg-transcript-behavior { display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0px; }

.pg-transcript-behavior-confidence { flex: 0 0 auto; color: inherit; font-family: var(--m__font-family-sans); font-size: 0.75rem; font-variant-numeric: tabular-nums; font-weight: var(--m__font-weight-medium); white-space: nowrap; }

/* Call metrics — a light neutral strip under the dark widget (its own
   layer, the LLM Battle card grey), one row of columns. A column with a
   verdict takes a light wash of the verdict color; its title and issue tag
   take the color itself. */
.vf-metrics {
  /* Design-system palette (tokens/palette.css) and its light-theme roles
     (tokens/colors.css: bg-surface, text, text-caption, error). The DS has
     no light red/orange shades, so the verdict washes mix its colors into
     the surface grey, the way its own tags tint borders. */
  --m__color-gray-50: rgb(242, 242, 246);
  --m__color-gray-400: rgb(153, 153, 170);
  --m__color-gray-800: rgb(45, 45, 60);
  --m__color-red-500: rgb(238, 64, 86);
  --m__color-orange-400: rgb(255, 120, 80);
  --m__color-orange-500: rgb(253, 85, 45);
  --m__color-red-600: rgb(220, 30, 58);
  --vf-metric-bg: var(--m__color-gray-50);
  --vf-metric-text: var(--m__color-gray-800);
  --vf-metric-caption: var(--m__color-gray-400);
}

.vf-metrics {
  display: grid;
  /* Two rows of separate tiles. */
  grid-template-columns: repeat(var(--vf-metric-columns, 5), minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-family: "ABC Areal", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--vf-metric-text);
}

@container (width <= 992px) {
  .vf-metrics { font-size: 14px; }
}

@container (width <= 768px) {
  .vf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vf-metric {
  --vf-metric-accent: var(--vf-metric-text);
  /* Rows shared across columns (subgrid): a title that wraps to two lines
     pushes every value down with it, so values stay on one line. */
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: start;
  min-width: 0;
  padding: 0.75em 0.8em;
  --vf-tile-bg: var(--vf-metric-bg);
  border-radius: 0.6em;
  background-color: var(--vf-tile-bg);
  transition: background-color 0.3s ease;

  &[data-status="watch"] {
    --vf-metric-accent: var(--m__color-orange-400);
    --vf-tile-bg: color-mix(in srgb, var(--m__color-orange-400) 10%, var(--vf-metric-bg));
  }
  &[data-status="fail"] {
    --vf-metric-accent: var(--m__color-red-500);
    --vf-tile-bg: color-mix(in srgb, var(--m__color-red-500) 12%, var(--vf-metric-bg));
  }
  /* A tile with a verdict takes a light wash of the verdict color. */
  /* A tile with a verdict reads entirely in the verdict color. */
  &:is([data-status="watch"], [data-status="fail"]) :is(.vf-metric__title, .vf-metric__value, .vf-metric__note) { color: var(--vf-metric-accent); }
}

.vf-metric__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6em;
  justify-self: stretch;
  margin-bottom: 0.4em;
}

.vf-metric__title {
  font-family: "ABC Areal Semi Mono", monospace;
  font-size: 0.65em;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vf-metric-caption);
}

.vf-metric__value {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.vf-metric__note {
  margin-top: 0.1em;
  font-size: 0.65em;
  line-height: 1.35;
}

.vf-metric.is-pending :is(.vf-metric__value, .vf-metric__note) { color: var(--vf-metric-caption); }

/* The verdict: a plain caption in the verdict color, top-right. */
.vf-metric__status {
  flex: none;
  font-size: 0.65em;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--vf-metric-accent);

  &:empty { display: none; }
}

/* Metric details: the tile is a button for the side panel (its styles
   live in widget.js, DETAILS_CSS — the panel opens on the host page). */
.vf-metric { cursor: pointer; }

/* Hover — the DS m__button-secondary hover (components/button.css): the
   content turns the link-hover blue (--m__text-link-hover, blue-500) and
   the ground — verdict tiles included — takes a 15% wash of it. Instant
   in, easing back. */
.vf-metric:hover {
  background-color: color-mix(in srgb, rgb(40, 95, 235) 15%, var(--vf-metric-bg));
  transition-duration: 0s;
}

.vf-metric :is(.vf-metric__title, .vf-metric__value, .vf-metric__note, .vf-metric__status) { transition: color 0.3s ease; }


.vf-metric:hover :is(.vf-metric__title, .vf-metric__value, .vf-metric__note, .vf-metric__status) {
  color: rgb(40, 95, 235);
  transition-duration: 0s;
}

/* ── Resting state (DS 7cd5024 / 0d8b9bf / 27bc956) ─────────────────────── */

/* Before the first play: the columns are gone (visibility keeps the plate
   height), the player stretches down so its bottom edge reaches the plate
   middle — lanes and strip scale together on --player-strip-height — and
   a start sticker lies over the center. The negative margin returns the
   stretch to the flow, so the plate height never moves; starting the demo
   squeezes the player back with the same transitions. No hover position
   line while idle: the click only starts the demo from the top. */
.velma-fraud-widget .vf-player .pg-player-dataviz,
.velma-fraud-widget .vf-player .media-box { transition: height var(--m__duration-medium) var(--m__easing-base); }

.velma-fraud-widget .vf-player { transition: margin-bottom var(--m__duration-medium) var(--m__easing-base); }

/* 3 strips of 3em stretch to 3 × 4.43em = 13.29em: top bar 3.42em +
   13.29em = half of the 33.42em plate (21em feeds). The margin returns
   the extra 4.29em so the flow still sees 9em. */
.velma-fraud-widget.vf-idle .vf-player { --player-strip-height: 4.43em; margin-bottom: -4.29em; }

@container (width <= 768px) {
  /* Stacked columns: the plate is 56.4em tall, the middle sits lower. */
  .velma-fraud-widget.vf-idle .vf-player { --player-strip-height: 8.26em; margin-bottom: -15.78em; }
}

.velma-fraud-widget .vf-main { transition: opacity var(--m__duration-slow) var(--m__easing-base); }

.velma-fraud-widget.vf-idle .vf-main { visibility: hidden; opacity: 0; }

.velma-fraud-widget.vf-idle .pg-media-hover-line { display: none; }

/* One call to action at a time: the strip's own play icon and the time
   captions yield to the sticker and fade back in with the start. */
.velma-fraud-widget .player-control-center,
.velma-fraud-widget .vf-player .player-start-time,
.velma-fraud-widget .vf-player .player-total-time { transition: opacity var(--m__duration-slow) var(--m__easing-base); }

.velma-fraud-widget.vf-idle .player-control-center,
.velma-fraud-widget.vf-idle .vf-player .player-start-time,
.velma-fraud-widget.vf-idle .vf-player .player-total-time { opacity: 0; }

/* The start sticker: a separate button over the plate center, type bigger
   than the headline, blue a step under the link hover with a quiet wide
   glow, the bubbles' squircle; the hover only recolors, straight into the
   link-hover blue. Its click is the ordinary plate click. */
.velma-fraud-widget .vf-start {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  align-items: center;
  gap: 0.55em;
  border: 0;
  font-size: 1.7em;
  font-family: inherit;
  font-weight: var(--m__font-weight-bold);
  line-height: 1.3;
  white-space: nowrap;
  padding: 0.5em 1em;
  border-radius: 2em;
  corner-shape: squircle;
  color: var(--vf-white);
  background-color: var(--m__color-blue-600);
  box-shadow: 0 0 2.8em 0.5em color-mix(in srgb, var(--m__color-blue-500) 30%, transparent);
  cursor: pointer;
  transition: background-color var(--m__duration-base) var(--m__easing-base);
}

.velma-fraud-widget.vf-idle .vf-start { display: inline-flex; }

/* Phones: nowrap at 1.7em would overflow a ~350px plate. */
@container (width <= 480px) {
  .velma-fraud-widget .vf-start { font-size: 1.2em; max-width: calc(100% - 2em); white-space: normal; text-align: left; }
}

.velma-fraud-widget .vf-start svg { width: 0.85em; height: 0.85em; flex: 0 0 auto; }

.velma-fraud-widget .vf-start svg,
.velma-fraud-widget .vf-start svg * { fill: currentColor; }

.velma-fraud-widget .vf-start:hover { background-color: var(--m__color-blue-500); transition-duration: var(--m__duration-instant); }

/* No playhead while streaming (it would sit on the right edge of the live
   timeline), nor when parked on the last frame of a completed call. */
.velma-fraud-widget .vf-player:is(.vf-live, .vf-at-end) .player-position-line { opacity: 0; visibility: hidden; }

/* ── Full page ─────────────────────────────────────────────────────────── */

/* The widget is the whole page (/quality-tracker shows this frame over
   the full viewport): no plate rounding, everything pressed to the edges.
   On a wide screen it fits the viewport exactly — the top bar and the
   player keep their size, the columns take the rest and scroll inside;
   stacked (phones) it keeps its natural height and the page scrolls. */
.velma-fraud-widget { border-radius: 0; }

@media (width > 768px) {
  html, body, .velma-fraud-embed { height: 100%; }
  body { overflow: hidden; }
  .velma-fraud-frame { height: 100%; container-type: size; }
  .velma-fraud-widget { display: flex; flex-direction: column; height: 100%; }
  .velma-fraud-widget .vf-main { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .velma-fraud-widget :is(.vf-transcript, .vf-signals, .vf-quality) { height: auto; min-height: 0; }

  /* Resting state on any height: the 3 player strips stretch so the
     player's bottom edge meets the page middle (3.42em top bar + 3 × strip
     = 50cqh); the margin returns the stretch to the flow. */
  .velma-fraud-widget.vf-idle .vf-player {
    --player-strip-height: calc((50cqh - 3.42em) / 3);
    margin-bottom: calc(-3 * (var(--player-strip-height) - 3em));
  }
}

/* ── Quality column: score + the metric tiles ──────────────────────────── */

/* The third column in two rows: the four tiles at their own height at
   the bottom, the score plate taking the rest above them; in the dark
   theme; two by two when the columns stack. (Stretched tiles spread
   their lines apart.) */
.velma-fraud-widget .vf-quality {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.4em;
}

.velma-fraud-widget .vf-quality__plate { height: auto; min-height: 9em; border-radius: 1em; corner-shape: squircle; }

.velma-fraud-widget .vf-metrics {
  --vf-metric-bg: var(--m__bg-surface);
  --vf-metric-text: var(--vf-text);
  --vf-metric-caption: var(--vf-text-caption);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  font-size: 1em;
}

.velma-fraud-widget .vf-metric {
  grid-row: auto;
  grid-template-rows: auto;
  align-content: start;
  /* A squircle like DS .m__rounded, at a smaller 1em. */
  border-radius: 1em;
  corner-shape: squircle;

  &[data-status="watch"] { --vf-tile-bg: color-mix(in srgb, var(--m__color-orange-400) 16%, var(--vf-metric-bg)); }
  &[data-status="fail"] {
    --vf-metric-accent: var(--m__color-red-400);
    --vf-tile-bg: color-mix(in srgb, var(--m__color-red-500) 20%, var(--vf-metric-bg));
  }
}

/* The value reads big — the headline's 1.4em. */
/* …set tight, so its note sits right under it. */
.velma-fraud-widget .vf-metric__value { font-size: 1.4em; line-height: 1.05; }
.velma-fraud-widget .vf-metric__note { margin-top: 0.25em; }
.velma-fraud-widget .vf-metric__head { margin-bottom: 0.75em; }
/* Tile titles set like the feed column heads (.vf-panel-head: semi-mono,
   uppercase, 0.06em tracking, 0.8em); a verdict tile keeps its color. */
.velma-fraud-widget .vf-metric__title { font-size: 0.8em; letter-spacing: 0.06em; line-height: 1.2; }
/* The verdict word in the corner: the sans at the signal labels' 0.8em. */
.velma-fraud-widget .vf-metric__status { font-size: 0.8em; line-height: 1; }

/* Hover — the transcript bubble's: the ground lifts toward the border
   grey (a verdict tile keeps its tint under it), the content turns white. */
.velma-fraud-widget .vf-metric:hover { background-color: color-mix(in srgb, var(--vf-border) 55%, var(--vf-tile-bg)); }

.velma-fraud-widget .vf-metric:hover :is(.vf-metric__title, .vf-metric__value, .vf-metric__note, .vf-metric__status) { color: var(--vf-white); }

@container (width <= 768px) {
  /* Stacked: the score plate on the left, as tall as the tiles stacked
     on the right. */
  .velma-fraud-widget .vf-quality { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .velma-fraud-widget .vf-quality__plate { min-height: 10em; }
}

/* ── Mid widths (769–1100px) ──────────────────────────────────────────── */

/* Three columns squeeze Quality into a sliver: the transcript and the
   signal stream share the top, Quality runs full width under them — the
   score plate on the left, the tiles two by two on the right. */
@container (768px < width <= 1100px) {
  .velma-fraud-widget .vf-main {
    grid-template-columns: minmax(0px, 3fr) minmax(0px, 2fr);
    grid-template-rows: 21em auto;
    grid-template-areas: "transcript signals" "quality quality";
  }
  .velma-fraud-widget .vf-quality {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--vf-border);
  }
  .velma-fraud-widget .vf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width > 768px) {
  @container (768px < width <= 1100px) {
    .velma-fraud-widget .vf-main { grid-template-rows: minmax(0, 1fr) auto; }
  }
}

/* Once the demo runs only the player plays, pauses and seeks — the rest
   of the plate is no button (bubbles, signals and tiles keep their own). */
.velma-fraud-widget:not(.vf-idle) { cursor: default; }
.velma-fraud-widget:not(.vf-idle) .vf-player { cursor: pointer; }

/* No issue tags on the plate: the tiles under it name the same issues
   (Reply time, Voice glitches, Agent interrupts), each in its verdict color. The plate keeps the score
   and the one-line verdict. */
.velma-fraud-widget .vf-quality__tags .vf-issue.vf-visible { display: none; }