/* ═══════════════════════════════════════════════════════════
   ZibChat - Discord-style Chatroom Styles
   BEM naming with .zc- prefix to avoid conflicts
   Reuses Zibll CSS variables for theme compatibility
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS Variables (fallbacks for non-Zibll environments) ─ */
:root {
    --zc-primary: var(--theme-color, #5865f2);
    --zc-primary-hover: var(--theme-color-hover, #4752c4);
    --zc-bg-primary: var(--body-bg-color, #313338);
    --zc-bg-secondary: var(--main-bg-color, #2b2d31);
    --zc-bg-tertiary: #1e1f22;
    --zc-text-primary: var(--key-color, #f2f3f5);
    --zc-text-secondary: var(--main-color, #b5bac1);
    --zc-text-muted: var(--muted-color, #949ba4);
    --zc-border: var(--main-border-color, #3f4147);
    --zc-hover: rgba(79, 84, 92, 0.32);
    --zc-active: rgba(79, 84, 92, 0.48);
    --zc-success: #23a55a;
    --zc-danger: #f23f43;
    --zc-warning: #f0b232;
    --zc-sidebar-width: 240px;
    --zc-members-width: 240px;
    --zc-header-height: 48px;
    --zc-input-height: auto;
    --zc-radius: 8px;
    --zc-radius-sm: 4px;
}

/* ─── Reset & Base ─────────────────────────────────────── */
.zc-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* 视口高度：真机（iOS Safari / 安卓 Chrome）地址栏与软键盘会让 100vh 大于实际可视高度，
       于是固定在底部的输入区被推到屏幕外 —— 用户表现为「手机上看不到消息发送框」。
       静态降级链：100vh（最老）→ 100dvh（现代，随地址栏动态变化）。
       运行时由 JS 用 visualViewport 精确同步：命中 .zc-vvh-locked 时以 --zc-vvh 为准，
       这样软键盘弹出、地址栏收缩都能保证输入区始终贴着可视区底部。 */
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    /* ⚠️ 字体/字号：这里【绝对不要】声明 font-family / font-size，也不要写 inherit。
       本页的 <body class="zc-page"> 本身就在 WP 主题环境里，站点对 body 的字体设置
       （本站是自定义 CSS 把 body 的 font-family 设为 'HoarfallCustom', sans-serif）
       会自然作用到本页，这才是真正的"跟随网站整体"。
       为什么连 inherit 也不行：.zc-page 特异性(0,1,0) 高于 body 的(0,0,1)，写在这里会
       把站点给 body 的字体规则整条顶掉，而 inherit 只能向上取到 html 元素的值
       （zibll 加载的 bootstrap 把 html 的 font-family 设为 sans-serif），
       结果聊天室反而拿不到站点自定义字体 —— 这正是之前"字体没跟着 WP 走"的原因。 */
    line-height: 1.5;
    color: var(--zc-text-primary);
    background: var(--zc-bg-primary);
}

.zc-page.zc-vvh-locked {
    height: var(--zc-vvh);
}

.zc-page *, .zc-page *::before, .zc-page *::after {
    box-sizing: border-box;
}

/* ─── App Layout (Three-column) ────────────────────────── */
.zc-app {
    display: flex;
    /* 跟随 .zc-page 的高度（body 已显式定高），只需维护一处 */
    height: 100%;
    width: 100%;
    /* 刘海屏 / 灵动岛：只给顶部与左右留安全区，底部交给输入区自己处理 */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* ─── Left Sidebar (Channels) ──────────────────────────── */
.zc-sidebar {
    width: var(--zc-sidebar-width);
    min-width: var(--zc-sidebar-width);
    background: var(--zc-bg-secondary);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--zc-border);
}

.zc-sidebar__header {
    height: var(--zc-header-height);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--zc-border);
    flex-shrink: 0;
}

.zc-sidebar__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--zc-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zc-sidebar__home {
    color: var(--zc-text-muted);
    text-decoration: none;
    font-size: 16px;
    padding: 4px;
    border-radius: var(--zc-radius-sm);
    transition: color 0.15s, background 0.15s;
}

.zc-sidebar__home:hover {
    color: var(--zc-text-primary);
    background: var(--zc-hover);
}

.zc-sidebar__search {
    padding: 8px 10px;
    flex-shrink: 0;
}

.zc-channel-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
}

/* Channel group */
.zc-channel-group__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--zc-text-muted);
    padding: 16px 8px 4px;
    margin: 0;
    letter-spacing: 0.02em;
    cursor: default;
}

/* Channel item */
.zc-channel-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    margin: 1px 0;
    border-radius: var(--zc-radius-sm);
    cursor: pointer;
    color: var(--zc-text-muted);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
    position: relative;
}

.zc-channel-item:hover {
    background: var(--zc-hover);
    color: var(--zc-text-secondary);
}

.zc-channel-item--active {
    background: var(--zc-active);
    color: var(--zc-text-primary);
}

.zc-channel-item__icon {
    font-size: 18px;
    margin-right: 8px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.zc-channel-item--active .zc-channel-item__icon {
    opacity: 1;
}

.zc-channel-item__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.zc-channel-item__badge {
    background: var(--zc-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 5px;
    flex-shrink: 0;
}

/* User panel at bottom of sidebar */
.zc-sidebar__footer {
    padding: 8px;
    border-top: 1px solid var(--zc-border);
    flex-shrink: 0;
    background: var(--zc-bg-tertiary);
}

.zc-user-panel {
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: var(--zc-radius-sm);
}

.zc-user-panel__avatar {
    position: relative;
    flex-shrink: 0;
    margin-right: 8px;
}

.zc-user-panel__avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
}

.zc-user-panel__info {
    flex: 1;
    min-width: 0;
}

.zc-user-panel__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--zc-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zc-user-panel__status {
    display: block;
    font-size: 11px;
    color: var(--zc-text-muted);
}

/* Status dot */
.zc-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--zc-bg-tertiary);
}

.zc-status-dot--online { background: var(--zc-success); }
.zc-status-dot--idle { background: var(--zc-warning); }
.zc-status-dot--busy { background: var(--zc-danger); }
.zc-status-dot--offline { background: var(--zc-text-muted); }

/* ─── Main Chat Area ───────────────────────────────────── */
.zc-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--zc-bg-primary);
}

