/* Recodet V77 — refined hub header per user direction.
   Hub: boxed locality badge on the left, RECODET centered, RC chip on the right.
   Chat moves to a floating bottom-right action button.
*/
:root{
  --v77-chat-fab-bottom: calc(96px + env(safe-area-inset-bottom));
  --v77-chat-fab-right: 16px;
}

/* Hub header: team badge definitely on the left, RC definitely on the right. */
.topbar.topbarTwoRow.v76Hub .teamTopBadge,
.topbar.topbarTwoRow.v73Hub .teamTopBadge{
  left:12px!important;
  right:auto!important;
  display:grid!important;
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  max-width:50px!important;
  min-height:50px!important;
  padding:5px!important;
  border-radius:16px!important;
  border:1px solid rgba(232,189,71,.34)!important;
  background:linear-gradient(145deg,rgba(28,23,13,.92),rgba(8,7,5,.97))!important;
  box-shadow:inset 0 1px 0 rgba(255,244,195,.09),0 7px 18px rgba(0,0,0,.28)!important;
}
.topbar.topbarTwoRow.v76Hub .teamTopBadge::before,
.topbar.topbarTwoRow.v73Hub .teamTopBadge::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:13px;
  border:1px solid rgba(245,217,120,.14);
  pointer-events:none;
}
.topbar.topbarTwoRow.v76Hub .teamBadgeMark,
.topbar.topbarTwoRow.v73Hub .teamBadgeMark{
  width:38px!important;
  height:38px!important;
  border-radius:10px!important;
}

.topbar.topbarTwoRow.v76Hub .premiumCoinButton,
.topbar.topbarTwoRow.v73Hub .premiumCoinButton{
  left:auto!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  height:42px!important;
  min-height:42px!important;
  padding:4px 8px 4px 4px!important;
  border-radius:14px!important;
}

/* Chat no longer lives in the top bar on the hub. */
.topbar.topbarTwoRow.v76Hub #btnChat,
.topbar.topbarTwoRow.v73Hub #btnChat{
  display:none!important;
}

/* Slightly more breathing room for the brand when chat leaves the top bar. */
.topbar.topbarTwoRow.v76Hub #pageTitle,
.topbar.topbarTwoRow.v73Hub #pageTitle{
  width:118px!important;
  max-width:118px!important;
}

/* Floating chat action */
.chatFab{
  position:fixed;
  right:var(--v77-chat-fab-right);
  bottom:var(--v77-chat-fab-bottom);
  z-index:1605;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:58px;
  height:58px;
  min-width:58px;
  min-height:58px;
  padding:0;
  border:1px solid rgba(232,189,71,.28);
  border-radius:19px;
  color:#f1cc60;
  background:
    radial-gradient(85% 85% at 32% 22%,rgba(245,217,120,.18),transparent 46%),
    linear-gradient(180deg,rgba(28,23,13,.98),rgba(9,8,5,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,244,197,.08),
    0 12px 26px rgba(0,0,0,.34),
    0 0 0 1px rgba(245,217,120,.05);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.chatFab:hover,
.chatFab:focus-visible{
  border-color:rgba(245,217,120,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,244,197,.1),
    0 14px 30px rgba(0,0,0,.38),
    0 0 0 3px rgba(245,217,120,.10);
}
.chatFab:active{transform:translateY(1px) scale(.965)}
.chatFab svg{width:24px;height:24px;display:block}
.chatFab.hidden{display:none!important}
.chatFabLabel{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}

/* Keep clear of bottom bar and center quick dock. */
body.onboardingActive .chatFab,
body.v74OnboardingActive .chatFab,
body.chatModuleActive .chatFab,
body.noChatFab .chatFab{display:none!important}
body.moduleBarVisible .chatFab{bottom:calc(104px + env(safe-area-inset-bottom))}
body.quickDockVisible .chatFab{bottom:calc(126px + env(safe-area-inset-bottom))}
body.moduleBarVisible.quickDockVisible .chatFab{bottom:calc(136px + env(safe-area-inset-bottom))}

@media (max-width:390px){
  .topbar.topbarTwoRow.v76Hub .teamTopBadge,
  .topbar.topbarTwoRow.v73Hub .teamTopBadge{
    left:8px!important;
    width:45px!important;height:45px!important;min-width:45px!important;max-width:45px!important;min-height:45px!important;
    border-radius:14px!important;
  }
  .topbar.topbarTwoRow.v76Hub .teamBadgeMark,
  .topbar.topbarTwoRow.v73Hub .teamBadgeMark{width:33px!important;height:33px!important}
  .topbar.topbarTwoRow.v76Hub .premiumCoinButton,
  .topbar.topbarTwoRow.v73Hub .premiumCoinButton{
    right:8px!important;
    width:74px!important;min-width:74px!important;max-width:74px!important;height:39px!important;min-height:39px!important;
  }
  .topbar.topbarTwoRow.v76Hub #pageTitle,
  .topbar.topbarTwoRow.v73Hub #pageTitle{width:104px!important;max-width:104px!important}
  .chatFab{width:54px;height:54px;min-width:54px;min-height:54px;right:12px}
  body.quickDockVisible .chatFab{bottom:calc(118px + env(safe-area-inset-bottom))}
  body.moduleBarVisible.quickDockVisible .chatFab{bottom:calc(128px + env(safe-area-inset-bottom))}
}

@media (max-width:340px){
  .topbar.topbarTwoRow.v76Hub .premiumCoinButton,
  .topbar.topbarTwoRow.v73Hub .premiumCoinButton{width:68px!important;min-width:68px!important;max-width:68px!important}
  .topbar.topbarTwoRow.v76Hub #pageTitle,
  .topbar.topbarTwoRow.v73Hub #pageTitle{width:92px!important;max-width:92px!important}
}