/* ==========================================================================
   nb_mobile.css — 批次頁手機 App 殼層「Chrome Deck」皮膚（只掛 bgswap_new_batch.html）
   透明玻璃框 + 賽博金屬風。桌面（>768px）完全不受影響；即使 ≤768px，
   也要等手機模組在 body 加上 .nbm 才生效（無 JS 時退回原本堆疊版面）。
   金屬邊框技法：透明 border + 雙層背景 padding-box/border-box。
   注意：這些表面之後不可用裸 `background:` 覆寫（shorthand 會清掉邊框層）。
   ========================================================================== */

/* ---- 基礎（所有視口）：手機專屬元素一律隱藏 ---- */
.nbm-only,
.nbm-sheet-head,
#nb-tabbar,
#nb-backdrop,
#nb-template-sheet {
    display: none;
}

/* tailwind.output.css 未編入 sr-only；關閉鈕的無障礙文字需要它 */
.nbm-close .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 768px) {

/* ---- Design tokens ---- */
body.nbm {
    /* 表面 */
    --cyb-ink: #0b1220;
    --cyb-bar-fill: linear-gradient(180deg, rgba(23, 32, 50, .90), rgba(11, 17, 29, .88));
    --cyb-head-fill: linear-gradient(180deg, rgba(25, 34, 52, .97), rgba(12, 18, 30, .97));
    --cyb-sheet-fill: linear-gradient(180deg, rgba(249, 252, 255, .97), rgba(234, 244, 255, .95));
    --cyb-scan: repeating-linear-gradient(0deg, rgba(103, 232, 249, .05) 0 1px, transparent 1px 3px);
    /* 金屬邊 */
    --cyb-steel-edge: linear-gradient(165deg, rgba(236, 244, 252, .95), rgba(148, 166, 190, .55) 28%, rgba(84, 100, 124, .65) 52%, rgba(214, 226, 240, .90) 74%, rgba(120, 140, 165, .60));
    --cyb-gold-edge: linear-gradient(135deg, #f6d38a, #e8a13a 55%, #b97718);
    --cyb-entry-edge: linear-gradient(135deg, rgba(34, 211, 238, .65), rgba(148, 166, 190, .40) 45%, rgba(246, 211, 138, .75));
    /* 強調與文字 */
    --cyb-neon: #22d3ee;
    --cyb-neon-hi: #67e8f9;
    --cyb-gold-ink: #241703;
    --cyb-text-hi: #eaf3fd;
    --cyb-text-lo: rgba(197, 214, 235, .72);
    /* 效果 */
    --cyb-shadow-bar: 0 -8px 28px rgba(8, 14, 26, .35);
    --cyb-shadow-sheet: 0 -18px 60px rgba(8, 14, 26, .40);
    --cyb-shadow-pop: 0 24px 70px rgba(8, 14, 26, .45);
    --cyb-glow-neon: inset 0 0 0 1px rgba(34, 211, 238, .35), 0 0 14px rgba(34, 211, 238, .18);
    --cyb-glow-gold: 0 6px 16px rgba(232, 161, 58, .38);
    --cyb-bevel-hi: inset 0 1px 0 rgba(255, 255, 255, .14);
    /* 動態 */
    --cyb-ease: cubic-bezier(.32, .72, 0, 1);
    --cyb-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- 版面調整 ---- */
body.nbm .nbm-hide { display: none !important; }
body.nbm .nbm-only { display: block; }
body.nbm #app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
body.nbm.nbm-lock { overflow: hidden; }

/* =========================================================================
   Sheet 核心：既有容器升級為固定定位彈出頁
   關閉態 transform 移出畫面 + visibility 隱藏（不繪製、不攔截點擊），
   只動 transform/opacity，離散 visibility 免 JS 計時器。
   ========================================================================= */
body.nbm .nbm-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: max(44px, env(safe-area-inset-top));
    z-index: 80;
    margin: 0;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1.5px solid transparent;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: var(--cyb-sheet-fill) padding-box, var(--cyb-steel-edge) border-box;
    box-shadow: var(--cyb-shadow-sheet);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 14px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(104%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .32s var(--cyb-ease), visibility 0s .32s;
}
body.nbm .nbm-sheet.is-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: transform .32s var(--cyb-ease);
}

/* ---- Sheet 頭部：槍鐵金屬帶 ---- */
body.nbm .nbm-sheet-head {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -14px 14px;
    padding: 16px 10px 10px 16px;
    min-height: 54px;
    background: var(--cyb-scan), var(--cyb-head-fill);
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid rgba(148, 166, 190, .28);
    box-shadow: var(--cyb-bevel-hi);
    color: var(--cyb-text-hi);
}
body.nbm .nbm-sheet-head::after {
    /* 金→青能量細線（靜態） */
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(246, 211, 138, .9) 30%, rgba(34, 211, 238, .8) 70%, transparent);
}
body.nbm .nbm-handle {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8fa3b8, #e6edf5 50%, #8fa3b8);
    box-shadow: inset 0 -1px 1px rgba(11, 18, 32, .4);
}
body.nbm .nbm-sheet-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.nbm .nbm-sheet-kicker {
    font: 600 10px/1 var(--cyb-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cyb-neon-hi);
    opacity: .85;
}
body.nbm .nbm-sheet-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.nbm .nbm-close {
    width: 44px;
    height: 44px;
    margin-left: auto;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 166, 190, .35);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
    color: var(--cyb-text-hi);
    transition: transform .15s ease;
}
body.nbm .nbm-close svg { width: 18px; height: 18px; }
body.nbm .nbm-close:active { transform: scale(.9); }

