/* ============================================================
   Fluxo de atendimento Fluven — componente animado
   Usa os tokens da landing (.flv-parc) quando disponíveis.
   Personalização: sobrescreva as variáveis --flow-* no .flv-flow
   ============================================================ */
.flv-flow {
  --flow-h: 330px;
  --flow-h-mobile: 400px;
  --flow-teal: var(--fluven-teal, #3FA7A3);
  --flow-teal-dark: var(--fluven-teal-700, #278F89);
  --flow-teal-light: var(--fluven-teal-light, #E1F4EE);
  --flow-peach: var(--cream-100, #FEE9D8);
  --flow-navy: var(--navy, #174E63);
  --flow-navy-dark: var(--navy-dark, #0F3D52);
  --flow-orange: var(--fluven-orange, #E8762A);
  --flow-ok: #1E8E5E;
  --flow-ok-bg: #E2F4EA;
  --flow-wa: #25A55F;
  --flow-surface: #FFFFFF;
  --flow-surface-2: #F5F8F9;
  --flow-text: var(--fg-1, #174E63);
  --flow-muted: var(--fg-3, #7A9499);
  --flow-border: var(--border-soft, rgba(23, 78, 99, 0.12));
  --flow-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  max-width: 880px;
  margin: 8px auto 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--flow-text);
}

.flv-flow *,
.flv-flow *::before,
.flv-flow *::after {
  box-sizing: border-box;
}

.flv-flow p,
.flv-flow ul {
  margin: 0;
}

.flv-flow ul {
  list-style: none;
  padding: 0;
}

/* ── Palco ── */
.flv-flow__stage {
  position: relative;
  height: var(--flow-h);
}

.flv-flow__window {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  width: calc(100% - 250px);
  display: flex;
  flex-direction: column;
  background: var(--flow-surface);
  border: 1px solid var(--flow-border);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(23, 78, 99, 0.12), 0 2px 8px rgba(23, 78, 99, 0.05);
  overflow: hidden;
}

/* Barra superior do "app" */
.flv-flow__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid var(--flow-border);
}

.flv-flow__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--flow-navy);
}

.flv-flow__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--flow-teal);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.flv-flow__bar-tabs {
  display: grid;
  flex: 1;
  padding-left: 14px;
  border-left: 1px solid var(--flow-border);
}

.flv-flow__bar-tabs span {
  grid-area: 1 / 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--flow-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--flow-ease), transform 0.35s var(--flow-ease);
}

.flv-flow__bar-tabs span.is-active {
  opacity: 1;
  transform: none;
}

.flv-flow__bar-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--flow-peach);
  color: var(--flow-navy);
  font-size: 11px;
  font-weight: 700;
}

/* ── Cenas ── */
.flv-flow__scenes {
  position: relative;
  flex: 1;
}

.flv-flow__scene {
  position: absolute;
  inset: 0;
  padding: 18px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  transition:
    opacity 0.5s var(--flow-ease),
    transform 0.65s var(--flow-ease),
    visibility 0s linear 0.65s;
}

.flv-flow__scene.is-past {
  transform: translateX(-28px);
}

.flv-flow__scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.55s var(--flow-ease) 0.12s,
    transform 0.7s var(--flow-ease) 0.12s,
    visibility 0s;
}

/* Cada transição com um movimento coerente com a narrativa */
.flv-flow__scene--call:not(.is-active) { transform: scale(0.96); }
.flv-flow__scene--record:not(.is-active):not(.is-past) { transform: translateY(18px); }
.flv-flow__scene--record.is-past { transform: translateX(-48px); }
.flv-flow__scene--finance:not(.is-active):not(.is-past) { transform: translateX(56px); }

/* Antes do JS: mostra a primeira cena */
.flv-flow:not(.is-ready) .flv-flow__scene[data-scene="0"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Elementos temporizados dentro das cenas */
.flv-flow [data-at],
.flv-flow [data-until] {
  opacity: 0;
  transition: opacity 0.4s var(--flow-ease), transform 0.45s var(--flow-ease);
}

.flv-flow [data-at].is-on,
.flv-flow [data-until].is-on {
  opacity: 1;
}

/* Pílulas de status */
.flv-flow__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.flv-flow__pill--ok { background: var(--flow-ok-bg); color: var(--flow-ok); }
.flv-flow__pill--wait { background: #EEF2F4; color: var(--flow-muted); }
.flv-flow__pill--pending { background: var(--flow-peach); color: #B4521A; }

.flv-flow__pill-swap {
  display: grid;
  justify-items: end;
}

.flv-flow__pill-swap > * {
  grid-area: 1 / 1;
}

.flv-flow__pill-swap .flv-flow__pill--ok {
  transform: scale(0.85);
}

.flv-flow__pill-swap .flv-flow__pill--ok.is-on {
  transform: none;
}

/* Avatares com iniciais */
.flv-flow__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}

.flv-flow__avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 11px;
  background: var(--flow-teal-light);
  color: var(--flow-teal-dark);
}

/* ── Cena 1: agenda ── */
.flv-flow__week {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.flv-flow__week span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  padding: 5px 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--flow-text);
}

