/* GSend 的示意動畫（不是實機畫面）：左邊電腦揀檔案、出數字碼，右邊手機打數字、收檔案。動畫在 send.js。
   大小跟 figure 的闊度走（cqw）；闊度和 GInput 的 .chat 一樣，兩段示意右邊的文字對齊。舞台是 100 × 52 cqw，弧線 svg 的 viewBox 用同一套座標。
   沒有 .off 的時候就是傳完的畫面：沒有 JS、選了「減少動態效果」時停在這裏。 */
.send-demo { margin: 0; width: clamp(330px, 32vw, 420px); container-type: inline-size; --sd-shadow: var(--pink-soft); }
.send-demo figcaption { margin-top: 10px; font-family: var(--zh); font-size: 14px; line-height: 1.3; color: var(--muted); }
.send-demo figcaption::before { content: ""; display: inline-block; width: 1.6em; border-top: 2px dashed var(--muted); vertical-align: .3em; margin-right: 7px; }
.sd-stage { position: relative; height: 52cqw; -webkit-user-select: none; user-select: none; }

/* 電腦：墨線屏幕加底座 */
.sd-screen { position: absolute; left: 1cqw; top: 14cqw; width: 48cqw; height: 30cqw; padding: 2.4cqw 3cqw; border: 3px solid var(--ink); border-radius: 2.4cqw; background: var(--paper-2); box-shadow: 5px 5px 0 var(--sd-shadow); }
.sd-base { position: absolute; left: -2cqw; top: 44cqw; width: 54cqw; height: 4cqw; border: 3px solid var(--ink); border-radius: .8cqw .8cqw 2.4cqw 2.4cqw; background: #E3ECF3; }
/* 手機 */
.sd-phone { position: absolute; left: 70cqw; top: 2cqw; width: 28cqw; height: 46cqw; padding: 5.6cqw 1.8cqw 2cqw; border: 3px solid var(--ink); border-radius: 4.4cqw; background: var(--paper-2); box-shadow: 5px 5px 0 var(--sd-shadow); }
.sd-phone::before { content: ""; position: absolute; left: 50%; top: 2cqw; width: 7cqw; height: 1.1cqw; margin-left: -3.5cqw; border-radius: 1cqw; background: var(--ink); }

.sd-h { font-family: var(--zh); font-size: 3.3cqw; line-height: 1; color: var(--muted); }
html[lang="en"] .sd-h { font-family: var(--body); font-weight: 700; }
/* 檔案：紙仔圖示加檔名 */
.sd-file { display: inline-flex; align-items: center; gap: 1cqw; margin-top: 2.4cqw; padding: 1.1cqw 1.4cqw; border: 2px solid var(--ink); border-radius: 1.6cqw; background: #fff; font-family: var(--zh); font-size: 3.1cqw; line-height: 1; white-space: nowrap; transform-origin: 0 50%; }
html[lang="en"] .sd-file { font-family: var(--body); font-weight: 700; }
.sd-file i { flex: none; width: 2.3cqw; height: 2.9cqw; border: 2px solid var(--ink); border-radius: .3cqw 1cqw .3cqw .3cqw; background: var(--pink); }
/* 數字碼：大字 */
.sd-code { display: flex; align-items: baseline; gap: 1.8cqw; margin-top: 3cqw; }
.sd-code small { margin-right: .6cqw; font-family: var(--zh); font-size: 3cqw; color: var(--muted); }
html[lang="en"] .sd-code small { font-family: var(--body); font-weight: 700; }
.sd-code b { font-family: var(--display); font-weight: 400; font-size: 7.4cqw; line-height: 1; color: var(--ink); }
/* 手機上的四格：逐個數字打進去 */
.sd-boxes { display: flex; gap: .8cqw; margin-top: 2.6cqw; }
.sd-boxes span { flex: 1 1 0; height: 6.6cqw; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 1.1cqw; background: #fff; font-family: var(--display); font-size: 4.2cqw; line-height: 1; transition: background-color .25s ease, color .08s ease; }
.sd-boxes span.off { color: transparent; }
.sd-boxes span.hit { background: var(--pink); }
.sd-done { display: flex; align-items: center; gap: .8cqw; margin-top: 2.4cqw; font-family: var(--zh); font-size: 3.3cqw; line-height: 1; color: var(--red-text); transform-origin: 0 50%; }
html[lang="en"] .sd-done { font-family: var(--body); font-weight: 800; }
.sd-done svg { width: 3.8cqw; height: 3.8cqw; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* 兩部裝置中間：紅色虛線弧，傳送時虛線向手機那邊流 */
.sd-arc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sd-arc path { fill: none; stroke: var(--red); stroke-width: .75; stroke-linecap: round; stroke-linejoin: round; }
.sd-arc path:first-child { stroke-dasharray: 1.4 2.2; }
.sd-arc.flow path:first-child { animation: sd-flow .5s linear infinite; }
@keyframes sd-flow { to { stroke-dashoffset: -3.6; } }
.sd-label { position: absolute; left: 50cqw; top: 15.5cqw; width: 19cqw; text-align: center; font-family: var(--hand); font-size: 3.5cqw; line-height: 1.15; color: var(--red-text); transform: rotate(-4deg); }

/* 飛過去的檔案：只在動畫時出現，位置由 send.js 按弧線設定 */
.sd-fly { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; pointer-events: none; box-shadow: 3px 3px 0 var(--sd-shadow); }
.sd-fly.show { opacity: 1; }

/* 出場：.off 收起，拿走就彈出來 */
.sd-pop { transition: opacity .18s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.sd-pop.off { opacity: 0; transform: scale(.55); }
@media (prefers-reduced-motion: reduce) { .sd-pop, .sd-boxes span { transition: none; } .sd-arc.flow path:first-child { animation: none; } }