/* bar-fx.css : hover and press effects for the top bar Connect pill and icon buttons (beta) */
.vibe-bar #connect-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .18s ease,box-shadow .22s ease,filter .18s ease}
.vibe-bar #connect-btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.38) 50%,transparent 75%);transform:translateX(-120%);transition:transform .65s ease}
.vibe-bar #connect-btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 6px 22px color-mix(in srgb,var(--mint,#14f195) 38%,transparent),0 0 0 1px color-mix(in srgb,var(--purple,#9945ff) 55%,transparent),0 0 26px color-mix(in srgb,var(--purple,#9945ff) 35%,transparent)}
.vibe-bar #connect-btn:hover::after{transform:translateX(120%)}
.vibe-bar #connect-btn:active{transform:scale(.97);box-shadow:inset 0 2px 8px #0007,0 0 0 1px color-mix(in srgb,var(--mint,#14f195) 45%,transparent)}
.vibe-bar .nav-right .icon-btn{transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.vibe-bar .nav-right .icon-btn img,.vibe-bar .nav-right .icon-btn svg{transition:filter .2s ease,transform .3s ease}
.vibe-bar .nav-right .icon-btn:hover{border-color:color-mix(in srgb,var(--mint,#14f195) 70%,transparent);background-color:color-mix(in srgb,var(--purple,#9945ff) 14%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--mint,#14f195) 28%,transparent),0 0 18px color-mix(in srgb,var(--purple,#9945ff) 40%,transparent)}
.vibe-bar .nav-right .icon-btn:hover img,.vibe-bar .nav-right .icon-btn:hover svg{filter:brightness(1.3) drop-shadow(0 0 4px color-mix(in srgb,var(--mint,#14f195) 60%,transparent))}
.vibe-bar #opts-btn:hover svg,.vibe-bar #opts-btn:hover img{transform:rotate(45deg)}
.vibe-bar #board-btn:hover img{animation:vfx-wiggle .5s ease}
.vibe-bar .nav-right .icon-btn:active{transform:scale(.92)}
.vibe-bar #connect-btn:focus-visible,.vibe-bar .nav-right .icon-btn:focus-visible{outline:2px solid var(--mint,#14f195);outline-offset:3px;box-shadow:0 0 0 5px color-mix(in srgb,var(--purple,#9945ff) 35%,transparent)}
@keyframes vfx-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.vibe-bar #connect-btn,.vibe-bar #connect-btn::after,.vibe-bar .nav-right .icon-btn,.vibe-bar .nav-right .icon-btn img,.vibe-bar .nav-right .icon-btn svg{transition:none!important;animation:none!important}.vibe-bar #connect-btn:hover,.vibe-bar #connect-btn:active,.vibe-bar .nav-right .icon-btn:active,.vibe-bar #opts-btn:hover svg,.vibe-bar #opts-btn:hover img{transform:none}.vibe-bar #connect-btn::after{display:none}}
/* shorter top bar search (desktop and mid widths only; phones unchanged) */
@media (min-width:768px){
.vibe-bar .find-search-wrap{flex:0 1 420px;max-width:420px;transition:max-width .28s ease,flex-basis .28s ease,border-color .2s ease}
.vibe-bar .find-search-wrap:focus-within{flex-basis:520px;max-width:520px}
}
@media (min-width:768px) and (max-width:1279px){
.vibe-bar .find-search-wrap{flex-basis:360px;max-width:360px}
.vibe-bar .find-search-wrap:focus-within{flex-basis:520px;max-width:520px}
}
@media (prefers-reduced-motion:reduce){.vibe-bar .find-search-wrap{transition:none!important}}

/* larger top bar search (beta). Overrides the 200px cap that shell.js injects. Below 1280px the bar keeps its current layout */
@media (min-width:1280px){
html body #vibe-bar .find-bar .find-search-wrap{flex:0 0 380px;min-width:0;max-width:none;height:44px;padding:0 12px 0 16px;gap:10px}
html body #vibe-bar .find-bar .find-search-wrap input{height:42px;font-size:16px}
html body #vibe-bar .find-bar .find-search-wrap svg{width:18px;height:18px}
html body #vibe-bar .find-bar .tt-bar{flex:0 1 auto;min-width:0;overflow:hidden}
html body #vibe-bar .find-bar .find-track{flex:0 1 auto;min-width:0;overflow:hidden}
}
@media (min-width:1600px){
html body #vibe-bar .find-bar .find-search-wrap{flex-basis:440px}
}