/* Shared "What app do you want to build today?" prompt box (glow, rim, input, chips).
   Used by /ai-framework/ and /ai/ (New). Markup: <div class="ai-gem rb-four-squares"><form class="gem">...</form></div> + <div class="ai-chips">. */
.ai-gem,.ai-gem *,.ai-gem *::before,.ai-gem *::after{box-sizing:border-box}
.ai-gem form{margin:0}
.ai-gem button{font:inherit;color:inherit}
.rb-four-squares .gem{position:relative;width:min(92%,470px)}
.rb-four-squares .gem .gbw{position:absolute;inset:-34px -44px;pointer-events:none}
.rb-four-squares .gem .gb{position:absolute;inset:0;filter:blur(34px);opacity:.95}
.rb-four-squares .gem .gb i{position:absolute;border-radius:50%;display:block}
.rb-four-squares .gem .gA{animation:rb-four-squares-gfa 9s ease-in-out infinite alternate}
.rb-four-squares .gem .gB{animation:rb-four-squares-gfb 9s ease-in-out infinite alternate}
.rb-four-squares .gem .gA .b1{left:0;top:-10%;width:42%;height:130%;background:radial-gradient(closest-side,#3f86ff 25%,transparent);animation:rb-four-squares-gm1 11s ease-in-out infinite alternate}
.rb-four-squares .gem .gA .b2{left:25%;top:-35%;width:42%;height:150%;background:radial-gradient(closest-side,#8f5cff 25%,transparent);animation:rb-four-squares-gm2 13s ease-in-out infinite alternate}
.rb-four-squares .gem .gA .b3{left:52%;top:-5%;width:40%;height:130%;background:radial-gradient(closest-side,#ff4f9a 25%,transparent);animation:rb-four-squares-gm3 12s ease-in-out infinite alternate}
.rb-four-squares .gem .gA .b4{left:68%;top:-30%;width:34%;height:150%;background:radial-gradient(closest-side,#21d4c4 25%,transparent);animation:rb-four-squares-gm4 14s ease-in-out infinite alternate}
.rb-four-squares .gem .gB .b1{left:0;top:-30%;width:42%;height:150%;background:radial-gradient(closest-side,#21d4c4 25%,transparent);animation:rb-four-squares-gm3 12s ease-in-out infinite alternate}
.rb-four-squares .gem .gB .b2{left:24%;top:-5%;width:42%;height:130%;background:radial-gradient(closest-side,#ff4f9a 25%,transparent);animation:rb-four-squares-gm1 10s ease-in-out infinite alternate}
.rb-four-squares .gem .gB .b3{left:50%;top:-35%;width:42%;height:150%;background:radial-gradient(closest-side,#3f86ff 25%,transparent);animation:rb-four-squares-gm4 13s ease-in-out infinite alternate}
.rb-four-squares .gem .gB .b4{left:68%;top:-10%;width:34%;height:130%;background:radial-gradient(closest-side,#a56bff 25%,transparent);animation:rb-four-squares-gm2 11s ease-in-out infinite alternate}
.rb-four-squares .gem .rim{position:absolute;inset:-1.5px;border-radius:999px;background:linear-gradient(90deg,#3f86ff,#8f5cff,#ff4f9a,#21d4c4,#3f86ff,#8f5cff);background-size:300% 100%;animation:rb-four-squares-grim 8s linear infinite;opacity:.9}
.rb-four-squares .gem .inp{position:relative;height:64px;border-radius:999px;background:linear-gradient(#10111a,#0b0c13);display:flex;align-items:center;gap:12px;padding:0 10px 0 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.rb-four-squares .gem .pl,.rb-four-squares .gem .sd{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;border:0;padding:0}
.rb-four-squares .gem .pl{background:rgba(255,255,255,.07);color:#d8dcf0}
.rb-four-squares .gem .sd{background:linear-gradient(135deg,#4c8dff,#a56bff 55%,#ff5fa2);color:#fff;box-shadow:0 4px 18px rgba(130,100,255,.5);cursor:pointer}
.rb-four-squares .gem input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#eef0ff;font:inherit;font-size:17px}
.rb-four-squares .gem input::placeholder{color:rgba(230,234,255,.62)}
.rb-four-squares .gem .mic{color:#aab0cc;display:grid;place-items:center;width:30px;flex:none}
@media(prefers-reduced-motion:reduce){
.rb-four-squares .gem .gb,.rb-four-squares .gem .gb i,.rb-four-squares .gem .rim{animation-duration:30s}
}
@media(max-width:699px){
.rb-four-squares .gem{width:100%!important}
.rb-four-squares .gem .inp{height:54px;gap:8px;padding:0 7px 0 8px}
.rb-four-squares .gem .pl,.rb-four-squares .gem .sd{width:38px;height:38px}
.rb-four-squares .gem .mic{display:none}
.rb-four-squares .gem input{font-size:16px}
}
@keyframes rb-four-squares-gfa{0%{opacity:1}100%{opacity:.15}}
@keyframes rb-four-squares-gfb{0%{opacity:.15}100%{opacity:1}}
@keyframes rb-four-squares-gm1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,18px) scale(1.15)}}
@keyframes rb-four-squares-gm2{0%{transform:translate(20px,10px) scale(1.1)}100%{transform:translate(-30px,-14px) scale(.9)}}
@keyframes rb-four-squares-gm3{0%{transform:translate(0,12px) scale(.95)}100%{transform:translate(-44px,-10px) scale(1.2)}}
@keyframes rb-four-squares-gm4{0%{transform:translate(-10px,0) scale(1.05)}100%{transform:translate(30px,16px) scale(.9)}}
@keyframes rb-four-squares-grim{0%{background-position:0 0}100%{background-position:-300% 0}}
.ai-gem.rb-four-squares{background:none!important;min-height:0!important;display:block!important;overflow:visible!important;margin:64px auto 0!important;max-width:820px;font-family:inherit}
.ai-gem.rb-four-squares .gem{width:100%;margin:0 auto}
.ai-gem.rb-four-squares .gem .gbw{inset:-60px -80px}
.ai-gem.rb-four-squares .gem .gb{filter:blur(48px)}
.ai-gem.rb-four-squares .gem .inp{height:78px;padding:0 12px 0 14px;gap:14px}
.ai-gem.rb-four-squares .gem .pl,.ai-gem.rb-four-squares .gem .sd{width:52px;height:52px}
.ai-gem.rb-four-squares .gem input{font-size:20px}
.ai-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:34px;position:relative}
.ai-chips button{font:inherit;font-size:14px;color:rgba(235,238,255,.88);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:8px 14px;border-radius:999px;display:flex;gap:7px;align-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.ai-chips button:hover{border-color:rgba(160,180,255,.55);background:rgba(255,255,255,.08)}
.ai-chips svg{color:#9fb4ff}
@media(max-width:640px){.ai-gem.rb-four-squares .gem .inp{height:58px}.ai-gem.rb-four-squares .gem .pl,.ai-gem.rb-four-squares .gem .sd{width:40px;height:40px}.ai-gem.rb-four-squares .gem input{font-size:16px}.ai-gem.rb-four-squares .gem .mic{display:none}}