/* =============================================================
   悬浮侧边客服挂件 · main.css  v2.2.0
   © 瀚煜科技 hanyukeji.com
   插件前缀: zib-float-srv
   零外部依赖 · 全本地化 · 全 CSS 变量驱动 · 7 大渠道 + 无限自定义
   v2.2: 列数语义网格（cols-N），移除已废弃的 items-N 和 nth-child 特殊布局
   ============================================================= */

/* ── CSS 变量定义（根作用域，由 JS 动态注入值）─────────── */
:root {
    --zib-float-srv-accent: #1677ff;
    --zib-float-srv-accent-rgb: 22, 119, 255;
    --zib-float-srv-dialog-w: 240px;
    --zib-float-srv-dialog-w-m: 200px;
    --zib-float-srv-dialog-h: none;
    --zib-float-srv-dialog-h-m: none;
}

/* =============================================================
   PC 端布局
   ============================================================= */

/* ── 侧边触发按钮 ─────────────────────────────────────────── */
#zib-float-srv-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 14px 10px;
    border-radius: 6px 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #fff;
    background: var(--zib-float-srv-accent);
    box-shadow: -2px 2px 10px rgba(var(--zib-float-srv-accent-rgb), .35);
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow .2s ease, opacity .2s ease;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
#zib-float-srv-btn:hover {
    box-shadow: -3px 3px 16px rgba(var(--zib-float-srv-accent-rgb), .55);
    opacity: .92;
}
#zib-float-srv-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--zib-float-srv-accent-rgb), .4), -2px 2px 10px rgba(var(--zib-float-srv-accent-rgb), .35);
}

/* 左侧位置时按钮贴左边 */
#zib-float-srv-btn.srv-btn-left {
    right: auto;
    left: 0;
    border-radius: 0 6px 6px 0;
    box-shadow: 2px 2px 10px rgba(var(--zib-float-srv-accent-rgb), .35);
}
#zib-float-srv-btn.srv-btn-left:hover {
    box-shadow: 3px 3px 16px rgba(var(--zib-float-srv-accent-rgb), .55);
}

/* ── 弹窗容器 ────────────────────────────────────────────── */
#zib-float-srv-dialog {
    position: fixed;
    z-index: 9999;
    width: var(--zib-float-srv-dialog-w);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    will-change: auto;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
/* 弹窗可见时才创建 GPU 合成层，减少隐藏时资源占用 */
#zib-float-srv-dialog:not(.is-hidden) {
    will-change: transform, opacity;
}
#zib-float-srv-dialog.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

/* ── 弹窗位置预设（7 个，由 data-position 属性驱动）───── */
#zib-float-srv-dialog[data-position="right-center"] {
    right: 50px; left: auto;
    top: 50%; bottom: auto;
    transform: translateY(-50%);
}
#zib-float-srv-dialog[data-position="right-bottom"] {
    right: 50px; left: auto;
    bottom: 20px; top: auto;
    transform: none;
}
#zib-float-srv-dialog[data-position="right-top"] {
    right: 50px; left: auto;
    top: 20px; bottom: auto;
    transform: none;
}
#zib-float-srv-dialog[data-position="left-center"] {
    left: 50px; right: auto;
    top: 50%; bottom: auto;
    transform: translateY(-50%);
}
#zib-float-srv-dialog[data-position="left-bottom"] {
    left: 50px; right: auto;
    bottom: 20px; top: auto;
    transform: none;
}
#zib-float-srv-dialog[data-position="left-top"] {
    left: 50px; right: auto;
    top: 20px; bottom: auto;
    transform: none;
}
#zib-float-srv-dialog[data-position="center"] {
    left: 50%; right: auto;
    top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
}

/* ── 隐藏状态（关闭动画：缩小 + 淡出）────────────────── */
/* 右侧位置 */
#zib-float-srv-dialog.is-hidden[data-position="right-center"] {
    transform: translateY(-50%) scale(0.85);
}
#zib-float-srv-dialog.is-hidden[data-position="right-bottom"],
#zib-float-srv-dialog.is-hidden[data-position="right-top"] {
    transform: scale(0.85);
}
/* 左侧位置 */
#zib-float-srv-dialog.is-hidden[data-position="left-center"] {
    transform: translateY(-50%) scale(0.85);
}
#zib-float-srv-dialog.is-hidden[data-position="left-bottom"],
#zib-float-srv-dialog.is-hidden[data-position="left-top"] {
    transform: scale(0.85);
}
/* 居中位置 */
#zib-float-srv-dialog.is-hidden[data-position="center"] {
    transform: translate(-50%, -50%) scale(0.85);
}

