/**
 * 小黑屋（/dark-room/）专用样式
 *
 * 只在该页面加载（见 functions.php b2child_is_dark_room_page()）。
 * 这里把之前散落在 style.css 里、且无法生效的几条规则一并收拢：
 *   · --xmw-border-radius 变量全站没定义过，border-radius 一直是无效值；
 *   · .dark-room .site-content / .dark-room .footer 依赖 body.dark-room 类，
 *     而主题从未往 body 上打过这个类，所以这两条等于没写（body 类已在 functions.php 补齐）；
 *   · 封禁原因气泡原来用 .b2tooltipbox，会被 child-core.js 全局再绑一次 b2tooltip
 *     （且没有 data-title，弹出来是 null）；现在是 .xmw-why-tip，纯 CSS 实现。
 */

:root {
    --xmw-border-radius: 8px;
}

body.dark-room .site-content {
    padding: 0;
    margin: 0;
}

/* 原因气泡可能溢出到容器外侧，别让它触发横向滚动条 */
body.dark-room {
    overflow-x: hidden;
}

body.dark-room .footer {
    display: none;
}

.xmw-black-house-content {
    min-height: 100vh;
    padding: 40px 20px 60px;
    background: #000;
    box-sizing: border-box;
}

.xmw-main-content {
    max-width: 1100px;
    margin: 0 auto;
}

.xmw-black-house-header-html h1 {
    text-align: center;
    color: #fff;
    margin: 30px 0 10px;
    font-size: 40px;
    font-weight: 700;
}

.xmw-black-house-header-html p {
    text-align: center;
    color: #999;
    margin: 5px 0 40px;
    font-size: 14px;
}

.xmw-black-house-box {
    margin-bottom: 30px;
    border: 1px solid #333;
    border-radius: var(--xmw-border-radius);
    padding: 20px;
    background-color: rgba(141, 141, 141, .12);
}

.xmw-black-house-box > .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
    font-size: 20px;
    font-weight: 700;
    color: #d2d200;
}

.xmw-black-house-box > .title span {
    font-size: 14px;
    color: #999;
    margin-left: 12px;
    font-weight: 400;
}

/* 列表容器：清掉 ul 默认缩进，并消除 inline-block 之间的空白间隙 */
.xmw-black-house-box .content {
    padding-top: 10px;
}

.xmw-black-house-box .content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}

.xmw-black-house-box .content li {
    position: relative;
    display: inline-block;
    float: none;            /* style.css 旧版用 float 排版，这里兜底关掉 */
    vertical-align: top;
    width: 110px;
    margin: 14px 10px;
    padding: 0;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
}

/* hover 时抬上来，保证气泡盖住后面的格子 */
.xmw-black-house-box .content li:hover {
    z-index: 30;
}

.xmw-black-house-box .content li a {
    display: block;
    color: #ccc;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xmw-black-house-box .content li a:hover {
    color: #d2d200;
}

.xmw-black-house-box .content li img.avatar {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 8px;
    border-radius: 50%;
    object-fit: cover;
}

.xmw-black-house-box .content li .name {
    margin-bottom: 4px;
    line-height: 1.4;
}

.xmw-black-house-box .content li .time {
    font-size: 12px;
    color: #999;
}

.xmw-black-house-box .content li .time.black {
    color: #ff4d4f;
}

/* 封禁原因气泡：头像右侧、垂直居中 */
/* 之前被压成「两个汉字宽竖排」，是因为绝对定位元素的宽度是 shrink-to-fit，
   而它的可用宽度 = 定位父级宽度减去 left 偏移，结果是负的，于是退化成最小内容宽度。
   必须用 width:max-content 显式撑开，再配 max-width 收口。 */
.xmw-black-house-box .content li .xmw-why-tip {
    position: absolute;
    top: 30px;                      /* 头像 60px 高、li 无内边距 → 30px 就是头像垂直中点 */
    left: calc(100% + 12px);
    z-index: 30;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: -webkit-max-content;
    width: max-content;
    min-width: 150px;
    max-width: 240px;
    padding: 10px 14px;
    border: 1px solid #3d3d3d;
    border-radius: 8px;
    background: #1a1a1a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
    color: #e6e6e6;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    opacity: 0;
    visibility: hidden;
    transform: translate(-6px, -50%);
    transition: opacity .18s ease, transform .18s ease;
}

/* 指向头像的小箭头（在气泡左侧） */
.xmw-black-house-box .content li .xmw-why-tip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-left: 1px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d;
    background: #1a1a1a;
    transform: rotate(45deg);
}

/* 标签与原因横向排列，原因过长时才换行 */
.xmw-black-house-box .content li .xmw-why-label {
    flex: 0 0 auto;
    color: #d2d200;
    white-space: nowrap;
}

.xmw-black-house-box .content li .xmw-why-text {
    min-width: 0;
}

.xmw-black-house-box .content li:hover .xmw-why-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

/* 备选：如果觉得最右一列的贴边气泡会被窗口裁掉，把上面 4 条（含本条以上的
   .xmw-why-tip / ::before / :hover）保留，只把定位换成下面这段「头像正下方」即可：
   .xmw-black-house-box .content li .xmw-why-tip{top:calc(60px + 10px);left:50%;transform:translate(-50%,-6px)}
   .xmw-black-house-box .content li .xmw-why-tip::before{top:-5px;left:50%;margin-top:0;margin-left:-5px;
       border:0;border-left:1px solid #3d3d3d;border-top:1px solid #3d3d3d}
   .xmw-black-house-box .content li:hover .xmw-why-tip{transform:translate(-50%,0)}
*/

/* 空状态 */
.xmw-empty-page {
    padding: 40px 0;
    text-align: center;
    color: #777;
}

.xmw-empty-page i.b2font {
    display: block;
    margin-bottom: 10px;
    font-size: 42px;
}

.xmw-empty-page .title p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 768px) {
    .xmw-black-house-content {
        padding: 24px 3vw 40px;
    }

    .xmw-black-house-header-html h1 {
        margin: 20px 0 8px;
        font-size: 28px;
    }

    .xmw-black-house-box {
        padding: 4vw;
        margin-bottom: 5vw;
    }

    .xmw-black-house-box > .title {
        font-size: 17px;
        padding-bottom: 3vw;
    }

    .xmw-black-house-box > .title span {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }

    .xmw-black-house-box .content li {
        width: calc(100% / 3);
        margin: 0 0 4vw;
    }

    .xmw-black-house-box .content li img.avatar {
        width: 15vw;
        height: 15vw;
    }

    /* 手机上没有 hover，而且屏幕窄放不下悬浮气泡：
       直接把封禁原因平铺在时间下面，避免任何溢出 / 裁切 */
    .xmw-black-house-box .content li .xmw-why-tip {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        margin-top: 6px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        font-size: 3vw;
        line-height: 1.5;
        text-align: center;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .xmw-black-house-box .content li .xmw-why-tip::before {
        display: none;
    }
}