/* === 腳邊幽靈貓測驗 share CTA bar ===
 * 手機：fixed footer 雙層（share 上、既有 actions 下）
 * Desktop：in-flow row（接在 result-actions 上方）
 *
 * 品牌色 fallback：ink-900 深藍 / amber-700 暖橘（取自 landing.css，
 * 檔內仍寫 hex fallback，確保此檔單獨載入亦可運作）。
 */

.quiz-overlay__share {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 同一 specificity 下 author 規則永遠蓋過 UA 內建的 [hidden]{display:none}，
 * 沒有這條 preview mode 呼叫 hide() 設的 hidden 屬性不會真的隱藏分享列
 * （比照 quiz-overlay.css 對 __step/__result/__confirm 的既有寫法）。 */
.quiz-overlay__share[hidden] {
    display: none;
}

.quiz-overlay__share-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--amber-700, #c66614);
}

.quiz-overlay__share-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.quiz-overlay__share-btn {
    height: var(--quiz-share-btn-height, 44px);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.quiz-overlay__share-btn:active {
    transform: scale(0.96);
}

/* Threads 的品牌 icon */
.quiz-overlay__share-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* link／check 是描邊圖示（stroke，SVG 上寫 fill="none"），
 * 但上面 fill: currentColor 的 CSS 宣告會蓋過 SVG 自帶的 fill 屬性，
 * 讓兩個圖示被實心填滿、糊成一坨——這裡蓋回 fill: none 還原描邊樣式。 */
.quiz-overlay__share-icon--link,
.quiz-overlay__share-icon--check {
    fill: none;
}

.quiz-overlay__share-btn--threads { background: #000; }
.quiz-overlay__share-btn--copy { background: var(--ink-900, #1b3f7c); }

/* copy 按鈕是 stroke 線稿 icon：上面的 fill:currentColor（為 Threads 實心品牌
 * glyph 而設）是 CSS 規則，會蓋過 SVG 的 fill="none" 屬性，把線稿填成實心
 * 色塊（看起來像兩顆分離的 icon）——線稿必須在 CSS 層級鎖回 fill:none。 */
.quiz-overlay__share-btn--copy .quiz-overlay__share-icon {
    fill: none;
}

/* 複製成功時 icon 切換成打勾（與 toast 同步收合）；
 * 預設只顯示 link icon，[data-copied] 時改顯示 check icon。 */
.quiz-overlay__share-btn--copy .quiz-overlay__share-icon--check { display: none; }
.quiz-overlay__share-btn--copy[data-copied] .quiz-overlay__share-icon--link { display: none; }
.quiz-overlay__share-btn--copy[data-copied] .quiz-overlay__share-icon--check { display: block; }

/* === 手機：share 進駐 sticky footer（雙層） === */
@media (max-width: 767px) {
    /* position:fixed 曾是這裡的做法，但兩層 bar 巢狀在可捲動的 .quiz-overlay__result
     * 裡面、外層 .quiz-overlay__panel 又永遠帶 transform（開合動畫用）——這組合正好
     * 踩中 iOS Safari 已知 bug：fixed 元素巢狀在有 transform 的祖先下時，觸控捲動手勢
     * 常失靈或卡住。改用 sticky：元素留在版面流中隨捲動容器一起佔用空間、不再依賴
     * transform 以外的 containing block，觸控捲動不會被打斷；也因此不再需要量測高度
     * 回填 padding-bottom（sticky 元素本身就會佔用版面空間）。 */
    .quiz-overlay__share {
        position: sticky;
        z-index: 3;
        flex-shrink: 0;
        bottom: calc(
            var(--quiz-footer-action-min-height) + var(--quiz-footer-pad-y) + var(--quiz-footer-pad-y) + env(safe-area-inset-bottom)
        );
        padding: var(--quiz-footer-pad-y) var(--quiz-footer-pad-x) 8px;
        border-top: 1px solid rgba(27, 63, 124, 0.12);
        background: rgba(241, 248, 250, 0.97);
    }
}

/* === Tier：regular / compact / tight === */
.quiz-overlay[data-viewport-tier="regular"] { --quiz-share-btn-height: 44px; }
.quiz-overlay[data-viewport-tier="compact"] { --quiz-share-btn-height: 40px; }
.quiz-overlay[data-viewport-tier="tight"]   { --quiz-share-btn-height: 36px; }

/* Fallback（無 tier，老瀏覽器） */
@media (max-width: 767px) and (max-height: 740px) {
    .quiz-overlay:not([data-viewport-tier]) { --quiz-share-btn-height: 40px; }
}
@media (max-width: 767px) and (max-height: 670px) {
    .quiz-overlay:not([data-viewport-tier]) { --quiz-share-btn-height: 36px; }
}

/* === Desktop：in-flow row（接在 result-actions 上方） === */
@media (min-width: 768px) {
    .quiz-overlay__share {
        margin-top: var(--s-4, 16px);
    }

    .quiz-overlay__share-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 240px;
    }
}

/* === Share toast（複製連結成功／失敗提示） === */
.quiz-share-toast {
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: calc(50% - 60px);
    transform: translate(-50%, 20px);
    padding: 12px 20px;
    background: rgba(26, 29, 46, 0.92);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.quiz-share-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}