/* ---- 背幕：深色調 + 底部青光暈（零 blur，效能優先） ---- */
body.nbm #nb-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: radial-gradient(120% 90% at 50% 100%, rgba(34, 211, 238, .10), transparent 55%), rgba(8, 13, 24, .55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s .22s;
}
body.nbm #nb-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease;
}

/* =========================================================================
   說明彈窗：#new-batch-mode-guide 原地升級為置中玻璃卡
   ========================================================================= */
body.nbm .nbm-pop-host {
    position: fixed;
    z-index: 90;
    left: 16px;
    right: 16px;
    top: 50%;
    bottom: auto;
    max-height: min(72dvh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1.5px solid transparent;
    border-radius: 20px;
    background: var(--cyb-sheet-fill) padding-box, var(--cyb-steel-edge) border-box;
    box-shadow: var(--cyb-shadow-pop), 0 0 0 1px rgba(34, 211, 238, .12);
    padding: 0 16px 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(-50% + 12px)) scale(.96);
    transition: transform .2s var(--cyb-ease), opacity .2s ease, visibility 0s .2s;
}
body.nbm .nbm-pop-host.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
    transition: transform .2s var(--cyb-ease), opacity .2s ease;
}
body.nbm .nbm-pop-host .nbm-sheet-head {
    margin: 0 -16px 12px;
    border-radius: 18px 18px 0 0;
    padding-top: 12px;
}
body.nbm .nbm-pop-host .nbm-handle { display: none; }
/* 說明內的標籤藥丸加一點賽博味 */
body.nbm .nbm-pop-host .rounded-full {
    font-family: var(--cyb-mono);
    letter-spacing: .04em;
    border: 1px solid rgba(148, 166, 190, .35);
}

/* =========================================================================
   入口列（範本管理 / 如何選擇批次模式）
   ========================================================================= */
body.nbm .nbm-entry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(236, 246, 255, .88)) padding-box, var(--cyb-steel-edge) border-box;
    box-shadow: 0 4px 14px rgba(56, 116, 186, .10), inset 0 1px 0 rgba(255, 255, 255, .8);
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    transition: transform .15s ease;
}
body.nbm .nbm-entry-row:active { transform: scale(.985); }
body.nbm .nbm-entry-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(34, 211, 238, .16), rgba(34, 211, 238, .05));
    box-shadow: var(--cyb-glow-neon);
    color: #0891b2;
}
body.nbm .nbm-entry-icon svg { width: 16px; height: 16px; }
body.nbm .nbm-entry-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.nbm .nbm-entry-chevron {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--cyb-gold-edge);
    box-shadow: var(--cyb-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .55);
    color: var(--cyb-gold-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

/* ---- #draft-summary 多圖總覽 → 圖片清單入口卡 ---- */
body.nbm #draft-summary:not(.hidden) {
    position: relative;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(236, 246, 255, .88)) padding-box, var(--cyb-entry-edge) border-box;
    box-shadow: 0 6px 18px rgba(56, 116, 186, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
    padding-right: 52px;
    transition: transform .15s ease;
}
body.nbm #draft-summary:not(.hidden):active { transform: scale(.985); }
body.nbm #draft-summary:not(.hidden)::before {
    /* 左側霓虹邊條 */
    content: "";
    position: absolute;
    left: -1px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--cyb-neon-hi), var(--cyb-neon));
    box-shadow: 0 0 8px rgba(34, 211, 238, .55);
}
body.nbm #draft-summary:not(.hidden)::after {
    /* 右側金色 chevron 圓片 */
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    border-radius: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241703' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(135deg, #f6d38a, #e8a13a);
    box-shadow: var(--cyb-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* =========================================================================
   底部浮島 tab bar（唯一的結構性 backdrop blur）
   ========================================================================= */
body.nbm #nb-tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 60;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--cyb-scan) padding-box, var(--cyb-bar-fill) padding-box, var(--cyb-steel-edge) border-box;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--cyb-shadow-bar), var(--cyb-bevel-hi);
}
body.nbm .nbm-tab {
    position: relative;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--cyb-text-lo);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    transition: color .18s ease, background-color .18s ease, transform .15s ease;
}
body.nbm .nbm-tab svg { width: 22px; height: 22px; }
body.nbm .nbm-tab:active { transform: scale(.95); }
body.nbm .nbm-tab.is-active {
    color: var(--cyb-neon-hi);
    background: linear-gradient(180deg, rgba(34, 211, 238, .16), rgba(34, 211, 238, .05));
    box-shadow: var(--cyb-glow-neon);
}