/* Chat header */
.zc-chat-header {
    height: var(--zc-header-height);
    padding: 0 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--zc-border);
    flex-shrink: 0;
    background: var(--zc-bg-primary);
}

.zc-chat-header__info {
    flex: 1;
    min-width: 0;
}

.zc-chat-header__name {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--zc-text-primary);
}

.zc-chat-header__name i {
    color: var(--zc-text-muted);
    font-size: 18px;
}

.zc-chat-header__desc {
    font-size: 12px;
    color: var(--zc-text-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zc-chat-header__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ─── Messages ─────────────────────────────────────────── */
.zc-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
}

.zc-messages__list {
    padding: 16px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.zc-messages__loader {
    text-align: center;
    padding: 12px;
}

/* Single message */
.zc-message {
    display: flex;
    padding: 4px 16px;
    margin: 0 -16px;
    position: relative;
    transition: background 0.1s;
}

.zc-message:hover {
    background: var(--zc-hover);
}

.zc-message__avatar {
    flex-shrink: 0;
    margin-right: 12px;
    margin-top: 2px;
    /* 头像框（zibll 头像框/VIP 角标）定位上下文 */
    position: relative;
    line-height: 0;
}

/* 头像本体：:not(.avatar-badge) —— VIP 角标同样是 <img>，别被这里一并放大 */
.zc-message__avatar img:not(.avatar-badge) {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    cursor: pointer;
}

/* zibll 头像框/角标：父主题 zib_get_avatar_box() 输出的
   .avatar-badge（VIP 角标）与头像框图片，叠加在头像右下/外围。
   ⚠️ 尺寸必须与父主题同口径，并显式解除它的 max/min 约束：
   父主题 `.avatar-badge` 是 `width: calc(var(--this-size)/2.5); max-width:25px`，
   一旦角标被别的规则撑大，它就会顶着 25px 上限渲染（曾经就是这样盖住半个头像）。 */
.zc-message__avatar .avatar-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    /* 头像尺寸的 40%（38px 头像 → 15.2px），上限 16px 兜底 */
    width: calc(var(--this-size, 38px) / 2.5);
    height: calc(var(--this-size, 38px) / 2.5);
    max-width: 16px;
    max-height: 16px;
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    object-fit: contain;
    z-index: 2;
}

.zc-message__avatar a,
.zc-message__avatar span.avatar-img,
.zc-message__avatar span.zc-avatar-wrap {
    display: inline-block;
    line-height: 0;
}

/* 头像框图片（zibll 部分头像框是 img，尺寸与原头像一致即可）
   ⚠️ 必须带 :not(.avatar-badge)：角标同样是 .avatar-img 里的 <img>，
   少了它就会被这里的 40px 命中，再被父主题 max-width:25px 裁成 25px。 */
.zc-message__avatar span.avatar-img img:not(.avatar-badge),
.zc-message__avatar span.zc-avatar-wrap img:not(.avatar-badge) {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.zc-message__body {
    flex: 1;
    min-width: 0;
}

.zc-message__header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.zc-message__author {
    font-weight: 600;
    color: var(--zc-text-primary);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

.zc-message__author:hover {
    text-decoration: underline;
}

/* zibll 认证用户徽标：认证图标（父主题 <icon class="user-auth-icon">）+
   可选认证名称，紧跟在作者名后面。父主题自身的 .user-auth-icon 样式随
   main.css 一起加载，这里只做尺寸/对齐兜底，避免聊天页内错位。 */
.zc-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    align-self: center;
    line-height: 1;
}

/* 认证图标：插件自带内联 SVG（不依赖父主题 sprite），颜色跟随站点主题色 */
.zc-auth-badge .zc-auth-icon {
    width: 1em;
    height: 1em;
    display: block;
    color: var(--theme-color, #4a9eff);
    flex-shrink: 0;
}

.zc-auth-badge:not(:has(.zc-auth-name)) .zc-auth-icon {
    width: 1.05em;
    height: 1.05em;
}

.zc-auth-badge .zc-auth-name {
    font-size: 11px;
    color: var(--zc-text-muted);
    white-space: nowrap;
}

/* ── 多生态身份标识（等级徽章 / 佩戴勋章 / 圈子身份）────────────────────
   统一容器：横排、不压缩、与作者名垂直居中对齐（消息头是 align-items:baseline，
   图片必须显式 align-self:center 才不会跟着基线跑偏）。
   图标尺寸统一压到 1em，避免父主题的图标高度把消息头行高撑开。 */
.zc-badge-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
    line-height: 1;
}

.zc-badge-item img {
    height: 1em;
    width: auto;
    max-width: none;
    display: block;
    vertical-align: middle;
}

/* 等级徽章：父主题输出 user-level-N.png，稍大一点点便于辨认 */
.zc-badge-item--level img {
    height: 1.1em;
}

/* 佩戴勋章：方形徽章，固定宽高避免被拉伸 */
.zc-badge-item--medal img {
    height: 1.1em;
    width: 1.1em;
    object-fit: contain;
}

/* 圈子 / 论坛身份：父主题输出文字型 <span class="badg">，
   这里只压字号与内边距，保证不把消息头撑高。 */
.zc-badge-item--bbs .badg {
    font-size: 11px;
    line-height: 1.4;
    padding: 0 5px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 超出展示位预算时折叠的「+N」标记 */
.zc-badge-more {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
    font-size: 11px;
    line-height: 1;
    color: var(--zc-text-muted);
    background: var(--zc-bg-tertiary, rgba(127, 127, 127, 0.15));
    border-radius: 3px;
    padding: 1px 4px;
    cursor: help;
}

.zc-message__time {
    font-size: 11px;
    color: var(--zc-text-muted);
    flex-shrink: 0;
}

.zc-message__edited {
    font-size: 11px;
    color: var(--zc-text-muted);
}

.zc-message__content {
    color: var(--zc-text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.45;
}

.zc-message__content img.zc-msg-img {
    /* min(400px, 100%)：桌面仍 400px 上限；窄容器（手机）以容器宽为上限，
       否则固定 400px 会撑破消息气泡导致整页横向滚动 */
    max-width: min(400px, 100%);
    max-height: 300px;
    /* 坏图（404 / 跨域拒绝）rendered 尺寸为 0 会彻底消失，留 40px 占位：
       用户看得见「这里有张图但没加载出来」，也能点开看灯箱的失败提示 */
    min-height: 40px;
    border-radius: var(--zc-radius);
    margin: 4px 0;
    cursor: pointer;
    display: block;
}

.zc-message__content img.zc-emoji {
    /* ⚠️ 父主题 zibll main.min.css 有 .smilie-icon { width:30px !important }，
       会把我们等宽高的表情压成 30x22 的饼（正方形被横向拉伸）。
       必须 !important 反制并锁定等宽高；object-fit:contain 兜底非正方形原图。
       32px ≈ 2.3 倍正文字号——「表情相对文字放大展示」 */
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    vertical-align: middle;
    margin: 0 2px;
}

.zc-message__content .zc-code-block {
    background: var(--zc-bg-tertiary);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-sm);
    padding: 8px 12px;
    margin: 4px 0;
    overflow-x: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.4;
}

.zc-message__content .zc-code-inline {
    background: var(--zc-bg-tertiary);
    border-radius: 3px;
    padding: 1px 4px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
}

.zc-message__content .zc-mention {
    color: var(--zc-primary);
    background: rgba(88, 101, 242, 0.15);
    border-radius: 3px;
    padding: 0 2px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}

.zc-message__content .zc-mention:hover {
    background: rgba(88, 101, 242, 0.3);
    text-decoration: underline;
}

.zc-message__content .zc-link {
    color: #00a8fc;
    text-decoration: none;
}

.zc-message__content .zc-link:hover {
    text-decoration: underline;
}

/* ─── Markdown block elements (Discord-style) ───────────── */
.zc-message__content blockquote.zc-md-quote {
    margin: 4px 0;
    padding: 2px 12px;
    border-left: 4px solid var(--zc-border-strong, #4f545c);
    background: rgba(255, 255, 255, 0.03);
    color: var(--zc-text-muted);
}

.zc-message__content .zc-md-h {
    margin: 6px 0 4px;
    line-height: 1.3;
    font-weight: 700;
}
.zc-message__content .zc-md-h1 { font-size: 1.5em; }
.zc-message__content .zc-md-h2 { font-size: 1.25em; }
.zc-message__content .zc-md-h3 { font-size: 1.1em; }

.zc-message__content .zc-md-list {
    margin: 4px 0;
    padding-left: 22px;
}
.zc-message__content .zc-md-list li {
    margin: 2px 0;
}
.zc-message__content .zc-md-list--ol { list-style: decimal; }
.zc-message__content .zc-md-list--ul { list-style: disc; }

.zc-message__content .zc-md-hr {
    border: none;
    border-top: 1px solid var(--zc-border);
    margin: 8px 0;
}

.zc-message__content u {
    text-decoration: underline;
}

/* Code block language tag */
.zc-message__content .zc-code-lang {
    display: block;
    font-size: 11px;
    color: var(--zc-text-muted);
    margin-bottom: 4px;
    font-family: "SFMono-Regular", Consolas, monospace;
    text-transform: lowercase;
}

/* ─── Composer live Markdown preview ────────────────────── */
.zc-composer__preview {
    background: var(--zc-bg-tertiary, #2b2d31);
    border: 1px solid var(--zc-border, #3f4147);
    border-radius: var(--zc-radius-sm, 8px);
    padding: 8px 12px;
    margin-bottom: 6px;
    max-height: 220px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.45;
}
.zc-composer__preview[hidden] {
    display: none;
}
.zc-composer__preview .zc-message__content {
    color: var(--zc-text-secondary, #dbdee1);
}

/* Reply reference */
.zc-message__reply {
    font-size: 12px;
    color: var(--zc-text-muted);
    margin-bottom: 4px;
    padding: 2px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.zc-message__reply i {
    font-size: 10px;
}

.zc-message__reply-author {
    font-weight: 600;
    color: var(--zc-text-secondary);
}

.zc-message__reply-text {
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Message actions (hover toolbar) */
.zc-message__actions {
    position: absolute;
    right: 16px;
    top: -8px;
    display: none;
    background: var(--zc-bg-secondary);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    z-index: 1;
}

.zc-message:hover .zc-message__actions {
    display: flex;
}

.zc-msg-action {
    background: none;
    border: none;
    color: var(--zc-text-muted);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.1s, color 0.1s;
}

.zc-msg-action:hover {
    background: var(--zc-hover);
    color: var(--zc-text-primary);
}

/* Pinned message style */
.zc-message--pinned {
    border-left: 2px solid var(--zc-warning);
    padding-left: 14px;
}

/* System message style */
.zc-message--system {
    justify-content: center;
    padding: 8px 16px;
}

.zc-message--system .zc-message__content {
    font-size: 13px;
    color: var(--zc-text-muted);
    font-style: italic;
    text-align: center;
}

/* Scroll to bottom button */
.zc-scroll-bottom {
    position: absolute;
    bottom: 8px;
    right: 16px;
    z-index: 10;
}

.zc-scroll-bottom .zc-btn--circle {
    position: relative;
}

/* ─── Reply Bar ────────────────────────────────────────── */
.zc-reply-bar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--zc-bg-secondary);
    border-top: 1px solid var(--zc-border);
    font-size: 13px;
    color: var(--zc-text-secondary);
}

.zc-reply-bar__content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.zc-reply-bar__preview {
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Input Area ───────────────────────────────────────── */
.zc-input-area {
    padding: 0 16px 16px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--zc-bg-primary);
}

.zc-input-area__tools {
    flex-shrink: 0;
    padding-bottom: 4px;
}

.zc-input-area__field {
    flex: 1;
    min-width: 0;
}

.zc-textarea {
    width: 100%;
    resize: none;
    border: none;
    background: var(--zc-bg-secondary);
    color: var(--zc-text-primary);
    border-radius: var(--zc-radius);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
    outline: none;
}

.zc-textarea::placeholder {
    color: var(--zc-text-muted);
}

.zc-textarea:focus {
    box-shadow: 0 0 0 1px var(--zc-primary);
}

.zc-input-area__send {
    flex-shrink: 0;
    padding-bottom: 4px;
}

.zc-input-area__login {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: var(--zc-bg-secondary);
    border-radius: var(--zc-radius);
}

.zc-input-area__login a {
    color: var(--zc-primary);
    text-decoration: none;
}

.zc-input-area__login a:hover {
    text-decoration: underline;
}

/* ─── Right Members Sidebar ────────────────────────────── */
.zc-members {
    width: var(--zc-members-width);
    min-width: var(--zc-members-width);
    background: var(--zc-bg-secondary);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--zc-border);
}

.zc-members__header {
    height: var(--zc-header-height);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--zc-border);
    flex-shrink: 0;
}

.zc-members__header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--zc-text-primary);
}

.zc-members__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Member group */
.zc-member-group__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--zc-text-muted);
    padding: 12px 8px 4px;
    margin: 0;
    letter-spacing: 0.02em;
}

/* Member item */
.zc-member-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--zc-radius-sm);
    cursor: pointer;
    transition: background 0.1s;
}

