/* =============================================================================
 * v6.124 — 「我的中心」弹窗排版权威层 (My Center Layout Authority)
 * -----------------------------------------------------------------------------
 * 定位：只裁决 *布局* 属性（grid / flex / min-width / overflow / text-overflow /
 *       padding / line-height / 雷达轴标签 fill），刻意不改 card/button 的
 *       color/background，以免破坏 v6.105~v6.107 建立的三主题配色一致性。
 *       本文件必须在 theme-tokens.css 之后最后加载。
 *
 * 改动前实测（output/playwright/mycenter-layout-probe.js，1280px 视口）：
 *   .mc-community  clientW 406 / scrollW 992  → 长不可断文本把 grid 的 `1fr`
 *     （= minmax(auto,1fr)）撑成 992px，投票榜 + 最新留言整体越出弹窗右边界
 *     548px；.mc-insights-main scrollW 1468 / clientW 882。
 *   .lucky-ref-link  scrollW 535 / clientW 227，text-overflow: clip → URL 硬裁断。
 *   .mc-insights-grid flex-wrap 在 290+164+12=466px 边界换行，雷达与图例错开。
 *   .mc-legend-row 各行列宽随内容漂移，百分比 x = 548.9/556.4/587.3/571.7。
 *
 * 修复策略：
 *   L1 所有 grid 轨道改 minmax(0,*)，所有 flex/grid 子项 min-width:0 —— 阻断
 *      「无空格长串 → min-content 撑破容器」这条链路。
 *   L2 所有单行文本容器统一 ellipsis，超长内容一律省略 + title 看全文。
 *   L3 社区块从右栏取出、改为横跨整卡的双列，左右视觉配平且列宽翻倍。
 *   L4 左列雷达 + 图例改单列垂直堆叠，图例行改固定栅格列 → 数字列严格对齐。
 *   L5 卡片节奏统一（等高、等内距、点亮态收敛），雷达轴标签按主题给足对比度。
 * ========================================================================== */

/* ── L1. 阻断 min-content 撑破链路 ─────────────────────────────────────── */
#ref-modal-wrapper .lucky-connected-ref,
#ref-modal-wrapper .mc-topcard,
#ref-modal-wrapper .mc-insights,
#ref-modal-wrapper .mc-insights-body,
#ref-modal-wrapper .mc-insights-main,
#ref-modal-wrapper .mc-insights-grid,
#ref-modal-wrapper .mc-insights-side,
#ref-modal-wrapper .mc-radar-wrap,
#ref-modal-wrapper .mc-pie-legend,
#ref-modal-wrapper .mc-stat-strip,
#ref-modal-wrapper .mc-style-meter,
#ref-modal-wrapper .mc-winrate,
#ref-modal-wrapper .mc-winrate-list,
#ref-modal-wrapper .mc-community,
#ref-modal-wrapper .mc-comm-col,
#ref-modal-wrapper .mc-poll-list,
#ref-modal-wrapper .mc-bbs-preview,
#ref-modal-wrapper .mc-badges {
    min-width: 0;
    max-width: 100%;
}

/* grid 轨道一律 minmax(0,*)：1fr 的 auto 最小值会被长不可断串撑爆。
   注意断点必须与 ref-modal.css:435 一致（≥1024px 才双列）；弹窗在 <1024px 时
   max-width 只有 480px，若全局强制双列，左右各剩 ~200px 会把内容挤坏。 */
#ref-modal-wrapper .mc-insights-main {
    align-items: stretch !important;
}
@media (min-width: 1024px) {
    #ref-modal-wrapper .mc-insights-main {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    }
}
#ref-modal-wrapper .mc-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#ref-modal-wrapper .mc-badge-grid {
    grid-template-columns: repeat(auto-fill, minmax(0, 140px)) !important;
}
#ref-modal-wrapper .mc-stat,
#ref-modal-wrapper .mc-wr-row,
#ref-modal-wrapper .mc-legend-row,
#ref-modal-wrapper .mc-poll-item,
#ref-modal-wrapper .mc-poll-info,
#ref-modal-wrapper .mc-bbs-item,
#ref-modal-wrapper .mc-bbs-text,
#ref-modal-wrapper .mc-bbs-who,
#ref-modal-wrapper .mc-comm-head,
#ref-modal-wrapper .mc-badge {
    min-width: 0;
    max-width: 100%;
}

