/* 铅华洗尽 PWA：苹果式页面过渡、胶片下拉刷新、触感与安全区适配。 */
:root{
  --pwa-ease:cubic-bezier(.22,1,.36,1);
  --pwa-spring:cubic-bezier(.16,1.12,.3,1);
  --pwa-ptr-size:38px;
}

/* ---------- 基础手感 ---------- */
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{-webkit-tap-highlight-color:transparent}
a,button,[role="button"],summary,label,.nav-row,.metric-card{touch-action:manipulation}
.pf-msgs,.navigation-workflow,.review-stage,.order-records,.pf-convs,.pf-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
img{max-width:100%}
.order-record,.pf-conv,.priority-list>a,.workflow-stages>a{content-visibility:auto;contain-intrinsic-size:auto 108px}

/* 按下时的轻微回弹，弥补 iOS 网页没有 Taptic 的触感 */
@media(hover:none){
  button:active,.btn:active,.pf-icon:active,.pf-filters button:active,.mobile a:active,.mobile button:active{transform:scale(.965);transition:transform .12s var(--pwa-ease)}
  .nav-row:active,.metric-card:active{filter:brightness(.97);transition:filter .12s ease}
}

/* ---------- 页面切换：跨文档 View Transition 只动内容区；不支持时轻淡入 ---------- */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}

@media(max-width:900px){
  body{overflow-x:hidden}
  /* 底部导航整条用卡片色铺满，安全区不再看起来像一块空页 */
  .mobile{background:var(--card);padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
  .page-content{animation:none!important}
  .shell,.mobile{animation:pwa-fade-in .2s ease-out both}
  @keyframes pwa-fade-in{
    from{opacity:.72}
    to{opacity:1}
  }
}

@media(min-width:901px){
  .page-content{animation:pwa-content-in .2s ease-out both}
  @keyframes pwa-content-in{
    from{opacity:.35;transform:translate3d(0,6px,0)}
    to{opacity:1;transform:none}
  }
}

/* ---------- 下拉刷新：胶片卷轴 ---------- */
#pwaPtr{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 64px);
  z-index:310;display:flex;flex-direction:column;align-items:center;gap:5px;
  width:112px;margin-left:-56px;padding:0;
  opacity:0;pointer-events:none;transform:translate3d(0,-52px,0);
  transition:opacity .16s ease,transform .22s var(--pwa-ease);
  color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.04em;
}
#pwaPtr.on{opacity:1}
#pwaPtr.dragging{transition:none}
#pwaPtr.ready{color:var(--accent)}
#pwaPtr.refreshing{opacity:1;transform:translate3d(0,8px,0)}
.pwa-ptr-dial{position:relative;width:var(--pwa-ptr-size);height:var(--pwa-ptr-size)}
.pwa-ptr-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pwa-ptr-track{fill:none;stroke:var(--line);stroke-width:3}
.pwa-ptr-arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:100.53;stroke-dashoffset:100.53;transition:stroke-dashoffset .08s linear;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 55%,transparent))}
#pwaPtr.ready .pwa-ptr-arc{stroke:#e8c37a}
.pwa-ptr-reel{position:absolute;inset:8px;border-radius:50%;background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--accent) 13%,var(--card)));border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));display:grid;place-items:center;box-shadow:0 2px 10px #0000001f,inset 0 1px 0 #ffffff14}
.pwa-ptr-reel i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.9;box-shadow:0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}
.pwa-ptr-reel i:nth-child(1){transform:translateY(-5px)}
.pwa-ptr-reel i:nth-child(2){transform:translate(4.3px,2.5px)}
.pwa-ptr-reel i:nth-child(3){transform:translate(-4.3px,2.5px)}
.pwa-ptr-text{white-space:nowrap;text-shadow:0 1px 2px var(--bg)}
.pwa-ptr-strip{width:82px;height:7px;border-radius:3px;background:var(--card);border:1px solid var(--line);overflow:hidden;position:relative}
.pwa-ptr-strip::after{content:"";position:absolute;inset:2px 3px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px);opacity:.85}
#pwaPtr.ready .pwa-ptr-strip{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 13%,transparent)}
#pwaPtr.refreshing .pwa-ptr-reel{animation:pwa-reel-spin .8s linear infinite}
#pwaPtr.refreshing .pwa-ptr-arc{stroke-dashoffset:25;animation:pwa-arc-spin .9s linear infinite}
@keyframes pwa-reel-spin{to{transform:rotate(360deg)}}
@keyframes pwa-arc-spin{to{transform:rotate(360deg)}}

/* ---------- 通知设置卡片（信息通知弹窗内） ---------- */
#pwaNotifyCard{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg2)}
#pwaNotifyCard>div{flex:1;min-width:0}
#pwaNotifyCard b{display:block;font-size:13px}
#pwaNotifyCard small{display:block;margin-top:3px;font-size:11px;line-height:1.55;color:var(--muted)}
#pwaNotifyCard button{flex:none;border:1px solid var(--accent);border-radius:10px;background:var(--lab-selected);color:var(--accent);font-size:12px;font-weight:700;padding:8px 11px;min-height:36px}
#pwaNotifyCard button:disabled{opacity:.55}
#pwaNotifyCard[data-state="info"]{border-color:var(--line)}

/* ---------- 通知提示 ---------- */
#pwaNotify{
  position:fixed;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));
  z-index:290;display:none;align-items:center;gap:10px;padding:12px 14px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface-raised,var(--card));
  box-shadow:var(--overlay-shadow,0 12px 36px #00000033)
}
#pwaNotify.show{display:flex;animation:pwa-enter .28s var(--pwa-ease) both}
#pwaNotify>div{flex:1;min-width:0}
#pwaNotify b{display:block;font-size:13px}
#pwaNotify small{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
#pwaNotify button{border:0;background:transparent;color:var(--accent);font-size:12px;font-weight:700;padding:6px 4px}

/* ---------- iPhone 16 Pro Max / 独立运行安全区 ---------- */
@media(display-mode:standalone){
  /* 只保留一次顶部安全区：0 会让顶栏顶到状态栏里，加两次会多出一条空白 */
  body{padding-top:env(safe-area-inset-top,0px)}
  .topbar{top:env(safe-area-inset-top,0px)}
  /* 客服会话页自身不滚动，顶栏不要再被 sticky top 二次下移，直接对齐工作台高度 */
  body[data-page="platform_qianfan"] .topbar{position:relative!important;top:0!important}
  .wrap{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .navigation-dialog{max-height:calc(100dvh - 12px)}
  .pf-chat{height:calc(100dvh - 220px - env(safe-area-inset-bottom,0px))}
}
@media(min-width:430px) and (max-width:460px){
  .wrap{padding-left:16px;padding-right:16px}
  .metric-grid{gap:14px}
  .metric-card{padding:18px}
}
@media(max-width:360px){
  .metric-card{padding:14px}
}

/* ---------- 减少动态效果 ---------- */
@media(prefers-reduced-motion:reduce){
  #pwaPtr,.shell,.mobile,.page-content{transition:none!important;animation:none!important}
}
html[data-reduced-motion="true"] #pwaPtr{transition:none!important;animation:none!important}