.zc-member-item:hover {
    background: var(--zc-hover);
}

.zc-member-item__avatar {
    position: relative;
    flex-shrink: 0;
    margin-right: 10px;
}

.zc-member-item__avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
}

.zc-member-item__name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--zc-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Offline members are dimmed */
.zc-member-group[data-status="offline"] .zc-member-item__avatar img {
    opacity: 0.5;
}
.zc-member-group[data-status="offline"] .zc-member-item__name {
    opacity: 0.5;
}

/* ─── Pinned Bar ───────────────────────────────────────── */
.zc-pinned-bar {
    padding: 8px 16px;
    background: #3c4152;
    border-bottom: 1px solid var(--zc-border);
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--zc-text-secondary);
    cursor: pointer;
    transition: background 0.2s;
}

.zc-pinned-bar:hover {
    background: #40445b;
}

.zc-pinned-bar__content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.zc-pinned-bar__content i {
    color: var(--zc-warning);
    flex-shrink: 0;
}

.zc-pinned-bar__content strong {
    color: var(--zc-text-primary);
    font-weight: 600;
}

.zc-pinned-bar__close {
    flex-shrink: 0;
}

/* ─── Pinned Panel ────────────────────────────────────── */
.zc-pinned-panel {
    background: var(--zc-bg-secondary);
    border-bottom: 1px solid var(--zc-border);
    max-height: 400px;
    overflow-y: auto;
}

