/* ═══════════════════════════════════════════════════════════════
   Floating Mailbox · FAB + Modal
   設計：月光美學，半透明玻璃感，柔光暈
   ═══════════════════════════════════════════════════════════════ */

:root {
    --nm-fab-bg:           #1A1F2E;
    --nm-fab-bg-2:         #242B3D;
    --nm-fab-text:         #E8EBF0;
    --nm-fab-text-mute:    #8A92A2;
    --nm-fab-plum:         #8A7AAA;
    --nm-fab-bronze:       #A8B5C9;
    --nm-fab-line:         rgba(168, 181, 201, 0.22);
    --nm-fab-glow:         rgba(138, 122, 170, 0.45);
}


/* ─── FAB Button ─────────────────────────────────────── */
.nm-fab {
    position: fixed;
    bottom: 24px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 12px 16px;
    border: 1px solid var(--nm-fab-line);
    border-radius: 999px;
    background: var(--nm-fab-bg);
    color: var(--nm-fab-text);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 40px var(--nm-fab-glow);
    transition: transform .25s ease, box-shadow .25s ease;
    animation: nmFabBreath 6s ease-in-out infinite;
}

.nm-fab--right-bottom { right: 24px; }
.nm-fab--left-bottom  { left:  24px; }

.nm-fab:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 60px var(--nm-fab-glow);
}

.nm-fab:focus-visible {
    outline: 2px solid var(--nm-fab-plum);
    outline-offset: 3px;
}

.nm-fab__icon {
    width: 20px;
    height: 20px;
    color: var(--nm-fab-bronze);
    filter: drop-shadow(0 0 8px var(--nm-fab-glow));
}

.nm-fab__label {
    letter-spacing: .02em;
    white-space: nowrap;
}

@keyframes nmFabBreath {
    0%, 100% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 40px rgba(138, 122, 170, 0.45);
    }
    50% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 70px rgba(138, 122, 170, 0.65);
    }
}


/* ─── Mobile：FAB 縮成圓形圖示 ─────────────────────────── */
@media (max-width: 640px) {
    .nm-fab {
        padding: 14px;
        width: 56px;
        height: 56px;
        justify-content: center;
        bottom: 16px;
    }
    .nm-fab--right-bottom { right: 16px; }
    .nm-fab--left-bottom  { left:  16px; }
    .nm-fab__label { display: none; }
    .nm-fab__icon { width: 22px; height: 22px; }
}


/* ═══════════════════════════════════════════════════════
   Modal
   ═══════════════════════════════════════════════════════ */

.nm-fab-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: nmFabFadeIn .3s ease;
}

.nm-fab-modal[hidden] {
    display: none;
}

@keyframes nmFabFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.nm-fab-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 25, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}


.nm-fab-modal__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    border: 1px solid var(--nm-fab-line);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--nm-fab-bg-2), var(--nm-fab-bg));
    color: var(--nm-fab-text);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(138, 122, 170, 0.25);
    animation: nmFabPanelIn .4s cubic-bezier(.16, 1, .3, 1);
}

@keyframes nmFabPanelIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


.nm-fab-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--nm-fab-text-mute);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.nm-fab-modal__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--nm-fab-text);
}


.nm-fab-modal__head {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--nm-fab-line);
}

.nm-fab-modal__moon {
    font-size: 32px;
    margin-bottom: 8px;
}

.nm-fab-modal__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--nm-fab-text);
}

.nm-fab-modal__sub {
    margin: 0;
    font-size: 13px;
    color: var(--nm-fab-text-mute);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════
   Form fields
   ═══════════════════════════════════════════════════════ */

.nm-fab-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.nm-fab-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nm-fab-field label {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nm-fab-text-mute);
    font-weight: 500;
}

.nm-fab-field input[type="text"],
.nm-fab-field input[type="email"],
.nm-fab-field textarea,
.nm-fab-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--nm-fab-line);
    border-radius: 8px;
    background: rgba(15, 20, 25, 0.6);
    color: var(--nm-fab-text);
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, background .2s ease;
}

.nm-fab-field input:focus,
.nm-fab-field textarea:focus,
.nm-fab-field select:focus {
    outline: none;
    border-color: var(--nm-fab-plum);
    background: rgba(15, 20, 25, 0.85);
}

.nm-fab-field textarea {
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
    line-height: 1.6;
}


.nm-fab-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 480px) {
    .nm-fab-grid-2 { grid-template-columns: 1fr; }
}


