/* 全局重置 & 基础样式 */
*{
  margin:0;
  padding:0;
  box-sizing:border-box; /* 关键：盒模型统一 */
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html,body{
  width:100%;
  overflow-x:hidden; /* 禁止横向滚动 */
  -webkit-overflow-scrolling:touch; /* 优化iOS滚动体验 */
}
body{
  background:#f8f9fa;
  color:#333;
  transition:.3s;
  font-size:14px;
  line-height:1.5;
  /* 新增：防止缩放 */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body.dark{background:#1a1a1a;color:#eee}
a{text-decoration:none}
button, input, textarea, select{font-size:14px;outline:none;border:none}

/* 图片预览遮罩 */
#previewMask{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.9);display:none;justify-content:center;align-items:center;
    z-index:9999;
    overflow: hidden; /* 遮罩内禁止滚动 */
}
#previewImg{
    max-width:95%;
    max-height:90vh;
    border-radius:8px;
    object-fit:contain;
}

/* 头部 */
.header{background:#fff;border-bottom:1px solid #eee;padding:10px 15px;position:sticky;top:0;z-index:10}
body.dark .header{background:#222;border-color:#333}
.header_in{
    max-width:800px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    width: 100%;       /* 关键：头部内容宽度100%，不溢出 */
    padding: 0 5px;    /* 预留小边距，避免贴边 */
}
.logo{font-size:16px;font-weight:600;color:#165DFF}

/* 主题切换按钮 */
.toggle{
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border:2px solid #ccc;border-radius:50%;cursor:pointer;font-size:16px;
    background:transparent;transition:.2s;margin-right:8px
}
.toggle:hover{background:#f0f0f0;border-color:#165DFF}
body.dark .toggle{border-color:#666}
body.dark .toggle:hover{background:#333}

/* 头像 & 未登录按钮 */
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;cursor:pointer}
.no-login{
    padding:5px 12px;background:#165DFF;color:#fff;
    border-radius:20px;font-size:13px;cursor:pointer
}

/* 发帖/回帖人头像样式 + 蓝V定位 */
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    position: relative;
}
.post-header, .reply-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    width: 100%; /* 关键：头部容器宽度100%，防止子元素溢出 */
}

/* 蓝V样式 */
.v-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background-color: #165DFF;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    text-align: center;
    line-height: 14px;
    font-weight: bold;
    border: 1px solid #fff;
}
body.dark .v-icon {
    border-color: #222;
}

/* 个人中心大头像蓝V */
.avatar-big {
    position: relative;
}
.avatar-big .v-icon {
    width: 20px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
}

/* 通知按钮样式 */
.notification-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    position: relative;
    transition: .2s;
}
body.dark .notification-btn {
    background: #333;
}
.notification-btn:hover {
    background: #e0e0e0;
}
body.dark .notification-btn:hover {
    background: #444;
}

/* 通知徽章 */
.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff4444;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid #fff;
}
body.dark .notification-badge {
    border-color: #222;
}

/* 通知列表样式 */
.notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .2s;
}
body.dark .notification-item {
    border-color: #333;
}

.notification-item:hover {
    background: #f8f9fa;
}
body.dark .notification-item:hover {
    background: #2a2a2a;
}

.notification-item.unread {
    background: #fff3cd;
}
body.dark .notification-item.unread {
    background: #3a3a1a;
}

.notification-content {
    flex: 1;
}

.notification-message {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.4;
}

.notification-time {
    font-size: 12px;
    color: #666;
}
body.dark .notification-time {
    color: #aaa;
}

