/* SolChat mobile polish — loaded after the base styles. */
body{
  overscroll-behavior-y:none;
}

button{
  touch-action:manipulation;
}

#walletPreview > div{
  min-width:0;
  flex:1;
}

.addr{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:820px){
  #stage{
    justify-content:flex-start;
    padding:100px 16px 48px;
  }

  #rail{
    margin-bottom:28px;
  }
}

@media (max-width:560px){
  body:before{
    inset:-12%;
    filter:blur(58px) saturate(102%);
    opacity:.68;
  }

  #dust{
    opacity:.16;
  }

  header{
    height:calc(58px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  }

  #wordmark{
    font-size:15px;
  }

  #wordmark .tag{
    display:none;
  }

  #wordmark img{
    width:25px;
    height:25px;
    margin-right:8px;
  }

  #wave{
    gap:7px;
    padding:7px 9px;
    border-radius:13px;
    font-size:10px;
  }

  #wave .label{
    display:none;
  }

  #waveTime{
    min-width:61px;
  }

  #stage{
    min-height:100svh;
    padding:calc(82px + env(safe-area-inset-top)) 12px calc(34px + env(safe-area-inset-bottom));
  }

  #rail{
    width:100%;
    justify-content:center;
    margin:2px 0 22px;
  }

  .rnode{
    width:40px;
    gap:0;
  }

  .rnode .node{
    width:10px;
    height:10px;
  }

  .rnode .name{
    display:none;
  }

  .rlink{
    flex:1;
    width:auto;
    min-width:12px;
    max-width:28px;
    margin-bottom:0;
  }

  #card{
    width:100%;
    border-radius:24px;
  }

  #card:before{
    left:28px;
    right:28px;
  }

  .step{
    padding:28px 20px 26px;
  }

  .kicker{
    margin-bottom:12px;
    font-size:9px;
  }

  h1{
    margin-bottom:10px;
    font-size:clamp(25px,7.4vw,30px);
    line-height:1.12;
  }

  h1 .hl{
    white-space:normal;
  }

  .sub{
    margin-bottom:21px;
    font-size:13.5px;
    line-height:1.58;
  }

  .field{
    margin-bottom:13px;
  }

  input[type="text"]{
    min-height:50px;
    padding:14px 15px;
    border-radius:15px;
    font-size:16px;
  }

  .inwrap .pre{
    left:15px;
  }

  input.hasPre{
    padding-left:32px;
  }

  .hint{
    font-size:10.5px;
  }

  .btn{
    min-height:50px;
    padding:14px 16px;
    border-radius:16px;
  }

  .timerline{
    margin-top:13px;
    font-size:10px;
  }

  .task{
    gap:10px;
    margin-bottom:9px;
    padding:11px 12px;
    border-radius:16px;
  }

  .task .icon{
    width:34px;
    height:34px;
    border-radius:11px;
  }

  .task .title{
    font-size:13px;
  }

  .task .open{
    padding:8px 10px;
    border-radius:11px;
  }

  #walletPreview{
    gap:11px;
    padding:12px;
    border-radius:16px;
  }

  #walletPreview canvas{
    width:42px;
    height:42px;
    border-radius:13px;
  }

  .addr{
    font-size:11px;
  }

  .post{
    padding:15px;
    border-radius:18px;
  }

  .codebox{
    padding:13px 14px;
    border-radius:16px;
  }

  .fine{
    gap:8px;
    margin-top:15px;
  }

  #foot{
    padding:0 16px calc(22px + env(safe-area-inset-bottom));
    line-height:1.55;
  }

  #toast{
    bottom:calc(16px + env(safe-area-inset-bottom));
    max-width:calc(100vw - 24px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width:390px){
  #stage{
    padding-left:10px;
    padding-right:10px;
  }

  .step{
    padding:25px 16px 23px;
  }

  h1{
    font-size:24px;
  }

  .sub{
    font-size:13px;
  }

  .task .small{
    display:none;
  }

  .fine{
    flex-direction:column;
  }

  .fine > div{
    padding:11px 13px;
  }

  .codebox b{
    font-size:14px;
  }
}

@media (max-height:700px) and (min-width:561px){
  #stage{
    justify-content:flex-start;
    padding-top:92px;
  }
}

@media (hover:none){
  #card:hover,
  #wordmark:hover,
  #wave:hover,
  .task:hover,
  .task .open:hover,
  .btn:hover,
  input[type="text"]:hover{
    transform:none;
  }
}