/* ===== 底部导航：iOS 液态玻璃（通透版） ===== */
/* 只覆盖外观，不改结构、文字、图标、路由与逻辑 */

/* ---------- 玻璃胶囊本体 ---------- */
.custom-tabbar{
  position:fixed!important;
  left:12px!important;
  right:12px!important;
  bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  height:62px!important;
  width:auto!important;
  padding:0 8px!important;
  border:0!important;
  border-top:0!important;
  border-radius:999px!important;
  background-image:linear-gradient(158deg,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.20) 32%,
    rgba(255,255,255,.10) 60%,
    rgba(255,255,255,.30) 100%)!important;
  background-color:rgba(255,255,255,.12)!important;
  -webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06)!important;
  backdrop-filter:blur(44px) saturate(220%) brightness(1.06)!important;
  box-shadow:
    0 18px 40px rgba(15,23,42,.13),
    0 4px 12px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(255,255,255,.40),
    inset 0 0 0 1px rgba(255,255,255,.28)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-around!important;
  z-index:60!important;
  overflow:visible!important;
}

/* 顶部斜射高光——玻璃“有厚度”的关键 */
.custom-tabbar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(140% 120% at 10% -25%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.22) 38%,rgba(255,255,255,0) 66%);
}

/* ---------- 页签 ---------- */
.custom-tabbar .tab-item{
  position:relative!important;
  z-index:1!important;
  height:100%!important;
  margin:0 2px!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  transition:transform .24s cubic-bezier(.34,1.4,.5,1)!important;
}
.custom-tabbar .tab-item:active{transform:scale(.9)!important;opacity:1!important}

/* 选中项：一枚内嵌的小玻璃药丸 */
.custom-tabbar .tab-item.active::before{
  content:"";position:absolute;left:14%;right:14%;top:6px;bottom:6px;border-radius:999px;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.48) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 0 1px rgba(255,255,255,.62),
    0 2px 8px rgba(15,23,42,.08);
}

.custom-tabbar .tab-item svg,
.custom-tabbar .tab-item .tab-text{position:relative;z-index:1}

.custom-tabbar .tab-text{
  margin-top:3px!important;
  font-size:12px!important;
  letter-spacing:.2px!important;
  color:#5d6472!important;
  transition:color .2s ease!important;
}
.custom-tabbar .tab-item.active .tab-text{color:#007aff!important}

/* ---------- 内容不被浮起的玻璃压住（仅移动端，桌面端布局不动） ---------- */
@media (max-width:1023px){
  .main-content{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
  .main-content.chat-content{padding-bottom:0!important}
  .chat-detail-view .input-area,.telegram-style .input-area{padding-bottom:max(10px,env(safe-area-inset-bottom,0px))!important}
  .input-area{padding-bottom:max(30px,calc(env(safe-area-inset-bottom,0px) + 84px))!important}
  .session-list{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
}

/* ---------- 老内核兜底（不支持毛玻璃时给半透明底，保证可读） ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .custom-tabbar{
    background-color:rgba(255,255,255,.9)!important;
    background-image:none!important;
  }
}