/* ==========================================================================
   frame.css —— 主播中心框架层（阶段一）
   在 global.css 之后加载，用于覆盖原有布局。
   独立成文件而不是并入 global.css，是为了灰度/回滚时只需摘掉一行 link。
   ========================================================================== */

:root {
    --topbar-h: 56px;
    --sidebar-w: 230px;
    --sidebar-w-mini: 64px;

    /* 中老年用户可读性：字号上调、次级文字加深，不用浅灰 */
    --frame-text-main: #111827;
    --frame-text-sub: #4b5563;
    --frame-text-label: #374151;
    --frame-line: #d9dde3;
}

/* --------------------------------------------------------------------------
   1. 整体框架：滚动主体从 body 移交给 .main-content
   -------------------------------------------------------------------------- */
/* 布局锁只对迁移过的页面（body.zb-framed，由 frame.js 在检测到 .app-topbar 后加）生效。
   老页面没有顶部条、不加这个 class，保持它们原本的滚动，避免被全站 frame.css 锁死。 */
body.zb-framed,
html:has(body.zb-framed) { height: 100%; overflow: hidden; }

body.zb-framed .app-container {
    display: flex;
    height: 100vh;
    min-height: 0;
    padding-top: var(--topbar-h);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. 全局顶部条
   -------------------------------------------------------------------------- */
.app-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: #fff;
    border-bottom: 1px solid var(--frame-line);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 14px;
    z-index: 300;
}

/* 品牌区宽度与左菜单对齐，收起时同步收窄 */
.app-topbar .tb-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    width: calc(var(--sidebar-w) - 18px);
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--frame-text-main);
    white-space: nowrap;
    overflow: hidden;
    transition: width .2s;
}
body.sidebar-mini .app-topbar .tb-logo { width: calc(var(--sidebar-w-mini) - 18px); }
body.sidebar-mini .app-topbar .tb-logo-text { opacity: 0; }

