/* 1. 局部变量与基础设置 */
.j-dynamic {
    --w-theme: #4770db;
    --w-bg: #fff;
    --w-bg-sub: #f2f6fc;
    --w-text: #303133;
    --w-text-minor: #6e7075;
    --w-border: #ebeef5;
    --w-box-shadow: 0 0 20px -5px rgba(158, 158, 158, 0.22);
    width: 100%;
}

/* 2. 夜间模式适配 (由 html 标签控制) */
html[data-night="night"] .j-dynamic {
    --w-bg: #25252b;
    --w-bg-sub: #1b1b22;
    --w-text: #cfd0d3;
    --w-text-minor: #86878a;
    --w-border: #303039;
    --w-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 3. 卡片容器 (0 圆角) */
.j-dynamic .respond,
.j-dynamic .comment-list > li {
    background: var(--w-bg);
    box-shadow: var(--w-box-shadow);
    border-radius: 0 !important;
    padding: 15px;
    margin-bottom: 20px;
    list-style: none;
    border: 1px solid var(--w-border);
}

/* 4. 发布框区域 */
.j-dynamic .respond .title { color: var(--w-text); margin-bottom: 12px; font-weight: bold; font-size: 14px; }
.j-dynamic .respond form textarea {
    width: 100% !important; height: 100px; padding: 12px;
    border: none; background: var(--w-bg-sub);
    color: var(--w-text); border-radius: 0;
    resize: none; font-size: 14px; display: block;
}


.j-dynamic .respond .miyu { color: var(--w-text); margin-bottom: 12px; font-size: 14px; }


/* 5. 工具栏按钮统一对齐 (关键修正) */
.j-dynamic .form-foot {
    display: flex; align-items: center; 
    background: var(--w-bg-sub);
    padding: 5px 10px; margin-top: 0;
}

/* 统一样式：表情、密语、上传 */
.j-dynamic .OwO .OwO-logo,
.j-dynamic .comment_box,
.j-dynamic #timeimgUpload_btn_upload {
    display: inline-flex !important; /* 强制图标与文字一行 */
    align-items: center !important; 
    justify-content: center;
    padding: 0 10px; height: 32px;
    cursor: pointer; transition: all 0.2s;
    border-radius: 4px; font-size: 13px;
    color: var(--w-text-minor);
    background: transparent; border: none;
    margin-right: 5px;
    white-space: nowrap;
}

/* 鼠标悬浮：蓝底白字 */
.j-dynamic .OwO .OwO-logo:hover,
.j-dynamic .comment_box:hover,
.j-dynamic #timeimgUpload_btn_upload:hover {
    background: var(--w-theme) !important;
    color: #fff !important;
}
.j-dynamic .comment_box:hover i,
.j-dynamic #timeimgUpload_btn_upload:hover svg { color: #fff !important; fill: #fff !important; }

/* 修正图标文字间距 */
.j-dynamic .comment_box i,
.j-dynamic .OwO .OwO-logo svg { margin-right: 5px; font-size: 14px; vertical-align: middle; }
.j-dynamic #timeimgUpload_btn_upload svg { fill: var(--w-text-minor); vertical-align: middle; }

/* 排除：OwO 面板打开时不要蓝色背景 */
.j-dynamic .OwO.OwO-open .OwO-logo {
    background: transparent !important;
    color: var(--w-theme) !important;
}

