/* 咸鱼 2026-10-29：小鱼、价格表两张图卡、联系客服弹窗（xy/32-contact.js）。首页客服卡本身在 xy/41-home.css。 */


@keyframes xy-cs-yw { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg) translateY(-2px); } }
.xy-cs-kao { font-style: normal; margin-left: 2px; -webkit-text-fill-color: var(--sakura-300); color: var(--sakura-300); }
/* 泳道 = 当值那一段；小鱼在里面左右游（掉头时翻面），身子上下轻轻浮，偶尔冒两个小泡泡 */
.xy-cs-lane { position: absolute; top: 0; height: 22px; }
.xy-cs-swimmer { position: absolute; bottom: 0; left: 50%; width: 30px; height: 19px; margin-left: -15px; }
.xy-cs-lane.is-swim .xy-cs-swimmer { left: 0; margin-left: 0; animation: xy-cs-swim 9s ease-in-out infinite; }
.xy-cs-fish { display: block; width: 30px; height: 19px; animation: xy-cs-bob 1.6s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.xy-cs-lane:not(.is-swim) .xy-cs-fish { animation-duration: 3.2s; opacity: .85; }
@keyframes xy-cs-swim {
  0% { left: 0; transform: scaleX(-1); }
  46% { left: calc(100% - 30px); transform: scaleX(-1); }
  50% { left: calc(100% - 30px); transform: scaleX(1); }
  96% { left: 0; transform: scaleX(1); }
  100% { left: 0; transform: scaleX(-1); }
}
@keyframes xy-cs-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-3deg); } }
.xy-cs-bubble { position: absolute; left: 1px; top: 4px; width: 4px; height: 4px; border-radius: 50%; border: 1px solid rgba(190, 215, 250, .8); opacity: 0; animation: xy-cs-bubble 3s ease-out infinite; }
.xy-cs-bubble + .xy-cs-bubble { left: -3px; width: 3px; height: 3px; animation-delay: .5s; }
.xy-cs-lane:not(.is-swim) .xy-cs-bubble { display: none; }
@keyframes xy-cs-bubble { 0%, 55% { opacity: 0; transform: translate(0, 0); } 65% { opacity: 1; } 100% { opacity: 0; transform: translate(-3px, -14px); } }
.xy-cs-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--sakura-100), var(--sakura-300)); color: var(--accent-ink); font-size: 13px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 18px -10px rgba(236, 149, 188, .7); -webkit-tap-highlight-color: transparent; }
.xy-cs-btn svg { width: 15px; height: 15px; }
.xy-cs-btn:active { transform: scale(.97); }
.xy-cs-btn:focus-visible { box-shadow: 0 0 0 2px #1a1218, 0 0 0 4px var(--accent); }

/* ── 价格表：两张图卡，制图长图原样只露顶部（不重画、不压字），游戏名放图下面 ── */
.xy-plain { padding: 0 2px; }
.xy-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xy-pt { display: grid; gap: 8px; text-decoration: none; transition: transform var(--t-base, .2s) var(--ease-out, ease-out); }
.xy-pt-img { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 236, 246, .1), 0 14px 28px -20px rgba(0, 0, 0, .9); }
.xy-pt-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.xy-pt-txt { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 2px; }
.xy-pt-txt b { font: 700 14.5px/1.3 var(--font-serif); letter-spacing: .06em; color: var(--text-1); }
.xy-pt-txt small { font-size: 11.5px; color: var(--text-4); white-space: nowrap; }
.xy-pt:hover { transform: translateY(-2px); }
.xy-pt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 981px) { .xy-pt-img { aspect-ratio: 2 / 1; } }
@media (max-width: 420px) { .xy-pt-txt { display: grid; gap: 1px; } }
@media (prefers-reduced-motion: reduce) { .xy-cs-fish, .xy-cs-swimmer, .xy-cs-bubble { animation: none !important; } }
/* 联系客服弹窗（业主 11-01 第九版）：深莓底 + 细金边，里面不套框。电脑左右两栏（左：标题 + 客服滚轮，右：一句话 + 二维码 + 按钮），手机上下排。
   滚轮：停在正中那位 = 选中（大、亮，名字醒目，班次小字）；两边按离中间的距离（--d，32-contact.js 滚动时算）缩小变淡，班次也显示。
   对齐：手机选中那位在弹窗水平正中；电脑左栏滚轮的中线 = 右栏二维码的中线（两栏等高、内容都垂直居中，二维码上下两行等高）。
   业主 11-01：第八版（选中标签连卡）太难看已撤回，回到第七版底子；名字单独一行居中，当值 = 头像小绿点 + 班次前「当值」。 */