/* ─── Tier 選擇器（4 個按鈕）────────────────────────── */
.nm-fab-tiers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.nm-fab-tier {
    cursor: pointer;
    position: relative;
}

.nm-fab-tier input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nm-fab-tier__inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--nm-fab-line);
    border-radius: 8px;
    background: rgba(15, 20, 25, 0.4);
    transition: all .2s ease;
}

.nm-fab-tier:hover .nm-fab-tier__inner {
    border-color: var(--nm-fab-bronze);
    background: rgba(168, 181, 201, 0.06);
}

.nm-fab-tier input:checked + .nm-fab-tier__inner {
    border-color: var(--nm-fab-plum);
    background: rgba(138, 122, 170, 0.12);
    box-shadow: 0 0 0 1px var(--nm-fab-plum);
}

.nm-fab-tier__inner strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-fab-text);
}

.nm-fab-tier__inner span {
    font-size: 11px;
    color: var(--nm-fab-text-mute);
    line-height: 1.4;
}


.nm-fab-required {
    color: var(--nm-fab-plum);
}

.nm-fab-hint {
    font-size: 11px;
    color: var(--nm-fab-text-mute);
    margin-top: 2px;
}


/* ─── Submit button ──────────────────────────────────── */
.nm-fab-submit {
    margin-top: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--nm-fab-plum), #6E4659);
    color: white;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 16px rgba(138, 122, 170, 0.35);
}

.nm-fab-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(138, 122, 170, 0.5);
}

.nm-fab-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nm-fab-submit__spinner {
    display: none;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 999px;
    animation: nmFabSpin .8s linear infinite;
    vertical-align: middle;
}

.nm-fab-submit.is-loading .nm-fab-submit__spinner {
    display: inline-block;
}

@keyframes nmFabSpin {
    to { transform: rotate(360deg); }
}


.nm-fab-result {
    font-size: 13px;
    padding: 0;
    text-align: center;
    line-height: 1.5;
}

.nm-fab-result.is-success {
    color: #B8E6C8;
    padding: 12px;
    background: rgba(64, 192, 128, 0.1);
    border: 1px solid rgba(64, 192, 128, 0.3);
    border-radius: 8px;
}

.nm-fab-result.is-error {
    color: #FFB8B8;
    padding: 12px;
    background: rgba(220, 80, 80, 0.1);
    border: 1px solid rgba(220, 80, 80, 0.3);
    border-radius: 8px;
}


/* ─── Mobile：Modal full-screen 體驗 ─────────────── */
@media (max-width: 640px) {
    .nm-fab-modal { padding: 0; }
    .nm-fab-modal__panel {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
        padding: 24px 20px 40px;
    }
}


/* ─── 鎖 body 滾動 ─────────────────────────────── */
body.nm-fab-open {
    overflow: hidden;
}


/* ─── 與主題 fog widget 並存時，自動向上位移 ───────────
   v0.6.0.3：改用 CSS :has() 偵測，不靠 JS（Safari 15.4+ / Chrome 105+ 都支援）
   原因：JS 偵測時機不穩定（cache、執行順序問題），:has() 是純宣告式、永遠 work
*/

/* 桌機 */
body:has(.fog-fab) #nm-fab.nm-fab--right-bottom { bottom: 90px !important; right: 28px !important; }
body:has(.fog-fab) #nm-fab.nm-fab--left-bottom  { bottom: 90px !important; left:  28px !important; }

/* 手機 */
@media (max-width: 640px) {
    body:has(.fog-fab) #nm-fab.nm-fab--right-bottom { bottom: 86px !important; right: 16px !important; }
    body:has(.fog-fab) #nm-fab.nm-fab--left-bottom  { bottom: 86px !important; left:  16px !important; }
}

/* JS 偵測作為 fallback（瀏覽器太舊不支援 :has()）— 保留原 class 規則 */
.nm-fab.nm-fab--with-fog.nm-fab--right-bottom { bottom: 90px; right: 28px; }
.nm-fab.nm-fab--with-fog.nm-fab--left-bottom  { bottom: 90px; left:  28px; }
@media (max-width: 640px) {
    .nm-fab.nm-fab--with-fog.nm-fab--right-bottom { bottom: 86px; right: 16px; }
    .nm-fab.nm-fab--with-fog.nm-fab--left-bottom  { bottom: 86px; left:  16px; }
}


