/* ==== Bottom Tab ====================================================== */
.btm-wrap{
  position:fixed;left:0;right:0;bottom:0;z-index:100000;pointer-events:none;
  transform:translateZ(0);will-change:transform;
}
.btm-nav{
  pointer-events:auto;background:rgba(13,16,24,.78);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.08);
  padding-bottom:max(0px,env(safe-area-inset-bottom));
}
.btm-grid{
  max-width:680px;margin:0 auto;display:grid;gap:2px;
  grid-template-columns:repeat(var(--tab-cols,5),1fr);
}

.tab-btn{
  position:relative;appearance:none;-webkit-appearance:none;background:none;border:0;color:#cfd6ee;
  padding:10px 2px calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;outline:none;min-width:0;
}
.tab-btn .ico{font-size:20px;line-height:1}
.tab-btn span{font-size:11px;white-space:nowrap}

/* 押し込み */
.tab-btn:active,.tab-btn.pressing{transform:translateY(1px) scale(.985)}
/* バウンス */
@keyframes btn-bounce{0%{transform:scale(.98)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
.tab-btn.clicked{animation:btn-bounce .18s ease}
/* フォーカスリング */
.tab-btn:focus-visible{outline:2px solid rgba(99,102,241,.55);outline-offset:3px;border-radius:12px}

/* アクティブ */
.tab-btn.active{color:#fff}
.tab-btn.active .ico{filter:drop-shadow(0 3px 8px rgba(73,118,255,.45))}
@keyframes gradient-scan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.tab-btn.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:6px;
  background:linear-gradient(90deg,#4f7bff,#9f7aea,#4f7bff);background-size:200% 100%;
  animation:gradient-scan 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){.tab-btn.clicked,.tab-btn.active::after{animation:none}}

/* ==== Mask ============================================================ */
.btm-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:99995;
}
.btm-mask.show{opacity:1;pointer-events:auto}

/* ==== Bottom Sheet ==================================================== */
.submenu{
  position:fixed;left:0;right:0;bottom:0;transform:translateY(110%);transition:transform .2s ease;z-index:99996;
  max-width:680px;margin:0 auto;background:rgba(24,28,42,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top-left-radius:18px;border-top-right-radius:18px;border:1px solid rgba(255,255,255,.08);
  padding:8px 10px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.45);
  pointer-events:auto;max-height:min(72vh,560px);overflow:auto;
}
.submenu.show{transform:translateY(0)}
.submenu.dragging{transition:none}
.grabber{width:48px;height:5px;border-radius:999px;background:rgba(255,255,255,.22);margin:8px auto 10px}

/* セクション/項目 */
.section{font-size:12px;color:#a7b1d8;margin:8px 12px}
.submenu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;
  color:#e9ecff;padding:12px 14px;border-radius:12px;cursor:pointer}
.submenu-item:hover{background:rgba(255,255,255,.06)}
.submenu-item .ico{width:22px;text-align:center}

/* トーン */
.tone-add{color:#34d399}.tone-info{color:#93c5fd}.tone-action{color:#fbbf24}.tone-danger{color:#f87171}