/* V63 — Communication Hub phone size + internal scroll correction.
   No image generation. Keeps the top spacing stable from V62, makes the phone larger,
   and ensures the chat scrolls inside the phone screen rather than the whole page. */

.page-communication-hub main{
  padding-top:0 !important;
  margin-top:0 !important;
  overflow:visible !important;
}

.page-communication-hub .commhub-phone-demo-section{
  max-width:1360px !important;
  margin:0 auto !important;
  padding:clamp(18px,2.2vw,30px) 24px 34px !important;
  min-height:auto !important;
  display:grid !important;
  grid-template-columns:minmax(410px,.82fr) minmax(800px,1.18fr) !important;
  gap:26px !important;
  align-items:center !important;
  overflow:visible !important;
  transform:none !important;
}

.page-communication-hub .commhub-copy{
  padding-top:0 !important;
  margin-top:0 !important;
  align-self:center !important;
  transform:none !important;
}

.page-communication-hub .commhub-copy h1{
  font-size:clamp(48px,4.55vw,70px) !important;
  line-height:.98 !important;
  letter-spacing:-.06em !important;
  margin:10px 0 16px !important;
  max-width:620px !important;
}

.page-communication-hub .commhub-copy .lead{
  font-size:clamp(15px,1.12vw,18px) !important;
  line-height:1.42 !important;
  max-width:590px !important;
  margin-bottom:20px !important;
}

.page-communication-hub .commhub-demo-right{
  display:grid !important;
  grid-template-columns:minmax(360px,430px) minmax(300px,340px) !important;
  gap:24px !important;
  align-items:center !important;
  justify-content:end !important;
  padding-top:0 !important;
  margin-top:0 !important;
  transform:none !important;
  overflow:visible !important;
}

/* Larger phone. This deliberately allows page scrolling if the browser viewport is short. */
.page-communication-hub .hub-phone-frame{
  width:clamp(350px,28vw,430px) !important;
  max-width:430px !important;
  min-width:350px !important;
  aspect-ratio:390 / 790 !important;
  max-height:none !important;
  height:auto !important;
  min-height:0 !important;
  align-self:center !important;
  margin:0 auto !important;
}

.page-communication-hub .hub-phone-screen,
.page-communication-hub .phone-replica-shell,
.page-communication-hub .phone-replica-shell .replica-chat-stage{
  min-height:0 !important;
  overflow:hidden !important;
}

.page-communication-hub .phone-replica-shell{
  grid-template-columns:58px minmax(0,1fr) !important;
}

.page-communication-hub .phone-replica-shell .replica-avatar-rail{
  gap:8px !important;
  padding:20px 7px 12px !important;
}

.page-communication-hub .phone-replica-shell .replica-avatar{
  width:39px !important;
  height:39px !important;
}

.page-communication-hub .phone-replica-shell .replica-hub-topbar{
  min-height:76px !important;
  padding:16px 14px 12px !important;
}

.page-communication-hub .phone-replica-shell .replica-hub-topbar h3{
  font-size:18px !important;
  line-height:.98 !important;
}

.page-communication-hub .phone-replica-shell .replica-kicker{
  font-size:8.5px !important;
}

/* Actual internal scroll area. */
.page-communication-hub .phone-replica-shell .replica-chat-scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(111,238,255,.72) rgba(255,255,255,.08) !important;
  padding:16px 14px 10px !important;
  gap:11px !important;
}

.page-communication-hub .phone-replica-shell .replica-chat-scroll::-webkit-scrollbar{
  width:5px !important;
}
.page-communication-hub .phone-replica-shell .replica-chat-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06) !important;
  border-radius:99px !important;
}
.page-communication-hub .phone-replica-shell .replica-chat-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#42e6ff,#9b6cff) !important;
  border-radius:99px !important;
}

.page-communication-hub .phone-replica-shell .replica-bubble{
  max-width:92% !important;
  font-size:12.5px !important;
  line-height:1.42 !important;
  padding:12px 13px !important;
}

.page-communication-hub .phone-replica-shell .replica-mini-avatar{
  width:27px !important;
  height:27px !important;
  flex-basis:27px !important;
  font-size:11px !important;
}

.page-communication-hub .phone-replica-shell .replica-composer-shell{
  flex:0 0 auto !important;
  padding:0 12px 14px !important;
  background:linear-gradient(180deg,rgba(8,14,34,0),rgba(8,14,34,.68) 26%,rgba(8,14,34,.88)) !important;
}

.page-communication-hub .phone-replica-shell .replica-owner-pill{
  right:18px !important;
  bottom:70px !important;
  z-index:4 !important;
}

.page-communication-hub .phone-replica-shell .replica-composer{
  padding:8px !important;
}

.page-communication-hub .phone-replica-shell .replica-composer input{
  font-size:12.5px !important;
  padding:11px 12px !important;
}

.page-communication-hub .phone-replica-shell .replica-composer button{
  padding:11px 14px !important;
}

.page-communication-hub .phone-pack-panel{
  align-self:center !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding:22px !important;
}

/* Keep the next section down enough that the larger phone does not collide visually. */
.page-communication-hub .commhub-phone-demo-section + .page-section{
  margin-top:clamp(22px,3vw,44px) !important;
}

@media (max-width:1280px){
  .page-communication-hub .commhub-phone-demo-section{
    grid-template-columns:minmax(360px,.78fr) minmax(720px,1.22fr) !important;
    gap:22px !important;
  }
  .page-communication-hub .commhub-demo-right{
    grid-template-columns:minmax(330px,390px) minmax(280px,320px) !important;
    gap:20px !important;
  }
  .page-communication-hub .hub-phone-frame{
    width:clamp(330px,29vw,390px) !important;
    min-width:330px !important;
  }
}

@media (max-width:1120px){
  .page-communication-hub .commhub-phone-demo-section{
    grid-template-columns:1fr !important;
    padding-top:20px !important;
  }
  .page-communication-hub .commhub-copy{
    max-width:760px !important;
  }
  .page-communication-hub .commhub-demo-right{
    grid-template-columns:minmax(340px,410px) minmax(280px,340px) !important;
    justify-content:center !important;
  }
}

@media (max-width:780px){
  .page-communication-hub .commhub-phone-demo-section{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .page-communication-hub .commhub-demo-right{
    grid-template-columns:1fr !important;
  }
  .page-communication-hub .hub-phone-frame{
    width:min(100%,380px) !important;
    min-width:0 !important;
  }
  .page-communication-hub .phone-pack-panel{
    width:min(100%,420px) !important;
    margin:0 auto !important;
  }
}