/* ============================================================================
   DUET · Componentes (vidro + espelho + interatividade)
   Depende de tokens.css e base.css.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   VIDRO · Card / superfície de réplica
   Fundo translúcido, blur, bisel de luz no topo, borda sutil.
---------------------------------------------------------------------------- */
.duet-glass {
  position: relative;
  background: var(--duet-glass-fill);
  border: 1px solid var(--duet-glass-stroke);
  border-radius: var(--duet-radius-lg);
  box-shadow: var(--duet-shadow-glass), var(--duet-shadow-ambient);
  backdrop-filter: blur(var(--duet-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--duet-glass-blur)) saturate(140%);
  padding: var(--duet-space-6);
  overflow: hidden;
  transition: transform var(--duet-dur) var(--duet-ease),
    border-color var(--duet-dur) var(--duet-ease),
    box-shadow var(--duet-dur) var(--duet-ease);
}

/* Reflexo diagonal fixo no topo — reforça a leitura de "vidro" */
.duet-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0) 40%
  );
  pointer-events: none;
}

.duet-glass--interactive {
  cursor: pointer;
}
.duet-glass--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--duet-glass-stroke-strong);
  box-shadow: var(--duet-shadow-glass), var(--duet-shadow-ambient),
    var(--duet-glow-strong);
}

/* ----------------------------------------------------------------------------
   LUZ QUE SEGUE O MOUSE (spotlight)
   Aplique a classe .duet-glow-track. Um pequeno JS atualiza --mx / --my
   (posição do cursor em %) e a luz aparece nessa posição no hover.
   Ver duet-glow-track.js. Funciona em qualquer card, não só em vidro.
---------------------------------------------------------------------------- */
.duet-glow-track {
  --mx: 50%;
  --my: 50%;
}
.duet-glow-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx) var(--my),
    rgba(124, 243, 224, 0.18),
    rgba(139, 92, 246, 0.10) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--duet-dur) var(--duet-ease);
  pointer-events: none;
  z-index: 1;
}
.duet-glow-track:hover::after { opacity: 1; }
/* Garante que o conteúdo fique acima da luz */
.duet-glow-track > * { position: relative; z-index: 2; }

.duet-glass--strong {
  background: var(--duet-glass-fill-strong);
  backdrop-filter: blur(var(--duet-glass-blur-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--duet-glass-blur-strong)) saturate(150%);
}

/* ----------------------------------------------------------------------------
   BOTÕES · superfície de vidro/espelho
   SEM faixa de brilho deslizante. Em vez disso, um "gloss" (brilho suave)
   acompanha o cursor sobre o botão — as variáveis --mx/--my são atualizadas
   por duet-glow-track.js (delegação em .duet-glow-track e .duet-btn).
---------------------------------------------------------------------------- */
.duet-btn {
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--duet-space-2);
  font-family: var(--duet-font-body);
  font-size: var(--duet-fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.85em 1.6em;
  border-radius: var(--duet-radius-pill);
  border: 1px solid var(--duet-glass-stroke);
  color: var(--duet-text);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: transform var(--duet-dur-fast) var(--duet-ease),
    box-shadow var(--duet-dur) var(--duet-ease),
    border-color var(--duet-dur) var(--duet-ease),
    filter var(--duet-dur) var(--duet-ease);
}

/* Gloss que segue o mouse: um ponto de luz radial na posição do cursor. */
.duet-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.12) 35%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--duet-dur) var(--duet-ease);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

.duet-btn:hover { transform: translateY(-2px); }
.duet-btn:hover::after { opacity: 1; }
.duet-btn:active { transform: translateY(0) scale(0.98); }
/* Conteúdo (texto/ícone) acima do gloss */
.duet-btn > * { position: relative; z-index: 3; }
.duet-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--duet-glow-soft), 0 0 0 1px var(--duet-glow);
}

/* Botão primário — espelho com tinta aurora por baixo */
.duet-btn--primary {
  border-color: transparent;
  color: var(--duet-text-on-glow);
  background:
    var(--duet-mirror),
    var(--duet-gradient-glow);
  background-blend-mode: overlay, normal;
  box-shadow: 0 8px 24px -8px rgba(124, 243, 224, 0.6),
    inset 0 1px 0 var(--duet-glass-highlight);
}
.duet-btn--primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 34px -8px rgba(124, 243, 224, 0.75),
    inset 0 1px 0 var(--duet-glass-highlight);
}