.flv-flow__week small {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--flow-muted);
}

.flv-flow__week .is-today {
  background: var(--flow-teal);
  color: #fff;
}

.flv-flow__week .is-today small {
  color: rgba(255, 255, 255, 0.8);
}

.flv-flow__agenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flv-flow__event {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--flow-surface-2);
  border-left: 3px solid #D5E0E3;
  font-size: 13px;
}

.flv-flow__event--done {
  border-left-color: var(--flow-ok);
}

.flv-flow__event--focus {
  background: var(--flow-teal-light);
  border-left-color: var(--flow-teal);
  box-shadow: 0 4px 14px rgba(63, 167, 163, 0.18);
}

.flv-flow__event-time {
  font-weight: 700;
  color: var(--flow-muted);
  font-variant-numeric: tabular-nums;
}

.flv-flow__event-name {
  font-weight: 600;
  color: var(--flow-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Cena 2: atendimento ── */
.flv-flow__scene--call {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 14px;
}

.flv-flow__call {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--flow-navy) 0%, var(--flow-navy-dark) 100%);
  overflow: hidden;
}

.flv-flow__call-video {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.flv-flow__avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 20px;
  background: var(--flow-peach);
  color: var(--flow-navy);
  box-shadow: 0 0 0 6px rgba(254, 233, 216, 0.12);
}

.flv-flow__call-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.flv-flow__avatar--pip {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 54px;
  height: 40px;
  border-radius: 8px;
  font-size: 11px;
  background: var(--flow-teal);
  color: #fff;
}

.flv-flow__call-time {
  position: absolute;
  top: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}

.flv-flow__rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F26B5B;
}

.flv-flow__scene.is-active .flv-flow__rec {
  animation: flv-flow-blink 1.4s ease-in-out infinite;
}

.flv-flow__call-end {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 61, 82, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.flv-flow__call-end svg {
  padding: 3px;
  border-radius: 50%;
  background: var(--flow-ok);
  box-sizing: content-box;
}

.flv-flow__call-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 10px;
}

.flv-flow__call-controls span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.flv-flow__call-controls .is-end {
  background: #E5534B;
}

.flv-flow__transcript {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--flow-surface-2);
  border: 1px solid var(--flow-border);
}

.flv-flow__pro {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--flow-peach);
  color: #B4521A;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flv-flow__transcript-titles {
  display: grid;
}

.flv-flow__transcript-titles > * {
  grid-area: 1 / 1;
}

.flv-flow__transcript-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--flow-text);
}

.flv-flow__transcript-title--done {
  color: var(--flow-ok);
}

.flv-flow__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
}

.flv-flow__wave i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--flow-teal);
  transform: scaleY(0.25);
}

.flv-flow__scene.is-active .flv-flow__wave i {
  animation: flv-flow-wave 1.1s ease-in-out infinite alternate;
}

.flv-flow__wave i:nth-child(2) { animation-delay: -0.2s; }
.flv-flow__wave i:nth-child(3) { animation-delay: -0.55s; }
.flv-flow__wave i:nth-child(4) { animation-delay: -0.35s; }
.flv-flow__wave i:nth-child(5) { animation-delay: -0.8s; }
.flv-flow__wave i:nth-child(6) { animation-delay: -0.1s; }
.flv-flow__wave i:nth-child(7) { animation-delay: -0.65s; }
.flv-flow__wave i:nth-child(8) { animation-delay: -0.45s; }
.flv-flow__wave i:nth-child(9) { animation-delay: -0.9s; }

.flv-flow__transcript-note {
  margin-top: auto;
  font-size: 11px;
  line-height: 1.4;
  color: var(--flow-muted);
}

/* ── Cena 3: registro clínico ── */
.flv-flow__scene--record {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.flv-flow__record-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.flv-flow__record-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flv-flow__record-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--flow-text);
}

