/* 快捷栏 BubbleMenu 化（2026-10-24）
   参考 ReactBits BubbleMenu（bubble-menu）：一个圆形气泡开关，点开后菜单项
   以 scale(0)→1 的弹簧过冲（gsap back.out）逐个弹出、标签自下浮入。
   按用户要求改成「横着一排弹出」，并保留原快捷栏的奶油木纹质感。 */

.wb-quick.bq-nav{
  --bq-ease: cubic-bezier(.22, .9, .3, 1);
  position: relative;
  z-index: 30;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 58px;
  padding: 6px;
  border-radius: 999px;
  overflow: visible;
  transition: max-width .42s var(--bq-ease);
}
.wb-quick.bq-nav.is-open{
  max-width: 460px;
  padding: 6px 8px;
}

/* 圆形气泡开关（原组件的 toggle-bubble，两条线开合） */
.bq-toggle{
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background-color: #E9D3B2;
  background-image:
    repeating-linear-gradient(90deg, rgba(91,58,30,.05) 0 1px, rgba(91,58,30,0) 1px 8px),
    linear-gradient(180deg, #FBF3E5 0%, #E7D1B0 100%);
  box-shadow:
    inset 0 0 0 2px rgba(91,58,30,.16),
    inset 0 1px 2px rgba(255,255,255,.55),
    0 5px 12px -9px rgba(91,58,30,.85);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.bq-toggle:active{ transform: scale(.94); }
.bq-toggle:focus-visible{ outline: 3px solid #8FB6CF; outline-offset: 2px; }
.bq-line{
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #6B4423;
  transform-origin: center;
  transition: transform .32s ease, opacity .3s ease;
}
.bq-line.short{ width: 13px; }
.bq-nav.is-open .bq-line:first-child{ transform: translateY(3.5px) rotate(45deg); }
.bq-nav.is-open .bq-line.short{ transform: translateY(-3.5px) rotate(-45deg); }

/* 未展开时轻轻呼吸一下，提示这里可以点 */
.bq-toggle::after{
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(200,155,106,.75);
  opacity: 0;
  pointer-events: none;
  animation: bq-hint 2.6s ease-out 1.6s 2;
}
.bq-nav.is-open .bq-toggle::after{ animation: none; opacity: 0; }
@keyframes bq-hint{
  0%{ opacity: .85; transform: scale(.9); }
  70%{ opacity: 0; transform: scale(1.32); }
  100%{ opacity: 0; transform: scale(1.32); }
}

/* 横排气泡组 */
.bq-list{
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
  overflow: visible;
}
.bq-nav.is-open .bq-list{ pointer-events: auto; }

/* 单个气泡：默认收成 0 点（只有 JS 就绪后才收起，脚本挂了就退回原样） */
.wb-quick-btn.bq-pill{
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  min-height: 46px;
  padding: 3px 2px 4px;
  border-radius: 999px;
  overflow: hidden;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  font-size: 9.5px;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: clip;
}
.bq-nav.bq-ready:not(.is-open) .bq-pill{
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.bq-nav.is-open .bq-pill{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bq-pill .bq-label{
  display: inline-block;
  white-space: nowrap;
  font-size: 8.5px;
  letter-spacing: 0;
  will-change: transform, opacity;
}
.bq-pill img.btn-ico{
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: 0;
}

@media (max-width: 420px){
  .wb-quick.bq-nav{ gap: 6px; }
  .bq-toggle{ width: 42px; height: 42px; }
  .bq-list{ gap: 4px; }
  .wb-quick-btn.bq-pill{ font-size: 9px; padding: 2px 1px 3px; }
  .bq-pill .bq-label{ font-size: 8px; }
  .bq-pill img.btn-ico{ width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce){
  .wb-quick.bq-nav{ transition: none; }
  .bq-toggle::after{ animation: none; }
  .bq-line{ transition: none; }
}