/* Botão secundário — espelho escuro sobre vidro */
.duet-btn--ghost {
  background: var(--duet-mirror), var(--duet-glass-fill);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(var(--duet-glass-blur));
  -webkit-backdrop-filter: blur(var(--duet-glass-blur));
  box-shadow: var(--duet-glow-ring);
}
.duet-btn--ghost:hover {
  border-color: var(--duet-glass-stroke-strong);
  box-shadow: var(--duet-glow-ring), var(--duet-glow-strong);
}

/* Botão de contorno — mínimo, para ações terciárias */
.duet-btn--outline {
  background: transparent;
  color: var(--duet-text-muted);
}
.duet-btn--outline:hover {
  color: var(--duet-text);
  border-color: var(--duet-glass-stroke-strong);
}

.duet-btn[disabled],
.duet-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   CHIP / TAG · usado para deal breakers, valores, dimensões
---------------------------------------------------------------------------- */
.duet-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--duet-space-2);
  padding: 0.4em 0.9em;
  font-size: var(--duet-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--duet-radius-pill);
  border: 1px solid var(--duet-glass-stroke);
  background: var(--duet-glass-fill);
  color: var(--duet-text-muted);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--duet-dur) var(--duet-ease);
  cursor: default;
}
.duet-chip:hover {
  color: var(--duet-text);
  border-color: var(--duet-glow);
  box-shadow: var(--duet-glow-soft) 0 0 16px;
}
.duet-chip--active {
  background: var(--duet-glow-soft);
  border-color: var(--duet-glow);
  color: var(--duet-glow);
}

/* ----------------------------------------------------------------------------
   INPUT / TEXTAREA · vidro
---------------------------------------------------------------------------- */
.duet-field { display: block; }
.duet-field-label {
  display: block;
  font-size: var(--duet-fs-xs);
  font-weight: 600;
  letter-spacing: var(--duet-tracking-wide);
  text-transform: uppercase;
  color: var(--duet-text-faint);
  margin-bottom: var(--duet-space-2);
}
.duet-input,
.duet-textarea {
  width: 100%;
  font-family: var(--duet-font-body);
  font-size: var(--duet-fs-body);
  color: var(--duet-text);
  background: var(--duet-glass-fill);
  border: 1px solid var(--duet-glass-stroke);
  border-radius: var(--duet-radius-md);
  padding: 0.8em 1em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--duet-dur) var(--duet-ease),
    box-shadow var(--duet-dur) var(--duet-ease),
    background var(--duet-dur) var(--duet-ease);
}
.duet-input::placeholder,
.duet-textarea::placeholder { color: var(--duet-text-faint); }
.duet-input:focus,
.duet-textarea:focus {
  outline: none;
  border-color: var(--duet-glow);
  background: var(--duet-glass-fill-strong);
  box-shadow: 0 0 0 3px var(--duet-glow-soft);
}
.duet-textarea { min-height: 120px; resize: vertical; }

/* ----------------------------------------------------------------------------
   BARRA DE DIMENSÃO · resultado de compatibilidade (não um score único)
---------------------------------------------------------------------------- */
.duet-meter {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--duet-space-4);
}
.duet-meter-label {
  font-size: var(--duet-fs-sm);
  color: var(--duet-text-muted);
}
.duet-meter-track {
  height: 10px;
  border-radius: var(--duet-radius-pill);
  background: var(--duet-glass-fill-strong);
  border: 1px solid var(--duet-glass-stroke);
  overflow: hidden;
}
.duet-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--duet-gradient-aurora);
  box-shadow: var(--duet-glow-strong);
  transition: width var(--duet-dur-slow) var(--duet-ease);
}

/* ----------------------------------------------------------------------------
   DIVISOR sutil
---------------------------------------------------------------------------- */
.duet-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--duet-glass-stroke) 20%,
    var(--duet-glass-stroke) 80%,
    transparent
  );
  margin: var(--duet-space-6) 0;
}

