/* 底栏 / 客服 / 音乐盒外观（后台：站点设置 → 图标外观） */

/* A 果冻软糖 */
html[data-bottom-skin="jelly"] .tbi-bar{
  background:rgba(255,255,255,.90)!important;
  border-radius:24px 24px 0 0!important;
  box-shadow:0 -10px 28px rgba(160,120,200,.18),inset 0 1px 0 #fff!important;
  backdrop-filter:blur(16px) saturate(1.3);
}
html[data-bottom-skin="jelly"] .tbi-bar [data-tbi] .tbi-ico{
  width:22px!important;height:22px!important;padding:8px!important;border-radius:50%!important;
  box-sizing:content-box!important;
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,226,238,.72))!important;
  box-shadow:0 3px 8px rgba(190,140,180,.14),inset 0 1px 0 #fff!important;
}
html[data-bottom-skin="jelly"] .tbi-bar [data-tbi].tbi-on .tbi-ico{
  background:linear-gradient(145deg,var(--qi-t1),var(--qi-t2))!important;
  box-shadow:0 6px 14px var(--qi-shadow),inset 0 1px 0 rgba(255,255,255,.9)!important;
  color:var(--qi-i)!important;
  transform:translateY(-1px);
}
html[data-bottom-skin="jelly"] .service-fab{
  width:56px!important;height:56px!important;border-radius:50%!important;
  background:linear-gradient(150deg,#fff7fb,#ffe1ee)!important;
  border:2px solid #fff!important;
  box-shadow:0 10px 22px rgba(200,110,160,.32),inset 0 1px 0 #fff!important;
}
html[data-bottom-skin="jelly"] .bgm-fab{
  width:42px!important;height:42px!important;border-radius:50%!important;
  background:linear-gradient(150deg,#fff,#efe4ff)!important;
  border:2px solid #fff!important;
  box-shadow:0 8px 18px rgba(150,110,200,.26)!important;
}

/* B 玻璃糖纸 */
html[data-bottom-skin="glass"] .tbi-bar{
  background:rgba(255,255,255,.38)!important;
  backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid rgba(255,255,255,.8)!important;
  box-shadow:0 -12px 30px rgba(120,95,160,.14)!important;
}
html[data-bottom-skin="glass"] .tbi-bar [data-tbi] .tbi-ico{
  padding:2px!important;background:transparent!important;box-shadow:none!important;
}
html[data-bottom-skin="glass"] .tbi-bar [data-tbi].tbi-on .tbi-ico{
  box-sizing:content-box!important;padding:7px!important;border-radius:50%!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 4px 12px rgba(150,110,190,.18)!important;
}
html[data-bottom-skin="glass"] .service-fab{
  background:rgba(255,255,255,.40)!important;
  backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85)!important;
  box-shadow:0 10px 26px rgba(140,105,180,.2)!important;
}
html[data-bottom-skin="glass"] .bgm-fab{
  background:rgba(255,255,255,.38)!important;
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.85)!important;
  box-shadow:0 8px 20px rgba(140,105,180,.18)!important;
}

/* C 手账贴纸 */
html[data-bottom-skin="sticker"] .tbi-bar{
  background:#fffdf8!important;
  border-top:1.5px dashed #f1bfd4!important;
  box-shadow:0 -8px 22px rgba(200,140,170,.12)!important;
}
html[data-bottom-skin="sticker"] .tbi-bar [data-tbi] .tbi-ico{
  width:21px!important;height:21px!important;padding:7px!important;
  box-sizing:content-box!important;border-radius:50%!important;
  background:#fff!important;border:1.5px solid #f4cede!important;
  box-shadow:2px 3px 0 rgba(240,190,210,.4)!important;
}
html[data-bottom-skin="sticker"] .tbi-bar [data-tbi].tbi-on .tbi-ico{
  background:#fff0f7!important;border-color:#eaa2c0!important;
  transform:rotate(-5deg);box-shadow:3px 4px 0 rgba(235,160,190,.45)!important;
}
html[data-bottom-skin="sticker"] .service-fab{
  background:#fffaf6!important;border:2px solid #f6d3e2!important;
  box-shadow:3px 4px 0 rgba(235,180,205,.5)!important;
}
html[data-bottom-skin="sticker"] .bgm-fab{
  background:#fffaf6!important;border:2px solid #e6d8fb!important;
  box-shadow:3px 3px 0 rgba(205,185,235,.5)!important;
}

