/* FleetDeck — studio d'onboarding (réplique fidèle de la référence, thème CLAIR).
   Piloté par onboarding-studio.js (WS réel) ; classes .onb-* (msg/harness/chips) posées
   par le JS. Vars de couleur/police définies dans onboarding-landing.css (:root), chargé
   avant. Mécanisme conservé : .studio.on affiche, .studio.ready fond les panneaux.
   CSP-safe (zéro inline). prefers-reduced-motion neutralise les animations. */

/* Studio plein écran (grandit depuis #onb-chatbox) */
.studio { position: fixed; inset: 12px; z-index: 60; display: none; flex-direction: column;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 12px; overflow: hidden; box-shadow: 0 40px 120px hsl(222 40% 12% / .28);
  color: hsl(var(--foreground)); transform-origin: top left; will-change: transform; }
.studio.on { display: flex; }
.studio .st-head, .studio .st-body { opacity: 0; transition: opacity .35s ease .12s; }
.studio.ready .st-head, .studio.ready .st-body { opacity: 1; }

.st-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid hsl(var(--border)); flex: none; }
.st-head .who { display: flex; align-items: center; gap: 10px; font: 600 14px/1.2 var(--f-ui); letter-spacing: -.2px; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary-soft)); animation: stPulse 2s infinite; }
@keyframes stPulse { 0%,100% { box-shadow: 0 0 0 3px hsl(var(--primary-soft)); } 50% { box-shadow: 0 0 0 7px hsl(245 66% 60% / .04); } }
.st-head #stTitle { font: 600 14px/1.2 var(--f-ui); display: block; }
.st-head #stSub { display: block; font: 400 11px/1.3 var(--f-body); color: hsl(var(--muted-foreground)); }
.st-close { width: 36px; height: 36px; border: 0; background: transparent; color: hsl(var(--muted-foreground));
  cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.st-close:hover { background: hsl(var(--muted)); }

/* Split : conversation à gauche, panneau ADN à droite */
.st-body { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; transition: grid-template-columns .45s ease; }
.st-body.split { grid-template-columns: 1fr minmax(320px, 440px); }
.conv { display: flex; flex-direction: column; min-height: 0; }
.conv .msgs { flex: 1; overflow-y: auto; padding: 22px clamp(16px, 4vw, 46px); display: flex; flex-direction: column; gap: 13px; scroll-behavior: smooth; }
.st-composer { padding: 12px clamp(16px, 4vw, 46px) 16px; }
.st-composer .composer-input { display: flex; align-items: center; gap: 8px; flex: 1; }
.st-composer input { flex: 1; }
.composer-input { background: hsl(var(--card)); border-radius: 12px; border: 1px solid hsl(var(--border));
  box-shadow: 0 8px 30px hsl(222 40% 12% / .08); padding: 7px 7px 7px 15px; min-height: 54px; }
.composer-input input { flex: 1; border: 0; outline: 0; font: 400 13px/1.4 var(--f-body); color: hsl(var(--foreground)); background: transparent; min-width: 0; }
.composer-input input::placeholder { color: hsl(var(--muted-foreground)); }

/* Messages (.onb-msg posés par le JS) */
.onb-msg { max-width: 620px; padding: 11px 15px; border-radius: 14px; font: 400 14.5px/1.55 var(--f-body); animation: onbUp .3s ease both; }
@keyframes onbUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.onb-ia { align-self: flex-start; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-bottom-left-radius: 4px; }
.onb-moi { align-self: flex-end; background: hsl(var(--primary)); color: #fff; border-bottom-right-radius: 4px; font-weight: 500; }
.onb-sys { align-self: center; background: transparent; color: hsl(var(--muted-foreground)); font: 500 11.5px/1.5 var(--f-ui); display: flex; align-items: center; gap: 8px; padding: 4px; }
.onb-typing { display: inline-flex; gap: 4px; padding: 13px 15px; }
.onb-typing i { width: 6px; height: 6px; border-radius: 50%; background: hsl(220 9% 60%); animation: onbTy 1.2s infinite; }
.onb-typing i:nth-child(2) { animation-delay: .15s; } .onb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes onbTy { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Panneau Marketing DNA */
.dna { display: none; position: relative; overflow-y: auto; flex-direction: column; gap: 12px;
  border-left: 1px solid hsl(var(--border)); padding: 18px; background: hsl(220 20% 98.5%); }
.st-body.split .dna { display: flex; }
.dna-title { display: flex; align-items: center; justify-content: space-between; font: 600 11px/1 var(--f-ui);
  letter-spacing: 1.4px; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.dna-pct { font: 700 12px/1 var(--f-display); color: hsl(var(--primary)); }
.dna-card { border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); overflow: hidden; }
.dna-card .ch { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 600 12px/1 var(--f-ui); color: hsl(var(--foreground)); }
.dna-card .ch .ic { width: 20px; height: 20px; border-radius: 6px; background: hsl(var(--primary-soft)); display: flex; align-items: center; justify-content: center; color: hsl(var(--primary)); font-size: 11px; }
.dna-fields { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 5px; }
.dfield { display: flex; align-items: center; gap: 8px; font: 400 12px/1.4 var(--f-body); color: hsl(var(--muted-foreground)); padding: 4px 0; }
.dfield .fk { width: 15px; height: 15px; min-width: 15px; border-radius: 50%; border: 1.5px solid hsl(var(--border)); display: flex; align-items: center; justify-content: center; font-size: 9px; transition: all .3s; }
.dfield.done .fk { background: hsl(var(--success)); border-color: hsl(var(--success)); color: #fff; }
.dfield.done { color: hsl(var(--foreground)); }
.dfield .fv { margin-left: auto; font: 600 11px/1 var(--f-ui); color: hsl(var(--foreground)); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Skeleton shimmer (clair) pendant l'extraction du champ */
.dfield.sk { position: relative; overflow: hidden; }
.dfield.sk .fk, .dfield.sk .fv, .dfield.sk { color: transparent !important; }
.dfield.sk::after { content: ""; position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(100deg, hsl(220 16% 94%) 28%, hsl(220 14% 88%) 46%, hsl(220 16% 94%) 64%);
  background-size: 220% 100%; animation: onbShimmer 1.1s linear infinite; z-index: 2; }
.dfield.reveal { animation: onbBkin .42s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes onbShimmer { to { background-position: -220% 0; } }
@keyframes onbBkin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Réseaux possédés (pills) */
.nets { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 0; }
.net { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--f-ui); padding: 7px 10px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); cursor: pointer; }
.net.on { background: hsl(var(--accent) / .12); color: hsl(190 82% 30%); border-color: hsl(var(--accent) / .3); }
.net .d { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted-foreground)); }
.net.on .d { background: hsl(var(--success)); }

/* Chips (.onb-chips/.onb-chip posés par le JS = .chips/.qchip de la référence) */
.onb-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 620px; }
.onb-chip { background: hsl(var(--card)); border: 1px solid hsl(var(--primary)); color: hsl(var(--primary)); font: 500 13px/1.35 var(--f-ui); padding: 9px 14px; border-radius: 999px; min-height: 40px; transition: all .15s; text-align: left; cursor: pointer; opacity: 0; animation: onbCardUp .46s cubic-bezier(.22, 1, .36, 1) forwards; }
.onb-chip:hover { background: hsl(var(--primary)); color: #fff; transform: translateY(-1px); }
.onb-chip--skip { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.onb-chip--skip:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.onb-chip--apply { border-color: hsl(var(--accent)); color: hsl(190 82% 30%); background: hsl(var(--accent) / .08); }
.onb-chip--apply:hover { background: hsl(var(--accent)); color: #fff; }
.onb-chips .onb-chip:nth-child(2) { animation-delay: .06s; } .onb-chips .onb-chip:nth-child(3) { animation-delay: .12s; }
.onb-chips .onb-chip:nth-child(4) { animation-delay: .18s; } .onb-chips .onb-chip:nth-child(5) { animation-delay: .24s; }
@keyframes onbCardUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Paywall qui monte depuis la valeur : jamais avant ADN validé + réseaux */
.pv-paywall { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border)); border-radius: 16px 16px 0 0; box-shadow: 0 -14px 44px hsl(222 40% 12% / .16);
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center;
  transform: translateY(105%); transition: transform .55s cubic-bezier(.32, .72, .25, 1); }
.dna.pay .pv-paywall { transform: translateY(0); }
.pv-paywall h3 { font: 600 16px/1.3 var(--f-ui); letter-spacing: -.3px; color: hsl(var(--foreground)); margin: 0; }
.pv-paywall .promise { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 12px; background: hsl(var(--accent) / .12); color: hsl(190 82% 32%); font: 600 11.5px/1 var(--f-ui); padding: 6px 10px; border-radius: 8px; }
.pv-paywall .pw-fine { margin-top: 7px; font: 400 10.5px/1.5 var(--f-body); color: hsl(var(--muted-foreground)); }
.pv-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
@media (max-width: 480px) { .pv-packs { grid-template-columns: 1fr; } }
.pv-pack { border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 10px; text-align: left; background: hsl(var(--card)); }
.pv-pack strong { display: block; font: 600 12px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .6px; color: hsl(var(--muted-foreground)); }
.pv-pack .pv-pack-n { font: 700 20px/1.1 var(--f-display); letter-spacing: -1px; color: hsl(var(--foreground)); margin-top: 2px; }
.pv-pack .pv-pack-sub { font: 500 10px/1 var(--f-body); color: hsl(var(--muted-foreground)); }
.pv-pack .btn { margin-top: 8px; width: 100%; }

/* Curseur typewriter + halo conique (glow-invite) sur le composer */
.cr { display: inline-block; width: 2px; height: 1em; background: hsl(var(--accent)); vertical-align: -2px; margin-left: 1px; animation: crBlink .9s steps(1) infinite; }
@keyframes crBlink { 50% { opacity: 0; } }
#onb-studio-form.glow-invite { position: relative; isolation: isolate; }
#onb-studio-form.glow-invite::before { content: ""; position: absolute; inset: -2px; border-radius: 14px; padding: 2px;
  background: conic-gradient(transparent 0deg, transparent 55deg, hsl(var(--primary)) 120deg, hsl(var(--accent)) 150deg, hsl(var(--primary)) 185deg, transparent 250deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kaSpin 2.6s linear infinite; pointer-events: none; z-index: 2; }
@keyframes kaSpin { to { transform: rotate(360deg); } }

/* Harness : progression pendant l'extraction de l'ADN (.onb-* posés par le JS) */
.onb-harness { border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(220 20% 98.5%);
  padding: 10px 12px; margin-top: 8px; display: flex; flex-direction: column; gap: 7px; align-self: flex-start; max-width: 86%; }
.onb-hrow { display: flex; align-items: center; gap: 9px; font: 500 12.5px/1.4 var(--f-ui); color: hsl(222 20% 32%);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.onb-hrow.in { opacity: 1; transform: none; }
.onb-hrow.done { color: hsl(var(--foreground)); }
.onb-hspin { width: 13px; height: 13px; min-width: 13px; border-radius: 50%; border: 2px solid hsl(var(--primary) / .2);
  border-top-color: hsl(var(--primary)); animation: onbHzSpin .8s linear infinite; display: inline-flex; align-items: center; justify-content: center; }
.onb-hrow.done .onb-hspin { border: 0; animation: none; }
.onb-hrow.done .onb-hspin::before { content: "✓"; color: hsl(var(--success)); font: 700 12px/1 var(--f-ui); }
@keyframes onbHzSpin { to { transform: rotate(360deg); } }
.onb-hbar { height: 6px; border-radius: 4px; background: hsl(var(--primary) / .1); overflow: hidden; margin-top: 2px; }
.onb-hbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); border-radius: 4px; transition: width .4s ease; }

/* Toast + XP */
.onb-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(180%);
  z-index: 90; background: hsl(222 26% 11%); color: #fff; padding: 11px 16px; border-radius: 13px; box-shadow: 0 16px 40px hsl(222 40% 12% / .3);
  display: flex; align-items: center; gap: 9px; font: 600 13px/1 var(--f-ui); transition: transform .45s cubic-bezier(.2, .9, .2, 1); max-width: 90%; }
.onb-toast.show { transform: translateX(-50%) translateY(0); }
.onb-toast .lv { background: hsl(var(--accent)); color: #062a33; font: 800 10.5px/1 var(--f-ui); padding: 3px 7px; border-radius: 6px; }
#onb-confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; }

@media (max-width: 640px) {
  .studio { inset: 8px; } .st-body.split { grid-template-columns: 1fr; }
  .dna { border-left: 0; border-top: 1px solid hsl(var(--border)); padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio, .st-body { transition-duration: .001s !important; }
  .onb-msg, .onb-chips .onb-chip, .dfield.reveal { animation-duration: .001s !important; }
  .dfield.sk::after, .onb-hspin, .onb-typing i, .st-dot { animation: none; }
  .onb-hrow { opacity: 1; transform: none; }
  .onb-hbar i { transition: none; }
  #onb-studio-form.glow-invite::before { display: none; }
  .cr { animation: none; } .onb-toast { transition-duration: .001s !important; }
}