/* assets/css/layout/rail.css — 固定右侧联络浮标：微信二维码 / 电话 / 预约演示 / 回到顶部。
   三档形态沿用基准项目：宽屏整卡常驻；≤1419 收成按钮条并向左展卡；≤1199 落到右下角向上展卡。
   断点写在本文件内而不是 responsive.css：那个文件每页都加载，浮标专属规则放进去是白增体积。 */

.rail{ position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:40; }
.rail-box{ position:relative; }

/* ============ 桌面常驻卡 ============ */
.rail-card{
  width:196px; padding:16px 14px 14px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 20px 32px -28px rgba(15,35,56,.6);
}
.rail-head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--serif); font-weight:700; font-size:15px; margin-bottom:12px;
}
.rail-mark{ display:grid; place-items:center; width:19px; height:19px; background:var(--cinnabar); color:#fff; flex:none; }
.rail-mark .ico{ width:13px; height:13px; }
.rail-qr{ width:100%; height:auto; background:var(--paper); }
.rail-id{
  display:flex; align-items:center; gap:8px; width:100%;
  margin-top:10px; padding:7px 0; text-align:left;
}
.rail-k{ font-size:11.5px; color:var(--muted); flex:none; }
.rail-v{ font-size:13.5px; font-weight:700; }
.rail-hint{ margin-left:auto; font-size:11px; color:var(--muted); opacity:0; transition:opacity .16s ease, color .16s ease; }
.rail-id:hover .rail-hint,.rail-id:focus-visible .rail-hint{ opacity:1; }
.rail-id.is-copied .rail-hint{ opacity:1; color:var(--ok-on-light); }
.rail-id.is-failed .rail-hint{ opacity:1; color:var(--cinnabar); }

.rail-actions{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:grid; gap:8px; }
.rail-act{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 10px; border:1px solid var(--line-dark);
  font-size:13.5px; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, color .15s ease;
}
.rail-act:hover{ border-color:var(--ink); }
.rail-act .ico{ width:16px; height:16px; color:var(--muted); }
.rail-act--primary{ background:var(--cinnabar); border-color:var(--cinnabar); color:#fff; }
.rail-act--primary .ico{ color:#fff; }
.rail-act--primary:hover{ background:var(--cinnabar-d); border-color:var(--cinnabar-d); }

/* 回到顶部：滚动过一屏后才出现，避免首屏就摆一个用不上的按钮 */
.rail-top{
  display:flex; align-items:center; gap:8px; width:100%;
  margin-top:8px; padding:9px 10px; border:1px solid var(--line);
  font-size:13.5px; color:var(--muted);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease, border-color .15s ease;
}
.rail-top.is-visible{ opacity:1; visibility:visible; }
.rail-top:hover{ border-color:var(--ink); color:var(--ink); }
.rail-top .ico{ width:16px; height:16px; }
@media (max-width:1519px){
  .rail-top{ display:none; }
  .rail-btn--top{ display:none; }
  .rail-btn--top.is-visible{ display:flex; }
}

/* ============ 按钮条：≤1419 显示，点击/悬停向左展开卡片 ============ */
.rail-bar{ display:none; flex-direction:column; gap:8px; }
.rail-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:46px; height:54px; background:var(--surface); border:1px solid var(--line);
  font-size:11.5px; color:var(--muted);
  transition:border-color .16s ease, color .16s ease;
}
.rail-btn:hover{ border-color:var(--ink); color:var(--ink); }
.rail-btn .ico{ width:18px; height:18px; }
.rail-btn--primary{ background:var(--cinnabar); border-color:var(--cinnabar); color:#fff; }
.rail-btn--primary .ico{ color:#fff; }
.rail-btn--primary:hover{ background:var(--cinnabar-d); border-color:var(--cinnabar-d); color:#fff; }

/* 断点 1519px：版心 1120 + 两侧留白，只有视口宽到能同时容下版心和 196px 浮标卡时，
   才让卡片常驻。1440 的笔记本上卡片会压到内容上，所以那里改用按钮条形态。
   （基准项目的卡片只有 148px 宽，断点放在 1419；本站卡片更宽，断点相应上移。） */
@media (max-width:1519px){
  .rail-card{
    position:absolute; right:calc(100% + 10px); top:0;
    width:196px; opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
  }
  .rail.is-open .rail-card{ opacity:1; visibility:visible; }
  .rail-bar{ display:flex; }
}

/* ============ 窄屏：落到右下角，卡片向上展开 ============ */
@media (max-width:1199px){
  .rail{ right:16px; top:auto; bottom:16px; transform:none; }
  .rail-card{ right:0; top:auto; bottom:calc(100% + 10px); width:220px; }
  /* 页脚让开浮标，否则最后一行法务信息会被压住 */
  .site-foot{ padding-bottom:104px; }
}

/* ============ 入场 ============ */
@media (prefers-reduced-motion: no-preference){
  .rail-box{ opacity:0; transform:translateY(10px); transition:opacity .55s ease .4s, transform .55s ease .4s; }
  body.is-loaded .rail-box{ opacity:1; transform:none; }
}