.zc-pinned-panel__header {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--zc-border);
}

.zc-pinned-panel__header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--zc-text-primary);
}

.zc-pinned-panel__header h4 i {
    color: var(--zc-warning);
    margin-right: 6px;
}

.zc-pinned-panel__list {
    padding: 8px;
}

.zc-pinned-panel__list .zc-message--pinned {
    background: #3c4152;
    border: 1px solid var(--zc-border);
    border-radius: 4px;
    margin-bottom: 8px;
}

.zc-pinned-panel__list .zc-message--pinned:last-child {
    margin-bottom: 0;
}

/* ─── Search Panel ─────────────────────────────────────── */
.zc-search-panel {
    position: absolute;
    top: var(--zc-header-height);
    right: 0;
    width: 420px;
    max-width: 100%;
    height: calc(100% - var(--zc-header-height));
    background: var(--zc-bg-secondary);
    border-left: 1px solid var(--zc-border);
    display: flex;
    flex-direction: column;
    z-index: 20;
    box-shadow: -4px 0 16px rgba(0,0,0,0.2);
}

.zc-search-panel__input-wrap {
    display: flex;
    padding: 12px;
    gap: 8px;
    border-bottom: 1px solid var(--zc-border);
}

.zc-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* ─── Connection Status ────────────────────────────────── */
.zc-connection-status {
    padding: 6px 16px;
    background: var(--zc-danger);
    color: #fff;
    font-size: 13px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ─── Common UI Elements ───────────────────────────────── */
.zc-input {
    width: 100%;
    background: var(--zc-bg-tertiary);
    border: 1px solid var(--zc-border);
    color: var(--zc-text-primary);
    border-radius: var(--zc-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}

.zc-input:focus {
    border-color: var(--zc-primary);
}

.zc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: none;
    border-radius: var(--zc-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    text-decoration: none;
    gap: 6px;
}

.zc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.zc-btn--primary {
    background: var(--zc-primary);
    color: #fff;
}

.zc-btn--primary:hover:not(:disabled) {
    background: var(--zc-primary-hover);
}

.zc-btn--text {
    background: transparent;
    color: var(--zc-text-secondary);
}

.zc-btn--text:hover {
    background: var(--zc-hover);
    color: var(--zc-text-primary);
}

.zc-btn--small {
    padding: 4px 10px;
    font-size: 12px;
}

.zc-btn--circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    background: var(--zc-bg-secondary);
    color: var(--zc-text-secondary);
    border: 1px solid var(--zc-border);
}

.zc-btn--circle:hover {
    background: var(--zc-hover);
    color: var(--zc-text-primary);
}

.zc-btn-icon {
    background: none;
    border: none;
    color: var(--zc-text-muted);
    font-size: 16px;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--zc-radius-sm);
    transition: color 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.zc-btn-icon:hover {
    color: var(--zc-text-primary);
    background: var(--zc-hover);
}

/* Badge count */
.zc-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--zc-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
}