/* ─── 圖示 <img> 樣式（v0.6.1 上傳圖示時） ────────── */
.nm-fab__icon--img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px var(--nm-fab-glow));
}

@media (max-width: 640px) {
    .nm-fab__icon--img { width: 22px; height: 22px; }
}


/* ─── v0.6.2：保險 — FAB 內 child 點擊事件不被吃掉 ─── */
.nm-fab,
.nm-fab * {
    /* 確保 click 不會被內部子元素 stop */
}

.nm-fab__icon,
.nm-fab__icon--img,
.nm-fab__label {
    pointer-events: none;  /* child 不阻擋點擊 → click 一律 hit button */
}


/* ═══════════════════════════════════════════════════════════════
   淺色模式（v0.6.3）
═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --nm-fab-bg:           #DEE1E6;
    --nm-fab-bg-2:         #D8DBE1;
    --nm-fab-text:         #1A2030;
    --nm-fab-text-mute:    #5E6478;
    --nm-fab-plum:         #5C6182;
    --nm-fab-bronze:       #5E6478;
    --nm-fab-line:         #C2C6CE;
    --nm-fab-glow:         rgba(92, 97, 130, 0.25);
}


/* FAB 在淺色模式：陰影更明確（淺背景需要 separation） */
[data-theme="light"] .nm-fab {
    box-shadow:
        0 8px 24px rgba(26, 32, 48, 0.12),
        0 0 0 1px rgba(26, 32, 48, 0.06),
        0 0 30px rgba(92, 97, 130, 0.18);
}

[data-theme="light"] .nm-fab:hover {
    box-shadow:
        0 12px 32px rgba(26, 32, 48, 0.18),
        0 0 0 1px rgba(26, 32, 48, 0.08),
        0 0 50px rgba(92, 97, 130, 0.28);
}

/* 呼吸動畫在淺色模式：光暈調暗 */
[data-theme="light"] .nm-fab {
    animation: nmFabBreathLight 6s ease-in-out infinite;
}

@keyframes nmFabBreathLight {
    0%, 100% {
        box-shadow:
            0 8px 24px rgba(26, 32, 48, 0.12),
            0 0 0 1px rgba(26, 32, 48, 0.06),
            0 0 30px rgba(92, 97, 130, 0.18);
    }
    50% {
        box-shadow:
            0 8px 24px rgba(26, 32, 48, 0.12),
            0 0 0 1px rgba(26, 32, 48, 0.06),
            0 0 50px rgba(92, 97, 130, 0.32);
    }
}


/* Modal backdrop 在淺色模式 */
[data-theme="light"] .nm-fab-modal__backdrop {
    background: rgba(220, 222, 227, 0.85);
}


/* Modal panel 在淺色模式 */
[data-theme="light"] .nm-fab-modal__panel {
    background: linear-gradient(180deg, #FFFFFF, #F4F5F7);
    box-shadow:
        0 24px 64px rgba(26, 32, 48, 0.18),
        0 0 60px rgba(92, 97, 130, 0.1);
}


/* Form input 在淺色模式 */
[data-theme="light"] .nm-fab-field input[type="text"],
[data-theme="light"] .nm-fab-field input[type="email"],
[data-theme="light"] .nm-fab-field textarea,
[data-theme="light"] .nm-fab-field select {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--nm-fab-line);
}

[data-theme="light"] .nm-fab-field input:focus,
[data-theme="light"] .nm-fab-field textarea:focus,
[data-theme="light"] .nm-fab-field select:focus {
    background: #FFFFFF;
    border-color: var(--nm-fab-plum);
}


/* Tier cards 在淺色模式 */
[data-theme="light"] .nm-fab-tier__inner {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .nm-fab-tier:hover .nm-fab-tier__inner {
    background: rgba(92, 97, 130, 0.05);
}

[data-theme="light"] .nm-fab-tier input:checked + .nm-fab-tier__inner {
    background: rgba(92, 97, 130, 0.1);
    box-shadow: 0 0 0 1px var(--nm-fab-plum);
}


/* Submit button 在淺色模式 */
[data-theme="light"] .nm-fab-submit {
    background: linear-gradient(135deg, var(--nm-fab-plum), #4A4E6E);
    box-shadow: 0 4px 12px rgba(92, 97, 130, 0.25);
}

[data-theme="light"] .nm-fab-submit:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(92, 97, 130, 0.4);
}


/* 平滑過渡 */
.nm-fab,
.nm-fab-modal__panel,
.nm-fab-field input,
.nm-fab-field textarea,
.nm-fab-field select,
.nm-fab-tier__inner {
    transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}


/* ═══════════════════════════════════════════════════════════════
   v0.7.2：1:1 加碼 checkbox（獨立於 tier 1-3）
═══════════════════════════════════════════════════════════════ */

.nm-fab-addon {
    margin-top: -4px;
}

.nm-fab-oneonone {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--nm-fab-line);
    border-radius: 8px;
    background: rgba(15, 20, 25, 0.4);
    cursor: pointer;
    transition: all .2s ease;
}

