/* ===== Apple Mail Style Forum - CSS ===== */
/* 配色: 主色#007AFF(蓝), 背景#F5F5F7, 表面#FFFFFF, 文字#1D1D1F, 侧边栏#ECECEC, 蓝色标记#3B82F6 */
/* CSS前缀: .am2- */

:root {
    --am2-primary: #007AFF;
    --am2-bg: #F5F5F7;
    --am2-surface: #FFFFFF;
    --am2-text: #1D1D1F;
    --am2-text-secondary: #86868B;
    --am2-sidebar: #ECECEC;
    --am2-blue-marker: #3B82F6;
    --am2-border: #D1D1D6;
    --am2-radius: 8px;
    --am2-font: -apple-system, "SF Pro Text", "Noto Sans SC", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--am2-font);
    background: var(--am2-bg);
    color: var(--am2-text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
mark { background: rgba(0,122,255,0.12); color: var(--am2-primary); border-radius: 3px; padding: 0 2px; }

/* ===== Topbar ===== */
.am2-topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 48px; padding: 0 16px;
    background: rgba(245,245,247,0.85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--am2-border);
    position: sticky; top: 0; z-index: 100;
}
.am2-topbar-left { display: flex; align-items: center; gap: 8px; width: 240px; }
.am2-logo { width: 28px; height: 28px; }
.am2-brand { font-size: 16px; font-weight: 700; }
.am2-topbar-search { flex: 1; max-width: 500px; display: flex; align-items: center; gap: 6px; background: var(--am2-surface); border-radius: 6px; padding: 5px 10px; border: 1px solid var(--am2-border); }
.am2-search-input { border: none; background: none; outline: none; flex: 1; font-size: 13px; }
.am2-search-input::placeholder { color: var(--am2-text-secondary); }
.am2-filter-btn { color: var(--am2-text-secondary); padding: 2px; }
.am2-topbar-right { display: flex; align-items: center; gap: 8px; width: 240px; justify-content: flex-end; }
.am2-icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: var(--am2-text); }
.am2-icon-btn:hover { background: rgba(0,0,0,0.05); }
.am2-user { display: flex; align-items: center; gap: 6px; }
.am2-avatar-sm { width: 26px; height: 26px; border-radius: 50%; }
.am2-user span { font-size: 13px; font-weight: 500; }

/* ===== Layout ===== */
.am2-layout { display: flex; height: calc(100vh - 48px - 40px); }

/* ===== Mailbox Bar (Left) ===== */
.am2-mailbox-bar { width: 220px; flex-shrink: 0; background: var(--am2-sidebar); border-right: 1px solid var(--am2-border); padding: 12px; overflow-y: auto; }
.am2-compose-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px; background: var(--am2-primary); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.am2-compose-btn:hover { opacity: 0.9; }
.am2-mailbox-nav { margin-bottom: 16px; }
.am2-mailbox-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--am2-text); margin-bottom: 2px; }
.am2-mailbox-item:hover { background: rgba(0,0,0,0.05); }
.am2-mailbox-item.active { background: rgba(0,122,255,0.1); color: var(--am2-primary); font-weight: 600; }
.am2-mailbox-item span:nth-child(2) { flex: 1; }
.am2-unread-badge { font-size: 11px; color: var(--am2-text-secondary); background: rgba(0,0,0,0.06); border-radius: 10px; padding: 1px 8px; }
.am2-mailbox-item.active .am2-unread-badge { background: rgba(0,122,255,0.15); color: var(--am2-primary); }

