/* public/assets/css/social/comment-maker.css */

.cmt-wrapper { padding: 32px 16px; position: relative; }
.cmt-header { text-align: center; margin-bottom: 32px; }
.cmt-title { font-size: 2.2rem; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
.cmt-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 700px; margin: 0 auto; line-height: 1.6; }

.cmt-workspace { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: center; }

/* ==========================================
   第一排：评论区重绘
   ========================================== */
.cmt-preview-wrapper { width: 100%; display: flex; justify-content: center; background: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="%23cbd5e1"/></svg>') repeat; background-color: #f1f5f9; border-radius: 16px; padding: 40px 20px; border: 1px solid var(--border-color); overflow-x: hidden; box-sizing: border-box; }
[data-theme="dark"] .cmt-preview-wrapper { background-color: #0f172a; background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="%23334155"/></svg>'); }

/* 渲染容器宽高锁定 */
.cmt-capture-area { width: 680px; min-width: 680px; padding: 24px 20px; font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; box-sizing: border-box; transform-origin: top center; border-radius: 12px; }

/* 主题颜色 */
.theme-light { background: #ffffff; color: #0f0f0f; }
.theme-light .cmt-time, .theme-light .action-btn { color: #606060; }

.theme-dark { background: #0f0f0f; color: #f1f1f1; }
.theme-dark .cmt-time, .theme-dark .action-btn { color: #aaaaaa; }

/* 共同元素布局 */
.cmt-pinned-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #606060; margin-bottom: 12px; padding-left: 56px; font-weight: 500; }
.theme-dark .cmt-pinned-row { color: #aaaaaa; }
.icon-pin { width: 16px; height: 16px; }

.cmt-main { display: flex; gap: 16px; align-items: flex-start; }
.cmt-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #e2e8f0; }

.cmt-body { flex: 1; display: flex; flex-direction: column; }
.cmt-meta-header { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 4px; line-height: 1.2; }
.cmt-name { font-size: 13px; font-weight: 500; margin-right: 4px; }
.cmt-time { font-size: 12px; margin-left: 4px; }

/* YouTube 风格专属 */
.style-yt .yt-badge { color: #aaaaaa; display: inline-flex; align-items: center; width: 14px; height: 14px; background: rgba(0,0,0,0.1); border-radius: 50%; padding: 2px; }
.theme-dark.style-yt .yt-badge { color: #0f0f0f; background: #aaaaaa; }

.cmt-text { font-size: 14px; line-height: 20px; white-space: pre-wrap; word-wrap: break-word; }

.cmt-actions { display: flex; align-items: center; margin-top: 8px; gap: 16px; }
.action-btn { display: flex; align-items: center; font-size: 12px; font-weight: 500; cursor: default; }
.action-btn svg { width: 24px; height: 24px; padding: 4px; box-sizing: border-box; }
.likes-count { margin-left: -2px; }
.action-reply { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; margin-left: 4px; }

.creator-heart-wrap { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.ch-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.ch-icon { position: absolute; bottom: -4px; right: -6px; width: 16px; height: 16px; background: #fff; border-radius: 50%; padding: 1px; box-sizing: border-box; }
.theme-dark .ch-icon { background: #0f0f0f; }

/* Bilibili 风格专属覆盖 (Pink power!) */
.style-bili .cmt-name { color: #fb7299; font-size: 14px; font-weight: 700; }
.style-bili .bili-lv { background: #fb7299; color: #fff; font-size: 10px; font-weight: 900; font-style: italic; padding: 0 4px; border-radius: 4px; margin-left: 4px; line-height: 14px; }
.style-bili .cmt-time { display: none; } /* B站时间在下方 */
.style-bili .cmt-bili-footer-meta { font-size: 12px; color: #999; margin-top: 8px; }
.style-bili .action-btn svg { width: 18px; height: 18px; margin-right: 4px; padding: 0; }
.style-bili .action-reply { text-transform: none; margin-left: 12px; }
.style-bili .bili-up-liked { color: #fb7299; font-size: 12px; display: inline-flex; align-items: center; margin-left: 16px; }
.style-bili .bili-up-liked::before { content: "♥"; margin-right: 4px; font-size: 14px; }
.style-bili .cmt-pinned-row { color: #fb7299; }
.style-bili .icon-pin { color: #fb7299; }

/* ==========================================
   第二排：控制面板 (网格)
   ========================================== */
.cmt-controls { width: 100%; box-sizing: border-box; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }

.control-section { display: flex; flex-direction: column; }
.control-section h4 { margin: 0 0 16px 0; font-size: 1rem; color: var(--text-main); border-bottom: 2px solid rgba(239, 68, 68, 0.2); padding-bottom: 8px; display: inline-block; width: fit-content; }

.input-group { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.input-group label { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.input-group input[type="text"], .input-group select, .input-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-body); color: var(--text-main); font-size: 0.95rem; outline: none; transition: 0.2s; box-sizing: border-box; }
.input-group input[type="text"]:focus, .input-group select:focus, .input-group textarea:focus { border-color: #ef4444; }
.input-group textarea { resize: vertical; font-family: inherit; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Checkbox UI */
.custom-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 8px; font-size: 0.95rem; font-weight: 600; color: var(--text-main); }
.custom-checkbox input { width: 16px; height: 16px; accent-color: #ef4444; cursor: pointer; }

.cmt-btn-primary { background: #ef4444; color: #fff; border: none; padding: 14px 20px; font-size: 1.05rem; font-weight: 800; border-radius: 12px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); width: 100%; }
.cmt-btn-primary:hover { background: #dc2626; transform: translateY(-2px); }

.cmt-info-card { background: var(--bg-surface); padding: 24px; border-radius: 16px; border: 1px solid var(--border-color); box-sizing: border-box; max-width: 1000px; margin: 0 auto; }

/* 📱 响应式 */
@media (max-width: 900px) {
    .cmt-controls { grid-template-columns: 1fr; gap: 24px; }
    .cmt-preview-wrapper { padding: 20px 10px; }
    .cmt-capture-area { transform-origin: top center; }
}