/* AstralFriend — Liquid Glass, palette « amitié » (turquoise ↔ rose) */
:root{--bg:#060a1c;--t1:#f4f7ff;--t2:#c3cbe6;--t3:#8b94b8;--line:rgba(255,255,255,.1);--glass:rgba(255,255,255,.06);
  --a:#5eead4;--b:#38bdf8;--c:#f9a8d4;--d:#c084fc;--grad:linear-gradient(90deg,#5eead4,#38bdf8 30%,#c084fc 65%,#f9a8d4,#5eead4);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--sp:cubic-bezier(.34,1.56,.64,1);--so:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--t1);font-family:-apple-system,"SF Pro Text",Roboto,"Segoe UI",system-ui,sans-serif;overflow:hidden;overscroll-behavior:none}
button,input,textarea{font:inherit;color:inherit}
.sky{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.sky i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.34}
.sky i:nth-child(1){width:75vw;height:75vw;left:-18vw;top:6vh;background:#0d9488;animation:fa 28s ease-in-out infinite alternate}
.sky i:nth-child(2){width:62vw;height:62vw;right:-22vw;top:38vh;background:#db2777;opacity:.24;animation:fb 34s ease-in-out infinite alternate}
.sky i:nth-child(3){width:54vw;height:54vw;left:22vw;bottom:-24vh;background:#7c3aed;opacity:.22;animation:fa 40s ease-in-out infinite alternate-reverse}
@keyframes fa{to{transform:translate(12vw,8vh) scale(1.15)}}@keyframes fb{to{transform:translate(-10vw,-10vh) scale(.9)}}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#fff,transparent),
  radial-gradient(1px 1px at 88% 55%,#fff,transparent),radial-gradient(1px 1px at 20% 85%,#fff,transparent),radial-gradient(1.2px 1.2px at 58% 38%,#fff,transparent)}
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.035));border:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -18px rgba(0,0,0,.7)}
.screen{flex:1;min-height:0;overflow-y:auto;padding:calc(var(--safe-t) + 22px) 20px calc(var(--safe-b) + 24px);animation:scr .5s var(--so) both}
@keyframes scr{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.logo{width:96px;height:96px;margin:0 auto;display:block;border-radius:28px;box-shadow:0 0 60px rgba(94,234,212,.35),0 0 90px rgba(249,168,212,.2);animation:orb 6s ease-in-out infinite}
@keyframes orb{50%{transform:translateY(-6px) rotate(-3deg)}}
.brand{font-size:30px;font-weight:800;letter-spacing:-.03em;text-align:center;margin:14px 0 4px;background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 8s linear infinite}
@keyframes flow{to{background-position:200% 0}}
.sub{color:var(--t3);text-align:center;font-size:14px;line-height:1.5;margin:0 0 22px}
.field{width:100%;padding:15px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.06);outline:none;font-size:17px;text-align:center}
.field:focus{border-color:rgba(94,234,212,.5)}
.dots{display:flex;gap:12px;justify-content:center;margin:22px 0 18px}
.dots i{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.3);transition:all .25s var(--sp)}
.dots i.on{background:var(--grad);background-size:300% 100%;border-color:transparent;transform:scale(1.15);box-shadow:0 0 14px rgba(94,234,212,.6)}
.dots.shake{animation:shake .45s}@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:300px;margin:0 auto}
.pad button{height:62px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:24px;font-weight:600;transition:transform .15s var(--sp),background .2s}
.pad button:active{transform:scale(.9);background:rgba(94,234,212,.18)}
.pad button.ghost{background:none;border:none;font-size:18px;color:var(--t3)}
.btn{display:block;width:100%;border:none;border-radius:20px;padding:16px;font-size:16px;font-weight:750;color:#04121a;
  background:var(--grad);background-size:200% 100%;animation:flow 7s linear infinite;box-shadow:0 12px 30px -10px rgba(94,234,212,.55);transition:transform .15s var(--sp)}