.flv-flow__record-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--flow-teal-dark);
}

.flv-flow__record-head .flv-flow__pill {
  transform: translateY(4px);
}

.flv-flow__record-head .flv-flow__pill.is-on {
  transform: none;
}

.flv-flow__record-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flv-flow__record-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flv-flow__record-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flow-muted);
}

.flv-flow__line {
  display: block;
  width: var(--w, 80%);
  height: 8px;
  border-radius: 4px;
  background: #DFE8EB;
  transform: scaleX(0);
  transform-origin: left center;
}

.flv-flow__line.is-on {
  transform: scaleX(1);
  transition: opacity 0.3s var(--flow-ease), transform 0.7s var(--flow-ease);
}

.flv-flow__record-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--flow-border);
  transform: translateY(6px);
}

.flv-flow__record-foot.is-on {
  transform: none;
}

.flv-flow__record-hint {
  font-size: 12px;
  color: var(--flow-muted);
}

.flv-flow__review-btn {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--flow-teal);
  color: var(--flow-teal-dark);
  font-size: 12px;
  font-weight: 700;
}

.flv-flow__record-foot.is-on .flv-flow__review-btn {
  animation: flv-flow-pulse 1.6s ease-out 0.3s 2;
}

/* ── Cena 4: financeiro ── */
.flv-flow__scene--finance {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flv-flow__fin-sum {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.flv-flow__fin-sum > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--flow-surface-2);
}

.flv-flow__fin-sum small {
  font-size: 11px;
  color: var(--flow-muted);
}

.flv-flow__fin-sum b {
  font-size: 16px;
  color: var(--flow-text);
  font-variant-numeric: tabular-nums;
}

.flv-flow__fin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flv-flow__fin-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--flow-border);
}

.flv-flow__fin-row--focus {
  background: #FFF8F1;
  border-color: rgba(232, 118, 42, 0.28);
}

.flv-flow__fin-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flv-flow__fin-who b {
  font-size: 13px;
  color: var(--flow-text);
}

.flv-flow__fin-who small {
  font-size: 11px;
  color: var(--flow-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flv-flow__fin-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.flv-flow__fin-sent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--flow-teal-dark);
  transform: translateY(-3px);
}

.flv-flow__fin-sent.is-on {
  transform: none;
}

/* ── Cena 5: resultado ── */
.flv-flow__scene--result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.flv-flow__done-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 460px;
}

.flv-flow__done-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--flow-teal-light);
  font-size: 13px;
  font-weight: 600;
  color: var(--flow-text);
  text-align: left;
  transform: translateY(8px);
}

.flv-flow__done-list li.is-on {
  transform: none;
}

.flv-flow__done-list svg {
  padding: 3px;
  border-radius: 50%;
  background: var(--flow-ok);
  color: #fff;
  box-sizing: content-box;
}

.flv-flow__result-phrase {
  max-width: 460px;
  font-size: 22px;
  line-height: 1.3;
  color: var(--flow-navy);
  transform: translateY(8px);
}

.flv-flow__result-phrase.is-on {
  transform: none;
}

.flv-flow__result-phrase span {
  color: var(--flow-teal-dark);
}

/* ── Notificações flutuantes ── */
.flv-flow__toasts {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 290px;
  pointer-events: none;
}

.flv-flow__toast {
  position: absolute;
  bottom: 6px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--flow-surface);
  border: 1px solid var(--flow-border);
  box-shadow: 0 14px 36px rgba(23, 78, 99, 0.16);
  transform: translateY(12px) scale(0.97);
}

.flv-flow__toast.is-on {
  transform: none;
}

.flv-flow__toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}

.flv-flow__toast-icon--wa { background: #E3F6EA; color: var(--flow-wa); }
.flv-flow__toast-icon--ok { background: var(--flow-ok); color: #fff; }

.flv-flow__toast-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flv-flow__toast-text b {
  font-size: 13px;
  line-height: 1.3;
  color: var(--flow-text);
}

.flv-flow__toast-text small {
  font-size: 11px;
  color: var(--flow-muted);
}

/* ── Frase de apoio ── */
.flv-flow__captions {
  position: relative;
  height: 30px;
  margin-top: 22px;
}

.flv-flow__caption {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--flow-navy);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--flow-ease), transform 0.4s var(--flow-ease);
}

.flv-flow__caption.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}

