/* assets/floating-tools.css —— 右下角浮动工具组件（neo-brutalist） */

/* ===== 隐藏态 ===== */
.floating-tools[hidden] {
    display: none !important;
}

/* ===== 浮动容器 ===== */
.floating-tools {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    pointer-events: none;
}

.floating-tools > * {
    pointer-events: auto;
}

/* ===== 通用按钮基础 ===== */
.ft-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border: 2px solid var(--line, #151515);
    background: var(--card, #fbfaf6);
    color: var(--ink, #111);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--line, #151515);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ft-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--line, #151515);
}

.ft-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--line, #151515);
}

.ft-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
    box-shadow: 4px 4px 0 var(--line, #151515);
}

.ft-btn:focus-visible {
    outline: 3px solid var(--blue, #2d5bff);
    outline-offset: 2px;
}

/* ===== SVG 图标 ===== */
.ft-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== 联系按钮 ===== */
.ft-contact-btn {
    background: var(--blue, #2d5bff);
    color: #fff;
    border-color: var(--line, #151515);
}

.ft-contact-btn:hover {
    background: #1a48e0;
}

.ft-contact-btn .ft-icon {
    stroke: #fff;
}

/* ===== 火箭控件容器 ===== */
.ft-scroll-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ft-scroll-group .ft-btn {
    min-width: 48px;
    padding: 0 10px;
    height: 40px;
    font-size: 12px;
}

.ft-scroll-group .ft-btn + .ft-btn {
    border-top: 1px solid var(--line, #151515);
}

/* 上按钮箭头样式 */
.ft-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.ft-arrow-up {
    border-bottom: 8px solid currentColor;
}

.ft-arrow-down {
    border-top: 8px solid currentColor;
}

.ft-scroll-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ===== 模态框遮罩 ===== */
.ft-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 81;
    background: rgba(17, 17, 17, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.ft-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.ft-modal-overlay[hidden] {
    display: none !important;
}

/* ===== 模态框卡片 ===== */
.ft-modal {
    position: relative;
    width: min(420px, 100%);
    background: var(--paper, #f3f0e8);
    border: 2px solid var(--line, #151515);
    box-shadow: 8px 8px 0 var(--line, #151515);
    padding: 32px 28px 28px;
    transform: translateY(12px);
    transition: transform .2s ease;
}

.ft-modal-overlay.is-open .ft-modal {
    transform: translateY(0);
}

/* ===== 模态框关闭按钮 ===== */
.ft-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--line, #151515);
    background: var(--card, #fbfaf6);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--line, #151515);
    transition: transform .1s ease, box-shadow .1s ease;
}

.ft-modal-close:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--line, #151515);
}

.ft-modal-close:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--line, #151515);
}

.ft-modal-close:focus-visible {
    outline: 3px solid var(--blue, #2d5bff);
    outline-offset: 2px;
}

/* ===== 模态框内容 ===== */
.ft-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 2px solid var(--line, #151515);
    background: var(--blue, #2d5bff);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    margin-bottom: 16px;
}

.ft-modal-badge .ft-icon {
    width: 14px;
    height: 14px;
    stroke: #fff;
}

.ft-modal-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--ink, #111);
    line-height: 1.3;
}

.ft-modal-username {
    font-size: 13px;
    color: var(--muted, #69665f);
    margin: 0 0 14px;
    word-break: break-all;
}

.ft-modal-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink, #111);
    margin: 0 0 24px;
    padding: 12px 14px;
    border: 2px solid var(--line, #151515);
    background: var(--card, #fbfaf6);
}

.ft-modal-desc:empty {
    display: none;
}

/* ===== Telegram 跳转按钮 ===== */
.ft-tg-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border: 2px solid var(--line, #151515);
    background: var(--blue, #2d5bff);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 5px 5px 0 var(--line, #151515);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
    cursor: pointer;
}

.ft-tg-link:hover {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 var(--line, #151515);
    background: #1a48e0;
}

.ft-tg-link:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--line, #151515);
}

.ft-tg-link:focus-visible {
    outline: 3px solid var(--orange, #ff6b35);
    outline-offset: 2px;
}

.ft-tg-link .ft-icon {
    stroke: #fff;
    width: 20px;
    height: 20px;
}

/* ===== QR 码 ===== */
.ft-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 0 0 20px;
    padding: 12px;
    border: 2px solid var(--line, #151515);
    background: #fff;
}

.ft-qr-img {
    display: block;
    width: 140px;
    height: 140px;
    object-fit: contain;
}

/* ===== body 滚动锁 ===== */
body.ft-scroll-locked {
    overflow: hidden;
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    .ft-btn,
    .ft-modal-overlay,
    .ft-modal,
    .ft-modal-close,
    .ft-tg-link {
        transition: none !important;
    }
}

/* ===== 移动端 ===== */
@media (max-width: 768px) {
    .floating-tools {
        right: 16px;
        bottom: 16px;
        /* iOS safe-area + 任务129：避让底部导航栏 */
        right: max(16px, env(safe-area-inset-right, 16px));
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .ft-btn {
        height: 44px;
        min-width: 44px;
        padding: 0 10px;
        font-size: 12px;
    }

    .ft-scroll-group .ft-btn {
        height: 36px;
        font-size: 11px;
    }

    .ft-modal {
        padding: 28px 20px 24px;
    }

    .ft-modal-title {
        font-size: 18px;
    }

    .ft-modal-overlay {
        padding: 16px;
    }
}

/* ===== 影院页面：避免遮挡播放器 ===== */
.cinema-shell .floating-tools {
    z-index: 50;
}

@media (max-width: 768px) {
    .cinema-shell .floating-tools {
        bottom: max(72px, calc(env(safe-area-inset-bottom, 16px) + 56px));
    }
}