.notification-dot {
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 弹窗遮罩 */
.mask{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.5);display:none;justify-content:center;
    align-items:center;z-index:999;padding:0 15px;
    overflow: hidden; /* 弹窗遮罩禁止滚动 */
}
.box{
    background:#fff;width:100%;max-width:420px;
    padding:20px;border-radius:12px;max-height:85vh;
    overflow-y:auto;position:relative;
    box-sizing: border-box; /* 关键：弹窗内边距计入宽度 */
}
body.dark .box{background:#2c2c2c}

/* 关闭按钮 */
.close_btn{
    position:absolute;right:10px;top:10px;
    width:36px;height:36px;border-radius:50%;
    background:#eee;border:none;font-size:18px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    z-index:10;
}
body.dark .close_btn{background:#444;color:#eee}
.close_btn:hover{background:#ddd}
body.dark .close_btn:hover{background:#555}

/* 表单元素 */
input,button,textarea,select{
    width:100%;padding:12px;border-radius:8px;margin-bottom:12px;
    border:1px solid #ddd;
    box-sizing: border-box; /* 关键：表单元素内边距计入宽度 */
}
body.dark input,body.dark textarea,body.dark select{
    background:#333;border-color:#444;color:#eee;
}
body.dark input::placeholder,body.dark textarea::placeholder{color:#999}

button{
    background:#165DFF;color:#fff;border:none;cursor:pointer;
    height:44px;line-height:44px;padding:0;
}
.tab_btn {
  background: #165DFF; 
  color: #fff;
  height:40px;
}
.tab_btn.active {
  background: #ccc; 
  color: #333;
}
.btn2{background:#666}
.btn_red{background:#ff4444}
.btn_orange{background:#ff7d00}
.btn_green{background:#009955}
.btn_purple{background:#7B61FF}
.msg{color:red;text-align:center;margin-bottom:10px}

/* 匿名选项 */
.anon_row{
    display:flex;align-items:center;gap:6px;margin-bottom:12px;
    font-size:13px;color:#666;
    width: 100%; /* 关键：匿名选项容器宽度100% */
}
body.dark .anon_row{color:#bbb}
.anon_row input{width:auto;margin:0}

/* 文件上传行 */
.file-row{
    display:flex;gap:6px;margin-bottom:12px;
    width: 100%; /* 关键：文件上传行宽度100% */
}
.file-row input{display:none}
.file-row label{
    flex:1;background:#f1f1f1;padding:10px;border-radius:8px;text-align:center;cursor:pointer;
    position:relative;border:1px solid #ddd;
    height:44px;line-height:44px;
}
body.dark .file-row label{
    background:#333;border-color:#444;
}

/* 附件红点样式 */
.file-row label .badge {
    position:absolute;
    top:-6px;
    right:-6px;
    width:14px;
    height:14px;
    background:#ff4444;
    border-radius:50%;
    display:none;
}
.file-row label.has-file .badge {
    display:block;
}

/* 媒体文件样式（手机端不溢出 + 大小限制） */
.media{
    margin:8px 0;
    max-width: calc(100% - 40px);
    width: 100%;       /* 关键：媒体文件宽度100%（基于父容器） */
    border-radius:8px;
    cursor:pointer;
    border:2px solid #e0e0e0;
    padding:2px;
    max-height:220px;
    object-fit:contain;
}
body.dark .media{border-color:#444}
video.media{max-height:220px;width:100%}

/* 选项卡 */
.tab{display:flex;gap:8px;margin-bottom:14px;width:100%}
.tab button{flex:1}

/* 容器 */
.container{
    max-width:800px;
    margin:0 auto;
    padding:15px;
    width: 100%;       /* 关键：容器宽度100%，不溢出 */
    box-sizing: border-box; /* 内边距计入宽度 */
}

/* 卡片 */
.card{
    background:#fff;border-radius:12px;padding:15px;margin-bottom:12px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
    width: 100%;       /* 关键：卡片宽度100% */
    box-sizing: border-box; /* 内边距计入宽度 */
}
body.dark .card{background:#222;box-shadow:0 1px 3px rgba(0,0,0,0.2)}

/* 帖子样式 */
.post{
    padding:12px 0;border-bottom:1px solid #eee;
    width: 100%;       /* 关键：帖子宽度100% */
    box-sizing: border-box;
}
body.dark .post{border-color:#333}

.bar{
    display:flex;gap:12px;margin-top:8px;font-size:13px;
    flex-wrap:wrap;width:100%; /* 关键：操作栏宽度100% */
}
.bar a{text-decoration:none;color:#666}
body.dark .bar a{color:#bbb}
.del{color:#ff4444}
.report{color:#ff7d00}
.anon_tag{color:#999;font-size:11px;margin-left:6px}
.admin-del-reply {
    color: #d9534f;
    font-size:11px;
    margin-left:8px;
}

/* 回复区域（自适应、不超长、留边） */
.reply_box{
    margin-top:10px;
    padding-left:8px;
    border-left:2px solid #ddd;
    width: 100%;       /* 关键：回复区域宽度100% */
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}
body.dark .reply_box{border-color:#444}

.reply{
    padding:8px 0;
    font-size:13px;
    width: 100%;       /* 关键：回复项宽度100% */
    box-sizing: border-box;
}
.reply_name{font-weight:600;color:#165DFF;font-size:13px}
.reply_content{
    margin:2px 0;
    line-height:1.5;
    width: 100%;       /* 关键：回复内容宽度100% */
    word-break:break-word; /* 强制换行，防止长文本溢出 */
}
.reply_time{font-size:11px;color:#888}

/* 回复输入框（自适应不溢出） */
.reply_input {
    margin-top:10px;
    display: flex;
    gap:6px;
    align-items:center;
    flex-wrap: wrap;
    width: 100%;       /* 关键：回复输入框宽度100% */
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}
.reply_input input[type="text"] {
    flex:1;
    margin:0;
    height:44px;
    padding:0 12px;
    min-width:120px;
    box-sizing: border-box;
}
.reply_input .file-row {
    margin:0;
    height:44px;
    display:flex;align-items:center;
}
.reply_input .file-row label {
    margin:0;
    height:44px;
    width:44px;
    padding:0;
    border-radius:8px;
}
.reply_input .anon_row {
    margin:0;
    height:44px;
    display:flex;align-items:center;
    gap:4px;
    font-size:13px;
    white-space:nowrap;
}
.reply_input .anon_row input {
    margin:0;
}
.reply_input button[name="reply_btn"] {
    height:44px;
    padding:0 12px;
    margin:0;
    min-width:60px;
}

/* 头像区域 */
.avatar-section{text-align:center;margin-bottom:14px;width:100%}
.avatar-big{width:70px;height:70px;border-radius:50%;object-fit:cover}
.upload-box{margin:10px 0;width:100%}

/* 折叠面板 & 我的列表 */
.collapse{display:none;margin-top:10px;width:100%}
.my_list{
    margin-top:10px;max-height:200px;
    overflow-y:auto;padding-right:6px;
    width:100%;box-sizing:border-box;
}
.my_item{
    padding:8px 0;border-bottom:1px solid #eee;
    width:100%;box-sizing:border-box;
}
body.dark .my_item{border-color:#444}
.my_del{color:#ff4444;font-size:12px;margin-left:10px}

/* 未登录提示样式 */
.no-login-tip{
    text-align:center;
    padding:15px 0;
    color:#666;
    font-size:13px;
    width:100%;
}
.no-login-tip a{
    color:#165DFF;
    text-decoration:underline;
}
body.dark .no-login-tip{color:#bbb}
body.dark .no-login-tip a{color:#4080ff}

/* 文本域 */
textarea{
    width:100%;
    height:80px;
    padding:12px;
    border-radius:8px;
    border:1px solid #ddd;
    transition:.3s;
    resize:vertical;
    box-sizing: border-box; /* 关键：文本域内边距计入宽度 */
}}

/* 提及建议框样式 */
.mention-suggestion-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-height: 150px;
    overflow-y: auto;
    z-index: 1000;
}

.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    font-size: 14px;
}

.suggestion-item:hover,
.suggestion-item.selected {
    background-color: #f0f0f0;
}

.suggestion-item:last-child {
    border-bottom: none;
}

/* 深色模式下的@建议框 */
body.dark .mention-suggestion-box {
    background-color: #333;
    border-color: #555;
}

body.dark .suggestion-item {
    border-bottom-color: #444;
    color: #fff;
}

body.dark .suggestion-item:hover,
body.dark .suggestion-item.selected {
    background-color: #444;
}

.link {
    color: #d8d400;
    text-decoration: underline;
}