/* VIP Badge */
.zc-badge--vip {
    background: linear-gradient(135deg, #f0b232, #f57c00);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 2px;
}

/* User Card */
.zc-usercard {
    position: fixed;
    z-index: 100;
    width: 300px;
    background: var(--zc-bg-secondary);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    overflow: hidden;
}

.zc-usercard__header {
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--zc-bg-tertiary);
}

.zc-usercard__avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.zc-usercard__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--zc-text-primary);
    display: block;
}

.zc-usercard__body {
    padding: 12px 16px;
}

.zc-usercard__footer {
    padding: 8px 16px 12px;
    text-align: center;
}

/* Context Menu */
.zc-context-menu {
    position: absolute;
    z-index: 50;
    background: var(--zc-bg-secondary);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    min-width: 180px;
    padding: 4px;
}

.zc-context-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zc-context-menu__item {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--zc-radius-sm);
    font-size: 13px;
    color: var(--zc-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
}

.zc-context-menu__item:hover {
    background: var(--zc-primary);
    color: #fff;
}

.zc-context-menu__item--danger:hover {
    background: var(--zc-danger);
}

/* Emoji picker */
.zc-emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 16px;
    width: 360px;
    max-height: 320px;
    max-width: calc(100vw - 16px);
    background: var(--zc-bg-secondary);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 30;
    display: flex;
    flex-direction: column;
}

.zc-emoji-picker__tabs {
    display: flex;
    padding: 6px;
    gap: 4px;
    border-bottom: 1px solid var(--zc-border);
    flex-shrink: 0;
    overflow-x: auto;
}

.zc-emoji-picker__grid {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
}

.zc-emoji-item {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--zc-radius-sm);
    transition: background 0.1s;
}

.zc-emoji-item:hover {
    background: var(--zc-hover);
}

.zc-emoji-item img {
    width: 28px;
    height: 28px;
}

/* Loading spinner */
.zc-loading {
    text-align: center;
    padding: 24px;
    color: var(--zc-text-muted);
}

.zc-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--zc-border);
    border-top-color: var(--zc-primary);
    border-radius: 50%;
    animation: zc-spin 0.8s linear infinite;
    margin: 0 auto 8px;
}

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

/* Login prompt */
.zc-login-prompt {
    text-align: center;
    padding: 4px;
}

.zc-login-prompt .zc-btn {
    width: 100%;
}

/* Mobile overlay */
.zc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 40;
}

/* Mobile-only elements (hidden on desktop) */
.zc-mobile-only {
    display: none;
}

/* ─── Scrollbar ────────────────────────────────────────── */
.zc-messages::-webkit-scrollbar,
.zc-channel-list::-webkit-scrollbar,
.zc-members__list::-webkit-scrollbar {
    width: 6px;
}

.zc-messages::-webkit-scrollbar-thumb,
.zc-channel-list::-webkit-scrollbar-thumb,
.zc-members__list::-webkit-scrollbar-thumb {
    background: var(--zc-border);
    border-radius: 3px;
}

.zc-messages::-webkit-scrollbar-track,
.zc-channel-list::-webkit-scrollbar-track,
.zc-members__list::-webkit-scrollbar-track {
    background: transparent;
}

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 1200px) {
    .zc-members {
        width: 200px;
        min-width: 200px;
    }
}

@media (max-width: 992px) {
    .zc-members {
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: var(--zc-members-width);
        z-index: 50;
    }
    .zc-members.zc-members--open {
        display: flex;
    }
    .zc-mobile-only {
        display: inline-flex;
    }
}

@media (max-width: 768px) {
    .zc-sidebar {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--zc-sidebar-width);
        z-index: 50;
    }
    .zc-sidebar.zc-sidebar--open {
        display: flex;
    }
    .zc-search-panel {
        width: 100%;
    }
    .zc-emoji-picker {
        width: calc(100vw - 32px);
        left: 16px;
    }
}

/* ─── Toast Notifications ──────────────────────────────── */
.zc-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 20px;
    border-radius: var(--zc-radius);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.zc-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.zc-toast--info {
    background: var(--zc-primary);
}

.zc-toast--error {
    background: var(--zc-danger);
}

.zc-toast--success {
    background: var(--zc-success);
}

/* ─── @Mention Dropdown ────────────────────────────────── */
.zc-mention-dropdown {
    background: var(--zc-bg-secondary);
    border: 1px solid var(--zc-border);
    border-radius: var(--zc-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    max-height: 200px;
    overflow-y: auto;
    min-width: 200px;
}

.zc-mention-dropdown__item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--zc-text-primary);
    transition: background 0.1s;
}

.zc-mention-dropdown__item:hover {
    background: var(--zc-primary);
    color: #fff;
}

.zc-mention-dropdown__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ─── Message State Modifiers ──────────────────────────── */
.zc-message--highlight {
    animation: zc-highlight 2s ease-out;
}

@keyframes zc-highlight {
    0%  { background: rgba(88, 101, 242, 0.3); }
    100% { background: transparent; }
}

.zc-message--editing {
    background: rgba(88, 101, 242, 0.1) !important;
    border-left: 3px solid var(--zc-primary);
}

/* ─── Pinned Message ─────────────────────────────────── */
.zc-message--pinned {
    background: #3c4152;
    border-left: 3px solid var(--zc-warning);
}

.zc-message__pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 6px;
    background: rgba(255, 193, 7, 0.15);
    color: var(--zc-warning);
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
}

.zc-message__pinned-badge i {
    font-size: 10px;
}

/* ─── Input Area Disabled ──────────────────────────────── */
.zc-input-area--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.zc-input-area--disabled .zc-textarea {
    background: var(--zc-bg-tertiary);
    cursor: not-allowed;
}

