/* ==========================================================================
   PEE.CHAT : animations « brand » (agent brand, 11/10/2026)
   1. Logos de fichiers (.pd-fi PDF / ZIP de js/paid.js) aux couleurs PEE.CHAT :
      entree (le document se pose), coin plie, reflet qui passe.
   2. Icones du composeur (cadenas, photo, video, PDF, ZIP, emoji) : entree en
      cascade, vague de lumiere lente (sans mouvement) ; fond leger au survol dans rectif.css.
      Remplace le rebond de css/rectif.css (rcIco).
   3. Zone de depot du composeur Unlock (.pd-drop de js/paid.js) : les 4 types
      de fichiers apparaissent, contour pentagone qui se dessine au survol et au
      glisser, cadre en pointilles qui defile, glisser-deposer branche.
   4. Banniere « Bitcoin wallet generated automatically » (inscription) : le
      texte arrive crypte, le logo part du centre et glisse a droite, puis le
      texte se decrypte lettre par lettre (js/aa-brand.js).
   Tout s'arrete avec prefers-reduced-motion. Charge apres les autres feuilles.
   ========================================================================== */

/* ---------- 1. logos de fichiers : PDF et ZIP identiques (degrade #FF6B35 -> #F7C948, noir),
   seuls le libelle et le pictogramme changent ---------- */