/* ============================================================================
   COMPONENTES vindos dos mockups (Bootstrap) reinterpretados no tema duet
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TOGGLE SWITCH · ex.: "Inegociável" nos deal breakers
---------------------------------------------------------------------------- */
.duet-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--duet-space-3);
  cursor: pointer;
  user-select: none;
}
.duet-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.duet-switch-track {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 46px;
  border-radius: var(--duet-radius-pill);
  background: var(--duet-glass-fill-strong);
  border: 1px solid var(--duet-glass-stroke);
  transition: background var(--duet-dur) var(--duet-ease),
    border-color var(--duet-dur) var(--duet-ease);
}
.duet-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--duet-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  /* easing com leve "overshoot" = movimento gostoso do thumb */
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--duet-dur) var(--duet-ease),
    box-shadow var(--duet-dur) var(--duet-ease);
}
.duet-switch:hover .duet-switch-thumb { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.duet-switch input:checked + .duet-switch-track .duet-switch-thumb {
  box-shadow: 0 0 12px 1px rgba(124, 243, 224, 0.5);
}
.duet-switch input:checked + .duet-switch-track {
  background: var(--duet-gradient-glow);
  border-color: transparent;
}
.duet-switch input:checked + .duet-switch-track .duet-switch-thumb {
  transform: translateX(20px);
  background: var(--duet-text-on-glow);
}
.duet-switch input:focus-visible + .duet-switch-track {
  box-shadow: 0 0 0 3px var(--duet-glow-soft);
}
.duet-switch input:disabled + .duet-switch-track {
  opacity: 0.4;
  cursor: not-allowed;
}
.duet-switch-label { font-size: var(--duet-fs-sm); color: var(--duet-text-muted); }

/* ----------------------------------------------------------------------------
   PROGRESS BAR · onda squiggly (minhoca ondulando)
   Faixa sinuosa (onda em cima E embaixo) que flui. Preenchimento revelado por
   width no .duet-progress-bar. É a ÚNICA barra de progresso (não há versão reta).
   Markup:
     <div class="duet-progress"><div class="duet-progress-bar" style="width:60%"></div></div>

   A onda: caminho que traça a borda de cima e volta pela de baixo com a mesma
   onda deslocada — fita de espessura constante. Emenda sem costura em x=0/40.
---------------------------------------------------------------------------- */
.duet-progress {
  /* LINHA senoidal fina (não uma faixa): um path traçado (stroke) que sobe e
     desce suavemente. Tile 40x24, centro y=12, amplitude ~6, stroke 3.
     Emenda sem costura em x=0/40. */
  --duet-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cpath d='M0 12 C 6 6, 14 6, 20 12 S 34 18, 40 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  position: relative;
  height: 24px;
  width: 100%;
}
/* trilho vazio (linha esmaecida) atrás */
.duet-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--duet-glass-fill-strong);
  -webkit-mask: var(--duet-wave-mask) repeat-x center / 40px 24px;
          mask: var(--duet-wave-mask) repeat-x center / 40px 24px;
}
.duet-progress-bar {
  position: relative;
  height: 100%;
  background: linear-gradient(90deg,
    var(--duet-aurora-cyan), var(--duet-aurora-violet), var(--duet-aurora-magenta));
  transition: width var(--duet-dur-slow) var(--duet-ease);
  /* recorta a barra na forma da linha; a onda desliza continuamente */
  -webkit-mask: var(--duet-wave-mask) repeat-x center / 40px 24px;
          mask: var(--duet-wave-mask) repeat-x center / 40px 24px;
  animation: duet-wave-flow 1.4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(124, 243, 224, 0.6));
}
@keyframes duet-wave-flow {
  from { -webkit-mask-position: 0 center; mask-position: 0 center; }
  to   { -webkit-mask-position: 40px center; mask-position: 40px center; }
}

