/* ============================================================================
   右侧快捷联系栏 + 申请演示弹窗
   ----------------------------------------------------------------------------
   只在首页引入（home.html 内联），样式不依赖首页其它组件，挪到全站也能用。

   位置：右侧垂直居中，与右下角的问答入口错开（那个在底角，这个在中线）。
   层级：120 —— 压过页面内容与深色区块，低于页头（100 之上但不相交）
        和问答入口（150）。弹窗 210，与问答面板同层。
   ========================================================================== */

/* ------------------------------------------------------------ 01 栏体 */

.rail {
  position: fixed;
  top: 50%;
  right: var(--sp-2);
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: var(--sh-2);
  transform: translateY(-50%);
}

/* 项与项之间的细线：只画中间一截，不顶到圆角边上，看起来像分隔而不是表格线 */
.rail__item { position: relative; }
.rail__item + .rail__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--c-line);
}

.rail__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  padding: 14px 2px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--c-text-2);
  text-align: center;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: color var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-out);
}
.rail__btn .icon { color: var(--c-text-2); transition: color var(--t-fast) var(--e-out); }

/* 展开条件是 hover 或键盘焦点，用 :focus-visible 而不是 :focus-within。
   :focus-within 会被鼠标点击后的残留焦点命中：点过「电话咨询」再移到
   「微信咨询」，电话的面板还黏在那里，和微信的面板叠在一起关不掉。
   :has(:focus-visible) 只在键盘导航时成立，鼠标点击不触发。 */
.rail__item:hover .rail__btn,
.rail__item:has(:focus-visible) .rail__btn {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}
.rail__item:hover .rail__btn .icon,
.rail__item:has(:focus-visible) .rail__btn .icon { color: var(--c-primary); }

/* 键盘焦点必须看得见；鼠标点击不显示外圈 */
.rail__btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.rail__label { letter-spacing: .02em; }

/* -------------------------------------------------------- 02 悬浮信息 */

/* 透明桥：面板与栏体之间留 16px 空隙，鼠标穿过这段时不掉 hover。
   ::after 是 .rail__item 自己的盒子，指到它等同于指到这一项。 */
.rail__item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: var(--sp-2);
}

/* 面板挂在项的左侧，右边缘留 16px 空隙，看起来是浮出来的卡片 */
.rail__pop {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--sp-2));
  z-index: 1;
  width: max-content;
  max-width: 268px;
  padding: var(--sp-2) var(--sp-3);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(4px);
  transition: opacity var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out),
              visibility var(--t-fast);
}

/* 指向栏体的三角。方形旋转 45°，只留上、右两条边 */
.rail__pop::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  right: -6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid var(--c-line);
  border-right: 1px solid var(--c-line);
  transform: rotate(45deg);
}

.rail__item:hover .rail__pop,
.rail__item:has(:focus-visible) .rail__pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
}

.rail__pop-kicker {
  margin: 0 0 2px;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.rail__pop-title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-ink);
}
.rail__pop-tel {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--c-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--e-out);
}
.rail__pop-tel:hover { color: var(--c-primary); }
.rail__pop-id {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  color: var(--c-ink);
}
.rail__pop-note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-2);
}
.rail__qr-btn {
  display: block;
  margin: 0 auto var(--sp-1);
  padding: 0;
  line-height: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: zoom-in;
}
.rail__qr-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
.rail__qr {
  display: block;
  width: 150px;
  height: 150px;
}

/* 二维码放大层：点图或点空白处关闭，Esc 也能关 */
.rail-qr-zoom {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  background: rgba(16, 23, 32, .72);
  opacity: 0;
  cursor: zoom-out;
  transition: opacity var(--t-base) var(--e-out);
}
.rail-qr-zoom.is-on { opacity: 1; }
.rail-qr-zoom img {
  width: min(320px, 78vw);
  height: auto;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--sh-3);
}
.rail__pop .btn { margin-top: var(--sp-2); }
/* 两个按钮上下叠时收紧间距，别让它们看起来分属两块内容 */
.rail__pop .btn + .btn { margin-top: 6px; }

/* ------------------------------------------------------------ 03 提示 */

.rail-toast {
  position: fixed;
  right: var(--sp-2);
  /* 落在问答入口上方，两个浮层不叠字 */
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 210;
  max-width: 260px;
  padding: 10px 16px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: #fff;
  background: rgba(16, 23, 32, .92);
  border-radius: var(--r-full);
  box-shadow: var(--sh-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.rail-toast.is-on { opacity: 1; transform: none; }

/* -------------------------------------------------- 04 申请演示弹窗 */

.dmodal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}
.dmodal[hidden] { display: none; }

.dmodal__mask {
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 21, .56);
  opacity: 0;
  transition: opacity var(--t-base) var(--e-out);
}
.dmodal.is-open .dmodal__mask { opacity: 1; }