html .pd-fi, html .pd-fi.zip {
    position: relative; overflow: hidden; isolation: isolate;
    color: #0A0A0A; letter-spacing: .04em; border-radius: 8px; border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M2 2h12M2 5h12M2 8h8' stroke='%230A0A0A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 50% 11px / 16px 10px no-repeat, linear-gradient(160deg, #FF6B35, #F7C948);
    box-shadow: 0 4px 14px rgba(255, 107, 53, .3);
    animation: aaFiIn .6s cubic-bezier(.2, .8, .2, 1) both;
}
html .pd-fi.zip { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 1v1.6M5 4.2v1.6M5 7.4v1.2' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='3' y='9.4' width='4' height='3.8' rx='1' fill='%230A0A0A'/%3E%3C/svg%3E") 50% 8px / 10px 14px no-repeat, linear-gradient(160deg, #FF6B35, #F7C948); }
/* coin plie (en haut a droite) : noir + or, le meme sur les deux */
html .pd-fi::before {
    content: ""; position: absolute; top: 0; right: 0; width: 11px; height: 11px; z-index: 1;
    background: linear-gradient(225deg, #0A0A0A 50%, #F7C948 50%);
    border-bottom-left-radius: 3px; pointer-events: none;
}
/* reflet dore, le meme sur les deux */
html .pd-fi::after {
    content: ""; position: absolute; inset: -2px; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(247, 201, 72, .7) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%; background-position: 160% 0;
    animation: aaShine 5.2s ease-in-out .9s infinite;
}
/* petites vignettes (bandeau du composeur) : pas de pictogramme, le carre est trop petit */
html .pd-thb .pd-fi, html .pd-thb .pd-fi.zip { background: linear-gradient(160deg, #FF6B35, #F7C948); box-shadow: none; }
html .pd-thb .pd-fi::before { display: none; }
@keyframes aaFiIn {
    0% { opacity: 0; translate: 0 10px; scale: .7; rotate: -8deg; }
    60% { opacity: 1; translate: 0 -2px; scale: 1.06; rotate: 2deg; }
    100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}
@keyframes aaShine {
    0% { background-position: 160% 0; }
    22%, 100% { background-position: -60% 0; }
}

/* ---------- 1 bis. apercu d'un fichier Unlock : la meme carte que dans les messages prives
   (badge, nom, taille, boutons ; 250 px comme .paid-bubble > .pd-slot) ---------- */
html .pd-postm .pd-f {
    width: 250px !important; max-width: calc(100% - 22px) !important; margin-left: auto; margin-right: auto; box-sizing: border-box;
    box-shadow: 0 0 0 5px #1C1410, 0 0 0 6px rgba(255, 107, 53, .2), 0 14px 34px rgba(0, 0, 0, .45);   /* le cadre de la bulle de MP */
}
/* grille du feed : la meme carte, reduite pour tenir dans la tuile (rien n'est coupe) */
html .f2-grid .f2-pdt .pd-postm .pd-f { max-width: none !important; transform: translate(-50%, -50%) scale(.9); }
@media (max-width: 768px) { html .f2-grid .f2-pdt .pd-postm .pd-f { transform: translate(-50%, -50%) scale(.84); } }
@media (max-width: 520px) { html .f2-grid .f2-pdt .pd-postm .pd-f { transform: translate(-50%, -50%) scale(.72); } }
@media (max-width: 420px) { html .f2-grid .f2-pdt .pd-postm .pd-f { transform: translate(-50%, -50%) scale(.64); } }
@media (max-width: 360px) { html .f2-grid .f2-pdt .pd-postm .pd-f { transform: translate(-50%, -50%) scale(.57); } }
/* composeur Unlock : le fichier choisi s'affiche comme la carte du message */
html .pd-comp .pd-frow {
    flex-direction: column; justify-content: center; text-align: center; gap: 6px;
    width: 250px; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box;
    padding: 10px 8px 8px; border-radius: 12px; border: 0; background: linear-gradient(160deg, #1b1b1b, #111); cursor: default;
}
html .pd-comp .pd-frow .pd-fth { width: auto; height: auto; flex: none; background: none; overflow: visible; border-radius: 0; }
html .pd-comp .pd-frow .pd-fth .pd-fi { width: 38px; height: 44px; padding: 0 0 6px; align-items: flex-end; border-radius: 8px; }
html .pd-comp .pd-frow .pd-fth .pd-fi::before { display: block; }
html .pd-comp .pd-frow .pd-ftx { flex: none; max-width: 100%; text-align: center; }
html .pd-comp .pd-frow .pd-ftx b { font: 700 .86rem Rajdhani, sans-serif; max-width: 210px; margin: 0 auto; }
html .pd-comp .pd-frow .pd-ftx small { font-size: .7rem; color: rgba(255, 255, 255, .5); }
html .pd-comp .pd-frow .pd-fch {
    display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; padding: 7px 18px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(145deg, #252525, #141414); font: 800 .74rem Rajdhani, sans-serif; color: #fff;
}
/* grille Unlock (profil) : la tuile d'un fichier reprend l'en-tete de la carte (badge, nom, taille) */
html .pd-gt.aa-gt-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(160deg, #1b1b1b, #111); }
html .pd-gt.aa-gt-file > .pd-fi { position: static; transform: none; flex: none; }
html .pd-gt.aa-gt-file .aa-gt-f { display: flex; flex-direction: column; align-items: center; max-width: 92%; text-align: center; line-height: 1.15; }
html .pd-gt.aa-gt-file .aa-gt-f b { font: 700 .74rem Rajdhani, sans-serif; color: #fff; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .pd-gt.aa-gt-file .aa-gt-f small { font-size: .6rem; color: rgba(255, 255, 255, .5); white-space: nowrap; }
html .pd-gt.aa-gt-file > .pd-gk { display: none; }
@media (max-width: 480px) { html .pd-gt.aa-gt-file .aa-gt-f small { display: none; } html .pd-gt.aa-gt-file { gap: 4px; } }

/* ---------- 2. icones du composeur ---------- */
html body .compose-tools .compose-tool-btn:is([data-f2i], .f2-att, .pd-ctb),
html body #composeModal .compose-tool-btn:is([data-f2i], .f2-att) {
    position: relative;
    animation: aaToolIn .5s cubic-bezier(.2, .8, .2, 1) both;
}
html body .compose-tools .compose-tool-btn:is([data-f2i], .f2-att, .pd-ctb) > span,
html body #composeModal .compose-tool-btn:is([data-f2i], .f2-att) > span { position: relative; z-index: 1; }
/* vague de lumiere : chaque icone s'eclaire a son tour, sans bouger */
html body .compose-tools .compose-tool-btn :is(.f2-pen, .pd-pen) svg,
html body #composeModal .compose-tool-btn :is(.f2-pen, .pd-pen) svg {
    animation: aaToolGlow 7s ease-in-out 1.4s infinite !important;
    transform: none; transition: transform .25s ease;
}
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(2) { animation-delay: .07s; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(3) { animation-delay: .14s; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(4) { animation-delay: .21s; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(5) { animation-delay: .28s; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(6) { animation-delay: .35s; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(7) { animation-delay: .42s; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(2) :is(.f2-pen, .pd-pen) svg { animation-delay: 1.52s !important; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(3) :is(.f2-pen, .pd-pen) svg { animation-delay: 1.64s !important; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(4) :is(.f2-pen, .pd-pen) svg { animation-delay: 1.76s !important; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(5) :is(.f2-pen, .pd-pen) svg { animation-delay: 1.88s !important; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(6) :is(.f2-pen, .pd-pen) svg { animation-delay: 2s !important; }
html body :is(.compose-tools, #composeModal) .compose-tool-btn:nth-child(7) :is(.f2-pen, .pd-pen) svg { animation-delay: 2.12s !important; }
@keyframes aaToolIn {
    0% { opacity: 0; translate: 0 8px; scale: .6; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes aaToolGlow {
    0%, 9%, 100% { filter: none; }
    4% { filter: brightness(1.35) drop-shadow(0 0 4px rgba(255, 140, 60, .75)); }
}

/* ---------- 3. zone de depot du composeur Unlock ---------- */
html .pd-drop.aa-dz {
    position: relative; isolation: isolate; gap: 8px; padding: 18px 14px 16px; border-radius: 16px;
    border: 1px solid rgba(255, 107, 53, .3);
    background: radial-gradient(110% 120% at 50% 0%, rgba(255, 107, 53, .12), transparent 70%), #0A0A0A;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
    animation: aaDzIn .45s cubic-bezier(.2, .8, .2, 1) both;
}
html .pd-drop.aa-dz:hover, html .pd-drop.aa-dz.aa-dz-over { border-color: transparent; box-shadow: 0 0 0 4px rgba(255, 107, 53, .08), 0 10px 30px rgba(255, 107, 53, .14); }
html .pd-drop.aa-dz.aa-dz-over { background: radial-gradient(110% 140% at 50% 30%, rgba(247, 201, 72, .16), transparent 70%), #0A0A0A; }
/* cadre en pointilles degrades qui defile (survol / glisser) */
html .pd-drop .aa-dz-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: visible; }
html .pd-drop .aa-dz-frame rect { fill: none; stroke: url(#aaDzG); stroke-width: 1.6; stroke-dasharray: 7 6; opacity: 0; transition: opacity .25s ease; }
html .pd-drop:hover .aa-dz-frame rect, html .pd-drop.aa-dz-over .aa-dz-frame rect { opacity: 1; animation: aaDzMarch .9s linear infinite; }
/* badge cadenas : contour pentagone qui se dessine */
html .pd-drop.aa-dz .pd-bdg { position: relative; overflow: visible; animation: aaDzPop .5s cubic-bezier(.3, 1.4, .5, 1) .05s both; }
html .pd-drop .aa-dz-pen { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -37px 0 0 -38px; pointer-events: none; overflow: visible; }
html .pd-drop .aa-dz-pen polygon { fill: none; stroke: url(#aaDzP); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 230; stroke-dashoffset: 230; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); }
html .pd-drop:hover .aa-dz-pen polygon, html .pd-drop.aa-dz-over .aa-dz-pen polygon, html .pd-drop:focus-within .aa-dz-pen polygon { stroke-dashoffset: 0; }
html .pd-drop.aa-dz-over .aa-dz-pen { animation: aaDzPulse 1s ease-in-out infinite; }
/* les 4 types de fichiers */
html .pd-drop .aa-dz-types { display: flex; justify-content: center; gap: 10px; margin: 2px 0 1px; }
html .pd-drop .aa-dz-t { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: aaDzT .45s cubic-bezier(.2, .8, .2, 1) both; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
html .pd-drop .aa-dz-t:nth-child(1) { animation-delay: .18s; } html .pd-drop .aa-dz-t:nth-child(2) { animation-delay: .26s; transition-delay: .04s; }
html .pd-drop .aa-dz-t:nth-child(3) { animation-delay: .34s; transition-delay: .08s; } html .pd-drop .aa-dz-t:nth-child(4) { animation-delay: .42s; transition-delay: .12s; }
html .pd-drop .aa-dz-t i { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #0A0A0A; border: 1px solid rgba(255, 107, 53, .32); }
html .pd-drop .aa-dz-t svg { width: 19px; height: 19px; }
html .pd-drop .aa-dz-t b { font: 800 .5rem/1 Orbitron, sans-serif; letter-spacing: .1em; color: #F7C948; }
html .pd-drop:hover .aa-dz-t, html .pd-drop.aa-dz-over .aa-dz-t { transform: translateY(-3px); }
html .pd-drop.aa-dz-over .aa-dz-t i { border-color: #F7C948; box-shadow: 0 0 12px rgba(247, 201, 72, .35); }
html .pd-drop .aa-dz-hint { display: none; font: 700 .68rem Rajdhani, sans-serif; letter-spacing: .04em; color: #F7C948; }
@media (hover: hover) and (pointer: fine) { html .pd-drop .aa-dz-hint { display: block; } }
@keyframes aaDzIn { 0% { opacity: 0; translate: 0 8px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes aaDzPop { 0% { scale: .5; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@keyframes aaDzT { 0% { opacity: 0; translate: 0 10px; scale: .7; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes aaDzMarch { to { stroke-dashoffset: -26; } }
@keyframes aaDzPulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }

/* ---------- 4. banniere « Bitcoin wallet generated automatically » (decryptage) ---------- */
html #signupForm .crypto-info.aa-wb2 {
    position: relative; overflow: hidden; justify-content: center; text-align: center; gap: .6rem;
    padding: .8rem 1rem; border-radius: 14px;
    background: radial-gradient(120% 160% at 50% 0%, rgba(255, 107, 53, .12), transparent 62%), #0A0A0A;
    border: 1px solid rgba(247, 201, 72, .26);
}
html #signupForm .aa-wb2 .aa-wb-txt { display: inline-flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; min-width: 0; font: 700 .98rem/1.25 var(--font-sub, 'Rajdhani', sans-serif); color: #F7C948; }
html #signupForm .aa-wb2 .aa-wb-txt i { display: inline-block; font-style: normal; text-align: center; overflow: visible;
    background: linear-gradient(90deg, #FF6B35, #F7C948) no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html #signupForm .aa-wb2 .aa-wb-txt i.x { background: none; -webkit-text-fill-color: #FF6B35; color: #FF6B35; opacity: .85; font-family: 'Orbitron', monospace; font-size: .6em; font-weight: 700; overflow: hidden; }
html #signupForm .aa-wb2 .aa-wb-txt i.sp { width: .28em; }
html #signupForm .aa-wb2 .aa-wb-pen { position: relative; flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; will-change: transform; }
html #signupForm .aa-wb2 .aa-wb-pen svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html #signupForm .aa-wb2 .aa-wb-pen .aa-wb-fill { fill: #FF6B35; fill-opacity: .1; }
html #signupForm .aa-wb2 .aa-wb-pen .aa-wb-line { fill: none; stroke: url(#aaWbG); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 114; }
html #signupForm .aa-wb2 .btc-cyber { position: relative; z-index: 1; font-size: 18px !important; margin-top: 3px; animation: none !important; }
html #signupForm .aa-wb2 .aa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) {
    html #signupForm .crypto-info.aa-wb2 { padding: .72rem .6rem; gap: .45rem; }
    html #signupForm .aa-wb2 .aa-wb-txt { font-size: clamp(.78rem, 3.7vw, .98rem); }
    html #signupForm .aa-wb2 .aa-wb-pen { flex-basis: 32px; width: 32px; height: 32px; }
}

/* ---------- mouvement reduit : tout est fige, rien ne disparait ---------- */
@media (prefers-reduced-motion: reduce) {
    html .pd-fi, html .pd-fi::after,
    html body .compose-tools .compose-tool-btn, html body #composeModal .compose-tool-btn,
    html body .compose-tools .compose-tool-btn svg, html body #composeModal .compose-tool-btn svg,
    html .pd-drop.aa-dz, html .pd-drop.aa-dz *, html .pd-drop .aa-dz-frame rect { animation: none !important; transition: none !important; }
    html .pd-drop .aa-dz-pen polygon { stroke-dashoffset: 0; }
}