.xy-kf-dlg { box-sizing: border-box; width: min(360px, calc(100vw - 40px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 0; border: 0; border-radius: 28px; color: var(--text-1);
  background: radial-gradient(90% 60% at 100% 0%, rgba(244, 179, 207, .15), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(214, 178, 106, .07), transparent 60%), linear-gradient(180deg, #2b1a25, #170f14);
  box-shadow: inset 0 0 0 1px rgba(214, 178, 106, .24), 0 40px 80px -24px rgba(0, 0, 0, .95); }
.xy-kf-dlg[open] { display: grid; grid-template-columns: minmax(0, 1fr); outline: none; }
.xy-kf-dlg::backdrop { background: rgba(10, 6, 9, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* 关闭：只有一个 × */
.xy-kf-x { all: unset; position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; color: var(--text-3); cursor: pointer; }
.xy-kf-x:hover, .xy-kf-x:focus-visible { color: var(--text-1); }
.xy-kf-x svg { width: 20px; height: 20px; }

.xy-kf-side { display: grid; gap: 10px; min-width: 0; padding-top: 26px; }
.xy-kf-head { display: grid; gap: 4px; padding: 0 52px 0 22px; }
.xy-kf-head small { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(214, 178, 106, .85); }
.xy-kf-head b { font: 700 21px/1.25 var(--font-serif); letter-spacing: .16em; }

/* 滚轮（手机：左右拖） */
.xy-kf-wheel { --kf-it: 118px; position: relative; display: flex; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 16px calc(50% - var(--kf-it) / 2) 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.xy-kf-wheel::-webkit-scrollbar { display: none; }
.xy-kf-it { all: unset; box-sizing: border-box; flex: none; display: grid; justify-items: center; align-content: start; gap: 10px; width: var(--kf-it); padding: 4px; cursor: pointer; text-align: center;
  scroll-snap-align: center; -webkit-tap-highlight-color: transparent; transform: scale(calc(1 - var(--d, 0) * .26)); opacity: calc(1 - var(--d, 0) * .5); will-change: transform, opacity; }
/* 鼠标拖的时候关吸附（松手 JS 平滑吸回），不选中文字 */
.xy-kf-wheel.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.xy-kf-it-t b, .xy-kf-it-m small { transition: color .25s ease; }
.xy-kf-ava { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(160deg, var(--sakura-200), var(--sakura-400)); color: var(--sakura-900); font: 700 19px/1 var(--font-serif); box-shadow: 0 0 0 2px rgba(255, 236, 246, .14); transition: box-shadow var(--t-base, .2s); }
.xy-kf-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.xy-kf-it.is-on .xy-kf-ava::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #6fd6a8; box-shadow: 0 0 0 2.5px #22161d, 0 0 8px rgba(111, 214, 168, .8); }
.xy-kf-it[aria-selected="true"] .xy-kf-ava { box-shadow: 0 0 0 2px rgba(214, 178, 106, .95), 0 0 0 7px rgba(244, 179, 207, .12), 0 12px 26px -8px rgba(236, 149, 188, .7); }
.xy-kf-it-t { display: grid; justify-items: center; gap: 4px; min-width: 0; max-width: 100%; }
/* 名字是主角：衬线大字、白到樱花粉；班次是小灰字（选中那位的班次带一点樱花粉） */
.xy-kf-it-t b { display: flex; align-items: center; gap: 6px; max-width: 100%; font: 700 17px/1.2 var(--font-serif); letter-spacing: .1em; white-space: nowrap; color: var(--text-2); }
.xy-kf-it[aria-selected="true"] .xy-kf-it-t b { background: linear-gradient(180deg, #fff 35%, var(--sakura-200)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xy-kf-it-m { display: flex; align-items: center; gap: 6px; }
.xy-kf-it-m small { font-size: 10.5px; letter-spacing: .08em; color: var(--text-4); white-space: nowrap; }
.xy-kf-it[aria-selected="true"] .xy-kf-it-m small { color: rgba(244, 179, 207, .75); }
.xy-kf-it:focus-visible .xy-kf-ava { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 右栏 / 下半：一句话 → 二维码（白底方块，不再套卡片框）→ 按钮；鱼丸在二维码右下角探头 */
.xy-kf-main { display: grid; justify-items: center; min-width: 0; padding: 20px 28px 30px; }
.xy-kf-pane { display: grid; justify-items: center; gap: 18px; }
.xy-kf-pane[hidden] { display: none; }
.xy-kf-pane:not([hidden]) .xy-kf-code { animation: xy-kf-in-y .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes xy-kf-in-y { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes xy-kf-in-x { from { opacity: 0; transform: translateX(-16px) scale(.97); } }
.xy-kf-say { margin: 0; font: 600 12.5px/1.5 var(--font-ui); letter-spacing: .04em; color: var(--text-2); text-align: center; }
.xy-kf-say { position: relative; }
/* 颜文字挂在句尾外面，居中只算文字（业主 11-01） */
.xy-kf-say .xy-cs-kao { position: absolute; left: 100%; top: 0; white-space: nowrap; }
.xy-kf-code { position: relative; margin: 0; }
.xy-kf-code img { display: block; width: min(176px, 48vw); aspect-ratio: 1; padding: 9px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .95), 0 0 40px -10px rgba(244, 179, 207, .25); }
.xy-kf-yw { position: absolute; z-index: 2; bottom: -12px; right: -46px; width: 54px; height: 54px; pointer-events: none; background: url("./shop/yuwan-wave.webp") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); transform-origin: 50% 90%; animation: xy-cs-yw 3.2s ease-in-out infinite; }
.xy-kf-go { height: 40px; padding: 0 20px; font-size: 13px; }

@media (min-width: 760px) {
  /* 电脑：弹窗 618 宽、标题位置、二维码位置都不动；左栏占满码左边的 314，客服列表往右挪——
     弹窗左边到头像 = 客服文字（选中那位约 150 宽）到二维码 = (314 - 148) / 2 = 83（业主 11-01） */
  .xy-kf-dlg { width: 618px; }
  .xy-kf-dlg[open] { grid-template-columns: minmax(0, 1fr) 216px; padding: 0 88px 0 0; }
  .xy-kf-pane:not([hidden]) .xy-kf-code { animation-name: xy-kf-in-x; }
  /* 左栏：标题钉在左上角，滚轮在整栏垂直居中——这样中线跟右栏一致 */
  .xy-kf-side { align-content: center; padding: 0; }
  .xy-kf-head { position: absolute; z-index: 1; top: 32px; left: 29px; padding: 0; }
  /* 滚轮从弹窗左边起，左边 83 的空也是选中头像光晕的地方，光不会被裁成一刀切 */
  .xy-kf-wheel { --kf-it: 92px; flex-direction: column; height: 320px; overflow: hidden auto; scroll-snap-type: y mandatory; padding: calc((320px - var(--kf-it)) / 2) 0 calc((320px - var(--kf-it)) / 2) 83px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
  .xy-kf-it { display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: auto; height: var(--kf-it); padding: 0; text-align: left; transform-origin: 32px 50%; }
  .xy-kf-ava { width: 64px; height: 64px; font-size: 23px; }
  .xy-kf-it-t { justify-items: start; }
  .xy-kf-it-t b { font-size: 23px; }
  .xy-kf-it-m small { font-size: 11px; }
  /* 右栏 = 二维码宽；一句话比码宽，居中往两边溢出。一句话和按钮两行等高，二维码正好在中线上 */
  .xy-kf-main { align-content: center; padding: 108px 0; }
  .xy-kf-pane { grid-template-rows: 44px auto 44px; gap: 18px; }
  .xy-kf-say { align-self: end; justify-self: center; white-space: nowrap; font-size: 13.5px; }
  .xy-kf-code img { width: 216px; padding: 10px; }
  .xy-kf-yw { bottom: -14px; right: -52px; width: 64px; height: 64px; }
  .xy-kf-go { justify-self: center; white-space: nowrap; height: 44px; padding: 0 24px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .xy-kf-yw { animation: none; } }
/* 「这个码是她的」（业主 11-01 选 A 光晕）：选中头像和二维码同一团樱花粉光；电脑上两栏中间再罩一层很淡的光，把两边连在一起 */
.xy-kf-it[aria-selected="true"] .xy-kf-ava { box-shadow: 0 0 0 2px rgba(214, 178, 106, .95), 0 0 0 7px rgba(244, 179, 207, .12), 0 0 44px 8px rgba(244, 179, 207, .32); }
.xy-kf-code img { box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .95), 0 0 80px 0 rgba(244, 179, 207, .4); }
@media (min-width: 760px) {
  .xy-kf-dlg { background: radial-gradient(62% 36% at 50% 50%, rgba(244, 179, 207, .13), transparent 72%), radial-gradient(90% 60% at 100% 0%, rgba(244, 179, 207, .15), transparent 60%), linear-gradient(180deg, #2b1a25, #170f14); }
}

/* 客服管理 · 今日客服编辑抽屉：客服 + 班次并一行（按内容宽）；二维码卡片复用 .xy-media，缩略图白底整张显示 */
.kf-pair { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 150px); gap: 12px; }
.kf-pair > .field { min-width: 0; }
.kf-qr-tile { margin-top: 12px; }
.drawer .kf-qr-tile .xy-media-thumb { width: 64px; height: 64px; }
.drawer .kf-qr-tile .xy-media-thumb:has(img) { background: #fff; }
.drawer .kf-qr-tile .xy-media-thumb a { display: block; width: 100%; height: 100%; }
.drawer .kf-qr-tile .xy-media-thumb img { object-fit: contain; }