/* ─── Channel Group Collapsed ──────────────────────────── */
.zc-channel-group--collapsed .zc-channel-group__items {
    display: none;
}

/* ─── Emoji Panel (inside picker grid) ─────────────────── */
.zc-emoji-panel {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.zc-emoji-tab {
    background: transparent;
    border: none;
    color: var(--zc-text-muted);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--zc-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.zc-emoji-tab:hover {
    background: var(--zc-hover);
    color: var(--zc-text-primary);
}

.zc-emoji-tab--active {
    background: var(--zc-primary);
    color: #fff;
}

/* ─── Context Menu (li elements) ───────────────────────── */
.zc-context-menu__list li {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--zc-radius-sm);
    font-size: 13px;
    color: var(--zc-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.1s;
    list-style: none;
}

.zc-context-menu__list li:hover {
    background: var(--zc-primary);
    color: #fff;
}

.zc-context-menu__list li.zc-context-menu__danger:hover {
    background: var(--zc-danger);
}

/* ─── Search Results ───────────────────────────────────── */
.zc-search-results__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--zc-text-muted);
}

.zc-search-results__empty i {
    font-size: 36px;
    display: block;
    margin-bottom: 12px;
}

.zc-search-results__header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--zc-text-muted);
    padding: 8px 4px;
    letter-spacing: 0.02em;
}

.zc-search-result-item {
    cursor: pointer;
    border-radius: var(--zc-radius-sm);
    margin-bottom: 2px;
    transition: background 0.1s;
}

.zc-search-result-item:hover {
    background: var(--zc-hover);
}

.zc-search-results__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    font-size: 13px;
    color: var(--zc-text-muted);
}

/* ─── Messages Empty State ─────────────────────────────── */
.zc-messages__empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--zc-text-muted);
}

.zc-messages__empty i {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* ─── Small Spinner ────────────────────────────────────── */
.zc-loading__spinner--small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* ─── Channel Badges (inline) ──────────────────────────── */
.zc-channel-item .zc-badge-count {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
}

/* ─── Reply Bar Styles ─────────────────────────────────── */
.zc-reply-bar {
    padding: 8px 16px;
    background: var(--zc-bg-secondary);
    border-top: 1px solid var(--zc-border);
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--zc-text-secondary);
}

.zc-reply-bar__content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.zc-reply-bar__content i {
    color: var(--zc-primary);
}

.zc-reply-bar__preview {
    color: var(--zc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 4px;
}

/* ─── Scroll Bottom Button ─────────────────────────────── */
.zc-scroll-bottom {
    position: absolute;
    bottom: 80px;
    right: 20px;
    z-index: 10;
}

/* ─── Status Dots ──────────────────────────────────────── */
.zc-member-item__avatar .zc-status-dot {
    border-color: var(--zc-bg-secondary);
}

/* ─── User Card Detail Rows ────────────────────────────── */
.zc-usercard__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: var(--zc-text-secondary);
}

.zc-usercard__row span:first-child {
    color: var(--zc-text-muted);
}

/* ─── Theme Mobile Elements Hide ────────────────────────── */
.zc-page .header,
.zc-page .mobile-navbar,
.zc-page .navbar-toggle,
.zc-page .mobile-nav-widget,
.zc-page .footer,
.zc-page .float-btn,
.zc-page .zib-toolbar,
.zc-page .scroll-top,
.zc-page .mobile-bottom-nav,
.zc-page .mobile-bottom-menu,
.zc-page .zib-mobile-nav,
.zc-page .zib-bottom-nav,
.zc-page .bottom-nav-bar,
.zc-page .mobile-footer,
.zc-page .nav-bottom,
.zc-page .zib-nav-bottom,
.zc-page .zibll-mobile-nav,
.zc-page .zibll-bottom-nav,
.zc-page .zib-toolbar-bottom,
.zc-page .fixed-bottom-bar,
.zc-page .footer-tabbar,
.zc-page .float-right {
    display: none !important;
}

/* ─── 屏蔽主题全局弹窗 / 浮层 ─────────────────────────────
   聊天页是一个全屏独立外壳，主题在 wp_footer 输出的「系统公告弹窗」
   会在 window.onload 后自动 show()，其 z-index（1051）高于聊天页所有元素，
   会整屏盖住聊天室 —— 真机上就表现为「看不到消息发送框」。
   子比主题的实现见 inc/functions/functions.php 的 zib_system_notice()：
   输出 #modal-system-notice 并 bootstrap modal('show')。
   由后台开关「屏蔽主题弹窗 / 浮层」控制（默认开启），关掉即恢复主题原样。 */
.zc-page.zc-hide-overlay #modal-system-notice,
.zc-page.zc-hide-overlay .modal,
.zc-page.zc-hide-overlay .modal-backdrop,
.zc-page.zc-hide-overlay .zib-modal,
.zc-page.zc-hide-overlay .zib-modal-mask,
.zc-page.zc-hide-overlay .modal-system-notice {
    display: none !important;
}