/* ----------------------------------------------------------------------------
   SEGMENTED CONTROL · escala 1–5 (btn-group dos mockups)
---------------------------------------------------------------------------- */
.duet-segmented {
  display: inline-flex;
  width: 100%;
  border-radius: var(--duet-radius-md);
  border: 1px solid var(--duet-glass-stroke);
  background: var(--duet-glass-fill);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.duet-segmented button {
  flex: 1;
  appearance: none;
  border: 0;
  border-right: 1px solid var(--duet-glass-stroke);
  background: transparent;
  color: var(--duet-text-muted);
  font-family: var(--duet-font-body);
  font-weight: 600;
  font-size: var(--duet-fs-sm);
  padding: 0.7em 0;
  cursor: pointer;
  transition: background var(--duet-dur) var(--duet-ease),
    color var(--duet-dur) var(--duet-ease);
}
.duet-segmented button:last-child { border-right: 0; }
.duet-segmented button:hover { color: var(--duet-text); background: var(--duet-glass-fill-strong); }
.duet-segmented button:active { transform: scale(0.96); }
.duet-segmented button[aria-pressed="true"],
.duet-segmented button.is-active {
  background: var(--duet-gradient-glow);
  color: var(--duet-text-on-glow);
  box-shadow: 0 0 16px -2px var(--duet-glow-soft);
}

/* ----------------------------------------------------------------------------
   RANGE SLIDER · importância / tolerância
---------------------------------------------------------------------------- */
.duet-range {
  --duet-range-fill: 50%;   /* atualizado por duet-range.js */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--duet-radius-pill);
  /* trilho: parte preenchida (aurora) + parte vazia (vidro).
     Usa um gradiente próprio (não a var --duet-gradient-aurora, que já é um
     linear-gradient completo e não pode ser aninhado). */
  background:
    linear-gradient(90deg, var(--duet-aurora-cyan), var(--duet-aurora-violet), var(--duet-aurora-magenta))
      0 / var(--duet-range-fill) 100% no-repeat,
    var(--duet-glass-fill-strong);
  border: 1px solid var(--duet-glass-stroke);
  outline: none;
  cursor: pointer;
  transition: box-shadow var(--duet-dur) var(--duet-ease),
    filter var(--duet-dur) var(--duet-ease);
}
/* trilho preenchido brilha um pouco */
.duet-range { box-shadow: inset 0 0 0 0 transparent; }

/* ---- THUMB (WebKit) ---- */
.duet-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--duet-gradient-glow);
  box-shadow: 0 0 0 0 var(--duet-glow-soft), 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: grab;
  border: 2px solid rgba(255, 255, 255, 0.7);
  transition: transform var(--duet-dur) var(--duet-ease),
    box-shadow var(--duet-dur) var(--duet-ease);
}
.duet-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
/* Ao arrastar: cresce + halo luminoso pulsante */
.duet-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.28);
  box-shadow: 0 0 22px 6px rgba(124, 243, 224, 0.65),
    0 0 40px 10px rgba(139, 92, 246, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---- THUMB (Firefox) ---- */
.duet-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--duet-glow);
  border: 2px solid rgba(255, 255, 255, 0.7);
  cursor: grab;
  box-shadow: 0 0 0 0 var(--duet-glow-soft), 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform var(--duet-dur) var(--duet-ease),
    box-shadow var(--duet-dur) var(--duet-ease);
}
.duet-range:hover::-moz-range-thumb { transform: scale(1.12); }
.duet-range:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.28);
  box-shadow: 0 0 22px 6px rgba(124, 243, 224, 0.65),
    0 0 40px 10px rgba(139, 92, 246, 0.35);
}
.duet-range::-moz-range-progress {
  height: 8px;
  border-radius: var(--duet-radius-pill);
  background: var(--duet-gradient-aurora);
}

/* Ao arrastar, o trilho inteiro ganha um leve glow */
.duet-range:active {
  box-shadow: 0 0 18px -2px var(--duet-glow-soft);
  filter: brightness(1.08);
}
.duet-range:focus-visible { box-shadow: 0 0 0 3px var(--duet-glow-soft); }

/* ----------------------------------------------------------------------------
   SLIDER SUAVE · .duet-slider
   Wrapper com thumb customizado que DESLIZA entre pontos (o input nativo
   salta). O input real fica por cima, invisível, cuidando de acessibilidade,
   teclado e arrasto; a bolinha e o preenchimento visíveis são animados.
   Requer duet-range.js (atualiza --duet-range-fill e a classe .is-dragging).

   Markup:
     <div class="duet-slider">
       <input class="duet-range duet-range--bare" type="range" min="1" max="5" value="3">
       <div class="duet-slider-track">
         <div class="duet-slider-fill"></div>
         <div class="duet-slider-thumb"></div>
       </div>
     </div>
---------------------------------------------------------------------------- */
.duet-slider {
  --duet-range-fill: 50%;
  position: relative;
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
}
/* trilho de fundo (vidro) */
.duet-slider-track {
  position: absolute;
  left: 0; right: 0;
  height: 8px;
  border-radius: var(--duet-radius-pill);
  background: var(--duet-glass-fill-strong);
  border: 1px solid var(--duet-glass-stroke);
  pointer-events: none;
  overflow: visible;
}
/* preenchimento (aurora) — anima a largura suavemente */
.duet-slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--duet-range-fill);
  border-radius: inherit;
  background: linear-gradient(90deg,
    var(--duet-aurora-cyan), var(--duet-aurora-violet), var(--duet-aurora-magenta));
  transition: width 420ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