/* ── 拖拽状态 ──────────────────────────────────────────── */
#zib-float-srv-dialog.is-dragging {
    transition: none !important;
    will-change: auto;
}
#zib-float-srv-dialog.is-dragged {
    transition: none !important;
}
/* 拖拽后关闭时的动画（覆盖 is-dragged 的 transform） */
#zib-float-srv-dialog.is-dragged.is-hidden {
    transform: scale(0.85) !important;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s !important;
}

/* ── 标题栏（可拖动） ────────────────────────────────────── */
#zib-float-srv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--zib-float-srv-accent);
    color: #fff;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
}
#zib-float-srv-header .srv-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#zib-float-srv-close {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    background: rgba(255, 255, 255, .2);
    transition: background .15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
#zib-float-srv-close:hover {
    background: rgba(255, 255, 255, .38);
}

/* ── 弹窗主体 ────────────────────────────────────────────── */
#zib-float-srv-body {
    padding: 12px 12px 14px;
    text-align: center;
    max-height: var(--zib-float-srv-dialog-h);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.zib-srv-hint {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* =============================================================
   联系卡片网格布局
   由 JS 按实际列数注入 cols-1 / cols-2 / cols-3 类名
   v2.2: 列数语义（cols-N），JS 自动补位占位符确保每行对齐
   ============================================================= */
.zib-srv-contact-grid {
    display: grid;
    gap: 8px;
    justify-items: center;
    align-items: start;
}
.zib-srv-contact-grid.cols-1 {
    grid-template-columns: 1fr;
}
.zib-srv-contact-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
}
.zib-srv-contact-grid.cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* ── 单张联系卡片 ────────────────────────────────────────── */
.zib-srv-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: box-shadow .2s, border-color .2s;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
a.zib-srv-card {
    cursor: pointer;
}
a.zib-srv-card:hover {
    border-color: rgba(var(--zib-float-srv-accent-rgb), .3);
    box-shadow: 0 2px 10px rgba(var(--zib-float-srv-accent-rgb), .15);
}
.zib-srv-card-icon {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zib-srv-card-label {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #555;
}
.zib-srv-card-value {
    font-size: 12px;
    color: var(--zib-float-srv-accent);
    font-weight: 600;
    word-break: break-all;
    line-height: 1.3;
}

/* ── 占位卡片（自动补位，不可见但占格） ───────────────────── */
.zib-srv-card-placeholder {
    visibility: hidden;
    pointer-events: none;
    min-height: 1px;
}

/* ── 微信卡片（二维码） ──────────────────────────────────── */
.zib-srv-card-wx .zib-srv-card-icon img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 4px;
    -webkit-user-drag: none;
}
/* 单列时二维码稍大 */
.zib-srv-contact-grid.cols-1 .zib-srv-card-wx .zib-srv-card-icon img {
    width: 110px;
    height: 110px;
}
.zib-srv-card-wx .zib-srv-card-icon .zib-srv-qr-placeholder svg {
    display: block;
    width: 80px;
    height: 80px;
}
.zib-srv-contact-grid.cols-1 .zib-srv-card-wx .zib-srv-card-icon .zib-srv-qr-placeholder svg {
    width: 110px;
    height: 110px;
}
.zib-srv-wx-label {
    font-size: 11px;
    color: #52c41a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 500;
}

/* 微信图标卡片（关闭二维码模式时） */
.zib-srv-card-wx-icon .zib-srv-card-label {
    color: #52c41a;
}

/* QQ 二维码卡片（上传二维码后） */
.zib-srv-card-qq-qr .zib-srv-card-icon img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 4px;
    -webkit-user-drag: none;
}
.zib-srv-contact-grid.cols-1 .zib-srv-card-qq-qr .zib-srv-card-icon img {
    width: 110px;
    height: 110px;
}
.zib-srv-card-qq-qr .zib-srv-card-icon .zib-srv-qr-placeholder svg {
    display: block;
    width: 80px;
    height: 80px;
}
.zib-srv-contact-grid.cols-1 .zib-srv-card-qq-qr .zib-srv-card-icon .zib-srv-qr-placeholder svg {
    width: 110px;
    height: 110px;
}
.zib-srv-qq-qr-label {
    font-size: 11px;
    color: #12B7F5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 500;
}

