/* Piki 入口 · 整屏滑动界面（swipe）
   交互：交流页向右滑 → 整屏滑入选择界面；面板向左滑 → 滑回交流页。
   手感：跟手 + 速度吸附；轻扫即可切换，不做过度阻尼。
   要点：只在面板自身声明 touch-action:pan-y，绝不改 body/#app 的
        touch-action（那会破坏原本正常的上下滚动）。
   回退：从 index.html 移除 swipe.css / swipe.js 两行。 */

#swipe-panel{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;
  background:var(--bg);color:var(--ink);
  padding:calc(30px + env(safe-area-inset-top)) 24px calc(26px + env(safe-area-inset-bottom));
  transform:translate3d(-100%,0,0);
  will-change:transform;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent;
  visibility:hidden;pointer-events:none;
  touch-action:pan-y;                 /* 面板自身可纵向滚，横向归脚本 */
}
#swipe-panel .swipe-head,
#swipe-panel .swipe-list,
#swipe-panel .swipe-foot{width:100%;max-width:480px;flex-shrink:0}
#swipe-panel.is-ready{visibility:visible}
#swipe-panel.is-ready.is-shown{pointer-events:auto}

#swipe-scrim{
  position:fixed;inset:0;z-index:55;
  background:var(--bg);opacity:0;pointer-events:none;
}

.swipe-head{display:flex;align-items:center;gap:10px;padding:2px 2px 0}
.swipe-brand{font:560 17px/1.2 inherit;letter-spacing:-.02em;opacity:.9;white-space:nowrap}
.swipe-brand span{color:var(--muted);opacity:.65;padding-left:2px}

.swipe-list{margin:auto 0;display:flex;flex-direction:column;padding:24px 0}
.swipe-item{
  display:flex;align-items:baseline;gap:14px;
  width:100%;border:0;background:none;color:inherit;text-align:left;
  padding:20px 4px;border-bottom:1px solid var(--line);
  font:inherit;cursor:pointer;position:relative;
  transition:padding-left .22s cubic-bezier(.2,.7,.3,1);
  -webkit-tap-highlight-color:transparent;
}
.swipe-list .swipe-item:first-child{border-top:1px solid var(--line)}
.swipe-item .swipe-icon{color:var(--muted);font-size:17px;width:22px;flex-shrink:0;transition:color .2s ease}
.swipe-item .swipe-label{font-size:19px;letter-spacing:.01em}
.swipe-item .swipe-hint{margin-left:auto;font-size:12px;color:var(--muted);opacity:.8}
.swipe-item:hover{padding-left:10px}
.swipe-item:hover .swipe-icon{color:var(--ink)}
.swipe-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.swipe-foot{padding:2px 2px 0;font-size:12px;color:var(--muted);opacity:.85;
  display:flex;align-items:center;gap:8px}
.swipe-foot .grip{display:inline-block;width:34px;height:3px;border-radius:999px;background:var(--line)}

/* 拖动中：禁用过渡，保证跟手 */
body.swipe-dragging #swipe-panel,
body.swipe-dragging #app{transition:none!important}
body.swipe-anim #swipe-panel,
body.swipe-anim #app{transition:transform .3s cubic-bezier(.22,.68,.24,1)}
body.swipe-anim #swipe-scrim{transition:opacity .3s ease}

@media(min-width:760px){
  #swipe-panel{padding:52px 24px 46px}
  .swipe-item{padding:18px 2px}
  .swipe-item .swipe-label{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  body.swipe-anim #swipe-panel,body.swipe-anim #app,body.swipe-anim #swipe-scrim{transition:none!important}
}


/* ---- 加入会话区后的布局：选项靠上，会话在下方 ---- */
#swipe-panel .swipe-sessions{width:100%;max-width:480px;flex-shrink:0}
.swipe-list{margin:0 0 18px;padding:8px 0 0}
.swipe-list .swipe-item{padding:15px 4px}
.swipe-item .swipe-label{font-size:17.5px}
.swipe-foot{margin-top:14px}
@media(min-width:760px){
  .swipe-list{padding-top:20px}
  .swipe-item{padding:16px 2px}
}