/*
   在线报价浮窗（前缀 qf = quote float）
   ---------------------------------------------------------------------------
   定位策略：浮窗挂在 body 下 + position:fixed，初始坐标由 JS 按当前页 hero 的
   几何位置算出（落到 hero 内右侧），而不是把节点塞进 .page-hero 里做 absolute。
   原因：.page-hero 有 overflow:hidden，absolute 子节点一旦被拖出边界就会被裁掉，
   且会随页面滚走 —— 与「自由拖动 + 随时可点」冲突。fixed 让浮窗永远可点，
   首屏又恰好落在 hero 区域内，两个诉求同时成立。

   层级：z-index 88 —— 低于「回到顶部」（90）、低于固定头部（120）、低于
   报价弹窗（1200）；高于正文内容。不抢既有交互。
*/

/* ---------- 外壳 ---------- */
.qf {
    position: fixed; left: 0; top: 0; z-index: 88;
    /* 位置由 JS 写入 --qf-x / --qf-y；用 transform 而非 left/top，拖动时不触发布局 */
    transform: translate3d(var(--qf-x, -999px), var(--qf-y, -999px), 0);
    will-change: transform;
    visibility: hidden; opacity: 0;
    -webkit-user-select: none; user-select: none;
    touch-action: none;                 /* 拖动要接管触摸手势，否则触摸时会被页面滚动抢走 */
    font-family: inherit; line-height: 1.5;
}
.qf.is-ready { visibility: visible; opacity: 1; transition: opacity .36s var(--ease), transform .26s var(--ease-out); }
/* 拖动 / 首次定位：不要过渡，必须跟手 */
.qf.is-drag, .qf.is-place { transition: none; }
.qf.is-drag { cursor: grabbing; }

/* ---------- 折叠态：胶囊按钮 ---------- */
.qf-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 13px 0 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px; cursor: grab;
    font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
    color: #2a2113;
    background: linear-gradient(135deg, var(--gold-l), var(--gold));
    box-shadow: 0 16px 34px -16px rgba(8, 8, 14, .68), 0 2px 10px rgba(194, 160, 106, .28);
    transition: transform .24s var(--ease-out), box-shadow .24s var(--ease), filter .24s var(--ease);
}
.qf-btn:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 20px 40px -16px rgba(8, 8, 14, .72), 0 3px 12px rgba(194, 160, 106, .34); }
.qf-btn:active { transform: translateY(0) scale(.98); }
.qf-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qf-ic { width: 16px; height: 16px; flex: none; fill: currentColor; }
.qf-txt { white-space: nowrap; }
/* 六点握把：给出"这个东西可以拖"的视觉暗示（光标 grab 在触屏上不可见） */
.qf-grip { width: 12px; height: 12px; flex: none; fill: currentColor; opacity: .4; transition: opacity .24s var(--ease); }
.qf-btn:hover .qf-grip { opacity: .66; }

/* ---------- 展开态：入口面板 ---------- */
.qf-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 236px; padding: 7px;
    border: 1px solid var(--line-2); border-radius: 16px; background: #fff;
    box-shadow: 0 26px 58px -24px rgba(8, 8, 14, .55);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.97); transform-origin: top right;
    transition: opacity .22s var(--ease), transform .26s var(--ease-out), visibility 0s .26s;
}
.qf[data-open="1"] .qf-panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .22s var(--ease), transform .26s var(--ease-out);
}
/* 浮窗被拖到视口下半部时向上展开；被拖到左侧时向左对齐（均由 JS 判定后加类） */
.qf.is-up .qf-panel { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; }
.qf.is-up[data-open="1"] .qf-panel { transform: none; }
.qf.is-flip .qf-panel { right: auto; left: 0; transform-origin: top left; }
.qf.is-flip.is-up .qf-panel { transform-origin: bottom left; }

.qf-link {
    position: relative; display: block;
    padding: 9px 32px 9px 11px; border-radius: 11px;
    text-decoration: none; color: inherit;
    transition: background-color .2s var(--ease);
}
.qf-link:hover { background: var(--cream); }
.qf-link-main { background: linear-gradient(135deg, rgba(224, 199, 149, .22), rgba(194, 160, 106, .10)); }
.qf-link-main:hover { background: linear-gradient(135deg, rgba(224, 199, 149, .34), rgba(194, 160, 106, .18)); }
.qf-link-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.qf-link-d { display: block; margin-top: 2px; font-size: 11.5px; color: var(--txt-3); }
.qf-link .qf-arrow {
    position: absolute; right: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
    fill: currentColor; color: var(--gold-d); opacity: .62;
    transform: translateX(-3px);
    transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.qf-link:hover .qf-arrow { transform: none; opacity: 1; }

/* ---------- 窄屏：再收一号，并避开右下角（移动端底部常驻栏留白） ---------- */
@media (max-width: 640px) {
    .qf-btn { height: 42px; padding: 0 12px 0 11px; font-size: 13px; gap: 7px; }
    .qf-ic { width: 15px; height: 15px; }
    .qf-panel { width: min(228px, calc(100vw - 36px)); }
    .qf-link-t { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .qf, .qf-btn, .qf-panel, .qf-link, .qf-link .qf-arrow, .qf-grip { transition: none !important; }
}