/* ── 卡片内图标（QQ / 邮箱 / 电话） ────────────────────── */
.zib-srv-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* 微信图标 —— 内联 SVG */
.zib-srv-wx-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352c41a'%3E%3Cpath d='M8.69 11.39c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zm5.42 0c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.21 14.38c-.28 0-.55-.04-.81-.1l-2.29 1.1.55-1.78c-1.18-.8-1.94-2.02-1.94-3.38 0-2.37 2.02-4.29 4.5-4.29s4.5 1.92 4.5 4.29-2.02 4.16-4.51 4.16z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* 微信大图标（图标卡片模式使用） */
.zib-srv-wx-icon-big {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352c41a'%3E%3Cpath d='M8.69 11.39c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zm5.42 0c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.21 14.38c-.28 0-.55-.04-.81-.1l-2.29 1.1.55-1.78c-1.18-.8-1.94-2.02-1.94-3.38 0-2.37 2.02-4.29 4.5-4.29s4.5 1.92 4.5 4.29-2.02 4.16-4.51 4.16z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* QQ 图标 —— 内联 SVG（企鹅剪影） */
.zib-srv-qq-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2312B7F5'%3E%3Cpath d='M12 3c-2.5 0-4.5 1.8-4.5 4.5 0 1.2.4 2.3 1.2 3.1-1.8.7-3.2 2-3.7 3.7-.2.6-.5 1.2-.5 1.7 0 .5.2 1 .5 1.3s.8.5 1.5.7c.9.3 2 .5 3.5.5h4c1.5 0 2.6-.2 3.5-.5.7-.2 1.2-.4 1.5-.7.3-.3.5-.8.5-1.3 0-.5-.3-1.1-.5-1.7-.5-1.7-1.9-3-3.7-3.7.8-.8 1.2-1.9 1.2-3.1 0-2.7-2-4.5-4.5-4.5z'/%3E%3Ccircle cx='10.5' cy='8.5' r='1' fill='white'/%3E%3Ccircle cx='13.5' cy='8.5' r='1' fill='white'/%3E%3Cellipse cx='12' cy='11' rx='1.8' ry='1.3' fill='white' opacity='.25'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 邮箱图标 —— 内联 SVG（信封） */
.zib-srv-email-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 4L12 13 2 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 电话图标 —— 内联 SVG */
.zib-srv-phone-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c41a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 其他联系方式图标 —— 内联 SVG（地球/链接，通用） */
.zib-srv-other-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 微博图标 —— 内联 SVG（红色 #E6162D） */
.zib-srv-weibo-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E6162D'%3E%3Cpath d='M20.194 14.197c0 3.862-5.226 6.994-11.673 6.994-5.398 0-9.79-2.536-8.414-5.828.977-2.328 4.49-3.401 7.761-3.293 3.27.108 4.946 1.17 4.946 1.17-2.51-.54-5.46.216-6.257 1.332-.796 1.116.284 2.365 2.256 2.365 1.972 0 5.015-.86 5.847-1.695.832-.836.477-2.14-.788-2.14-1.265 0-2.348.324-2.348.324s1.512-.54 3.376-.54c1.864 0 3.294.51 3.294 2.21zM21.594 8.716c-.166-1.053-1.21-1.812-2.258-1.766-1.047.045-1.81 1.006-1.644 2.06.166 1.053 1.21 1.81 2.258 1.765 1.047-.045 1.81-1.006 1.644-2.06zm-2.885-2.642c-.392-.611-1.05-.99-1.75-1.02-.7-.03-1.346.3-1.712.885-.365.585-.377 1.326-.03 1.93.347.605.95.97 1.614 1.005.665.034 1.292-.266 1.664-.81.372-.543.398-1.258.214-1.99zM18.97 6.72c-.24-.347-.626-.56-1.042-.57-.416-.01-.788.17-1 .48-.213.31-.22.71-.02 1.034.2.323.546.52.93.536.385.017.73-.14.93-.432.2-.29.202-.69.202-1.048z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 小红书图标 —— 内联 SVG（红色 #FF2442） */
.zib-srv-xhs-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF2442'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm3.8 14.5c-1.2 1.3-3 2.2-5 1.8-1.5-.3-2.8-1.3-3.5-2.7-.2-.3-.3-.7-.2-1 .1-.4.4-.6.8-.6.2 0 .4.1.5.2.5.8 1.2 1.4 2 1.7 1.5.5 3.1.1 4-1 .4-.5.5-1.1.4-1.7-.1-.7-.6-1.3-1.2-1.5-1.2-.4-2.5.2-2.9 1.3 0 0 0 .1-.1.2-.1.3 0 .5.3.6.2.1.4 0 .5-.2.2-.4.6-.7 1-.7.8 0 1.4.6 1.4 1.4 0 .7-.4 1.4-1 1.7-.8.3-1.7.2-2.3-.4-.3-.3-.5-.7-.5-1.2 0-.5.2-1 .5-1.4h.3c-.2.4-.3.9-.3 1.4 0 .8.3 1.5.8 2.1.3.3.7.5 1.1.5.6 0 1.2-.3 1.5-.8.3-.4.4-.9.3-1.3-.1-.4-.5-.7-1-.8-.9-.2-1.8.3-2 1.1 0 .1-.1.2-.1.3-.1.5.2.9.7 1 .2 0 .4 0 .5-.2.1-.3.4-.5.7-.5.4 0 .7.3.7.7 0 .3-.2.6-.5.8-.4.2-.8.2-1.2 0-.2-.1-.4-.3-.5-.5-.2-.3-.3-.6-.3-1 0-.4.1-.8.3-1.2.1-.1.2-.2.2-.3l.1-.1c.1-.2.3-.2.4-.1.1.1.2.3.1.4-.2.3-.3.7-.3 1.1 0 .6.2 1.1.6 1.5.5.5 1.3.6 1.9.3.6-.3.9-.9.9-1.6 0-.9-.7-1.6-1.6-1.6-.6 0-1.1.3-1.3.7-.1.1 0 .3.1.4.1.1.3 0 .4-.1.2-.3.5-.5.9-.5.3 0 .6.1.8.3.2.2.3.5.3.8 0 .7-.5 1.4-1.3 1.4H12c-.2 0-.3-.1-.3-.2 0-.1 0-.2.1-.3 0 0 .1-.1.1-.2zm-5-7.2c.4 0 .8.3.8.7 0 .4-.3.8-.8.8-.4 0-.8-.3-.8-.8 0-.4.4-.7.8-.7zm.8 3.5H8c-.3 0-.5.2-.5.5v5.5c0 .3.2.5.5.5h2.8c.3 0 .5-.2.5-.5v-5.5c0-.3-.2-.5-.5-.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 知乎图标 —— 内联 SVG（蓝色 #0084FF） */
.zib-srv-zhihu-icon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230084FF'%3E%3Cpath d='M13.444 16.889h-3.218v-1.234h1.04V9.29H9.28V8.033h2.798v7.622h1.366v1.234zm-6.138.494c-1.572 0-2.597-.621-2.597-1.68 0-.86.615-1.408 1.621-1.75.358-.122.633-.248.8-.37.185-.136.28-.31.28-.527 0-.298-.237-.528-.676-.528-.36 0-.624.13-.807.357-.203.255-.255.446-.255.612H4.5c0-.498.196-.984.598-1.44.404-.458.96-.7 1.74-.7 1.036 0 1.76.577 1.76 1.535 0 .74-.43 1.287-1.242 1.595-.448.17-.723.306-.88.434-.16.128-.244.283-.244.476 0 .34.26.536.685.536.52 0 .85-.23 1.082-.58.15-.227.23-.513.23-.847h1.202c-.03.513-.168 1.002-.526 1.437-.424.518-1.056.8-1.89.8zm5.638 2.495c-1.13 0-2.047-.187-2.757-.57l.477-1.307c.545.306 1.122.468 1.71.468.808 0 1.248-.34 1.248-.885 0-.357-.21-.587-1.024-.587h-.978v-1.02h.944c.64 0 .955-.204.955-.595 0-.357-.264-.553-.74-.553-.494 0-.89.17-1.18.502L16.3 14c.455-.596 1.088-.893 1.916-.893.986 0 1.74.383 2.234 1.116.435.64.655 1.42.655 2.31 0 1.103-.28 2.01-.832 2.693-.588.723-1.446 1.07-2.553 1.07h-.017c-.426 0-.833-.06-1.22-.178l.545-1.19c.204.07.42.102.642.102.707 0 1.207-.221 1.492-.655.25-.38.374-.885.374-1.48 0-.58-.124-1.068-.366-1.446-.23-.36-.595-.544-1.08-.544-.52 0-.95.187-1.295.553l-.494-.935c.4-.484.962-.723 1.668-.723zm-3.52-7.356c.383 0 .698.314.698.697a.697.697 0 01-.698.697.697.697 0 01-.698-.697c0-.383.315-.697.698-.697z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── 自定义图标容器样式 ─────────────────────────────────── */
.zib-srv-custom-icon-img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 4px;
    -webkit-user-drag: none;
}
.zib-srv-custom-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}
.zib-srv-custom-icon-svg svg {
    width: 100%;
    height: 100%;
}