/* bolinha visível — anima a posição suavemente entre pontos */
.duet-slider-thumb {
  position: absolute;
  top: 50%;
  left: var(--duet-range-fill);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--duet-gradient-glow);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 0 var(--duet-glow-soft), 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  transition: left 420ms cubic-bezier(0.34, 1.4, 0.5, 1),  /* deslize com leve overshoot */
    box-shadow var(--duet-dur) var(--duet-ease),
    width var(--duet-dur) var(--duet-ease),
    height var(--duet-dur) var(--duet-ease);
}
/* input nativo por cima, invisível, mas clicável/arrastável */
.duet-slider .duet-range--bare {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.duet-slider .duet-range--bare::-webkit-slider-thumb { opacity: 0; width: 24px; height: 24px; }
.duet-slider .duet-range--bare::-moz-range-thumb { opacity: 0; width: 24px; height: 24px; border: 0; }
.duet-slider .duet-range--bare::-moz-range-progress { background: transparent; }

/* hover: bolinha cresce */
.duet-slider:hover .duet-slider-thumb { width: 22px; height: 22px; }

/* ARRASTANDO: 1) a bolinha acompanha o dedo sem lag (sem transition de posição)
   2) brilha forte. A classe .is-dragging é posta por duet-range.js. */
.duet-slider.is-dragging .duet-slider-thumb,
.duet-slider.is-dragging .duet-slider-fill {
  transition: none;
}
.duet-slider.is-dragging .duet-slider-thumb {
  width: 26px;
  height: 26px;
  box-shadow: 0 0 22px 6px rgba(124, 243, 224, 0.65),
    0 0 40px 10px rgba(139, 92, 246, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
.duet-slider .duet-range--bare:focus-visible ~ .duet-slider-track .duet-slider-thumb {
  box-shadow: 0 0 0 3px var(--duet-glow-soft), 0 2px 6px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .duet-slider-fill, .duet-slider-thumb { transition: none; }
}

/* ----------------------------------------------------------------------------
   BUBBLE DA RÉPLICA · fala da IA (calibração)
---------------------------------------------------------------------------- */
.duet-bubble {
  position: relative;
  background: var(--duet-glass-fill-strong);
  border: 1px solid var(--duet-glass-stroke);
  border-radius: var(--duet-radius-md) var(--duet-radius-md) var(--duet-radius-md) 4px;
  padding: var(--duet-space-4);
  backdrop-filter: blur(var(--duet-glass-blur));
  -webkit-backdrop-filter: blur(var(--duet-glass-blur));
}
.duet-bubble-who {
  font-size: var(--duet-fs-sm);
  font-weight: 600;
  color: var(--duet-glow);
  margin-bottom: var(--duet-space-2);
}

/* ----------------------------------------------------------------------------
   ALERT / CALLOUT · info, aviso, sucesso, neutro
---------------------------------------------------------------------------- */
.duet-alert {
  --tint: var(--duet-aurora-cyan);
  position: relative;
  display: flex;
  gap: var(--duet-space-3);
  align-items: flex-start;
  border-radius: var(--duet-radius-md);
  border: 1px solid var(--duet-glass-stroke);
  /* leve tinta da cor sangrando do canto superior + vidro */
  background:
    radial-gradient(120% 120% at 0% 0%,
      color-mix(in srgb, var(--tint) 18%, transparent), transparent 55%),
    var(--duet-glass-fill);
  padding: var(--duet-space-4);
  font-size: var(--duet-fs-sm);
  color: var(--duet-text-muted);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
/* ponto luminoso da cor no início (em vez de faixa lateral) */
.duet-alert::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--tint);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--tint) 70%, transparent);
}
.duet-alert--info    { --tint: var(--duet-aurora-cyan); }
.duet-alert--success { --tint: var(--duet-aurora-teal); }
.duet-alert--warning { --tint: #f5c451; }
.duet-alert--danger  { --tint: var(--duet-aurora-magenta); }
/* corpo do alert: todo o texto num único fluxo (evita colunas estranhas) */
.duet-alert-body { min-width: 0; line-height: 1.5; }
.duet-alert strong { color: var(--duet-text); }
.duet-alert-body strong { margin-right: 0.35em; }

/* ----------------------------------------------------------------------------
   LIST GROUP · convergência (✓) / tensão (▲)
---------------------------------------------------------------------------- */
.duet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  border-radius: var(--duet-radius-md); overflow: hidden;
  border: 1px solid var(--duet-glass-stroke); }
