/*
 * 移动端内置浏览器紧凑布局 v1
 *
 * 微信、支付宝等内置浏览器会占用顶部标题栏和底部工具栏，iPhone 393px 宽设备
 * 的实际网页可见高度常只有约 650-720px。这里按“真实视口高度”切换布局，
 * 不依赖 UA，也不会影响 800px 以上的完整屏设计。
 */

/* 微信等容器已有原生标题栏，H5 内不再重复显示品牌头。 */
:root {
  --h5-header-height: 0px;
}

.fixed-header {
  display: none;
}
/*
 * iOS/WKWebView 会在聚焦小于 16px 的输入框时自动放大页面。
 * 固定为 16px，同时约束行盒和光标颜色，避免出现过长的黑色插入线。
 */
@media (max-width: 430px) {
  button,
  input,
  .phone-page {
    touch-action: manipulation;
  }

  .nickname-field input {
    font-size: 16px;
    line-height: 20px;
    caret-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-size-adjust: 100%;
  }
}
@media (max-width: 430px) and (max-height: 760px) {
  :root {
    --h5-page-pad: 14px;
    --h5-header-height: 0px;
    --h5-footer-height: 64px;
  }

  .phone-page {
    background: linear-gradient(180deg, var(--h5-cream) 0 178px, #fff 252px, #fff 100%);
  }

  .phone-page::before {
    top: calc(20px + env(safe-area-inset-top));
    right: 8px;
    width: 96px;
    height: 67px;
  }

  .fixed-header {
    padding: calc(3px + env(safe-area-inset-top)) 22px 0;
  }

  .brand-row {
    width: 116px;
    height: 48px;
    background-size: 116px auto;
  }

  .scroll-area {
    padding-bottom: 18px;
  }

  .step-line {
    column-gap: 6px;
    margin: 5px 6px 7px;
    font-size: clamp(11px, 3.25vw, 14px);
  }

  .step-line span { gap: 5px; }

  .step-line b {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    font-size: 12px;
  }

  .upload-shell {
    padding: 9px 10px 10px;
    border-radius: 18px;
    box-shadow: 0 6px 17px rgba(86,43,29,.075);
  }

  .upload-trigger {
    height: 160px;
    padding: 6px 12px;
    border-radius: 10px;
  }

  .upload-trigger::before {
    right: 6%;
    bottom: -48px;
    left: 6%;
    height: 126px;
  }

  .upload-placeholder { gap: 3px; }

  .upload-stickers {
    width: 162px;
    height: 62px;
    margin: -4px 0 -3px;
  }

  .upload-title { font-size: 16px; }
  .upload-help { font-size: 11px; }

  .upload-main-btn {
    width: 158px;
    height: 36px;
    margin-top: 3px;
    gap: 7px;
    font-size: 15px;
  }

  .upload-main-btn::before {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }

  .nickname-field {
    height: 44px;
    margin-top: 8px;
  }

  .nickname-field::before {
    width: 31px;
    height: 32px;
    flex-basis: 31px;
    margin-left: 7px;
  }

  .nickname-field input {
    padding-left: 8px;
    font-size: 16px;
    line-height: 20px;
  }

  .nickname-count {
    right: 12px;
    font-size: 14px;
  }

  .style-section { margin-top: 7px; }
  .style-head { margin: 0 3px 6px; }
  .section-title { font-size: 19px; }
  .section-subtitle { font-size: 11px; }

  .category-tabs {
    gap: 7px;
    padding-bottom: 8px;
  }

  .category-tab {
    min-width: 80px;
    height: 31px;
    padding-right: 14px;
    padding-left: 14px;
    font-size: 13px;
  }

  .template-grid {
    column-gap: 8px;
    row-gap: 8px;
  }

  .fixed-footer {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }

  .fixed-footer::after {
    height: 7px;
    background-size: 430px 7px;
  }

  .free-btn {
    height: 44px;
    gap: 7px;
    font-size: 17px;
    box-shadow: 0 6px 14px rgba(171,8,23,.15);
  }

  .free-btn::before {
    width: 36px;
    height: 26px;
    flex-basis: 36px;
  }
}

/* 极矮横向工具栏组合：再释放少量高度，仍保留 44px 触控热区。 */
@media (max-width: 430px) and (max-height: 680px) {
  :root {
    --h5-header-height: 0px;
    --h5-footer-height: 60px;
  }

  .fixed-header {
    padding-top: calc(1px + env(safe-area-inset-top));
  }

  .brand-row {
    width: 110px;
    height: 44px;
    background-size: 110px auto;
  }

  .upload-trigger { height: 152px; }
  .upload-stickers { width: 154px; height: 58px; }

  .fixed-footer {
    padding-top: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}