/* ===========================================================
   CREATE-BOT.CSS — Version Premium (Aurora & Physics)
   =========================================================== */
:root{
  color-scheme: light;
  --bg:#f8fafc; 
  --ink:#0f172a; 
  --muted:#64748b;
  --brand:#2563eb; 
  --brand-light:#eff6ff;
  --border:#e2e8f0;
  --radius:24px; 
  --shadow-soft:0 10px 30px -10px rgba(0,0,0,0.08);
  --shadow-float:0 20px 40px -10px rgba(37,99,235,0.15);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0; font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink);
  /* Fond blanc de base, l'Aurora est géré par .aurora-bg */
  background: var(--bg);
  overflow-x: hidden;
}

/* --- 1. AURORA BACKGROUND (FOND ANIMÉ) --- */
.aurora-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff, #f1f5f9);
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
  animation: floatOrb 20s infinite ease-in-out alternate;
}
.orb-1 {
  width: 600px; height: 600px; background: rgba(37, 99, 235, 0.15); /* Brand Blue */
  top: -10%; left: -10%; animation-duration: 25s;
}
.orb-2 {
  width: 500px; height: 500px; background: rgba(147, 51, 234, 0.12); /* Purple soft */
  bottom: -10%; right: -10%; animation-duration: 18s; animation-direction: alternate-reverse;
}
@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, 40px) scale(1.1); }
}

/* --- HEADER --- */
header{
  position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; background:rgba(255,255,255,0.7); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(226, 232, 240, 0.6);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-0.5px; color:var(--ink)}
.blob{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--brand),#60a5fa)}
.progress-wrap{flex:1;max-width:200px;height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:0 20px}
.progress{height:100%;width:0;background:var(--brand);transition:width .4s ease}
.crumbs{font-size:12px;color:var(--muted);font-weight:500}
.iconbtn{color:var(--ink); opacity:0.6; transition:opacity .2s}
.iconbtn:hover{opacity:1}

/* --- LAYOUT MAIN --- */
main{
  max-width:1100px; margin:40px auto; padding:0 20px;
  display:grid; grid-template-columns:1fr 380px; gap:50px; align-items:start;
}
@media (max-width:900px){ main{grid-template-columns:1fr} .preview-container{display:none} }

