/* ==============================================================
 * HC JOYN MAINPAGE - Tabbar Section
 *
 * Fixed bottom navigation, mobile-only. Tabs auto-distribute width.
 * Background variants: white / blur (glassmorphism) / dark.
 * Active state: top indicator + primary color icon (swap line→fill) + label.
 *
 * CSS vars set inline:
 *   --hcjm-tabbar-icon-size, --hcjm-tabbar-item-py, --hcjm-tabbar-h
 * ============================================================== */

.hcjm-tabbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:var(--hcjm-z-fixed, var(--hcjm-z-tabbar, 200));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  padding-left:calc(5px + env(safe-area-inset-left, 0px));
  padding-right:calc(5px + env(safe-area-inset-right, 0px));
  width:100%;
  max-width:100%;
  margin:0 auto;
  /* mainpage-mini 동일: 아래로 스크롤 시 패널 밖으로 숨김 */
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.hcjm-tabbar.hcjm-tabbar--scroll-hidden{
  transform:translateY(100%);
  pointer-events:none;
}

/* Background variants */
.hcjm-tabbar.is-bg-white{
  background:#fff;
}
.hcjm-tabbar.is-bg-blur{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
}
.hcjm-tabbar.is-bg-dark{
  background:#0F1024;
  color:#fff;
}

/* Border on top */
.hcjm-tabbar.has-border{
  border-top:1px solid var(--hcjm-line);
}
.hcjm-tabbar.is-bg-dark.has-border{
  border-top:1px solid rgba(255,255,255,.08);
}

/* List */
.hcjm-tabbar-list{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  height:var(--hcjm-tabbar-h, 64px);
  list-style:none;
  margin:0;
  padding:0;
}

/* Tab item */
.hcjm-tabbar-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:var(--hcjm-tabbar-item-py, 8px) 4px;
  width:100%; height:100%;
  background:transparent;
  border:0;
  color:var(--hcjm-muted);
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:-0.2px;
  transition:color var(--hcjm-dur-fast) ease;
}
.hcjm-tabbar.is-bg-dark .hcjm-tabbar-item{
  color:rgba(255,255,255,.55);
}

.hcjm-tabbar-item:active{
  transform:scale(.96);
}

/* Icon wrap */
.hcjm-tabbar-icon-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:var(--hcjm-tabbar-icon-size, 22px);
  line-height:1;
}
.hcjm-tab-icon-on{display:none;}

/* Active state — swap to filled icon, primary color */
.hcjm-tabbar-item.is-active{
  color:var(--hcjm-primary);
}
.hcjm-tabbar.is-bg-dark .hcjm-tabbar-item.is-active{
  color:#fff;
}
.hcjm-tabbar-item.is-active .hcjm-tab-icon-off{display:none;}
.hcjm-tabbar-item.is-active .hcjm-tab-icon-on {display:inline-block;}

/* Top indicator on active tab */
.hcjm-tabbar.has-indicator .hcjm-tabbar-item.is-active::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:28px;
  height:3px;
  background:var(--hcjm-primary);
  border-radius:0 0 3px 3px;
}
.hcjm-tabbar.is-bg-dark.has-indicator .hcjm-tabbar-item.is-active::before{
  background:#fff;
}

/* Label */
.hcjm-tabbar-label{
  display:block;
  line-height:1;
}
.hcjm-tabbar.no-labels .hcjm-tabbar-label{
  display:none;
}
.hcjm-tabbar.no-labels .hcjm-tabbar-item{gap:0;}

/* Badge */
.hcjm-tabbar-badge{
  position:absolute;
  top:-4px;
  right:-8px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  background:var(--hcjm-live);
  color:#fff;
  border-radius:8px;
  font-size:9.5px;
  font-weight:900;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  letter-spacing:.2px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.hcjm-tabbar.is-bg-dark .hcjm-tabbar-badge{
  border-color:#0F1024;
}
.hcjm-tabbar-badge.is-hidden{
  display:none;
}

/* Empty placeholder (for jmp-chat badge before JS injects count) */
.hcjm-tabbar-badge:empty{
  display:none;
}

/* ==============================================================
 * Center FAB (Acts) — 인디고 원형, 흰색 라인 아이콘·라벨
 * ============================================================== */

.hcjm-tabbar.has-center-fab{
  overflow:visible;
}

.hcjm-tabbar.has-center-fab .hcjm-tabbar-list{
  overflow:visible;
  align-items:flex-end;
}

.hcjm-tabbar-cell--center{
  overflow:visible;
  z-index:2;
}

.hcjm-tabbar-item--center-fab{
  position:relative;
  justify-content:flex-end;
  padding-bottom:6px;
  gap:0;
  color:var(--hcjm-muted);
  overflow:visible;
}

.hcjm-tabbar-item--center-fab.is-active{
  color:var(--hcjm-muted);
}

.hcjm-tabbar-item--center-fab .hcjm-tabbar-icon-wrap,
.hcjm-tabbar-item--center-fab > .hcjm-tabbar-label{
  display:none;
}

.hcjm-tabbar.has-indicator .hcjm-tabbar-item--center-fab.is-active::before{
  display:none;
}

.hcjm-tabbar-fab{
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}

.hcjm-tabbar-fab__circle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:56px;
  min-width:56px;
  height:56px;
  margin-top:-22px;
  border-radius:50%;
  background:var(--hcjm-primary, #4541FF);
  color:#fff;
  box-shadow:var(--hcjm-shadow-primary, 0 14px 30px rgba(69,65,255,.28));
  border:3px solid #fff;
  box-sizing:border-box;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.hcjm-tabbar.is-bg-dark .hcjm-tabbar-fab__circle{
  border-color:#0F1024;
}

.hcjm-tabbar-item--center-fab.is-active .hcjm-tabbar-fab__circle{
  background:var(--hcjm-primary-dark, #2E29D4);
  box-shadow:0 16px 34px rgba(46,41,212,.35);
}

.hcjm-tabbar-item--center-fab:active .hcjm-tabbar-fab__circle{
  transform:scale(.94);
}

.hcjm-tabbar-item--center-fab:active{
  transform:none;
}

.hcjm-tabbar-fab__icon{
  display:block;
  font-size:24px;
  line-height:1;
  color:#fff;
  -webkit-font-smoothing:antialiased;
}

.hcjm-tabbar-fab__label{
  display:block;
  font-size:10px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.15px;
  color:#fff;
  text-shadow:0 1px 2px rgba(15,16,36,.12);
  white-space:nowrap;
}

.hcjm-tabbar.no-labels .hcjm-tabbar-fab__label{
  display:none;
}

.hcjm-tabbar-fab__sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hcjm-tabbar-badge--fab{
  top:2px;
  right:calc(50% - 34px);
  border-color:var(--hcjm-primary, #4541FF);
  z-index:3;
}

.hcjm-tabbar.is-bg-dark .hcjm-tabbar-badge--fab{
  border-color:#0F1024;
}

/* Hide tabbar in non-mobile sizes (already hidden by .hcjm-only-mobile, but defensive) */
@media (min-width:1024px){
  .hcjm-tabbar{display:none;}
}