:root{
  --zf-stage8-hero-gap-1: 16px;
  --zf-stage8-hero-gap-2: 16px;
  --zf-stage8-hero-gap-3: 20px;
  --zf-stage8-composer-gap: 14px;
}

/* Final QA + production hardening */
#micro,
.heroTrustItem{
  white-space:nowrap;
  text-wrap:nowrap;
}

.micro--hero{
  margin-top:var(--zf-stage8-hero-gap-1) !important;
  line-height:1.15;
}
.heroExamplesWrap,
.heroExamplesWrap--modal{
  margin-top:var(--zf-stage8-hero-gap-2) !important;
}
.heroTrust{
  margin-top:var(--zf-stage8-hero-gap-3) !important;
}

.chatQuick{
  margin-top:var(--zf-stage8-composer-gap) !important;
}
.chatQuick .chipsRow{
  gap:8px !important;
}
#quickCats{
  margin-top:2px !important;
}
.quickPanel{
  bottom:calc(100% + 20px) !important;
}

.composerPill{
  min-height:60px !important;
  padding:8px !important;
  gap:8px !important;
  align-items:center !important;
}
#toolBtn,
#micBtn,
#sendBtn,
.composerPill .moreBtn,
.composerPill .mic,
.composerPill .send{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  border-radius:14px !important;
}
#chatInput,
.composerPill textarea{
  min-height:42px !important;
  padding:10px 2px !important;
}
.composerLegal{
  margin-top:2px !important;
}

.edgeDock{
  right:12px !important;
  z-index:9800 !important;
}
.edgeDockBtn{
  width:52px !important;
  height:52px !important;
}

@media (max-width: 560px){
  :root{
    --zf-stage8-hero-gap-1: 18px;
    --zf-stage8-hero-gap-2: 18px;
    --zf-stage8-hero-gap-3: 22px;
    --zf-stage8-composer-gap: 15px;
  }
  #micro,
  .heroTrustItem,
  #heroText,
  #heroHelper{
    white-space:nowrap;
    text-wrap:nowrap;
  }
  #heroText{
    font-size:clamp(26px, 7.8vw, 32px) !important;
    line-height:1.04 !important;
  }
  #heroHelper{
    font-size:clamp(12px, 3.3vw, 13.5px) !important;
    line-height:1.12 !important;
  }
  .chatQuick{
    margin-top:15px !important;
  }
  .quickPanel{
    bottom:calc(100% + 21px) !important;
    border-radius:18px;
  }
  #toolBtn,
  #micBtn,
  #sendBtn,
  .composerPill .moreBtn,
  .composerPill .mic,
  .composerPill .send{
    width:41px !important;
    min-width:41px !important;
    height:41px !important;
    min-height:41px !important;
    border-radius:13px !important;
  }
  .edgeDock{
    right:10px !important;
  }
}

@media (max-width: 390px){
  #micro,
  .heroTrustItem{
    font-size:11.25px !important;
  }
  .micro--hero,
  .heroTrust{
    width:100%;
    display:flex;
    justify-content:center;
  }
}