/* --- WIZARD STEPS --- */
.step{display:none;background:rgba(255,255,255,0.8); backdrop-filter:blur(10px); border:1px solid #fff; border-radius:32px; padding:40px; box-shadow:var(--shadow-float); text-align:center; position:relative;}
.step.active{display:block; animation:slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.h{font-size:28px; font-weight:800; margin:10px 0; letter-spacing:-0.8px; line-height:1.2; color:var(--ink)}
.grad{background:linear-gradient(135deg,var(--brand),#9333ea); -webkit-background-clip:text; color:transparent}
.sub{color:var(--muted); margin:0 auto 30px; max-width:400px; line-height:1.5}

/* --- AVATAR (BREATHING) --- */
.avatar{
  width:100px; height:100px; margin:0 auto 20px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #dbeafe, #bfdbfe);
  display:grid; place-items:center; position:relative;
  box-shadow:0 10px 25px rgba(37,99,235,0.2);
  animation:floatBreath 4s ease-in-out infinite;
}
@keyframes floatBreath{
  0%,100%{transform:scale(1); box-shadow:0 10px 25px rgba(37,99,235,0.2)}
  50%{transform:scale(1.05); box-shadow:0 18px 40px rgba(37,99,235,0.3)}
}
.avatar-emoji{font-size:48px; z-index:2}
.ring{position:absolute; inset:0; border-radius:50%; border:4px solid rgba(255,255,255,0.4); z-index:1}

/* --- OPTIONS & SPRING PHYSICS --- */
.options{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:16px; margin-bottom:30px}
.option{
  background:#fff; border:1px solid var(--border); border-radius:18px; padding:24px 12px;
  cursor:pointer; position:relative; overflow:hidden;
  /* Physics transitions */
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.option:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:#cbd5e1}
.option:active{transform:scale(0.96) translateY(0);}

.option.selected{
  border-color:var(--brand); background:var(--brand-light);
  box-shadow:0 0 0 2px var(--brand) inset;
  animation:popSelected 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popSelected{
  0%{transform:scale(0.96)} 50%{transform:scale(1.02)} 100%{transform:scale(1)}
}

.option[data-icon]::before{content:attr(data-icon); display:block; font-size:32px; margin-bottom:10px;}
.option b{display:block; color:var(--ink); font-size:15px}

/* --- HERO INPUT (STEP 4) --- */
.input-hero{
  width:100%; font-size:32px; font-weight:700; text-align:center;
  border:none; border-bottom:2px solid var(--border); background:transparent;
  padding:15px 0; margin-bottom:30px; color:var(--ink); outline:none;
  transition:border-color .3s;
}
.input-hero:focus{border-color:var(--brand)}
.input-hero::placeholder{color:#cbd5e1; font-weight:400}

/* --- ID CARD (STEP 6) --- */
.id-card-container{perspective:1000px; display:flex; justify-content:center; margin-bottom:30px}
.id-card{
  width:320px; height:200px; background:linear-gradient(135deg, #ffffff, #f8fafc);
  border-radius:20px; padding:22px; position:relative;
  border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 20px 50px -10px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.6);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .4s ease; transform-style:preserve-3d;
}
.id-card:hover{transform:rotateX(5deg) rotateY(5deg)}
.id-header{display:flex; justify-content:space-between; align-items:center}
.id-logo{font-weight:800; color:var(--brand); font-size:14px}
.id-role-badge{background:var(--ink); color:#fff; font-size:10px; padding:4px 10px; border-radius:99px; font-weight:600; text-transform:uppercase}
.id-body{display:flex; align-items:center; gap:16px}
.id-avatar{font-size:40px; width:60px; height:60px; background:#fff; border-radius:50%; display:grid; place-items:center; box-shadow:0 6px 16px rgba(0,0,0,0.06)}
.id-info h2{margin:0; font-size:18px; font-weight:800; color:var(--ink)}
.id-info p{margin:2px 0 0; font-size:12px; color:var(--muted)}
.id-footer{display:flex; justify-content:space-between; align-items:flex-end}
.id-chip{width:36px; height:26px; background:linear-gradient(135deg,#cbd5e1,#94a3b8); border-radius:5px; position:relative}
.id-qr svg{opacity:0.8; color:var(--ink)}

/* --- BOUTONS --- */
.row{display:flex; gap:12px; align-items:center}
.btn{
  border:none; padding:14px 26px; border-radius:14px; font-weight:600; font-size:15px; cursor:pointer;
  background:var(--ink); color:#fff; 
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
.btn:disabled{opacity:0.3; cursor:not-allowed; transform:none !important;}
.btn:not(:disabled):hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.1)}
.btn:active:not(:disabled){transform:scale(0.96);}

.btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--border)}
.btn.ghost:hover{background:#fff; color:var(--ink)}

/* Bouton Shimmer (Brillant) */
.btn.primary-glow {
  background: linear-gradient(110deg, #2563eb 8%, #4f8aff 18%, #2563eb 33%);
  background-size: 200% 100%;
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.5), inset 0 0 0 1px rgba(255,255,255,0.15);
  animation: shine 4s linear infinite;
}
@keyframes shine { to { background-position-x: -200%; } }
.btn.primary-glow:hover { animation-duration: 2s; box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.6); }

/* --- PHONE MOCKUP (RIGHT SIDE) --- */
.phone-mockup{
  background:#fff; border:10px solid #f8fafc; border-radius:44px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.15);
  overflow:hidden; position:sticky; top:100px; min-height:520px;
  display:flex; flex-direction:column;
}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:26px; background:#f8fafc; border-radius:0 0 18px 18px; z-index:10;
}
.phone-status-bar{display:flex; justify-content:space-between; padding:14px 26px 6px; font-size:11px; color:#94a3b8; font-weight:600}

.w-head{padding:16px 20px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.9); backdrop-filter:blur(5px)}
.status-dot{width:8px; height:8px; background:#22c55e; border-radius:50%}

.w-chat{flex:1; background:#fff; padding:20px; display:flex; flex-direction:column; gap:14px}
.w-bot{align-self:flex-start; background:#f1f5f9; color:#334155; padding:12px 16px; border-radius:18px 18px 18px 4px; font-size:14px; max-width:85%; line-height:1.4}
.w-user{align-self:flex-end; background:var(--brand); color:#fff; padding:12px 16px; border-radius:18px 18px 4px 18px; font-size:14px; max-width:85%; box-shadow:0 4px 10px rgba(37,99,235,0.2)}
.w-bot.typing span{
  display:inline-block; width:5px; height:5px; background:#94a3b8; border-radius:50%; margin:0 2px;
  animation:typing 1.4s infinite both;
}
.w-bot.typing span:nth-child(2){animation-delay:.2s}
.w-bot.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,100%{opacity:.3}50%{opacity:1}}

.phone-input-bar{padding:16px; border-top:1px solid #f1f5f9; display:flex; gap:10px; align-items:center; background:#fff}
.fake-input{flex:1; height:40px; background:#f8fafc; border-radius:20px; padding:0 16px; display:flex; align-items:center; font-size:13px; color:#cbd5e1}
.fake-send{width:40px; height:40px; background:var(--brand); border-radius:50%; color:#fff; display:grid; place-items:center; font-size:14px}

/* --- CONFETTI --- */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:100}
.spark{position:absolute; width:6px; height:12px; border-radius:2px; animation:fall 2s linear forwards}
@keyframes fall{to{transform:translateY(100vh) rotate(720deg); opacity:0}}