/* =========================================================================
   Sheet 內容覆寫：關掉玻璃 blur 成本、放大觸控目標
   ========================================================================= */
/* 手機一律關掉 glass-card 的 backdrop blur：
   1) 效能 — sheet 動畫中不做全幅模糊；
   2) 正確性 — backdrop-filter 會為 fixed 子孫建立 containing block，
      會讓卡片內升級為彈窗的 #new-batch-mode-guide 定位錯亂。 */
body.nbm #main-screen .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.nbm .nbm-sheet .glass-card,
body.nbm .nbm-pop-host .glass-card {
    background: rgba(255, 255, 255, .95);
}
body.nbm .nbm-sheet .glass-dark,
body.nbm .nbm-pop-host .glass-dark {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* 工作站 sheet：本體就是 glass-card，改回不透明冰白由 .nbm-sheet 背景負責 */
body.nbm #nb-workspace-sheet {
    background: var(--cyb-sheet-fill) padding-box, var(--cyb-steel-edge) border-box;
}
body.nbm .nb-ws-toolbar { justify-content: flex-end; }
body.nbm .new-batch-job-row {
    border: 1px solid transparent;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(244, 250, 255, .92)) padding-box, var(--cyb-steel-edge) border-box;
    min-height: 44px;
    padding: 12px;
}
body.nbm .new-batch-job-row.is-active {
    box-shadow: var(--cyb-glow-neon);
}
/* 圖片清單 sheet：單欄卡片、觸控加大 */
body.nbm #nb-detail-sheet .new-batch-item-grid {
    grid-template-columns: 1fr;
    gap: 14px;
}
body.nbm #nb-detail-sheet .new-batch-keep-button { min-height: 44px; }
body.nbm .new-batch-download-badge {
    font-family: var(--cyb-mono);
    letter-spacing: .03em;
}

/* ---- 送出鈕：標準保持天藍主色、高速批次上金屬金 ---- */
body.nbm #submit-new-batch-direct-test { min-height: 52px; }
body.nbm .new-batch-fast-submit {
    min-height: 52px;
    border: 0;
    background: var(--cyb-gold-edge);
    color: var(--cyb-gold-ink);
    box-shadow: var(--cyb-glow-gold), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* =========================================================================
   範本管理 sheet（手機專屬 DOM）
   ========================================================================= */
body.nbm #nb-template-sheet {
    top: auto;
    height: auto;
    max-height: min(82dvh, 640px);
    z-index: 90;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 14px;
}
body.nbm #nb-template-sheet .nbm-sheet-head { position: static; margin-bottom: 12px; }
body.nbm #nb-template-sheet .nbm-sheet-body {
    flex: 1 1 auto;
    min-height: 140px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}
body.nbm #nb-tpl-search { margin-bottom: 10px; }
body.nbm #nb-tpl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 模板列／編輯／按鈕外觀改用共用的 .tm-* （template_manager.css）；
   此處僅保留 sheet 專屬的 footer（sticky＋安全區）版面。 */
body.nbm .nbm-tpl-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(148, 166, 190, .25);
}
body.nbm .nbm-tpl-footer input { flex: 1 1 auto; min-width: 0; }

/* =========================================================================
   無障礙與降級
   ========================================================================= */
body.nbm :is(.nbm-tab, .nbm-close, .nbm-entry-row):focus-visible,
body.nbm #draft-summary:focus-visible {
    outline: 2px solid var(--cyb-neon);
    outline-offset: 2px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.nbm #nb-tabbar {
        background: var(--cyb-scan) padding-box, linear-gradient(180deg, rgba(21, 30, 48, .97), rgba(11, 17, 29, .97)) padding-box, var(--cyb-steel-edge) border-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.nbm .nbm-sheet,
    body.nbm .nbm-pop-host,
    body.nbm #nb-backdrop,
    body.nbm .nbm-tab,
    body.nbm .nbm-close,
    body.nbm .nbm-entry-row,
    body.nbm #draft-summary:not(.hidden) {
        transition: none !important;
    }
    body.nbm .nbm-tab:active,
    body.nbm .nbm-close:active,
    body.nbm .nbm-entry-row:active,
    body.nbm #draft-summary:not(.hidden):active { transform: none; }
}

} /* end @media (max-width: 768px) */