/* ==========================================================================
   Yuki Trader Pro — css/yuki-assistant.css
   --------------------------------------------------------------------------
   Styles du module Yuki (mascotte + assistant). Feuille indépendante du
   reste de l'application : peut être retirée sans casser aucun autre écran
   (le chatbot est un module désactivable, voir js/yuki-assistant.js).
   ========================================================================== */

/* ---- Bouton flottant « Besoin d'aide ? » ---- */
.assistant-fab{
  position:fixed;right:14px;bottom:78px;z-index:40;
  background:var(--blue);color:#082f49;border-color:transparent;
  border-radius:999px;padding:8px 16px 8px 8px;font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex;align-items:center;gap:9px;
  min-height:44px; /* cible tactile minimale 44x44 (section 14) */
}

/* ---- Panneau de discussion ---- */
.assistant-panel{
  position:fixed;right:12px;left:12px;bottom:78px;z-index:41;
  max-width:420px;margin-left:auto;max-height:90vh; /* jamais plus de 90% de la hauteur sur petit écran */
  background:rgba(30,41,59,.98);border:1px solid var(--border);
  border-radius:19px;padding:14px;display:flex;flex-direction:column;
}
@media(min-width:600px){.assistant-panel{left:auto;width:380px;max-height:70vh}}

.assistant-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.assistant-head-identity{display:flex;align-items:center;gap:10px}
.assistant-head-identity strong{display:block;font-size:1rem}
.assistant-subtitle{display:block;font-size:.74rem;color:var(--muted);font-weight:500}
.assistant-head-actions{display:flex;gap:2px}
.assistant-close{
  background:transparent;border:0;color:var(--muted);
  padding:8px;font-weight:900;min-width:44px;min-height:44px; /* cible tactile */
  display:flex;align-items:center;justify-content:center;
}
.assistant-close:focus-visible,.assistant-fab:focus-visible,.assistant-quick-btn:focus-visible{
  outline:2px solid #38bdf8;outline-offset:2px;
}

.assistant-messages{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px;margin-bottom:8px;min-height:120px}
.assistant-msg{padding:10px 12px;border-radius:14px;line-height:1.45;white-space:pre-line;font-size:.92rem}
.assistant-msg.bot{background:#0f172a;border:1px solid var(--border);align-self:flex-start}
.assistant-msg.user{background:var(--blue);color:#082f49;align-self:flex-end;font-weight:700}
.assistant-msg.assistant-welcome{display:flex;align-items:flex-start;gap:10px}
.assistant-msg.assistant-welcome-screen{flex-direction:column;align-items:center;text-align:center;background:transparent;border:0;padding:6px 8px}
.assistant-msg.assistant-welcome-screen span{font-size:.95rem;line-height:1.5}
.assistant-thinking{color:var(--muted);font-style:italic}
.assistant-thinking-anim{position:relative}
@media (prefers-reduced-motion: no-preference){
  .assistant-thinking-anim::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:currentColor;animation:yuki-thinking-blink 1s infinite ease-in-out}
}
@keyframes yuki-thinking-blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

.assistant-quick-replies{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.assistant-quick-btn{background:#0f172a;border:1px solid var(--border);border-radius:999px;padding:7px 12px;font-size:.8rem;font-weight:700;min-height:36px}
.assistant-support-btn{background:#312e81;color:#e0e7ff;border-color:transparent}
.assistant-form{display:flex;gap:8px;margin:0}
.assistant-form input{flex:1;min-height:44px}
.assistant-disclaimer{margin:8px 0 0}

/* ---- Avatar de Yuki (mascotte) --------------------------------------------
   Historique des correctifs d'affichage — voir RAPPORT_CHANGEMENTS_UI015_
   AVATAR_DEFINITIF.md pour le détail complet :
   - UI-014 : cercle plein (border-radius:50% + object-fit:cover) qui
     rognait les oreilles/le pouce → object-fit:contain.
   - UI-014-bis : l'image SOURCE elle-même était recadrée trop court à
     droite → nouveau détourage à partir de yuki-source.png (jamais
     modifiée).
   - UI-014-ter : cache HTTP/CDN qui servait une ancienne version sous la
     même URL → paramètre `?v=` de cache-busting.
   - UI-015 : deux causes cumulées — (1) marge transparente insuffisante
     (2-4 % au lieu des 5-10 % requis), corrigée avec une marge calculée
     précisément à ~14-15 % ; (2) `border-radius` posé DIRECTEMENT sur une
     balise <img> découpe le bitmap même sans overflow:hidden — corrigé en
     déplaçant tout cercle/bordure décoratif sur une enveloppe séparée
     (`.yuki-avatar-badge`), jamais sur l'image elle-même.

   Règle appliquée partout, sans exception : object-fit:contain (jamais
   cover), pas d'overflow:hidden, pas de clip-path, pas de border-radius
   sur une balise <img> Yuki, pas de recadrage automatique. L'image
   ENTIÈRE est toujours visible, proportions conservées, centrée
   automatiquement, avec une marge de sécurité généreuse. */
.yuki-image{
  width:240px;max-width:90%;height:auto;
  object-fit:contain;object-position:center;
  display:block;margin:0 auto;
  border-radius:0;
}

/* Mascotte "hero" : utilisée pour l'en-tête du chatbot. Taille réduite
   (220–250px) pour ne pas écraser le texte sur petit écran, hauteur
   automatique (jamais figée) pour ne jamais forcer un recadrage. */
.yuki-hero-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  overflow:visible;
}
.yuki-hero-image{
  width:min(240px, 65vw);
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
  display:block;
  clip-path:none;
  transform:none;
  border-radius:0;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));
}

/* Badge rond (bouton flottant, bandeau d'accueil) : le cercle et la
   bordure sont posés sur l'ENVELOPPE (`.yuki-avatar-badge`), JAMAIS sur
   l'image. L'image occupe 76 % de l'enveloppe, centrée, sans aucun
   border-radius — impossible qu'elle soit rognée par la forme du badge,
   quelle que soit la taille d'écran ou le zoom. */
.yuki-avatar-badge{
  width:52px;height:52px;flex-shrink:0;box-sizing:border-box;
  border-radius:50%;border:2px solid #38bdf8;background:#0f172a;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.yuki-avatar-badge img{
  width:76%;height:76%;object-fit:contain;object-position:center;
  display:block;border-radius:0;
}
.yuki-avatar-badge.yuki-avatar-badge-sm{width:32px;height:32px}

/* ---- En-tête du chatbot : bandeau dédié à la mascotte hero, au-dessus du
   nom et du sous-titre (plus de superposition/chevauchement qui pouvait
   aussi contribuer à une impression de rognage). ---- */
.assistant-head{flex-wrap:wrap}
.assistant-head-hero{width:100%;order:-1;margin-bottom:6px}

/* ---- Bandeau d'accueil discret (tableau de bord) ---- */
.yuki-home-banner{
  display:flex;align-items:center;gap:10px;
  background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);
  border-radius:14px;padding:9px 12px;margin:10px 0;
  font-size:.85rem;color:var(--text);cursor:pointer;
  overflow:visible;
}
.yuki-home-banner span{flex:1}
.yuki-home-banner:hover{background:rgba(56,189,248,.14)}