@media (max-width: 768px) {
    .zc-page {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    .zc-page .container,
    .zc-page .wrap,
    .zc-page .site-content,
    .zc-page #content {
        margin: 0;
        padding: 0;
        max-width: none;
        width: 100%;
    }
    
    .zc-page body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

.zc-usercard__role {
    background: var(--zc-primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.zc-usercard__badges {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.zc-usercard__avatar {
    position: relative;
}

.zc-usercard__avatar .zc-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ═══════════════════════════════════════════════════════════
   ZibChat Enhancement Layer
   Discord-style composer · message grouping · typing indicator
   new-message divider · overall polish & responsive
   ═══════════════════════════════════════════════════════════ */

/* ─── Message Composer (Discord pill) ────────────────────── */
.zc-input-area {
    display: block;
    padding: 0 16px 16px;
    flex-shrink: 0;
    background: var(--zc-bg-primary);
}

.zc-composer {
    background: var(--zc-bg-secondary);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.12s;
}

.zc-composer:focus-within {
    box-shadow: 0 0 0 1px var(--zc-primary);
}

.zc-composer__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 0;
}

.zc-composer__row {
    display: flex;
    align-items: flex-end;
    padding: 0 8px 6px;
    gap: 2px;
}

.zc-composer__btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--zc-text-muted);
    width: 40px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s, transform 0.1s;
}

.zc-composer__btn:hover {
    color: var(--zc-text-primary);
}

.zc-composer__attach {
    width: 24px;
    height: 24px;
    margin: 0 4px 10px 4px;
    border-radius: 50%;
    background: var(--zc-bg-tertiary);
    color: var(--zc-text-secondary);
    font-size: 16px;
}

.zc-composer__attach:hover {
    color: var(--zc-primary);
}

.zc-composer__input {
    flex: 1;
    min-width: 0;
    resize: none;
    border: none;
    background: transparent;
    color: var(--zc-text-primary);
    padding: 11px 6px;
    font-size: 15px;
    line-height: 1.375;
    font-family: inherit;
    max-height: 50vh;
    overflow-y: auto;
    outline: none;
}

.zc-composer__input::placeholder {
    color: var(--zc-text-muted);
}

.zc-composer__actions {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.zc-composer__send {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
    border-radius: 50%;
    color: var(--zc-text-muted);
    font-size: 18px;
}

.zc-composer__send:not(:disabled) {
    color: var(--zc-primary);
}

.zc-composer__send:not(:disabled):hover {
    color: var(--zc-primary-hover);
    transform: scale(1.08);
}

.zc-composer__send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Attachment preview chips */
.zc-attachment-chip {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--zc-bg-tertiary);
    border: 1px solid var(--zc-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zc-attachment-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zc-attachment-chip__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    padding: 0;
}

.zc-attachment-chip__remove:hover {
    background: var(--zc-danger);
}

.zc-attachment-chip--uploading {
    color: var(--zc-text-muted);
    font-size: 11px;
}

/* ─── Visually hide native file input (triple-safety against zibll parent theme) ──
 *
 * This input is triggered purely via JS $('#zc-file-input').click() from the ➕ button.
 * It does NOT need keyboard/screen-reader access, so display:none is safe here.
 * We use 4 levels of selector specificity + inline-style fallback in the HTML.
 */
#zc-app #zc-file-input.zc-file-input,
.zc-composer > input[type="file"].zc-file-input,
input#zc-file-input[type="file"].zc-file-input,
.zc-file-input {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* ─── Message grouping (compact consecutive messages) ────── */
.zc-message__avatar {
    position: relative;
}

.zc-message--grouped {
    padding-top: 1px;
    padding-bottom: 1px;
}

.zc-message--grouped .zc-message__avatar img {
    visibility: hidden;
}

.zc-message--grouped .zc-message__header {
    display: none;
}

.zc-message__gutter {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    text-align: center;
    font-size: 10px;
    color: var(--zc-text-muted);
    opacity: 0;
    pointer-events: none;
}

.zc-message--grouped:hover .zc-message__gutter {
    opacity: 1;
}

/* Message text readability (Discord uses near-white) */
.zc-message__content {
    color: var(--zc-text-primary);
    font-size: 15px;
    line-height: 1.4;
}

/* Hover toolbar: quick react / edit buttons */
.zc-msg-action--react:hover {
    color: var(--zc-warning);
}

.zc-msg-action--edit:hover {
    color: var(--zc-primary);
}

/* ─── Typing indicator ────────────────────────────────────── */
.zc-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding: 2px 16px 4px;
    font-size: 13px;
    color: var(--zc-text-secondary);
    flex-shrink: 0;
}

.zc-typing__dots {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
}

.zc-typing__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--zc-text-muted);
    animation: zc-typing 1.2s infinite ease-in-out;
}

.zc-typing__dots i:nth-child(2) {
    animation-delay: 0.2s;
}

.zc-typing__dots i:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes zc-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── New-message divider ─────────────────────────────────── */
.zc-newmsg-wrap {
    position: absolute;
    bottom: 84px;
    right: 20px;
    z-index: 10;
}

.zc-newmsg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--zc-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, transform 0.1s;
}

.zc-newmsg:hover {
    background: var(--zc-primary-hover);
    transform: translateY(-1px);
}

.zc-newmsg__count {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 0 6px;
    font-size: 11px;
    min-width: 18px;
    text-align: center;
}

/* ─── Scrollbar polish ────────────────────────────────────── */
.zc-messages::-webkit-scrollbar,
.zc-channel-list::-webkit-scrollbar,
.zc-members__list::-webkit-scrollbar,
.zc-emoji-picker__grid::-webkit-scrollbar,
.zc-search-results::-webkit-scrollbar {
    width: 8px;
}

.zc-messages::-webkit-scrollbar-thumb,
.zc-channel-list::-webkit-scrollbar-thumb,
.zc-members__list::-webkit-scrollbar-thumb {
    background: var(--zc-bg-tertiary);
    border-radius: 4px;
}

/* ─── Image Lightbox (message image viewer) ─────────────── */

/* 灯箱是「看大图」场景，遮罩与控件一律深色高对比，不跟随站点明暗主题，
   避免亮色站点下白底白字互相吞。z-index 10000：高于聊天页一切浮层
   （侧栏/表情板/用户卡 ≤100），低于 toast(99999)，保证加载失败等提示仍可见。 */
.zc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
}

.zc-lightbox.zc-lightbox--open {
    display: block;
}

/* 打开时锁住背景滚动：.zc-page 已锁 body，真正会滚的是消息容器 */
body.zc-lightbox-open #zc-messages {
    overflow: hidden;
}

.zc-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    opacity: 0;
    transition: opacity 0.18s ease-out;
    cursor: default;
}

.zc-lightbox--open .zc-lightbox__backdrop {
    opacity: 1;
}

/* stage 铺满但不吃事件：空白区域点击穿透到 backdrop 关闭，
   只有图片自身（pointer-events:auto）接收拖动/缩放手势。 */