/* ── 版权标识 ────────────────────────────────────────────── */
.zib-srv-copyright {
    font-size: 10px;
    color: #bbb;
    margin-top: 10px;
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
}

/* =============================================================
   移动端适配 (≤ 768px)
   按钮移到右下角，弹窗跟随按钮上方
   ============================================================= */
@media (max-width: 768px) {

    #zib-float-srv-btn {
        top: auto;
        bottom: 70px;
        right: 0;
        left: auto;
        transform: none;
        writing-mode: horizontal-tb;
        border-radius: 8px 8px 0 0;
        padding: 8px 10px;
        font-size: 12px;
        letter-spacing: 1px;
    }
    #zib-float-srv-btn.srv-btn-left {
        right: auto;
        left: 0;
        border-radius: 8px 8px 0 0;
        box-shadow: 2px 2px 10px rgba(var(--zib-float-srv-accent-rgb), .35);
    }

    #zib-float-srv-dialog {
        right: 0;
        left: auto;
        bottom: 120px;
        top: auto;
        transform: none;
        width: var(--zib-float-srv-dialog-w-m);
        border-radius: 10px 0 10px 10px;
        will-change: auto;
    }
    /* 左侧弹窗 */
    #zib-float-srv-dialog[data-position="left-center"],
    #zib-float-srv-dialog[data-position="left-bottom"],
    #zib-float-srv-dialog[data-position="left-top"] {
        right: auto;
        left: 0;
        border-radius: 0 10px 10px 10px;
    }
    /* 居中 */
    #zib-float-srv-dialog[data-position="center"] {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        border-radius: 10px;
    }
    /* 关闭动画 */
    #zib-float-srv-dialog.is-hidden[data-position="center"] {
        transform: translate(-50%, -50%) scale(0.85);
    }

    /* 移动端卡片适配 */
    .zib-srv-card-wx .zib-srv-card-icon img {
        width: 65px;
        height: 65px;
    }
    .zib-srv-contact-grid.cols-1 .zib-srv-card-wx .zib-srv-card-icon img {
        width: 85px;
        height: 85px;
    }
    .zib-srv-card-qq-qr .zib-srv-card-icon img {
        width: 65px;
        height: 65px;
    }
    .zib-srv-contact-grid.cols-1 .zib-srv-card-qq-qr .zib-srv-card-icon img {
        width: 85px;
        height: 85px;
    }
    .zib-srv-card-label { font-size: 10px; }
    .zib-srv-card-value { font-size: 11px; }
    .zib-srv-icon { width: 18px; height: 18px; }

    /* 移动端弹窗高度限制 */
    #zib-float-srv-body {
        max-height: var(--zib-float-srv-dialog-h-m);
    }

    /* 移动端自定义图标稍小 */
    .zib-srv-custom-icon-img,
    .zib-srv-custom-icon-svg {
        width: 24px;
        height: 24px;
    }
}