.btn:active{transform:scale(.96)}.btn[disabled]{opacity:.45}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--t1);animation:none;box-shadow:none;border:1px solid var(--line)}
.err{color:#fda4af;text-align:center;font-size:13.5px;min-height:20px;margin-top:10px}
.tos{border-radius:24px;padding:18px;font-size:14px;line-height:1.6;color:var(--t2);max-height:58vh;overflow-y:auto}
.tos h1{font-size:19px;color:#fff;margin:0 0 10px}.tos h2{font-size:15px;color:var(--a);margin:16px 0 6px}
.check{display:flex;gap:12px;align-items:flex-start;margin:16px 2px;font-size:14px;color:var(--t2)}
.check input{width:22px;height:22px;accent-color:#5eead4;flex-shrink:0;margin-top:1px}
/* ── chat ── */
.top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 10px) 12px 12px;
  background:linear-gradient(180deg,rgba(6,10,28,.95),rgba(6,10,28,.65) 70%,transparent)}
.ib{width:42px;height:42px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:18px;flex-shrink:0;position:relative}
.ib:active{transform:scale(.9)}
.ttl{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
.ttl img{width:34px;height:34px;border-radius:11px}
.ttl b{display:block;font-size:16px}.ttl span{display:block;font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qring{width:42px;height:42px;flex-shrink:0;position:relative;border:none;background:none;padding:0}
.qring svg{width:42px;height:42px;transform:rotate(-90deg)}
.qring em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:800}
.badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#f472b6;color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 4px;box-shadow:0 0 10px #f472b6}
.chat{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.thread{flex:1;min-height:0;overflow-y:auto;padding:calc(var(--safe-t) + 78px) 14px 14px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:88%;animation:min .5s var(--sp) both;font-size:15px;line-height:1.55;word-wrap:break-word}
@keyframes min{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.msg.still{animation:none}
.msg.me{align-self:flex-end;padding:11px 15px;border-radius:22px 22px 6px 22px;background:linear-gradient(135deg,rgba(94,234,212,.28),rgba(56,189,248,.2));border:1px solid rgba(94,234,212,.3)}
.msg.ai{align-self:flex-start}
.msg.ai .who{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--t3);margin-bottom:5px}
.msg.ai .who img{width:20px;height:20px;border-radius:7px}
.msg.ai .body{padding:12px 15px;border-radius:6px 22px 22px 22px}
.msg p{margin:.35em 0}.msg p:first-child{margin-top:0}.msg p:last-child{margin-bottom:0}
.msg ul,.msg ol{margin:.35em 0;padding-left:1.3em}.msg li{margin:.15em 0}
.msg h3,.msg h4{margin:.6em 0 .3em;font-size:1.04em}
.msg code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:rgba(255,255,255,.1);padding:1px 5px;border-radius:6px}
.msg pre{margin:.5em 0;padding:11px 12px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line);overflow-x:auto}
.msg pre code{background:none;padding:0;font-size:12.5px;line-height:1.5}
.msg a{color:var(--a)}
.msg .err{text-align:left}
.typing{display:flex;gap:5px;padding:6px 2px}.typing i{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#5eead4,#f9a8d4);animation:drop 1.1s var(--sp) infinite}
.typing i:nth-child(2){animation-delay:.14s}.typing i:nth-child(3){animation-delay:.28s}
@keyframes drop{40%{transform:translateY(-6px)}}
.state{font-size:12px;color:var(--t3);margin-top:4px}
.acts{display:flex;gap:4px;margin-top:6px}.acts button{border:none;background:rgba(255,255,255,.06);border-radius:10px;padding:5px 9px;font-size:12px;color:var(--t3)}
.composer{padding:8px 10px calc(var(--safe-b) + 10px)}
.comp{display:flex;align-items:flex-end;gap:8px;padding:7px 7px 7px 16px;border-radius:26px}
.comp textarea{flex:1;min-width:0;background:none;border:none;outline:none;resize:none;font-size:16px;line-height:1.4;max-height:140px;padding:8px 0}
.send{width:42px;height:42px;border-radius:50%;border:none;flex-shrink:0;font-size:19px;font-weight:800;color:#04121a;background:var(--grad);background-size:200% 100%;animation:flow 7s linear infinite}
.send.stop{background:#fb7185;animation:none;color:#fff}.send[disabled]{opacity:.4}
.empty{margin:auto;text-align:center;padding:30px 18px}
.empty .t{font-size:22px;font-weight:800;margin-top:14px}.empty .s{color:var(--t3);font-size:14px;margin:6px 0 18px;line-height:1.5}
.sugg{display:grid;gap:8px}.sugg button{text-align:left;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:14px}
.closed{margin:10px 12px 0;padding:14px 16px;border-radius:20px;text-align:center}
.closed b{display:block;font-size:17px;background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 8s linear infinite}
.closed span{display:block;font-size:13px;color:var(--t3);margin-top:3px}
.count{display:flex;gap:8px;justify-content:center;margin-top:10px}.count div{min-width:58px;padding:8px 6px;border-radius:14px;background:rgba(255,255,255,.06)}
.count b{font-size:20px;-webkit-text-fill-color:#fff;color:#fff;animation:none;background:none}.count span{font-size:10px;margin:0}
.announce{margin:0 12px;padding:10px 14px;border-radius:16px;font-size:13px;color:var(--t2)}
.upd{margin:0 12px 6px;padding:10px 14px;border-radius:16px;font-size:13px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(94,234,212,.25),rgba(6,10,28,.8))}
/* ── feuilles ── */
.sheet-bg{position:fixed;inset:0;z-index:40;background:rgba(3,5,15,.6);backdrop-filter:blur(6px);animation:fade .3s both}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:8px;right:8px;bottom:calc(var(--safe-b) + 8px);z-index:41;border-radius:28px;padding:18px;max-height:80vh;overflow:auto;animation:shin .55s var(--sp) both}
@keyframes shin{from{transform:translateY(60%) scaleY(.85);opacity:0}}
.sheet h3{margin:0 0 12px;font-size:18px}
.bar{margin:12px 0}.bar .l{display:flex;justify-content:space-between;font-size:13px;color:var(--t2);margin-bottom:6px}
.bar .t{height:10px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.bar .t i{display:block;height:100%;border-radius:6px;background:var(--grad);background-size:200% 100%;animation:flow 6s linear infinite;transition:width .8s var(--so)}
.bar .r{font-size:11.5px;color:var(--t3);margin-top:5px}
.pill{display:inline-block;padding:5px 10px;border-radius:12px;font-size:12px;margin:4px 4px 0 0;background:rgba(249,168,212,.14);border:1px solid rgba(249,168,212,.3)}
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.gift{border-radius:18px;padding:12px 6px;text-align:center;font-size:12px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.gift .ic{font-size:30px;display:block;margin-bottom:4px}
.gift.new{border-color:rgba(249,168,212,.6);box-shadow:0 0 18px rgba(249,168,212,.35);animation:wig 2.4s ease-in-out infinite}
@keyframes wig{0%,80%,100%{transform:none}85%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
.opt{display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:16px;font-size:15px}
.opt:active{background:rgba(255,255,255,.06)}.opt .s{margin-left:auto;font-size:12px;color:var(--t3)}
.opt.on{background:rgba(94,234,212,.12)}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,340px);z-index:41;border-radius:0 28px 28px 0;padding:calc(var(--safe-t) + 18px) 12px 20px;overflow:auto;animation:din .45s var(--so) both}
@keyframes din{from{transform:translateX(-100%)}}
/* ── cadeau ── */
.gbg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(249,168,212,.25),rgba(3,5,15,.92) 60%);animation:fade .4s both}
.gbox{position:relative;width:170px;height:170px;cursor:pointer;animation:gin .7s var(--sp) both}
@keyframes gin{from{transform:scale(.3) rotate(-20deg);opacity:0}}
.gbox.shake{animation:gshake .6s ease-in-out infinite}
@keyframes gshake{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) scale(1.03)}75%{transform:rotate(7deg) scale(1.03)}}
.gbody{position:absolute;left:15px;right:15px;bottom:0;height:105px;border-radius:14px;background:linear-gradient(135deg,#f472b6,#c084fc);box-shadow:0 20px 50px -10px rgba(244,114,182,.6)}
.glid{position:absolute;left:5px;right:5px;top:38px;height:36px;border-radius:12px;background:linear-gradient(135deg,#f9a8d4,#d8b4fe);transition:transform .7s var(--sp),opacity .7s}
.gribv{position:absolute;left:50%;width:22px;margin-left:-11px;top:38px;bottom:0;background:linear-gradient(#5eead4,#38bdf8)}
.gbow{position:absolute;left:50%;top:6px;width:70px;height:40px;margin-left:-35px}
.gbow:before,.gbow:after{content:"";position:absolute;top:8px;width:32px;height:26px;border-radius:50% 50% 50% 50%;border:8px solid #5eead4}
.gbow:before{left:0;transform:rotate(-20deg)}.gbow:after{right:0;transform:rotate(20deg)}
.gbox.open .glid,.gbox.open .gbow{transform:translateY(-160px) rotate(-35deg);opacity:0}
.gbox.open .gbody{animation:pop .5s var(--sp)}@keyframes pop{50%{transform:scale(1.12)}}
.greveal{text-align:center;margin-top:26px;opacity:0;transform:translateY(20px);transition:all .7s var(--so) .35s;max-width:320px;padding:0 20px}
.greveal.on{opacity:1;transform:none}
.greveal b{display:block;font-size:26px;font-weight:800;background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}
.greveal p{color:var(--t2);font-size:15px;line-height:1.5}
.greveal .note{font-style:italic;color:#fde7f3;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07);margin:12px 0}
.ghint{color:var(--t3);font-size:13px;text-align:center;margin-top:18px}
.confetti{position:fixed;top:45%;left:50%;width:9px;height:14px;border-radius:3px;z-index:61;pointer-events:none;animation:conf 1.6s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes conf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
#toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 90px);transform:translate(-50%,20px);opacity:0;z-index:90;padding:11px 18px;border-radius:18px;
  background:rgba(20,26,56,.95);border:1px solid var(--line);font-size:14px;transition:all .35s var(--sp);pointer-events:none;max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}