/* =============================================================================
   tgd-poster.css — 分享海报：入口按钮 + 预览弹层
   -----------------------------------------------------------------------------
   配色跟随主题（浅色资源管理器风格）：#0066b4 蓝 / #e5f3ff 浅蓝 / #d6e3f0 描边。
   与 tgd-docs 一样，这里必须兜住 [hidden]：
   下面多个元素用了 display:flex，会盖掉 UA 样式表的 [hidden]{display:none}，
   导致 JS 里 el.hidden = true 完全没效果（弹层关不掉就是这么来的）。
   ============================================================================= */

/* ------------------------------------------------------------------ 变量 */

.tgd-poster-fab,
.tgd-poster-modal,
.tgd-poster-mini {
    --tgp-accent: #0066b4;
    --tgp-accent-2: #007ddd;
    --tgp-ink: #16212c;
    --tgp-sub: #5b6b7a;
    --tgp-line: #d6e3f0;
    --tgp-paper: #ffffff;
    --tgp-tint: #eef5fd;
    --tgp-radius: 12px;
    --tgp-shadow: 0 6px 22px rgba(16, 46, 78, .18);
    box-sizing: border-box;
}

.tgd-poster-fab *,
.tgd-poster-modal *,
.tgd-poster-mini * {
    box-sizing: border-box;
}

/* --------------------------------------------------------- 右下角悬浮入口 */

.tgd-poster-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 18px 12px 14px;
    border: 1px solid var(--tgp-line);
    border-radius: 999px;

    background: var(--tgp-paper);
    color: var(--tgp-accent);
    box-shadow: var(--tgp-shadow);

    font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Microsoft YaHei", "PingFang SC", sans-serif;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.tgd-poster-fab:hover {
    background: var(--tgp-tint);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(16, 46, 78, .24);
}

.tgd-poster-fab:active {
    transform: translateY(0) scale(.97);
}

.tgd-poster-fab svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.tgd-poster-fab[disabled] {
    opacity: .6;
    cursor: progress;
}

/* 桌面端不显示右下角悬浮入口（按需求去除，避免遮挡页面），移动端保留。
   注意：这是纯 CSS 隐藏，元素本身仍在（不影响列表项的小按钮和弹层逻辑）。 */
@media (min-width: 992px) {
    .tgd-poster-fab {
        display: none !important;
    }
}

/* 抽屉菜单打开时把入口藏起来，避免压在遮罩上 */
body.tgd-drawer-open .tgd-poster-fab {
    display: none;
}

/* --------------------------------------------------- 列表项上的小海报按钮 */

.tgd-poster-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;
    margin-left: 8px;
    padding: 0;

    border: 1px solid var(--tgp-line);
    border-radius: 7px;
    background: #f7fbff;
    color: var(--tgp-accent);
    vertical-align: middle;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.tgd-poster-mini:hover {
    background: #e3f0ff;
    border-color: #a9cdea;
}

.tgd-poster-mini svg {
    width: 15px;
    height: 15px;
}

/* --------------------------------------------------------------- 预览弹层 */

.tgd-poster-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(8, 22, 36, .66);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.tgd-poster-modal[hidden] {
    display: none !important;
}

.tgd-poster-panel {
    width: min(420px, 100%);
    max-height: calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    background: var(--tgp-paper);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    overflow: hidden;
}

.tgd-poster-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 14px 16px;
    border-bottom: 1px solid var(--tgp-line);

    font: 600 15px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Microsoft YaHei", "PingFang SC", sans-serif;
    color: var(--tgp-ink);
}

.tgd-poster-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tgp-sub);
    cursor: pointer;
}

.tgd-poster-close:hover {
    background: #eef3f9;
    color: var(--tgp-ink);
}

.tgd-poster-close svg {
    width: 16px;
    height: 16px;
}

.tgd-poster-stage {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;
    background: var(--tgp-tint);
    overflow: auto;
}

.tgd-poster-stage img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 46, 78, .2);
    background: #fff;
}

.tgd-poster-loading {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--tgp-sub);
    font: 400 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Microsoft YaHei", "PingFang SC", sans-serif;
}

.tgd-poster-loading[hidden] {
    display: none !important;
}

.tgd-poster-spin {
    width: 18px;
    height: 18px;
    border: 2px solid #cfe0f0;
    border-top-color: var(--tgp-accent);
    border-radius: 50%;
    animation: tgd-poster-spin .8s linear infinite;
}

@keyframes tgd-poster-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tgd-poster-spin {
        animation-duration: 2.4s;
    }
}

.tgd-poster-err {
    max-width: 300px;
    padding: 14px 16px;

    border: 1px solid #f0c9c9;
    border-radius: 10px;
    background: #fff6f6;
    color: #a3322f;

    font: 400 13px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Microsoft YaHei", "PingFang SC", sans-serif;
}

.tgd-poster-err[hidden] {
    display: none !important;
}

.tgd-poster-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    padding: 14px 16px;
    border-top: 1px solid var(--tgp-line);
}

.tgd-poster-btn {
    flex: 1 1 120px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 12px 14px;
    border: 1px solid var(--tgp-line);
    border-radius: 10px;

    background: #f7fbff;
    color: var(--tgp-ink);

    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Microsoft YaHei", "PingFang SC", sans-serif;
    cursor: pointer;
    white-space: nowrap;

    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.tgd-poster-btn:hover {
    background: #e8f2fd;
    border-color: #a9cdea;
}

.tgd-poster-btn svg {
    width: 16px;
    height: 16px;
}

.tgd-poster-btn--primary {
    border-color: var(--tgp-accent);
    background: var(--tgp-accent);
    color: #fff;
}

.tgd-poster-btn--primary:hover {
    background: var(--tgp-accent-2);
    border-color: var(--tgp-accent-2);
}

.tgd-poster-tip {
    flex: 1 1 100%;
    margin: 0;

    color: var(--tgp-sub);
    text-align: center;
    font: 400 12px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Microsoft YaHei", "PingFang SC", sans-serif;
}

/* 打开弹层时锁滚动（由 JS 加类，避免和抽屉的锁冲突） */
body.tgd-poster-lock {
    overflow: hidden;
}

/* ------------------------------------------------------------- 移动端适配 */

@media (max-width: 767px) {
    .tgd-poster-fab {
        right: 14px;
        bottom: 14px;
        padding: 11px 16px 11px 13px;
        font-size: 14px;
    }

    .tgd-poster-modal {
        padding: 0;
        align-items: stretch;
    }

    .tgd-poster-panel {
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .tgd-poster-stage img {
        max-width: none;
        width: min(360px, 86vw);
    }
}

@media (max-width: 400px) {
    .tgd-poster-fab span {
        display: none;   /* 极窄屏只留图标，避免压住内容 */
    }

    .tgd-poster-fab {
        padding: 12px;
    }
}