/* D 迷你胶囊 */
html[data-bottom-skin="pill"] .tbi-bar{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  backdrop-filter:none!important;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom))!important;
}
html[data-bottom-skin="pill"] .tbi-bar [data-tbi]{
  flex:1!important;margin:0 3px!important;padding:9px 0 8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 6px 16px rgba(150,110,190,.16)!important;
  gap:0!important;
}
html[data-bottom-skin="pill"] .tbi-bar [data-tbi]>span{display:none!important}
html[data-bottom-skin="pill"] .tbi-bar [data-tbi] .tbi-ico{
  width:21px!important;height:21px!important;padding:0!important;
  background:transparent!important;box-shadow:none!important;
}
html[data-bottom-skin="pill"] .tbi-bar [data-tbi].tbi-on{
  background:linear-gradient(145deg,var(--qi-t1),var(--qi-t2))!important;
  box-shadow:0 6px 16px var(--qi-shadow)!important;
}
html[data-bottom-skin="pill"] .tbi-bar [data-tbi].tbi-on .tbi-ico{color:var(--qi-i)!important}
html[data-bottom-skin="pill"] .service-fab{
  width:50px!important;height:50px!important;border-radius:999px!important;
  background:linear-gradient(145deg,#fff6fb,#ffdcea)!important;
  border:1.5px solid #fff!important;
  box-shadow:0 8px 20px rgba(200,110,160,.3)!important;
}
html[data-bottom-skin="pill"] .bgm-fab{
  width:36px!important;height:36px!important;background:#fff!important;
  border:1.5px solid #efe2ff!important;
  box-shadow:0 6px 14px rgba(150,110,200,.24)!important;
}

/* E 云朵浮岛（悬浮胶囊 + 选中项展开文字） */
html[data-bottom-skin="cloud"] main.view::after{
  content:"";display:block;height:calc(86px + env(safe-area-inset-bottom));
}
html[data-bottom-skin="cloud"] .tbi-bar{
  left:14px!important;right:14px!important;bottom:12px!important;
  width:auto!important;transform:none!important;
  border-radius:30px!important;
  background:linear-gradient(150deg,rgba(255,255,255,.97),rgba(255,238,248,.94))!important;
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 18px 40px rgba(168,120,190,.24),0 2px 6px rgba(168,120,190,.10),inset 0 1px 0 #fff!important;
  padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
  justify-content:center!important;gap:10px!important;
  overflow:hidden;
}
html[data-bottom-skin="cloud"] .tbi-bar [data-tbi]{
  flex:0 0 44px!important;width:44px!important;min-width:0!important;
  flex-direction:row!important;gap:0!important;
  padding:12px 0!important;border-radius:999px!important;
  transition:background .25s,box-shadow .25s,padding .25s,flex .25s;
}
html[data-bottom-skin="cloud"] .tbi-bar [data-tbi]>span{
  display:none!important;font-size:11px!important;font-weight:800!important;line-height:1!important;
}
html[data-bottom-skin="cloud"] .tbi-bar [data-tbi].tbi-on{
  flex:0 0 92px!important;flex-shrink:0!important;width:92px!important;height:44px!important;
  justify-content:center!important;padding:0!important;gap:6px!important;
  background:linear-gradient(135deg,var(--qi-t1),var(--qi-t2))!important;
  box-shadow:0 8px 18px var(--qi-shadow),inset 0 1px 0 rgba(255,255,255,.9)!important;
  color:var(--qi-i)!important;
}
html[data-bottom-skin="cloud"] .tbi-bar [data-tbi].tbi-on>span{
  display:inline-block!important;white-space:nowrap!important;
  width:auto!important;min-width:0!important;max-width:none!important;
  position:static!important;transform:none!important;letter-spacing:.5px;
}
html[data-bottom-skin="cloud"] .tbi-bar [data-tbi] .tbi-ico,
html[data-bottom-skin="cloud"] .tbi-bar [data-tbi].tbi-on .tbi-ico{
  width:21px!important;height:21px!important;padding:0!important;
  background:transparent!important;box-shadow:none!important;
}
html[data-bottom-skin="cloud"] .service-fab{
  width:auto!important;height:46px!important;min-width:80px!important;
  padding:0 15px 0 7px!important;border-radius:999px!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important;
  background:linear-gradient(135deg,#fff6fb,#ffe0ee)!important;
  border:1.5px solid #fff!important;
  box-shadow:0 12px 26px rgba(205,120,165,.32),inset 0 1px 0 #fff!important;
}
html[data-bottom-skin="cloud"] .service-fab .srv-icon{
  width:30px!important;height:30px!important;border-radius:50%!important;
  background:#fff!important;display:grid!important;place-items:center!important;
  font-size:16px!important;line-height:1!important;
  box-shadow:0 2px 6px rgba(200,120,160,.22)!important;
}
html[data-bottom-skin="cloud"] .service-fab .srv-online{
  top:6px!important;right:8px!important;
}
html[data-bottom-skin="cloud"] .service-fab small{
  font-size:11px!important;font-weight:800!important;color:#a8466f!important;letter-spacing:.5px;
}
html[data-bottom-skin="cloud"] .bgm-fab{
  width:42px!important;height:42px!important;border-radius:50%!important;
  background:linear-gradient(150deg,#fff,#f3e8ff)!important;
  border:1.5px solid #fff!important;
  box-shadow:0 10px 22px rgba(150,110,200,.28)!important;
}