:root{
  --zf-shell-max: 720px;
  --zf-mobile-pad: 14px;
  --zf-mobile-pad-tight: 12px;
  --zf-topbar-h: 64px;
  --zf-chat-header-h: 62px;
  --zf-composer-gap: 10px;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--zf-topbar-h) + env(safe-area-inset-top));
}
body{
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

.topbar{
  padding-top:max(0px, env(safe-area-inset-top));
}
.hero,
.center,
.panel,
.modalCard,
.edgeDrawerCard,
.chatComposer,
.chatBody,
.sheet,
.modalCard,
#accountModal .modalCard.accountModalCard{
  box-sizing:border-box;
}

.hero{
  min-height:100dvh;
}
.center{
  width:min(var(--zf-shell-max), calc(100vw - 28px));
  margin-inline:auto;
}
.search{
  width:min(100%, 580px);
}
#searchInput{
  min-width:0;
}

.overlay.fullscreen,
.overlay{
  padding-left:max(10px, env(safe-area-inset-left));
  padding-right:max(10px, env(safe-area-inset-right));
  padding-bottom:max(10px, env(safe-area-inset-bottom));
}

.chatPanel{
  width:min(var(--zf-shell-max), calc(100vw - 20px));
  margin-inline:auto;
}
.chatTop{
  min-height:var(--zf-chat-header-h);
  padding-left:12px;
  padding-right:12px;
}
.chatTitle{
  min-width:0;
  font-size:15px;
}
.chatBody{
  padding:14px 14px calc(188px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior:contain;
}
.msg{margin:12px 0}
.bubble{
  max-width:min(84%, 520px);
  padding:10px 12px;
  line-height:1.42;
}
.msgActions{gap:8px}

.chatComposer{
  position:sticky;
  bottom:0;
  z-index:3;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(7,8,10,0), rgba(7,8,10,.76) 18%, rgba(7,8,10,.96) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.chatQuick{
  margin-bottom:var(--zf-composer-gap);
}
.chatQuick .chipsRow{
  margin:0 0 8px;
  padding-left:2px;
  padding-right:2px;
  mask-image:none;
  -webkit-mask-image:none;
}
.composerRow{
  margin:0;
}
.composerPill{
  min-height:60px;
  padding:8px;
  gap:8px;
}
.composerPill textarea{
  min-height:24px;
  max-height:140px;
  padding:11px 0;
  font-size:15px;
  line-height:1.4;
}
.composerPill .moreBtn,
.composerPill .mic,
.composerPill .send{
  flex:0 0 auto;
}
.composerLegal{
  padding:8px 6px 0;
  max-width:42ch;
  margin:0 auto;
}

.quickPanel{
  width:100%;
  left:0;
  right:0;
  bottom:calc(100% + 10px);
}
.quickPanelCustom{
  gap:10px;
}
#quickCustom{
  min-height:84px;
}

.edgeDrawer{
  bottom:max(14px, calc(env(safe-area-inset-bottom) + 10px));
}

@media (max-width: 820px){
  .topbar{
    height:auto;
    min-height:64px;
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .brandMain{font-size:14px}
  .brandSub{font-size:10px}

  .hero{
    align-items:flex-end;
  }
  .center{
    width:calc(100vw - 24px);
    transform:translateY(-4svh);
    padding:16px 2px calc(18px + env(safe-area-inset-bottom));
  }
  #heroText,
  h1{
    max-width:10ch;
    margin-bottom:8px;
  }
  .heroHelper{
    max-width:28ch;
    margin-bottom:16px;
  }
  .search{
    min-height:60px;
    padding:8px 8px 8px 14px;
    border-radius:22px;
  }
  .search button{
    width:44px;
    height:44px;
  }
  .heroExamplesWrap--modal{
    width:100%;
    display:flex;
    justify-content:center;
  }
  .heroExamplesModalBtn{
    width:min(100%, 320px);
  }

  .panel,
  .modalCard,
  #accountModal .modalCard.accountModalCard{
    width:min(100%, calc(100vw - 12px)) !important;
    max-width:min(var(--zf-shell-max), calc(100vw - 12px)) !important;
  }

  .chatPanel{
    max-height:calc(100dvh - 10px);
    border-radius:28px;
  }
  .chatTop{
    grid-template-columns:42px 1fr auto;
    gap:8px;
  }
  .chatHeaderRight{
    gap:6px;
  }
  .chatHeaderRight .actionIcon,
  .topBtn{
    width:38px;
    min-width:38px;
    height:38px;
    border-radius:13px;
  }
  .chatHeaderRight .actionIcon svg,
  .topBtn svg{
    width:17px;
    height:17px;
  }
  .bubble{
    max-width:88%;
  }

  .edgeDock{
    top:auto;
    right:12px;
    bottom:max(88px, calc(env(safe-area-inset-bottom) + 76px));
    transform:none;
  }
  .edgeDock.is-open,
  .edgeDock.is-hidden{
    transform:none;
  }
  .edgeDockBtn{
    width:56px;
    height:56px;
    border-radius:18px;
    border-right:1px solid rgba(212,176,120,.26);
    box-shadow:0 18px 46px rgba(0,0,0,.34);
  }
  .edgeDockBtn--peek,
  .edgeDockBtn--peek:active,
  .edgeDockBtn--peek:focus-visible,
  .edgeDockBtn.is-active{
    right:0 !important;
    transform:none;
  }
  .edgeDrawer{
    right:10px;
    left:10px;
    width:auto;
    z-index:12024;
  }
}

@media (max-width: 560px){
  .topbar{
    min-height:62px;
  }
  .topbarRight{
    gap:6px;
  }
  .topbarRight .actionIcon,
  #accessBtn.actionIcon--account,
  #menuBtn,
  #newChatBtn{
    width:38px;
    min-width:38px;
    height:38px;
    border-radius:13px;
  }

  .hero{
    min-height:100svh;
  }
  .center{
    width:calc(100vw - 20px);
    transform:translateY(-2svh);
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
  }
  #heroText,
  h1{
    font-size:clamp(30px, 10vw, 38px);
  }
  .heroHelper{
    font-size:14.5px;
    line-height:1.45;
    max-width:24ch;
  }
  .micro--hero,
  .heroTrust{
    padding-inline:8px;
  }
  .search{
    width:100%;
    min-height:58px;
    padding-left:12px;
    border-radius:20px;
  }
  .search input,
  .searchGhost{
    font-size:15px;
  }
  .search button{
    width:42px;
    height:42px;
    border-radius:14px;
  }

  .overlay{
    padding-left:max(6px, env(safe-area-inset-left));
    padding-right:max(6px, env(safe-area-inset-right));
    padding-bottom:max(6px, env(safe-area-inset-bottom));
  }
  .chatPanel{
    width:calc(100vw - 12px);
    max-height:calc(100dvh - 6px);
    border-radius:24px;
  }
  .chatTop{
    min-height:58px;
    padding-left:10px;
    padding-right:10px;
  }
  .chatBody{
    padding:12px 12px calc(204px + env(safe-area-inset-bottom, 0px));
  }
  .msg{margin:10px 0}
  .bubble{
    max-width:90%;
    font-size:13.5px;
    border-radius:15px;
  }
  .chatComposer{
    padding:8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .composerPill{
    min-height:56px;
    border-radius:20px;
    padding:7px;
  }
  .composerPill textarea{
    font-size:14.5px;
    padding:10px 0;
  }
  .composerPill .moreBtn,
  .composerPill .mic,
  .composerPill .send{
    width:38px;
    height:38px;
    border-radius:13px;
  }
  .chatQuick .chipsRow{
    gap:8px;
  }
  .chip{
    min-height:36px;
    padding:8px 12px;
    font-size:12.5px;
  }
  .quickPanel{
    border-radius:20px;
    padding:14px;
  }
  .quickPanelTitle{font-size:15px}
  .quickPanelHint{font-size:12.5px}

  .sheet,
  .modalCard{
    width:calc(100vw - 10px) !important;
    max-height:calc(100dvh - 10px) !important;
    border-radius:26px 26px 18px 18px !important;
  }
  .modalBack,
  .sheetBack{
    align-items:flex-end;
    padding:5px;
  }

  .edgeDock{
    right:10px;
    bottom:max(84px, calc(env(safe-area-inset-bottom) + 70px));
  }
  .edgeDockBtn{
    width:54px;
    height:54px;
    border-radius:17px;
  }
  .edgeDrawer{
    right:6px;
    left:6px;
    bottom:max(10px, calc(env(safe-area-inset-bottom) + 6px));
  }
  .edgeDrawerCard{
    border-radius:22px;
    padding:14px;
  }
}

@media (max-width: 380px){
  .brandMain{font-size:13.5px}
  .brandSub{display:none}
  .center{
    width:calc(100vw - 16px);
  }
  .heroHelper{max-width:22ch}
  .topbarRight .actionIcon,
  #accessBtn.actionIcon--account,
  #menuBtn,
  #newChatBtn,
  .chatHeaderRight .actionIcon,
  .topBtn{
    width:36px;
    min-width:36px;
    height:36px;
    border-radius:12px;
  }
  .chatHeaderRight{gap:5px}
  .chatTitle{font-size:14px}
  .composerPill .moreBtn,
  .composerPill .mic,
  .composerPill .send{
    width:36px;
    height:36px;
  }
}

@media (hover:none) and (pointer:coarse){
  .topbarRight .actionIcon:hover,
  .chatHeaderRight .actionIcon:hover,
  #accessBtn.actionIcon--account:hover,
  .topBtn:hover,
  .iconBtn:hover,
  #menuBtn:hover,
  #newChatBtn:hover,
  .search button:hover,
  .btn.gold:hover,
  .btn-shimmer:hover,
  .btnGold:hover,
  .btnPrimary:hover,
  .edgeDrawerOpenAll:hover,
  .btn.ghost:hover,
  .btnGhost:hover,
  .ghost:hover,
  .edgeDrawerOption:hover,
  .chip:hover,
  .topCta:hover,
  .topPill:hover,
  .item:hover{
    transform:none;
  }
}


/* ===== Stage 2 hotfix: mobile shell stability ===== */
@media (max-width: 820px){
  .center{
    transform:translateY(-2svh);
    padding-top:20px;
  }
  .overlay.fullscreen{
    padding:0 !important;
  }
  .overlay.fullscreen .chatPanel{
    width:100vw;
    height:100dvh;
    max-height:100dvh !important;
    border-radius:0;
    margin:0;
  }
  .overlay.fullscreen .chatTop{
    min-height:calc(62px + env(safe-area-inset-top));
    padding-top:calc(env(safe-area-inset-top) + 4px);
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .overlay.fullscreen .chatBody{
    padding-top:16px;
    padding-bottom:calc(196px + env(safe-area-inset-bottom, 0px));
  }
  .overlay.fullscreen .chatComposer{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .edgeDock{
    bottom:max(98px, calc(env(safe-area-inset-bottom) + 82px));
  }
}

@media (max-width: 560px){
  .hero{
    align-items:flex-end;
    padding-top:62px;
  }
  .center{
    transform:none;
    padding-top:18px;
    padding-bottom:calc(26px + env(safe-area-inset-bottom));
  }
  .overlay.fullscreen .chatTop{
    min-height:calc(58px + env(safe-area-inset-top));
    padding-top:calc(env(safe-area-inset-top) + 2px);
  }
  .overlay.fullscreen .chatBody{
    padding-top:14px;
    padding-bottom:calc(210px + env(safe-area-inset-bottom, 0px));
  }
  .composerLegal{
    max-width:34ch;
    padding-top:7px;
  }
  .edgeDock{
    right:12px;
    bottom:max(94px, calc(env(safe-area-inset-bottom) + 78px));
  }
}

@media (max-width: 380px){
  .center{
    width:calc(100vw - 18px);
    padding-top:16px;
  }
  .overlay.fullscreen .chatTop{
    padding-left:max(10px, env(safe-area-inset-left));
    padding-right:max(10px, env(safe-area-inset-right));
  }
}