/* ── Indicadores de etapa ── */
.flv-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.flv-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--flow-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.flv-flow__step:hover {
  color: var(--flow-text);
}

.flv-flow__step:focus-visible {
  outline: 2px solid var(--flow-teal);
  outline-offset: 2px;
}

.flv-flow__step.is-done {
  color: var(--flow-teal-dark);
}

.flv-flow__step.is-active {
  background: var(--flow-surface);
  border-color: var(--flow-border);
  box-shadow: 0 4px 14px rgba(23, 78, 99, 0.08);
  color: var(--flow-text);
}

.flv-flow__step.is-active svg {
  color: var(--flow-teal);
}

.flv-flow__step-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 2px;
  background: rgba(23, 78, 99, 0.1);
  overflow: hidden;
}

.flv-flow__step-bar > i {
  display: block;
  height: 100%;
  background: var(--flow-teal);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ── Keyframes ── */
@keyframes flv-flow-wave {
  from { transform: scaleY(0.2); }
  to   { transform: scaleY(1); }
}

@keyframes flv-flow-blink {
  50% { opacity: 0.25; }
}

@keyframes flv-flow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 167, 163, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(63, 167, 163, 0); }
}

/* ── Movimento reduzido ── */
.flv-flow.is-reduced *,
.flv-flow.is-reduced *::before,
.flv-flow.is-reduced *::after {
  transition: none !important;
  animation: none !important;
}

.flv-flow.is-reduced .flv-flow__wave i {
  transform: scaleY(0.6);
}

@media (prefers-reduced-motion: reduce) {
  .flv-flow *,
  .flv-flow *::before,
  .flv-flow *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Tablet ── */
@media (max-width: 900px) {
  .flv-flow__window {
    left: 0;
    width: calc(100% - 150px);
  }

  .flv-flow__toasts {
    width: 250px;
  }

  .flv-flow__scene--call {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
}

/* ── Mobile: composição vertical, uma cena por vez ── */
@media (max-width: 640px) {
  .flv-flow__stage {
    height: var(--flow-h-mobile);
  }

  .flv-flow__window {
    left: 0;
    width: 100%;
    border-radius: 18px;
  }

  .flv-flow__bar {
    height: 42px;
    padding: 0 14px;
    gap: 10px;
  }

  .flv-flow__scene {
    padding: 14px;
  }

  .flv-flow__week span {
    min-width: 0;
    flex: 1;
  }

  .flv-flow__event {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 10px;
    font-size: 12px;
  }

  /* Atendimento: vídeo em cima, transcrição compacta embaixo */
  .flv-flow__scene--call {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .flv-flow__transcript {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 12px;
  }

  .flv-flow__transcript-titles {
    flex: 1;
    min-width: 0;
  }

  .flv-flow__transcript-title {
    font-size: 12px;
  }

  .flv-flow__wave {
    height: 20px;
  }

  .flv-flow__transcript-note {
    display: none;
  }

  .flv-flow__record-head {
    flex-direction: column;
    gap: 8px;
  }

  .flv-flow__record-title {
    font-size: 14px;
  }

  .flv-flow__record-foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 8px;
  }

  .flv-flow__fin-sum b {
    font-size: 14px;
  }

  .flv-flow__fin-row {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 9px 10px;
    row-gap: 6px;
  }

  .flv-flow__fin-row:not(.flv-flow__fin-row--focus) {
    display: none;
  }

  .flv-flow__fin-status {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .flv-flow__avatar--sm {
    width: 28px;
    height: 28px;
  }

  .flv-flow__done-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .flv-flow__done-list li {
    padding: 8px 12px;
  }

  .flv-flow__result-phrase {
    font-size: 19px;
  }

  /* Notificações compactas, ancoradas na base da janela */
  .flv-flow__toasts {
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    width: auto;
    height: 64px;
  }

  .flv-flow__toast {
    bottom: 0;
    padding: 10px 12px;
    border-radius: 14px;
  }

  .flv-flow__toast-icon {
    width: 30px;
    height: 30px;
  }

  .flv-flow__toast-text b {
    font-size: 12px;
  }

  .flv-flow__captions {
    height: 46px;
    margin-top: 16px;
  }

  .flv-flow__caption {
    font-size: 16px;
  }

  .flv-flow__steps {
    gap: 2px;
  }

  .flv-flow__step {
    padding: 8px 0 12px;
    font-size: 10px;
    letter-spacing: -0.01em;
  }

  .flv-flow__step-bar {
    left: 8px;
    right: 8px;
  }
}