.duet-list li {
  display: flex;
  gap: var(--duet-space-3);
  padding: var(--duet-space-3) var(--duet-space-4);
  background: var(--duet-glass-fill);
  font-size: var(--duet-fs-sm);
  color: var(--duet-text-muted);
  transition: background var(--duet-dur) var(--duet-ease),
    padding-left var(--duet-dur) var(--duet-ease),
    color var(--duet-dur) var(--duet-ease);
}
.duet-list li:hover {
  background: var(--duet-glass-fill-strong);
  color: var(--duet-text);
  padding-left: calc(var(--duet-space-4) + 4px);
}
.duet-list li .duet-list-mark { flex: 0 0 auto; font-weight: 700; }
.duet-list--convergence .duet-list-mark { color: var(--duet-aurora-teal); }
.duet-list--tension .duet-list-mark { color: #f5c451; }

/* ----------------------------------------------------------------------------
   DETAILS / ACCORDION · auditoria (dados brutos)
---------------------------------------------------------------------------- */
.duet-details {
  border: 1px solid var(--duet-glass-stroke);
  border-radius: var(--duet-radius-md);
  background: var(--duet-glass-fill);
  overflow: hidden;
}
.duet-details > summary {
  cursor: pointer;
  padding: var(--duet-space-3) var(--duet-space-4);
  font-size: var(--duet-fs-sm);
  font-weight: 600;
  color: var(--duet-text-muted);
  list-style: none;
  transition: color var(--duet-dur) var(--duet-ease),
    background var(--duet-dur) var(--duet-ease);
}
.duet-details > summary:hover { color: var(--duet-text); background: var(--duet-glass-fill); }
.duet-details > summary::-webkit-details-marker { display: none; }
.duet-details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--duet-space-2);
  color: var(--duet-glow);
  transition: transform var(--duet-dur) var(--duet-ease);
}
.duet-details[open] > summary::before { transform: rotate(90deg); }
/* corpo entra suave ao abrir */
.duet-details[open] .duet-details-body {
  animation: duet-details-in var(--duet-dur) var(--duet-ease);
}
@keyframes duet-details-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.duet-details .duet-details-body {
  padding: 0 var(--duet-space-4) var(--duet-space-4);
}
.duet-code {
  display: block;
  background: var(--duet-void);
  border: 1px solid var(--duet-glass-stroke);
  border-radius: var(--duet-radius-sm);
  padding: var(--duet-space-4);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--duet-fs-xs);
  color: var(--duet-glow);
  overflow: auto;
  max-height: 320px;
}