.dmodal__sheet {
  position: relative;
  width: min(520px, 100%);
  max-height: min(88vh, 820px);
  overflow-y: auto;
  /* 下内边距交给吸底区自己撑，否则滚动时按钮浮在 padding 之上会留白 */
  padding: var(--sp-4) var(--sp-4) 0;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.dmodal.is-open .dmodal__sheet { opacity: 1; transform: none; }

.dmodal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--c-text-3);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.dmodal__close:hover { color: var(--c-ink); background: var(--c-bg-2); }

.dmodal__head { margin-bottom: var(--sp-2); padding-right: var(--sp-4); }
.dmodal__kicker {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-accent-ink);
}
.dmodal__title {
  margin: 0 0 var(--sp-1);
  font-size: 22px;
  line-height: 1.35;
  color: var(--c-ink);
}
.dmodal__lead {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}

/* 弹窗里的字段比正文页紧凑一档：1366×768 的笔记本上也要能一屏看完 */
.dmodal .field { margin-bottom: 14px; }
.dmodal .grid { margin-bottom: 14px; }
.dmodal .grid .field { margin-bottom: 0; }
.dmodal .inq-mode { margin-bottom: 14px; }
.dmodal .inq-mode__item { padding: 12px 6px; }
.dmodal .textarea { min-height: 76px; }

/* 选填项折叠：省下的高度正好让 1366×768 一屏放完，不用滚。
   用原生 details，键盘和读屏都直接可用，不用脚本。 */
.dmodal__more {
  margin: var(--sp-2) 0 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--c-line);
}
.dmodal__more-sum {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--e-out);
}
.dmodal__more-sum::-webkit-details-marker { display: none; }
.dmodal__more-sum:hover { color: var(--c-primary); }
.dmodal__more-sum:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* 展开指示：小折角，展开后翻上来 */
.dmodal__more-sum::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--e-out);
}
.dmodal__more[open] .dmodal__more-sum::after {
  margin-top: 2px;
  transform: rotate(-135deg);
}
.dmodal__more-hint {
  padding: 1px 6px;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  background: var(--c-bg-2);
  border-radius: var(--r-full);
}
.dmodal__more-body { padding-top: 14px; }
.dmodal__more-body .field:last-child { margin-bottom: 0; }

/* 提交区：只留一条分隔线，不做吸底。
   折叠选填后内容本身放得下（1366×768 实测约 607px），吸底没有收益；
   展开选填时吸底反而会压住「期望时间」半个输入框，看着像排版断了。
   回到正常流，滚到底就是按钮，行为最直白。 */
.dmodal__foot {
  margin-top: var(--sp-2);
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
}

.dmodal__alert {
  margin: 0 0 var(--sp-2);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #B4232A;
  background: #FDF1F1;
  border: 1px solid #F3C9C9;
  border-radius: var(--r-xs);
}
.dmodal__alert[hidden] { display: none; }

.dmodal__done {
  padding: var(--sp-3) 0;
  text-align: center;
}
.dmodal__done[hidden] { display: none; }
/* 提交完把标题收掉：完成态还顶着"留个联系方式"会让人以为没提交成功 */
.dmodal__sheet.is-done .dmodal__head { display: none; }
.dmodal__done-icon {
  display: inline-flex;
  color: var(--c-success);
  margin-bottom: var(--sp-1);
}
.dmodal__done-title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h3);
  color: var(--c-ink);
}
.dmodal__done-text {
  margin: 0 auto var(--sp-3);
  max-width: 30em;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
}
/* 电话不能被折成两行，否则看着像两个号码 */
.dmodal__done-text a { white-space: nowrap; }

/* ---------------------------------------------------------- 05 响应式 */

/* 1360 以下：容器右侧留白只剩 80px 左右，栏体收成纯图标（56px），
   避免压住卡片右边缘。文字标签隐藏后，按钮靠 aria-label 保留可访问名。 */
@media (max-width: 1359px) {
  .rail { right: 6px; padding: 4px; }
  .rail__btn { width: 44px; padding: 12px 0; }
  .rail__label { display: none; }
  .rail__item + .rail__item::before { left: 8px; right: 8px; }
}

/* 1280 以下内容区已贴边，没有可让的空间，整栏隐藏；
   移动端本来也有右下角问答入口和页头「联系我们」。 */
@media (max-width: 1279px) {
  .rail { display: none; }
}

@media (max-width: 560px) {
  .dmodal { padding: 0; align-items: flex-end; }
  .dmodal__sheet {
    width: 100%;
    max-height: 92vh;
    padding: var(--sp-3) var(--sp-3) 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .dmodal__foot { padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); }
  .dmodal__head { padding-right: var(--sp-3); }
  .inq-mode__grid { grid-template-columns: 1fr; }
}

/* 减少动效：保留状态切换，去掉位移 */
@media (prefers-reduced-motion: reduce) {
  .rail__pop,
  .dmodal__sheet,
  .dmodal__mask,
  .rail-toast { transition: none; }
  .rail__pop { transform: translateY(-50%); }
}

@media print {
  .rail,
  .rail-toast,
  .dmodal { display: none !important; }
}