:root {
    --c-glass: #bbbbbc;
    --c-light: #fff;
    --c-dark: #000;
    --c-content: #224;
    --c-action: #0052f5;
    --c-bg: #e8e8e9;
    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;
    --saturation: 150%;
}
#twikoo-float-btn {
    /* V5 位置 */
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%); /* 精确垂直居中 */
    z-index: 998;
    
    /* V4 样式 (Liquid Glass) */
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    color: var(--c-content);
    padding: 16px 12px; /* 调整为更适合垂直 */
    border-radius: 12px 0 0 12px; /* 左侧圆角 */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
    background-color: color-mix(in srgb, var(--c-glass) 30%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    
    /* (新) 纵向堆叠布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* "留言板" 和 数字 之间的间距 */
}
#twikoo-float-btn:hover {
    transform: translateY(-50%) scale(1.05); /* 悬停放大 */
}

/* 3.2. V4 按钮的 ::after 伪元素 (必须) */
#twikoo-float-btn::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px 0 0 12px;
    /* background-color: color-mix(in srgb, var(--c-glass) 36%, transparent); */
    z-index: -1;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

/* 3.3. 按钮内部的文字和数字 (来自 V4) */
#twikoo-float-btn .liquid-text {
    font-size: 16px;
    font-weight: 700;
    /* (新) 适应垂直布局 */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
}
#twikoo-float-btn .liquid-count {
    font-size: 13px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    padding: 4px;
    min-width: 18px;
    min-height: 18px;
    text-align: center;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3.4. (新增) 动画 Keyframes */
@keyframes twikooFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes twikooSlideInUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes twikooSlideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 3.5. 全屏模糊遮罩层 (V5 基础 + V6 动画) */
#twikoo-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
#twikoo-fullscreen-overlay.show {
    display: flex;
    animation: twikooFadeIn 0.3s ease-out; /* 遮罩层淡入 */
}
body.twikoo-overlay-open {
    overflow: hidden;
}

/* 3.6. 弹窗窗口 (V5 基础 + V6 动画) */
.twikoo-modal-window {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFF;
    /* Mobile 默认 (全屏) */
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}
/* (新) Mobile 动画 */
#twikoo-fullscreen-overlay.show .twikoo-modal-window {
    animation: twikooSlideInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3.7. 弹窗标题栏 (V5 不变) */
#twikoo-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    z-index: 10;
    position: sticky;
    top: 0;
    padding: 15px 20px;
}
#twikoo-overlay-title { ... } /* 省略 V5 的相同样式 */
#twikoo-close-btn { ... } /* 省略 V5 的相同样式 */

/* 3.8. 弹窗内容滚动区 (V5 基础 + V6 Padding) */
#twikoo-overlay-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    padding: 0; /* Mobile 默认 */
}

/* 3.9. PC 样式 (V5 基础 + V6 Padding + V6 动画) */
@media screen and (min-width: 769px) {
    #twikoo-fullscreen-overlay {
        padding: 5vh 5vw; 
    }
    .twikoo-modal-window {
        width: 100%;
        max-width: 1000px;
        height: auto;
        max-height: 90vh;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    /* (新) PC 动画 (覆盖 Mobile) */
    #twikoo-fullscreen-overlay.show .twikoo-modal-window {
        animation: twikooSlideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    #twikoo-overlay-header {
        position: static;
    }
    
    #twikoo-overlay-content {
        height: auto;
        /* (新) PC Padding */
        padding: 0 2rem;
        box-sizing: border-box;
    }
}

/* (V5) 补充 V5 缺失的样式 */
#twikoo-overlay-title {
    margin: 0; font-size: 1.25rem; font-weight: 600; color: #333;
}
#twikoo-close-btn {
    position: static; width: 32px; height: 32px; line-height: 32px;
    font-size: 20px; text-align: center; border-radius: 50%;
    background: #f0f0f0; color: #555; border: none; cursor: pointer;
    transition: background 0.2s;
}
#twikoo-close-btn:hover { background: #e0e0e0; }



/* 导航按钮风格同步 */
.hope-ui-light .container {
    /* 1. 你原有的样式 (保持不变)
    background-color: #ffffff72;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); */

    /* 2. (新增) 为 ::after 伪元素定位 */
    position: relative;
    z-index: 1; /* 确保 .container 内容在 ::after 之上 */

    /* 3. (重要) 确保你设置了圆角 */
    /* ::after 会自动继承这个圆角 */
    border-radius: 12px; /* 这是一个示例，请改成你自己的圆角值 */
}

/* 4. (新增) 添加 V6 的“描边阴影”效果 */
.hope-ui-light .container::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit; /* 关键：继承父级的圆角 */
    z-index: -1; /* 把它放在 .container 内容的后面 */

    /* V6 伪元素的背景层 (适配为亮色) */
    background-color: color-mix(in srgb, var(--c-light) 36%, transparent);
    
    /* V6 的“描边阴影” (box-shadow) */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}


/* --- 3. 暗色模式 (Dark Mode) --- */

.hope-ui-dark .container {
    /* 1. 你原有的样式 (保持不变)
    background-color: #00000090;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); */

    /* 2. (新增) 为 ::after 伪元素定位 */
    position: relative;
    z-index: 1;

    /* 3. (重要) 确保你设置了圆角 */
    border-radius: 12px; /* 这是一个示例，请改成你自己的圆角值 */
}

/* 4. (新增) 添加 V6 的“描边阴影”效果 */
.hope-ui-dark .container::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit; /* 关键：继承父级的圆角 */
    z-index: -1;

    /* V6 伪元素的背景层 (适配为暗色) */
    background-color: color-mix(in srgb, var(--c-dark) 36%, transparent);
    
    /* V6 的“描边阴影” (box-shadow) - 阴影效果在暗色/亮色下是通用的 */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}