.nm-fab-oneonone:hover {
    border-color: var(--nm-fab-bronze);
    background: rgba(168, 181, 201, 0.06);
}

.nm-fab-oneonone input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nm-fab-oneonone__box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1.5px solid var(--nm-fab-line);
    border-radius: 4px;
    background: rgba(15, 20, 25, 0.5);
    position: relative;
    transition: all .2s ease;
}

.nm-fab-oneonone input:checked ~ .nm-fab-oneonone__box {
    background: var(--nm-fab-plum);
    border-color: var(--nm-fab-plum);
}

.nm-fab-oneonone input:checked ~ .nm-fab-oneonone__box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.nm-fab-oneonone__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.nm-fab-oneonone__content strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-fab-text);
}

.nm-fab-oneonone__content span {
    font-size: 11px;
    color: var(--nm-fab-text-mute);
    line-height: 1.5;
}

/* 勾選後外框也高亮 */
.nm-fab-oneonone:has(input:checked) {
    border-color: var(--nm-fab-plum);
    background: rgba(138, 122, 170, 0.08);
    box-shadow: 0 0 0 1px var(--nm-fab-plum);
}


/* 淺色模式 */
[data-theme="light"] .nm-fab-oneonone {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .nm-fab-oneonone:hover {
    background: rgba(92, 97, 130, 0.05);
}

[data-theme="light"] .nm-fab-oneonone:has(input:checked) {
    background: rgba(92, 97, 130, 0.1);
}

[data-theme="light"] .nm-fab-oneonone__box {
    background: rgba(255, 255, 255, 0.7);
}


/* ═══════════════════════════════════════════════════════════════
   v0.8.3：FAB disclaimer（modal 內法律聲明）
═══════════════════════════════════════════════════════════════ */

.nm-fab-disclaimer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--nm-fab-line);
    text-align: center;
    font-size: 10px;
    line-height: 1.7;
    letter-spacing: .02em;
    color: var(--nm-fab-text-mute);
    opacity: .75;
    font-style: italic;
}

.nm-fab-disclaimer p {
    margin: 0 0 5px;
    font-size: 10px;
    line-height: 1.7;
}

.nm-fab-disclaimer p:last-child {
    margin-bottom: 0;
}

.nm-fab-disclaimer .nl-legal-links {
    margin-top: 8px !important;
    padding-top: 8px;
    border-top: 1px solid rgba(168, 181, 201, .1);
}

.nm-fab-disclaimer a {
    color: var(--nm-fab-text-mute);
    text-decoration: underline;
    text-decoration-color: rgba(168, 181, 201, .3);
    text-underline-offset: 2px;
}

.nm-fab-disclaimer a:hover {
    color: var(--nm-fab-plum);
    text-decoration-color: var(--nm-fab-plum);
}

[data-theme="light"] .nm-fab-disclaimer {
    opacity: .65;
}

/* ── v0.11.0 貓頭鷹 coming soon（不可選）── */
.nm-fab-tier--soon { opacity: .45; cursor: not-allowed; }
.nm-fab-tier--soon input { pointer-events: none; }
.nm-fab-tier--soon .nm-fab-tier__inner { pointer-events: none; }


/* ═══ v0.15.3 · 同意勾選（送出按鈕上方）═══ */
.nm-fab-modal .nl-agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 14px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.6;
    opacity: .82;
    transition: opacity .2s ease;
}
.nm-fab-modal .nl-agree:hover { opacity: 1; }
.nm-fab-modal .nl-agree input[type="checkbox"] {
    flex: none;
    margin-top: 2px;
    width: 14px;
    height: 14px;
    accent-color: #8A7AAA;
    cursor: pointer;
}
.nm-fab-modal .nl-agree a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* v0.15.11 · 審核說明（FAB 輸入框下方）*/
.nm-fab-review-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.7;
    opacity: .55;
}