/* ===========================================================
 * 字体调节（Font Adjust）
 * 触发按钮插入 Zibll 侧边工具栏，面板为悬浮毛玻璃窗
 * =========================================================== */


/* -----------------------------------------------------------
 * 1. 正文应用调节后的字体 / 行距 / 字距
 *    只有加了 .fa-applied 才生效，避免影响默认排版
 * ----------------------------------------------------------- */

.wp-posts-content.fa-applied {
    font-size: var(--fa-font-size, 16px) !important;
    line-height: var(--fa-line-height, 1.8) !important;
    letter-spacing: var(--fa-letter-spacing, 0px) !important;
}

.wp-posts-content.fa-applied p,
.wp-posts-content.fa-applied span,
.wp-posts-content.fa-applied div {
    line-height: var(--fa-line-height, 1.8) !important;
    letter-spacing: var(--fa-letter-spacing, 0px) !important;
}


/* -----------------------------------------------------------
 * 2. 侧边触发按钮
 *    复用主题 .float-btn 基础样式，这里只处理内部排版
 * ----------------------------------------------------------- */

.fa-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    --fa-tip-bg: rgba(0, 0, 0, 0.95);
}

.fa-trigger-a {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -1px;
}

/* 悬浮文字提示（与 TTS 按钮一致） */
.fa-trigger::after {
    content: '字体调节';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    background: var(--fa-tip-bg) !important;
    color: #fff !important;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1001;
}

.fa-trigger::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: -2px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--fa-tip-bg) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1002;
}

.fa-trigger:hover::after,
.fa-trigger:hover::before {
    opacity: 1;
}

/* 兜底：没找到朗读按钮时退回固定定位（非会员看不到朗读按钮的情况） */
.fa-trigger-fixed {
    position: fixed;
    right: 15px;
    bottom: 140px;
    z-index: 9998;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--float-btn-bg, rgba(40, 40, 40, 0.85));
    backdrop-filter: saturate(2) blur(10px);
    -webkit-backdrop-filter: saturate(2) blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
}


/* -----------------------------------------------------------
 * 3. 遮罩层
 *    完全透明，只负责接收「点击外部关闭」
 *    不做 opacity 过渡：父级 opacity < 1 会削弱子元素的
 *    backdrop-filter，导致刚弹出时能看到背后未模糊的文字
 * ----------------------------------------------------------- */

.fa-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: transparent;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.22s;   /* 关闭时等动画播完再隐藏 */
}

.fa-overlay.fa-show {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;                     /* 打开时立即可见 */
}


/* -----------------------------------------------------------
 * 4. 悬浮面板
 *    opacity 恒为 1，只做位移 + 缩放，保证毛玻璃第一帧就到位
 * ----------------------------------------------------------- */

.fa-panel {
    position: fixed;
    right: 70px;                              /* 按侧边栏实际宽度微调 */
    bottom: 100px;                            /* 大致对齐触发按钮 */
    width: 320px;
    max-width: calc(100vw - 90px);
    padding: 16px 18px;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: saturate(1.8) blur(20px);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);

    opacity: 1;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom right;
    transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
    will-change: transform;
}

.fa-overlay.fa-show .fa-panel {
    transform: none;
}

/* 内容单独淡入，弹出手感不至于太硬 */
.fa-panel > * {
    opacity: 0;
    transition: opacity 0.16s ease 0.05s;
}

.fa-overlay.fa-show .fa-panel > * {
    opacity: 1;
}


/* -----------------------------------------------------------
 * 5. 面板内部
 * ----------------------------------------------------------- */

.fa-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.fa-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color, #222);
}

.fa-reset {
    font-size: 14px;
    color: var(--theme-color, #3b82f6);
    cursor: pointer;
}

.fa-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.fa-row:last-child {
    margin-bottom: 4px;
}

/* 字体大小行：两端是大小不同的 A */
.fa-row-fontsize {
    background: var(--muted-bg, rgba(0, 0, 0, 0.04));
    border-radius: 12px;
    padding: 10px 12px;
}

.fa-label-a-small {
    font-size: 15px;
    color: var(--main-color, #222);
    flex-shrink: 0;
}

.fa-label-a-large {
    font-size: 26px;
    line-height: 1;
    color: var(--main-color, #222);
    flex-shrink: 0;
}

.fa-label {
    width: 48px;
    font-size: 15px;
    color: var(--main-color, #222);
    flex-shrink: 0;
}

/* 滑块 */
.fa-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--muted-2-bg, rgba(0, 0, 0, 0.12));
    outline: none;
}

.fa-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.fa-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}


/* -----------------------------------------------------------
 * 6. 深色模式
 * ----------------------------------------------------------- */

html[data-theme="dark"] .fa-panel,
body.dark-theme .fa-panel {
    background: rgba(28, 28, 30, 0.62);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .fa-panel-title,
html[data-theme="dark"] .fa-label,
html[data-theme="dark"] .fa-label-a-small,
html[data-theme="dark"] .fa-label-a-large,
body.dark-theme .fa-panel-title,
body.dark-theme .fa-label,
body.dark-theme .fa-label-a-small,
body.dark-theme .fa-label-a-large {
    color: #eee;
}

html[data-theme="dark"] .fa-row-fontsize,
body.dark-theme .fa-row-fontsize {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .fa-slider,
body.dark-theme .fa-slider {
    background: rgba(255, 255, 255, 0.15);
}


/* -----------------------------------------------------------
 * 7. 移动端：仍然靠下，但左右留边、四角全圆，不做全屏抽屉
 * ----------------------------------------------------------- */

@media (max-width: 768px) {
    .fa-panel {
        left: 12px;
        right: 12px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        transform-origin: bottom center;
    }
}


/* -----------------------------------------------------------
 * 8. 无障碍：尊重「减少动态效果」
 * ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fa-panel,
    .fa-panel > * {
        transition: none;
    }
    .fa-panel {
        transform: none;
    }
}