/* ═══ SILEX EMBER — widget v4 : éclat de silex CSS 3D + braises ═══ Zéro image, zéro dépendance. ~7 KB CSS+JS. */ :root { --sx-orange:#f7931a; --sx-orange-lo:#a2560a; --sx-orange-hi:#ffd08a; --sx-bg:#0d0f11; --sx-bg-2:#141619; --sx-line:#1e2126; --sx-text:#f7f8f8; --sx-dim:#8a8f98; --sx-orb:72px; --sx-gap:max(1.25rem, env(safe-area-inset-bottom)); } /* NOTE : le style du global est défini dans style.css. Ne PAS réappliquer de background/display/color ici — ça écrasait le fond (bloquait les animations d'arrière-plan) et cassait le layout (display:grid; place-items:center sur le body désalignait tout). */ /* ═══ 1. LANCEUR : l'éclat de silex ═══ */ .sx-launcher { position:fixed; right:var(--sx-gap); bottom:var(--sx-gap); width:var(--sx-orb); height:var(--sx-orb); z-index:1000; border:0; padding:0; background:none; cursor:pointer; perspective:420px; -webkit-tap-highlight-color:transparent; animation:sxFloat 5s ease-in-out infinite; transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .sx-launcher:hover { transform:scale(1.08); } .sx-launcher:active { transform:scale(.94); } .sx-launcher:focus-visible { outline:2px solid var(--sx-orange); outline-offset:6px; border-radius:50%; } @keyframes sxFloat { 0%,100%{translate:0 0;} 50%{translate:0 -6px;} } .sx-halo { position:absolute; inset:-30%; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(247,147,26,.34) 0%, rgba(247,147,26,.08) 45%, transparent 70%); animation:sxHalo 3.2s ease-in-out infinite; } @keyframes sxHalo { 0%,100%{transform:scale(.9);opacity:.55;} 50%{transform:scale(1.15);opacity:.95;} } /* Trou noir : disque + anneau de photons */ .sx-disk { position:absolute; inset:17%; border-radius:50%; background:radial-gradient(circle at 50% 50%, #000 0%, #000 66%, #ffb347 81%, #f7931a 85%, #000 91%, #000 100%); box-shadow:0 0 16px 2px rgba(247,147,26,.4), 0 0 34px 8px rgba(247,147,26,.15); } .sx-ring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(247,147,26,.42) 0deg, rgba(255,200,120,.95) 70deg, rgba(247,147,26,.5) 150deg, rgba(247,147,26,.3) 230deg, rgba(255,180,90,.75) 310deg, rgba(247,147,26,.42) 360deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5px)); animation:sxRingSpin 6s linear infinite; will-change:transform; } @keyframes sxRingSpin { to { transform:rotate(360deg); } } .sx-launcher:hover .sx-ring { animation-duration:1.6s; } /* keyframes sxCore conservé : utilisé par .sx-tool i (indicateur de frappe) */ @keyframes sxCore { 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:1;transform:scale(1.35);} } .sx-embers { position:absolute; inset:0; pointer-events:none; } .sx-ember { position:absolute; left:50%; bottom:26%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--sx-orange-hi); box-shadow:0 0 6px var(--sx-orange); opacity:0; animation:sxEmber var(--dur) ease-out var(--delay) infinite; } @keyframes sxEmber { 0% { opacity:0; transform:translate(0,0) scale(.5); } 12% { opacity:.95; } 100% { opacity:0; transform:translate(var(--dx), -54px) scale(.15); } } .sx-strike { position:absolute; inset:0; border-radius:50%; border:2px solid var(--sx-orange-hi); opacity:0; pointer-events:none; } .sx-launcher.is-striking .sx-strike { animation:sxRing .7s cubic-bezier(.2,.7,.3,1); } .sx-launcher.is-striking .sx-disk { animation:sxFlash .7s ease-out; } @keyframes sxRing { 0%{opacity:.9;transform:scale(.6);} 100%{opacity:0;transform:scale(2.1);} } @keyframes sxFlash { 0%{opacity:1;transform:scale(2.2);filter:brightness(2.4);} 100%{opacity:.55;transform:scale(1);} } .sx-badge { position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#ff4d4f; color:#fff; font-size:.6875rem; font-weight:700; line-height:20px; box-shadow:0 2px 8px rgba(0,0,0,.5); transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .sx-badge.on { transform:scale(1); } .sx-teaser { position:fixed; z-index:1000; cursor:pointer; max-width:15rem; right:calc(var(--sx-gap) + var(--sx-orb) + .625rem); bottom:calc(var(--sx-gap) + 18px); padding:.5rem .8125rem; background:var(--sx-bg-2); border:1px solid var(--sx-line); border-radius:14px 14px 2px 14px; color:#d0d6e0; font-size:.8125rem; line-height:1.4; box-shadow:0 8px 28px rgba(0,0,0,.55); opacity:0; transform:translateX(10px) scale(.94); pointer-events:none; transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); } .sx-teaser.on { opacity:1; transform:none; pointer-events:auto; } /* ═══ 2. PANNEAU ═══ */ .sx-scrim { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .28s ease; } .sx-scrim.on { opacity:1; pointer-events:auto; } .sx-panel { position:fixed; z-index:1001; right:var(--sx-gap); bottom:calc(var(--sx-gap) + var(--sx-orb) + .75rem); width:370px; max-width:calc(100vw - 2 * var(--sx-gap)); height:520px; max-height:calc(100dvh - var(--sx-orb) - 5rem); display:flex; flex-direction:column; overflow:hidden; background:rgba(13,15,17,.92); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--sx-line); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(247,147,26,.07) inset; transform-origin:calc(100% - var(--sx-orb) / 2) 100%; opacity:0; transform:scale(.5) translateY(24px); pointer-events:none; transition:opacity .22s ease, transform .34s cubic-bezier(.34,1.4,.5,1); } .sx-panel.on { opacity:1; transform:none; pointer-events:auto; } .sx-head { display:flex; align-items:center; gap:.625rem; padding:.75rem .875rem; flex-shrink:0; border-bottom:1px solid var(--sx-line); background:linear-gradient(180deg, rgba(247,147,26,.09), transparent); } .sx-head-gem { width:32px; height:32px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(155deg, var(--sx-orange-hi), var(--sx-orange) 45%, var(--sx-orange-lo)); color:#2a1500; font-size:.9rem; box-shadow:0 0 14px rgba(247,147,26,.35); } .sx-head-txt { flex:1; min-width:0; } .sx-head-txt b { display:block; font-size:.8125rem; color:var(--sx-text); } .sx-head-txt span { font-size:.6875rem; color:var(--sx-dim); display:flex; align-items:center; gap:.3rem; } .sx-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px #22c55e; } .sx-x { width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--sx-dim); cursor:pointer; font-size:1rem; transition:background .15s, color .15s; } .sx-x:hover { background:var(--sx-line); color:var(--sx-text); } .sx-log { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:.875rem; display:flex; flex-direction:column; gap:.5rem; scrollbar-width:thin; scrollbar-color:#2a2d33 transparent; } .sx-log::-webkit-scrollbar { width:4px; } .sx-log::-webkit-scrollbar-thumb { background:#2a2d33; border-radius:2px; } .sx-msg { max-width:84%; padding:.5625rem .75rem; border-radius:14px; font-size:.8125rem; line-height:1.5; word-break:break-word; animation:sxIn .26s cubic-bezier(.34,1.4,.5,1); } @keyframes sxIn { from{opacity:0;transform:translateY(8px) scale(.96);} to{opacity:1;transform:none;} } .sx-msg.bot { align-self:flex-start; background:#17191c; color:#d0d6e0; border-bottom-left-radius:4px; } .sx-msg.me { align-self:flex-end; border-bottom-right-radius:4px; font-weight:500; color:#2a1500; background:linear-gradient(135deg, var(--sx-orange-hi), var(--sx-orange)); } .sx-msg.streaming::after { content:''; display:inline-block; width:2px; height:1em; margin-left:2px; background:var(--sx-orange); vertical-align:text-bottom; animation:sxCaret .9s steps(2) infinite; } @keyframes sxCaret { 50%{opacity:0;} } .sx-tool { align-self:flex-start; display:flex; align-items:center; gap:.4rem; font-size:.6875rem; color:var(--sx-dim); padding:.125rem .25rem; } .sx-tool i { width:5px; height:5px; border-radius:50%; background:var(--sx-orange); animation:sxCore 1s ease-in-out infinite; } .sx-chips { display:flex; flex-wrap:wrap; gap:.375rem; padding:0 .875rem .5rem; flex-shrink:0; } .sx-chip { border:1px solid var(--sx-line); background:#15171a; color:#b9c0cb; border-radius:999px; padding:.3125rem .6875rem; font-size:.75rem; cursor:pointer; font-family:inherit; white-space:nowrap; transition:border-color .15s, color .15s, transform .15s; } .sx-chip:hover { border-color:var(--sx-orange); color:var(--sx-orange-hi); transform:translateY(-1px); } .sx-bar { display:flex; align-items:center; gap:.5rem; flex-shrink:0; padding:.625rem .75rem calc(.625rem + env(safe-area-inset-bottom) / 3); border-top:1px solid var(--sx-line); background:rgba(17,19,22,.9); } .sx-in { flex:1; min-width:0; background:#1a1c20; border:1px solid #2a2d33; border-radius:18px; padding:.5rem .8125rem; color:var(--sx-text); font-size:16px; font-family:inherit; outline:none; appearance:none; transition:border-color .15s; } .sx-in:focus { border-color:var(--sx-orange); } .sx-in::placeholder { color:#5a5f6a; } .sx-go { width:34px; height:34px; flex-shrink:0; border:0; border-radius:50%; background:linear-gradient(135deg, var(--sx-orange-hi), var(--sx-orange)); color:#2a1500; cursor:pointer; display:grid; place-items:center; transition:opacity .15s, transform .15s; } .sx-go:disabled { opacity:.3; cursor:default; } .sx-go:not(:disabled):active { transform:scale(.9); } .sx-go svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* ── Mobile : full-screen drawer ─────────────────────── */ @media (max-width: 520px) { :root { --sx-orb: 56px; --sx-gap: max(.875rem, env(safe-area-inset-bottom, .875rem)); } .sx-launcher { right: var(--sx-gap); bottom: calc(var(--sx-gap) + .25rem); } .sx-teaser { max-width: 12rem; font-size: .75rem; right: calc(var(--sx-gap) + var(--sx-orb) + .5rem); bottom: calc(var(--sx-gap) + 12px); padding: .4375rem .6875rem; border-radius: 12px 12px 2px 12px; } .sx-panel { right: 0; left: 0; bottom: 0; width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 16px 16px 0 0; border-bottom: 0; transform-origin: 50% 100%; } .sx-head { padding: .625rem .75rem; border-radius: 16px 16px 0 0; } .sx-head-gem { width: 28px; height: 28px; border-radius: 7px; } .sx-head-txt b { font-size: .78125rem; } .sx-x { width: 36px; height: 36px; font-size: 1.125rem; } .sx-log { padding: .75rem; } .sx-bar { padding: .5rem .625rem calc(.5rem + env(safe-area-inset-bottom, 0px)); } .sx-in { font-size: 16px; } /* prevents iOS zoom on focus */ .sx-go { width: 38px; height: 38px; } .sx-go svg { width: 18px; height: 18px; } .sx-chips { padding: 0 .625rem .375rem; } .sx-chip { font-size: .6875rem; padding: .25rem .5625rem; } } @media (prefers-reduced-motion: reduce) { .sx-launcher,.sx-halo,.sx-disk,.sx-ring,.sx-ember,.sx-msg,.sx-strike { animation:none !important; } .sx-panel,.sx-teaser,.sx-launcher { transition-duration:.01ms !important; } .sx-ember { opacity:0; } }