.zc-lightbox__stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}

.zc-lightbox__img {
    --zc-lb-scale: 1;
    --zc-lb-tx: 0px;
    --zc-lb-ty: 0px;
    max-width: calc(100vw - 48px);
    max-height: calc(100dvh - 48px);
    /* JS 视口同步（--zc-vvh）优先：iOS 100dvh 在地址栏动画中仍可能偏大 */
    max-height: calc(var(--zc-vvh, 100dvh) - 48px);
    object-fit: contain;
    border-radius: var(--zc-radius-sm);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    transform: translate(var(--zc-lb-tx), var(--zc-lb-ty)) scale(var(--zc-lb-scale));
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
    opacity: 0;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    /* 手势全部自管：双指捏合 / 单指拖动都不交给浏览器 */
    touch-action: none;
    will-change: transform;
}

.zc-lightbox__img.is-ready {
    opacity: 1;
}

/* 拖动 / 捏合过程中关掉过渡，跟手 */
.zc-lightbox__img.is-dragging {
    transition: none;
    cursor: grabbing;
}

.zc-lightbox__spinner {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: zc-lb-spin 0.8s linear infinite;
    display: none;
}

@keyframes zc-lb-spin {
    to { transform: rotate(360deg); }
}

.zc-lightbox.is-loading .zc-lightbox__spinner {
    display: block;
}

.zc-lightbox__error {
    position: absolute;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--zc-radius);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
}

.zc-lightbox__error i {
    color: var(--zc-warning);
    font-size: 18px;
}

.zc-lightbox.is-error .zc-lightbox__error {
    display: flex;
}

.zc-lightbox__close,
.zc-lightbox__nav {
    position: absolute;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.zc-lightbox__close:hover,
.zc-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.26);
}

/* JS 按图集数量决定显隐（单图不显示箭头） */
.zc-lightbox__close--visible,
.zc-lightbox__nav--visible {
    display: flex;
}

.zc-lightbox__close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    font-size: 20px;
}

.zc-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
}

.zc-lightbox__nav--prev {
    left: max(12px, env(safe-area-inset-left));
}

.zc-lightbox__nav--next {
    right: max(12px, env(safe-area-inset-right));
}

.zc-lightbox__counter {
    position: absolute;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: none;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    pointer-events: none;
}

.zc-lightbox__counter--visible {
    display: block;
}

.zc-lightbox__hint {
    position: absolute;
    bottom: max(52px, calc(env(safe-area-inset-bottom) + 16px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    pointer-events: none;
    animation: zc-lb-hint-fade 4s ease forwards;
}

@keyframes zc-lb-hint-fade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

/* 桌面显示键鼠提示，触屏设备显示手势提示 */
.zc-lightbox__hint-touch {
    display: none;
}

@media (hover: none) {
    .zc-lightbox__hint-desktop {
        display: none;
    }

    .zc-lightbox__hint-touch {
        display: inline;
    }

    .zc-lightbox__nav {
        width: 38px;
        height: 38px;
        font-size: 24px;
        background: rgba(255, 255, 255, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zc-lightbox__backdrop,
    .zc-lightbox__img {
        transition: none;
    }
}

/* ─── Responsive refinements ──────────────────────────────── */

/* 平板 / 窄屏（成员栏转为抽屉） */
@media (max-width: 992px) {
    .zc-members {
        padding-top: env(safe-area-inset-top);
    }

    .zc-members__list {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

/* 手机 */
@media (max-width: 768px) {
    /* 触控目标：官方建议 ≥44px，原来的 40px 按钮在真机上容易点偏 */
    .zc-chat-header,
    .zc-sidebar__header,
    .zc-members__header {
        height: 52px;
        padding: 0 10px;
    }

    .zc-btn-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .zc-chat-header__info {
        margin: 0 2px;
    }

    .zc-chat-header__name {
        font-size: 15px;
    }

    .zc-chat-header__desc {
        font-size: 11px;
    }

    /* 抽屉式侧栏避开刘海与 Home 指示条 */
    .zc-sidebar,
    .zc-members {
        padding-top: env(safe-area-inset-top);
    }

    .zc-sidebar__footer,
    .zc-members__list {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    /* 消息区：更紧凑的内边距（负 margin 必须同步，否则会溢出） */
    .zc-messages__list {
        padding: 12px;
    }

    .zc-message {
        padding: 4px 12px;
        margin: 0 -12px;
    }

    /* 头像略小，给正文让出行宽 */
    .zc-message__avatar {
        margin-right: 9px;
    }

    .zc-message__avatar img:not(.avatar-badge),
    .zc-message__avatar span.avatar-img img:not(.avatar-badge),
    .zc-message__avatar span.zc-avatar-wrap img:not(.avatar-badge) {
        width: 36px;
        height: 36px;
    }

    .zc-message__gutter {
        width: 45px;
    }

    .zc-input-area {
        padding: 0 8px calc(8px + env(safe-area-inset-bottom));
    }

    .zc-composer__gif,
    #zc-gif-btn {
        display: none;
    }

    .zc-composer__btn {
        width: 34px;
        font-size: 18px;
    }

    .zc-composer__input {
        font-size: 16px; /* prevent iOS zoom on focus */
        padding: 11px 4px;
    }

    .zc-newmsg-wrap {
        bottom: 76px;
        right: 12px;
    }

    .zc-message__content {
        font-size: 15px;
    }

    /* 浮层别超出视口 */
    .zc-toast {
        max-width: calc(100vw - 32px);
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .zc-usercard {
        max-width: calc(100vw - 24px);
    }

    .zc-emoji-picker {
        max-height: 46vh;
    }

    .zc-context-menu {
        min-width: 168px;
    }

    /* 输入框聚焦时不要被软键盘顶出可视区（配合 JS 的 visualViewport 同步） */
    .zc-composer__input {
        scroll-margin-bottom: 24px;
    }
}