.app-topbar .tb-mark {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.app-topbar .tb-logo-text { transition: opacity .15s; }

/* 面包屑：小字，取代原来的大标题。页面大标题已下沉到第二层页头 */
.app-topbar .tb-crumb {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}
.app-topbar .tb-crumb .crumb-root { color: var(--frame-text-sub); }
.app-topbar .tb-crumb .crumb-root:hover { color: var(--primary); }
.app-topbar .tb-crumb .crumb-sep { color: #c3cad2; }
.app-topbar .tb-crumb .crumb-cur {
    color: var(--frame-text-main);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-topbar .tb-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}


.app-topbar .tb-btn {
    width: 42px; height: 42px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    color: var(--frame-text-label);
    cursor: pointer;
    transition: .2s;
}
.app-topbar .tb-btn:hover { background: var(--primary-fade); color: var(--primary); }

.app-topbar .tb-sep {
    width: 1px; height: 26px;
    background: var(--frame-line);
    margin: 0 8px;
    flex-shrink: 0;
}

/* 用户区 */
.app-topbar .tb-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 5px;
    border-radius: 24px;
    cursor: pointer;
    transition: .2s;
}
.app-topbar .tb-user:hover { background: #f1f3f5; }
.app-topbar .tb-avatar-wrap { position: relative; flex-shrink: 0; display: block; }
.app-topbar .tb-user .user-profile-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #e2e8f0;
    display: block;
    object-fit: cover;
}
.app-topbar .tb-reddot {
    display: none;
    position: absolute;
    top: -1px; right: -1px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid #fff;
}
.app-topbar .tb-user-info { display: flex; flex-direction: column; line-height: 1.25; }
.app-topbar .tb-user-info .name { font-size: 15px; font-weight: 600; color: var(--frame-text-main); }
.app-topbar .tb-user-info .uid { font-size: 12px; color: var(--frame-text-sub); }
.app-topbar .tb-user-arrow { font-size: 17px; color: #9aa4ae; }

/* 用户下拉 */
/* 注意：global.css 里有一套旧的 .profile-popover（左下角向上弹的老菜单），
   用了 bottom:82px / left:12px。这里必须显式复位，否则 top 与 bottom
   同时生效会把菜单拉成一长条，left 与 right 打架会让它跑到左边。
   另外 frame.js 会把它挪到 body 下，脱离 .app-topbar 的层叠上下文，
   避免被页面卡片盖住。 */
.profile-popover {
    display: none;
    position: fixed;
    top: calc(var(--topbar-h) + 6px);
    right: 18px;
    bottom: auto;
    left: auto;
    width: 264px;
    background: #fff;
    border: 1px solid var(--frame-line);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,.14);
    padding: 8px;
    z-index: 1200;
}
body.has-alertbar .profile-popover { top: calc(var(--topbar-h) + 47px); }
.profile-popover .pop-head {
    padding: 10px 12px 13px;
    border-bottom: 1px solid #eef1f4;
    margin-bottom: 6px;
}
.profile-popover .pop-name { font-size: 16px; font-weight: 700; color: var(--frame-text-main); }
.profile-popover .pop-meta { font-size: 13px; color: var(--frame-text-sub); margin-top: 2px; }

.profile-popover .menu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--frame-text-label);
    transition: .15s;
}
.profile-popover .menu-item:hover { background: var(--primary-fade); color: var(--primary-hover); }
.profile-popover .menu-item i { font-size: 19px; }
.profile-popover .logout-item { color: var(--danger); }
.profile-popover .logout-item:hover { background: #fef2f2; color: var(--danger); }
.profile-popover .popover-divider { border-top: 1px solid #eef1f4; margin: 6px 4px; }

.profile-popover .mi-tag {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.profile-popover .mi-tag.tag-todo   { background: #fee2e2; color: var(--danger); }
.profile-popover .mi-tag.tag-doing  { background: #fef3c7; color: #b45309; }
.profile-popover .mi-tag.tag-ok     { background: #d1fae5; color: #047857; }

/* --------------------------------------------------------------------------
   3. 实名认证提示条
   -------------------------------------------------------------------------- */
.app-alertbar {
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0;
    z-index: 290;
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    color: #9a3412;
    padding: 9px 20px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.app-alertbar .ab-icon { font-size: 19px; color: #ea580c; }
.app-alertbar b { color: #c2410c; }
.app-alertbar .ab-go {
    margin-left: auto;
    background: #ea580c;
    color: #fff;
    padding: 5px 15px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.app-alertbar .ab-go:hover { background: #c2410c; }
.app-alertbar .ab-close { cursor: pointer; font-size: 19px; opacity: .55; margin-left: 8px; }
.app-alertbar .ab-close:hover { opacity: 1; }

/* 提示条出现时整体下压 */
body.zb-framed.has-alertbar .app-container { padding-top: calc(var(--topbar-h) + 41px); }
body.zb-framed.has-alertbar .sidebar { top: calc(var(--topbar-h) + 41px); height: calc(100vh - var(--topbar-h) - 41px); }

/* --------------------------------------------------------------------------
   4. 左侧菜单
   -------------------------------------------------------------------------- */
body.zb-framed .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--topbar-h));
    background: #fbfcfd;
    border-right: 1px solid var(--frame-line);
    display: flex;
    flex-direction: column;
    min-height: 0;
    z-index: 100;
    transition: width .2s;
}
body.sidebar-mini .sidebar { width: var(--sidebar-w-mini); }

/* 原品牌区已迁至顶部条 */
.sidebar .logo-area { display: none; }

.sidebar .nav-menu {
    flex: 1;
    min-height: 0;          /* 关键：flex 子项默认 min-height:auto 会撑破容器 */
    overflow-y: auto;
    padding: 10px 10px 14px;
}
.sidebar .nav-menu::-webkit-scrollbar { width: 6px; }
.sidebar .nav-menu::-webkit-scrollbar-thumb { background: #c8cfd6; border-radius: 3px; }
.sidebar .nav-menu::-webkit-scrollbar-track { background: transparent; }

/* 分组标题吸顶 */
.sidebar .nav-group-title {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fbfcfd;
    display: flex;
    align-items: center;
    padding: 10px 8px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--frame-text-label);
    letter-spacing: .5px;
    cursor: pointer;
    user-select: none;
}
.sidebar .nav-group-title .grp-arrow {
    margin-left: auto;
    font-size: 16px;
    color: #9aa4ae;
    transition: transform .2s;
}
.sidebar .nav-group.collapsed .grp-arrow { transform: rotate(-90deg); }
.sidebar .nav-group.collapsed .nav-group-body { display: none; }

.sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 10px;
    border-radius: 9px;
    font-size: 15.5px;
    color: var(--frame-text-label);
    margin-bottom: 2px;
    white-space: nowrap;
    transition: .15s;
}
.sidebar .nav-item i { font-size: 20px; margin-right: 0; width: 22px; text-align: center; flex-shrink: 0; }
.sidebar .nav-item:hover { background: #eef2f4; color: var(--frame-text-main); }
.sidebar .nav-item.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}
.sidebar .nav-item .badge-hot,
.sidebar .nav-item .badge-new { margin-left: auto; font-size: 11px; padding: 1px 7px; }
.sidebar .nav-item.active .badge-hot,
.sidebar .nav-item.active .badge-new { background: rgba(255,255,255,.25); color: #fff; }

/* 底部：仅收起开关 */
.sidebar .sidebar-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--frame-line);
    padding: 8px 10px;
    background: #fbfcfd;
}
.sidebar .sidebar-foot .nav-item {
    margin-bottom: 0;
    font-size: 14.5px;
    color: var(--frame-text-sub);
}

/* 图标模式 */
body.sidebar-mini .sidebar .nav-item { justify-content: center; padding: 12px 0; gap: 0; }
body.sidebar-mini .sidebar .nav-item > span { display: none; }
body.sidebar-mini .sidebar .nav-group-title { justify-content: center; padding: 10px 0 4px; font-size: 0; }
body.sidebar-mini .sidebar .nav-group-title::before {
    content: ''; display: block; width: 20px; height: 1px; background: var(--frame-line);
}
body.sidebar-mini .sidebar .nav-group-title .grp-arrow { display: none; }
body.sidebar-mini .sidebar .nav-group.collapsed .nav-group-body { display: block; } /* 图标模式下不折叠 */
body.sidebar-mini .sidebar .side-collapse-btn i { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   5. 主内容区：唯一的滚动主体
   -------------------------------------------------------------------------- */
body.zb-framed .main-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transition: margin-left .2s;
}
body.zb-framed.sidebar-mini .main-content { margin-left: var(--sidebar-w-mini); }

/* 页面自带的旧顶栏：内容已被 frame.js 搬走，容器隐藏
   （阶段二逐页删除这些死代码后，本条即可移除） */
.main-content > .top-header { display: none !important; }

/* 弹窗打开时同步锁住内容区滚动，防止背景滚动穿透
   （由 frame.js 监听 body 的 inline overflow 后加上此 class） */
body.zb-scroll-locked .main-content { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. 官方群二维码弹窗
   -------------------------------------------------------------------------- */
.qr-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.55);
    z-index: 400;
    align-items: center;
    justify-content: center;
}
.qr-modal-content {
    background: #fff;
    border-radius: 14px;
    width: 400px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.qr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #eef1f4;
}
.qr-modal-header h3 { font-size: 16px; font-weight: 700; }
.qr-modal-header .close-qr { cursor: pointer; font-size: 21px; color: var(--frame-text-sub); }
.qr-modal-body { padding: 22px; text-align: center; }
.qr-modal-body img { height: 200px; border-radius: 8px; }
.qr-modal-body p { margin-top: 12px; font-size: 14.5px; color: var(--frame-text-sub); }

/* --------------------------------------------------------------------------
   7. 窄屏兜底：宽度不足时自动进图标模式
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    body:not(.sidebar-expanded-force) .sidebar { width: var(--sidebar-w-mini); }
    body:not(.sidebar-expanded-force) .sidebar .nav-item { justify-content: center; padding: 12px 0; gap: 0; }
    body:not(.sidebar-expanded-force) .sidebar .nav-item > span { display: none; }
    body:not(.sidebar-expanded-force) .sidebar .nav-group-title { justify-content: center; font-size: 0; padding: 10px 0 4px; }
    body:not(.sidebar-expanded-force) .sidebar .nav-group-title .grp-arrow { display: none; }
    body:not(.sidebar-expanded-force) .main-content { margin-left: var(--sidebar-w-mini); }
    body:not(.sidebar-expanded-force) .app-topbar .tb-logo { width: calc(var(--sidebar-w-mini) - 18px); }
    body:not(.sidebar-expanded-force) .app-topbar .tb-logo-text { opacity: 0; }
    .app-topbar .tb-user-info { display: none; }
}

/* --------------------------------------------------------------------------
   顶部条内的消息中心下拉（商务合作/联系运营是纯图标按钮，用 .tb-btn 已够）
   -------------------------------------------------------------------------- */
.app-topbar #msgCenterTrigger { position: relative; }
.app-topbar .msg-dropdown {
    display: none;
    position: absolute;
    top: 46px;
    right: 0;
    width: 320px;
    background: #fff;
    border: 1px solid var(--frame-line);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,.14);
    z-index: 320;
    overflow: hidden;
}
.app-topbar .msg-dropdown .dropdown-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-bottom: 1px solid #eef1f4;
    font-size: 14.5px; font-weight: 700;
}
.app-topbar .msg-dropdown .dropdown-header a { font-size: 13px; color: var(--primary); font-weight: 400; }
.app-topbar .msg-dropdown .dropdown-body { max-height: 340px; overflow-y: auto; }
.app-topbar .msg-dropdown .dropdown-body:empty::after {
    content: '暂无新消息';
    display: block; text-align: center; color: #9aa4ae;
    font-size: 14px; padding: 32px 0;
}
.app-topbar .msg-dropdown .dropdown-footer {
    display: block; text-align: center; padding: 12px;
    font-size: 14px; color: var(--primary);
    border-top: 1px solid #eef1f4;
}
.app-topbar .msg-dropdown .dropdown-footer:hover { background: var(--primary-fade); }

/* ==========================================================================
   追加到 webroot/public/css/frame.css 末尾
   —— 配合零抖动改造，只覆盖差异属性，不动原有规则
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 左菜单分组折叠：首帧由 body 属性驱动
   原来的 .nav-group.collapsed 是 JS 在 ready 里加的，菜单会先全展开再收起。
   现在折叠状态在解析阶段就写到 body[data-nav-collapsed] 上，纯 CSS 生效。
   data-has-active 的组由服务端标记，永不折叠（首帧脚本也已把它从列表里剔除，
   这里是双保险）。
   -------------------------------------------------------------------------- */
body[data-nav-collapsed~="core"] .sidebar .nav-group[data-group="core"]:not([data-has-active]) > .nav-group-body,
body[data-nav-collapsed~="eco"]  .sidebar .nav-group[data-group="eco"]:not([data-has-active])  > .nav-group-body,
body[data-nav-collapsed~="self"] .sidebar .nav-group[data-group="self"]:not([data-has-active]) > .nav-group-body {
    display: none;
}

body[data-nav-collapsed~="core"] .sidebar .nav-group[data-group="core"]:not([data-has-active]) .grp-arrow,
body[data-nav-collapsed~="eco"]  .sidebar .nav-group[data-group="eco"]:not([data-has-active])  .grp-arrow,
body[data-nav-collapsed~="self"] .sidebar .nav-group[data-group="self"]:not([data-has-active]) .grp-arrow {
    transform: rotate(-90deg);
}

/* 图标模式下一律不折叠（沿用原有语义） */
body.sidebar-mini[data-nav-collapsed] .sidebar .nav-group > .nav-group-body { display: block; }

/* --------------------------------------------------------------------------
   B. 消息中心徽标
   绝对定位，数字后填不挤动任何兄弟节点 —— 这是它可以继续走 ajax 的前提
   -------------------------------------------------------------------------- */
.app-topbar #msgCenterTrigger { position: relative; }
.app-topbar .tb-msg-badge {
    position: absolute;
    top: 6px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   C. 下拉层改为 body 直接子元素 + fixed
   原来 #msgDropdown 嵌在 .app-topbar 里、#profilePopover 靠 JS appendTo，
   现在两者都在模板里就放在 header 之外，不再有 DOM 搬运。
   原有 .app-topbar .msg-dropdown 系列规则因选择器不再匹配而自然失效，
   这里重新声明一份。
   -------------------------------------------------------------------------- */
.msg-dropdown {
    display: none;
    position: fixed;
    top: calc(var(--topbar-h) - 4px);
    right: 18px;
    width: 340px;
    background: #fff;
    border: 1px solid var(--frame-line);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,.14);
    z-index: 320;
    overflow: hidden;
}
body.has-alertbar .msg-dropdown { top: calc(var(--topbar-h) + 37px); }

.msg-dropdown .dropdown-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #eef1f4;
    font-size: 14.5px; font-weight: 700;
    color: var(--frame-text-main);
}
.msg-dropdown .dropdown-header a {
    font-size: 13px; font-weight: 400; color: var(--primary);
}

/* 三条下发通道 */
.msg-dropdown .msg-cats { padding: 6px; }
.msg-dropdown .msg-cat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 10px;
    border-radius: 9px;
    transition: background .15s;
}
.msg-dropdown .msg-cat:hover { background: var(--primary-fade, #f0fdfa); }

.msg-dropdown .mc-ico {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.msg-dropdown .mc-ico.mc-red  { background: #fef2f2; color: #dc2626; }
.msg-dropdown .mc-ico.mc-blue { background: #eff6ff; color: #2563eb; }
.msg-dropdown .mc-ico.mc-teal { background: #f0fdfa; color: var(--primary); }

.msg-dropdown .mc-text { flex: 1; min-width: 0; }
.msg-dropdown .mc-text b {
    display: block;
    font-size: 14.5px; font-weight: 600;
    color: var(--frame-text-main);
}
.msg-dropdown .mc-text em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: var(--frame-text-sub);
    margin-top: 2px;
}

/* 定宽，数字后填不会推动左侧文案 */
.msg-dropdown .mc-num {
    width: 34px;
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: transparent;
}
.msg-dropdown .mc-num.on { color: var(--danger, #dc2626); }

.msg-dropdown .dropdown-tip {
    display: flex; align-items: center; gap: 6px;
    padding: 11px 16px;
    border-top: 1px solid #eef1f4;
    background: #fbfcfd;
    font-size: 12.5px;
    color: var(--frame-text-sub);
}
.msg-dropdown .dropdown-tip a { color: var(--primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   D. 用户区宽度锁定
   服务端已直出昵称/UID，但昵称长度因人而异；给个上限，
   避免超长昵称把右侧撑出横向滚动
   -------------------------------------------------------------------------- */
.app-topbar .tb-user-info { max-width: 148px; }
.app-topbar .tb-user-info .name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   F. 未登录态的顶部条（帮助中心等免登录页会用到）
   -------------------------------------------------------------------------- */
.app-topbar .tb-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.app-topbar .tb-login:hover { background: var(--primary-hover, #0f766e); color: #fff; }

/* --------------------------------------------------------------------------
   G. 官方微信群：顶部条常驻入口

   为什么不是 .tb-btn 那样的纯图标：上一版就是图标，结论是「没人点」。
   这里给足文案 + 微信绿，跟旁边的中性灰图标区拉开对比。
   只有点击才开 qrModal，不做 hover 浮层 —— 与旁边消息中心的触发方式保持一致。
   触发靠 topbar.html 上的 data-zb-open-qr，frame.js 是文档级委托，无需改动。
   -------------------------------------------------------------------------- */
.app-topbar .tb-wxgroup {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px 0 12px;
    border-radius: 17px;
    background: rgba(7, 193, 96, .10);
    border: 1px solid rgba(7, 193, 96, .30);
    color: #07984c;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, color .2s;
}
.app-topbar .tb-wxgroup:hover {
    background: #07c160;
    border-color: #07c160;
    color: #fff;
}
.app-topbar .tb-wxgroup > i {
    font-size: 18px;
    line-height: 1;
}

/* 呼吸光环：只跑 3 次就停。
   常驻红点在一个「永远存在」的入口上会变成长期噪音，
   跳三下够引导新主播，老主播不会被烦到。 */
.app-topbar .tb-wx-ring {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(7, 193, 96, .75);
    opacity: 0;
    pointer-events: none;
    animation: zbWxRing 2.2s ease-out 3;
}
@keyframes zbWxRing {
    0%   { transform: scale(1);    opacity: .85; }
    70%  { transform: scale(1.16); opacity: 0; }
    100% { transform: scale(1.16); opacity: 0; }
}
/* 系统开了「减少动态效果」就别闪 */
@media (prefers-reduced-motion: reduce) {
    .app-topbar .tb-wx-ring { animation: none; }
}

/* 窄屏收成圆形图标：断点与侧栏 mini 模式保持一致，
   否则 1180px 附近文案会把面包屑挤没 */
@media (max-width: 1180px) {
    .app-topbar .tb-wxgroup {
        width: 34px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .app-topbar .tb-wxgroup .tb-wxgroup-text { display: none; }
    .app-topbar .tb-wx-ring { border-radius: 50%; }
}