/* ----------------------------------------------------------------------------
   BADGE / PILL · confiança qualitativa, tags de status
---------------------------------------------------------------------------- */
.duet-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--duet-space-1);
  padding: 0.25em 0.7em;
  border-radius: var(--duet-radius-pill);
  font-size: var(--duet-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--duet-glass-fill-strong);
  border: 1px solid var(--duet-glass-stroke);
  color: var(--duet-text-muted);
  transition: transform var(--duet-dur) var(--duet-ease),
    box-shadow var(--duet-dur) var(--duet-ease),
    border-color var(--duet-dur) var(--duet-ease);
}
.duet-badge:hover { transform: translateY(-1px); box-shadow: 0 0 14px -2px var(--duet-glow-soft); }
.duet-badge--glow { background: var(--duet-glow-soft); border-color: var(--duet-glow); color: var(--duet-glow); }
.duet-badge--warning { color: #f5c451; border-color: #f5c451; }
.duet-badge--danger { color: var(--duet-aurora-magenta); border-color: var(--duet-aurora-magenta); }

/* ----------------------------------------------------------------------------
   ORB DA RÉPLICA · avatar/indicador da IA (usa a logo)
---------------------------------------------------------------------------- */
.duet-orb {
  width: 96px;
  height: 96px;
  aspect-ratio: 1 / 1;      /* mantém redondo mesmo se a altura variar */
  flex: 0 0 auto;           /* nunca encolhe/estica dentro de um flex */
  display: grid;
  place-items: center;
  border-radius: 50%;
  --orb-gradient: var(--duet-gradient-aurora);
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,0.35), transparent 45%),
    var(--orb-gradient);
  box-shadow: var(--duet-glow-strong), inset 0 1px 0 var(--duet-glass-highlight);
  animation: duet-orb-pulse 2s var(--duet-ease-in-out) infinite;
}
.duet-orb--sm { width: 56px; height: 56px; }
.duet-orb--xs { width: 40px; height: 40px; }
/* variantes de cor do orb */
.duet-orb--teal    { --orb-gradient: linear-gradient(145deg, var(--duet-aurora-teal), var(--duet-aurora-cyan)); }
.duet-orb--cyan    { --orb-gradient: linear-gradient(145deg, var(--duet-aurora-cyan), var(--duet-aurora-indigo)); }
.duet-orb--violet  { --orb-gradient: linear-gradient(145deg, var(--duet-aurora-violet), var(--duet-aurora-indigo)); }
.duet-orb--magenta { --orb-gradient: linear-gradient(145deg, var(--duet-aurora-magenta), var(--duet-aurora-violet)); }
.duet-orb--sun     { --orb-gradient: linear-gradient(145deg, #f5c451, var(--duet-aurora-magenta)); }
@keyframes duet-orb-pulse {
  0%, 100% { transform: scale(1); box-shadow: var(--duet-glow-strong); }
  50% { transform: scale(1.05); box-shadow: 0 0 56px -6px rgba(124,243,224,0.7); }
}

/* ----------------------------------------------------------------------------
   AVISO DA IA · aparece sempre que a IA fala / recomenda
   O blob do duet é o "rosto" da IA. Em repouso, flutua levemente; ao passar o
   mouse, brilha (como os cards, via .duet-glow-track).

   Markup:
     <div class="duet-ai-note duet-glow-track">
       <span class="duet-ai-blob" data-duet-loader style="--duet-loader-size:44px"></span>
       <div class="duet-ai-note-body">
         <div class="duet-ai-note-who">duet</div>
         <p>...</p>
       </div>
     </div>
   Requer duet-loader.js (monta o blob) e duet-glow-track.js (brilho no mouse).
---------------------------------------------------------------------------- */
.duet-ai-note {
  position: relative;
  display: flex;
  gap: var(--duet-space-4);
  align-items: flex-start;
  padding: var(--duet-space-4) var(--duet-space-5);
  border-radius: var(--duet-radius-lg);
  border: 1px solid var(--duet-glass-stroke);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(124,243,224,0.10), transparent 55%),
    var(--duet-glass-fill);
  backdrop-filter: blur(var(--duet-glass-blur));
  -webkit-backdrop-filter: blur(var(--duet-glass-blur));
  overflow: hidden;
  animation: duet-ai-enter var(--duet-dur-slow) var(--duet-ease);
}
/* o blob flutua de leve em repouso */
.duet-ai-blob {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  animation: duet-ai-float 4s var(--duet-ease-in-out) infinite;
}
.duet-ai-note-who {
  font-family: var(--duet-font-heading);
  font-size: 1.05rem;
  color: var(--duet-glow);
  margin-bottom: var(--duet-space-1);
}
.duet-ai-note-body p { margin: 0; color: var(--duet-text-muted); font-size: var(--duet-fs-sm); }
.duet-ai-note-body strong { color: var(--duet-text); }

@keyframes duet-ai-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes duet-ai-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----------------------------------------------------------------------------
   NAVEGAÇÃO · .duet-nav
   Desktop: barra no topo, ícone + label lado a lado.
   Mobile:  tab bar flutuante no rodapé (estilo iOS) — centralizada, cantos
            arredondados, vidro, ícone maior e texto pequeno embaixo.

   Markup:
     <nav class="duet-nav">
       <a class="duet-nav-item is-active" href="#">
         <svg class="duet-nav-icon" ...>...</svg>
         <span class="duet-nav-label">Início</span>
       </a>
       ...
     </nav>
---------------------------------------------------------------------------- */
.duet-nav {
  display: flex;
  align-items: center;
  gap: var(--duet-space-2);
}
.duet-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--duet-space-2);
  padding: 0.5em 0.9em;
  border-radius: var(--duet-radius-pill);
  color: var(--duet-text-muted);
  text-decoration: none;
  font-size: var(--duet-fs-sm);
  font-weight: 600;
  transition: color var(--duet-dur) var(--duet-ease),
    background var(--duet-dur) var(--duet-ease);
}
.duet-nav-item:hover { color: var(--duet-text); background: var(--duet-glass-fill); text-decoration: none; }
.duet-nav-item.is-active { color: var(--duet-glow); background: var(--duet-glow-soft); }
.duet-nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: block;
}
.duet-nav-label { white-space: nowrap; }

