/* --- details 容器 --- */
details {

    width: 100%;
    max-width: 600px;

    display: flex;
    flex-direction: column;


    background-color: #fcfcfd;

    border: 1px solid #e4e6e9;

    border-radius: 12px;


    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.04);


    overflow: hidden;


    margin-bottom: 20px;


    /* 左右内边距 */
    padding-left: 20px;
    padding-right: 20px;


    box-sizing: border-box;


    color: #505256;

    font-size: 14px;

    line-height: 1.8;


    /* 流式输出优化 */
    contain: layout paint;
}


/* 展开状态 */
details[open] {

    padding-bottom: 20px;
}



/* 隐藏默认箭头 */
details > summary {

    list-style: none;
}


details > summary::-webkit-details-marker {

    display: none;
}



/* --- 折叠标题 --- */
summary {


    display: flex;

    justify-content: space-between;

    align-items: center;


    /* 不再使用负margin */
    margin: 0;


    padding: 18px 0;


    color: #333438;


    font-size: 15px;

    font-weight: 500;


    cursor: pointer;

    user-select: none;


    transition: none;
}



summary:hover {

    background-color: #f3f4f6;
}



details[open] summary {


    border-bottom: 1px solid #e4e6e9;


    margin-bottom: 16px;
}



/* 箭头 */

summary::after {


    content: '▶';


    font-size: 12px;


    color: #8a8d93;


    transition: transform 0.2s ease;
}



details[open] summary::after {


    transform: rotate(90deg);
}



/* ================================================= */
/* 手机外壳 */
/* ================================================= */


.phone-mockup {


    width: 90%;


    min-width: 300px;


    margin: 20px auto;


    box-sizing: border-box;



    height: 720px;



    background-color: #fcfcfd;



    border: 12px solid #404246;



    border-radius: 36px;



    position: relative;



    box-shadow:

        0 8px 24px -8px rgba(0,0,0,0.04);



    overflow: hidden;



    display:flex;

    flex-direction:column;



    /* 防止流式重排影响外部 */
    contain: layout paint;



    animation:none;
}



/* 顶部刘海 */

.notch {


    position:absolute;


    top:0;


    left:50%;


    transform:translateX(-50%);



    width:130px;


    height:24px;



    background-color:#404246;



    border-bottom-left-radius:14px;


    border-bottom-right-radius:14px;



    z-index:10;
}



/* ================================================= */
/* 手机屏幕 */
/* ================================================= */


.screen-content {


    flex:1;


    overflow-y:auto;



    background-color:#fcfcfd;



    padding-top:36px;



    contain:layout paint;
}



.screen-content::-webkit-scrollbar {

    display:none;
}



/* ================================================= */
/* 帖子 */
/* ================================================= */


.container {


    background-color:transparent;



    padding:20px 24px;



    box-sizing:border-box;
}



.post-title {


    font-size:18px;


    font-weight:bold;



    margin:0 0 12px 0;



    color:#333438;



    line-height:1.5;
}



.post-meta {


    display:flex;


    align-items:center;



    font-size:12px;



    color:#8a8d93;



    margin-bottom:16px;



    padding-bottom:12px;



    border-bottom:1px solid #e4e6e9;
}



.post-meta .author {


    color:#5b82a3;



    font-weight:500;



    margin-right:10px;
}



.post-content {


    font-size:14px;



    line-height:1.7;



    margin-bottom:20px;



    color:#505256;



    contain:content;
}



.post-content img {


    max-width:100%;



    height:auto;



    border-radius:8px;



    margin:12px 0;



    display:block;
}



/* ================================================= */
/* 评论区 */
/* ================================================= */


.comments-section {


    border-top:8px solid #eef0f3;



    padding:20px 24px;



    background-color:#fcfcfd;
}



.comments-title {


    font-size:14px;



    font-weight:bold;



    margin-bottom:16px;



    color:#333438;
}



.comment-item {


    margin-bottom:16px;



    padding-bottom:16px;



    border-bottom:1px solid #e4e6e9;
}



.comment-item:last-child {


    border-bottom:none;



    margin-bottom:0;



    padding-bottom:0;
}



.comment-meta {


    display:flex;


    justify-content:space-between;



    font-size:12px;



    color:#8a8d93;



    margin-bottom:6px;
}



.comment-meta .comment-author {


    color:#505256;



    font-weight:500;
}



.comment-text {


    font-size:13px;



    color:#505256;



    margin:0;



    line-height:1.6;



    contain:content;
}