.am2-mailbox-labels { margin-top: 16px; }
.am2-label-title { font-size: 11px; font-weight: 700; color: var(--am2-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 8px 6px; }
.am2-label-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 13px; margin-bottom: 1px; }
.am2-label-item:hover { background: rgba(0,0,0,0.05); }
.am2-label-item span:nth-child(2) { flex: 1; }
.am2-label-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.am2-label-blue { background: #007AFF; }
.am2-label-red { background: #FF3B30; }
.am2-label-green { background: #34C759; }
.am2-label-yellow { background: #FFCC00; }
.am2-label-count { font-size: 11px; color: var(--am2-text-secondary); }

/* Filter */
.am2-filter-group { margin-bottom: 12px; padding: 0 8px; }
.am2-filter-label { font-size: 11px; font-weight: 600; color: var(--am2-text-secondary); padding: 4px 0; }
.am2-filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.am2-filter-chip { padding: 3px 10px; border-radius: 12px; font-size: 11px; background: var(--am2-surface); color: var(--am2-text-secondary); border: 1px solid var(--am2-border); }
.am2-filter-chip.active { background: var(--am2-primary); color: #fff; border-color: var(--am2-primary); }

/* ===== Mail List (Middle) ===== */
.am2-mail-list { flex: 1; min-width: 0; overflow-y: auto; background: var(--am2-surface); border-right: 1px solid var(--am2-border); }
.am2-list-header { padding: 12px 16px; border-bottom: 1px solid var(--am2-border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.am2-list-header h2 { font-size: 18px; font-weight: 700; }
.am2-list-count { font-size: 13px; color: var(--am2-text-secondary); font-weight: 400; }
.am2-list-actions { display: flex; gap: 4px; margin-left: auto; }
.am2-list-btn { padding: 4px 8px; border-radius: 6px; color: var(--am2-text-secondary); }
.am2-list-btn:hover { background: var(--am2-bg); }
.am2-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--am2-text-secondary); width: 100%; }
.am2-breadcrumb a:hover { color: var(--am2-primary); }
.am2-breadcrumb span { color: var(--am2-text); font-weight: 500; }
.am2-new-post-btn { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--am2-primary); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; }

/* Mail items */
.am2-mail-items { }
.am2-mail-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--am2-border); transition: background 0.1s; }
.am2-mail-item:hover { background: var(--am2-bg); }
.am2-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--am2-blue-marker); flex-shrink: 0; margin-top: 6px; }
.am2-unread-spacer { width: 8px; flex-shrink: 0; margin-top: 6px; }
.am2-mail-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.am2-mail-body { flex: 1; min-width: 0; }
.am2-mail-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.am2-mail-sender { font-size: 13px; font-weight: 600; }
.am2-unread .am2-mail-sender { font-weight: 700; }
.am2-mail-label { font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 500; color: #fff; }
.am2-label-blue.am2-mail-label { background: #007AFF; }
.am2-label-red.am2-mail-label { background: #FF3B30; }
.am2-label-green.am2-mail-label { background: #34C759; }
.am2-label-yellow.am2-mail-label { background: #FFCC00; color: #1D1D1F; }
.am2-mail-time { font-size: 11px; color: var(--am2-text-secondary); margin-left: auto; }
.am2-mail-subject { font-size: 13px; font-weight: 600; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am2-mail-item:hover .am2-mail-subject { color: var(--am2-primary); }
.am2-tag-essence { font-size: 9px; padding: 1px 5px; background: #FF3B30; color: #fff; border-radius: 3px; flex-shrink: 0; }
.am2-tag-hot { font-size: 9px; padding: 1px 5px; background: #FF9500; color: #fff; border-radius: 3px; flex-shrink: 0; }
.am2-mail-preview { font-size: 12px; color: var(--am2-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.am2-mail-meta { display: flex; gap: 4px; font-size: 11px; color: var(--am2-text-secondary); }
.am2-mail-attach { width: 48px; height: 36px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }

/* Pagination */
.am2-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px; }
.am2-page-btn { min-width: 30px; height: 30px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; justify-content: center; color: var(--am2-primary); }
.am2-page-btn:hover { background: var(--am2-bg); }
.am2-page-btn.active { background: var(--am2-primary); color: #fff; font-weight: 600; }
.am2-page-dots { color: var(--am2-text-secondary); }

/* ===== Mail Detail (Right) ===== */
.am2-mail-detail { width: 340px; flex-shrink: 0; overflow-y: auto; background: var(--am2-surface); padding: 0; }
.am2-detail-header { padding: 8px 16px; border-bottom: 1px solid var(--am2-border); display: flex; align-items: center; }
.am2-detail-actions { display: flex; gap: 4px; }
.am2-detail-btn { padding: 4px 8px; border-radius: 6px; color: var(--am2-text-secondary); }
.am2-detail-btn:hover { background: var(--am2-bg); }
.am2-detail-body { padding: 16px; }
.am2-detail-subject { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.am2-detail-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--am2-border); }
.am2-detail-avatar { width: 36px; height: 36px; border-radius: 50%; }
.am2-detail-from { flex: 1; }
.am2-detail-sender { font-size: 13px; font-weight: 600; display: block; }
.am2-detail-time { font-size: 11px; color: var(--am2-text-secondary); }
.am2-detail-content p { font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
.am2-detail-img { width: 100%; border-radius: 6px; margin: 8px 0; }
.am2-detail-footer { margin-top: 20px; }
.am2-online-stats h3, .am2-hot-topics h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.am2-stat-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.am2-stat-row span:first-child { color: var(--am2-text-secondary); }
.am2-stat-row span:last-child { font-weight: 600; }
.am2-hot-topics { margin-top: 20px; }
.am2-hot-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.am2-hot-num { width: 20px; height: 20px; border-radius: 5px; background: var(--am2-bg); color: var(--am2-text-secondary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.am2-hot-1 { background: #FF3B30; color: #fff; }
.am2-hot-2 { background: #FF9500; color: #fff; }
.am2-hot-3 { background: #FFCC00; color: #1D1D1F; }
.am2-hot-item a { font-size: 12px; }
.am2-hot-item a:hover { color: var(--am2-primary); }

/* History */
.am2-history-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.am2-history-del { font-size: 11px; color: var(--am2-primary); }
.am2-history-del:hover { text-decoration: underline; }
.am2-clear-history { font-size: 12px; color: var(--am2-text-secondary); margin-top: 8px; }
.am2-clear-history:hover { color: #FF3B30; }

/* ===== Detail Post ===== */
.am2-detail-post { padding: 16px; border-bottom: 1px solid var(--am2-border); }
.am2-post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.am2-post-avatar { width: 40px; height: 40px; border-radius: 50%; }
.am2-post-from { flex: 1; }
.am2-post-sender { font-size: 14px; font-weight: 600; }
.am2-post-level { font-size: 11px; color: var(--am2-primary); font-weight: 500; }
.am2-post-time { font-size: 12px; color: var(--am2-text-secondary); display: block; }
.am2-post-floor { font-size: 11px; padding: 3px 8px; background: var(--am2-primary); color: #fff; border-radius: 10px; font-weight: 600; }
.am2-post-subject { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am2-post-content p { font-size: 14px; line-height: 1.8; margin-bottom: 14px; }
.am2-post-img { width: 100%; max-width: 600px; border-radius: 8px; margin: 14px 0; }
.am2-post-actions { display: flex; gap: 6px; padding-top: 14px; border-top: 1px solid var(--am2-border); }
.am2-action-btn { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 6px; background: var(--am2-bg); font-size: 12px; }
.am2-action-btn:hover { background: var(--am2-sidebar); }

/* Reply */
.am2-reply-section { padding: 16px; border-bottom: 1px solid var(--am2-border); }
.am2-reply-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.am2-reply-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--am2-border); }
.am2-reply-item:last-child { border-bottom: none; }
.am2-reply-avatar { width: 32px; height: 32px; border-radius: 50%; }
.am2-reply-body { flex: 1; }
.am2-reply-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.am2-reply-sender { font-size: 13px; font-weight: 600; }
.am2-reply-floor { font-size: 11px; color: var(--am2-text-secondary); }
.am2-reply-time { font-size: 11px; color: var(--am2-text-secondary); margin-left: auto; }
.am2-reply-body p { font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.am2-reply-actions { display: flex; gap: 10px; }
.am2-mini-btn { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--am2-text-secondary); padding: 3px 6px; border-radius: 4px; }
.am2-mini-btn:hover { background: var(--am2-bg); }

.am2-reply-box { display: flex; gap: 10px; padding: 16px; }
.am2-reply-box-avatar { width: 32px; height: 32px; border-radius: 50%; }
.am2-reply-box-body { flex: 1; }
.am2-reply-textarea { width: 100%; min-height: 72px; border: 1px solid var(--am2-border); border-radius: 8px; padding: 10px; font-size: 13px; font-family: inherit; resize: vertical; outline: none; }
.am2-reply-textarea:focus { border-color: var(--am2-primary); }
.am2-reply-box-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.am2-reply-tools { display: flex; gap: 4px; }
.am2-tool-btn { padding: 4px; border-radius: 4px; color: var(--am2-text-secondary); }
.am2-tool-btn:hover { background: var(--am2-bg); }
.am2-submit-btn { padding: 6px 16px; background: var(--am2-primary); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; }

/* Footer */
.am2-footer { text-align: center; padding: 10px; height: 40px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--am2-border); background: var(--am2-surface); }
.am2-footer p { font-size: 12px; color: var(--am2-text-secondary); }

/* Responsive */
@media (max-width: 1024px) { .am2-mail-detail { display: none; } }
@media (max-width: 768px) { .am2-mailbox-bar { display: none; } .am2-topbar-search { display: none; } }

/* ===== CMS Pagination (.jv-pagination) ===== */
.jv-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px; flex-wrap: wrap; }
.jv-pagination a, .jv-pagination span { min-width: 30px; height: 30px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; justify-content: center; color: var(--am2-primary); padding: 0 8px; }
.jv-pagination a:hover { background: var(--am2-bg); }
.jv-pagination .current { background: var(--am2-primary); color: #fff; font-weight: 600; }
.jv-pagination .disabled { color: var(--am2-text-secondary); cursor: default; }
.jv-pagination .rows { font-size: 12px; color: var(--am2-text-secondary); }

/* ===== CMS Comment System (.comment-*) ===== */
.comment-item { padding: 12px 0; border-bottom: 1px solid var(--am2-border); }
.comment-item:last-child { border-bottom: none; }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.comment-author { font-size: 13px; font-weight: 600; color: var(--am2-text); }
.comment-time { font-size: 11px; color: var(--am2-text-secondary); }
.comment-floor { font-size: 11px; color: var(--am2-text-secondary); }
.comment-content { font-size: 13px; line-height: 1.6; padding-left: 40px; color: var(--am2-text); }
.comment-content p { margin-bottom: 6px; }
.comment-actions { padding-left: 40px; margin-top: 4px; }
.comment-reply-btn { font-size: 11px; color: var(--am2-primary); padding: 3px 6px; border-radius: 4px; border: none; background: none; cursor: pointer; font-family: inherit; }
.comment-reply-btn:hover { background: var(--am2-bg); }
.comment-replies { padding-left: 40px; margin-top: 8px; }
.comment-reply-form { margin-top: 8px; }
.comment-reply-input { width: 100%; min-height: 60px; border: 1px solid var(--am2-border); border-radius: 8px; padding: 8px; font-size: 13px; font-family: inherit; resize: vertical; outline: none; background: var(--am2-surface); color: var(--am2-text); }
.comment-reply-input:focus { border-color: var(--am2-primary); }
.comment-reply-submit { padding: 4px 12px; background: var(--am2-primary); color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; margin-top: 4px; cursor: pointer; font-family: inherit; }
.comment-reply-submit:hover { opacity: 0.9; }
.comment-reply-submit:disabled { opacity: 0.5; cursor: default; }