/* ---- V3.4 : résumé intelligent au démarrage (tableau de bord) ---- */
.yuki-smart-summary{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(56,189,248,.06);border:1px solid rgba(56,189,248,.2);
  border-radius:14px;padding:12px;margin:10px 0;
}
.yuki-smart-summary p{margin:0;font-size:.88rem;line-height:1.55;color:var(--text)}

/* ---- Écran d'accueil du chatbot (illustration buste, écran vide) ---- */
.yuki-welcome-illustration{
  width:140px;max-width:90%;height:auto;
  object-fit:contain;object-position:center;
  display:block;margin:0 auto 8px;
  border-radius:0;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

@media (prefers-reduced-motion: reduce){
  .assistant-fab,.assistant-panel,.assistant-msg{transition:none !important;animation:none !important}
}

/* ==========================================================================
   V3.4 — Parcours d'accueil (onboarding), 6 écrans, une seule fois au
   premier lancement. Voir maybeShowOnboarding()/renderOnboardingStep()
   dans app.js.
   ========================================================================== */
.onboarding-flow-dialog{
  border:0;border-radius:22px;background:#111827;color:#e2e8f0;
  max-width:420px;width:calc(100% - 24px);padding:20px 18px 22px;
  max-height:92vh;overflow-y:auto;
}
.onboarding-flow-dialog::backdrop{background:rgba(2,6,23,.85)}
.ob-progress{width:100%;height:5px;border-radius:999px;background:#1e293b;overflow:hidden;margin-bottom:6px}
.ob-progress-bar{height:100%;background:var(--blue);border-radius:999px;transition:width .25s ease}
.ob-step-label{margin:0 0 14px;text-align:center}
.ob-step h2{margin:6px 0 8px;text-align:center;font-size:1.25rem}
.ob-step > p.muted{text-align:center;margin:0 0 16px;line-height:1.5}
.ob-choice-card{
  display:block;width:100%;text-align:left;padding:14px 16px;margin-bottom:10px;
  background:#1e293b;border:1px solid var(--border);border-radius:14px;
}
.ob-choice-card:hover,.ob-choice-card:focus-visible{border-color:#38bdf8}
.ob-choice-card strong{display:block;font-size:1rem;margin-bottom:4px}
.ob-choice-card small{display:block;color:var(--muted);font-weight:500;line-height:1.4}
.ob-toggle-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.ob-toggle-row:last-of-type{border-bottom:0}
.ob-toggle-row .switch-input{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.ob-checkbox-row{display:flex;align-items:flex-start;gap:10px;margin:12px 0;color:var(--text)}
.ob-checkbox-row input{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.ob-error{color:#fca5a5;display:none}
.ob-final-anim{animation:yuki-ob-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes yuki-ob-pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.ob-final-anim{animation:none}}