/* 立即发表按钮基础与悬浮效果 */
.j-dynamic .respond form .form-foot button[type='submit'] {
    margin-left: auto;
    background: var(--w-theme);
    color: #fff;
    border: none;
    padding: 6px 18px;
    border-radius: 2px; /* 保持硬朗的小圆角或0 */
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease; /* 开启平滑过渡 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 鼠标悬停效果 */
.j-dynamic .respond form .form-foot button[type='submit']:hover {
    background: #3a5dbd !important; /* 背景色加深 */
    box-shadow: 0 4px 12px rgba(71, 112, 219, 0.3); /* 蓝色发光阴影 */
    transform: translateY(-1px); /* 向上微动，增加点击欲望 */
    opacity: 0.95;
}

/* 按钮点击瞬间的效果 */
.j-dynamic .respond form .form-foot button[type='submit']:active {
    transform: translateY(0); /* 按下时回弹 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 6. 内容列表细节 */
.j-dynamic .comment-parent .title { display: flex; align-items: center; margin-bottom: 12px; }
.j-dynamic .comment-parent .title .avatar { 
    width: 42px; height: 42px; border-radius: 50%; 
    border: 1px solid var(--w-border); margin-right: 10px; padding: 2px;
}
.j-dynamic .comment-list .comment-parent .desc .author,
.j-dynamic .comment-list .comment-parent .desc .author a,
.j-dynamic .comment-list li .comment-parent .title .desc .author a {color: #54b5db !important;text-decoration: none !important;font-weight: bold !important;border-bottom: none !important; }
.j-dynamic .comment-parent .desc .time { font-size: 11px; color: var(--w-text-minor); margin-top: 2px; }

/* 防止图片溢出 (核心修正) */
.j-dynamic .comment-parent .content {
    background: var(--w-bg-sub); padding: 12px 15px;
    color: var(--w-text); line-height: 1.6; margin: 10px 0;
    word-wrap: break-word; overflow: hidden; /* 防止超宽 */
}
.j-dynamic .comment-parent .content img { 
    max-width: 100% !important; height: auto !important; 
    display: block; margin: 8px 0; border-radius: 4px;
}
.j-dynamic .comment-parent .content .owo { height: 22px; width: auto; display: inline-block; vertical-align: sub; }

/* 7. UA 信息：移至右侧 (关键修正) */
.j-dynamic .foot {
    display: flex;
    justify-content: space-between; /* 按钮和信息两端对齐 */
    align-items: center;
    margin-top: 12px;
}
.j-dynamic .foot .count {
    margin-left: auto; /* 确保它被推到最右侧 */
}
.j-dynamic .ua-info { font-size: 11px; color: var(--w-text-minor); }
.j-dynamic .ua-info img {
    height: 14px !important; width: auto !important;
    vertical-align: -2px !important; margin: 0 4px !important;
    display: inline-block !important; border: none !important;
}

/* 8. 代码块样式还原 */
.j-dynamic .comment-parent .content pre {
    background: #282c34; color: #abb2bf; padding: 15px;
    margin: 10px 0; overflow-x: auto; border-radius: 4px;
    font-family: Consolas, Monaco, monospace; font-size: 13px;
    line-height: 1.5; border: 1px solid #181a1f;
}
.j-dynamic .comment-parent .content code {
    font-family: Consolas, Monaco, monospace; padding: 2px 4px;
    background: rgba(175, 184, 193, 0.2); color: #e06c75; border-radius: 3px;
}
.j-dynamic .comment-parent .content pre code { background: transparent; padding: 0; color: inherit; }

/* 夜间模式代码块 */
html[data-night="night"] .j-dynamic .comment-parent .content pre { background: #1b1b22; border-color: var(--w-border); color: #cfd0d3; }

/* 9. 分页与响应式 */
.j-pagination { display: flex; justify-content: center; gap: 8px; list-style: none; margin: 25px 0; }
.j-pagination li a {
    padding: 7px 15px; background: var(--w-bg);
    color: var(--w-text); text-decoration: none;
    border: 1px solid var(--w-border); font-size: 13px;
}
.j-pagination li.active a { background: var(--w-theme); color: #fff; border-color: var(--w-theme); }

@media (max-width: 768px) {
    .j-dynamic .form-foot { flex-wrap: wrap; padding: 10px; }
    .j-dynamic .respond form .form-foot button[type='submit'] { width: 100%; margin-top: 10px; height: 35px; }
    .j-dynamic .ua-info { font-size: 10px; }
}

/* 10. 密语按钮垂直对齐修复 */
.j-dynamic .comment_box {
    display: inline-flex !important;
    align-items: center !important; /* 确保垂直居中 */
    justify-content: center;
    padding: 0 10px;
    height: 32px;
    line-height: 32px; /* 明确行高 */
}

.j-dynamic .comment_box i,
.j-dynamic .comment_box .title {
    line-height: 1 !important; /* 重置行高差异 */
    vertical-align: middle !important; /* 强制垂直对齐 */
}