/* ---- MOBILE: tab bar flutuante no rodapé (iOS-like) ---- */
@media (max-width: 640px) {
  .duet-nav {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    transform: translateX(-50%);
    z-index: 40;
    width: max-content;
    max-width: calc(100vw - 28px);
    gap: var(--duet-space-1);
    padding: 8px 10px;
    border-radius: var(--duet-radius-xl);
    background: rgba(13, 16, 32, 0.72);
    border: 1px solid var(--duet-glass-stroke);
    box-shadow: var(--duet-shadow-ambient), inset 0 1px 0 var(--duet-glass-highlight);
    backdrop-filter: blur(var(--duet-glass-blur-strong)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--duet-glass-blur-strong)) saturate(150%);
  }
  .duet-nav-item {
    flex-direction: column;   /* ícone em cima, texto embaixo */
    gap: 3px;
    padding: 8px 12px;
    border-radius: var(--duet-radius-md);
    font-size: 0.62rem;       /* texto pequeno */
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .duet-nav-item.is-active { background: var(--duet-glow-soft); }
  .duet-nav-icon { width: 26px; height: 26px; }  /* ícone maior */
  .duet-nav-label { font-size: inherit; }
  /* dá respiro pro conteúdo não ficar atrás da tab bar */
  body.has-duet-nav { padding-bottom: 96px; }
}

/* ============================================================================
   RESPONSIVIDADE · escala de densidade por largura
   Estratégia: tokens de espaço encolhem em telas menores, então TODOS os
   componentes que usam --duet-space-* ficam proporcionalmente mais compactos
   sem regra individual. Mais alguns ajustes pontuais.
   ============================================================================ */

/* Tablet / telas médias */
@media (max-width: 900px) {
  :root {
    --duet-space-5: 20px;
    --duet-space-6: 26px;
    --duet-space-7: 38px;
    --duet-space-8: 52px;
  }
}

/* Phone */
@media (max-width: 640px) {
  :root {
    --duet-fs-display: clamp(2rem, 11vw, 2.8rem);
    --duet-fs-h1: clamp(1.6rem, 7vw, 2.2rem);
    --duet-fs-h2: clamp(1.3rem, 6vw, 1.7rem);
    --duet-fs-h3: 1.2rem;
    /* densidade menor */
    --duet-space-4: 14px;
    --duet-space-5: 18px;
    --duet-space-6: 24px;
    --duet-space-7: 32px;
    --duet-space-8: 44px;
    --duet-radius-lg: 20px;
    --duet-radius-xl: 24px;
  }
  .duet-glass { padding: var(--duet-space-4); }
  .duet-btn { padding: 0.8em 1.3em; }
  .duet-btn--block { width: 100%; }
  /* Meter/label: rótulo em cima da barra no mobile */
  .duet-meter { grid-template-columns: 1fr; gap: var(--duet-space-2); }
  .duet-container { width: 90vw; }
  /* AI-note e bubble com respiro adequado */
  .duet-ai-note { padding: var(--duet-space-4); gap: var(--duet-space-3); }
  /* segmented não aperta os números */
  .duet-segmented button { padding: 0.6em 0; }
}

/* Phone estreito */
@media (max-width: 380px) {
  .duet-container { width: 92vw; }
  .duet-btn { width: 100%; }   /* botões ocupam a linha */
}

@media (prefers-reduced-motion: reduce) {
  .duet-orb,
  .duet-progress-bar,
  .duet-ai-blob,
  .duet-ai-note { animation: none; }
}