/* ═══════════════════════════════════════════════════════════════════════
   PIPSTER PRO · SaaS — funnel du compte Découverte

   Deux éléments, et volontairement deux seulement : la pastille du reste du
   jour, et la note discrète. La fenêtre d'offre, elle, est celle de saas.css
   (`.saas-modal`) — on ne la redessine pas, on l'appelle.

   ── AUCUNE COULEUR EN DUR ─────────────────────────────────────────────
   Tout passe par les jetons du thème (`--veil`, `--shade`, `--accent`,
   `--text-2`) : la peau lux et les trois états clair/sombre/auto suivent
   alors sans une ligne de plus. Un `#fff` écrit ici serait blanc sur fond
   blanc la première fois qu'on ouvre le thème clair.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La pastille « il vous en reste N » ───────────────────────────────────
   Posée dans un élément à NOUS, jamais dans le libellé de l'onglet : le
   terminal réécrit ses propres textes à chaque bascule de peau. */
.conv-left {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-inline-start: 6px;
  padding: 0 4px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-2);
  background: rgb(var(--veil) / .08);
  border: 1px solid rgb(var(--veil) / .12);
  /* `vertical-align` plutôt qu'une marge négative : l'onglet peut être en
     grille comme en ligne selon la peau, et seule la première suit les deux. */
  vertical-align: 1px;
}

/* Le dernier du jour. Pas de rouge : il reste une unité, ce n'est pas une
   erreur — c'est le moment où l'information devient utile. */
.conv-left:not(.off) {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent) 26%, transparent);
}

/* Épuisé : la pastille se vide de son texte, elle ne disparaît pas. Un
   compteur qui s'efface se lit comme un module retiré. */
.conv-left.off {
  min-width: 6px;
  width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 99px;
  background: rgb(var(--veil) / .22);
  border: 0;
}

/* ── La note discrète ────────────────────────────────────────────────────
   Elle ne réclame ni clic ni fermeture et ne recouvre rien d'utile : c'est
   le seul registre acceptable pour « il vous en reste un ». Une fenêtre
   modale, à ce moment-là, interromprait une lecture de graphique pour une
   information qui ne vaut pas l'interruption. */
.conv-note {
  position: fixed;
  inset-inline: 0;
  bottom: 22px;
  z-index: 60;                    /* sous la fenêtre d'offre (80), au-dessus du dock */
  margin-inline: auto;
  width: max-content;
  max-width: min(92vw, 520px);
  padding: 9px 15px;
  border-radius: 99px;
  font-size: .82rem;
  line-height: 1.35;
  text-align: center;
  color: var(--text);
  background: rgb(var(--shade) / .92);
  border: 1px solid var(--border);
  box-shadow: 0 8px 26px rgb(var(--shade) / .28);
  backdrop-filter: blur(8px);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.conv-note.on {
  opacity: 1;
  transform: translateY(0);
}

/* Le tiroir du bas occupe la moitié basse sous 1024 px : la note remonte
   au-dessus de lui plutôt que de se glisser dessous, où elle serait
   invisible. Voir project_pipster_terminal_mobile. */
@media (max-width: 1023px) {
  .conv-note {
    bottom: auto;
    top: 66px;
    font-size: .78rem;
    padding: 8px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conv-note { transition: opacity .01s linear; transform: none; }
  .conv-note.on { transform: none; }
}