/* ── L2. 单行文本：一律省略号，不再硬裁切/撑破 ─────────────────────────── */
#ref-modal-wrapper .lucky-ref-link {
    flex: 1 1 auto !important;
    width: 0 !important;              /* flex 子项收缩的经典前提 */
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#ref-modal-wrapper .mc-topcell-invite > div:last-child {
    min-width: 0;
}
#ref-modal-wrapper .mc-topcell-invite .lucky-btn-neon {
    flex: 0 0 auto;
}

#ref-modal-wrapper .mc-poll-title,
#ref-modal-wrapper .mc-poll-meta,
#ref-modal-wrapper .mc-bbs-text,
#ref-modal-wrapper .mc-bbs-who,
#ref-modal-wrapper .mc-legend-name,
#ref-modal-wrapper .mc-legend-pct,
#ref-modal-wrapper .mc-legend-sub,
#ref-modal-wrapper .mc-wr-name,
#ref-modal-wrapper .mc-wr-val,
#ref-modal-wrapper .mc-style-caption,
#ref-modal-wrapper .mc-badge-name,
#ref-modal-wrapper .mc-badge-progress,
#ref-modal-wrapper .mc-comm-head > span:first-child,
#ref-modal-wrapper .mc-insights-title {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;          /* 兜底：万一 ellipsis 失效也不撑破 */
}
#ref-modal-wrapper .mc-poll-title,
#ref-modal-wrapper .mc-poll-meta,
#ref-modal-wrapper .mc-bbs-text,
#ref-modal-wrapper .mc-bbs-who,
#ref-modal-wrapper .mc-legend-name,
#ref-modal-wrapper .mc-legend-sub,
#ref-modal-wrapper .mc-wr-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal;
}
/* BBS 弹层正文：长 payload 必须能折行，不能横向滚动 */
#ref-modal-wrapper .bbs-msg-text,
.bbs-modal .bbs-msg-text,
.bbs-modal .bbs-reply-item {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0;
}

/* ── L3. 社区块：横跨整卡的双列，左右配平 ──────────────────────────────── */
/* 覆盖 v6.39 的「塞进右栏改单列」与 body 直挂两处旧规则 */
#ref-modal-wrapper .mc-community,
#ref-modal-wrapper .mc-insights-side .mc-community,
#ref-modal-wrapper #mc-insights-body > .mc-community {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;  /* 默认单列 */
    gap: 16px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    min-width: 0;
}
/* 仅宽屏（弹窗 960px）才左右双列；与 ref-modal.css:435 断点保持一致 */
@media (min-width: 1024px) {
    #ref-modal-wrapper .mc-community,
    #ref-modal-wrapper .mc-insights-side .mc-community,
    #ref-modal-wrapper #mc-insights-body > .mc-community {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    }
}
#ref-modal-wrapper .mc-comm-col { min-width: 0; }
/* 两列之间给一条细分隔线，避免「前 3 名点亮」与「最新留言」读成同一行 */
#ref-modal-wrapper .mc-comm-col + .mc-comm-col {
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    padding-left: 16px;
}
#ref-modal-wrapper .mc-comm-head {
    gap: 8px;
    margin-bottom: 10px !important;
    min-width: 0;
}
#ref-modal-wrapper .mc-comm-head > span:first-child {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#ref-modal-wrapper .mc-comm-hint,
#ref-modal-wrapper .mc-comm-enter { flex: 0 0 auto; }

/* ── L4. 左列：雷达 + 图例垂直堆叠，数字列严格对齐 ─────────────────────── */
#ref-modal-wrapper .mc-insights-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    justify-items: stretch;
    gap: 12px !important;
}
#ref-modal-wrapper .mc-radar-wrap {
    width: 100% !important;
    max-width: 250px !important;
    justify-self: center;
    margin: 0 auto !important;
}
#ref-modal-wrapper .mc-pie-legend {
    /* 限宽居中：否则 1fr 名称列会把「41.1% 18注·81U」推到左栏最右侧，
       与左侧色块/名称拉开 300px+ 空白，视觉松散 */
    width: min(100%, 330px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    gap: 5px !important;
}
/* 固定四列：色点 / 名称 / 百分比 / 注数金额，后两列右对齐 */
#ref-modal-wrapper .mc-legend-row {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) 52px 86px;
    align-items: center;
    gap: 8px !important;
}
#ref-modal-wrapper .mc-legend-pct,
#ref-modal-wrapper .mc-legend-sub {
    text-align: right;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#ref-modal-wrapper .mc-legend-pct { font-variant-numeric: tabular-nums; }