/* =============================================================
   暗色主题兼容
   ============================================================= */
body.dark-theme #zib-float-srv-dialog {
    background: var(--main-bg-color, #222);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}
body.dark-theme .zib-srv-card {
    border-color: rgba(255, 255, 255, .1);
}
body.dark-theme a.zib-srv-card:hover {
    border-color: rgba(var(--zib-float-srv-accent-rgb), .35);
    box-shadow: 0 2px 10px rgba(var(--zib-float-srv-accent-rgb), .2);
}
body.dark-theme .zib-srv-card-label {
    color: var(--muted-color, #aaa);
}
body.dark-theme .zib-srv-card-wx-icon .zib-srv-card-label {
    color: #6ddb6a;
}
body.dark-theme .zib-srv-qq-qr-label {
    color: #5cd0ff;
}
body.dark-theme .zib-srv-card-other .zib-srv-card-label {
    color: #a78bfa;
}
body.dark-theme .zib-srv-card-weibo .zib-srv-card-label {
    color: #ff6b7a;
}
body.dark-theme .zib-srv-card-xhs .zib-srv-card-label {
    color: #ff6b7a;
}
body.dark-theme .zib-srv-card-zhihu .zib-srv-card-label {
    color: #5cb4ff;
}
body.dark-theme .zib-srv-card-custom .zib-srv-card-label {
    color: #a78bfa;
}
body.dark-theme .zib-srv-hint {
    color: var(--muted-color, #aaa);
}
body.dark-theme .zib-srv-copyright {
    color: #555;
}

/* =============================================================
   打印时隐藏
   ============================================================= */
@media print {
    #zib-float-srv-btn,
    #zib-float-srv-dialog {
        display: none !important;
    }
}