/* Paket 99 (20.10.2026) – Ori-Button unten rechts verschönert (Aykut: „Bitte auch den Ori Button unten rechts verschönern“).
   Glas-Pille mit leuchtendem Ori-Portal, zweite Zeile „Fragen Sie mich“, Online-Punkt am Portal. Hell, dunkel, Halloween, Handy.
   Nur CSS – Markup und Skripte bleiben, CSP unverändert. html.a2-still / reduced-motion = keine Bewegung. */
@keyframes fab99glow{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.45),inset 0 0 0 1px rgba(255,255,255,.35)}50%{box-shadow:0 0 0 7px rgba(37,99,235,0),inset 0 0 0 1px rgba(255,255,255,.35)}}
@keyframes fab99in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media(min-width:621px){
  .asst-fab{--fab-bg:rgba(255,255,255,.78);--fab-line:rgba(11,19,32,.10);--fab-tx:#0B1320;--fab-sub:#5B6576;--fab-ring:#2563EB;--fab-ring2:#60A5FA;
    position:relative;gap:12px;min-height:60px;padding:0 20px 0 76px!important;border-radius:999px;background:var(--fab-bg)!important;color:var(--fab-tx);
    border:1px solid var(--fab-line);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:0 18px 40px -18px rgba(11,19,32,.45),0 2px 6px rgba(11,19,32,.08),inset 0 1px 0 rgba(255,255,255,.7);
    animation:fab99in .6s cubic-bezier(.2,.8,.2,1) both;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,background .3s ease}
  :root[data-theme=dark] .asst-fab{--fab-bg:rgba(16,22,38,.78);--fab-line:rgba(255,255,255,.12);--fab-tx:#F2F5FA;--fab-sub:#9AA5B5;
    box-shadow:0 20px 44px -16px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.08)}
  .asst-fab:hover{transform:translateY(-3px);box-shadow:0 26px 50px -18px rgba(37,99,235,.55),0 2px 8px rgba(11,19,32,.1),inset 0 1px 0 rgba(255,255,255,.7)}
  .asst-fab:focus-visible{outline:3px solid var(--fab-ring2);outline-offset:3px}
  /* Portal: leuchtender Kreis, Ori steht darin und schaut oben heraus */
  .asst-fab-ic{position:absolute!important;left:8px;top:50%;width:52px!important;height:52px!important;translate:0 -50%;border-radius:50%;
    background:radial-gradient(circle at 50% 30%,#7DB0FF 0%,#2563EB 52%,#1238A8 100%);animation:fab99glow 3.2s ease-in-out infinite;
    clip-path:inset(-46px -12px 0 -12px round 0 0 26px 26px)}
  .asst-fab-ic::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.35),transparent 60%);pointer-events:none}
  .asst-fab-ori{height:70px!important;bottom:-10px!important;filter:drop-shadow(0 6px 8px rgba(5,14,40,.45))}
  .asst-fab-tx{display:flex;flex-direction:column;line-height:1.05;font-size:1rem;letter-spacing:-.01em}
  .asst-fab-tx::after{content:"Fragen Sie mich";font:500 12px/1.2 InterVar,Inter,system-ui,sans-serif;letter-spacing:0;color:var(--fab-sub);margin-top:3px}
  html[lang^=en] .asst-fab-tx::after{content:"Ask me anything"}
  .asst-dot{position:absolute!important;left:50px;top:8px;width:11px;height:11px;margin:0;box-shadow:0 0 0 2.5px var(--fab-bg-solid,#fff),0 0 10px rgba(52,211,153,.8)}
  :root[data-theme=dark] .asst-dot{box-shadow:0 0 0 2.5px #101626,0 0 10px rgba(52,211,153,.8)}
  .asst-fab::after{content:"";width:22px;height:22px;margin-left:2px;border-radius:50%;flex:none;
    background:var(--fab-ring) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat;
    transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .asst-fab:hover::after{transform:translateX(3px)}
}
/* Handy: Ori steht frei, bekommt eine leuchtende Plattform und ein Glas-Schild „Ori“ */
@media(max-width:620px){
  .asst-fab-ic::before{content:"";position:absolute;left:50%;bottom:-2px;width:64px;height:16px;translate:-50% 0;border-radius:50%;
    background:radial-gradient(closest-side,rgba(37,99,235,.55),rgba(37,99,235,0));filter:blur(1px);animation:fab99glow 3.2s ease-in-out infinite;z-index:-1}
  .asst-fab::after{content:"Ori";position:absolute;left:50%;bottom:-8px;translate:-50% 0;padding:3px 10px;border-radius:999px;font:600 11px/1.2 "Space Grotesk",system-ui,sans-serif;
    color:#fff;background:linear-gradient(135deg,#2563EB,#4F46E5);box-shadow:0 6px 14px -6px rgba(37,99,235,.8),inset 0 1px 0 rgba(255,255,255,.3)}
}
/* Halloween: Portal und Akzente in Orange/Violett, Cobalt bleibt am Pfeil */
@media(min-width:621px){:root[data-mood=halloween] .asst-fab-ic{background:radial-gradient(circle at 50% 30%,#FDBA74 0%,#F97316 48%,#7C2D12 100%)}}
:root[data-mood=halloween] .asst-fab{--fab-ring2:#FB923C}
:root[data-mood=halloween][data-theme=dark] .asst-fab{--fab-bg:rgba(24,16,44,.8);--fab-line:rgba(249,115,22,.28)}
:root[data-mood=halloween] .asst-fab:hover{box-shadow:0 26px 50px -18px rgba(249,115,22,.55),0 2px 8px rgba(11,19,32,.1)}
@media(max-width:620px){:root[data-mood=halloween] .asst-fab-ic::before{background:radial-gradient(closest-side,rgba(249,115,22,.6),rgba(249,115,22,0))}
  :root[data-mood=halloween] .asst-fab::after{background:linear-gradient(135deg,#F97316,#7C3AED)}}
html.a2-still .asst-fab,html.a2-still .asst-fab-ic,html.a2-still .asst-fab-ic::before{animation:none!important}
@media(prefers-reduced-motion:reduce){.asst-fab,.asst-fab-ic,.asst-fab-ic::before{animation:none!important}.asst-fab,.asst-fab::after{transition:none}}