/* style-mobile.css — 窄屏（≤768px），按常见 iPhone / Android 习惯留白：16px 级边距 + 不叠写 section/#hero */
/* 与 style.css 配套；勿改桌面断点 */

@media(max-width:768px){
  /* —— 导航（顶栏约 62px 高，左右与内容区对齐） —— */
  nav{
    padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px));
    overflow-x:hidden;
    overflow-y:hidden;
    transition:transform .3s cubic-bezier(0.4,0,0.2,1),opacity .22s ease;
    will-change:transform;
  }
  nav.nav--bar-away{
    transform:translateY(calc(-100% - 1px));
    pointer-events:none;
    opacity:0;
  }
  nav.nav--bar-away ~ #main-content #hero{
    padding-top:max(16px,calc(10px + env(safe-area-inset-top,0px)));
  }
  .nav-menu-btn{display:flex}
  .nav-links{display:none}
  .nav-right{flex-shrink:1;min-width:0;gap:8px}
  .status-bar{flex-shrink:1;min-width:0;max-width:min(38vw,140px)}
  .status-text{font-size:11px;max-width:min(120px,36vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* —— 首屏：单独写 #hero，避免与 section 共用 shorthand 造成边距怪 —— */
  #hero{
    overflow-x:hidden;
    min-width:0;
    box-sizing:border-box;
    padding-top:calc(72px + env(safe-area-inset-top,0px));
    padding-bottom:max(40px,env(safe-area-inset-bottom,0px));
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
    min-height:100svh;
    min-height:100dvh;
  }

  /* —— 各 section：市面常见上下约 72–80px、左右 16 + 安全区 —— */
  section{
    box-sizing:border-box;
    padding-top:72px;
    padding-bottom:72px;
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
  }

  /* —— 作品区 —— */
  .work-top{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    margin-bottom:32px;
    padding:16px max(16px,env(safe-area-inset-left,0px)) 16px max(16px,env(safe-area-inset-right,0px));
  }
  .work-top .btn-s{align-self:flex-start}
  .svc-grid{grid-template-columns:1fr}
  .port-card:not(.add){width:min(340px,calc(100vw - 32px))}
  .port-grid{padding:10px max(16px,env(safe-area-inset-left,0px)) 28px max(16px,env(safe-area-inset-right,0px))}
  .carousel-arrow{width:36px;height:36px;font-size:20px}
  .carousel-prev{left:8px}
  .carousel-next{right:8px;left:auto}
  .proc-steps{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  footer{flex-direction:column;gap:14px;text-align:center;padding:28px max(16px,env(safe-area-inset-left,0px))}

  /* —— 首屏文案区 —— */
  .nav-logo{min-width:0;gap:10px}
  .nav-logo > div:last-child{min-width:0;overflow:hidden}
  .nav-brand{font-size:clamp(14px,4.2vw,18px)}
  .nav-sys{
    display:block;
    font-size:10px;
    letter-spacing:.08em;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:min(46vw,200px);
  }
  .boot-sequence{max-width:100%;overflow-x:hidden;font-size:12px;margin-bottom:20px;line-height:1.75}
  .boot-line{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
  .hero-tagline{line-height:1.5;overflow-wrap:anywhere;margin-bottom:12px}
  .hero-desc{
    max-width:none;
    font-size:15px;
    padding-left:12px;
    margin-bottom:28px;
    line-height:1.75;
  }
  .hero-proof{margin:-12px 0 24px;gap:8px}
  .hero-proof span{width:100%;font-size:11px;padding:7px 9px}
  .hero-title,.hero-title.hero-title--dual{font-size:clamp(30px,7vw,50px)}
  .hero-title.hero-title--dual .hero-title-en{font-size:1.14em;line-height:.98}
  .hero-title.hero-title--dual .hero-title-cn{font-size:clamp(14px,3.6vw,18px)}
  .hero-actions{gap:12px;margin-bottom:32px}
  .hero-left{width:100%;min-width:0;max-width:100%;overflow-x:visible;overflow-y:hidden}

  /* —— 首屏三格：与桌面同一逻辑（grid），仅缩小内边距；小屏仍无外壳线框 —— */
  .metric{padding:14px 6px;box-sizing:border-box}
  .metric-val{font-size:clamp(18px,5.5vw,24px)}
  .metric-pct{font-size:clamp(18px,5.5vw,24px)}
  .metric-lbl{font-size:10px;letter-spacing:.06em;line-height:1.35}
  #hero .metrics-shell{border:none!important;background:transparent!important;outline:none;box-shadow:none!important;overflow:visible}
  #hero .metrics{
    display:grid;
    width:100%;
    min-width:0;
    max-width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:0;
    box-sizing:border-box;
    padding:0 4px;
    border:none!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible;
  }
  #hero .metrics .metric{
    min-width:0;
    text-align:center;
    padding:12px 6px;
    background:rgba(4,12,20,.55)!important;
    border:none!important;
    box-shadow:none!important;
    border-radius:6px;
  }
  #hero .metrics .metric:not(:first-child){border-left:none}
  .metrics .metric:first-child{padding-left:6px}
  .metrics .metric:last-child{padding-right:6px}

  /* —— 联系 / 聊天 —— */
  #contact{
    padding-top:80px;
    padding-bottom:72px;
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
  }
  #chat-section{
    padding-left:max(16px,env(safe-area-inset-left,0px));
    padding-right:max(16px,env(safe-area-inset-right,0px));
  }
  .foot-links{flex-wrap:wrap;justify-content:center;row-gap:10px}
  #chat-section .chat-layout{min-width:0}
  .particle-panel.chat-widget-wrap{width:100%;max-width:100%;min-width:0;overflow-x:hidden;box-sizing:border-box}
  .particle-inner.chat-widget{max-width:100%;min-width:0;overflow-x:hidden;box-sizing:border-box}
  .chat-widget{max-width:100%;overflow-x:hidden}
  .chat-header{padding:12px 14px;gap:8px;flex-wrap:wrap}
  .chat-title-info{min-width:0;flex:1 1 auto}
  .chat-agent-name{font-size:clamp(11px,3vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chat-messages{min-height:220px;max-height:min(48vh,380px);padding:14px 12px;min-width:0}
  .msg{min-width:0}
  .chat-messages{align-items:stretch}
  .msg{width:100%;max-width:100%;box-sizing:border-box}
  .msg.ai,.msg.user{align-items:flex-start}
  .msg.ai .msg-bubble,.msg.user .msg-bubble{flex:1 1 auto;min-width:0;max-width:none;word-break:normal;overflow-wrap:break-word}
  .msg.ai .msg-bubble{clip-path:none}
  .chat-suggestions{padding:12px 14px;gap:8px;row-gap:8px}
  .chat-sug{font-size:11px;letter-spacing:.02em;padding:7px 9px;max-width:100%;box-sizing:border-box}
  .chat-foot-note{padding:12px 14px 14px;font-size:11px;overflow-wrap:anywhere;word-break:break-word}
  .chat-input-area{flex-direction:column;align-items:stretch}
  .chat-input{width:100%;min-height:84px;min-width:0}
  .chat-send{
    border-left:none;
    border-top:1px solid rgba(0,212,255,0.36);
    width:100%;
    min-height:48px;
    justify-content:center;
  }
}

@media(max-width:768px) and (prefers-reduced-motion:reduce){
  nav{transition:none!important}
  nav.nav--bar-away{transform:none;opacity:0}
}

@media(max-width:480px){
  .port-card:not(.add){width:min(280px,calc(100vw - 28px))}
  .port-card.add{width:200px;min-height:240px}
}

@media(max-width:380px){
  #hero .metrics{grid-template-columns:1fr;gap:10px}
  #hero .metrics .metric{text-align:left;padding:14px 12px}
  .nav-sys{max-width:min(40vw,160px)}
}

@media(max-width:420px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-p,.hero-actions .btn-s{width:100%;justify-content:center}
}

@media(max-width:560px){
  .intro-boot__hud{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top))}
  .intro-boot__skip{top:max(44px,calc(40px + env(safe-area-inset-top)));right:max(12px,env(safe-area-inset-right))}
  .intro-boot__hero{left:max(14px,env(safe-area-inset-left));max-width:min(480px,calc(100vw - 28px))}
  .intro-boot__prog-wrap{bottom:max(96px,calc(72px + env(safe-area-inset-bottom)));width:min(400px,calc(100vw - 28px))}
  .intro-boot__term{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto;bottom:max(8px,env(safe-area-inset-bottom));max-height:min(28vh,150px);font-size:10px}
  .intro-boot__final{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}