/* v664 — Avatar filter authority + non-selectable visual preview surfaces */

/* Preview surfaces stay interactive but never behave like selectable documents. */
#avatarStage,
#avatarRoom,
.gg-familiar-preview,
.gg-familiar-builder-preview,
.gg-salon-scene,
.gg-salon-user-v230,
#ggSalonClientV230 {
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}
#avatarStage *,
#avatarRoom *,
.gg-familiar-preview *,
.gg-familiar-builder-preview *,
.gg-salon-scene *,
.gg-salon-user-v230 *,
#ggSalonClientV230 * {
  -webkit-user-select:none !important;
  user-select:none !important;
}
#avatarStage img,
#avatarRoom img,
.gg-familiar-preview img,
.gg-familiar-builder-preview img,
.gg-salon-scene img,
.gg-salon-user-v230 img,
#ggSalonClientV230 img {
  -webkit-user-drag:none !important;
  user-drag:none !important;
}

/* Filter bar lives in normal flow inside the option drawer, never over the preview. */
.gg-scroll-filter-tabs-v664{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  margin:9px 0 7px;
  padding:5px;
  box-sizing:border-box;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gg-scroll-filter-tabs-v664::-webkit-scrollbar{display:none}
.gg-scroll-filter-tabs-v664 button{
  flex:1 0 auto;
  min-width:92px;
  min-height:38px;
  border:1.5px solid rgba(92,99,109,.7);
  border-radius:12px;
  background:linear-gradient(180deg,#f7f9fc 0%,#d4d9e1 55%,#b8c0cb 100%);
  color:#17171a;
  font:800 14px/1.1 inherit;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(0,0,0,.12);
  touch-action:manipulation;
}
.gg-scroll-filter-tabs-v664 button.active{
  background:linear-gradient(180deg,#f6dc7b 0%,#e3b943 58%,#c59122 100%);
  border-color:#8b641b;
  color:#111;
  box-shadow:inset 0 2px 5px rgba(104,67,8,.18),0 2px 7px rgba(0,0,0,.14);
}

/* Locked progression options use their real art as a silhouette. */
#optionLoop .gg-avatar-option-v664.is-locked{
  position:relative !important;
  cursor:not-allowed;
}
#optionLoop .gg-avatar-option-v664.is-locked .gg-option-art-v664{
  filter:brightness(0) saturate(0) !important;
  opacity:.72 !important;
}
#optionLoop .gg-option-art-v664{
  display:grid;
  place-items:center;
  width:100%;
  min-height:36px;
}
#optionLoop .gg-option-art-v664 > svg{
  width:34px;
  height:34px;
}
#optionLoop .gg-unlock-badge-v664{
  position:absolute;
  left:50%;
  bottom:5px;
  z-index:8;
  transform:translateX(-50%);
  max-width:calc(100% - 10px);
  padding:3px 7px;
  border-radius:999px;
  background:rgba(15,15,18,.9);
  color:#f4d46a !important;
  font-size:10px;
  line-height:1;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 2px 5px rgba(0,0,0,.28);
  pointer-events:none;
}
#optionLoop .gg-avatar-option-v664.is-locked > span:not(.gg-option-art-v664){
  opacity:.7;
}

/* v667 — filter mode rail belongs directly ABOVE the VISIBLE compact Avatar Studio selector. */
#ggScrollFilterTabsV664.gg-scroll-filter-tabs-v664{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  z-index:3!important;
  display:flex!important;
  align-items:stretch!important;
  gap:8px!important;
  width:calc(100% - 28px)!important;
  margin:12px 14px -3px!important;
  padding:6px 7px 8px!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border:1.5px solid rgba(112,119,128,.68)!important;
  border-bottom-color:rgba(112,119,128,.36)!important;
  border-radius:18px 18px 9px 9px!important;
  background:linear-gradient(180deg,rgba(247,249,252,.97),rgba(211,216,224,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(0,0,0,.10)!important;
  scrollbar-width:none;
}
#ggScrollFilterTabsV664.gg-scroll-filter-tabs-v664::-webkit-scrollbar{display:none!important}
/* Pull the visible compact selector into the rail so both read as one control box. */
#ggScrollFilterTabsV664.gg-scroll-filter-tabs-v664 + #ggV515CategoryShell{
  margin-top:0!important;
}
#ggScrollFilterTabsV664.gg-scroll-filter-tabs-v664 + #ggV515CategoryShell > #ggV515PrimaryNav{
  margin-top:0!important;
  border-top-left-radius:10px!important;
  border-top-right-radius:10px!important;
}
/* Legacy fallback for builds/initial paint before v515 compact shell exists. */
#ggScrollFilterTabsV664.gg-scroll-filter-tabs-v664 + .category-loop-wrap{
  margin-top:0!important;
  border-top-left-radius:10px!important;
  border-top-right-radius:10px!important;
}
#ggScrollFilterTabsV664 [data-gg-item-filter]{
  flex:1 0 96px!important;
  min-width:96px!important;
  min-height:42px!important;
  height:42px!important;
  padding:7px 13px!important;
  border-radius:14px!important;
  font-size:14px!important;
  line-height:1!important;
  transform:none;
  touch-action:manipulation;
}
/* Permanent visual identity — active state never replaces these backgrounds. */
#ggScrollFilterTabsV664 [data-gg-item-filter="basic"],
#ggScrollFilterTabsV664 [data-gg-item-filter="basic"].active{
  background:linear-gradient(180deg,#ffffff 0%,#e2e6eb 48%,#b9c0c9 100%)!important;
  color:#111318!important;
  border:2px solid #8e959e!important;
}
#ggScrollFilterTabsV664 [data-gg-item-filter="unlocked"],
#ggScrollFilterTabsV664 [data-gg-item-filter="unlocked"].active{
  background:linear-gradient(180deg,#f7dd79 0%,#ddb94f 56%,#bc8f28 100%)!important;
  color:#111318!important;
  border:2px solid #9a7624!important;
}
#ggScrollFilterTabsV664 [data-gg-item-filter="purchased"],
#ggScrollFilterTabsV664 [data-gg-item-filter="purchased"].active{
  background:linear-gradient(180deg,#c990ff 0%,#9c57db 54%,#7131a8 100%)!important;
  color:#fff!important;
  border:2px solid #5d268b!important;
}
#ggScrollFilterTabsV664 [data-gg-item-filter].active{
  box-shadow:0 0 0 3px rgba(21,22,26,.18),inset 0 2px 0 rgba(255,255,255,.46),0 4px 8px rgba(0,0,0,.18)!important;
  outline:2px solid rgba(30,31,36,.55)!important;
  outline-offset:1px!important;
  transform:translateY(-1px)!important;
}
@media(max-width:560px){
  #ggScrollFilterTabsV664.gg-scroll-filter-tabs-v664{
    width:calc(100% - 20px)!important;
    margin:10px 10px -3px!important;
    gap:6px!important;
    padding:5px 6px 7px!important;
  }
  #ggScrollFilterTabsV664 [data-gg-item-filter]{
    min-width:88px!important;
    flex:1 0 88px!important;
    padding:7px 10px!important;
  }
}