#ref-modal-wrapper .mc-legend-sub { font-variant-numeric: tabular-nums; }
#ref-modal-wrapper .mc-radar-total { text-align: center; }

/* 右列节奏：三态卡 / 风格仪 / 胜率条行数不同也不许挤压 */
#ref-modal-wrapper .mc-insights-side { gap: 10px !important; }
#ref-modal-wrapper .mc-wr-row {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 62px) minmax(0, 1fr) 78px;
    align-items: center;
    gap: 8px !important;
}
#ref-modal-wrapper .mc-wr-val { text-align: right; white-space: nowrap; }
#ref-modal-wrapper .mc-wr-track { min-width: 0; }
#ref-modal-wrapper .mc-winrate-head { gap: 8px; min-width: 0; }
#ref-modal-wrapper .mc-winrate-total { flex: 0 0 auto; }

/* ── L5. 卡片节奏与点亮态收敛 ──────────────────────────────────────────── */
#ref-modal-wrapper .mc-poll-list,
#ref-modal-wrapper .mc-bbs-preview { gap: 7px !important; }
#ref-modal-wrapper .mc-poll-item,
#ref-modal-wrapper .mc-insights-side .mc-poll-item {
    min-height: 54px;
    padding: 8px 10px !important;
    gap: 10px !important;
    overflow: hidden;
    align-items: center;
}
#ref-modal-wrapper .mc-poll-rank {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
}
#ref-modal-wrapper .mc-poll-info { flex: 1 1 auto; }
#ref-modal-wrapper .mc-poll-title { line-height: 1.35; }
#ref-modal-wrapper .mc-poll-meta { line-height: 1.35; margin-top: 2px; }
/* 点亮态由「重金框 + 外发光」收敛为细金边 + 淡金底，避免三张卡喧宾夺主 */
#ref-modal-wrapper .mc-poll-lit {
    border-color: rgba(250, 204, 21, 0.34) !important;
    background: rgba(250, 204, 21, 0.055) !important;
    box-shadow: none !important;
}
#ref-modal-wrapper .mc-bbs-item {
    min-height: 36px;
    padding: 8px 10px !important;
    overflow: hidden;
    align-items: center;
}
#ref-modal-wrapper .mc-bbs-who { max-width: 38%; text-align: right; }

/* 雷达轴标签：JS 写死 fill="#475569"，深底仅约 2.3:1。按主题提亮 */
#ref-modal-wrapper #mc-radar text {
    fill: #64748B;
    font-size: 9px;
}
body.dark-mode #ref-modal-wrapper #mc-radar text,
body.is-lucky-mode #ref-modal-wrapper #mc-radar text {
    fill: #A9B8D0;
}
body.fun-mode #ref-modal-wrapper #mc-radar text {
    fill: #8B6F47;
}

/* ── L6. 窄屏：所有双列降为单列，且仍然不许横向溢出 ────────────────────
   断点对齐 ref-modal.css:435：弹窗在 <1024px 时只有 480px 宽，必须单列。 */
@media (max-width: 1023px) {
    #ref-modal-wrapper .mc-community,
    #ref-modal-wrapper .mc-insights-side .mc-community,
    #ref-modal-wrapper #mc-insights-body > .mc-community {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }
    #ref-modal-wrapper .mc-comm-col + .mc-comm-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.14);
        padding-top: 12px;
    }
    #ref-modal-wrapper .mc-insights-main {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #ref-modal-wrapper .mc-topcard {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #ref-modal-wrapper .mc-legend-row {
        grid-template-columns: 10px minmax(0, 1fr) 48px 76px;
    }
    #ref-modal-wrapper .mc-wr-row {
        grid-template-columns: 10px minmax(0, 56px) minmax(0, 1fr) 70px;
    }
}